增加删除，解绑，修改状态操作，增加设置筛选条件弹窗

src/api/device/index.ts

@@ -113,6 +113,7 @@ export default {
     export: (data: object) => file('/product/device/export', data),
   },
   dev_asset: {
+    all: (params: object) => get('/asset/asset/all', params),
     getList: (params: object) => get('/asset/asset/list', params),
     add: (params: object) => post('/asset/asset/add', params),
     edit: (params: object) => put('/asset/asset/edit', params),
@@ -122,8 +123,9 @@ export default {
   assetRelationship: {
     getList: (params: object) => get('/asset/assetRelationship/list', params),
     bind: (params: object) => post('/asset/assetRelationship/bind', params),
+    unBind: (id: number) => post('/asset/assetRelationship/unBind', { id }),
     editRuleInfo: (params: object) => put('/asset/assetRelationship/editRuleInfo', params),
-    editStatus: (params: object) => put('/asset/assetRelationship/editStatus', params),
+    editStatus: (id: number, status: number) => put('/asset/assetRelationship/editStatus', { id, status }),
     detail: (id: number) => get('/asset/assetRelationship/getById', { id }),
     delete: (ids: number[]) => del('/asset/assetRelationship/delete', { ids }),
   },

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

@@ -1,145 +0,0 @@
-
-<template>
-	<div>
-		<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()" :readonly="disable" />
-      </el-form-item>
-
-      <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()" :readonly="disable" />
-      </el-form-item>
-
-      <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()" :readonly="disable" />
-      </el-form-item>
-
-      <el-form-item :label="item.title + '：'" prop="path" v-if="item.types === 'file'">
-        <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false" :on-success="customCallback(item.name)" :disabled="disable">
-          <img v-if="formData[item.name]" :src="formData[item.name]" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon" v-if="!disable">
-            <Plus />
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import {onMounted, defineComponent, reactive, toRefs} from 'vue'
-import getOrigin from '/@/utils/origin'
-import { Plus } from '@element-plus/icons-vue'
-import { getToken } from "/@/utils/auth";
-
-interface FromState {
-  dataList: any,
-  formData: any,
-  disable: boolean,
-}
-
-export default defineComponent({
-  name: 'dossierFromData',
-  props: {
-    DataList: {
-      type: Array,
-      default: () => [],
-    },
-    disable: {
-      type: Boolean,
-      default: () => false,
-    }
-  },
-  setup(prop, { emit }) {
-    const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile')
-    const headers = {
-      Authorization: 'Bearer ' + getToken(),
-    }
-    // const emit = defineEmits(['SetSaveData'])
-
-    const state = reactive<FromState>({
-      dataList: prop.DataList,
-      formData: {},
-      disable: prop.disable,
-    })
-
-    onMounted(() => {
-      initFormData();
-    });
-
-    const initFormData = () => {
-      for (const item of state.dataList) {
-        state.formData[item.name] = item.value ? item.value : ''
-      }
-    }
-
-    const customCallback = (customValue: string) => {
-      return function (file: any) {
-        state.formData[customValue] = file.data.full_path
-        saveData();
-      }
-    }
-
-    const saveData = () => {
-      const updatedData = []
-
-      for (const item of state.dataList) {
-        updatedData.push({
-          productKey: item.productKey,
-          name: item.name,
-          value: state.formData[item.name], // 更新为formData的实际值
-          fieldName: item.fieldName,
-        })
-      }
-
-      emit('SetSaveData', updatedData)
-    }
-
-    return {
-      headers,
-      uploadUrl,
-      customCallback,
-      saveData,
-      ...toRefs(state),
-    };
-  },
-
-  components: {Plus},
-})
-</script>
-
-<style scoped lang="scss">
-.form-item {
-	flex: 0 0 25%;
-}
-
-.avatar-uploader .avatar {
-	width: 178px;
-	height: 178px;
-	display: block;
-}
-</style>
-<style scoped>
-.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>

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

@@ -3,7 +3,7 @@
     <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', disabled: disabledFn
+          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>
@@ -11,7 +11,7 @@
           </template>
         </el-cascader>
       </el-form-item>
-      <el-form-item label="选择档案" prop="assetId"  style="margin-bottom: 0;">
+      <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>
@@ -74,7 +74,7 @@ const resetForm = async () => {
 };
 
 
-const open = async (row: any, productInfo: any) => {
+const open = async () => {
   resetForm();
   showDialog.value = true;
   nextTick(() => {
@@ -85,9 +85,8 @@ const open = async (row: any, productInfo: any) => {
     })
 
     //获取所有的档案
-    api.dev_asset.getList({}).then((resp: any) => {
-      console.log(resp)
-      assetList.value = resp.Data
+    api.dev_asset.all({}).then((resp: any) => {
+      assetList.value = resp
     })
 
   });

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

@@ -0,0 +1,92 @@
+<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-item>
+    </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 { 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 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);
+  ElMessage.success('操作成功');
+  resetForm();
+  showDialog.value = false;
+  emit('getList');
+};
+
+const resetForm = async () => {
+  Object.assign(formData, { ...baseForm });
+  formRef.value && formRef.value.resetFields();
+};
+
+
+const open = async (id: number) => {
+  resetForm();
+  showDialog.value = true;
+  //获取所有的档案
+  api.assetRelationship.detail(id).then((res: any) => {
+    console.log(res)
+  })
+};
+
+defineExpose({ open });
+</script>
+<style scoped lang="scss">
+.demo-form-inline .el-input {
+  --el-input-width: 320px;
+}
+</style>

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

@@ -42,15 +42,22 @@
 				<div class="page page-full">
 					<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
 						<el-table-column type="selection" width="55" align="center" />
-						<el-table-column prop="deviceName" v-col="'deviceName'" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceKey" v-col="'deviceKey'" label="设备KEY" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceNumber" v-col="'deviceNumber'" label="设备编码" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceCategory" v-col="'deviceCategory'" label="设备类型" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="installTime" v-col="'installTime'" label="安装时间" width="160" align="center"></el-table-column>
-						<el-table-column label="操作" width="120" align="center">
+						<el-table-column prop="assetInfo.deviceName" v-col="'deviceName'" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="assetInfo.deviceKey" v-col="'deviceKey'" label="设备KEY" min-width="90" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="assetInfo.deviceNumber" v-col="'deviceNumber'" label="设备编码" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="assetInfo.deviceCategory" v-col="'deviceCategory'" label="设备类型" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="assetInfo.installTime" v-col="'installTime'" label="安装时间" width="160" align="center"></el-table-column>
+						<el-table-column prop="status" label="状态" width="70" v-col="'status'" align="center">
 							<template #default="scope">
-								<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
+								<el-switch v-model="scope.row.status" v-auth="'change-status'" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+								</el-switch>
+							</template>
+						</el-table-column>
+						<el-table-column label="操作" width="170" v-col="'handle'" align="center">
+							<template #default="scope">
+								<el-button size="small" text type="warning" v-auth="'unbind'" @click="unbind(scope.row)">解绑</el-button>
 								<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
+								<el-button size="small" text type="primary" v-auth="'set'" @click="set(scope.row)">设置筛选条件</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -59,6 +66,7 @@
 			</el-card>
 		</div>
 		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+		<FilterVue ref="filterRef" @getList="getList(1)"></FilterVue>
 	</div>
 </template>
 
@@ -69,6 +77,7 @@ import { useSearch } from '/@/hooks/useCommon'
 
 import { ElMessageBox, ElMessage } from 'element-plus'
 import EditForm from './edit.vue'
+import FilterVue from './filter.vue'
 
 import { ref, onMounted } from 'vue'
 const defaultProps = {
@@ -77,6 +86,7 @@ const defaultProps = {
 }
 
 const queryRef = ref()
+const filterRef = ref()
 const treeData = ref()
 const editFormRef = ref()
 const productIno = ref()
@@ -93,14 +103,12 @@ const handleSelectionChange = (selection: any[]) => {
 	ids.value = selection.map((item) => item.id);
 };
 
+const addOrEdit = () => {
+	editFormRef.value.open()
+}
 
-const addOrEdit = async (row?: any) => {
-	if (row) {
-		editFormRef.value.open(row, productIno.value)
-		return
-	} else {
-		editFormRef.value.open({}, productIno.value)
-	}
+const set = (row: any) => {
+	filterRef.value.open(row.id)
 }
 
 const handleNodeClick = (data: any) => {
@@ -114,24 +122,55 @@ const batchdel = () => {
 		cancelButtonText: '取消',
 		type: 'warning',
 	}).then(async () => {
-		await device.dev_asset.delete({ ids: ids.value })
+		await device.assetRelationship.delete(ids.value)
 		ElMessage.success('删除成功')
 		getList()
 	})
 }
 
 const del = (row: any) => {
-	ElMessageBox.confirm('是否确认删除名称为："' + row.deviceName + '"的数据项?', '提示', {
+	ElMessageBox.confirm('是否确认删除该设备档案', '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
 	}).then(async () => {
-		await device.dev_asset.delete({ ids: row.id })
+		await device.assetRelationship.delete([row.id])
 		ElMessage.success('删除成功')
 		getList()
 	})
 }
 
+// 状态修改
+const handleStatusChange = (row: any) => {
+	let text = row.status === 1 ? '启用' : '停用';
+	ElMessageBox.confirm('确认要【' + text + '】吗?', '警告', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(function () {
+			return device.assetRelationship.editStatus(row.id, row.status);
+		})
+		.then(() => {
+			ElMessage.success(text + '成功');
+		})
+		.catch(function () {
+			row.status = row.status === 0 ? 1 : 0;
+		});
+};
+
+const unbind = (row: any) => {
+	ElMessageBox.confirm('是否确认解绑', '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await device.assetRelationship.unBind(row.id)
+		ElMessage.success('解绑成功')
+		getList()
+	})
+}
+
 
 // getCateList()
 </script>