|
@@ -1,3 +1,4 @@
|
|
|
+
|
|
|
<template>
|
|
|
<div>
|
|
|
<div v-for="(item, index) in Datalist" :key="index">
|
|
@@ -22,13 +23,21 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item :label="item.title + ':'" prop="path" v-if="item.types === 'file'">
|
|
|
- <el-upload accept="*" :show-file-list="true" :limit="1" :headers="headers" :action="uploadUrl" :on-success="customCallback(item.name)">
|
|
|
- <el-button>
|
|
|
- <el-icon> <ele-Upload /> </el-icon>
|
|
|
- 上传文件
|
|
|
- </el-button>
|
|
|
- </el-upload>
|
|
|
- <div>{{ url }}</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="customCallback(item.name)"
|
|
|
+ >
|
|
|
+ <img v-if="formData[item.name]" :src="formData[item.name]" class="avatar" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -37,12 +46,8 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, defineEmits, onMounted, defineProps } from 'vue'
|
|
|
import getOrigin from '/@/utils/origin'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
-const handlePageReload = () => {
|
|
|
- // 在每次重新打开页面时执行逻辑
|
|
|
- console.log('重新加载页面')
|
|
|
-}
|
|
|
-handlePageReload()
|
|
|
+import { Plus } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
const url = ref()
|
|
|
const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile')
|
|
|
const headers = {
|
|
@@ -57,20 +62,21 @@ const props = defineProps({
|
|
|
},
|
|
|
})
|
|
|
|
|
|
+const formData = ref({})
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
for (const item of props.Datalist) {
|
|
|
formData.value[item.name] = item.value ? item.value : ''
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const customCallback = (customValue) => {
|
|
|
- return function (file, response) {
|
|
|
+const customCallback = (customValue: string) => {
|
|
|
+ return function (file: any) {
|
|
|
formData.value[customValue] = file.data.full_path
|
|
|
+ saveData();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const formData = ref({})
|
|
|
-
|
|
|
const saveData = () => {
|
|
|
const updatedData = []
|
|
|
|
|
@@ -78,7 +84,7 @@ const saveData = () => {
|
|
|
updatedData.push({
|
|
|
productKey: item.productKey,
|
|
|
name: item.name,
|
|
|
- value: formData.value[item.name],
|
|
|
+ value: formData.value[item.name], // 更新为formData的实际值
|
|
|
fieldName: item.fieldName,
|
|
|
})
|
|
|
}
|
|
@@ -91,4 +97,31 @@ const saveData = () => {
|
|
|
.form-item {
|
|
|
flex: 0 0 25%;
|
|
|
}
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
</style>
|