From 0a1d2fe85a280f5543b9b3241aaf8d8a39a32f8c Mon Sep 17 00:00:00 2001 From: mg <maokecheng@163.com> Date: 星期四, 27 十月 2022 18:26:40 +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/book/index.vue | 175 +++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 148 insertions(+), 27 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..5a989a5 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 @@ -7,8 +7,8 @@ <!-- 鏂囦功绉嶇被 --> <el-form-item label="鏂囦功绉嶇被:" prop="writType"> <el-select v-model="book.writType" placeholder="璇疯緭鍏ユ枃涔︾绫�"> - <el-option v-for="item in kindList" :key="item.value" :label="item.label" - :value="item.value"> + <el-option v-for="item in kindList" :key="item.id" :label="item.name" + :value="item.id"> </el-option> </el-select> </el-form-item> @@ -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="/sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess2" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -83,28 +89,35 @@ <!-- 鏁存敼鍚庣収鐗� --> <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> - <div class="upload" v-if="book.rectifiedPic.length<4"> + <!-- <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="/sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess3" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> - </div> + </div> --> + <MyUpload @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload> <div class="tip">{{book.rectifiedPic.length}} / 4</div> </div> </el-form-item> <!-- 鍏朵粬鐓х墖 --> <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="/sccg/file/medias" multiple :show-file-list="false" :limit="4" :on-success="handleSuccess4" :headers="getToken()"> <i class="el-icon-plus"></i> </el-upload> @@ -117,7 +130,12 @@ </div> </template> <script> +import {getCodeList} from '@/utils/helper' +import MyUpload from "@/components/myUpload" export default { + components: { + MyUpload + }, data() { const checkKind = (rule, value, callback) => { if (value) { @@ -182,6 +200,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 +231,10 @@ bookRules: { writType: [ { - trigger: 'blur', validator: checkKind + trigger: 'change', validator: checkKind } ], - idwritCode: [ + writCode: [ { trigger: 'blur', validator: checkId } @@ -235,6 +274,19 @@ trigger: 'blur', validator: checkNote } ], + writPic: [{ + trigger: 'blur', validator: checkWritPic + }], + rectifiedPic: [ + { + trigger: 'blur', validator: checkRectPic + } + ], + originalPic: [ + { + trigger: 'blur', validator: checkOrgPic + } + ], }, fileList: [], kindList: [ @@ -250,36 +302,31 @@ } }, created() { - console.log(this.book.writPic) + const {getBookType} = this + getBookType(); }, props: ['caseId', 'closeDialog'], methods: { handleSuccess1(res, file, filelist) { const baseUrl = 'http://140.143.152.226:8410/'; - console.log(res); - // this.$set(this.book, 'writPic', baseUrl + res.data.url1); - // console.log(this.book.writPic); 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/'; - console.log(res); 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/'; - console.log(res); 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/'; - console.log(res); if (this.book.otherPic.length < 4) { this.book.otherPic.push(baseUrl + res.data.url1) } @@ -291,6 +338,66 @@ 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); + } + + }, + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + setPicUrl({ url }) { + const baseUrl = 'http://140.143.152.226:8410/'; + if (this.book.originalPic.length < 4) { + this.book.originalPic.push(baseUrl + url) + } + console.log(url); + }, + //鍒犻櫎鍥剧墖 + delPicUrl({url}){ + const baseUrl = 'http://140.143.152.226:8410/'; + console.log(url); + this.book.originalPic.splice(this.book.originalPic.indexOf(baseUrl + url),1); + console.log(this.book.originalPic); + }, + // 鑾峰彇鏂囦功绉嶇被 + 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> @@ -331,13 +438,27 @@ } .img-list { - height: 80px; + 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; + } } } -- Gitblit v1.8.0