aiot-app/pages/salesServiceManagement/workOrder/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="售后工单"
			@clickLeft="back">
		</uni-nav-bar>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput @clear="clearSearch" prefixIcon="search" style="width: 460rpx" v-model="searchVal"
					placeholder="名称">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="doSearch">搜索</button>
			<image class="menu_icon" src="~@/static/pda/menu.svg" @click="showSearch"></image>
		</view>
		<view class="">
			<view class="tab_box rx-sc">
				<view class="tab_item" v-for="(item,index) in tabList" :key="index"
					:class="{active: pickTabIndex == item.value}">
					<view @click="changeChartsTab(item.value)">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent" style="height: auto;">
				<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
					<myCard @addSpareItems="addSpareItems(item.id)" @report="edit('report',item.id)"
						@edit="edit('edit',item.id)" @details="edit('view',item.id)" @handleAudit="handleAudit(item)"
						@checkAndAccept="checkAndAccept(item)" @evaluate="evaluate(item)" :item="item" :index="index+1"
						@receive="receive(item)" :columns="columns" :btnList="btnList">
					</myCard>

					<u-empty v-show="emptyShow && tableList.length==0" width="300" height="300" textSize="30"></u-empty>
				</view>
			</u-list>
		</view>
		<CheckAndAccept ref="acceptRef" @getList='doSearch' />
		<Evaluate ref="evaluateRef" @getList='doSearch' />
		<u-toast ref="uToast"></u-toast>
		<MySearch :show.sync="searchShow" :formItems="formItems" @search="confirmSearch">
		</MySearch>
	</view>
</template>

