From 38d365df7bd3e0db5e097cc4b73f173bdb149134 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期四, 10 四月 2025 09:35:18 +0800 Subject: [PATCH] 代码初始化 --- admin/src/components/business/OperaWorkorderDetailSheWindow.vue | 587 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 449 insertions(+), 138 deletions(-) diff --git a/admin/src/components/business/OperaWorkorderDetailSheWindow.vue b/admin/src/components/business/OperaWorkorderDetailSheWindow.vue index 9ddf6a1..39d43a8 100644 --- a/admin/src/components/business/OperaWorkorderDetailSheWindow.vue +++ b/admin/src/components/business/OperaWorkorderDetailSheWindow.vue @@ -1,124 +1,114 @@ <template> <GlobalWindow - :title="title" - width="60%" - :visible.sync="visible" - :confirm-working="isWorking" - @confirm="confirm" - > - <el-form :model="form" ref="form" :rules="rules"> - <el-form-item label="鍒涘缓浜虹紪鐮�" prop="creator"> - <el-input v-model="form.creator" placeholder="璇疯緭鍏ュ垱寤轰汉缂栫爜" v-trim/> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" prop="createDate"> - <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ垱寤烘椂闂�"></el-date-picker> - </el-form-item> - <el-form-item label="鏇存柊浜虹紪鐮�" prop="editor"> - <el-input v-model="form.editor" placeholder="璇疯緭鍏ユ洿鏂颁汉缂栫爜" v-trim/> - </el-form-item> - <el-form-item label="鏇存柊鏃堕棿" prop="editDate"> - <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ユ洿鏂版椂闂�"></el-date-picker> - </el-form-item> - <el-form-item label="鏄惁鍒犻櫎0鍚� 1鏄�" prop="isdeleted"> - <el-input v-model="form.isdeleted" placeholder="璇疯緭鍏ユ槸鍚﹀垹闄�0鍚� 1鏄�" v-trim/> - </el-form-item> - <el-form-item label="鎵�灞炲垎绫荤紪锛堝叧鑱攃ategory)" prop="categoryId"> - <el-input v-model="form.categoryId" placeholder="璇疯緭鍏ユ墍灞炲垎绫荤紪锛堝叧鑱攃ategory)" v-trim/> - </el-form-item> - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="form.remark" placeholder="璇疯緭鍏ュ娉�" v-trim/> - </el-form-item> - <el-form-item label="鐘舵�� 0寰呯‘璁�/寰呭垵瀹� 1寰呭垎閰�/寰呯粓瀹� 2寰呭鐞� 3 宸叉挙鍥� 4宸插鐞�" prop="status"> - <el-input v-model="form.status" placeholder="璇疯緭鍏ョ姸鎬� 0寰呯‘璁�/寰呭垵瀹� 1寰呭垎閰�/寰呯粓瀹� 2寰呭鐞� 3 宸叉挙鍥� 4宸插鐞�" v-trim/> - </el-form-item> - <el-form-item label="鎺掑簭鐮�" prop="sortnum"> - <el-input v-model="form.sortnum" placeholder="璇疯緭鍏ユ帓搴忕爜" v-trim/> - </el-form-item> - <el-form-item label="绫诲瀷 0浣嶇疆璐d换浜� 1鐝暱 2鐗╀笟涓荤 3宸ョ▼甯� 4SHE璐熻矗浜� 5SHE宸ュ崟閭鎶勯�佷汉" prop="type"> - <el-input v-model="form.type" placeholder="璇疯緭鍏ョ被鍨� 0浣嶇疆璐d换浜� 1鐝暱 2鐗╀笟涓荤 3宸ョ▼甯� 4SHE璐熻矗浜� 5SHE宸ュ崟閭鎶勯�佷汉" v-trim/> - </el-form-item> - <el-form-item label="涓婃姤浜哄憳缂栫爜锛堝叧鑱攎ember)" prop="memberId"> - <el-input v-model="form.memberId" placeholder="璇疯緭鍏ヤ笂鎶ヤ汉鍛樼紪鐮侊紙鍏宠仈member)" v-trim/> - </el-form-item> - <el-form-item label="閮ㄩ棬缂栫爜" prop="companyId"> - <el-input v-model="form.companyId" placeholder="璇疯緭鍏ラ儴闂ㄧ紪鐮�" v-trim/> - </el-form-item> - <el-form-item label="涓婃姤鏃堕棿" prop="submitDate"> - <el-input v-model="form.submitDate" placeholder="璇疯緭鍏ヤ笂鎶ユ椂闂�" v-trim/> - </el-form-item> - <el-form-item label="SHE娑夊強浜哄憳绫诲瀷 0鏈汉 1鍚屼簨 2渚涘簲鍟�" prop="memberType"> - <el-input v-model="form.memberType" placeholder="璇疯緭鍏HE娑夊強浜哄憳绫诲瀷 0鏈汉 1鍚屼簨 2渚涘簲鍟�" v-trim/> - </el-form-item> - <el-form-item label="SHE娑夊強浜哄憳浼佷笟缂栫爜闆嗗悎" prop="memberQwids"> - <el-input v-model="form.memberQwids" placeholder="璇疯緭鍏HE娑夊強浜哄憳浼佷笟缂栫爜闆嗗悎" v-trim/> - </el-form-item> - <el-form-item label="SHE娑夊強浜哄憳渚涘簲鍟嗛泦鍚�" prop="memberNames"> - <el-input v-model="form.memberNames" placeholder="璇疯緭鍏HE娑夊強浜哄憳渚涘簲鍟嗛泦鍚�" v-trim/> - </el-form-item> - <el-form-item label="鍙戠敓鍦扮偣/浣嶇疆缂栫爜锛堝叧鑱攃ategory锛�" prop="localtionId"> - <el-input v-model="form.localtionId" placeholder="璇疯緭鍏ュ彂鐢熷湴鐐�/浣嶇疆缂栫爜锛堝叧鑱攃ategory锛�" v-trim/> - </el-form-item> - <el-form-item label="鏄惁澶栭儴灏卞尰 0鍚� 1鏄�" prop="outJiuyi"> - <el-input v-model="form.outJiuyi" placeholder="璇疯緭鍏ユ槸鍚﹀閮ㄥ氨鍖� 0鍚� 1鏄�" v-trim/> - </el-form-item> - <el-form-item label="鏄惁鍖诲姟瀹� 0鍚� 1鏄�" prop="isYiwushi"> - <el-input v-model="form.isYiwushi" placeholder="璇疯緭鍏ユ槸鍚﹀尰鍔″ 0鍚� 1鏄�" v-trim/> - </el-form-item> - <el-form-item label="鏄惁鍙椾激 0鍚� 1鏄�" prop="isHurted"> - <el-input v-model="form.isHurted" placeholder="璇疯緭鍏ユ槸鍚﹀彈浼� 0鍚� 1鏄�" v-trim/> - </el-form-item> - <el-form-item label="鏄惁鍜屽伐浣滅浉鍏�" prop="workRelated"> - <el-input v-model="form.workRelated" placeholder="璇疯緭鍏ユ槸鍚﹀拰宸ヤ綔鐩稿叧" v-trim/> - </el-form-item> - <el-form-item label="浜嬩欢璇存槑" prop="eventInfo"> - <el-input v-model="form.eventInfo" placeholder="璇疯緭鍏ヤ簨浠惰鏄�" v-trim/> - </el-form-item> - <el-form-item label="閭欢閫氱煡浜哄憳缂栫爜闆嗗悎" prop="emialMemberIds"> - <el-input v-model="form.emialMemberIds" placeholder="璇疯緭鍏ラ偖浠堕�氱煡浜哄憳缂栫爜闆嗗悎" v-trim/> - </el-form-item> - <el-form-item label="浼佷笟寰俊閫氱煡浜哄憳缂栫爜闆嗗悎" prop="qwnoticeMemberIds"> - <el-input v-model="form.qwnoticeMemberIds" placeholder="璇疯緭鍏ヤ紒涓氬井淇¢�氱煡浜哄憳缂栫爜闆嗗悎" v-trim/> - </el-form-item> - <el-form-item label="鍙戠幇鏃堕棿" prop="happenTime"> - <el-input v-model="form.happenTime" placeholder="璇疯緭鍏ュ彂鐜版椂闂�" v-trim/> - </el-form-item> - <el-form-item label="椋庨櫓绫诲瀷(鍏宠仈category锛�" prop="typeId"> - <el-date-picker v-model="form.typeId" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ラ闄╃被鍨�(鍏宠仈category锛�"></el-date-picker> - </el-form-item> - <el-form-item label="椋庨櫓鎻忚堪" prop="riskInfo"> - <el-input v-model="form.riskInfo" placeholder="璇疯緭鍏ラ闄╂弿杩�" v-trim/> - </el-form-item> - <el-form-item label="褰撳墠鐗╀笟涓荤缂栫爜锛堝叧鑱攎ember锛�" prop="managerId"> - <el-input v-model="form.managerId" placeholder="璇疯緭鍏ュ綋鍓嶇墿涓氫富绠$紪鐮侊紙鍏宠仈member锛�" v-trim/> - </el-form-item> - <el-form-item label="褰撳墠澶勭悊浜哄憳缂栫爜锛堝叧鑱攎ember)" prop="dealerId"> - <el-input v-model="form.dealerId" placeholder="璇疯緭鍏ュ綋鍓嶅鐞嗕汉鍛樼紪鐮侊紙鍏宠仈member)" v-trim/> - </el-form-item> - <el-form-item label="鍒嗛厤鏃堕棿" prop="dispatchTime"> - <el-date-picker v-model="form.dispatchTime" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ垎閰嶆椂闂�"></el-date-picker> - </el-form-item> - <el-form-item label="鍒嗛厤澶囨敞" prop="dispatchInfo"> - <el-input v-model="form.dispatchInfo" placeholder="璇疯緭鍏ュ垎閰嶅娉�" v-trim/> - </el-form-item> - <el-form-item label="澶勭悊鏃堕棿" prop="dealTime"> - <el-date-picker v-model="form.dealTime" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ鐞嗘椂闂�"></el-date-picker> - </el-form-item> - <el-form-item label="澶勭悊澶囨敞" prop="dealInfo"> - <el-input v-model="form.dealInfo" placeholder="璇疯緭鍏ュ鐞嗗娉�" v-trim/> - </el-form-item> - <el-form-item label="DCA闂缂栫爜" prop="problemId"> - <el-input v-model="form.problemId" placeholder="璇疯緭鍏CA闂缂栫爜" v-trim/> - </el-form-item> - <el-form-item label="DCA闂鏁伴噺" prop="problemNum"> - <el-input v-model="form.problemNum" placeholder="璇疯緭鍏CA闂鏁伴噺" v-trim/> - </el-form-item> - <el-form-item label="浣嶇疆鍦扮偣璺緞鍚嶇О" prop="locationName"> - <el-input v-model="form.locationName" placeholder="璇疯緭鍏ヤ綅缃湴鐐硅矾寰勫悕绉�" v-trim/> - </el-form-item> - <el-form-item label="宸ュ崟鍙�" prop="code"> - <el-input v-model="form.code" placeholder="璇疯緭鍏ュ伐鍗曞彿" v-trim/> - </el-form-item> - </el-form> + :title="title" + width="80%" + :visible.sync="visible" + :confirm-working="isWorking" + @confirm="confirm"> + <div class="modal_wrap"> + <div class="modal_content"> + <div class="header"> + <img v-if="info.status == '3'" class="head_bg" + src="@/assets/task/bg_shenhe_fail@2x.png" alt=""> + <img v-else-if="info.status == '4'" class="head_bg" + src="@/assets/task/bg_shenhe_pass@2x.png" alt=""> + <img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt=""> + <div class="left"> + <div class="h1">{{ cateList[type] }}</div> + <div class="time">鎻愪氦鏃堕棿锛歿{ info.createDate }}</div> + </div> + <div class="right" :class="{ scs: info.status == '4', msg: info.status == '3' }">{{ statusMap[info.status] }}</div> + </div> + <div class="info"> + <div class="title">璁垮棰勭害淇℃伅</div> + <div class="list"> + <div class="item"> + <div class="label">琚浜�</div> + <div class="value">{{ info.visitUserName }}</div> + </div> + <div class="item"> + <div class="label">鏉ヨ鏃堕棿</div> + <div class="value">{{ info.visitTime }}</div> + </div> + <div class="item"> + <div class="label">鏉ヨ浜嬬敱</div> + <div class="value">{{ info.visitReason }}</div> + </div> + <div class="item"> + <div class="label">闅忚杞﹁締</div> + <div class="value">{{ info.carNos }}</div> + </div> + <div class="item"> + <div class="label">娑夊強鏂藉伐浣滀笟</div> + <div class="value">{{ info.type == "0" ? "鍚�" : "鏄�" }}</div> + </div> + <div class="item"> + <div class="label">鏂藉伐鍐呭</div> + <div class="value">{{ info.constructionReason }}</div> + </div> + </div> + </div> + </div> + <div class="side"> + <div class="side_title">鎿嶄綔鍘嗗彶</div> + <div class="list" v-if=" info.logList != null && info.logList.length != 0 + "> + <div class="item" v-for="(item, index) in infologList" :key="item.id"> + <div class="separate" v-if="index < info.logList.length - 1"></div> + <div class="info"> + <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="item.status == 2" /> + <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="item.status == 1" /> + <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="item.status == 3" /> + <img src="@/assets/icons/ic_grey.png" class="iconnew" v-if="item.status == null || item.status == 0" /> + <div style="display: inline" v-if="item.approveType != 1"> + <img v-if="item.faceImg != null && item.faceImg != ''" :src="item.faceImg" class="avatar" alt="" /> + <img v-if="item.faceImg == null || item.faceImg == ''" src="@/assets/avatar/man.png" class="avatar" + alt="" /> + </div> + <div style="display: inline" v-if="item.approveType == 1"> + <img v-if="item.type != 1" src="@/assets/icons/ic_duoren.png" class="avatar" alt="" /> + <img v-if="item.type == 1" src="@/assets/icons/ic_chaosong.png" class="avatar" alt="" /> + </div> + <div class="content"> + <div class="line"> + <div class="name">{{ item.title }}</div> + <div class="time">{{ item.checkDate }}</div> + </div> + <div class="line"> + <div class="company"> + {{ item.memberName }} + <div style="display: inline" v-if="item.statusInfo != null && item.statusInfo != ''"> + 锛�<span :class="{ padding: item.statusInfo == '澶勭悊涓�' || item.status == '1' }">{{ + item.statusInfo || "" + }}</span>锛� + </div> + </div> + </div> + </div> + </div> + <div v-if=" + item.approveType != 1 && + item.checkInfo != null && + item.checkInfo != '' + " class="remark"> + {{ item.checkInfo || "" }} + </div> + <div v-if="item.approveType == 1" class="childList"> + <div class="m_content company" v-for="item1 in item.approveList" :key="item1.id"> + <img v-if="item1.faceImg != null && item1.faceImg != ''" :src="item1.faceImg" class="avatar" alt="" /> + <img v-if="item1.faceImg == null || item1.faceImg == ''" src="@/assets/avatar/man.png" class="avatar" + alt="" /> + <span> {{ item1.memberName }}</span> + </div> + </div> + </div> + </div> + </div> + </div> + <!-- --> + <template v-slot:footer> + <el-button @click="close">杩斿洖</el-button> + </template> </GlobalWindow> </template> @@ -131,31 +121,352 @@ components: { GlobalWindow }, data () { return { - // 琛ㄥ崟鏁版嵁 - form: { }, - // 楠岃瘉瑙勫垯 - rules: { + id: '', + type: null, + title: '宸ュ崟璇︽儏', + info: {}, + statusMap: { + 0: '寰呭鏍�', + 1: '澶勭悊涓�', + 2: '宸插悓鎰�', + 3: '宸叉嫆缁�', + 4: '宸插彇娑�', + }, + cateList: { + 0: 'SHE浜嬩欢宸ュ崟', + 1: '璺岀粖婊戜簨浠跺伐鍗�', + 2: 'DCA浜嬩欢鎻愪氦璁板綍', + 3: 'DCA浜嬩欢宸ュ崟' } } }, - created () { - this.config({ - api: '/business/workorder', - 'field.id': 'id' - }) - }, - methods:{ - /** - * 鎵撳紑绐楀彛 - * - * @param title 绐楀彛鏍囬 - * @param target 琛屽璞★紙浠呯紪杈戦渶璇ュ弬鏁帮級 - */ + methods: { open (title, target) { this.title = title this.visible = true - this.form = target - } + this.info = target + this.type = this.info.type + }, + close () { + this.visible = false + }, + getDetail () { + const { id, type } = this + switch (type) { + case 0: + getVisitedDetail({ id }).then(res => { + this.info = res + if (this.info.approveDateVO && this.info.approveDateVO.approveList.length > 0) { + this.info.approveDateVO.approveList.forEach(item => { + if (item.approveList && item.approveList.length == 1 && item.type !== 1) { + item.title = item.approveList[0].title + item.faceImg = item.approveList[0].faceImg + item.memberName = item.approveList[0].memberName + item.statusInfo = item.approveList[0].statusInfo + item.approveList = [] + } + }) + } + }) + break + + default: + break + } + }, + reject () { }, + handleAvatarSuccess () { }, + beforeAvatarUpload () { } } } </script> + +<style lang="scss" scoped> +@import "@/assets/style/variables.scss"; + +.upload_box { + width: 84px; + height: 84px; + border-radius: 4px; + background-color: #f7f7f7; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #999999; + border: 1px solid #e4e4e4; + + .icon { + font-size: 24px; + } + + .text { + font-size: 12px; + } +} + +.side_title { + font-weight: 600; + font-size: 18px; + color: #111111; + margin-bottom: 20px; + margin-left: 20px; + margin-top: 20px; +} + +.modal_wrap { + display: flex; + height: 100%; + + .modal_content { + flex: 1; + padding: 0px 30px; + border-radius: 8px; + overflow: hidden; + height: 100%; + + .title { + font-weight: 600; + font-size: 18px; + color: #333333; + margin-bottom: 20px; + margin-top: 30px; + } + + .info { + .list { + display: flex; + flex-wrap: wrap; + + .item { + display: flex; + width: 40%; + margin-bottom: 20px; + + &:nth-of-type(2n) { + width: 60%; + } + + .label { + color: #888888; + width: 100px; + } + + .value { + color: #111111; + } + } + } + } + + .header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 30px; + margin: 0 -30px; + border-radius: 8px 8px 0 0; + position: relative; + + .head_bg { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 9; + } + + .h1 { + font-weight: 600; + font-size: 22px; + color: #111111; + margin-bottom: 8px; + } + + .time { + font-size: 14px; + color: #999999; + } + + .right { + height: 40px; + font-size: 16px; + color: #ffffff; + line-height: 40px; + padding: 0 20px; + background: #207ff7; + box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16); + border-radius: 16px 0px 16px 0px; + position: relative; + z-index: 99; + } + + .scs { + background-color: #00BA67; + } + + .msg { + background-color: #ED4545; + } + } + + .table_info { + .name_wrap { + display: flex; + align-items: center; + + .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 12px; + } + + .content { + .line { + display: flex; + } + + .tag { + color: #b2cbf9; + border: 1px solid #b2cbf9; + padding: 0px 4px; + border-radius: 4px; + margin-left: 6px; + } + } + } + } + } + + .side { + height: 100%; + width: 420px; + background: #ffffff; + border-left: 20px solid #f7f7f7; + + .list { + .item { + padding: 8px 0; + position: relative; + + .separate { + position: absolute; + border-left: 2px dashed #cccccc; + left: 31px; + height: calc(100% - 30px); + top: 49px; + } + + .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + margin: 0 12px 0 16px; + //border: 1px solid; + } + + .childList { + display: flex; + flex-wrap: wrap; + margin-left: 100px; + } + + .company { + font-size: 13px; + color: #888888; + + .status { + color: $primaryColor; + } + } + + .m_content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 4px; + } + + .info { + display: flex; + align-items: center; + margin-left: 20px; + + .icon { + position: relative; + z-index: 11; + color: #53b76f; + font-size: 24px; + } + + .icon1 { + position: relative; + z-index: 11; + color: deepskyblue; + font-size: 24px; + } + + .icon2 { + position: relative; + z-index: 11; + color: #dc362e; + font-size: 24px; + } + + .iconnew { + width: 24px; + height: 24px; + } + + .icon3 { + position: relative; + z-index: 11; + color: gray; + font-size: 24px; + } + + .content { + flex: 1; + + .line { + display: flex; + justify-content: space-between; + align-content: center; + margin-bottom: 6px; + + .status { + color: #888888; + } + + .padding { + color: $primaryColor; + } + + .name { + font-weight: 600; + font-size: 16px; + color: #111111; + } + + .time { + color: #888888; + } + } + } + } + + .remark { + background: #f7f7f7; + border-radius: 4px; + padding: 13px 15px; + color: #666666; + margin-left: 100px; + } + } + } + } +} +</style> -- Gitblit v1.9.3