From 778039b40c8fcbe205f9a4a5fab27518d0c0a90d Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期二, 09 一月 2024 09:57:36 +0800 Subject: [PATCH] 2024年第一次bug修改 --- src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue | 145 +++++++++++++++++++++++++++++------------------- 1 files changed, 88 insertions(+), 57 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 e6b426c..092f8f3 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 @@ -2,43 +2,63 @@ <div class="arrive"> <div class="arrive-title">鍒拌揪鐜板満鎯呭喌</div> <div class="arrive-form"> - <el-form ref="arriveForm" label-width="160px" :model="arrive" :rules="arriveRules" autoComplete="on"> + <el-form + ref="arriveForm" + label-width="160px" + :model="arrive" + :rules="arriveRules" + autoComplete="on" + > <!-- 鍒拌揪鏃堕棿 --> <el-form-item label="鍒拌揪鏃堕棿:" prop="arrivalTime"> - <el-date-picker v-model="arrive.arrivalTime" type="datetime" placeholder="閫夋嫨鍒拌揪鏃堕棿"> + <el-date-picker + v-model="arrive.arrivalTime" + value-format="yyyy-MM-dd HH:mm:ss" + type="datetime" + placeholder="閫夋嫨鍒拌揪鏃堕棿" + > </el-date-picker> </el-form-item> <!-- 鍒拌揪鍦板潃 --> <el-form-item label="鍒拌揪鍦板潃:" prop="arrivalAddress"> - <el-input v-model="arrive.arrivalAddress" placeholder="璇疯緭鍏ュ湴鍧�"></el-input> + <el-input + v-model="arrive.arrivalAddress" + placeholder="璇疯緭鍏ュ湴鍧�" + ></el-input> </el-form-item> <!-- 鐜板満鎯呭喌璇存槑 --> <el-form-item label="鐜板満鎯呭喌璇存槑:" prop="situationExplain"> - <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="200" show-word-limit - v-model="arrive.situationExplain" placeholder="璇疯緭鍏ユ儏鍐佃鏄�,闄愬埗200瀛椾互鍐�"></el-input> + <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 - v-model="arrive.replyExplain" placeholder="璇疯緭鍏ュ洖璁胯鏄�,闄愬埗200瀛椾互鍐�"></el-input> + <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" 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> + <MyUpload + :picture-list="arrive.situationPic" + @setPictureUrl="setPicUrl" + @delPictureUrl="delPicUrl" + ></MyUpload> + <div class="tip"> + {{ arrive.situationPic.length }} / 4 </div> - <div class="upload" v-if="arrive.situationPic.length<4"> - <el-upload :file-list="fileList" class="upload-demo" - 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> </el-form-item> </el-form> @@ -46,7 +66,19 @@ </div> </template> <script> +import MyUpload from "@/components/myUpload" +import { deepClone } from "@/utils/helper"; +import { FILE_ORIGINAL_URL } from "@/utils"; export default { + components: { + MyUpload + }, + props: { + arriveData: { + type: Object, + default: () => null + } + }, data() { const checkTime = (rule, value, callback) => { if (value) { @@ -67,13 +99,6 @@ callback() } else { callback(new Error('鐜板満鎯呭喌璇存槑涓嶈兘涓虹┖')); - } - } - const checkReplay = (rule, value, callback) => { - if (value) { - callback() - } else { - callback(new Error('淇¤鍥炲璇存槑涓嶈兘涓虹┖')); } } const checkSitPic = (rule, value, callback) => { @@ -97,9 +122,6 @@ situationExplain: [ { trigger: 'blur', validator: checkSit } ], - replyExplain: [ - { trigger: 'blur', validator: checkReplay } - ], situationPic: [ { trigger: 'blur', validator: checkSitPic } ], @@ -107,11 +129,15 @@ fileList: [], } }, + created() { + if (this.arriveData) { + this.arrive = deepClone(this.arriveData); + this.arrive.situationPic = this.arriveData.situationPic.split(','); + } + }, methods: { handleSuccess(res, file, filelist) { - const baseUrl = 'http://140.143.152.226:8410/'; - console.log(res); - console.log(this.fileList); + const baseUrl = ''; if (this.arrive.situationPic.length < 4) { this.arrive.situationPic.push(baseUrl + res.data.url1) } @@ -130,17 +156,19 @@ }, // 鍒犻櫎鍥剧墖 handleRemove(index) { - this.arrive.situationPic.splice(index,1); - } - }, - watch: { - 'arrive.situationPic.length': { - handler(newLen, oldLen) { - if (newLen !== 0) { - this.$refs.arriveForm.validateField('situationPic'); - } - }, - deep: true, + this.arrive.situationPic.splice(index, 1); + }, + // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧� + setPicUrl({ url }) { + const baseUrl = ''; + if (this.arrive.situationPic.length < 4) { + this.arrive.situationPic.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`) + } + }, + //鍒犻櫎鍥剧墖 + delPicUrl({ url }) { + const baseUrl = ''; + this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url), 1); } } } @@ -158,7 +186,7 @@ .upImg { display: flex; - + overflow: auto; .tip { position: absolute; bottom: 0; @@ -169,15 +197,18 @@ height: 60px; position: relative; display: flex; + img { width: 60px; height: 60px; margin-right: 10px; } - .img{ + + .img { height: 60px; position: relative; } + .myicon { position: absolute; top: 0px; @@ -198,16 +229,16 @@ border-radius: 4px; } -::v-deep .el-textarea__inner { - background-color: #09152f; - border: 1px solid #17324c; -} +// ::v-deep .el-textarea__inner { +// // background-color: #09152f; +// border: 1px solid #17324c; +// } -::v-deep .el-input__count { - background-color: #09152f; -} +// ::v-deep .el-input__count { +// // background-color: #09152f; +// } -::v-deep .el-form-item__label { - color: #4b9bb7; -} -</style> \ No newline at end of file +// ::v-deep .el-form-item__label { +// color: #4b9bb7; +// } +</style> -- Gitblit v1.8.0