From 68270bc858a465bc482820586a7ccb534b6c3565 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期一, 17 十月 2022 18:40:57 +0800 Subject: [PATCH] 新增日志管理 --- src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue | 128 +++++++++++++++++++++++++++++++++++++----- 1 files changed, 113 insertions(+), 15 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 d5943f9..90d4f1b 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 @@ -51,12 +51,15 @@ <!-- 鏂囦功鐓х墖涓婁紶 --> <el-form-item label="鏂囦功鐓х墖涓婁紶:" prop="writPic"> <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in book.writPic" :key="index"> + <div class="img-list" v-if="book.writPic.length!==0"> + <div class="img" v-for="(item,index) in book.writPic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index,1)"></i> + </div> </div> <div class="upload" v-if="book.writPic.length<4"> <el-upload :file-list="fileList" class="upload-demo" - action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false" + action="/sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess1" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -67,12 +70,15 @@ <!-- 鏁存敼鍓嶇収鐗� --> <el-form-item label="鏁存敼鍓嶇収鐗�:" prop="originalPic"> <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in book.originalPic" :key="index"> + <div class="img-list" v-if="book.originalPic.length!==0"> + <div class="img" v-for="(item,index) in book.originalPic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index,2)"></i> + </div> </div> <div class="upload" v-if="book.originalPic.length<4"> <el-upload :file-list="fileList" class="upload-demo" - action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false" + action="http:///sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess2" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -83,12 +89,15 @@ <!-- 鏁存敼鍚庣収鐗� --> <el-form-item label="鏁存敼鍚庣収鐗�:" prop="rectifiedPic"> <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in book.rectifiedPic" :key="index"> + <div class="img-list" v-if="book.rectifiedPic.length!==0"> + <div class="img" v-for="(item,index) in book.rectifiedPic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index,3)"></i> + </div> </div> <div class="upload" v-if="book.rectifiedPic.length<4"> <el-upload :file-list="fileList" class="upload-demo" - action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false" + action="http:///sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess3" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -99,12 +108,15 @@ <!-- 鍏朵粬鐓х墖 --> <el-form-item label="鍏朵粬:" prop="otherPic"> <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in book.otherPic" :key="index"> + <div class="img-list" v-if="book.otherPic.length!==0"> + <div class="img" v-for="(item,index) in book.otherPic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index,4)"></i> + </div> </div> <div class="upload" v-if="book.otherPic.length<4"> <el-upload :file-list="fileList" class="upload-demo" - action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false" + action="http:///sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess4" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -182,6 +194,27 @@ 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: [], @@ -192,10 +225,10 @@ bookRules: { writType: [ { - trigger: 'blur', validator: checkKind + trigger: 'change', validator: checkKind } ], - idwritCode: [ + writCode: [ { trigger: 'blur', validator: checkId } @@ -233,6 +266,19 @@ noremark: [ { trigger: 'blur', validator: checkNote + } + ], + writPic: [{ + trigger: 'blur', validator: checkWritPic + }], + rectifiedPic: [ + { + trigger: 'blur', validator: checkRectPic + } + ], + originalPic: [ + { + trigger: 'blur', validator: checkOrgPic } ], }, @@ -291,6 +337,45 @@ return { Authorization: tokenHead + token } } }, + // 鍒犻櫎鍥剧墖 + handleRemove(index, flag) { + if (flag === 1) { + this.book.writPic.splice(index, 1); + } else if (flag === 2) { + this.book.originalPic.splice(index, 1); + } else if (flag === 3) { + this.book.rectifiedPic.splice(index, 1); + } else { + this.book.otherPic.splice(index, 1); + } + + } + }, + 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> @@ -331,13 +416,26 @@ } .img-list { - height: 80px; + height: 60px; position: relative; + display: flex; img { width: 60px; height: 60px; } + + .img { + height: 60px; + position: relative; + } + + .myicon { + position: absolute; + top: 0px; + right: 0px; + color: #4b9bb7; + } } } -- Gitblit v1.8.0