update: 组织管理弹窗优化、a-组件更换为j-

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

@@ -3,12 +3,10 @@
         class="add-device-or-product-dialog-container"
         title="绑定"
         width="1440px"
-        @ok="dialog.handleOk"
+        @ok="confirm"
-        :confirmLoading="dialog.loading.value"
+        :confirmLoading="loading"
-        cancelText="取消"
+        @cancel="emits('update:visible', false)"
-        okText="确定"
+        visible
-        v-model:visible="dialog.visible.value"
-        destroyOnClose
     >
         <h5 class="row">
             <exclamation-circle-outlined style="margin-right: 6px" />
@@ -110,25 +108,25 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { getImage } from '@/utils/comm';
 import { uniq, intersection } from 'lodash-es';
 import {
-    getDeviceOrProductList_api,getDeviceList_api,
+    getDeviceOrProductList_api,
+    getDeviceList_api,
     getPermission_api,
     bindDeviceOrProductList_api,
 } from '@/api/system/department';
 import { message } from 'ant-design-vue';
 import { dictType } from '../typing';
 
-const emits = defineEmits(['confirm']);
+const emits = defineEmits(['confirm', 'update:visible']);
 const props = defineProps<{
+    visible: boolean;
     queryColumns: any[];
     parentId: string;
     allPermission: dictType;
     assetType: 'product' | 'device';
 }>();
 // 弹窗相关
-const dialog = {
+const loading = ref(false);
-    visible: ref<boolean>(false),
+const confirm = () => {
-    loading: ref<boolean>(false),
-    handleOk: () => {
     if (table.selectedRows.length < 1) {
         return message.warning('请先勾选数据');
     }
@@ -141,21 +139,16 @@ const dialog = {
         permission: item.selectPermissions,
     }));
 
-        dialog.loading.value = true;
+    loading.value = true;
     bindDeviceOrProductList_api(props.assetType, params)
         .then(() => {
             message.success('操作成功');
             emits('confirm');
-                dialog.changeVisible();
+            emits('update:visible', false);
         })
         .finally(() => {
-                dialog.loading.value = false;
+            loading.value = false;
         });
-    },
-    // 控制弹窗的打开与关闭
-    changeVisible: () => {
-        dialog.visible.value = !dialog.visible.value;
-    },
 };
 
 const bulkBool = ref<boolean>(true);
