|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div class="hui-flex">
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div class="hui-detail">
|
|
|
+ <div class="hui-detail-title">基础信息</div>
|
|
|
+ <div class="hui-detail-content">
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">工单日期</div>
|
|
|
+ <div class="hui-detail-value">{{detail.date}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">工单名称</div>
|
|
|
+ <div class="hui-detail-value">{{detail.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item hui-detail-item-top">
|
|
|
+ <div class="hui-detail-label">楼宇房号</div>
|
|
|
+ <div class="hui-detail-value">
|
|
|
+ <div class="hui-ellipsis" v-for="(item,index) in detail.roomMap" :key="index">
|
|
|
+ {{item}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">关联租客</div>
|
|
|
+ <div class="hui-detail-value">
|
|
|
+ {{detail.tenantType === 1 ? detail.merchantName: detail.clientName}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">跟进人</div>
|
|
|
+ <div class="hui-detail-value">{{detail.followUpPersonName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">联系方式</div>
|
|
|
+ <div class="hui-detail-value">{{detail.followUpPersonPhone}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item" v-if="detail.type != 3">
|
|
|
+ <div class="hui-detail-label">服务方式</div>
|
|
|
+ <div class="hui-detail-value" v-if="detail.type === 1">
|
|
|
+ {{$field.findTypeName('serviceWorkWay',detail.workWay)}}
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-value" v-if="detail.type === 2">
|
|
|
+ {{$field.findTypeName('clearWorkWay',detail.workWay)}}
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-value" v-if="detail.type === 4">
|
|
|
+ {{$field.findTypeName('patrolWorkWay',detail.workWay)}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">关联租客</div>
|
|
|
+ <div class="hui-detail-value">{{detail.merchantName || detail.clientName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-item">
|
|
|
+ <div class="hui-detail-label">摘要</div>
|
|
|
+ <div class="hui-detail-value">{{detail.compendious}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-title">图片</div>
|
|
|
+ <div class="hui-detail-content hui-detail-image">
|
|
|
+ <upload ref="upload" :list="detail.attachment ? JSON.parse(detail.attachment) : []" type="preview">
|
|
|
+ </upload>
|
|
|
+ </div>
|
|
|
+ <div v-if="detail.data && detail.data != '[]'">
|
|
|
+ <div class="hui-detail-title">自定义信息</div>
|
|
|
+ <div class="hui-detail-content">
|
|
|
+ <div class="hui-detail-item" v-for="(item,index) in JSON.parse(detail.data)" :key="index">
|
|
|
+ <div class="hui-detail-label">{{item.keyName}}</div>
|
|
|
+ <div class="hui-detail-value">{{item.value}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-detail-title" v-if="detail.workOrderProcessList.length > 0">工单过程</div>
|
|
|
+ <process :process="detail.workOrderProcessList" v-if="detail.workOrderProcessList.length > 0">
|
|
|
+ </process>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-drawer-submit" v-if="actionButton.length > 0">
|
|
|
+ <el-button size="medium" type="primary" v-for="(item,index) in actionButton" :key="index"
|
|
|
+ @click="actionClick(item.type)">
|
|
|
+ {{item.name}}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="type == 1 ? '选择指派人员':'处理工单'" :visible.sync="visible"
|
|
|
+ width="880px" :append-to-body="true">
|
|
|
+ <select-user @callback="callBack" v-if="visible && type == 1" :maxLen="1"></select-user>
|
|
|
+ <action @callback="callBack" v-if="visible && type == 2" :operationId="operation.id"></action>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getOrderDetailById,
|
|
|
+ updateOrder,
|
|
|
+ insertOrderProcess
|
|
|
+ } from '@/httpApi/order'
|
|
|
+ import upload from '@/components/common/upload'
|
|
|
+ import selectUser from '@/components/common/selectUser'
|
|
|
+ import process from '@/components/work/order/process'
|
|
|
+ import action from '@/components/work/order/action'
|
|
|
+ export default {
|
|
|
+ props: ['detailId'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detail: {
|
|
|
+ name: '',
|
|
|
+ projectItemTargetRoomIds: '',
|
|
|
+ tenantType: 1,
|
|
|
+ merchantId: '',
|
|
|
+ clientId: '',
|
|
|
+ followUpPerson: '',
|
|
|
+ followUpPersonPhone: '',
|
|
|
+ workWay: '',
|
|
|
+ workOrderProcessList: []
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ type: 1,
|
|
|
+ operation: {},
|
|
|
+ actionButton: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.detailId) this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getOrderDetailById(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ 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.operationClick(2)
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.submitOrder('是否开始工单?', 2);
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ this.operationClick(1)
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ this.submitOrder('是否完成工单?', 3);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitOrder(msg, status) {
|
|
|
+ this.$confirm(msg, () => {
|
|
|
+ this.update(status);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ update(status) {
|
|
|
+ updateOrder({
|
|
|
+ id: this.detail.id,
|
|
|
+ status: status
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.init();
|
|
|
+ this.$message.success('操作成功');
|
|
|
+ this.$emit('callback', 'init')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ callBack(data) {
|
|
|
+ if (!data) return this.visible = false;
|
|
|
+ if (data == 'init') {
|
|
|
+ this.init();
|
|
|
+ return this.visible = false;
|
|
|
+ }
|
|
|
+ insertOrderProcess({
|
|
|
+ operatorId: data[0].id,
|
|
|
+ workOrderId: this.detailId,
|
|
|
+ status: 0,
|
|
|
+ attachment: '[]'
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.init();
|
|
|
+ this.visible = false;
|
|
|
+ this.$message.success('操作成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ operationClick(type) {
|
|
|
+ this.type = type;
|
|
|
+ this.visible = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ upload,
|
|
|
+ selectUser,
|
|
|
+ process,
|
|
|
+ action
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+</style>
|