From 9ff66017debadfc89bc0c1b796684a4d1dbe2bc3 Mon Sep 17 00:00:00 2001 From: fangyuan <527392886@qq.com> Date: 星期五, 16 十二月 2022 10:00:02 +0800 Subject: [PATCH] 已上报到市批量操作按钮隐藏 --- src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue | 435 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 397 insertions(+), 38 deletions(-) diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue index a4903eb..f17f970 100644 --- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue +++ b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue @@ -2,77 +2,385 @@ <div class="book"> <div class="book-title">鏂囩涔︾被</div> <div class="book-form"> - <el-form ref="bookForm" label-width="160px" :model="book" :rules="bookRules" autoComplete="on"> - <!-- 鏂囦功绉嶇被 --> - <el-form-item label="鏂囦功绉嶇被:" prop="kind"> - <el-input v-model="book.kind"></el-input> - </el-form-item> - <!-- 鏂囦功缂栧彿 --> - <el-form-item label="鏂囦功缂栧彿:" prop="id"> - <el-input v-model="book.id"></el-input> - </el-form-item> + <el-form ref="bookForm" label-width="120px" :model="book" :rules="bookRules" autoComplete="on"> + <div class="book-item"> + <!-- 鏂囦功绉嶇被 --> + <el-form-item label="鏂囦功绉嶇被:" prop="writType"> + <el-select v-model="book.writType" placeholder="璇疯緭鍏ユ枃涔︾绫�"> + <el-option v-for="item in kindList" :key="item.id" :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 鏂囦功缂栧彿 --> + <el-form-item label="鏂囦功缂栧彿:" prop="writCode"> + <el-input v-model="book.writCode" placeholder="璇疯緭鍏ユ枃涔︾紪鍙�"></el-input> + </el-form-item> + </div> <!-- 杩濇硶绫诲瀷 --> - <el-form-item label="杩濇硶绫诲瀷:" prop="vioKind"> - <el-input v-model="book.vioKind"></el-input> + <el-form-item label="杩濇硶绫诲瀷:" prop="illegalType" > + <el-input v-model="basecase" ></el-input> </el-form-item> <!-- 鏂囦功鍙戞斁鏃堕棿 --> - <el-form-item label="鏂囦功鍙戞斁鏃堕棿:" prop="giveTime"> - <el-input v-model="book.giveTime"></el-input> + <el-form-item label="鏂囦功鍙戞斁鏃堕棿:" prop="sendTime"> + <el-date-picker v-model="book.sendTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="璇烽�夋嫨骞存湀鏃�"> + </el-date-picker> </el-form-item> <!-- 鏂囦功闄愬畾鏃堕棿 --> <el-form-item label="鏂囦功闄愬畾鏃堕棿" prop="limitTime"> - <el-input v-model="book.limitTime"></el-input> + <el-date-picker v-model="book.limitTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="璇烽�夋嫨骞存湀鏃�"> + </el-date-picker> </el-form-item> <!-- 鏂囦功鍙戞斁鍐呭 --> - <el-form-item label="鏂囦功鍙戞斁鍐呭:" prop="content"> - <el-input v-model="book.content"></el-input> + <el-form-item label="鏂囦功鍙戞斁鍐呭:" prop="sendContent"> + <el-input v-model="book.sendContent" placeholder="璇疯緭鍏ユ枃涔﹀彂鏀惧唴瀹�"></el-input> </el-form-item> <!-- 瀹為檯鏁存敼鏃堕棿 --> - <el-form-item label="瀹為檯鏁存敼鏃堕棿:" prop="updateTime"> - <el-input v-model="book.updateTime"></el-input> + <el-form-item label="瀹為檯鏁存敼鏃堕棿:" prop="rectifyTime"> + <el-date-picker v-model="book.rectifyTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="璇烽�夋嫨骞存湀鏃�"> + </el-date-picker> </el-form-item> <!-- 鏁存敼鎯呭喌 --> - <el-form-item label="鏁存敼鎯呭喌:" prop="condition"> - <el-input v-model="book.condition"></el-input> + <el-form-item label="鏁存敼鎯呭喌:" prop="rectifySituation"> + <el-input v-model="book.rectifySituation" placeholder="璇疯緭鍏ユ暣鏀规儏鍐�"></el-input> </el-form-item> <!-- 澶囨敞 --> - <el-form-item label="澶囨敞:" prop="note"> - <el-input v-model="book.note"></el-input> + <el-form-item label="澶囨敞:" prop="remark"> + <el-input v-model="book.remark" placeholder="璇疯緭鍏ュ娉�"></el-input> </el-form-item> <!-- 鏂囦功鐓х墖涓婁紶 --> - <el-form-item label="鏂囦功鐓х墖涓婁紶:" prop="bookPhoto"> - <el-input v-model="book.bookPhoto"></el-input> + <el-form-item label="鏂囦功鐓х墖涓婁紶:" prop="writPic"> + <div class="upImg"> + <MyUpload @setPictureUrl="writPic" @delPictureUrl="delWritPic" :picture-list="book.writPic"></MyUpload> + <div class="tip">{{book.writPic.length}} / 4</div> + </div> </el-form-item> <!-- 鏁存敼鍓嶇収鐗� --> - <el-form-item label="鏁存敼鍓嶇収鐗�:" prop="beforeUpdate"> - <el-input v-model="book.beforeUpdate"></el-input> + <el-form-item label="鏁存敼鍓嶇収鐗�:" prop="originalPic"> + <div class="upImg"> + <MyUpload @setPictureUrl="originalPic" @delPictureUrl="delOriginalPic" :picture-list="book.originalPic"></MyUpload> + <div class="tip">{{book.originalPic.length}} / 4</div> + </div> </el-form-item> <!-- 鏁存敼鍚庣収鐗� --> - <el-form-item label="鏁存敼鍚庣収鐗�:" prop="afterUpdate"> - <el-input v-model="book.afterUpdate"></el-input> + <el-form-item label="鏁存敼鍚庣収鐗�:" prop="rectifiedPic"> + <div class="upImg"> + <MyUpload @setPictureUrl="rectifiedPic" @delPictureUrl="delRectifiedPic" :picture-list="book.rectifiedPic"></MyUpload> + <div class="tip">{{book.rectifiedPic.length}} / 4</div> + </div> </el-form-item> <!-- 鍏朵粬鐓х墖 --> - <el-form-item label="鍏朵粬:" prop="other"> - <el-input v-model="book.other"></el-input> + <el-form-item label="鍏朵粬:" prop="otherPic"> + <div class="upImg"> + <MyUpload @setPictureUrl="otherPic" @delPictureUrl="delOtherPic" :picture-list="book.otherPic"></MyUpload> + <div class="tip">{{book.otherPic.length}} / 4</div> + </div> </el-form-item> </el-form> </div> </div> </template> <script> - export default{ - data(){ - return{ - book:{}, - bookRules:{ - - } +import {deepClone, getCodeList} from '@/utils/helper' +import MyUpload from "@/components/myUpload" +export default { + components: { + MyUpload + }, + data() { + const checkKind = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('鏂囦功绉嶇被涓嶈兘涓虹┖')); } } + const checkId = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('鏂囦功缂栧彿涓嶈兘涓虹┖')); + } + } + const checkGiveTime = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('鍙戞斁鏃堕棿涓嶈兘涓虹┖')); + } + } + const checkUpTime = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('瀹為檯鏁存敼鏃堕棿涓嶈兘涓虹┖')); + } + } + const checkNote = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(); + } + } + const checkCondition = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('鏁存敼鎯呭喌涓嶈兘涓虹┖')); + } + } + const checkLimTime = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('闄愬畾鏃堕棿涓嶈兘涓虹┖')); + } + } + const checkVio = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('杩濇硶绫诲瀷涓嶈兘涓虹┖')); + } + } + const checkContent = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error('鍙戞斁鍐呭涓嶈兘涓虹┖')); + } + } + const checkRectPic = (rule, value, callback) => { + if (value.length!==0) { + callback(); + } else { + callback(new Error('鏁存敼鍚庣収鐗囦笉鑳戒负绌�')); + } + } + const checkWritPic = (rule, value, callback) => { + if (value.length!==0) { + callback(); + } else { + callback(new Error('鏂囦功鐓х墖涓嶈兘涓虹┖')); + } + } + const checkOrgPic = (rule, value, callback) => { + if (value.length !==0) { + callback(); + } else { + callback(new Error('鏁存敼鍓嶇収鐗囦笉鑳戒负绌�')); + } + } + return { + book: { + writPic: [], + otherPic: [], + rectifiedPic: [], + originalPic: [], + }, + bookRules: { + writType: [ + { + trigger: 'change', validator: checkKind + } + ], + writCode: [ + { + trigger: 'blur', validator: checkId + } + ], + sendTime: [ + { + trigger: 'blur', validator: checkGiveTime + } + ], + limitTime: [ + { + trigger: 'blur', validator: checkLimTime + } + ], + sendContent: [ + { + trigger: 'blur', validator: checkContent + } + ], + rectifyTime: [ + { + trigger: 'blur', validator: checkUpTime + } + ], + rectifySituation: [ + { + trigger: 'blur', validator: checkCondition + } + ], + noremark: [ + { + trigger: 'blur', validator: checkNote + } + ], + writPic: [{ + trigger: 'blur', validator: checkWritPic + }], + rectifiedPic: [ + { + trigger: 'blur', validator: checkRectPic + } + ], + originalPic: [ + { + trigger: 'blur', validator: checkOrgPic + } + ], + }, + fileList: [], + kindList: [ + { + label: '涔︾睄1', + value: 1, + }, + { + label: '涔︾睄2', + value: 2, + }, + ], + basecase:"" + } + }, + created() { + this.getBookType(); + this.basecase = this.illegalType; + if (this.writ) { + this.book = deepClone(this.writ); + this.book.originalPic = this.writ.originalPic.split(','); + this.book.writPic = this.writ.writPic.split(','); + this.book.otherPic = this.writ.otherPic.split(','); + this.book.rectifiedPic = this.writ.rectifiedPic.split(','); + } + }, + props: ['caseId', 'closeDialog','mycode', 'writ', 'illegalType'], + methods: { + handleSuccess1(res, file, filelist) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.writPic.length < 4) { + this.book.writPic.push(baseUrl + res.data.url1) + } + }, + handleSuccess2(res, file, filelist) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.originalPic.length < 4) { + this.book.originalPic.push(baseUrl + res.data.url1) + } + }, + handleSuccess3(res, file, filelist) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.rectifiedPic.length < 4) { + this.book.rectifiedPic.push(baseUrl + res.data.url1) + } + }, + handleSuccess4(res, file, filelist) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.otherPic.length < 4) { + this.book.otherPic.push(baseUrl + res.data.url1) + } + }, + getToken() { + const token = sessionStorage.getItem('token'); + const tokenHead = sessionStorage.getItem('tokenHead'); + if (token && tokenHead) { + return { Authorization: tokenHead + token } + } + }, + + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + writPic({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.originalPic.length < 4) { + this.book.writPic.push(baseUrl + url) + } + }, + //鍒犻櫎鍥剧墖 + delWritPic({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + this.book.writPic.splice(this.book.writPic.indexOf(baseUrl + url),1); + }, + + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + otherPic({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.otherPic.length < 4) { + this.book.otherPic.push(baseUrl + url) + } + }, + //鍒犻櫎鍥剧墖 + delOtherPic({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + this.book.otherPic.splice(this.book.otherPic.indexOf(baseUrl + url),1); + }, + + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + rectifiedPic({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.otherPic.length < 4) { + this.book.rectifiedPic.push(baseUrl + url) + } + }, + //鍒犻櫎鍥剧墖 + delRectifiedPic({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + this.book.rectifiedPic.splice(this.book.rectifiedPic.indexOf(baseUrl + url),1); + }, + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + originalPic({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.otherPic.length < 4) { + this.book.originalPic.push(baseUrl + url) + } + }, + //鍒犻櫎鍥剧墖 + delOriginalPic({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + this.book.originalPic.splice(this.book.originalPic.indexOf(baseUrl + url),1); + }, + + // 鑾峰彇鏂囦功绉嶇被 + async getBookType(){ + let arr + arr = await getCodeList('15'); + this.kindList = arr; + } + }, + watch: { + 'book.writPic.length': { + handler(newLen, oldLen) { + if (newLen !== 0) { + this.$refs.bookForm.validateField('writPic'); + } + }, + deep: true, + }, + 'book.rectifiedPic.length': { + handler(newLen, oldLen) { + if (newLen !== 0) { + this.$refs.bookForm.validateField('rectifiedPic'); + } + }, + deep: true, + }, + 'book.originalPic.length': { + handler(newLen, oldLen) { + if (newLen !== 0) { + this.$refs.bookForm.validateField('originalPic'); + } + }, + deep: true, + } } +} </script> <style lang="scss" scoped> -.book-title{ +.book-title { line-height: 60px; font-weight: 650; font-size: 20px; @@ -81,6 +389,57 @@ text-align: right; color: #4b9bb7; } + +.book-item { + display: flex; + width: 100%; +} + +.upload { + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + background-color: #fbfdff; + border-radius: 4px; +} + +.upImg { + display: flex; + + .tip { + position: absolute; + bottom: 0; + right: 0; + } + + .img-list { + height: 60px; + position: relative; + display: flex; + + img { + width: 60px; + height: 60px; + } + + .img { + height: 60px; + position: relative; + margin-right: 10px; + } + + .myicon { + position: absolute; + top: 0px; + right: 0px; + color: #4b9bb7; + } + } +} + ::v-deep .el-textarea__inner { background-color: #09152f; border: 1px solid #17324c; -- Gitblit v1.8.0