yukai před 1 rokem
rodič
revize
3dc362dc0b

+ 1 - 1
src/views/iot/property/attribute/edit.vue

@@ -65,7 +65,7 @@ const typesData = ref([{
 	name:'日期',
 },{
 	value:'file',
-	name:'上传文件',
+	name:'上传图片',
 }])
 const baseForm = {
 	id: undefined,

+ 51 - 18
src/views/iot/property/dossier/component/from.vue

@@ -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>

+ 2 - 1
src/views/iot/property/dossier/edit.vue

@@ -125,7 +125,7 @@
     deviceCategory: '',
     installTime: '',
     deptId: '',
-    data: '',
+    data: [],
 
   };
 
@@ -166,6 +166,7 @@
 
   const resetForm = async () => {
     Object.assign(formData, { ...baseForm });
+    Datalist.value=''
     formRef.value && formRef.value.resetFields();
   };