<script>
	import {
		getSalesWorkOrder,
		receiveSalesWorkOrder
	} from '@/api/salesServiceManagement/workOrder/index.js'
	import myCard from '@/pages/saleManage/components/myCard.vue'
	import CheckAndAccept from './components/forWork/checkAndAccept.vue'
	import Evaluate from './components/forWork/evaluate.vue'
	export default {
		components: {
			myCard,
			CheckAndAccept,
			Evaluate
		},

		data() {
			return {
				searchForm: {},
				emptyShow: false,
				searchShow: false,
				formItems: [{
						label: '工单编号：',
						prop: 'code',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '客户名称：',
						prop: 'contactName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '设备名称：',
						prop: 'deviceName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					// {
					// 	label: '故障等级：',
					// 	prop: 'faultLevel',
					// 	component: 'MyInput',
					// 	props: {
					// 		placeholder: '请选择',
					// 		events:{
					// 			focus:(e)=>{
					// 				console.log('123');
					// 				console.log(e);
					// 			}
					// 		}
					// 	}
					// },
					{
						label: '计划单号：',
						prop: 'planCode',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},


					{
						label: '计划名称：',
						prop: 'planName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '报工人：',
						prop: 'executeUserName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '验收人：',
						prop: 'accepterUserName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
				],
				tabList: [{
						value: 'all',
						label: '全部',
					},
					{
						value: '0',
						label: '待执行',
					},
					{
						value: '1',
						label: '执行中',
					},
					{
						value: '3',
						label: '待验收',
					},
					{
						value: '5',
						label: '已完成',
					},
				],
				workOrderStatus: [
					// { code: 0, label: '待接收' },
					{
						code: 0,
						label: '待执行'
					},
					{
						code: 1,
						label: '已接收'
					},
					{
						code: 2,
						label: '执行中'
					},
					{
						code: 3,
						label: '待验收'
					},
					{
						code: 4,
						label: '待评价'
					},
					{
						code: 5,
						label: '已完成'
					},
					{
						code: 6,
						label: '验收不通过'
					}
				],
				pickTabIndex: 'all',
				searchVal: '',
				isEnd: false,
				page: 1,
				size: 10,
				tableList: [],
				columns: [
					[{
						label: '工单编号：',
						prop: 'code',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '计划单号：',
						prop: 'planCode'
					}],
					[{
						label: '计划名称：',
						prop: 'planName',
					}],
					[{
						label: '报工人：',
						prop: 'executeUserName'
					}, {
						label: '验收人：',
						prop: 'accepterUserName',
					}],
					[{
						label: '故障等级：',
						prop: 'faultLevel'
					}, {
						label: '客户名称：',
						prop: 'contactName',
					}],
					[{
						label: '设备名称：',
						prop: 'categoryName',
						formatter: (row) => {
							if (!row.deviceDetails) return '';
							let str = '';
							row.deviceDetails.map((el, idx) => {
								if (idx + 1 == row.deviceDetails.length) {
									str += el.categoryName;
								} else {
									str = str + '' + el.categoryName + ',';
								}
							});
							return str;
						}
					}],
					[{
						label: '验收时间：',
						prop: 'accepterTime'
					}, {
						label: '开始时间：',
						prop: 'acceptTime',
					}],
					[{
						label: '结束时间：',
						prop: 'finishTime'
					}, {
						label: '计划完成时间：',
						prop: 'planFinishTime',
					}],
					[{
						label: '实际售后时长：',
						prop: 'inFactDuration',
						formatter: (row) => {
							if (row.inFactDuration || row.inFactDuration == 0) {
								let str = ((row.inFactDuration - 0) / 60).toFixed(1);
								return str + '  小时';
							}
						}
					}, {
						label: '状态：',
						prop: 'orderStatus',
						formatter: (row) => {
							return this.workOrderStatus.find(
								(item) => item.code == row.orderStatus
							)?.label;
						}
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				],
				btnList: [{
						name: '详情',
						apiName: 'details',
						btnType: 'primary',
						type: '2',
						pageUrl: '',

					}, {
						name: '修改',
						apiName: 'edit',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [1, 6],

						}],
					},
					{
						name: '报工',
						apiName: 'report',
						btnType: 'error ',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [1, 6],
						}],
					}, {
						name: '接收',
						apiName: 'receive',
						btnType: 'error ',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [0],
						}],
					}, {
						name: '转派',
						apiName: 'handleAudit',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [0, 1],
						}],
					},
					{
						name: '验收',
						apiName: 'checkAndAccept',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [3, 6],
						}],
					},
					{
						name: '评价',
						apiName: 'evaluate',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [4],
						}],
					},
					{
						name: '申请配件',
						apiName: 'addSpareItems',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'orderStatus',
							value: [1, 2],
						}],
					},
				],
			}
		},
		computed: {},
		onLoad() {

		},
		onShow() {
			this.doSearch();
		},
		created() {

		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			changeChartsTab(value) {
				this.pickTabIndex = value;
				this.doSearch();
			},
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			//获取列表信息
			getList() {
				this.emptyShow = false
				if (this.isEnd) {
					this.$refs.uToast.show({
						message: "暂无更多数据",
						duration: 1000
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: this.size,
					keyWord: this.searchVal,
					...this.searchForm
				}
				if (this.pickTabIndex != 'all') {
					data.orderStatus = this.pickTabIndex;
				}
				getSalesWorkOrder(data).then(res => {
					if (this.page === 1) {
						this.tableList = res.list
						if (this.tableList.length === 0) {
							this.emptyShow = true
						}
					} else {
						this.tableList.push(...res.list)
					}
					this.page += 1
					this.isEnd = this.tableList.length >= res.count;
					uni.hideLoading();
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			scrolltolower() {
				if (this.isEnd) {
					return
				}
				this.getList();
			},
			// 申请配件
			addSpareItems(id) {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/workOrder/components/accessory?id=${id}`
				})
			},
			// 验收
			checkAndAccept(item) {
				this.$refs.acceptRef.open(item.id);
			},
			// 评价
			evaluate(item) {
				this.$refs.evaluateRef.open(item.id);
			},
			// 转派
			handleAudit(item) {
				console.log(item, 'item ---')
				uni.navigateTo({
					url: `/pages/salesServiceManagement/workOrder/components/forWork/transfer?id=${item.id}`
				})
			},
			// 报工
			edit(type, id) {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/workOrder/components/editPlan?type=${type}&id=${id}`
				})
			},
			// 接收
			async receive(item) {
				const data = await uni.showModal({
					title: '确认接收',
					content: '确定要接收这条数据吗?',
					confirmText: '接收',
					confirmColor: '#157a2c',
				});
				if (data[1].confirm) {
					const res = await receiveSalesWorkOrder(item);
					if (!res) return;
					this.$refs.uToast.show({
						type: "success",
						message: "操作成功",
					})
					this.doSearch();
				}
			},
			clearSearch() {
				this.searchVal = ''
				this.doSearch()
			},
			showSearch() {
				this.searchShow = true
			},
			confirmSearch(e) {
				console.log(e);
				let data = JSON.parse(JSON.stringify(e))
				this.searchForm = data
				this.doSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}

	.tab_box {
		width: 100%;
		height: 68rpx;
		border-bottom: 1rpx solid #E1E1E1;

		.tab_item {
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			color: #979C9E;

		}

		.active {
			box-sizing: border-box;
			border-bottom: 6rpx solid $theme-color;
			color: $theme-color;
		}
	}

	/deep/ .u-empty {
		margin-top: 200px !important;
	}
</style>