增加设置筛选条件功能

src/api/device/index.ts

@@ -130,6 +130,7 @@ export default {
     delete: (ids: number[]) => del('/asset/assetRelationship/delete', { ids }),
   },
   dev_asset_metadata: {
+    get: (id: number) => get('/asset/assetMetadata/get', { id }),
     getList: (params: object) => get('/asset/assetMetadata/list', params),
     add: (params: object) => post('/asset/assetMetadata/add', params),
     edit: (params: object) => put('/asset/assetMetadata/edit', params),

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

@@ -1,24 +1,15 @@
 <template>
   <el-dialog class="api-edit" v-model="showDialog" title="设置筛选条件" 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="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 class="inline-form" ref="formRef" label-width="auto">
+      <el-form-item v-for="(item, i) in ruleList" :key="item.id" :label="item.title" :prop="item.name">
+        <template #label>
+          <el-checkbox v-model="item.isCheck">{{ item.title }}</el-checkbox>
+        </template>
+        <el-input v-if="item.types === 'input'" v-model="item.value" :disabled="!item.isCheck" placeholder="请输入" />
+        <el-input v-else-if="item.types === 'textarea'" v-model="item.value" :disabled="!item.isCheck" type="textarea" placeholder="请输入" />
+        <el-date-picker v-else-if="item.types === 'date'" v-model="item.value" :disabled="!item.isCheck" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable />
       </el-form-item>
+      <el-form-item v-if="ruleList.length % 2 === 1"> </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -32,36 +23,40 @@
 <script lang="ts" setup>
 import { ref, reactive, nextTick } from 'vue';
 import api from '/@/api/device'
-import system from '/@/api/system';
 
-import { ruleRequired } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
 
 const emit = defineEmits(['getList']);
-
 const showDialog = ref(false);
 const formRef = ref();
-const assetList = ref();
-const roleData = ref();
+const ruleList = ref([]);
 const baseForm = {
   id: undefined,
-  roleId: '',
-  assetId: '',
 };
 
-
 const formData = reactive({
   ...baseForm,
 });
 
-const ruleForm = {
-  roleId: [ruleRequired('角色不能为空')],
-  assetId: [ruleRequired('档案不能为空')],
-};
-
 const onSubmit = async () => {
-  await formRef.value.validate();
-  await api.assetRelationship.bind(formData);
+  const hasNull = ruleList.value.find((item: any) => {
+    const isNull = item.isCheck && !item.value
+    if (isNull) {
+      ElMessage.closeAll()
+      ElMessage.warning(`${item.title}不能为空`)
+    }
+    return isNull
+  })
+
+  if (hasNull) return
+
+  const ruleInfo = ruleList.value.map((item: any) => {
+    item.isCheck = item.isCheck ? 1 : 0
+    delete item.title
+    return item
+  })
+
+  await api.assetRelationship.editRuleInfo({ id: formData.id, ruleInfo });
   ElMessage.success('操作成功');
   resetForm();
   showDialog.value = false;
@@ -70,16 +65,27 @@ const onSubmit = async () => {
 
 const resetForm = async () => {
   Object.assign(formData, { ...baseForm });
+  ruleList.value = []
   formRef.value && formRef.value.resetFields();
 };
 
-
-const open = async (id: number) => {
+const open = async (row: any) => {
   resetForm();
   showDialog.value = true;
-  //获取所有的档案
-  api.assetRelationship.detail(id).then((res: any) => {
-    console.log(res)
+  formData.id = row.id
+  const productKey = row.assetInfo.productKey
+
+  //获取属性列表
+  api.dev_asset_metadata.detail({ productKey }).then((res: any) => {
+    const list = res.map((row: any) => ({
+      id: row.id,
+      name: row.name,
+      title: row.title,
+      types: row.types,
+      value: null,
+      isCheck: false,
+    }))
+    ruleList.value = list
   })
 };
 
@@ -89,4 +95,17 @@ defineExpose({ open });
 .demo-form-inline .el-input {
   --el-input-width: 320px;
 }
+
+.el-form {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+  align-items: flex-start;
+
+  .el-form-item {
+    flex: 1;
+    min-width: 40%;
+    margin-bottom: 0;
+  }
+}
 </style>

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

@@ -89,7 +89,6 @@ const queryRef = ref()
 const filterRef = ref()
 const treeData = ref()
 const editFormRef = ref()
-const productIno = ref()
 const ids = ref<number[]>([])
 
 
@@ -97,7 +96,7 @@ api.role.getList({ status: 1 }).then((res: any) => {
 	treeData.value = res
 })
 
-const { params, tableData, getList, loading } = useSearch<any[]>(device.assetRelationship.getList, 'Data', { keyWord: '', roleId: null })
+const { params, tableData, getList, loading } = useSearch<any[]>(device.assetRelationship.getList, 'Data', { keyWord: '', roleId: -1 })
 getList()
 const handleSelectionChange = (selection: any[]) => {
 	ids.value = selection.map((item) => item.id);
@@ -108,7 +107,7 @@ const addOrEdit = () => {
 }
 
 const set = (row: any) => {
-	filterRef.value.open(row.id)
+	filterRef.value.open(row)
 }
 
 const handleNodeClick = (data: any) => {