From a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期五, 06 六月 2025 19:19:34 +0800 Subject: [PATCH] 开发更新 --- admin/src/views/workorder/components/detail.vue | 322 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 236 insertions(+), 86 deletions(-) diff --git a/admin/src/views/workorder/components/detail.vue b/admin/src/views/workorder/components/detail.vue index 7246837..039bad0 100644 --- a/admin/src/views/workorder/components/detail.vue +++ b/admin/src/views/workorder/components/detail.vue @@ -1,63 +1,102 @@ <template> - <GlobalWindow width="820px" title="宸ュ崟璇︽儏" :visible.sync="visible" :confirm-working="isWorking" @close="close" - @confirm="confirm"> + <GlobalWindow width="100%" title="宸ュ崟璇︽儏" :withFooter="withFooter" :visible.sync="visible" :confirm-working="isWorking" + @confirm="confirm" @close="closeView"> <div class="main"> <div class="title"> - <span>宸ュ崟璇︽儏</span> - <div> - <div class="status primaryColor" v-if="info.dealStatus == 0 || info.dealStatus == null">寰呮寚娲�</div> - <div class="status" v-if="info.dealStatus == 1">宸叉寚娲�</div> - <div class="status gray" v-if="info.dealStatus == 2">宸插鐞�</div> + <div class="title_left"> + <span>宸ュ崟璇︽儏</span> + <div> + <div class="status primaryColor" v-if="info.dealStatus == 0 || info.dealStatus == null">寰呮寚娲�</div> + <div class="status green" v-if="info.dealStatus == 1">宸叉寚娲�</div> + <div class="status gray" v-if="info.dealStatus == 2">宸插鐞�</div> + </div> </div> + <el-button v-if="info.origin === 1 && isShow" @click="openWT">鏌ョ湅闂涓婃姤</el-button> </div> - <div class="list"> - <div class="item"> - <div class="la">浣嶇疆绫诲瀷</div> - <div class="val">{{ info.areaType == 0 ? '瀹ゅ唴缁翠慨' : '鍏叡缁翠慨' }}</div> + <div class="main_content"> + <div class="list"> + <div class="item"> + <div class="la">浣嶇疆绫诲瀷</div> + <div class="val">{{ info.areaType == 0 ? '瀹ゅ唴缁翠慨' : '鍏叡缁翠慨' }}</div> + </div> + <div class="item"> + <div class="la">瀵瑰簲浣嶇疆</div> + <div class="val">{{ info.projectName }}/{{ info.buildingName }} / {{ info.roomNum || info.floorName }}</div> + </div> + <div class="item"> + <div class="la">宸ュ崟鍒嗙被</div> + <div class="val">{{ info.categoryName }}</div> + </div> + <div class="item"> + <div class="la">鏉ユ簮</div> + <div class="val" v-if="info.origin === 0">鑷缓</div> + <div class="val" v-if="info.origin === 1">闂杞伐鍗�</div> + </div> + <div class="item"> + <div class="la">涓婃姤浜�</div> + <div class="val">{{ info.creatorName }}{{ info.creatorCompany ? "-" + info.creatorCompany : '' }}</div> + </div> + <div class="item"> + <div class="la">涓婃姤浜虹數璇�</div> + <div class="val">{{ info.creatorPhone || info.creatorMobile }}</div> + </div> + <div class="item"> + <div class="la">涓婃姤鏃堕棿</div> + <div class="val">{{ info.createDate }}</div> + </div> + <div class="item max" v-if="info.areaType == 0"> + <div class="la">涓婇棬鏃堕棿</div> + <div class="val">{{ info.getDate }}</div> + </div> + <div class="item max"> + <div class="la">闂鎻忚堪</div> + <div class="val">{{ info.content }}</div> + </div> + <div class="item max"> + <div class="la">闂鍥剧墖</div> + <div class="value" v-if="info.fileList == null || !info.fileList.length">鏃�</div> + <div class="value" v-if="info.fileList != null && info.fileList.length"> + <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> + <!-- <video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls + preload="auto" style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" /> --> + <el-image v-if="item.type == 0" style="width:80px; height: 80px" :src="item.fileurlFull" + :preview-src-list="[item.fileurlFull]"> + </el-image> + </div> + </div> + </div> + <div v-if="info.fileList && info.fileList.length > 0 && info.fileList.filter(i => i.type == 1).length > 0" + class="item max"> + <div class="la">闂瑙嗛</div> + <div class="value"> + <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> + <video v-if="item.type == 1" ref="videoRef" controls preload="auto" + style="width: 240px;height: 160px;object-fit: contain;" :src="item.fileurlFull" /> + </div> + </div> + </div> </div> - <div class="item"> - <div class="la">瀵瑰簲浣嶇疆</div> - <div class="val">{{ info.buildingName }} / {{ info.roomNum || info.floorName }}</div> - </div> - <div class="item"> - <div class="la">宸ュ崟绫诲埆</div> - <div class="val">{{ info.categoryName }}</div> - </div> - <div class="item"> - <div class="la">涓婃姤浜�</div> - <div class="val">{{ info.creatorName }}</div> - </div> - <div class="item"> - <div class="la">涓婃姤浜虹數璇�</div> - <div class="val">{{ info.creatorPhone }}</div> - </div> - <div class="item"> - <div class="la">涓婃姤鏃堕棿</div> - <div class="val">{{ info.createDate }}</div> - </div> - <div class="item max"> - <div class="la">涓婇棬鏃堕棿</div> - <div class="val">{{ info.getDate }}</div> - </div> - <div class="item max"> - <div class="la">闂鎻忚堪</div> - <div class="val">{{ info.content }}</div> - </div> - <div class="item max"> - <div class="la">闂鍥剧墖</div> - <div class="value" v-if="info.fileList == null || !info.fileList.length">鏃�</div> - <div class="value" v-if="info.fileList != null && info.fileList.length"> - <div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px"> - <video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls preload="auto" - style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" /> - <el-image v-else-if="item.fileurlFull" style="width:80px; height: 80px" :src="item.fileurlFull" - :preview-src-list="[item.fileurlFull]"> - </el-image> + <div class="side"> + <div class="title">宸ュ崟娴佽浆璁板綍</div> + <div class="flow_list"> + <div class="item" v-for="item, i in info.logList"> + <div class="icon"> + <div class="dian"></div> + <div v-if="i < info.logList.length - 1" class="line"></div> + </div> + <div class="content"> + <div class="name">{{ item.title }}</div> + <div class="time">鎿嶄綔鏃堕棿锛歿{ item.createDate }}</div> + <div class="creator">鎿嶄綔浜猴細{{ item.param1 }}</div> + <div class="creator" v-if="item.param2">鎸囨淳缁欙細{{ item.param2 }}</div> + </div> </div> </div> </div> </div> - <div class="title">宸ュ崟澶勭悊</div> + <div class="title" + v-if="info.dealStatus == 2 || info.dealStatus == 0 || (info.dealStatus == 1 && info.dealUserId === userInfo.id)"> + {{ info.dealStatus == 0 || info.dealStatus == 1 ? '宸ュ崟澶勭悊' : '澶勭悊缁撴灉' }}</div> <el-form :model="param" ref="form" :rules="rules"> <template v-if="info.dealStatus == 0 || info.dealStatus == null"> <el-form-item label="澶勭悊鏂瑰紡" prop="dealType"> @@ -80,12 +119,12 @@ <el-date-picker type="datetime" class="w400" v-model="param.getDate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" placeholder="璇烽�夋嫨"></el-date-picker> </el-form-item> - <el-form-item label="鍥炲鍐呭" prop="dealInfo"> + <el-form-item label="澶勭悊璇存槑" prop="dealInfo"> <el-input type="textarea" class="w400" :rows="4" v-model="param.dealInfo" placeholder="璇峰~鍐欒鏄�"></el-input> </el-form-item> <el-form-item label="鐜板満鍥剧墖"> <div class="file_list"> - <el-upload class="avatar-uploader" :data="uploadData" multiple :limit="6" :auto-upload="true" :action="uploadImgUrl" + <el-upload class="avatar-uploader" :data="uploadData" :auto-upload="true" :action="uploadImgUrl" :show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError" :before-upload="beforeUpload"> <div class="upload_wrap"> @@ -105,14 +144,18 @@ <template v-if="info.dealStatus == 2"> <div class="list"> <div class="item item2"> - <div class="la">澶勭悊鏃堕棿锛�</div> - <div class="val">{{ info.getDate }}</div> + <div class="la">{{ info.dispatchUserId ? '澶勭悊浜�' : '鍥炲浜�' }}锛�</div> + <div class="val">{{ info.dealUserName }}{{ info.dealUserCompany ? '-' + info.dealUserCompany : '' }}</div> </div> <div class="item item2"> - <div class="la">澶勭悊澶囨敞锛�</div> + <div class="la">{{ info.dispatchUserId ? '澶勭悊鏃堕棿' : '鍥炲鏃堕棿' }}锛�</div> + <div class="val">{{ info.dealDate || info.getDate }}</div> + </div> + <div class="item item2"> + <div class="la">{{ info.dispatchUserId ? '澶勭悊璇存槑' : '鍥炲鍐呭' }}锛�</div> <div class="val">{{ info.dealInfo }}</div> </div> - <div class="item item2"> + <div v-if="info.dealFileList != null && info.dealFileList.length" class="item item2"> <div class="la">鐜板満鐓х墖锛�</div> <div class="value" v-if="info.dealFileList == null || !info.dealFileList.length">鏃�</div> <div class="value" v-if="info.dealFileList != null && info.dealFileList.length"> @@ -128,6 +171,8 @@ </div> </template> </el-form> + <!-- 闂涓婃姤璇︽儏 --> + <ProblemReportingDetails ref="problem_Reporting_Details" @close="closeDetails" /> </div> </GlobalWindow> </template> @@ -135,18 +180,24 @@ <script> import GlobalWindow from '@/components/common/GlobalWindow' import BaseOpera from '@/components/base/BaseOpera' +// import ProblemReportingDetails from './problemReportingDetails' +// import ProblemReportingDetails from '@/views/workorder/components/problemReportingDetails' import { detailById, dispatchOrder, dealOrder } from '@/api/workorder/ywWorkorder' +import { getByWorkorderId } from '@/api/ywProblem' import { getUserList } from '@/api/system/user' import { Message, Loading } from 'element-ui' +import { mapState } from 'vuex' +import dayjs from 'dayjs' export default { + name: 'detail', components: { - GlobalWindow + GlobalWindow, + ProblemReportingDetails: () => import('./problemReportingDetails') }, extends: BaseOpera, data() { return { id: '', - visible: false, param: { dealType: 0 }, @@ -160,27 +211,59 @@ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch', dealFileList: [], uploadData: { - folder: 'HIDDEN_DANGER_FILE' + folder: 'YW_WORKORDER_FILE' }, + isShow: true, + test: false } }, computed: { userInfo() { return this.$store.state.userInfo + }, + withFooter() { + if (this.info) { + return this.info.dealStatus === 0 || (this.info.dealStatus === 1 && (this.userInfo.id === this.info.dealUserId)); + } else { + return false; + } } }, created() { this.getStaff() }, methods: { + closeDetails() { + console.log('1') + this.test = false + }, + closeView() { + this.$emit('close') + this.visible = false + }, + open (title, target, show) { + this.title = title + this.isShow = show + this.id = target.workorderId + this.getDetail() + }, + openWT() { + getByWorkorderId(this.id) + .then(res => { + this.test = true + this.$nextTick(() => { + this.$refs.problem_Reporting_Details.open('闂涓婃姤璇︽儏', res, false) + }) + }) + }, confirm() { this.$refs['form'].validate((valid) => { if (valid) { const { param, id, dealFileList, info } = this let fn = null - if(info.dealStatus == 0 || info.dealStatus == null){ + if (info.dealStatus == 0 || info.dealStatus == null) { fn = param.dealType == 0 ? dispatchOrder : dealOrder - }else{ + } else { fn = dealOrder } fn({ @@ -199,6 +282,10 @@ const { id } = this detailById(id).then(res => { this.info = res + if (this.info.dealStatus == 1) { + this.$set(this.param, 'getDate', dayjs().format('YYYY-MM-DD HH:mm:ss')) + } + this.visible = true }) }, getStaff() { @@ -269,32 +356,41 @@ padding-top: 20px; .title { - font-weight: 500; - font-size: 18px; - color: $primary-color; + margin-bottom: 10px; display: flex; align-items: center; - - .status { - padding: 0 6px; - height: 22px; - line-height: 22px; - border-radius: 2px; - border: 1px solid #00BA92; - color: #00BA92; - font-weight: 400; - font-size: 12px; - margin-left: 10px; - } - - .primaryColor { - border: 1px solid $primary-color; - } - - .gray { - color: gray; - border: 1px solid gray; + justify-content: space-between; + .title_left { + display: flex; + align-items: center; + font-weight: 500; + font-size: 18px; + color: $primary-color; + .status { + padding: 0 12px; + height: 24px; + line-height: 24px; + border-radius: 2px; + border: 1px solid #00BA92; + color: #00BA92; + font-weight: 400; + font-size: 12px; + margin-left: 10px; + } + .primaryColor { + border: 1px solid rgba(63, 126, 239, .2); + background-color: rgba(63, 126, 239, .2); + } + .green { + background-color: rgba(83, 183, 148, .2); + border: 1px solid rgba(83, 183, 148, .2); + } + .gray { + color: #333333; + background-color: rgba(128, 128, 128, .2); + border: 1px solid rgba(128, 128, 128, .2); + } } } @@ -308,11 +404,11 @@ .item { width: 33.3%; - margin-bottom: 12px; + margin-bottom: 14px; .la { color: #7f7f7f; - margin-top: 2px; + margin-bottom: 6px; } } @@ -320,12 +416,66 @@ width: 100%; display: flex; align-items: center; + + .la { + margin-bottom: 0; + width: 72px; + } } .max { width: 100%; } } + + .main_content { + display: flex; + + .side { + width: 370px; + + .title { + font-size: 14px; + } + + .flow_list { + .item { + display: flex; + + .icon { + width: 28px; + display: flex; + flex-direction: column; + align-items: center; + + .dian { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #e89e42; + } + + .line { + width: 1px; + height: 100%; + background-color: #e89e42; + } + } + + .content { + font-size: 12px; + color: #999999; + padding-bottom: 12px; + + .name { + font-size: 13px; + color: #333333; + } + } + } + } + } + } } .file_list { -- Gitblit v1.9.3