From 7380328b0a5ac263cc75a2daed06f7a8eaeef0e4 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 20 十月 2022 17:44:28 +0800
Subject: [PATCH] 页面修改
---
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue | 129 ++++++++++++++++++++++++++++++++++++++-----
1 files changed, 114 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..aa762f1 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="/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="/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="/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,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