完成档案回显

src/views/iot/property/dossier/component/from.vue

@@ -1,83 +1,103 @@
 <template>
   <div>
-      <el-form-item :label="info.title + ':'" :prop="info.name" class="form-item" v-if="info.types === 'input'">
-        <el-input v-model="formData[info.name]" :placeholder="'请输入' + info.title" @input="saveData()" />
+    <div v-for="(item, index) in Datalist" :key="index">
+      <el-form-item :label="item.title + ':'" :prop="item.name" class="form-item" v-if="item.types === 'input'">
+        <el-input v-model="formData[item.name]" :placeholder="'请输入' + item.title" @input="saveData()" />
       </el-form-item>
-      <el-form-item :label="info.title + '：'" :prop="info.name" class="form-item" v-if="info.types === 'textarea'">
-        <el-input v-model="formData[info.name]" type="textarea" @input="saveData()" />
+      <el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'textarea'">
+        <el-input v-model="formData[item.name]" type="textarea" @input="saveData()" />
       </el-form-item>
 
-      <el-form-item v-if="info.types === 'date'" :label="info.title + '：'">
-        <el-date-picker v-model="formData[info.name]" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable   @change="saveData()"/>
+      <el-form-item v-if="item.types === 'date'" :label="item.title + '：'">
+        <el-date-picker
+          v-model="formData[item.name]"
+          :default-value="item.value"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择时间"
+          class="w100"
+          clearable
+          @change="saveData()"
+        />
       </el-form-item>
 
-       <el-form-item :label="info.title + '：'" prop="path" v-if="info.types === 'file'">
-            <el-upload accept="*" :show-file-list="true"   :limit="1" :headers="headers" :action="uploadUrl"
-              :on-success="updateImg">
-              <el-button>
-                <el-icon> <ele-Upload /> </el-icon>
-                上传文件
-              </el-button>
-            </el-upload>
-            <div>{{ url }}</div>
-          </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="updateImg"
+        >
+          <el-button>
+            <el-icon> <ele-Upload /> </el-icon>
+            上传文件
+          </el-button>
+        </el-upload>
+        <div>{{ url }}</div>
+      </el-form-item>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from 'vue';
-import getOrigin from '/@/utils/origin';
-import { ElMessage } from 'element-plus';
+  import { ref, defineEmits, onMounted,defineProps ,onUnmounted} from 'vue';
+  import getOrigin from '/@/utils/origin';
+  import { ElMessage } from 'element-plus';
 
-const url = ref();
-const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile');
-const headers = {
-  Authorization: 'Bearer ' + localStorage.token,
-};
-const emit = defineEmits(['SetSaveData']);
+  const url = ref();
+  const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile');
+  const headers = {
+    Authorization: 'Bearer ' + localStorage.token,
+  };
+  const emit = defineEmits(['SetSaveData']);
 
-const props = defineProps({
-  info: {
-    type: Object,
-    default: () => {}
-  },
-  index: {
-    type: Number,
-    default: () => 0
-  }
-});
+  const props = defineProps({
+    Datalist: {
+      type: Array,
+      default: () => [],
+    },
+  });
+ 
+    onMounted(() => {
+    for (const item of props.Datalist) {
+      formData.value[item.name] = item.value ? item.value : '';
+            console.log(item.value);
 
-const updateImg = (res: any) => {
-  if (res.code === 0) {
-    url.value= res.data.full_path
-    ElMessage.success('上传成功');
-  } else {
-    ElMessage.error(res.message);
-  }
-};
-const formData = ref({
-  productKey: props.info.productKey,
-  fieldName: props.info.fieldName,
-  name: props.info.name,
-  value: '',
-});
+    }
+  });
 
