From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/productDetail/components/UploadBox.vue | 67 ++++++++++++++++++++++++++-------
1 files changed, 52 insertions(+), 15 deletions(-)
diff --git a/src/views/productDetail/components/UploadBox.vue b/src/views/productDetail/components/UploadBox.vue
index 3c29672..6e7bde6 100644
--- a/src/views/productDetail/components/UploadBox.vue
+++ b/src/views/productDetail/components/UploadBox.vue
@@ -61,20 +61,28 @@
<el-form-item label="澶囨敞" prop="reserved">
<el-input type="textarea" v-model="item.reserved"></el-input>
</el-form-item>
- <el-form-item label="浠樻鍑瘉" prop="pic">
+ <el-form-item
+ label="浠樻鍑瘉"
+ :prop="`list[${index}].appendix`"
+ :rules="[
+ { required: true, message: '璇蜂笂浼犲嚟璇�', trigger: 'blur' },
+ ]"
+ >
+ <el-image
+ class="preview"
+ v-if="item.appendix"
+ :src="`/httpImage/${item.appendix}`"
+ fit="contain"
+ ></el-image>
<el-upload
+ v-else
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="(param) => definedUpload(param, index)"
:show-file-list="false"
+ accept=".jpg, .jpeg, .png"
>
- <el-image
- class="preview"
- v-if="item.appendix"
- :src="`/httpImage/${item.appendix}`"
- fit="contain"
- ></el-image>
<div class="el-upload__text">
<i class="el-icon-plus"></i>
<span class="words">
@@ -82,11 +90,13 @@
</span>
</div>
</el-upload>
- <i
- class="el-icon-error remove"
- v-if="item.appendix"
- @click="item.appendix = ''"
- ></i>
+ <div>
+ <i
+ class="el-icon-error remove"
+ v-if="item.appendix"
+ @click="item.appendix = ''"
+ ></i>
+ </div>
</el-form-item>
<!-- <div class="text-left" v-if="index!=0">
<el-button
@@ -158,9 +168,22 @@
this.certificateForm.list.splice(index, 1);
},
definedUpload(param, index) {
+ const fileName = param.file.name;
+ const m = fileName.match(/\.(\w+)(#|\?|$)/);
+ const fileType = (m && m[1]).toString().toLowerCase();
+ const validType = ["jpg", "jpeg", "png"].includes(fileType);
+ if (!validType) {
+ this.$notify({
+ message: "涓婁紶鏍煎紡鏈夎",
+ type: "warning",
+ });
+ return;
+ }
+
let _this = this;
const fd = new FormData();
fd.append("file", param.file);
+ console.log(param);
request({
method: "post",
url: `/saas/api-s/saasFile/upload`,
@@ -191,8 +214,18 @@
duration: 2500,
offset: 57,
});
- this.certificateSubmitVisible = false;
- this.close();
+
+ if (this.$route.path === "/personalCenter") {
+ this.$emit("closeAll");
+ return;
+ }
+
+ this.$router.push({
+ path: "/personalCenter",
+ query: {
+ id: 0,
+ },
+ });
}
})
.catch((e) => {
@@ -267,7 +300,7 @@
right: 20px;
bottom: 20px;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
text-align: center;
line-height: 40px;
@@ -315,6 +348,9 @@
font-size: 12px;
}
}
+.el-image {
+ width: 120px;
+}
</style>
<style lang="scss">
@@ -324,6 +360,7 @@
border: 1px dashed #c0c5cc !important;
border-radius: 3px;
background: #e9ebee;
+
.el-upload__text {
margin-top: 35px;
display: flex;
--
Gitblit v1.8.0