realty/virgo.wzfrontend/yui_wx/pageIndex/orderDetail/orderDetail.vue

<template>
	<view class="client-detail detail" v-if="detail.id">
		<view class="detail-box">
			<view class="title-box">
				<view class="title">{{detail.name}}</view>
				<view class="date">{{detail.date}}</view>
				<view class="title-icon">
					<uni-icons type="wallet-filled" color="#fff" size="20"></uni-icons>
				</view>
			</view>
			<view class="other">
				<div class="item" v-if="detail.type !== 3">
					<div class="label">关联租客</div>
					<div class="value"> {{detail.tenantType === 1 ? detail.merchantName: detail.clientName}}</div>
				</div>
				<view class="item" v-if="detail.type === 3">
					<view class="label">合同编码</view>
					<view class="value">{{detail.contractCode}}</view>
				</view>
				<div class="item">
					<div class="label">跟进人</div>
					<div class="value">{{detail.followUpPersonName}}</div>
				</div>
				<div class="item">
					<div class="label">联系电话</div>
					<div class="value">{{detail.followUpPersonPhone}}</div>
				</div>
				<div class="item" v-if="detail.type !== 3">
					<div class="label">服务方式</div>
					<div class="value">
						{{detail.type === 1?$field.findTypeName('serviceWorkWay',detail.workWay):$field.findTypeName('clearWorkWay',detail.workWay)}}
					</div>
				</div>
				<div class="item">
					<div class="label">摘要</div>
					<div class="value">{{detail.compendious || ''}}</div>
				</div>
			</view>
			<view class="state">
				<view class="create">
					<uni-icons class="inherit-icons" type="staff-filled" color="#08979c" size="18"></uni-icons>
					<text class="name hui-ellipsis">{{detail.followUpPersonName || '-'}}</text>
				</view>
				<view class="tag">
					<div class="status-tag info" v-if="!detail.status">待提交</div>
					<div class="status-tag primary" v-else-if="detail.status === 1">待处理</div>
					<div class="status-tag warning" v-else-if="detail.status === 2">处理中</div>
					<div class="status-tag success" v-else>已处理</div>
				</view>
			</view>
		</view>
		<view class="detail-box file-box" v-if="detail.attachment && detail.attachment !='[]'">
			<view class="sub-title">
				<uni-icons type="images-filled" class="inherit-icons" size="26" color="#08979c"></uni-icons>
				<text class="sub-label">工单附件</text>
			</view>
			<view class="other">
				<upload ref="upload" :list="detail.attachment ? JSON.parse(detail.attachment) : []" type="preview">
				</upload>
			</view>
		</view>
		<view class="detail-box" v-if="detail.data && detail.data != '[]'">
			<view class="sub-title">
				<uni-icons type="calendar-filled" class="inherit-icons" size="26" color="#08979c"></uni-icons>
				<text class="sub-label">自定义信息</text>
			</view>
			<view class="other">
				<div class="item" v-for="(item,index) in JSON.parse(detail.data)" :key="index">
					<div class="label">{{item.keyName}}</div>
					<div class="value">{{item.value}}</div>
				</div>
			</view>
		</view>
		<view class="detail-box" v-if="detail.workOrderProcessList.length > 0">
			<view class="sub-title">
				<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
				<text class="sub-label">工单过程</text>
			</view>
			<process :process="detail.workOrderProcessList" v-if="detail.workOrderProcessList.length > 0">
			</process>
		</view>
		<view class="hui-button-box" v-if="actionButton.length > 0">
			<view class="hui-button" v-for="(item,index) in actionButton" :key="index" @click="actionClick(item.type)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetailById,
		updateOrder
	} from '@/request/api/order.js'
	import upload from '@/components/common/upload.vue';
	import process from '@/components/common/process.vue';
	export default {
		data() {
			return {
				orderId: '',
				detail: {},
				user: {},
				actionButton: [],
				operation: {},
			}
		},
		onLoad(body) {
			if (body.orderId) this.orderId = body.orderId;
			this.init();
			this.user = this.$store.getters.user;
			uni.$on('reloadOrderDetail', () => {
				this.init();
			})
		},
		methods: {
			init() {
				if (!this.orderId) return;
				getOrderDetailById(this.orderId).then(res => {
					if (res.code === 200) {
						this.detail = res.data;
						this.role();
					}
				})
			},
			role() {
				let user = this.$store.getters.user,
					button = [];
				if (this.detail.userId === user.userId) { //创建者
					if (!this.detail.status) button.push({
						type: 1,
						name: '提交工单'
					})
				}
				let data = this.detail.workOrderProcessList.filter(node => !node.status);
				if (data.length > 0) { //未处理工单过程
					this.operation = data[0];
					//处理工单人员
					if (this.operation.operatorId === user.userId) button.push({
						type: 2,
						name: '处理工单'
					})
				}
				if (this.detail.followUpPerson === user.userId) { //跟进人
					if (this.detail.status === 1) button.push({
						type: 3,
						name: '开始工单'
					})
					if (this.detail.status === 2) button.push({
						type: 4,
						name: '指派人员'
					})
					if (data.length === 0 && this.detail.status === 2) button.push({
						type: 5,
						name: '完成工单'
					})
				}
				this.actionButton = button;
			},
			actionClick(type) {
				switch (type) {
					case 1:
						this.submitOrder('是否提交工单，提交后将不能再修改?', 1);
						break;
					case 2:
						this.$navigateTo('/pageIndex/orderHandle/orderHandle?operationId=' + this.operation.id);
						break;
					case 3:
						this.submitOrder('是否开始工单?', 2);
						break;
					case 4:
						this.$navigateTo('/pageIndex/selectUser/selectUser?orderId=' + this.detail.id);
						break;
					case 5:
						this.submitOrder('是否完成工单?', 3);
						break;
					default:
						break;
				}
			},
			submitOrder(msg, status) {
				uni.showModal({
					title: '有极提示',
					content: msg,
					success: res => {
						if (res.confirm) {
							this.update(status);
						}
					}
				});
			},
			update(status) {
				uni.showLoading();
				updateOrder({
					id: this.detail.id,
					status: status
				}).then(res => {
					if (res.code === 200) {
						this.init();
						this.$toast('操作成功')
						uni.$emit('reloadOrder');
					}
					uni.hideLoading();
				})
			},
		},
		components: {
			upload,
			process
		},
	}
</script>

<style lang="scss">
	.client-detail {
		padding-bottom: 100rpx;
	}
</style>