-const saveData = () => {
-    formData.value.value = formData.value[props.info.name];
-    
-    let newdata = {
-      index: props.index,
-      data: formData.value,
+  const updateImg = (res: any) => {
+    if (res.code === 0) {
+      url.value = res.data.full_path;
+      ElMessage.success('上传成功');
+    } else {
+      ElMessage.error(res.message);
     }
-  emit('SetSaveData', newdata);
-};
+  };
+
+  const formData = ref({});
+
+  const saveData = () => {
+    const updatedData = [];
+
+    for (const item of props.Datalist) {
+      updatedData.push({
+        productKey: item.productKey,
+        name: item.name,
+        value: formData.value[item.name],
+        fieldName: item.fieldName,
+      });
+    }
+
+    console.log(updatedData);
+    emit('SetSaveData', updatedData);
+  };
 </script>
 
 <style scoped lang="scss">
-.form-item {
-  flex: 0 0 25%;
-}
+  .form-item {
+    flex: 0 0 25%;
+  }
 </style>

src/views/iot/property/dossier/edit.vue

@@ -1,245 +1,250 @@
 <template>
-	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑设备档案' : '新增设备档案'}`" width="800px"
-		:close-on-click-modal="false" :close-on-press-escape="false">
-		<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
-
-			<el-row>
-				<el-col :span="12">
-					<el-form-item label="选择产品" prop="productKey">
-						<el-select v-model="formData.productKey" placeholder="请选择产品" class="w100" disabled>
-							<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
-							<span style="float: left">{{ item.name }}</span>
-							<span style="float: right; font-size: 13px">{{ item.key }}</span>
-						</el-option>
-						</el-select>
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12">
-					<el-form-item label="选择设备" prop="deviceKey">
-						<el-select v-model="formData.deviceKey" placeholder="请选择设备" class="w100" clearable @change="handleSelectionChange">
-							<el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
-							<span style="float: left">{{ item.name }}</span>
-							<span style="float: right; font-size: 13px">{{ item.key }}</span>
-						</el-option>
-					</el-select>
-					</el-form-item>
-				</el-col>
-			</el-row>
-
-			<el-row>
-				<el-col :span="12">
-					<el-form-item label="设备名称" prop="deviceName">
-						<el-input v-model.trim="formData.deviceName" placeholder="请输入设备名称" disabled />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12">
-					<el-form-item label="设备编码" prop="deviceNumber">
-						<el-input v-model.trim="formData.deviceNumber" placeholder="请输入设备编码" />
-					</el-form-item>
-				</el-col>
-			</el-row>
-
-
-			<el-row>
-				<el-col :span="12">
-					<el-form-item label="所属区域" prop="area">
-						<el-cascader :options="orgData"
-							:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
-							placeholder="请选择区域" clearable class="w100" v-model="formData.area">
-							<template #default="{ node, data }">
-								<span>{{ data.name }}</span>
-								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-							</template>
-						</el-cascader>
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12">
-					<el-form-item label="安装时间">
-						<el-date-picker v-model="formData.installTime" type="date" value-format="YYYY-MM-DD"
- placeholder="请选择时间" class="w100" clearable />
-					</el-form-item>
-				</el-col>
-			</el-row>
-
-
-	<el-row>
-				<el-col :span="12">
-					<el-form-item label="所属部门" prop="deptId">
-          <el-cascader :options="deptData" :props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="formData.deptId">
-            <template #default="{ node, data }">
-              <span>{{ data.deptName }}</span>
-              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-            </template>
-          </el-cascader>
-        </el-form-item>
-				</el-col>
-
-				<el-col :span="12">
-					<el-form-item label="设备类型">
-						<el-input v-model.trim="formData.deviceCategory" placeholder="请输入设备类型"  />
-					</el-form-item>
-				</el-col>
-			</el-row>
-
-    <el-divider content-position="left">自定义属性</el-divider>
-		    <div v-for="(item, index) in Datalist" :key="index">
-						<FromData :info="item" :index="index" @SetSaveData="SetSaveData"></FromData>
-			  </div>
-
-		</el-form>
-
-
-
-
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="showDialog = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit">确定</el-button>
-			</div>
-		</template>
-	</el-dialog>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑设备档案' : '新增设备档案'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="选择产品" prop="productKey">
+            <el-select v-model="formData.productKey" placeholder="请选择产品" class="w100" disabled>
+              <el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; font-size: 13px">{{ item.key }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="选择设备" prop="deviceKey">
+            <el-select v-model="formData.deviceKey" placeholder="请选择设备" class="w100" clearable @change="handleSelectionChange">
+              <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
+                <span style="float: left">{{ item.name }}</span>
+                <span style="float: right; font-size: 13px">{{ item.key }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="设备名称" prop="deviceName">
+            <el-input v-model.trim="formData.deviceName" placeholder="请输入设备名称" disabled />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="设备编码" prop="deviceNumber">
+            <el-input v-model.trim="formData.deviceNumber" placeholder="请输入设备编码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="所属区域" prop="area">
+            <el-cascader :options="orgData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择区域" clearable class="w100" v-model="formData.area">
+              <template #default="{ node, data }">
+                <span>{{ data.name }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="安装时间">
+            <el-date-picker v-model="formData.installTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="所属部门" prop="deptId">
+            <el-cascader :options="deptData" :props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="formData.deptId">
+              <template #default="{ node, data }">
+                <span>{{ data.deptName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="设备类型">
+            <el-input v-model.trim="formData.deviceCategory" placeholder="请输入设备类型" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-divider content-position="left">自定义属性</el-divider>
+      <FromData :Datalist="Datalist"  @SetSaveData="SetSaveData" v-if="Datalist && Datalist.length>0"></FromData>
+    </el-form>
+
+
+
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
-import api from '/@/api/device'
-import system from '/@/api/system';
-import FromData from './component/from.vue';
-
-import { ruleRequired } from '/@/utils/validator';
-import { ElMessage } from 'element-plus';
-
-const emit = defineEmits(['getList']);
-
-const showDialog = ref(false);
-const formRef = ref();
-const orgData = ref();
-const deviceList=ref();
-const productData=ref();
-const deptData=ref();
-const Datalist=ref();
-const newData = ref([]); 
-const baseForm = {
-	id: undefined,
-	productKey: '',
-	deviceKey:'',
-	deviceName:'',
-	area: "",
-	deviceNumber: '',
-	deviceCategory: '',
-	installTime: '',
-	deptId: '',
-	data:'',
-
-};
-
-
-const SetSaveData = (data: any) => {
-		newData.value[data.index] = data.data;
-		formData.data= newData;
-}
-
-const formData = reactive({
-	...baseForm,
-});
-
-const ruleForm = {
-	productKey: [ruleRequired('所属产品不能为空')],
-	deviceName: [ruleRequired('设备名称不能为空')],
-	deviceKey: [ruleRequired('设备不能为空')],
-};
-const handleSelectionChange=(value:any)=> {
-      const selectedOption = deviceList.value.find(option => option.key === value);
-      if (selectedOption) {
-        formData.deviceName = selectedOption.name;
-      } else {
-        formData.deviceName = '';
+  import { ref, reactive, nextTick } from 'vue';
+  import api from '/@/api/device'
+  import system from '/@/api/system';
+  import FromData from './component/from.vue';
+
+  import { ruleRequired } from '/@/utils/validator';
+  import { ElMessage } from 'element-plus';
+
+  const emit = defineEmits(['getList']);
+
+  const showDialog = ref(false);
+  const formRef = ref();
+  const orgData = ref();
+  const deviceList = ref();
+  const productData = ref();
+  const deptData = ref();
+  const Datalist = ref();
+  const newData = ref([]);
+  const baseForm = {
+    id: undefined,
+    productKey: '',
+    deviceKey: '',
+    deviceName: '',
+    area: "",
+    deviceNumber: '',
+    deviceCategory: '',
+    installTime: '',
+    deptId: '',
+    data: '',
+
+  };
+
+
+  const SetSaveData = (data: any) => {
+    formData.data = data;
+  }
+  const formData = reactive({
+    ...baseForm,
+  });
+
+  const ruleForm = {
+    productKey: [ruleRequired('所属产品不能为空')],
+    deviceName: [ruleRequired('设备名称不能为空')],
+    deviceKey: [ruleRequired('设备不能为空')],
+  };
+  const handleSelectionChange = (value: any) => {
+    const selectedOption = deviceList.value.find(option => option.key === value);
+    if (selectedOption) {
+      formData.deviceName = selectedOption.name;
+    } else {
+      formData.deviceName = '';
+    }
+  }
+
+  const onSubmit = async () => {
+    await formRef.value.validate();
+
+    const theApi = formData.id ? api.dev_asset.edit : api.dev_asset.add;
+
+    await theApi(formData);
+
+    ElMessage.success('操作成功');
+    resetForm();
+    showDialog.value = false;
+    emit('getList');
+  };
+
+  const resetForm = async () => {
+    Object.assign(formData, { ...baseForm });
+    formRef.value && formRef.value.resetFields();
+  };
+
+  const getIdByKey = (key: string) => {
+    for (let i = 0; i < productData.value.length; i++) {
+      if (productData.value[i].key === key) {
+        return productData.value[i].id;
       }
- }
-
-const onSubmit = async () => {
-	await formRef.value.validate();
-
-	const theApi = formData.id ? api.dev_asset.edit : api.dev_asset.add;
-
-	await theApi(formData);
-
-	ElMessage.success('操作成功');
-	resetForm();
-	showDialog.value = false;
-	emit('getList');
-};
-
-const resetForm = async () => {
-	Object.assign(formData, { ...baseForm });
-	formRef.value && formRef.value.resetFields();
-};
-
-	const getIdByKey=(key:string) =>{
-			for (let i = 0; i < productData.value.length; i++) {
-				if (productData.value[i].key === key) {
-					return productData.value[i].id;
-				}
-			}
-			return null; // 如果没有找到匹配的key，则返回null（或者其他合适的值）
-		}
-
-const open = async (row: any,productInfo:any) => {
-	resetForm();
-	showDialog.value = true;		
-	nextTick(() => {
-		//获取区域
-		system.org.getList({ status: 1 }).then((res: any) => {
-			res.forEach((item) => {
-				item.id = item.id.toString();
-			});
-			orgData.value = res || [];
-		});
-		
-		//获取 所有的产品
-		api.product.getLists({}).then((resp: any) => {
-			productData.value = resp.product;
-			if(row.id){
-				productInfo={
-					id:getIdByKey(row.productKey),
-					key:row.productKey,
-				}
-			}
-			//根据产品ID获取设备列表
-			api.device.allList({ productId: productInfo.id }).then((resd: any) => {
-				deviceList.value = resd.device || [];
-			});
-				api.dev_asset_metadata.getList({ productKey: productInfo.key,pageSize:50,pageNum:1,status:-1,total:0 }).then((res: any) => {
-					Datalist.value = res.Data || [];
-				});
-
-			//获取档案属性
-		})
-
-
-
-		//获取部门
-		api.dept.getList({ status: -1 }).then((res: any) => {
-				res.forEach((item) => {
-					item.deptId = item.deptId.toString();
-				});
+    }
+    return null; // 如果没有找到匹配的key，则返回null（或者其他合适的值）
+  }
+
+  const open = async (row: any, productInfo: any) => {
+    resetForm();
+    showDialog.value = true;
+    nextTick(() => {
+      //获取区域
+      system.org.getList({ status: 1 }).then((res: any) => {
+        res.forEach((item) => {
+          item.id = item.id.toString();
+        });
+        orgData.value = res || [];
+      });
+
+      //获取 所有的产品
+      api.product.getLists({}).then((resp: any) => {
+        productData.value = resp.product;
+        if (row.id) {
+          productInfo = {
+            id: getIdByKey(row.productKey),
+            key: row.productKey,
+          }
+
+
+        }
+        //根据产品ID获取设备列表
+        api.device.allList({ productId: productInfo.id }).then((resd: any) => {
+          deviceList.value = resd.device || [];
+        });
+
+      })
+
+
+
+      //获取部门
+      api.dept.getList({ status: -1 }).then((res: any) => {
+        res.forEach((item) => {
+          item.deptId = item.deptId.toString();
+        });
         deptData.value = res || [];
+      });
+
+
+      if (row.id) {
+        api.dev_asset.detail({ deviceKey: row.deviceKey }).then((resde: any) => {
+          Object.assign(formData, { ...resde });
+          formData.productKey = row.productKey
+          const newArray = resde.data.map(obj => {
+            const { name, value, ...rest } = obj;
+            const newObj = { name, value, ...rest };
+            newObj[name] = value?value:'';
+            return newObj;
+          });
+          Datalist.value = newArray
+        });
+      } else {
+        //获取档案属性
+        api.dev_asset_metadata.getList({ productKey: productInfo.key, pageSize: 50, pageNum: 1, status: -1, total: 0 }).then((res: any) => {
+          Datalist.value = res.Data || [];
+          formData.productKey = productInfo.key
+        });
+      }
     });
+  };
 
-		Object.assign(formData, { ...row });
-		formData.productKey=productInfo.key
-
-
-	});
-};
-
-defineExpose({ open });
+  defineExpose({ open });
 </script>
 <style scoped lang="scss">
-.demo-form-inline .el-input {
-	--el-input-width: 320px;
-}
+  .demo-form-inline .el-input {
+    --el-input-width: 320px;
+  }
 </style>