From cc9ddf2ecaf3ad935374f49c842227f7eb15779d Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 十一月 2022 10:21:15 +0800 Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui --- src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue | 95 ++++++++++++++++++++++++++++++++++++----------- 1 files changed, 73 insertions(+), 22 deletions(-) diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue index 39ef1b8..4a76757 100644 --- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue +++ b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue @@ -14,28 +14,34 @@ </el-form-item> <!-- 鐜板満鎯呭喌璇存槑 --> <el-form-item label="鐜板満鎯呭喌璇存槑:" prop="situationExplain"> - <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="200" show-word-limit + <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit v-model="arrive.situationExplain" placeholder="璇疯緭鍏ユ儏鍐佃鏄�,闄愬埗200瀛椾互鍐�"></el-input> </el-form-item> <!-- 淇¤鍥炲璇存槑 --> <el-form-item label="淇¤鍥炲璇存槑:" prop="replyExplain"> - <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="200" show-word-limit + <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit v-model="arrive.replyExplain" placeholder="璇疯緭鍏ュ洖璁胯鏄�,闄愬埗200瀛椾互鍐�"></el-input> </el-form-item> <!-- 鐜板満鎯呭喌鐓х墖 --> <el-form-item label="鐜板満鎯呭喌鐓х墖:" prop="situationPic"> - <div class="upImg"> - <div class="img-list"> - <img :src="item" alt="" v-for="(item,index) in arrive.situationPic" :key="index"> - </div> - <div class="upload" v-if="arrive.situationPic.length<4"> + <div class="upImg" > + <!-- <div class="img-list" v-if="arrive.situationPic.length!==0"> + <div class="img" v-for="(item,index) in arrive.situationPic" :key="index"> + <img :src="item" alt=""> + <i class="el-icon-close myicon" @click="handleRemove(index)"></i> + </div> + </div> --> + + <MyUpload @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload> + + <!-- <div class="upload" v-if="arrive.situationPic.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" - :limit="4" :on-success="handleSuccess" :headers="getToken()"> + action="/sccg/file/medias" multiple :show-file-list="false" + :limit="50" :on-success="handleSuccess" list-type="picture" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> - </div> - <div class="tip">{{arrive.situationPic.length}} / 4</div> + </div> --> + <div class="tip">{{ arrive.situationPic.length }} / 4</div> </div> </el-form-item> </el-form> @@ -43,7 +49,11 @@ </div> </template> <script> +import MyUpload from "@/components/myUpload" export default { + components: { + MyUpload + }, data() { const checkTime = (rule, value, callback) => { if (value) { @@ -74,10 +84,10 @@ } } const checkSitPic = (rule, value, callback) => { - if (value) { + if (value.length !== 0) { callback() } else { - callback(); + callback(new Error('璇蜂笂浼犵幇鍦烘儏鍐电収鐗�')); } } return { @@ -94,11 +104,11 @@ situationExplain: [ { trigger: 'blur', validator: checkSit } ], - replyExplain: [ - { trigger: 'blur', validator: checkReplay } - ], + // replyExplain: [ + // { trigger: 'blur', validator: checkReplay } + // ], situationPic: [ - { trigger: 'change', validator: checkSitPic } + { trigger: 'blur', validator: checkSitPic } ], }, fileList: [], @@ -107,7 +117,7 @@ methods: { handleSuccess(res, file, filelist) { const baseUrl = 'http://140.143.152.226:8410/'; - console.log(res); + console.log(this.fileList); if (this.arrive.situationPic.length < 4) { this.arrive.situationPic.push(baseUrl + res.data.url1) } @@ -120,15 +130,42 @@ } }, // 鑾峰彇arrive瀵硅薄 - backData(){ + backData() { const { arrive } = this; - this.$emit('getArrive',{arrive}); + this.$emit('getArrive', { arrive }); + }, + // 鍒犻櫎鍥剧墖 + handleRemove(index) { + this.arrive.situationPic.splice(index, 1); + }, + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + setPicUrl({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.arrive.situationPic.length < 4) { + this.arrive.situationPic.push(baseUrl + url) + } + }, + //鍒犻櫎鍥剧墖 + delPicUrl({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url),1); + console.log(this.arrive.situationPic); + } + }, + watch: { + 'arrive.situationPic.length': { + handler(newLen, oldLen) { + if (newLen !== 0) { + this.$refs.arriveForm.validateField('situationPic'); + } + }, + deep: true, } } } </script> <style lang="scss" scoped> -.arrive-title{ +.arrive-title { line-height: 60px; font-weight: 650; font-size: 20px; @@ -148,12 +185,26 @@ } .img-list { - height: 80px; + height: 60px; position: relative; + display: flex; img { width: 60px; height: 60px; + margin-right: 10px; + } + + .img { + height: 60px; + position: relative; + } + + .myicon { + position: absolute; + top: 0px; + right: 0px; + color: #4b9bb7; } } } -- Gitblit v1.8.0