lanan-repair-app/pages-order/orderList/orderList.vue

<template>
	<view class="container">
		<view class="body">
			<view class="tabList">
				<view v-for="(item, index) in tabList" :key="index" :class="{actived: item.id === activeKey}"
					class="tabItem" @click.stop="changeTabFun(item.id)">
					{{ item.title }}
					<text v-if="activeKey === item.id">({{total}})</text>
					<view v-if="activeKey === item.id" class="activeLine"></view>
				</view>
			</view>
			<view class="header" v-if="!isRepairWarehouse && activeKey==1">
				<view class="searchBox">
					<input class="searchInput" type="text" v-model="searchText"
						placeholder="工单号、车辆品牌、车牌号、手机号、客户姓名、经办人、工时项目" placeholder-style="font-size: 28rpx">
					<!--          <text class="searchBtn" @click="onRefresherrefresh">搜索</text>-->
					<text class="searchBtn" @click="clearText">清空</text>
				</view>
				<uni-datetime-picker style="line-height: 80rpx;" v-model="range" type="daterange"
					@maskClick="maskClick" />
				<view class="body-top-tab" style="line-height: 80rpx">
					<view class="body-top-tab-item">
						<picker @change="bindCusFromChange" :value="cusFromIndex" :range="cusFromList">
							<view class="uni-input">{{cusFromList[cusFromIndex]}}</view>
						</picker>
					</view>
					<view class="line"></view>
					<view class="body-top-tab-item">
						<picker @change="bindRepairTypeChange" :value="repairTypeIndex" :range="repairTypeList">
							<view class="uni-input">{{repairTypeList[repairTypeIndex]}}</view>
						</picker>
					</view>
					<view class="line"></view>
					<view class="body-top-tab-item">
						<picker @change="bindTicketsStatusChange" :value="ticketsStatusIndex"
							:range="ticketsStatusList">
							<view class="uni-input">{{ticketsStatusList[ticketsStatusIndex]}}</view>
						</picker>
					</view>
					<view class="line"></view>
					<view class="body-top-tab-item">
						<picker @change="bindWorkTypeChange" :value="workTypeIndex" :range="workeTypeList">
							<view class="uni-input">{{workeTypeList[workTypeIndex]}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="orderList" v-if="!isRepairWarehouse && activeKey==1">
				<scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
					refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<order-card :userInfo="userInfo" v-for="(item, index) in orderList" :key="index" :order="item"
						@childEvent="onRefresherrefresh" @doVoid="doVoidReq" @startWork="startWork"
						@addProj="addProj"></order-card>
					<view style="text-align: center" v-if="orderList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
			<view class="orderList" style="height: calc(100% - 86rpx)" v-else-if="!isRepairWarehouse && activeKey==0">
				<scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
					refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<order-card :userInfo="userInfo" v-for="(item, index) in orderList" :key="index" :order="item"
						@childEvent="onRefresherrefresh" @doVoid="doVoidReq" @startWork="startWork"
						@addProj="addProj"></order-card>
					<view style="text-align: center" v-if="orderList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
			<view class="orderList" style="height: calc(100% - 90rpx)" v-else>
				<scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
					refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<repair-so-card v-for="(item, index) in repairSoList" :key="index" :order="item"
						@childEvent="onRefresherrefresh" @startWork="startWork"></repair-so-card>
					<view style="text-align: center" v-if="repairSoList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="线下告知" confirmText="去签字" title="系统提示" content="客户是否在厂进行签字确认？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="addProjDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="修改已有项目" confirmText="新增项目" title="系统提示" content="是否需要新增项目？"
				@confirm="addProjDialogConfirm" @close="cancelDialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="线下告知" value="" placeholder="请填入告知方式!"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!--      作废modal框-->
		<view>
			<u-modal showCancelButton @cancel="doVoidCancel" @confirm="doVoidConfirm" :show="show" :title="title">
				<input type="text" v-model="voidData.remark" placeholder="请输入作废原因">
			</u-modal>
		</view>
		<project-picker ref="proj" @confirm="projConfirm"></project-picker>
		<tabBarVue v-if="isRepairWarehouse" title="采购单" msg="2"></tabBarVue>
		<tabBarVue v-else msg="2"></tabBarVue>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import ProjectPicker from "@/components/projectPicker.vue";
	import OrderCard from "@/components/orderCard.vue";
	import request from '@/utils/request';
	import {
		formatTimestamp,
		getOrderStatusText,
		builderOrder,
		saveTicketsRecords
	} from "@/utils/utils";
	import {
		getToken,
		getUserInfo,
		getStrData,
		getTenantId,
		setJSONData,
		getJSONData,
		getStorageWithExpiry,
		setStorageWithExpiry
	} from '@/utils/auth'
	import RepairSoCard from "@/components/repairSoCard.vue";

	export default {
		components: {
			OrderCard,
			tabBarVue,
			VNavigationBar,
			ProjectPicker,
			RepairSoCard
		},
		data() {
			return {
				show: false,
				title: '作废',
				voidData: {},
				//选中的维修单id
				ticketId: null,
				//新加的维修项目
				selectedProj: [],
				//告知客户的内容
				tellCusText: "",
				searchText: "",
				payShow: false,
				activeKey: 0,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				isRepairWarehouse: false, //是否是仓库管理员
				//下来刷新状态
				isTriggered: false,
				//日期默认选中范围
				range: [],
				imageUrl: '',
				tabList: [{
						id: 0,
						title: '待处理'
					},
					{
						id: 1,
						title: '全部'
					},
				],
				orderList: [],
				repairSoList: [],
				userInfo: {},
				//维修项目可选值
				repairTypeList: ['按维修类别'],
				//维修项目可选值--值
				repairTypeValueList: [''],
				//工种可选值
				workeTypeList: ['按工种类型'],
				//工种可选值--值
				workeTypeValueList: [''],
				// 维修项目选中下标
				repairTypeIndex: 0,
				// 工种选中下标
				workTypeIndex: 0,
				//客户来源可选值
				cusFromList: ['按客户来源'],
				//客户来源可选值---值
				cusFromValueList: [''],
				// 客户来源选中下标
				cusFromIndex: 0,
				//工单状态可选值
				ticketsStatusList: ['按工单状态', '进厂', '维修中', '已竣工', '已交车', '未结算', '在厂'],
				//工单状态可选值--值
				ticketsStatusValueList: ['', 'jinchang', 'weixiuzhong', 'yijungong', 'yijiaoche', 'weijiesuan',
					'zaichang'
				],
				//工单状态选中下标
				ticketsStatusIndex: 0,
				twId: null,
			}
		},
		watch: {
			range(newval) {
				this.onRefresherrefresh()
			},
			searchText(newval) {
				this.onRefresherrefresh()
			},
			repairTypeIndex(newval) {
				this.onRefresherrefresh()
			},
			cusFromIndex(newval) {
				this.onRefresherrefresh()
			},
			ticketsStatusIndex(newval) {
				this.onRefresherrefresh()
			},
			workTypeIndex(newval) {
				this.onRefresherrefresh()
			},
		},
		onLoad(data) {
			if (data && data.twId) {
				this.twId = data.twId
			} else {
				this.twId = null
			}
			if (!getToken()) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			} else {
				//直接取缓存中的用户信息
				this.userInfo = getUserInfo()
				if (this.userInfo.roleCodes.includes("repair_warehouse")) {
					this.tabList = [{
						id: 0,
						title: '采购单'
					}, ]
					this.isRepairWarehouse = true
				}
				//查2个数据字典备用---客户来源-cus_data_from、维修业务分类-repair_type
				this.initDict("repair_type")
				this.initDict("cus_data_from")
				this.initDict("repair_work_type")
			}
		},
		onShow() {
			if (!getToken()) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			} else {
				this.onRefresherrefresh()
			}
		},
		methods: {
			/**
			 * 去签字
			 */
			dialogConfirm() {
				uni.navigateTo({
					url: '/pages-home/service/sign-agin'
				})
			},
			/**
			 * 客户不在厂，手动输入
			 */
			dialogClose() {
				this.$refs.inputDialog.open()
			},
			/**
			 * 卡片的 修改项目 按钮点击
			 */
			addProj(order) {
				this.ticketId = order.id
				this.$refs.addProjDialog.open()
			},
			/**
			 * 新增项目
			 */
			addProjDialogConfirm() {
				this.$refs.proj.open()
			},
			/**
			 * 修改已有项目
			 */
			cancelDialogClose() {
				this.$refs.addProjDialog.close()
				uni.navigateTo({
					url: `/pages-order/orderDetail/orderDetail?id=${this.ticketId}&isDetail=0`
				});
			},
			/**
			 * 添加项目回调
			 */
			projConfirm(proj) {
				this.selectedProj = proj
				if (this.selectedProj.length > 0) {
					setJSONData("newProject", this.formatItem(this.selectedProj))
					this.$refs.alertDialog.open()
				}
				console.log(this.selectedProj, "selectedProj")
				console.log(this.ticketId, "this.ticketId")
			},
			// 子表信息预处理
			formatItem(list) {
				if (!(list && list.length > 0)) {
					return []
				}
				return list.map(item => {
					const temp = {
						...item,
						ticketId: this.ticketId,
						itemName: item.name,
						itemCount: 1,
						itemUnit: item.unit,
						itemPrice: item.price,
						itemDiscount: 1,
						itemMoney: item.price,
						itemTypeId: item.type,
						remark: item.remark,
						itemType: "01",
						itemStatus: "01",
						projectId: item.id,
						id: null
					}
					return temp;
				})
			},
			/**
			 * 保存当前项目
			 */
			dialogInputConfirm(val) {
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
				const newData = {
					itemList: getJSONData("newProject"),
					remark: val
				}
				request({
					url: '/admin-api/repair/titem/addNewProj',
					method: 'post',
					data: newData
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '添加维修项目成功！',
							icon: 'success'
						})
						uni.navigateTo({
							url: `/pages-order/orderDetail/orderDetail?id=${res.data}&isDetail=0`
						});
					} else {
						uni.showToast({
							title: '操作失败，请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 作废
			 */
			doVoidReq(row) {
				this.show = true
				this.voidData = {
					id: row.id,
					remark: '',
					ticketsStatus: '03'
				}
			},
			/**
			 * 作废请求后台方法
			 */
			doVoidConfirm() {
				request({
					url: '/admin-api/repair/tickets/void',
					method: 'POST',
					data: this.voidData
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: "success",
						})
					}
					this.doVoidCancel()
					this.onRefresherrefresh()
				})
			},
			doVoidCancel() {
				this.show = false
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			/**
			 * 切换客户来源
			 */
			bindCusFromChange(e) {
				this.cusFromIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换维修项目类型
			 */
			bindRepairTypeChange(e) {
				this.repairTypeIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换工种类型
			 */
			bindWorkTypeChange(e) {
				this.workTypeIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换工单状态
			 */
			bindTicketsStatusChange(e) {
				this.ticketsStatusIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 查2个数据字典备用---客户注册方式-cus_data_from、维修业务分类-repair_type
			 */
			initDict(dictCode) {
				let dictArray = getStorageWithExpiry(dictCode);
				if (null == dictArray || undefined == dictArray) {
					request({
						url: '/admin-api/system/dict-data/type',
						method: 'get',
						params: {
							type: dictCode
						}
					}).then((res) => {
						if (res.code == 200) {
							setStorageWithExpiry(dictCode, res.data, 3600)
							this.$nextTick(() => {
								res.data.map(item => {
									this.setDictItem(dictCode, item)
								})
							})
						}
					})
				} else {
					this.$nextTick(() => {
						dictArray.map(item => {
							this.setDictItem(dictCode, item)
						})
					})
				}
			},
			setDictItem(dictCode, item) {
				if ("repair_type" == dictCode) {
					//维修项目
					this.repairTypeList.push(item.label)
					this.repairTypeValueList.push(item.value)
				} else if ("cus_data_from" == dictCode) {
					//客户来源
					this.cusFromList.push(item.label)
					this.cusFromValueList.push(item.value)
				} else if ("repair_tickets_status" == dictCode) {
					//工单状态
					this.ticketsStatusList.push(item.label)
					this.ticketsStatusValueList.push(item.value)
				} else if ("repair_work_type" == dictCode) {
					//工单状态
					this.workeTypeList.push(item.label)
					this.workeTypeValueList.push(item.value)
				}
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.pageNo * this.pageSize >= this.total) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNo++
				//此处调用自己获取数据列表的方法
				if (this.repairSoList.length > 0 || this.orderList.length > 0) {
					if (this.isRepairWarehouse) {
						this.getRepairSoList()
					} else {
						this.getOrderList()
					}
				}
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				console.log('看看 执行几次');
				this.isTriggered = true
				this.pageNo = 1
				this.total = 0
				if (this.isRepairWarehouse) {
					this.getRepairSoList()
					this.repairSoList = []
				} else {
					this.getOrderList()
					this.orderList = []
				}
			},
			/**
			 * 清空
			 */
			clearText() {
				this.searchText = ""
			},
			/**
			 * 开始施工
			 */
			startWork(id) {
				let paramsObj = {
					ticketId: id
				}
				//先查当前用户在本工单下有几个维修项目
				request({
					url: '/admin-api/repair/titem/listProject',
					method: 'get',
					params: paramsObj
				}).then((res) => {
					console.log(res)
					if (res.code == 200 && res.data.length > 0) {
						if (res.data.length == 1) {
							//只有1个，直接开始施工
							this.startWorkRequest(id, "02", res.data[0].id, "02", "kssg", "开始施工")
						} else {
							uni.showActionSheet({
								itemList: res.data.map(m => m.itemName),
								success: ({
									tapIndex
								}) => {
									this.startWorkRequest(id, "02", res.data[tapIndex].id, "02",
										"kssg", "开始施工")
								}
							})
						}
					} else {
						uni.showToast({
							title: '操作失败，请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 开始施工请求后台
			 */
			async startWorkRequest(id, ticketsWorkStatus, itemId, itemStatus, recordType, remark) {
				try {
					const result = await saveTicketsRecords(id, ticketsWorkStatus, itemId, itemStatus, recordType,
						remark, null);
					console.error("result", result);
					this.onRefresherrefresh()
				} catch (error) {
					console.error(error);
				}
			},
			getOrderList() {
				let paramsObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					isFinish: "0",
					cusFrom: this.cusFromValueList[this.cusFromIndex],
					repairType: this.repairTypeValueList[this.repairTypeIndex],
					ticketsStatus: this.ticketsStatusValueList[this.ticketsStatusIndex],
					workType: this.workeTypeValueList[this.workTypeIndex]
				}
				console.log("this.searchText", this.searchText)
				if ('' != this.searchText) {
					paramsObj['ticketNo'] = this.searchText
				}
				if (this.range.length == 2) {
					paramsObj['startDate'] = this.range[0]
					paramsObj['endDate'] = this.range[1]
				}
				if (1 == this.activeKey) {
					//查所有订单
					paramsObj['selectType'] = "all"
				}
				request({
					url: '/admin-api/repair/tickets/pageType',
					method: 'get',
					params: paramsObj
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						let thisPageRecords = []
						if (res.data && res.data.hasOwnProperty("records")) {
							for (let i = 0; i < res.data.records.length; i++) {
								let order = res.data.records[i]
								let viewOrder = builderOrder(order)
								if (order.booking) {
									viewOrder['appointDate'] = formatTimestamp(order.createTime)
								}
								let projectList = []
								if (order.itemList) {
									for (let j = 0; j < order.itemList.length; j++) {
										let itemObj = order.itemList[j]
										if ("01" == itemObj.itemType) {
											projectList.push({
												id: itemObj.id,
												name: itemObj.itemName
											})
										}
									}
								}
								viewOrder['projectList'] = projectList
								thisPageRecords.push(viewOrder)
							}
						}
						//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
						if (this.pageNo != 1) {
							this.orderList = this.orderList.concat(thisPageRecords)
						} else {
							this.orderList = thisPageRecords
						}
						//将获取的总条数赋值
						this.total = res.data.total
						this.isTriggered = false
					}
				})
			},
			changeTabFun(id) {
				this.activeKey = id
				this.onRefresherrefresh()
			},
			gotoDetail(row) {
				if (row.goodsType === '2') {
					uni.navigateTo({
						url: '/pages-order/orderDetail/orderDetail?ticketsId=' + row.goodsId
					})
				} else {
					uni.navigateTo({
						url: '/pages-order/orderDetail/orderDetail'
					})
				}
			},
			/**
			 * 获取采购单
			 */
			getRepairSoList() {
				const paramsObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId: this.userInfo.id,
					soType: "01"
				}
				if (this.twId) {
					paramsObj.twId = this.twId
				}
				request({
					url: '/admin-api/repair/so/page',
					method: 'get',
					params: paramsObj
				}).then((res) => {

					//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
					if (this.pageNo != 1) {
						this.repairSoList = this.repairSoList.concat(res.data.records)
					} else {
						this.repairSoList = res.data.records
					}
					//将获取的总条数赋值
					this.total = res.data.total
					this.isTriggered = false
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background: #F3F5F7;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);
		color: #333333;

		.header {
			padding: 20rpx 22rpx 0 22rpx;
			background-color: #fff;

			.searchBox {
				background: #F3F5F7;
				padding: 20rpx 32rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				column-gap: 12rpx;

				.searchInput {
					flex: 1;
					width: 0;
				}

				.searchBtn {
					font-weight: 500;
					font-size: 28rpx;
					color: #0174F6;
				}
			}
		}

		.body {
			flex: 1;
			height: 0;
			padding: 24rpx 32rpx;
			overflow: auto;
		}

		.body-top-tab {
			background: white;
			display: flex;
			font-size: 30rpx;
			padding: 5rpx 0;
			align-items: center;

			.line {
				width: 2rpx;
				height: 60rpx;
				background-color: #DDDDDD;
			}

			.body-top-tab-item {
				flex: 1;
				width: 0;
				text-align: center;
				padding: 16rpx 5rpx;
				position: relative;

				&.active {
					color: #0174F6;
				}

				.activeLine {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 96rpx;
					height: 6rpx;
					background: #0174F6;
					border-radius: 4rpx 4rpx 0rpx 0rpx;
				}
			}
		}

		.tabList {
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 0 0;
			display: flex;
			align-items: center;
			padding: 0 40rpx;

			.tabItem {
				padding: 30rpx;
				flex: 1;
				//z-index: 9999999;
				text-align: center;
				position: relative;
				font-size: 28rpx;

				&.actived {
					color: #0174F6;
				}

				.activeLine {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 96rpx;
					height: 6rpx;
					background: #0174F6;
					border-radius: 4rpx 4rpx 0rpx 0rpx;
				}
			}
		}

		.orderList {
			//padding: 30rpx 0;
			padding-top: 10rpx;
			height: calc(100% - 390rpx);
			display: flex;
			flex-direction: column;

			.orderItem {}
		}
	}
</style>