@@ -308,7 +301,10 @@ const table: any = {
     // 获取并整理数据
     getData: (params: object, parentId: string) =>
         new Promise((resolve) => {
-            const api = props.assetType === 'product' ? getDeviceOrProductList_api: getDeviceList_api;
+            const api =
+                props.assetType === 'product'
+                    ? getDeviceOrProductList_api
+                    : getDeviceList_api;
             api(params).then((resp: any) => {
                 type resultType = {
                     data: any[];
@@ -319,7 +315,8 @@ const table: any = {
                 const { pageIndex, pageSize, total, data } =
                     resp.result as resultType;
                 const ids = data.map((item) => item.id);
-                getPermission_api(props.assetType,ids, parentId).then((perResp: any) => {
+                getPermission_api(props.assetType, ids, parentId).then(
+                    (perResp: any) => {
                         const permissionObj = {};
                         perResp.result.forEach((item: any) => {
                             permissionObj[item.assetId] = props.allPermission
@@ -337,11 +334,21 @@ const table: any = {
                             item.selectPermissions = ['read'];
 
                             // 产品的状态进行转换处理
-                        if(props.assetType === 'product') {
+                            if (props.assetType === 'product') {
                                 item.state = {
-                                value: item.state === 1 ? 'online': item.state === 0 ? 'offline': '',
+                                    value:
-                                text: item.state === 1 ? '正常': item.state === 0 ? '禁用': ''
+                                        item.state === 1
-                            }
+                                            ? 'online'
+                                            : item.state === 0
+                                            ? 'offline'
+                                            : '',
+                                    text:
+                                        item.state === 1
+                                            ? '正常'
+                                            : item.state === 0
+                                            ? '禁用'
+                                            : '',
+                                };
                             }
                         });
 
@@ -355,7 +362,8 @@ const table: any = {
                             },
                             status: 200,
                         });
-                });
+                    },
+                );
             });
         }),
     // 整理参数并获取数据
@@ -412,11 +420,6 @@ const table: any = {
     },
 };
 table.init();
-
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
 </script>
 
 <style lang="less" scoped>

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

@@ -1,16 +1,17 @@
 <template>
-    <a-modal
+    <j-modal
-        v-model:visible="dialog.visible"
+        visible
-        :title="dialog.title"
+        :title="title"
         width="520px"
-        @ok="dialog.handleOk"
+        @cancel="emits('update:visible',false)"
+        @ok="confirm"
         class="edit-dialog-container"
         cancelText="取消"
         okText="确定"
-        :confirmLoading="form.loading"
+        :confirmLoading="loading"
     >
-        <a-form ref="formRef" :model="form.data" layout="vertical">
+        <j-form ref="formRef" :model="form.data" layout="vertical">
-            <a-form-item name="parentId" label="上级组织">
+            <j-form-item name="parentId" label="上级组织">
                 <a-tree-select
                     v-model:value="form.data.parentId"
                     style="width: 100%"
@@ -20,8 +21,8 @@
                 >
                     <template #title="{ name }"> {{ name }} </template>
                 </a-tree-select>
-            </a-form-item>
+            </j-form-item>
-            <a-form-item
+            <j-form-item
                 name="name"
                 label="名称"
                 :rules="[
@@ -29,82 +30,85 @@
                     { max: 64, message: '最多可输入64个字符' },
                 ]"
             >
-                <a-input
+                <j-input
                     v-model:value="form.data.name"
                     placeholder="请输入名称"
                 />
-            </a-form-item>
+            </j-form-item>
 
-            <a-form-item
+            <j-form-item
                 name="sortIndex"
                 label="排序"
                 :rules="[{ required: true, message: '请输入排序' }]"
             >
-                <a-input
+                <j-input
                     v-model:value="form.data.sortIndex"
                     placeholder="请输入排序"
                     :maxlength="64"
                     @blur="form.checkSort"
                 />
-            </a-form-item>
+            </j-form-item>
-        </a-form>
+        </j-form>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
 import { FormInstance } from 'ant-design-vue';
-import {cloneDeep} from 'lodash-es'
+import { cloneDeep } from 'lodash-es';
 import {
     addDepartment_api,
     updateDepartment_api,
 } from '@/api/system/department';
 
-const emits = defineEmits(['refresh']);
+const emits = defineEmits(['refresh', 'update:visible']);
 const props = defineProps<{
     treeData: any[];
+    data: any;
+    visible: boolean;
 }>();
 // 弹窗相关
