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/arrive/index.vue | 56 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 42 insertions(+), 14 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 858e326..e6b426c 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
@@ -1,6 +1,6 @@
<template>
<div class="arrive">
- <div class="arrive-title">鍒板ぇ鐜板満鎯呭喌</div>
+ <div class="arrive-title">鍒拌揪鐜板満鎯呭喌</div>
<div class="arrive-form">
<el-form ref="arriveForm" label-width="160px" :model="arrive" :rules="arriveRules" autoComplete="on">
<!-- 鍒拌揪鏃堕棿 -->
@@ -25,13 +25,16 @@
<!-- 鐜板満鎯呭喌鐓х墖 -->
<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 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">
<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>
@@ -74,10 +77,10 @@
}
}
const checkSitPic = (rule, value, callback) => {
- if (value) {
+ if (value.length !== 0) {
callback()
} else {
- callback();
+ callback(new Error('璇蜂笂浼犵幇鍦烘儏鍐电収鐗�'));
}
}
return {
@@ -98,17 +101,17 @@
{ trigger: 'blur', validator: checkReplay }
],
situationPic: [
- { trigger: 'change', validator: checkSitPic }
+ { trigger: 'blur', validator: checkSitPic }
],
},
fileList: [],
}
},
- props:['getArrive'],
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)
}
@@ -121,15 +124,29 @@
}
},
// 鑾峰彇arrive瀵硅薄
- backData(){
+ backData() {
const { arrive } = this;
- this.$emit('getArrive',{arrive});
+ this.$emit('getArrive', { arrive });
+ },
+ // 鍒犻櫎鍥剧墖
+ 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,
}
}
}
</script>
<style lang="scss" scoped>
-.arrive-title{
+.arrive-title {
line-height: 60px;
font-weight: 650;
font-size: 20px;
@@ -149,12 +166,23 @@
}
.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