update: 组织管理-产品、设备模块

src/api/system/department.ts

@@ -1,18 +1,27 @@
 import server from '@/utils/request';
 
 // 获取部门数据
-export const getTreeData_api = (data:object) => server.post(`/organization/_all/tree`, data);
+export const getTreeData_api = (data: object) => server.post(`/organization/_all/tree`, data);
 // 新增部门
-export const addDepartment_api = (data:object) => server.post(`/organization`, data);
+export const addDepartment_api = (data: object) => server.post(`/organization`, data);
 // 更新部门
-export const updateDepartment_api = (data:object) => server.patch(`/organization`, data);
+export const updateDepartment_api = (data: object) => server.patch(`/organization`, data);
 // 删除部门
-export const delDepartment_api = (id:string) => server.remove(`/organization/${id}`);
+export const delDepartment_api = (id: string) => server.remove(`/organization/${id}`);
 
 
 // 获取产品列表
-export const getDeviceOrProductList_api = (data:object) => server.post(`/device-product/_query`, data);
+export const getDeviceOrProductList_api = (data: object) => server.post(`/device-product/_query`, data);
+// 获取设备列表
+export const getDeviceList_api = (data: object) => server.post(`/device/instance/_query`, data);
 // 根据产品的id获取产品的权限
-export const getPermission_api = (ids:object, id:string) => server.post(`/assets/bindings/product/org/${id}/_query`, ids);
+export const getPermission_api = (type:'device' | 'product',ids: object, id: string) => server.post(`/assets/bindings/${type}/org/${id}/_query`, ids);
 // 获取产品的权限字典
-export const getPermissionDict_api = () => server.get(`/assets/bindings/product/permissions`);
+export const getPermissionDict_api = () => server.get(`/assets/bindings/product/permissions`);
+
+// 部门绑定产品
+export const bindDeviceOrProductList_api = (type: 'device' | 'product', data: object) => server.post(`/assets/bind/${type}`, data);
+// 批量解绑
+export const unBindDeviceOrProduct_api = (type: 'device' | 'product', data: object) => server.post(`/assets/unbind/${type}`, data);
+// 批量更新权限
+export const updatePermission_api = (type: 'device' | 'product', parentId: string, data: object) => server.put(`/assets/permission/${type}/org/${parentId}/_batch`, data);

src/views/system/Department/components/AddDeviceOrProductDialog.vue

@@ -4,21 +4,29 @@
         title="绑定"
         width="1440px"
         @ok="dialog.handleOk"
+        :confirmLoading="dialog.loading.value"
         cancelText="取消"
         okText="确定"
         v-model:visible="dialog.visible.value"
+        destroyOnClose
     >
-        <a-row>
+        <h5 class="row">
-            <exclamation-circle-outlined /> 只能分配有“共享”权限的资产数据
+            <exclamation-circle-outlined style="margin-right: 6px" />
-        </a-row>
+            只能分配有“共享”权限的资产数据
+        </h5>
 
-        <a-row>
+        <div class="row">
-            <span>批量配置</span>
+            <span style="margin-right: 8px">批量配置</span>
-            <a-switch v-model:checked="bulkBool" />
+            <a-switch
-        </a-row>
+                v-model:checked="bulkBool"
-        <a-row v-show="bulkBool">
+                checked-children="开"
+                un-checked-children="关"
+                style="width: 56px"
+            />
+        </div>
+        <div v-show="bulkBool">
             <a-checkbox-group v-model:value="bulkList" :options="options" />
-        </a-row>
+        </div>
 
         <Search :columns="query.columns" @search="query.search" />
 
@@ -79,12 +87,14 @@
                                 <div
                                     style="cursor: pointer"
                                     class="card-item-content-value"
+                                    @click="(e) => e.stopPropagation()"
                                 >
-                                    {{
+                                    <a-checkbox-group
-                                        table.getPermissLabel(
+                                        v-model:value="
-                                            slotProps.permission,
+                                            slotProps.selectPermissions
-                                        )
+                                        "
-                                    }}
+                                        :options="slotProps.permissionList"
+                                    />
                                 </div>
                             </a-col>
                         </a-row>