-const dialog = reactive({
+const title = ref('');
-    title: '',
+const loading = ref(false);
-    visible: false,
+const confirm = () => {
-    handleOk: () => {
+    loading.value = true;
-        formRef.value?.validate().then(() => {
+    formRef.value
-            form.submit();
+        ?.validate()
-        });
+        .then(() => form.submit())
-    },
+        .then((resp: any) => {
-    // 控制弹窗的打开与关闭
+            emits('refresh', resp.result.id);
-    changeVisible: (status: boolean, row: any = {}) => {
+            emits('update:visible', false);
-        if (row.id) {
+        })
-            dialog.title = '编辑';
+        .finally(() => (loading.value = false));
-            form.data = cloneDeep(row);
+};
-        } else if (row.parentId) {
+// 表单相关
-            dialog.title = '新增子组织';
+const formRef = ref<FormInstance>();
+const form = reactive({
+    data: {} as formType,
+    beforeSortIndex: '' as string | number,
+
+    init: () => {
+        if (props.data.id) {
+            title.value = '编辑';
+            form.data = cloneDeep(props.data);
+        } else if (props.data.parentId) {
+            title.value = '新增子组织';
             form.data = {
                 name: '',
-                sortIndex: ((row.children && row.children.length) || 0) + 1,
+                sortIndex: props.data.sortIndex,
-                parentId: row.parentId,
+                parentId: props.data.parentId,
             };
         } else {
-            dialog.title = '新增';
+            title.value = '新增';
             form.data = {
                 name: '',
-                sortIndex: props.treeData.length + 1,
+                sortIndex: props.data.sortIndex,
             };
         }
         form.beforeSortIndex = form.data.sortIndex;
-        dialog.visible = status;
         nextTick(() => {
             formRef.value?.clearValidate();
         });
     },
-});
-// 表单相关
-const formRef = ref<FormInstance>();
-const form = reactive({
-    loading: false,
-    data: {} as formType,
-    beforeSortIndex: '' as string | number,
-
     checkSort: (e: any) => {
         const value = e.target.value.match(/^[0-9]*/)[0];
         if (value) {
@@ -114,16 +118,11 @@ const form = reactive({
     },
 
     submit: () => {
-        form.loading = true;
         const api = form.data.id ? updateDepartment_api : addDepartment_api;
-        api(form.data)
+        return api(form.data);
-            .then((resp:any) => {
-                emits('refresh',resp.result.id);
-                dialog.changeVisible(false);
-            })
-            .finally(() => (form.loading = false));
     },
 });
+form.init();
 
 type formType = {
     id?: string;
@@ -131,11 +130,4 @@ type formType = {
     name: string;
     sortIndex: string | number;
 };
-
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
 </script>
-
-<style scoped></style>

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

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

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

@@ -1,6 +1,6 @@
 <template>
     <div class="left-tree-container">
-        <a-input
+        <j-input
             v-model:value="searchValue"
             @change="search"
             placeholder="请输入组织名称"
@@ -9,7 +9,7 @@
             <template #suffix>
                 <search-outlined />
             </template>
-        </a-input>
+        </j-input>
         <div class="add-btn">
             <PermissionButton
                 type="primary"
@@ -30,47 +30,11 @@
             <template #title="{ name, data }">
                 <span>{{ name }}</span>
                 <span class="func-btns" @click="(e) => e.stopPropagation()">
-                    <!-- <a-tooltip>
-                        <template #title>编辑</template>
-                        <a-button style="padding: 0" type="link">
-                            <edit-outlined @click="openDialog(data)" />
-                        </a-button>
-                    </a-tooltip> -->
-                    <!-- <a-tooltip>
-                        <template #title>新增子组织</template>
-                        <a-button style="padding: 0" type="link">
-                            <plus-circle-outlined
-                                style="margin: 0 8px"
-                                @click="
-                                    openDialog({
-                                        ...data,
-                                        id: '',
-                                        parentId: data.id,
-                                    })
-                                "
-                            />
-                        </a-button>
-                    </a-tooltip> -->
-
-                    <!-- <a-popconfirm
-                        title="确认删除"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="delDepartment(data.id)"
-                    >
-                        <a-tooltip>
-                            <template #title>删除</template>
-                            <a-button style="padding: 0" type="link">
-                                <delete-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm> -->
-
                     <PermissionButton
                         :uhasPermission="`${permission}:update`"
                         type="link"
                         :tooltip="{
-                            title: '新增子组织',
+                            title: '编辑',
                         }"
                         @click="openDialog(data)"
                     >
@@ -109,8 +73,10 @@
 
         <!-- 编辑弹窗 -->
         <EditDepartmentDialog
+            v-if="dialog.visible"
+            v-model:visible="dialog.visible"
             :tree-data="sourceTree"
-            ref="editDialogRef"
+            :data="dialog.selectItem"
             @refresh="refresh"
         />
     </div>
@@ -215,9 +181,24 @@ function refresh(id: string) {
 }
 
 // 弹窗
-const editDialogRef = ref(); // 新增弹窗实例
+const dialog = reactive({
+    visible: false,
+    selectItem: {},
+});
 const openDialog = (row: any = {}) => {
-    editDialogRef.value.openDialog(true, row);
+    // 计算默认排序值，为子列表中最大的排序值+1
+    let sortIndex = row.sortIndex || 1;
+    if (!row.id) {
+        let childrens = [] as any[];
+        if (row.parentId) {
+            childrens = row.children;
+        } else childrens = treeData.value;
+        sortIndex =
+            Math.max(...(childrens?.map((item) => item.sortIndex) || [0])) + 1;
+    }
+
+    dialog.selectItem = { ...row, sortIndex };
+    dialog.visible = true;
 };
 init();
 function init() {
@@ -236,6 +217,7 @@ function init() {
 <style lang="less" scoped>
 .left-tree-container {
     padding-right: 24px;
+    border-right: 1px solid #f0f0f0;
 
     .add-btn {
         margin: 24px 0;

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

@@ -1,33 +1,26 @@
 <template>
-    <a-modal
+    <j-modal
-        v-model:visible="visible"
+        visible
         title="绑定"
         width="520px"
         @ok="handleOk"
         class="edit-dialog-container"
-        cancelText="取消"
+        @cancel="emits('update:visible',false)"
-        okText="确定"
     >
         是否继续分配产品下的具体设备
-    </a-modal>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
-const emits = defineEmits(['confirm']);
+const emits = defineEmits(['confirm','update:visible']);
 
-const visible = ref<boolean>(false);
+const props = defineProps<{
+    visible: boolean;
+}>();
 const handleOk = () => {
     emits('confirm');
-    changeVisible();
+    emits('update:visible',false)
 };
-// 控制弹窗的打开与关闭
-const changeVisible = () => {
-    visible.value = !visible.value;
-};
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: changeVisible,
-});
 </script>
 
 <style scoped></style>

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

@@ -13,7 +13,7 @@
             @cancelSelect="table.cancelSelect"
         >
             <template #headerTitle>
-                <a-space>
+                <j-space>
                     <PermissionButton
                         :uhasPermission="`${permission}:assert`"
                         type="primary"
@@ -21,11 +21,11 @@
                     >
                         <AIcon type="PlusOutlined" />资产分配
                     </PermissionButton>
-                    <a-dropdown trigger="hover">
+                    <j-dropdown trigger="hover">
-                        <a-button>批量操作</a-button>
+                        <j-button>批量操作</j-button>
                         <template #overlay>
-                            <a-menu>
+                            <j-menu>
-                                <a-menu-item>
+                                <j-menu-item>
                                     <PermissionButton
                                         :uhasPermission="`${permission}:bind`"
                                         :popConfirm="{
@@ -38,19 +38,19 @@
                                             type="DisconnectOutlined"
                                         />批量解绑
                                     </PermissionButton>
-                                </a-menu-item>
+                                </j-menu-item>
-                                <a-menu-item>
+                                <j-menu-item>
                                     <PermissionButton
                                         :uhasPermission="`${permission}:assert`"
                                         @click="table.clickEdit()"
                                     >
                                         <AIcon type="EditOutlined" />批量编辑
                                     </PermissionButton>
-                                </a-menu-item>
+                                </j-menu-item>
-                            </a-menu>
+                            </j-menu>
                         </template>
-                    </a-dropdown>
+                    </j-dropdown>
-                </a-space>
+                </j-space>
             </template>
 
             <template #card="slotProps">
@@ -82,8 +82,8 @@
                         <h3 class="card-item-content-title">
                             {{ slotProps.name }}
                         </h3>
-                        <a-row>
+                        <j-row>
-                            <a-col :span="12">
+                            <j-col :span="12">
                                 <div class="card-item-content-text">ID</div>
                                 <div
                                     style="cursor: pointer"
@@ -91,8 +91,8 @@
                                 >
                                     {{ slotProps.id }}
                                 </div>
-                            </a-col>
+                            </j-col>
-                            <a-col :span="12">
+                            <j-col :span="12">
                                 <div class="card-item-content-text">
                                     资产权限
                                 </div>
@@ -107,8 +107,8 @@
                                         )
                                     }}
                                 </div>
-                            </a-col>
+                            </j-col>
-                        </a-row>
+                        </j-row>
                     </template>
                     <template #actions>
                         <PermissionButton
@@ -134,7 +134,8 @@
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
-                ref="addDialogRef"
+                v-if="dialogs.addShow"
+                v-model:visible="dialogs.addShow"
                 :query-columns="query.columns"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
@@ -142,7 +143,10 @@
                 @confirm="table.refresh"
             />
             <EditPermissionDialog
-                ref="editDialogRef"
+                v-if="dialogs.editShow"
+                v-model:visible="dialogs.editShow"
+                :ids="dialogs.selectIds"
+                :permission-list="dialogs.permissList"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
                 asset-type="device"
@@ -398,25 +402,26 @@ const table = {
         }
     },
     clickAdd: () => {
-        addDialogRef.value && addDialogRef.value.openDialog();
+        dialogs.addShow = true;
     },
     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 (
+            dialogs.selectIds = ids;
-                editDialogRef.value &&
+            dialogs.permissList = permissionList;
-                editDialogRef.value.openDialog(ids, permissionList)
+            dialogs.editShow = true;
-            );
+            return;
         } else if (table.selectedRows.length === 0) return;
         const permissionList = table.selectedRows.map(
             (item) => item.permission,
         );
-        const mixPermissionList = intersection(...permissionList);
+        const mixPermissionList = intersection(...permissionList) as string[];
 
-        editDialogRef.value &&
+        dialogs.selectIds = ids;
-            editDialogRef.value.openDialog(ids, mixPermissionList);
+        dialogs.permissList = mixPermissionList;
+        dialogs.editShow = true;
     },
     clickUnBind: (row?: any) => {
         const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@@ -441,8 +446,12 @@ const table = {
     },
 };
 
-const addDialogRef = ref();
+const dialogs = reactive({
-const editDialogRef = ref();
+    selectIds: [] as string[],
+    permissList: [] as string[],
+    addShow: false,
+    editShow: false,
+});
 
 table.init();
 nextTick(() => {

src/views/system/Department/index.vue

@@ -1,30 +1,28 @@
 <template>
     <page-container>
         <div class="department-container">
-            <a-card class="department-content">
             <div class="left">
                 <LeftTree @change="(id) => (departmentId = id)" />
             </div>
             <div class="right">
-                    <a-tabs v-model:activeKey="activeKey">
+                <j-tabs v-model:activeKey="activeKey">
-                        <a-tab-pane key="product" tab="产品">
+                    <j-tab-pane key="product" tab="产品">
                         <Product
                             :parentId="departmentId"
                             @open-device-bind="openDeviceBind"
                         />
-                        </a-tab-pane>
+                    </j-tab-pane>
-                        <a-tab-pane key="device" tab="设备">
+                    <j-tab-pane key="device" tab="设备">
                         <Device
                             :parentId="departmentId"
                             v-model:bindBool="bindBool"
                         />
-                        </a-tab-pane>
+                    </j-tab-pane>
-                        <a-tab-pane key="user" tab="用户">
+                    <j-tab-pane key="user" tab="用户">
                         <User :parentId="departmentId" />
-                        </a-tab-pane>
+                    </j-tab-pane>
-                    </a-tabs>
+                </j-tabs>
             </div>
-            </a-card>
         </div>
     </page-container>
 </template>
@@ -48,21 +46,18 @@ const openDeviceBind = () => {
 
 <style lang="less" scoped>
 .department-container {
-    .department-content {
-        :deep(.ant-card-body) {
     display: flex;
+    background-color: #fff;
+    padding: 24px;
 
     .left {
         flex-basis: 300px;
     }
     .right {
         width: calc(100% - 300px);
-
+        :deep(.ant-tabs-nav-wrap) {
-                .ant-tabs-nav-wrap {
             padding-left: 24px;
         }
     }
-        }
-    }
 }
 </style>

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

@@ -13,7 +13,7 @@
             @cancelSelect="table.cancelSelect"
         >
             <template #headerTitle>
-                <a-space>
+                <j-space>
                     <PermissionButton
                         :uhasPermission="`${permission}:assert`"
                         type="primary"
@@ -21,11 +21,11 @@
                     >
                         <AIcon type="PlusOutlined" />资产分配
                     </PermissionButton>
-                    <a-dropdown trigger="hover">
+                    <j-dropdown trigger="hover">
-                        <a-button>批量操作</a-button>
+                        <j-button>批量操作</j-button>
                         <template #overlay>
-                            <a-menu>
+                            <j-menu>
-                                <a-menu-item>
+                                <j-menu-item>
                                     <PermissionButton
                                         :uhasPermission="`${permission}:bind`"
                                         :popConfirm="{
@@ -38,19 +38,19 @@
                                             type="DisconnectOutlined"
                                         />批量解绑
                                     </PermissionButton>
-                                </a-menu-item>
+                                </j-menu-item>
-                                <a-menu-item>
+                                <j-menu-item>
                                     <PermissionButton
                                         :uhasPermission="`${permission}:assert`"
-                                        @click="()=>table.clickEdit()"
+                                        @click="() => table.clickEdit()"
                                     >
                                         <AIcon type="EditOutlined" />批量编辑
                                     </PermissionButton>
-                                </a-menu-item>
+                                </j-menu-item>
-                            </a-menu>
+                            </j-menu>
                         </template>
-                    </a-dropdown>
+                    </j-dropdown>
-                </a-space>
+                </j-space>
             </template>
 
             <template #card="slotProps">
@@ -82,8 +82,8 @@
                         <h3 class="card-item-content-title">
                             {{ slotProps.name }}
                         </h3>
-                        <a-row>
+                        <j-row>
-                            <a-col :span="12">
+                            <j-col :span="12">
                                 <div class="card-item-content-text">ID</div>
                                 <div
                                     style="cursor: pointer"
@@ -91,8 +91,8 @@
                                 >
                                     {{ slotProps.id }}
                                 </div>
-                            </a-col>
+                            </j-col>
-                            <a-col :span="12">
+                            <j-col :span="12">
                                 <div class="card-item-content-text">
                                     资产权限
                                 </div>
@@ -107,8 +107,8 @@
                                         )
                                     }}
                                 </div>
-                            </a-col>
+                            </j-col>
-                        </a-row>
+                        </j-row>
                     </template>
                     <template #actions>
                         <PermissionButton
@@ -134,7 +134,8 @@
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
-                ref="addDialogRef"
+                v-if="dialogs.addShow"
+                v-model:visible="dialogs.addShow"
                 :query-columns="query.columns"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
@@ -142,14 +143,18 @@
                 @confirm="table.addConfirm"
             />
             <EditPermissionDialog
-                ref="editDialogRef"
+                v-if="dialogs.editShow"
+                v-model:visible="dialogs.editShow"
+                :ids="dialogs.selectIds"
+                :permission-list="dialogs.permissList"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
                 asset-type="product"
                 @confirm="table.refresh"
             />
             <NextDialog
-                ref="nextDialogRef"
+                v-if="dialogs.nextShow"
+                v-model:visible="dialogs.nextShow"
                 @confirm="emits('openDeviceBind')"
             />
         </div>
@@ -171,7 +176,7 @@ import {
 } from '@/api/system/department';
 import { intersection } from 'lodash-es';
 
-import { dictType } from '../typing.d.ts';
+import type { dictType } from '../typing.d.ts';
 import { message } from 'ant-design-vue';
 
 const permission = 'system/Department';
@@ -256,7 +261,7 @@ const table = {
         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,
+            (key) => permissionList.find((item:any) => item.id === key)?.name,
         );
         return result.join(',');
     },
@@ -375,9 +380,7 @@ const table = {
         }
     },
     clickAdd: () => {
-        console.log(222)
+        dialogs.addShow = true;
-        console.log(addDialogRef.value)
-        addDialogRef.value && addDialogRef.value.openDialog();
     },
     clickEdit: (row?: any) => {
         const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@@ -385,18 +388,19 @@ const table = {
         if (row || table.selectedRows.length === 1) {
             const permissionList =
                 row?.permission || table.selectedRows[0].permission;
-            return (
+            dialogs.selectIds = ids;
-                editDialogRef.value &&
+            dialogs.permissList = permissionList;
-                editDialogRef.value.openDialog(ids, permissionList)
+            dialogs.editShow = true;
-            );
+            return;
         } else if (table.selectedRows.length === 0) return;
         const permissionList = table.selectedRows.map(
             (item) => item.permission,
         );
-        const mixPermissionList = intersection(...permissionList);
+        const mixPermissionList = intersection(...permissionList) as string[];
 
-        editDialogRef.value &&
+        dialogs.selectIds = ids;
-            editDialogRef.value.openDialog(ids, mixPermissionList);
+        dialogs.permissList = mixPermissionList;
+        dialogs.editShow = true;
     },
     clickUnBind: (row?: any) => {
         const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@@ -421,14 +425,19 @@ const table = {
     },
     addConfirm: () => {
         table.refresh();
-        nextDialogRef.value && nextDialogRef.value.openDialog();
+        dialogs.nextShow = true;
     },
 };
 
-const addDialogRef = ref();
-const editDialogRef = ref();
-const nextDialogRef = ref();
 table.init();
+
+const dialogs = reactive({
+    selectIds: [] as string[],
+    permissList: [] as string[],
+    addShow: false,
+    editShow: false,
+    nextShow: false,
+});
 </script>
 
 <style lang="less" scoped>

src/views/system/Department/user/components/AddBindUserDialog.vue

@@ -1,14 +1,13 @@
 <template>
-    <a-modal
+    <j-modal
         class="add-bind-user-dialog-container"
         title="绑定"
         width="1440px"
-        @ok="dialog.handleOk"
+        visible
         centered
-        :confirmLoading="dialog.loading.value"
+        :confirmLoading="loading"
-        cancelText="取消"
+        @ok="confirm"
-        okText="确定"
+        @cancel="emits('update:visible', false)"
-        v-model:visible="dialog.visible.value"
     >
         <Search :columns="query.columns" @search="query.search" />
         <div class="table">
@@ -28,43 +27,35 @@
                 }"
             />
         </div>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
 import { bindUser_api, getBindUserList_api } from '@/api/system/department';
 import { message } from 'ant-design-vue';
 
-const emits = defineEmits(['confirm']);
+const emits = defineEmits(['confirm', 'update:visible']);
 
-const props = defineProps({
+const props = defineProps<{
-    parentId: String,
+    parentId: string;
-});
+    visible: boolean;
+}>();
 // 弹窗相关
-const dialog = {
+const loading = ref(false);
-    loading: ref<boolean>(false),
+const confirm = () => {
-    visible: ref<boolean>(false),
-    handleOk: () => {
     if (table._selectedRowKeys.length && props.parentId) {
-            bindUser_api(props.parentId, table._selectedRowKeys).then(() => {
+        loading.value = true;
-                emits('confirm');
+        bindUser_api(props.parentId, table._selectedRowKeys)
+            .then(() => {
                 message.success('操作成功');
-                dialog.changeVisible();
+                emits('confirm');
-            });
+                emits('update:visible', false);
+            })
+            .finally(() => (loading.value = false));
     } else {
-            dialog.changeVisible();
+        emits('update:visible', false);
     }
-    },
-    // 控制弹窗的打开与关闭
-    changeVisible: () => {
-        if (!dialog.visible.value) query.search({});
-        dialog.visible.value = !dialog.visible.value;
-    },
 };
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
 
 const query = {
     columns: [

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

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <Search :columns="query.columns" @search="query.search" />
+        <Search :columns="columns" @search="(p:any)=>params = p" />
 
         <j-pro-table
             ref="tableRef"
-            :columns="table.columns"
+            :columns="columns"
             :request="table.requestFun"
-            :params="query.params"
+            :params="params"
             :rowSelection="{
                 selectedRowKeys: table._selectedRowKeys,
                 onChange: table.onSelectChange,
@@ -18,12 +18,14 @@
                 <PermissionButton
                     type="primary"
                     :uhasPermission="`${permission}:bind-user`"
-                    @click="table.openDialog"
+                    @click="dialogVisible = true"
-                    style="margin-right: 15px;"
+                    style="margin-right: 15px"
                 >
                     <AIcon type="PlusOutlined" />绑定用户
                 </PermissionButton>
-                <div style="display: inline-block;width: 12px;height: 1px;"></div>
+                <div
+                    style="display: inline-block; width: 12px; height: 1px"
+                ></div>
                 <PermissionButton
                     :uhasPermission="`${permission}:bind`"
                     :popConfirm="{
@@ -34,7 +36,7 @@
                     <AIcon type="DisconnectOutlined" />批量解绑
                 </PermissionButton>
             </template>
-            <template #status="slotProps">
+            <template #state="slotProps">
                 <BadgeStatus
                     :status="slotProps.status"
                     :text="slotProps.status ? '正常' : '禁用'"
@@ -45,7 +47,7 @@
                 ></BadgeStatus>
             </template>
             <template #action="slotProps">
-                <a-space :size="16">
+                <j-space :size="16">
                     <PermissionButton
                         type="link"
                         :uhasPermission="`${permission}:bind`"
@@ -56,13 +58,14 @@
                     >
                         <AIcon type="DisconnectOutlined" />
                     </PermissionButton>
-                </a-space>
+                </j-space>
             </template>
         </j-pro-table>
 
         <div class="dialogs">
             <AddBindUserDialog
-                ref="addDialogRef"
+                v-if="dialogVisible"
+                v-model:visible="dialogVisible"
                 :parent-id="props.parentId"
                 @confirm="table.refresh"
             />
@@ -78,14 +81,11 @@ import { message } from 'ant-design-vue';
 
 const permission = 'system/Department';
 
-const addDialogRef = ref();
-
 const props = defineProps<{
     parentId: string;
 }>();
 
-const query = {
+const columns = [
-    columns: [
     {
         title: '姓名',
         dataIndex: 'name',
@@ -126,33 +126,6 @@ const query = {
                 },
             ],
         },
-        },
-    ],
-    params: ref({}),
-    search: (params: any) => {
-        query.params.value = params;
-    },
-};
-
-// 表格
-const tableRef = ref<Record<string, any>>({}); // 表格实例
-const table = reactive({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
         scopedSlots: true,
     },
     {
@@ -160,8 +133,15 @@ const table = reactive({
         dataIndex: 'action',
         key: 'action',
         scopedSlots: true,
+        width: '200px',
     },
-    ],
+];
+// 搜索参数
+const params = ref({});
+
+// 表格
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+const table = reactive({
     _selectedRowKeys: [] as string[],
 
     requestFun: async (oParams: any) => {
@@ -210,10 +190,6 @@ const table = reactive({
             table.refresh();
         });
     },
-    // 打开编辑弹窗
-    openDialog: () => {
-        addDialogRef.value && addDialogRef.value.openDialog();
-    },
     onSelectChange: (keys: string[]) => {
         table._selectedRowKeys = keys;
     },
@@ -225,6 +201,6 @@ const table = reactive({
         tableRef.value.reload();
     },
 });
-</script>
 
-<style scoped></style>
+const dialogVisible = ref(false);
+</script>