From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题
---
src/views/operate/images/updateUser/index.vue | 523 +++++++++++++++++++++++++++++----------------------------
1 files changed, 265 insertions(+), 258 deletions(-)
diff --git a/src/views/operate/images/updateUser/index.vue b/src/views/operate/images/updateUser/index.vue
index 1de2e65..d195afc 100644
--- a/src/views/operate/images/updateUser/index.vue
+++ b/src/views/operate/images/updateUser/index.vue
@@ -1,17 +1,17 @@
<template>
- <div class="updateUser">
- <main>
- <div class="mainContent">
- <el-form
- label-position="right"
- label-width="150px"
- :model="imagedata"
- :rules="rules"
- :disabled="isDisabled"
- ref="user"
- style="width: 100%"
- >
- <!-- <el-form-item prop="belongToId" label="鎵�灞炰簨浠剁紪鍙�" v-if="true">
+ <div class="updateUser">
+ <main>
+ <div class="mainContent">
+ <el-form
+ label-position="right"
+ label-width="150px"
+ :model="imagedata"
+ :rules="rules"
+ :disabled="isDisabled"
+ ref="user"
+ style="width: 100%"
+ >
+ <!-- <el-form-item prop="belongToId" label="鎵�灞炰簨浠剁紪鍙�" v-if="true">
<el-input v-model="imagedata.code"></el-input>
</el-form-item>
<el-form-item prop="eventSource" label="浜嬩欢鏉ユ簮">
@@ -31,7 +31,7 @@
<el-form-item prop="id" label="鍥剧墖Id">
<el-input v-model="imagedata.id"></el-input>
</el-form-item> -->
- <!-- <el-form-item prop="type" label="绫诲瀷" v-show="false">
+ <!-- <el-form-item prop="type" label="绫诲瀷" v-show="false">
<el-select v-model="imagedata.type">
<el-option
v-for="item in getResourceType()"
@@ -41,308 +41,315 @@
/>
</el-select>
</el-form-item> -->
- <el-form-item prop="url" label="鍥剧墖:" min-width="8">
- <my-upload
- :picture-list="imageList"
- :is-show-upload="dialogType !== 'view'"
- @setPictureUrl="setPictureUrl"
- @delPictureUrl="delPictureUrl"
- ></my-upload>
- </el-form-item>
- <div v-if="!isDisabled" class="optionBtn">
- <el-button
- type="primary"
- class="btn submit"
- @click.native.prevent="onSubmit"
- >鎻愪氦</el-button>
- </div>
- </el-form>
- </div>
- </main>
- </div>
+ <el-form-item prop="url" label="鍥剧墖:" min-width="8">
+ <my-upload
+ :picture-list="imageList"
+ :is-show-upload="dialogType !== 'view'"
+ @setPictureUrl="setPictureUrl"
+ @delPictureUrl="delPictureUrl"
+ ></my-upload>
+ </el-form-item>
+ <div v-if="!isDisabled" class="optionBtn">
+ <el-button
+ type="primary"
+ class="btn submit"
+ @click.native.prevent="onSubmit"
+ >鎻愪氦</el-button
+ >
+ </div>
+ </el-form>
+ </div>
+ </main>
+ </div>
</template>
<script>
import {
- deepClone,
- RESOURCE_TYPE,
- CATEGOTY,
- EVENT_SOURCE,
+ deepClone,
+ RESOURCE_TYPE,
+ CATEGOTY,
+ EVENT_SOURCE,
} from "@/utils/helper";
import imageManagement from "@/api/operate/imageManagement";
-import { FILE_ORIGINAL_URL } from "@/utils";
+import { FILE_ORIGINAL_PATH } from "@/utils";
import MyUpload from "@/components/myUpload";
export default {
- components: { MyUpload },
- data() {
- const validateImageUrl = (rule, value, callback) => {
- if (this.imagedata.url) {
- callback();
- } else {
- callback(new Error("璇蜂笂浼犲浘鐗�"));
- }
- };
- return {
- imagedata: {
- belongToId: "",
- eventSource: 1,
- regionName: "",
- category: 1,
- id: "",
- url: "",
- type: "",
- },
- rules: {
- // belongToId: [
- // { required: true, trigger: "blur", message: "璇疯緭鍏ユ墍灞炰簨浠剁紪鍙�" },
- // ],
- // eventSource: [
- // { required: true, trigger: "blur", message: "璇疯緭鍏ヤ簨浠舵潵婧�" },
- // ],
- // regionName: [
- // { required: true, trigger: "blur", message: "璇疯緭鍏ョぞ鍖哄悕绉�" },
- // ],
- // id: [{ required: true, trigger: "blur", message: "璇疯緭鍏ュ浘鐗嘔d" }],
- // category: [
- // { required: true, trigger: "blue", message: "璇疯緭鍏ラ棶棰樼被鍨�" },
- // ],
- url: [{ required: true, validator: validateImageUrl }],
- // type: [
- // {
- // required: true,
- // trigger: ["blur", "change"],
- // message: "璇烽�夋嫨绫诲瀷",
- // },
- // ],
- },
- isDisabled: false,
- imageList: [],
- };
- },
+ components: { MyUpload },
+ data() {
+ const validateImageUrl = (rule, value, callback) => {
+ if (this.imagedata.url) {
+ callback();
+ } else {
+ callback(new Error("璇蜂笂浼犲浘鐗�"));
+ }
+ };
+ return {
+ imagedata: {
+ belongToId: "",
+ eventSource: 1,
+ regionName: "",
+ category: 1,
+ id: "",
+ url: "",
+ type: "",
+ },
+ rules: {
+ // belongToId: [
+ // { required: true, trigger: "blur", message: "璇疯緭鍏ユ墍灞炰簨浠剁紪鍙�" },
+ // ],
+ // eventSource: [
+ // { required: true, trigger: "blur", message: "璇疯緭鍏ヤ簨浠舵潵婧�" },
+ // ],
+ // regionName: [
+ // { required: true, trigger: "blur", message: "璇疯緭鍏ョぞ鍖哄悕绉�" },
+ // ],
+ // id: [{ required: true, trigger: "blur", message: "璇疯緭鍏ュ浘鐗嘔d" }],
+ // category: [
+ // { required: true, trigger: "blue", message: "璇疯緭鍏ラ棶棰樼被鍨�" },
+ // ],
+ url: [{ required: true, validator: validateImageUrl }],
+ // type: [
+ // {
+ // required: true,
+ // trigger: ["blur", "change"],
+ // message: "璇烽�夋嫨绫诲瀷",
+ // },
+ // ],
+ },
+ isDisabled: false,
+ imageList: [],
+ };
+ },
- created() {
- if (this.originalData) {
- this.imagedata = deepClone(this.originalData);
- }
- if (this.dialogType !== "create") {
- this.imageList = this.imagedata.url.split(",");
- }
- this.isDisabled = this.dialogType === "view";
- },
- methods: {
- onSubmit() {
- this.$refs.user.validate((valid) => {
- if (valid) {
- this.imagedata.type="03";
- const params = Object.assign({}, this.imagedata);
- delete params.regionName;
- delete params.category;
- delete params.eventSource;
- delete params.id;
- params.belongToId = +params.belongToId;
- if (this.dialogType === "create") {
- imageManagement
- .addImageResource(params)
- .then(() => {
- this.$message.success("鎿嶄綔鎴愬姛");
- this.$emit("closeDialog");
- })
- .catch((err) => this.$message.error(`${err}`));
- } else {
- imageManagement
- .updateImageResource(params)
- .then(() => {
- this.$message.success("鎿嶄綔鎴愬姛");
- this.$emit("closeDialog");
- })
- .catch((err) => this.$message.error(`${err}`));
- }
- } else {
- this.$message.warning("璇锋鏌ュ繀濉」");
+ created() {
+ if (this.originalData) {
+ this.imagedata = deepClone(this.originalData);
}
- });
+ if (this.dialogType !== "create") {
+ let _imageList = [];
+ let imageData = this.imagedata.url.split(",");
+ imageData.forEach((url) => {
+ _imageList.push(FILE_ORIGINAL_PATH + url);
+ });
+ this.imageList = _imageList;
+ }
+ this.isDisabled = this.dialogType === "view";
},
- setPictureUrl({ url }) {
- this.imageList.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`);
- this.imagedata.url = this.imageList.join(",");
- },
- delPictureUrl({ url }) {
- this.imageList = this.imageList.filter((item) => item !== url);
- this.imagedata.url = this.imageList.join(",");
- },
- getCategory(value) {
- return CATEGOTY.find((item) => item.value === value);
- },
+ methods: {
+ onSubmit() {
+ this.$refs.user.validate((valid) => {
+ if (valid) {
+ this.imagedata.type = "03";
+ const params = Object.assign({}, this.imagedata);
+ delete params.regionName;
+ delete params.category;
+ delete params.eventSource;
+ delete params.id;
+ params.belongToId = +params.belongToId;
+ if (this.dialogType === "create") {
+ imageManagement
+ .addImageResource(params)
+ .then(() => {
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.$emit("closeDialog");
+ })
+ .catch((err) => this.$message.error(`${err}`));
+ } else {
+ imageManagement
+ .updateImageResource(params)
+ .then(() => {
+ this.$message.success("鎿嶄綔鎴愬姛");
+ this.$emit("closeDialog");
+ })
+ .catch((err) => this.$message.error(`${err}`));
+ }
+ } else {
+ this.$message.warning("璇锋鏌ュ繀濉」");
+ }
+ });
+ },
+ setPictureUrl({ url }) {
- getEventSource(value) {
- return EVENT_SOURCE.find((item) => item.value === value);
+ this.imageList.push(FILE_ORIGINAL_PATH + url);
+ this.imagedata.url = this.imageList.join(",");
+ },
+ delPictureUrl({ url }) {
+ this.imageList = this.imageList.filter((item) => item !== url);
+ this.imagedata.url = this.imageList.join(",");
+ },
+ getCategory(value) {
+ return CATEGOTY.find((item) => item.value === value);
+ },
+
+ getEventSource(value) {
+ return EVENT_SOURCE.find((item) => item.value === value);
+ },
+ getResourceType(value) {
+ return value
+ ? RESOURCE_TYPE.find((item) => item.value === value)
+ : RESOURCE_TYPE;
+ },
},
- getResourceType(value) {
- return value
- ? RESOURCE_TYPE.find((item) => item.value === value)
- : RESOURCE_TYPE;
+ props: {
+ originalData: {
+ type: Object,
+ default: () => null,
+ },
+ dialogType: {
+ type: String,
+ default: () => "create",
+ },
},
- },
- props: {
- originalData: {
- type: Object,
- default: () => null,
- },
- dialogType: {
- type: String,
- default: () => "create",
- },
- },
};
</script>
<style lang="scss" scoped>
.updateUser {
- border-radius: 1px;
- // background-color: #09152f;
-
- main {
- // border: 1px solid #fff;
- text-align: left;
- padding: 0 55px;
+ border-radius: 1px;
// background-color: #09152f;
- padding-bottom: 50px;
- .mainContent {
- display: flex;
- justify-content: center;
- padding-top: 50px;
+ main {
+ // border: 1px solid #fff;
+ text-align: left;
+ padding: 0 55px;
+ // background-color: #09152f;
+ padding-bottom: 50px;
- .el-form-item__content {
- width: 400px;
+ .mainContent {
+ display: flex;
+ justify-content: center;
+ padding-top: 50px;
- .el-select {
- width: 100%;
+ .el-form-item__content {
+ width: 400px;
+
+ .el-select {
+ width: 100%;
+ }
+ }
+
+ .optionHandleSp {
+ display: flex;
+
+ .areaNumber,
+ .moreNumber {
+ flex: 1;
+ }
+
+ .telNumber {
+ flex: 2;
+ }
+ }
+
+ .optionBtn {
+ display: flex;
+ margin-top: 20px;
+ justify-content: center;
+
+ .btn {
+ padding: 12px 50px;
+ }
+ }
}
- }
-
- .optionHandleSp {
- display: flex;
-
- .areaNumber,
- .moreNumber {
- flex: 1;
- }
-
- .telNumber {
- flex: 2;
- }
- }
-
- .optionBtn {
- display: flex;
- margin-top: 20px;
- justify-content: center;
-
- .btn {
- padding: 12px 50px;
- }
- }
}
- }
}
.updateUser::v-deep .el-form-item__label {
- color: #4b9bb7;
+ color: #4b9bb7;
}
.updateUser::v-deep .el-input__inner {
- // background-color: #09152f;
- border: 1px solid #17324c;
+ // background-color: #09152f;
+ border: 1px solid #17324c;
}
.addPerson {
- display: flex;
- list-style: none;
- padding: 0;
- flex-wrap: wrap;
- max-width: 280px;
+ display: flex;
+ list-style: none;
+ padding: 0;
+ flex-wrap: wrap;
+ max-width: 280px;
- li {
- color: #fff;
- text-align: center;
- font-size: 30px;
- margin-left: 10px;
- }
+ li {
+ color: #fff;
+ text-align: center;
+ font-size: 30px;
+ margin-left: 10px;
+ }
}
.li-icon {
- background-color: #cccccc;
- width: 36px;
- height: 36px;
- border-radius: 50%;
- margin: 0 auto;
+ background-color: #cccccc;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ margin: 0 auto;
}
.li-btn {
- background-color: #cccccc;
- width: 36px;
- height: 36px;
- border-radius: 50%;
+ background-color: #cccccc;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
}
.card {
- position: absolute;
- z-index: 2000;
- right: 0;
+ position: absolute;
+ z-index: 2000;
+ right: 0;
- .box-card {
- min-height: 240px;
- max-height: 260px;
- overflow: hidden;
- // background-color: #09152f;
- position: relative;
- max-width: 220px;
+ .box-card {
+ min-height: 240px;
+ max-height: 260px;
+ overflow: hidden;
+ // background-color: #09152f;
+ position: relative;
+ max-width: 220px;
- .scrollWrap {
- overflow: scroll;
- height: 180px;
- position: relative;
- color: #4b9bb7;
+ .scrollWrap {
+ overflow: scroll;
+ height: 180px;
+ position: relative;
+ color: #4b9bb7;
- .el-checkbox-group {
- display: flex;
- flex-direction: column;
+ .el-checkbox-group {
+ display: flex;
+ flex-direction: column;
- .el-checkbox {
- line-height: 20px;
+ .el-checkbox {
+ line-height: 20px;
+ }
+ }
}
- }
- }
- .myclear {
- width: 100%;
- line-height: 20px;
- color: #4b9bb7;
- display: flex;
- justify-content: space-between;
- }
+ .myclear {
+ width: 100%;
+ line-height: 20px;
+ color: #4b9bb7;
+ display: flex;
+ justify-content: space-between;
+ }
- .hidebar {
- position: absolute;
- top: 77px;
- right: 20px;
- width: 20px;
- height: 180px;
- // background-color: #09152f;
- }
+ .hidebar {
+ position: absolute;
+ top: 77px;
+ right: 20px;
+ width: 20px;
+ height: 180px;
+ // background-color: #09152f;
+ }
- .item {
- line-height: 40px;
+ .item {
+ line-height: 40px;
+ }
}
- }
}
.leader {
- color: red;
+ color: red;
}
.el-input,
.el-select {
- width: 280px !important;
+ width: 280px !important;
}
</style>
--
Gitblit v1.8.0