@@ -98,10 +108,15 @@
 <script setup lang="ts">
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { getImage } from '@/utils/comm';
+import { uniq, intersection } from 'lodash-es';
 import {
-    getDeviceOrProductList_api,
+    getDeviceOrProductList_api,getDeviceList_api,
     getPermission_api,
+    bindDeviceOrProductList_api,
 } from '@/api/system/department';
+import { message } from 'ant-design-vue';
+
+const emits = defineEmits(['confirm']);
 const props = defineProps<{
     parentId: string;
     allPermission: dictType;
@@ -110,11 +125,31 @@ const props = defineProps<{
 // 弹窗相关
 const dialog = {
     visible: ref<boolean>(false),
+    loading: ref<boolean>(false),
     handleOk: () => {
-        // formRef.value?.validate().then(() => {
+        if (table.selectedRows.length < 1) {
-        //     form.submit();
+            return message.warning('请先勾选数据');
-        // });
+        }
-        dialog.changeVisible();
+
+        const params = table.selectedRows.map((item: any) => ({
+            targetType: 'org',
+            targetId: props.parentId,
+            assetType: props.assetType,
+            assetIdList: [item.id],
+            permission: item.selectPermissions,
+        }));
+
+        // console.log(params);
+        dialog.loading.value = true;
+        bindDeviceOrProductList_api(props.assetType, params)
+            .then(() => {
+                message.success('操作成功');
+                emits('confirm');
+                dialog.changeVisible();
+            })
+            .finally(() => {
+                dialog.loading.value = false;
+            });
     },
     // 控制弹窗的打开与关闭
     changeVisible: () => {
@@ -184,24 +219,77 @@ const query = {
         query.params.value = params;
     },
 };
-const table = {
+const table: any = {
-    _selectedRowKeys: ref<string[]>([]),
+    _selectedRowKeys: ref<string[]>([]), // 选中项的id
-    selectedRows: [] as any[],
+    backRowKeys: [] as string[], // 旧选中项的id
+    selectedRows: [] as any[], // 选中项
+    tableData: [] as any[], // 列表的浅拷贝
 
-    // 获取权限名称
+    init: () => {
-    getPermissLabel: (values: string[]) => {
+        watch(
-        const permissionList = props.allPermission;
+            [bulkBool, bulkList, () => table._selectedRowKeys],
-        if (permissionList.length < 1 || values.length < 1) return '';
+            (n) => {
-        const result = values.map(
+                const nValue = n[2].value;
-            (key) => permissionList.find((item) => item.id === key)?.name,
+                const oValue = table.backRowKeys;
+
+                table.selectedRows.forEach((item: any) => {
+                    // 启用批量设置
+                    if (bulkBool.value) {
+                        // 将已勾选的权限和批量设置的权限进行合并，并与自己可选的权限进行比对，取交集作为当前选中的权限
+                        let newPermission = uniq([
+                            ...item.selectPermissions,
+                            ...bulkList.value,
+                        ]);
+                        const allPermissions = item.permissionList.map(
+                            (item: any) => item.value,
+                        );
+                        newPermission = intersection(
+                            newPermission,
+                            allPermissions,
+                        );
+                        item.selectPermissions = newPermission;
+                        // 禁用单独勾选
+                        item.permissionList.forEach((permission: any) => {
+                            permission.disabled = true;
+                        });
+                    } else {
+                        // 取消批量设置
+                        // 放开自己权限的勾选限制，查看为必选
+                        item.permissionList.forEach((permission: any) => {
+                            permission.disabled = permission.value === 'read';
+                        });
+                    }
+                });
+                // 取消勾选时触发
+                if (nValue && nValue.length < oValue.length) {
+                    // 拿到取消选中的项的id
+                    const removedKeys = oValue.filter(
+                        (key: string) => !nValue.includes(key),
+                    );
+                    // 将取消勾选的项的权限重置
+                    removedKeys.forEach((removedKey: string) => {
+                        const removedItem = table.tableData.find(
+                            (item: any) => item.id === removedKey,
+                        );
+                        removedItem.permissionList.forEach(
+                            (permission: any) => (permission.disabled = true),
+                        );
+                        removedItem.selectPermissions = ['read'];
+                    });
+                }
+            },
+            { deep: true },
         );
-        return result.join(',');
     },
     // 选中
     onSelectChange: (row: any) => {
+        // 若该项的可选权限中没有分享权限，则不支持任何操作
+        if (!row.permissionList.find((item: any) => item.value === 'share'))
+            return;
         const selectedRowKeys = table._selectedRowKeys.value;
         const index = selectedRowKeys.indexOf(row.id);
 
+        table.backRowKeys = [...selectedRowKeys];
         if (index === -1) {
             selectedRowKeys.push(row.id);
             table.selectedRows.push(row);
@@ -212,13 +300,15 @@ const table = {
     },
     // 取消全选
     cancelSelect: () => {
+        table.backRowKeys = [...table._selectedRowKeys.value];
         table._selectedRowKeys.value = [];
         table.selectedRows = [];
     },
     // 获取并整理数据
     getData: (params: object, parentId: string) =>
         new Promise((resolve) => {
-            getDeviceOrProductList_api(params).then((resp: any) => {
+            const api = props.assetType === 'product' ? getDeviceOrProductList_api: getDeviceList_api;
+            api(params).then((resp: any) => {
                 type resultType = {
                     data: any[];
                     total: number;
@@ -228,20 +318,23 @@ const table = {
                 const { pageIndex, pageSize, total, data } =
                     resp.result as resultType;
                 const ids = data.map((item) => item.id);
-                getPermission_api(ids, parentId).then((perResp: any) => {
+                getPermission_api(props.assetType,ids, parentId).then((perResp: any) => {
                     const permissionObj = {};
                     perResp.result.forEach((item: any) => {
-                        permissionObj[item.assetId] =
+                        permissionObj[item.assetId] = props.allPermission
-                            props.allPermission.filter((permission) =>
+                            .filter((permission) =>
-                                item.allPermissions.includes(
+                                item.allPermissions.includes(permission.id),
-                                    (permissionId: string) =>
+                            )
-                                        permissionId === permission.id,
+                            .map((item) => ({
-                                ),
+                                label: item.name,
-                            );
+                                value: item.id,
+                                disabled: true,
+                            }));
+                    });
+                    data.forEach((item) => {
+                        item.permissionList = permissionObj[item.id];
+                        item.selectPermissions = ['read'];
                     });
-                    data.forEach(
-                        (item) => (item.permission = permissionObj[item.id]),
-                    );
 
                     resolve({
                         code: 200,
@@ -289,8 +382,7 @@ const table = {
             };
 
             const resp: any = await table.getData(params, props.parentId);
-            console.log(resp.result);
+            table.tableData = resp.result.data;
-
             return {
                 code: resp.status,
                 result: resp.result,
@@ -310,6 +402,7 @@ const table = {
         }
     },
 };
+table.init();
 
 // 将打开弹窗的操作暴露给父组件
 defineExpose({
@@ -320,8 +413,16 @@ defineExpose({
 <style lang="less" scoped>
 .add-device-or-product-dialog-container {
     .ant-spin-nested-loading {
-        height: calc(100vh - 440px);
+        height: calc(100vh - 400px);
         overflow-y: auto;
     }
+    h5 {
+        padding: 12px;
+        background-color: #f6f6f6;
+        font-size: 14px;
+    }
+    .row {
+        margin-bottom: 12px;
+    }
 }
 </style>

src/views/system/Department/components/EditPermissionDialog.vue

@@ -4,33 +4,72 @@
         title="编辑"
         width="500px"
         @ok="dialog.handleOk"
+        :confirmLoading="dialog.loading.value"
         cancelText="取消"
         okText="确定"
         v-model:visible="dialog.visible.value"
     >
+        <div>
+            <span>资产权限：</span>
+            <a-checkbox-group
+                v-model:value="form.permission"
+                :options="options"
+            />
+        </div>
     </a-modal>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+import { dictType, optionsType } from '../typing.d.ts';
-    parentId: String,
+import { updatePermission_api } from '@/api/system/department';
-});
+import { message } from 'ant-design-vue';
+
+const emits = defineEmits(['confirm']);
+const props = defineProps<{
+    parentId: string;
+    allPermission: dictType;
+    assetType: 'product' | 'device';
+}>();
 // 弹窗相关
 const dialog = {
+    loading: ref<boolean>(false),
     visible: ref<boolean>(false),
     handleOk: () => {
-        // formRef.value?.validate().then(() => {
+        dialog.loading.value = true;
-        //     form.submit();
+        updatePermission_api(props.assetType, props.parentId, form)
-        // });
+            .then(() => {
-        dialog.changeVisible()
+                message.success('操作成功');
+                emits('confirm');
+                dialog.visible.value = false;
+            })
+            .finally(() => (dialog.loading.value = false));
     },
     // 控制弹窗的打开与关闭
-    changeVisible: (ids?:string[], permissionList?:string[]) => {
+    changeVisible: (ids: string[], permissionList: string[]) => {
         console.log(ids, permissionList);
-        
+        form.permission = [...permissionList];
+        form.assetIdList = ids;
+        options.value = setOptions(permissionList);
         dialog.visible.value = !dialog.visible.value;
     },
 };
+const form = reactive({
+    assetIdList: [] as string[],
+    permission: [] as string[],
+});
+const options = ref<optionsType>([]);
+const setOptions = (havePermission: string[]): optionsType => {
+    const result: optionsType = [];
+    props.allPermission.forEach((item) => {
+        if (havePermission.includes(item.id))
+            result.push({
+                label: item.name,
+                value: item.id,
+                disabled: item.id === 'read',
+            });
+    });
+    return result;
+};
 
 // 将打开弹窗的操作暴露给父组件
 defineExpose({

src/views/system/Department/device/index.vue

@@ -1,13 +1,415 @@
 <template>
-    <div>
+    <div class="product-container">
-        设备
+        <Search :columns="query.columns" @search="query.search" />
+        <JTable
+            ref="tableRef"
+            :request="table.requestFun"
+            :gridColumn="2"
+            model="CARD"
+            :params="query.params.value"
+            :rowSelection="{
+                selectedRowKeys: table._selectedRowKeys.value,
+            }"
+            @cancelSelect="table.cancelSelect"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="table.clickAdd">
+                        <plus-outlined />资产分配
+                    </a-button>
+                    <a-dropdown trigger="hover">
+                        <a-button>批量操作</a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        title="是否批量解除绑定"
+                                        ok-text="确定"
+                                        cancel-text="取消"
+                                        @confirm="table.clickUnBind()"
+                                    >
+                                        <a-button>
+                                            <DisconnectOutlined /> 批量解绑
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button @click="table.clickEdit()">
+                                        <EditOutlined /> 批量编辑
+                                    </a-button>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </a-space>
+            </template>
+
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    :actions="[{ key: 1 }]"
+                    v-bind="slotProps"
+                    :active="
+                        table._selectedRowKeys.value.includes(slotProps.id)
+                    "
+                    @click="table.onSelectChange"
+                    :status="slotProps.state?.value"
+                    :statusText="slotProps.state?.text"
+                    :statusNames="{
+                        online: 'success',
+                        offline: 'error',
+                        notActive: 'warning',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img
+                                :src="getImage('/device-product.png')"
+                                style="cursor: pointer"
+                            />
+                        </slot>
+                    </template>
+                    <template #content>
+                        <h3 class="card-item-content-title">
+                            {{ slotProps.name }}
+                        </h3>
+                        <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">ID</div>
+                                <div
+                                    style="cursor: pointer"
+                                    class="card-item-content-value"
+                                >
+                                    {{ slotProps.id }}
+                                </div>
+                            </a-col>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    资产权限
+                                </div>
+                                <div
+                                    style="cursor: pointer"
+                                    class="card-item-content-value"
+                                >
+                                    {{
+                                        table.permissionList.value.length &&
+                                        table.getPermissLabel(
+                                            slotProps.permission,
+                                        )
+                                    }}
+                                </div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <template #actions>
+                        <a-button
+                            @click="table.clickEdit(slotProps)"
+                            style="margin-right: 10px"
+                        >
+                            <AIcon type="EditOutlined" />
+                        </a-button>
+                        <a-popconfirm
+                            title="是否解除绑定"
+                            ok-text="确定"
+                            cancel-text="取消"
+                            @confirm="table.clickUnBind(slotProps)"
+                            ><a-button>
+                                <AIcon type="DisconnectOutlined" />
+                            </a-button>
+                        </a-popconfirm>
+                    </template>
+                </CardBox>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <AddDeviceOrProductDialog
+                ref="addDialogRef"
+                :parent-id="props.parentId"
+                :all-permission="table.permissionList.value"
+                asset-type="device"
+                @confirm="table.refresh"
+            />
+            <EditPermissionDialog
+                ref="editDialogRef"
+                :parent-id="props.parentId"
+                :all-permission="table.permissionList.value"
+                asset-type="device"
+                @confirm="table.refresh"
+            />
+        </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="device">
+import {
+    PlusOutlined,
+    EditOutlined,
+    DisconnectOutlined,
+} from '@ant-design/icons-vue';
+import AddDeviceOrProductDialog from '../components/AddDeviceOrProductDialog.vue';
+import EditPermissionDialog from '../components/EditPermissionDialog.vue';
+import { getImage } from '@/utils/comm';
+import {
+    getDeviceList_api,
+    getPermission_api,
+    getPermissionDict_api,
+    unBindDeviceOrProduct_api,
+} from '@/api/system/department';
+import { intersection } from 'lodash-es';
 
+import { dictType } from '../typing.d.ts';
+import { message } from 'ant-design-vue';
+
+const props = defineProps<{
+    parentId: string;
+}>();
+const query = {
+    columns: [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'select',
+                options: [
+                    {
+                        label: '在线',
+                        value: 'online',
+                    },
+                    {
+                        label: '离线',
+                        value: 'offline',
+                    },
+                    {
+                        label: '禁用',
+                        value: 'notActive',
+                    },
+                ],
+            },
+        },
+    ],
+    params: ref({}),
+    search: (params: any) => {
+        query.params.value = params;
+    },
+};
+
+const tableRef = ref();
+const table = {
+    _selectedRowKeys: ref<string[]>([]),
+    selectedRows: [] as any[],
+    permissionList: ref<dictType>([]),
+
+    init: () => {
+        table.getPermissionDict();
+        watch(
+            () => props.parentId,
+            () => {
+                table.refresh();
+            },
+        );
+    },
+
+    // 获取权限数据字典
+    getPermissionDict: () => {
+        getPermissionDict_api().then((resp: any) => {
+            table.permissionList.value = resp.result;
+        });
+    },
+    // 获取权限名称
+    getPermissLabel: (values: string[]) => {
+        const permissionList = table.permissionList.value;
+        if (permissionList.length < 1 || values.length < 1) return '';
+        const result = values.map(
+            (key) => permissionList.find((item) => item.id === key)?.name,
+        );
+        return result.join(',');
+    },
+    // 选中
+    onSelectChange: (row: any) => {
+        const selectedRowKeys = table._selectedRowKeys.value;
+        const index = selectedRowKeys.indexOf(row.id);
+
+        if (index === -1) {
+            selectedRowKeys.push(row.id);
+            table.selectedRows.push(row);
+        } else {
+            selectedRowKeys.splice(index, 1);
+            table.selectedRows.splice(index, 1);
+        }
+    },
+    // 取消全选
+    cancelSelect: () => {
+        table._selectedRowKeys.value = [];
+        table.selectedRows = [];
+    },
+    // 获取并整理数据
+    getData: (params: object, parentId: string) =>
+        new Promise((resolve) => {
+            getDeviceList_api(params).then((resp) => {
+                type resultType = {
+                    data: any[];
+                    total: number;
+                    pageSize: number;
+                    pageIndex: number;
+                };
+                const { pageIndex, pageSize, total, data } =
+                    resp.result as resultType;
+                const ids = data.map((item) => item.id);
+                getPermission_api('device',ids, parentId).then((perResp: any) => {
+                    const permissionObj = {};
+                    perResp.result.forEach((item: any) => {
+                        permissionObj[item.assetId] = item.grantedPermissions;
+                    });
+                    data.forEach(
+                        (item) => (item.permission = permissionObj[item.id]),
+                    );
+
+                    resolve({
+                        code: 200,
+                        result: {
+                            data: data,
+                            pageIndex,
+                            pageSize,
+                            total,
+                        },
+                        status: 200,
+                    });
+                });
+            });
+        }),
+    // 整理参数并获取数据
+    requestFun: async (oParams: any) => {
+        table._selectedRowKeys.value = [];
+        table.selectedRows = [];
+        if (props.parentId) {
+            const params = {
+                ...oParams,
+                sorts: [{ name: 'createTime', order: 'desc' }],
+                terms: [
+                    ...oParams.terms,
+                    {
+                        column: 'id',
+                        termType: 'dim-assets',
+                        value: {
+                            assetType: 'device',
+                            targets: [
+                                {
+                                    type: 'org',
+                                    id: props.parentId,
+                                },
+                            ],
+                        },
+                    },
+                ],
+            };
+            const resp: any = await table.getData(params, props.parentId);
+            return {
+                code: resp.status,
+                result: resp.result,
+                status: resp.status,
+            };
+        } else {
+            return {
+                code: 200,
+                result: {
+                    data: [],
+                    pageIndex: 0,
+                    pageSize: 0,
+                    total: 0,
+                },
+                status: 200,
+            };
+        }
+    },
+    clickAdd: () => {
+        addDialogRef.value && addDialogRef.value.openDialog();
+    },
+    clickEdit: (row?: any) => {
+        const ids = row ? [row.id] : [...table._selectedRowKeys.value];
+        if (row || table.selectedRows.length === 1) {
+            const permissionList =
+                row?.permission || table.selectedRows[0].permission;
+            return (
+                editDialogRef.value &&
+                editDialogRef.value.openDialog(ids, permissionList)
+            );
+        } else if (table.selectedRows.length === 0) return;
+        const permissionList = table.selectedRows.map(
+            (item) => item.permission,
+        );
+        const mixPermissionList = intersection(...permissionList);
+
+        editDialogRef.value &&
+            editDialogRef.value.openDialog(ids, mixPermissionList);
+    },
+    clickUnBind: (row?: any) => {
+        const ids = row ? [row.id] : [...table._selectedRowKeys.value];
+        if (ids.length < 1) return message.warning('请勾选需要解绑的数据');
+        const params = [
+            {
+                targetType: 'org',
+                targetId: props.parentId,
+                assetType: 'device',
+                assetIdList: ids,
+            },
+        ];
+        unBindDeviceOrProduct_api('device', params).then(() => {
+            message.success('操作成功');
+            table.refresh();
+        });
+    },
+    refresh: () => {
+        nextTick(() => {
+            tableRef.value.reload();
+        });
+    },
+};
+
+const addDialogRef = ref();
+const editDialogRef = ref();
+
+table.init();
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-
+.product-container {
-</style>
+    .card {
+        .card-warp {
+            &.active {
+                .card-item-content-value {
+                    color: #2f54eb;
+                }
+            }
+        }
+        .card-tools {
+            .ant-btn {
+                color: #252525;
+            }
+        }
+    }
+}
+</style>

src/views/system/Department/index.vue

@@ -2,7 +2,7 @@
     <div class="department-container">
         <a-card class="department-content">
             <div class="left">
-                <LeftTree @change="id=>departmentId = id" />
+                <LeftTree @change="(id) => (departmentId = id)" />
             </div>
             <div class="right">
                 <a-tabs v-model:activeKey="activeKey">
@@ -10,7 +10,7 @@
                         <Product :parentId="departmentId" />
                     </a-tab-pane>
                     <a-tab-pane key="device" tab="设备">
-                        <Device />
+                        <Device :parentId="departmentId" />
                     </a-tab-pane>
                     <a-tab-pane key="user" tab="用户">
                         <User />
@@ -29,7 +29,7 @@ import User from './user/index.vue';
 
 const activeKey = ref<'product' | 'device' | 'user'>('product');
 
-const departmentId = ref<string>('')
+const departmentId = ref<string>('');
 </script>
 
 <style lang="less" scoped>
@@ -44,9 +44,11 @@ const departmentId = ref<string>('')
             }
             .right {
                 flex: 1 1 auto;
+                .ant-tabs-nav {
+                    padding-left: 24px;
+                }
             }
         }
     }
 }
-
 </style>

src/views/system/Department/product/index.vue

@@ -112,7 +112,7 @@
                             title="是否解除绑定"
                             ok-text="确定"
                             cancel-text="取消"
-                            @confirm="table.clickUnBind"
+                            @confirm="table.clickUnBind(slotProps)"
                             ><a-button>
                                 <AIcon type="DisconnectOutlined" />
                             </a-button>
@@ -128,8 +128,15 @@
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
                 asset-type="product"
+                @confirm="table.refresh"
+            />
+            <EditPermissionDialog
+                ref="editDialogRef"
+                :parent-id="props.parentId"
+                :all-permission="table.permissionList.value"
+                asset-type="product"
+                @confirm="table.refresh"
             />
-            <EditPermissionDialog ref="editDialogRef" :parent-id="props.parentId" />
         </div>
     </div>
 </template>
@@ -147,12 +154,15 @@ import {
     getDeviceOrProductList_api,
     getPermission_api,
     getPermissionDict_api,
+    unBindDeviceOrProduct_api,
 } from '@/api/system/department';
+import { intersection } from 'lodash-es';
 
-import {dictType} from '../typing.d.ts'
+import { dictType } from '../typing.d.ts';
+import { message } from 'ant-design-vue';
 
 const props = defineProps<{
-    parentId:string
+    parentId: string;
 }>();
 const query = {
     columns: [
@@ -218,9 +228,7 @@ const table = {
         watch(
             () => props.parentId,
             () => {
-                nextTick(() => {
+                table.refresh();
-                    tableRef.value.reload();
-                });
             },
         );
     },
@@ -271,7 +279,7 @@ const table = {
                 const { pageIndex, pageSize, total, data } =
                     resp.result as resultType;
                 const ids = data.map((item) => item.id);
-                getPermission_api(ids, parentId).then((perResp: any) => {
+                getPermission_api('product', ids, parentId).then((perResp: any) => {
                     const permissionObj = {};
                     perResp.result.forEach((item: any) => {
                         permissionObj[item.assetId] = item.grantedPermissions;
@@ -341,7 +349,7 @@ const table = {
         addDialogRef.value && addDialogRef.value.openDialog();
     },
     clickEdit: (row?: any) => {
-        const ids = row ? row.id : [...table._selectedRowKeys.value];
+        const ids = row ? [row.id] : [...table._selectedRowKeys.value];
         if (row || table.selectedRows.length === 1) {
             const permissionList =
                 row?.permission || table.selectedRows[0].permission;
@@ -353,29 +361,31 @@ const table = {
         const permissionList = table.selectedRows.map(
             (item) => item.permission,
         );
-        const mixPermissionList = table.getMixed(permissionList);
+        const mixPermissionList = intersection(...permissionList);
 
         editDialogRef.value &&
             editDialogRef.value.openDialog(ids, mixPermissionList);
     },
-    clickUnBind: (row?: any) => {},
+    clickUnBind: (row?: any) => {
-
+        const ids = row ? [row.id] : [...table._selectedRowKeys.value];
-    /**
+        if (ids.length < 1) return message.warning('请勾选需要解绑的数据');
-     * 获取多个数组的交集
+        const params = [
-     * @param permissionList
+            {
-     */
+                targetType: 'org',
-    getMixed: (permissionList: string[][]) => {
+                targetId: props.parentId,
-        if (permissionList.length === 1) return permissionList[0];
+                assetType: 'product',
-        const obj = {};
+                assetIdList: ids,
-        const result: string[] = [];
+            },
-        permissionList.forEach((items) => {
+        ];
-            items.forEach((item) => {
+        unBindDeviceOrProduct_api('product', params).then(() => {
-                if (obj[item]) obj[item]++;
+            message.success('操作成功');
-                else obj[item] = 1;
+            table.refresh();
-                if (obj[item] === permissionList.length) result.push(item);
+        });
-            });
+    },
+    refresh: () => {
+        nextTick(() => {
+            tableRef.value.reload();
         });
-        return result;
     },
 };
 
@@ -383,7 +393,6 @@ const addDialogRef = ref();
 const editDialogRef = ref();
 
 table.init();
-
 </script>
 
 <style lang="less" scoped>

src/views/system/Department/typing.d.ts

@@ -1,4 +1,10 @@
 type dictType = {
     id: string;
     name: string;
-}[];
+}[];
+
+type optionsType = {
+    label: string,
+    value: string;
+    disabled?:boolean
+}[]