From 3845699a34ceb448b4d47a82bb928bf83203dcaf Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期三, 26 十月 2022 11:23:40 +0800
Subject: [PATCH] 上传处置图片上传过程展示
---
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue | 45 +++++++++++++++++-----
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue | 28 ++++++++++++--
src/components/myUpload/index.vue | 9 +++-
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue | 28 ++++++++++++--
4 files changed, 89 insertions(+), 21 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index 6bcc4ff..4b7be53 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -11,7 +11,6 @@
:on-success="handleSuccess"
:on-error="handleError"
:list-type="listType"
- :on-preview="handlePreview"
:on-remove="handleRemove"
:headers="getToken()">
<div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
@@ -32,7 +31,7 @@
// 澶氶��
multiple: false,
// 闄愬埗
- limit: 50,
+ limit: 4,
// 鎸夐挳楂樺害
btnHeight: '120px',
// 鎸夐挳瀹藉害
@@ -90,7 +89,7 @@
},
// 绉婚櫎鏂囦欢
handleRemove(file, fileList){
- console.log(file,fileList)
+ this.$emit('delPictureUrl',{url:file.response.data.url1});
}
},
props: {
@@ -98,6 +97,10 @@
setPictureUrl:{
type:Function,
default:()=>{}
+ },
+ delPictureUrl:{
+ type:Function,
+ default:()=>{}
}
}
}
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..985462f 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,31 +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" v-if="arrive.situationPic.length!==0">
+ <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>
- <div class="upload" v-if="arrive.situationPic.length<4">
+ </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="/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>
@@ -46,7 +49,11 @@
</div>
</template>
<script>
+import MyUpload from "@/components/myUpload"
export default {
+ components: {
+ MyUpload
+ },
data() {
const checkTime = (rule, value, callback) => {
if (value) {
@@ -130,7 +137,22 @@
},
// 鍒犻櫎鍥剧墖
handleRemove(index) {
- this.arrive.situationPic.splice(index,1);
+ 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)
+ }
+ console.log(url);
+ },
+ //鍒犻櫎鍥剧墖
+ delPicUrl({url}){
+ const baseUrl = 'http://140.143.152.226:8410/';
+ console.log(url);
+ this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url),1);
+ console.log(this.arrive.situationPic);
}
},
watch: {
@@ -169,15 +191,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;
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 26fbf54..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
@@ -89,19 +89,20 @@
<!-- 鏁存敼鍚庣収鐗� -->
<el-form-item label="鏁存敼鍚庣収鐗�:" prop="rectifiedPic">
<div class="upImg">
- <div class="img-list" v-if="book.rectifiedPic.length!==0">
+ <!-- <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">
+ </div> -->
+ <!-- <div class="upload" v-if="book.rectifiedPic.length<4">
<el-upload :file-list="fileList" class="upload-demo"
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>
@@ -130,7 +131,11 @@
</template>
<script>
import {getCodeList} from '@/utils/helper'
+import MyUpload from "@/components/myUpload"
export default {
+ components: {
+ MyUpload
+ },
data() {
const checkKind = (rule, value, callback) => {
if (value) {
@@ -346,6 +351,21 @@
}
},
+ // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧�
+ 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
diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
index 7d70c90..e952b39 100644
--- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
+++ b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
@@ -38,19 +38,20 @@
<!-- 鐓х墖闄勪欢 -->
<el-form-item label="鐓х墖闄勪欢:" prop="pic">
<div class="upImg">
- <div class="img-list" v-if="evidence.pic.length!==0">
+ <!-- <div class="img-list" v-if="evidence.pic.length!==0">
<div class="img" v-for="(item,index) in evidence.pic" :key="index">
<img :src="item" alt="">
<i class="el-icon-close myicon" @click="handleRemove(index)"></i>
</div>
- </div>
- <div class="upload" v-if="evidence.pic.length<4">
+ </div> -->
+ <MyUpload @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
+ <!-- <div class="upload" v-if="evidence.pic.length<4">
<el-upload :file-list="fileList" class="upload-demo"
action="/sccg/file/medias" multiple :show-file-list="false"
:limit="4" :on-success="handleSuccess2" :headers="getToken()">
<i class="el-icon-plus"></i>
</el-upload>
- </div>
+ </div> -->
<div class="tip">{{evidence.pic.length}} / 4</div>
</div>
</el-form-item>
@@ -151,7 +152,11 @@
<script>
import { getTypeList } from '@/utils/helper'
import {validateName,validatePhone,validateCardId} from '@/utils/validate'
+import MyUpload from "@/components/myUpload"
export default {
+ components: {
+ MyUpload
+ },
data() {
const checkName = (rule, value, callback) => {
if (value) {
@@ -522,6 +527,21 @@
// 鑾峰彇姘戞棌鍒楄〃
async getNationList() {
this.nationOptions = await getTypeList(1, '05');
+ },
+ // 璁剧疆涓婁紶鎴愬姛涔嬪悗鐨勫浘鐗囧湴鍧�
+ setPicUrl({ url }) {
+ const baseUrl = 'http://140.143.152.226:8410/';
+ if (this.evidence.pic.length < 4) {
+ this.evidence.pic.push(baseUrl + url)
+ }
+ console.log(url);
+ },
+ //鍒犻櫎鍥剧墖
+ delPicUrl({url}){
+ const baseUrl = 'http://140.143.152.226:8410/';
+ console.log(url);
+ this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1);
+ console.log(this.evidence.pic);
}
},
watch: {
--
Gitblit v1.8.0