From 0027df1e43c4e1bdfc2646987e85210a695647e1 Mon Sep 17 00:00:00 2001
From: luobisheng <727299681@qq.com>
Date: 星期三, 16 十一月 2022 17:06:09 +0800
Subject: [PATCH] 图片，视频资源部分
---
src/views/operate/images/updateUser/index.vue | 84 ++++++++++++++++++++++++++++-------------
1 files changed, 57 insertions(+), 27 deletions(-)
diff --git a/src/views/operate/images/updateUser/index.vue b/src/views/operate/images/updateUser/index.vue
index ebcd0ad..7cf2e92 100644
--- a/src/views/operate/images/updateUser/index.vue
+++ b/src/views/operate/images/updateUser/index.vue
@@ -2,29 +2,35 @@
<div class="updateUser">
<main>
<div class="mainContent">
- <el-form :disabled="isDisabled" ref="user" style="width: 100%;">
+ <el-form :model="imagedata" :rules="rules" :disabled="isDisabled" ref="user" style="width: 100%;">
<el-form-item prop="baseId" label="鎵�灞炰簨浠剁紪鍙�">
<el-input v-model="imagedata.baseId"></el-input>
</el-form-item>
- <el-form-item prop="eventSource" label="澶х被鍚嶇О">
+ <el-form-item prop="eventSource" label="浜嬩欢鏉ユ簮">
<el-input v-model="imagedata.eventSource"></el-input>
</el-form-item>
- <el-form-item prop="regionName" label="灏忕被鍚嶇О">
+ <el-form-item prop="category" label="闂绫诲埆">
+ <el-input v-model="imagedata.category"></el-input>
+ </el-form-item>
+ <el-form-item prop="type" label="绫诲瀷">
+ <el-select v-model="imagedata.type">
+ <el-option v-for="item in getResourceType()" :key="item.value" :label="item.label" :value="item.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item prop="regionName" label="绀惧尯鍚嶇О">
<el-input v-model="imagedata.regionName"></el-input>
</el-form-item>
<el-form-item prop="id" label="鍥剧墖Id">
<el-input v-model="imagedata.id"></el-input>
</el-form-item>
- <el-form-item prop="createTime" label="涓婁紶鏃堕棿">
- <el-input v-model="imagedata.createTime"></el-input>
- </el-form-item>
- <el-form-item prop="eventSource" label="鍥剧墖:" min-width="8">
-<!-- <img style="width: 180px;height: 120px;" :src=imagedata.url>-->
+ <el-form-item prop="url" label="鍥剧墖:" min-width="8">
<el-upload
+ class="avatar-uploader"
action=""
+ ref="image"
:show-file-list="false"
- :on-success="handleImageSuccess"
- :before-upload="beforeImageUpload">
+ :auto-upload="true"
+ :http-request="imageUpload">
<img v-if="imagedata.url" :src="imagedata.url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
@@ -38,26 +44,47 @@
</div>
</template>
<script>
-import { deepClone } from "@/utils/helper";
+import { deepClone, RESOURCE_TYPE } from "@/utils/helper";
import imageManagement from "@/api/operate/imageManagement";
+import { FILE_ORIGINAL_URL } from "@/utils";
export default {
data() {
+ const validateImageUrl = (rule, value, callback) => {
+ if (this.imagedata.url) {
+ callback();
+ } else {
+ callback(new Error('璇蜂笂浼犲浘鐗�'));
+ }
+ };
return {
imagedata: {
- code: '',
+ baseId: '',
eventSource: '',
regionName: '',
- smallType: '',
+ category: '',
id: '',
- createTime: '',
- url: ''
+ url: '',
+ type: ''
+ },
+ rules: {
+ baseId: [{ 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
}
},
+
created() {
this.imagedata = deepClone(this.originalData);
+ if (this.dialogType !== 'create') {
+ this.imagedata.url = this.imagedata.url.split(',')[0];
+ }
this.isDisabled = this.dialogType === 'view';
},
methods: {
@@ -84,12 +111,22 @@
}
})
},
- handleImageSuccess() {},
- beforeImageUpload(file) {
- imageManagement.importImage(file)
+ imageUpload(file) {
+ const formData = new FormData();
+ formData.append('file', file.file);
+ imageManagement.importImage(formData)
.then(res => {
+ this.$refs.image.clearFiles();
+ this.$set(this.imagedata, 'url', FILE_ORIGINAL_URL + res.url1);
+ this.$message.success('涓婁紶鎴愬姛');
})
- .catch(err => this.$message.error(`${err}`))
+ .catch(err => {
+ this.$message.error(`${err}`);
+ this.$refs.image.clearFiles();
+ })
+ },
+ getResourceType(value) {
+ return value ? RESOURCE_TYPE.find(item => item.value === value) : RESOURCE_TYPE;
}
},
props: {
@@ -115,13 +152,6 @@
padding: 0 55px;
background-color: #09152f;
padding-bottom: 50px;
-
- // .mainTitle {
- // color: #4b9bb7;
- // font-weight: 600;
- // line-height: 100px;
- // font-size: 14px;
- // }
.mainContent {
display: flex;
@@ -257,7 +287,7 @@
color: red;
}
-.el-input {
+.el-input, .el-select {
width: 280px !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0