修改新增资产关系一对一改为一对多，

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

@@ -1,25 +1,31 @@
 <template>
-  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑资产关系' : '新增资产关系'}`" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="auto">
-      <el-form-item label="选择角色" prop="roleId">
-        <el-cascader :options="roleData" :props="{
-          checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name'
-        }" placeholder="请选择角色" clearable class="w100" v-model="formData.roleId">
-          <template #default="{ node, data }">
-            <span>{{ data.name }}</span>
-            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-          </template>
-        </el-cascader>
-      </el-form-item>
-      <el-form-item label="选择档案" prop="assetId" style="margin-bottom: 0;">
-        <el-select v-model="formData.assetId" placeholder="请选择" class="w100" filterable clearable>
-          <el-option v-for="item in assetList" :key="item.id" :label="item.deviceName" :value="item.id">
-            <!-- <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-form>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑资产关系' : '新增资产关系'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <div class="dialog-wrapper" v-if="showDialog">
+      <el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="auto">
+        <el-form-item label="选择角色" prop="roleId">
+          <el-cascader :options="roleData" :props="{
+            checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name'
+          }" placeholder="请选择角色" clearable class="w100" disabled v-model="formData.roleId">
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="已选档案" prop="assetId">
+          <el-tag v-for="name in assetName" class="mr-2">{{ name }} </el-tag>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange" v-loading="loading">
+        <el-table-column type="selection" reserve-selection width="55" align="center" />
+        <el-table-column prop="deviceName" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="deviceKey" label="设备KEY" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="deviceNumber" label="设备编码" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="deviceCategory" label="设备类型" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="installTime" label="安装时间" width="160" align="center"></el-table-column>
+      </el-table>
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+    </div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="showDialog = false">取消</el-button>
@@ -33,32 +39,38 @@
 import { ref, reactive, nextTick } from 'vue';
 import api from '/@/api/device'
 import system from '/@/api/system';
-
+import { useSearch } from '/@/hooks/useCommon'
 import { ruleRequired } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
+import { deepClone } from '/@/utils/other';
 
 const emit = defineEmits(['getList']);
 
 const showDialog = ref(false);
 const formRef = ref();
-const assetList = ref();
-const roleData = ref();
+const roleData = ref([]);
+const assetName = ref<string[]>([]);
 const baseForm = {
   id: undefined,
   roleId: '',
-  assetId: '',
+  assetId: [],
 };
 
-
-const formData = reactive({
-  ...baseForm,
-});
+const formData = reactive<any>(deepClone(baseForm));
 
 const ruleForm = {
   roleId: [ruleRequired('角色不能为空')],
   assetId: [ruleRequired('档案不能为空')],
 };
 
+const { params, tableData, getList, loading } = useSearch<any[]>(api.dev_asset.getList, 'Data', { pageSize: 10 })
+getList()
+
+const handleSelectionChange = (selection: any[]) => {
+  formData.assetId = selection.map((item) => item.id);
+  assetName.value = selection.map((item) => item.deviceName);
+};
+
 const onSubmit = async () => {
   await formRef.value.validate();
   await api.assetRelationship.bind(formData);
@@ -69,27 +81,19 @@ const onSubmit = async () => {
 };
 
 const resetForm = async () => {
-  Object.assign(formData, { ...baseForm });
+  Object.assign(formData, deepClone(baseForm));
+  assetName.value = []
   formRef.value && formRef.value.resetFields();
 };
 
-
-const open = async () => {
+const open = async (roleId: string) => {
   resetForm();
   showDialog.value = true;
-  nextTick(() => {
-
-    //获取所有的角色
-    system.role.getList({ status: 1 }).then((resp: any) => {
-      roleData.value = resp;
-    })
-
-    //获取所有的档案
-    api.dev_asset.all({}).then((resp: any) => {
-      assetList.value = resp
-    })
-
-  });
+  formData.roleId = roleId;
+  //获取所有的角色
+  system.role.getList({ status: 1 }).then((resp: any) => {
+    roleData.value = resp;
+  })
 };
 
 defineExpose({ open });

src/views/iot/property/relationship/index.vue

@@ -4,7 +4,6 @@
 			<el-form-item label="名称" prop="keyWord">
 				<el-input v-model="params.keyWord" placeholder="请输入名称" clearable style="width: 240px" />
 			</el-form-item>
-
 			<el-form-item>
 				<el-button type="primary" class="ml10" @click="getList(1)">
 					<el-icon>
@@ -14,7 +13,7 @@
 				</el-button>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="primary" @click="addOrEdit()" v-auth="'add'">
+				<el-button type="primary" @click="addOrEdit()" v-if="params.roleId" v-auth="'add'">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
@@ -91,19 +90,18 @@ const treeData = ref()
 const editFormRef = ref()
 const ids = ref<number[]>([])
 
-
 api.role.getList({ status: 1 }).then((res: any) => {
 	treeData.value = res
 })
 
-const { params, tableData, getList, loading } = useSearch<any[]>(device.assetRelationship.getList, 'Data', { keyWord: '', roleId: -1 })
+const { params, tableData, getList, loading } = useSearch<any[]>(device.assetRelationship.getList, 'Data', { keyWord: '', roleId: null })
 getList()
 const handleSelectionChange = (selection: any[]) => {
 	ids.value = selection.map((item) => item.id);
 };
 
 const addOrEdit = () => {
-	editFormRef.value.open()
+	editFormRef.value.open(params.roleId)
 }
 
 const set = (row: any) => {