From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 21 一月 2024 20:54:49 +0800
Subject: [PATCH] 优化
---
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue | 159 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 112 insertions(+), 47 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 52f1ccc..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
@@ -1,41 +1,64 @@
<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">
+ <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">
- <img :src="item" alt="" v-for="(item,index) in arrive.situationPic" :key="index">
+ <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="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false"
- :limit="4" :on-success="handleSuccess" :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>
@@ -43,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) {
@@ -66,18 +101,11 @@
callback(new Error('鐜板満鎯呭喌璇存槑涓嶈兘涓虹┖'));
}
}
- const checkReplay = (rule, value, callback) => {
- if (value) {
- callback()
- } else {
- callback(new Error('淇¤鍥炲璇存槑涓嶈兘涓虹┖'));
- }
- }
const checkSitPic = (rule, value, callback) => {
- if (value) {
+ if (value.length !== 0) {
callback()
} else {
- callback();
+ callback(new Error('璇蜂笂浼犵幇鍦烘儏鍐电収鐗�'));
}
}
return {
@@ -94,20 +122,22 @@
situationExplain: [
{ trigger: 'blur', validator: checkSit }
],
- replyExplain: [
- { trigger: 'blur', validator: checkReplay }
- ],
situationPic: [
- { trigger: 'change', validator: checkSitPic }
+ { trigger: 'blur', validator: checkSitPic }
],
},
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);
+ const baseUrl = '';
if (this.arrive.situationPic.length < 4) {
this.arrive.situationPic.push(baseUrl + res.data.url1)
}
@@ -119,11 +149,32 @@
return { Authorization: tokenHead + token }
}
},
+ // 鑾峰彇arrive瀵硅薄
+ backData() {
+ const { arrive } = this;
+ this.$emit('getArrive', { arrive });
+ },
+ // 鍒犻櫎鍥剧墖
+ handleRemove(index) {
+ 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);
+ }
}
}
</script>
<style lang="scss" scoped>
-.arrive-title{
+.arrive-title {
line-height: 60px;
font-weight: 650;
font-size: 20px;
@@ -135,7 +186,7 @@
.upImg {
display: flex;
-
+ overflow: auto;
.tip {
position: absolute;
bottom: 0;
@@ -143,12 +194,26 @@
}
.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;
}
}
}
@@ -164,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