From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001 From: k94314517 <8417338+k94314517@user.noreply.gitee.com> Date: 星期三, 16 十月 2024 15:59:38 +0800 Subject: [PATCH] 代码初始化 --- admin/src/components/business/OperaHiddenDangerWindow.vue | 570 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 467 insertions(+), 103 deletions(-) diff --git a/admin/src/components/business/OperaHiddenDangerWindow.vue b/admin/src/components/business/OperaHiddenDangerWindow.vue index ae6acc1..6937591 100644 --- a/admin/src/components/business/OperaHiddenDangerWindow.vue +++ b/admin/src/components/business/OperaHiddenDangerWindow.vue @@ -1,9 +1,9 @@ <template> <GlobalWindow - :title="title" - :visible.sync="visible" - @confirm="confirm" - @close="reject" + :title="title" + :visible.sync="visible" + @confirm="confirm" + @close="reject" > <div class="modal_wrap"> <div class="modal_content"> @@ -13,8 +13,8 @@ <div class="time">鎻愭姤鏃堕棿锛歿{model.createDate}}</div> </div> <div class="right" v-if="model.status==0">寰呭鐞�</div> - <div class="right" v-if="model.status==1">宸插鐞�</div> - <div class="right" v-if="model.status==2">宸叉挙閿�</div> + <div class="right" style="background:#53b76f " v-if="model.status==1">宸插鐞�</div> + <div class="right" style="background:#dc362e " v-if="model.status==2">宸查��鍥�</div> </div> <div class="info"> <div class="title">闅愭偅鎻愭姤璇︽儏</div> @@ -35,23 +35,75 @@ <div class="label">闅愭偅鎻忚堪</div> <div class="value">{{model.content || ''}}</div> </div> - <div class="item"> + <div class="item" style="width: 100%"> <div class="label">鐜板満鎯呭喌</div> <div class="value" v-if="model.submitFileList ==null || !model.submitFileList.length">鏃�</div> <div class="value" v-if="model.submitFileList !=null && model.submitFileList.length"> - <span v-for="item in model.submitFileList" :key="item.id">{{item.fileurlFull}}</span> + <div v-for="item in model.submitFileList" :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> </div> </div> - <div class="item" v-if="model.status==1"> + <div class="item" v-if="model.status==1||model.status==2" style="width: 100%"> <div class="label">澶勭悊鍓�</div> - <div class="value"></div> + <div class="value" v-if="model.dealBeforeFileList !=null && model.dealBeforeFileList.length"> + <div v-for="item in model.dealBeforeFileList" :key="item.id" style="display: inline;margin-right: 20px"> + <video + v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" + ref="videoRef" + autoplay + 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> + </div> </div> - <div class="item" v-if="model.status==1"> + <div class="item" v-if="model.status==1" style="width: 100%"> <div class="label">澶勭悊鍚�</div> - <div class="value"></div> + <div class="value" v-if="model.dealAfterFileList !=null && model.dealAfterFileList.length"> + <div v-for="item in model.dealAfterFileList" :key="item.id" style="display: inline;margin-right: 20px"> + <video + v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" + ref="videoRef" + autoplay + 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> + </div> </div> <div class="item" v-if="model.status==1 || model.status==2"> - <div class="label">澶勭悊璇存槑</div> + <div class="label" v-if="model.status==1">澶勭悊璇存槑</div> + <div class="label" v-if="model.status==2">閫�鍥炶鏄�</div> <div class="value">{{model.checkInfo}}</div> </div> </div> @@ -60,117 +112,147 @@ <div class="side"> <div class="side_title">瀹℃壒娴佺▼</div> <div class="list"> - <div class="item"> - <div class="separate"></div> + <div class="item" v-for="(item,index) in logList" :key="item.id"> + <div class="separate" v-if="index < logList.length-1"></div> <div class="info"> - <i class="el-icon-success icon"></i> - <img src="" class="avatar" alt="" /> + <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="(model.status ==1) || index < logList.length-1"/> + <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="(model.status==0) && index == logList.length-1"/> + <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="(model.status==2) && index == logList.length-1"/> + <img v-if="item.avatar!=null && item.avatar !=''" :src="item.avatar" class="avatar" alt="" /> + <img v-if="item.avatar ==null ||item.avatar ==''" src="@/assets/avatar/man.png" class="avatar" alt="" /> <div class="content"> <div class="line"> - <div class="name">鍒樻煇鍒樻煇</div> - <div class="time">2020-02-02 12:20</div> - </div> - <div class="line"> - <div class="company">涓浗绉诲姩鏈夐檺鍏徃</div> - </div> - </div> - </div> - </div> - <div class="item"> - <!-- <div v-if="" class="separate"></div> --> - <div class="info"> - <i class="el-icon-success icon"></i> - <img src="" class="avatar" alt="" /> - <div class="content"> - <div class="line"> - <div class="name">鍒樻煇鍒樻煇</div> - <div class="time">2020-02-02 12:20</div> + <div class="name">{{ item.title}}</div> + <div class="time">{{ item.createDate }}</div> </div> <div class="line"> <div class="company"> - 涓浗绉诲姩鏈夐檺鍏徃( <span class="status">宸插悓鎰�</span> ) + {{ item.createUserName }} {{ item.companyName }} + <div style="display: inline" v-if="index == logList.length-1"> + 锛�<span class="status-green" v-if="model.status==1">宸插鐞�</span> + <span class="status-blue" v-if="model.status==0">寰呭鐞�</span> + <span class="status-red" v-if="model.status==2">宸查��鍥�</span>锛� + </div> </div> </div> </div> </div> - <div class="remark">鎻愪氦绾﹀ソ鐨�</div> </div> </div> </div> </div> <!-- --> <template v-slot:footer> - <el-button @click="dealDo" type="primary" v-if="model.status==0" class="status-red">澶勭悊</el-button> - <el-button type="primary" plain v-if="model.status==0" @click="handleTransfer">杞氦</el-button> - <el-button @click="backDo" v-if="model.status==0" type="danger" >閫�鍥�</el-button> + <el-button @click="openHandModal" type="primary" v-if="model.status==0&& model.checkUserId == userInfo.memberId" class="status-red">澶勭悊</el-button> + <el-button type="primary" plain v-if="model.status==0 && model.checkUserId == userInfo.memberId" @click="handleTransfer">杞氦</el-button> + <el-button @click="openBackModal" v-if="model.status==0&& model.checkUserId == userInfo.memberId" type="danger" >閫�鍥�</el-button> <el-button @click="visible=false">杩斿洖</el-button> </template> - <!-- 鍚屾剰/鎷掔粷 --> + <el-dialog - append-to-body - :title="apprTitle" - :visible.sync="isShowAppr" - width="480px" + append-to-body + title="杞氦" + class="dialogCl" + :visible.sync="isShowTransfer" + width="480px" > - <el-input - type="textarea" - :placeholder="apprTitle + '璇存槑锛岄潪蹇呭~'" - :rows="4" - v-model="param.explain" - /> + <el-form :model="transForm" ref="transForm" :rules="rulesTrans"> + <el-form-item label="闅愭偅杞氦浜�" prop="memberId"> + <el-select v-model="transForm.memberId" style="width: 300px" filterable clearable placeholder="璇烽�夋嫨杞氦瀹夊叏鍛�"> + <el-option + v-for="item in memberList" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-form> <span slot="footer" class="dialog-footer"> - <el-button @click="isShowAppr = false">鍙栨秷</el-button> - <el-button type="primary" @click="isShowAppr = false">纭畾</el-button> + <el-button @click="isShowTransfer = false">鍙栨秷</el-button> + <el-button type="primary" :loading="transfering" @click="transferSubmit">纭畾</el-button> </span> </el-dialog> <!-- 闅愭偅 --> <el-dialog - append-to-body - title="闅愭偅" - :visible.sync="isShowProblem" - width="480px" + append-to-body + title="闅愭偅澶勭悊" + class="dialogCl" + :visible.sync="isShowProblem" + width="600px" > - <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> - <el-form-item label="閫�鍥炴椂闂�"> + <el-form :model="dealForm" :rules="rulesDeal" ref="dealForm" label-width="100px"> + <el-form-item label="鏁存敼鏃堕棿" prop="checkDate"> <el-date-picker - class="w300" - value-format="yyyy-MM-dd" - type="date" - placeholder="閫夋嫨鏃ユ湡" - v-model="param.date" + class="w300" + type="datetime" + value-format="yyyy-MM-dd HH:mm:ss" + placeholder="閫夋嫨鏁存敼鏃堕棿" + v-model="dealForm.checkDate" /> </el-form-item> - <el-form-item label="鏁存敼鍓�"> + <el-form-item label="鏁存敼鍓�" prop="dealBeforeFileList"> <div class="df_ac"> - <img src="@/assets/avatar/man.png" /> - <el-upload - class="avatar-uploader" - action="https://jsonplaceholder.typicode.com/posts/" - :show-file-list="false" - :on-success="handleAvatarSuccess" - :before-upload="beforeAvatarUpload" - > - <img v-if="param.url" :src="param.url" class="avatar" /> - <div v-else class="upload_box"> - <el-icon class="el-icon-plus icon" /> - <div class="text">鍥剧墖/瑙嗛</div> - </div> - </el-upload> + <upload width="80px" height="80px" :list="dealForm.dealBeforeFileList" :tips="'鍥剧墖/瑙嗛'" accept=".png,.jpg,.jpeg,.mp4" folder="hiddendanger" @loading="uploading = true" @dele="dele($event,0)" @success="uploadFileList($event, 0)" /> </div> </el-form-item> - <el-form-item label="閫�鍥炶鏄�"> + <el-form-item label="鏁存敼鍚�" prop="dealAfterFileList"> + <div class="df_ac"> + <upload width="80px" height="80px" :list="dealForm.dealAfterFileList" :tips="'鍥剧墖/瑙嗛'" accept=".png,.jpg,.jpeg,.mp4" folder="hiddendanger" @loading="uploading = true" @dele="dele($event,1)" @success="uploadFileList($event, 1)" /> + </div> + </el-form-item> + <el-form-item label="澶勭悊璇存槑"> <el-input - type="textarea" - placeholder="璇峰~鍐欒鏄�" - :rows="4" - v-model="param.explain" + type="textarea" + placeholder="璇峰~鍐欒鏄�" + :rows="4" + v-model="dealForm.checkInfo" /> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="isShowProblem = false">鍙栨秷</el-button> - <el-button type="primary" @click="isShowProblem = false" - >纭畾</el-button + <el-button type="primary" :loading="dealing" @click="dealDo" + >纭畾</el-button + > + </span> + </el-dialog> + <el-dialog + append-to-body + title="闅愭偅閫�鍥�" + + class="dialogCl" + :visible.sync="isBackProblem" + width="600px" + > + <el-form :model="backForm" :rules="rulesBack" ref="backForm" label-width="100px"> + <el-form-item label="閫�鍥炴椂闂�" prop="checkDate"> + <el-date-picker + class="w300" + value-format="yyyy-MM-dd HH:mm:ss" + type="datetime" + placeholder="閫夋嫨閫�鍥炴椂闂�" + v-model="backForm.checkDate" + /> + </el-form-item> + <el-form-item label="鍥剧墖/瑙嗛" prop="dealBeforeFileList"> + <div class="df_ac"> + <upload width="80px" height="80px" :list="backForm.dealBeforeFileList" :tips="'鍥剧墖/瑙嗛'" accept=".png,.jpg,.jpeg,.mp4" folder="hiddendanger" @loading="uploading = true" @dele="dele($event,2)" @success="uploadFileList($event, 2)" /> + </div> + </el-form-item> + <el-form-item label="閫�鍥炶鏄�"> + <el-input + type="textarea" + placeholder="璇峰~鍐欒鏄�" + :rows="4" + v-model="backForm.checkInfo" + /> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="isBackProblem= false">鍙栨秷</el-button> + <el-button type="primary" :loading="transfering" @click="backDo" + >纭畾</el-button > </span> </el-dialog> @@ -178,41 +260,305 @@ </template> <script> +import BaseOpera from '@/components/base/BaseOpera' import GlobalWindow from '@/components/common/GlobalWindow' +import upload from '@/components/common/upload' +import dayjs from 'dayjs' +import { memberList } from '@/api/business/hiddenDangerParam' +import { mapState } from 'vuex' export default { - components: { GlobalWindow }, - data() { + components: { GlobalWindow, upload }, + extends: BaseOpera, + data () { return { title: '璁垮棰勭害璇︽儏', visible: false, + transfering: false, + dataId: null, model: { }, + logList: [], isShowAppr: false, apprTitle: '鍚屾剰', param: {}, + uploading: false, + dealing: false, isShowProblem: false, - rules: {} + isBackProblem: false, + isShowTransfer: false, + rules: {}, + rulesTrans: { + memberId: [ + { required: true, message: '璇烽�夋嫨' } + ] + }, + rulesDeal: { + checkDate: [ + { required: true, message: '璇烽�夋嫨鏁存敼鏃堕棿' } + ], + dealBeforeFileList: [ + { required: true, message: '璇蜂笂浼犳暣鏀瑰墠鎯呭喌' } + ], + dealAfterFileList: [ + { required: true, message: '璇蜂笂浼犳暣鏀瑰悗鎯呭喌' } + ] + }, + rulesBack: { + checkDate: [ + { required: true, message: '璇烽�夋嫨閫�鍥炴椂闂�' } + ] + /*, + dealBeforeFileList: [ + { required: true, message: '璇蜂笂浼犳暣鏀瑰墠鎯呭喌' } + ] */ + }, + memberList: [], + transForm: { + memberId: null + }, + dealForm: { + checkDate: null, + checkInfo: null, + dealBeforeFileList: [], + dealAfterFileList: [] + }, + backForm: { + checkDate: null, + checkInfo: null, + dealBeforeFileList: [] + } } }, + computed: { + ...mapState(['userInfo']) + }, + created () { + this.config({ + api: '/business/hiddenDanger', + 'field.id': 'id' + }) + }, methods: { - open(title,target){ - this.title =title - this.visible=true - this.model = target + openHandModal () { + const { model } = this + this.isShowProblem = true + this.$set(this.dealForm, 'checkDate', dayjs().format('YYYY-MM-DD HH:mm:ss')) + if (model.submitFileList && model.submitFileList.length > 0) { + this.$set(this.dealForm, 'dealBeforeFileList', model.submitFileList.map(item => { + return { + fileurl: item.fileurl, + name: item.name, + url: item.fileurlFull + } + })) + } }, - confirm() { + openBackModal () { + this.isBackProblem = true + this.$set(this.backForm, 'checkDate', dayjs().format('YYYY-MM-DD HH:mm:ss')) + }, + dele (index, type) { + if (type == 0) { + if (this.dealForm.dealBeforeFileList != null && this.dealForm.dealBeforeFileList.length > index) { + this.dealForm.dealBeforeFileList.splice(index, 1) + } + } else if (type == 1) { + if (this.dealForm.dealAfterFileList != null && this.dealForm.dealAfterFileList.length > index) { + this.dealForm.dealAfterFileList.splice(index, 1) + } + } else if (type == 2) { + if (this.backForm.dealBeforeFileList != null && this.backForm.dealBeforeFileList.length > index) { + this.backForm.dealBeforeFileList.splice(index, 1) + } + } + }, + uploadFileList (e, objType) { + if (objType === 0) { + if (this.dealForm.dealBeforeFileList == null) { + this.dealForm.dealBeforeFileList = [] + } + this.dealForm.dealBeforeFileList.push({ + fileurl: e.imgaddr, + url: e.url, + name: e.originname, + fileType: e.type + }) + } else if (objType === 1) { + if (this.dealForm.dealAfterFileList == null) { + this.dealForm.dealAfterFileList = [] + } + this.dealForm.dealAfterFileList.push({ + fileurl: e.imgaddr, + url: e.url, + name: e.originname, + fileType: e.type + }) + } else if (objType === 2) { + if (this.backForm.dealBeforeFileList == null) { + this.backForm.dealBeforeFileList = [] + } + this.backForm.dealBeforeFileList.push({ + fileurl: e.imgaddr, + url: e.url, + name: e.originname, + fileType: e.type + }) + } + }, + dealDo () { + this.$refs.dealForm.validate((valid) => { + // debugger + if (!valid) { + return + } + this.$dialog.actionConfirm('鎿嶄綔纭', '鎮ㄧ‘璁ゆ彁浜よ闅愭偅澶勭悊鎯呭喌鍚楋紵') + .then(() => { + this.dealing = true + this.api.dealHiddenDanger({ + id: this.dataId, + status: 1, + dealTime: this.dealForm.checkDate, + checkInfo: this.dealForm.checkInfo, + dealBeforeFileList: this.dealForm.dealBeforeFileList, + dealAfterFileList: this.dealForm.dealAfterFileList + }) + .then(res => { + this.$tip.apiSuccess('澶勭悊鎴愬姛') + this.getDetail() + this.getLogList() + this.$emit('success') + this.isShowProblem = false + }) + .catch(e => { + }) + .finally(() => { + this.dealing = false + }) + }) + }) + }, + backDo () { + this.$refs.backForm.validate((valid) => { + if (!valid) { + return + } + this.$dialog.actionConfirm('鎿嶄綔纭', '鎮ㄧ‘璁ら��鍥炶闅愭偅澶勭悊鎯呭喌鍚楋紵') + .then(() => { + this.dealing = true + this.api.dealHiddenDanger({ + id: this.dataId, + status: 2, + dealTime: this.backForm.checkDate, + checkInfo: this.backForm.checkInfo, + dealBeforeFileList: this.backForm.dealBeforeFileList + }) + .then(res => { + this.$tip.apiSuccess('閫�鍥炴垚鍔�') + this.getDetail() + this.getLogList() + this.$emit('success') + this.isBackProblem = false + }) + .catch(e => { + }) + .finally(() => { + this.dealing = false + }) + }) + }) + }, + open (title, target) { + this.title = title + this.visible = true + this.model = {} + this.dataId = target.id + this.$nextTick(() => { + this.memberList = [] + this.transForm = { + memberId: null + } + this.dealForm = { + checkDate: null, + checkInfo: null, + dealBeforeFileList: [], + dealAfterFileList: [] + } + this.backForm = { + checkDate: null, + checkInfo: null, + dealBeforeFileList: [] + } + this.getDetail() + this.getLogList() + }) + }, + transferSubmit () { + this.$refs.transForm.validate((valid) => { + // debugger + if (!valid) { + return + } + this.$dialog.actionConfirm('鎿嶄綔纭', '鎮ㄧ‘璁よ浆浜よ闅愭偅鎻愭姤鍚楋紵') + .then(() => { + this.transfering = true + this.api.transferHiddenDanger({ + id: this.dataId, + checkUserId: this.transForm.memberId + }) + .then(res => { + this.$tip.apiSuccess('杞氦鎴愬姛') + this.getDetail() + this.getLogList() + this.$emit('success') + this.isShowTransfer = false + }) + .catch(e => { + }) + .finally(() => { + this.transfering = false + }) + }) + }) + }, + getLogList () { + this.api.findLogList({ hiddenDangerId: this.dataId }) + .then(res => { + this.logList = res + }) + }, + getDetail () { + this.api.detail(this.dataId) + .then(res => { + this.model = res + }) + }, + confirm () { console.log('--') }, - handleTransfer() { - this.isShowProblem = true + handleTransfer () { + this.isShowTransfer = true + this.loadMemberList() }, - reject() { }, - handleAvatarSuccess() { }, - beforeAvatarUpload() { } + loadMemberList () { + memberList({}).then(res => { + this.memberList = res + }) + }, + reject () { }, + handleAvatarSuccess () { }, + beforeAvatarUpload () { } } } </script> <style lang="scss" scoped> +.side_title{ + font-weight: 600; + font-size: 18px; + color: #111111; + margin-bottom: 20px; + margin-left: 20px; + margin-top: 20px; +} .upload_box { width: 84px; height: 84px; @@ -231,6 +577,7 @@ font-size: 12px; } } + .modal_wrap { display: flex; height: 100%; @@ -248,7 +595,6 @@ margin-bottom: 20px; margin-top: 30px; } - .info { .list { display: flex; @@ -269,6 +615,7 @@ .value { color: #111111; + flex: 1; } } } @@ -344,18 +691,35 @@ .separate { position: absolute; border-left: 2px dashed #cccccc; - left: 51px; + left: 31px; height: calc(100% - 24px); top: 46px; } .info { display: flex; align-items: center; - margin-left: 40px; + margin-left: 20px; .icon { position: relative; z-index: 11; color: #53b76f; + font-size: 24px; + } + + .iconnew{ + width: 24px; + height: 24px; + } + .icon1 { + position: relative; + z-index: 11; + color: deepskyblue; + font-size: 24px; + } + .icon2 { + position: relative; + z-index: 11; + color: #dc362e; font-size: 24px; } .avatar { @@ -363,7 +727,7 @@ height: 40px; border-radius: 50%; margin: 0 12px 0 16px; - border: 1px solid; + //border: 1px solid; } .content { flex: 1; -- Gitblit v1.9.3