From e41f19ca6975dca61601527d7363d10a2cd2f3a2 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Sat, 28 Jan 2023 18:12:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.js                               |   8 -
 src/api/home.ts                               |  15 ++
 src/api/system/permission.ts                  |   6 +
 src/router/menu.ts                            |   4 +
 src/utils/utils.ts                            |   5 +-
 src/views/home/components/InitHome/index.vue  |  28 ++-
 src/views/home/index.vue                      |  43 +++-
 .../Permission/components/EditDialog.vue      | 234 ++++++++++++++++++
 .../Permission/components/StatusLabel.vue     |  29 +++
 src/views/system/Permission/index.vue         | 197 +++++++++++++++
 src/views/system/Role/Detail/index.vue        |   1 -
 .../system/Role/components/AddDialog.vue      |  30 +--
 src/views/system/Role/index.vue               |  25 +-
 13 files changed, 570 insertions(+), 55 deletions(-)
 delete mode 100644 src/api/home.js
 create mode 100644 src/api/home.ts
 create mode 100644 src/api/system/permission.ts
 create mode 100644 src/views/system/Permission/components/EditDialog.vue
 create mode 100644 src/views/system/Permission/components/StatusLabel.vue
 create mode 100644 src/views/system/Permission/index.vue

diff --git a/src/api/home.js b/src/api/home.js
deleted file mode 100644
index ea3aa339..00000000
--- a/src/api/home.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import server from '@/utils/request';
-
-// 设备数量
-export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
-// 产品数量
-export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
-// 查询产品列表
-export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);
diff --git a/src/api/home.ts b/src/api/home.ts
new file mode 100644
index 00000000..2164e2f5
--- /dev/null
+++ b/src/api/home.ts
@@ -0,0 +1,15 @@
+import server from '@/utils/request';
+
+// 当前登录用户权限信息
+export const getMe_api = () => server.get(`/authorize/me`);
+// 设置登录用户选择的页面
+export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
+// 当前登录用户选择的页面
+export const getView_api = () => server.get(`/user/settings/view/user`);
+
+// 设备数量
+export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
+// 产品数量
+export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
+// 查询产品列表
+export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
diff --git a/src/api/system/permission.ts b/src/api/system/permission.ts
new file mode 100644
index 00000000..978e4b26
--- /dev/null
+++ b/src/api/system/permission.ts
@@ -0,0 +1,6 @@
+import server from '@/utils/request';
+
+// 获取权限列表
+export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
+// 修改权限信息
+export const editPermission_api = (data:object) => server.patch(`/permission`,data);
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 27d4f961..dfb5de5c 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -109,6 +109,10 @@ export default [
         path:'/system/Role/detail/:id',
         component: ()=>import('@/views/system/Role/Detail/index.vue')
     },
+    {
+        path:'/system/Permission',
+        component: ()=>import('@/views/system/Permission/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 3e5df69b..30e21216 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,7 @@
 import moment from "moment";
 import { LocalStore } from "./comm";
 import { TOKEN_KEY } from "./variable";
+import {SystemConst} from './consts';
 
 /**
  * 把数据下载成JSON
@@ -52,4 +53,6 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.appendChild(formElement);
   formElement.submit();
   document.body.removeChild(formElement);
-};
\ No newline at end of file
+};
+// 是否不是community版本
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
\ No newline at end of file
diff --git a/src/views/home/components/InitHome/index.vue b/src/views/home/components/InitHome/index.vue
index 57be6d23..888aae8a 100644
--- a/src/views/home/components/InitHome/index.vue
+++ b/src/views/home/components/InitHome/index.vue
@@ -7,37 +7,47 @@
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '1' }"
-                    @click="selectId = '1'"
+                    :class="{ selected: selectValue === 'device' }"
+                    @click="selectValue = 'device'"
                 >
                     <img src="/images/home/device.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '2' }"
-                    @click="selectId = '2'"
+                    :class="{ selected: selectValue === 'ops' }"
+                    @click="selectValue = 'ops'"
                 >
                     <img src="/images/home/ops.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '3' }"
-                    @click="selectId = '3'"
+                    :class="{ selected: selectValue === 'comprehensive' }"
+                    @click="selectValue = 'comprehensive'"
                 >
                     <img src="/images/home/comprehensive.png" alt="" />
                 </a-col>
             </a-row>
-            <a-button type="primary" class="btn" @click="confirm">确定</a-button>
+            <a-button type="primary" class="btn" @click="confirm"
+                >确定</a-button
+            >
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-const selectId = ref('1');
+import { setView_api } from '@/api/home';
 
-const confirm = ()=>{}
+const emits = defineEmits(['refresh']);
+const selectValue = ref('device');
+
+const confirm = () => {
+    setView_api({
+        name: 'view',
+        content: selectValue.value,
+    }).then(() => emits('refresh'));
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7129a745..1327a1eb 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,11 +2,11 @@
     <div class="container">
         <div class="header"></div>
         <div class="left"></div>
-        <div class="content iot-home-container">
-            <!-- <InitHome /> -->
-            <!-- <DeviceHome /> -->
-            <!-- <DevOpsHome /> -->
-            <ComprehensiveHome />
+        <div class="content iot-home-container" v-loading="loading">
+            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
+            <DeviceHome v-else-if="currentView === 'device'" />
+            <DevOpsHome v-else-if="currentView === 'ops'" />
+            <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
         </div>
     </div>
 </template>
@@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
 import DevOpsHome from './components/DevOpsHome/index.vue';
 import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
 
+import { isNoCommunity } from '@/utils/utils';
+import { getMe_api, getView_api } from '@/api/home';
+
+const router = useRouter();
+
+const currentView = ref<string>('');
+const loading = ref<boolean>(true);
+
+// 获取选择的视图
+const setCurrentView = () => {
+    getView_api().then((resp: any) => {
+        if (resp.status === 200) {
+            if (resp.result) currentView.value = resp.result?.content;
+            else if (resp.result.username === 'admin') {
+                currentView.value = 'comprehensive';
+            } else currentView.value = 'init';
+        }
+    });
+};
+
+if (isNoCommunity) {
+    // 判断是否是api用户   是则跳转  否则获取选中的视图
+    getMe_api().then((resp: any) => {
+        if (resp && resp.status === 200) {
+            const isApiUser = resp.result.dimensions.find(
+                (item: any) =>
+                    item.type === 'api-client' || item.type.id === 'api-client',
+            );
+
+            isApiUser ? router.push('/system/api') : setCurrentView();
+        }
+    });
+}else setCurrentView()
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/system/Permission/components/EditDialog.vue b/src/views/system/Permission/components/EditDialog.vue
new file mode 100644
index 00000000..d78ac2bb
--- /dev/null
+++ b/src/views/system/Permission/components/EditDialog.vue
@@ -0,0 +1,234 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        :title="dialog.title"
+        width="1000px"
+        @ok="dialog.handleOk"
+        class="edit-dialog-container"
+    >
+        <a-form ref="formRef" :model="form.data" layout="vertical">
+            <a-form-item
+                name="id"
+                :rules="[{ required: true, message: '请输入标识' }]"
+                class="question-item"
+            >
+                <template #label>
+                    <span>标识</span>
+                    <span class="required-icon">*</span>
+                    <a-tooltip placement="top">
+                        <template #title>
+                            <span>标识ID需与代码中的标识ID一致</span>
+                        </template>
+                        <question-circle-outlined style="color: #00000073" />
+                    </a-tooltip>
+                </template>
+                <a-input
+                    v-model:value="form.data.id"
+                    placeholder="请输入标识(ID)"
+                    :maxlength="64"
+                    :disabled="dialog.title === '编辑'"
+                />
+            </a-form-item>
+            <a-form-item
+                name="name"
+                label="名称"
+                :rules="[{ required: true, message: '请输入名称' }]"
+            >
+                <a-input
+                    v-model:value="form.data.name"
+                    placeholder="请输入名称"
+                    :maxlength="64"
+                />
+            </a-form-item>
+        </a-form>
+
+        <a-table
+            :columns="table.columns"
+            :data-source="actionTableData"
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'index'">
+                    {{
+                        `#${
+                            (pager.current - 1) * pager.pageSize + (index + 1)
+                        }.`
+                    }}
+                </template>
+                <template
+                    v-else-if="column.key !== 'index' && column.key !== 'act'"
+                >
+                    <a-input v-model:value="record[column.key]" />
+                </template>
+                <template v-else-if="column.key === 'act'">
+                    <a-button
+                        style="padding: 0"
+                        type="link"
+                        @click="table.clickRemove(index)"
+                    >
+                        <delete-outlined />
+                    </a-button>
+                </template>
+            </template>
+        </a-table>
+        <div class="pager">
+            <a-pagination
+                v-model:current="pager.current"
+                :page-size="pager.pageSize"
+                :total="pager.total"
+            />
+            <a-select v-model:value="pager.current" style="width: 60px">
+                <a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
+                    i + 1
+                }}</a-select-option>
+            </a-select>
+        </div>
+
+        <a-button type="dashed" style="width: 100%" @click="table.clickAdd">
+            <plus-outlined /> 添加
+        </a-button>
+
+        <template #footer>
+            <a-button key="back" @click="dialog.visible = false">取消</a-button>
+            <a-button
+                key="submit"
+                type="primary"
+                :loading="form.loading"
+                @click="dialog.handleOk"
+                >确定</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FormInstance, message } from 'ant-design-vue';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+
+const defaultAction = [
+    { action: 'query', name: '查询', describe: '查询' },
+    { action: 'save', name: '保存', describe: '保存' },
+    { action: 'delete', name: '删除', describe: '删除' },
+];
+// 弹窗相关
+const dialog = reactive({
+    title: '',
+    visible: false,
+    handleOk: () => {
+        formRef.value?.validate().then(() => console.log('success'));
+    },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: any = {}) => {
+        form.data = { name: '', description: '', ...defaultForm };
+        dialog.title = defaultForm.id ? '编辑' : '新增';
+        table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
+        pager.total = table.data.length;
+        pager.current = 1;
+        dialog.visible = status;
+    },
+});
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        id: '',
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '-',
+            dataIndex: 'index',
+            key: 'index',
+        },
+        {
+            title: '操作类型',
+            dataIndex: 'action',
+            key: 'action',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+        },
+        {
+            title: '操作',
+            dataIndex: 'act',
+            key: 'act',
+        },
+    ],
+    data: <any>[],
+    clickRemove: (index: number) => {
+        pager.total -= 1;
+        table.data.splice(index, 1);
+
+        // 当删除的刚好为本页的最后一项时，返回到上一页
+        if (pager.current > 1 && pager.total % pager.pageSize === 0)
+            pager.current -= 1;
+    },
+    clickAdd: () => {
+        table.data.push({});
+        pager.total += 1;
+
+        // 当添加的项需要新加一页才能显示时，跳转到最后一页
+        if (pager.total % pager.pageSize === 1) {
+            pager.current = Math.ceil(pager.total / pager.pageSize);
+        }
+    },
+});
+
+const pager = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+});
+const pageArr = computed(() => {
+    const maxPageNum = Math.ceil(pager.total / pager.pageSize);
+    return new Array(maxPageNum).fill(1);
+});
+const actionTableData = computed(() => {
+    const startIndex = (pager.current - 1) * pager.pageSize;
+    const endIndex = Math.min(
+        pager.current * pager.pageSize,
+        table.data.length,
+    );
+    console.log(startIndex, endIndex);
+
+    return table.data.slice(startIndex, endIndex);
+});
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible,
+});
+</script>
+
+<style lang="less" scoped>
+.edit-dialog-container {
+    .question-item {
+        :deep(.ant-form-item-required) {
+            &::before {
+                display: none;
+            }
+            .required-icon {
+                display: inline-block;
+                margin-right: 4px;
+                margin-left: 2px;
+                color: #ff4d4f;
+                font-size: 14px;
+                font-family: SimSun, sans-serif;
+                line-height: 1;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Permission/components/StatusLabel.vue b/src/views/system/Permission/components/StatusLabel.vue
new file mode 100644
index 00000000..7641fea2
--- /dev/null
+++ b/src/views/system/Permission/components/StatusLabel.vue
@@ -0,0 +1,29 @@
+<template>
+    <span class="status-label-container">
+        <i
+            class="circle"
+            :style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
+        ></i>
+        <span>{{ props.statusValue ? '启用' : '禁用' }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: number;
+}>();
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>
diff --git a/src/views/system/Permission/index.vue b/src/views/system/Permission/index.vue
new file mode 100644
index 00000000..ec763acd
--- /dev/null
+++ b/src/views/system/Permission/index.vue
@@ -0,0 +1,197 @@
+<template>
+    <div class="permission-container">
+        <Search :columns="query.columns" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="getPermission_api"
+            model="TABLE"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="table.openDialog(undefined)"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+            <template #status="slotProps">
+                <StatusLabel :status-value="slotProps.status" />
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>编辑</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.openDialog(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        :title="`确定要${
+                            slotProps.status ? '禁用' : '启用'
+                        }吗？`"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.changeStatus(slotProps)"
+                    >
+                        <a-tooltip>
+                            <template #title>{{
+                                slotProps.status ? '禁用' : '启用'
+                            }}</template>
+                            <a-button style="padding: 0" type="link">
+                                <stop-outlined v-if="slotProps.status" />
+                                <play-circle-outlined v-else />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+
+                    <a-popconfirm
+                        title="确定要删除吗？"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                        :disabled="slotProps.status"
+                    >
+                        <a-tooltip>
+                            <template #title>删除</template>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                :disabled="slotProps.status"
+                            >
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <EditDialog ref="editDialogRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EditDialog from './components/EditDialog.vue';
+import StatusLabel from './components/StatusLabel.vue';
+import { message } from 'ant-design-vue';
+import {
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined,
+    StopOutlined,
+    PlayCircleOutlined,
+} from '@ant-design/icons-vue';
+import { getPermission_api, editPermission_api } from '@/api/system/permission';
+
+const editDialogRef = ref(); // 新增弹窗实例
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            search: {
+                rename: 'status',
+                type: 'select',
+                options: [
+                    {
+                        label: '启用',
+                        value: 1,
+                    },
+                    {
+                        label: '禁用',
+                        value: 0,
+                    },
+                ],
+            },
+        },
+    ],
+    params: {},
+});
+
+// 表格
+const table = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    openDialog: (row: object | undefined = {}) => {
+        editDialogRef.value.openDialog(true, row);
+    },
+    changeStatus: (row: any) => {
+        const params = {
+            ...row,
+            status: row.status ? 0 : 1,
+        };
+        editPermission_api(params).then(() => {
+            message.success('操作成功');
+            tableRef.value.reload();
+        });
+    },
+    clickDel: (row: any) => {
+        // delRole_api(row.id).then((resp: any) => {
+        //     if (resp.status === 200) {
+        //         tableRef.value?.reload();
+        //         message.success('操作成功!');
+        //     }
+        // });
+    },
+    refresh: () => {
+        tableRef.value.reload();
+    },
+});
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
index 1c58b369..8a907baa 100644
--- a/src/views/system/Role/Detail/index.vue
+++ b/src/views/system/Role/Detail/index.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="details-container">
-        {{ route.params.id }}
         <a-tabs v-model:activeKey="activeKey">
             <a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
             <a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
diff --git a/src/views/system/Role/components/AddDialog.vue b/src/views/system/Role/components/AddDialog.vue
index 33e817b3..fc8a68d9 100644
--- a/src/views/system/Role/components/AddDialog.vue
+++ b/src/views/system/Role/components/AddDialog.vue
@@ -44,10 +44,7 @@
 <script setup lang="ts">
 import { FormInstance, message } from 'ant-design-vue';
 import { saveRole_api } from '@/api/system/role';
-const router = useRouter()
-const props = defineProps({
-    open: Number,
-});
+const router = useRouter();
 // 弹窗相关
 const dialog = reactive({
     visible: false,
@@ -59,10 +56,15 @@ const dialog = reactive({
                 if (resp.status === 200) {
                     message.success('操作成功');
                     dialog.visible = false;
-                    router.push(`/system/Role/detail/${resp.result.id}`)
+                    router.push(`/system/Role/detail/${resp.result.id}`);
                 }
             });
     },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: object={}) => {
+        dialog.visible = status;
+        form.data = { name: '', description: '', ...defaultForm };
+    },
 });
 // 表单相关
 const formRef = ref<FormInstance>();
@@ -74,18 +76,12 @@ const form = reactive({
     },
 });
 
-watch(
-    () => props.open,
-    () => {
-        // 重置表单
-        form.data = {
-            name: '',
-            description: '',
-        };
-        formRef.value?.resetFields();
-        dialog.visible = true;
-    },
-);
+
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible
+})
 </script>
 
 <style scoped></style>
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index 11758cdd..74bff32a 100644
--- a/src/views/system/Role/index.vue
+++ b/src/views/system/Role/index.vue
@@ -45,7 +45,7 @@
         </JTable>
 
         <div class="dialogs">
-            <AddDialog :open="dialog.openAdd" />
+            <AddDialog ref="addDialogRef" />
         </div>
     </a-card>
 </template>
@@ -59,8 +59,8 @@ import {
 import AddDialog from './components/AddDialog.vue';
 import { getRoleList_api, delRole_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-
-const router = useRouter()
+const addDialogRef = ref(); // 新增弹窗实例
+const router = useRouter();
 // 筛选
 const query = reactive({
     columns: [
@@ -122,24 +122,21 @@ const table = reactive({
     ],
     tableData: [],
     clickAdd: () => {
-        dialog.openAdd += 1;
+        addDialogRef.value.openDialog(true, {})
     },
     clickDel: (row: any) => {
-        delRole_api(row.id).then((resp:any)=>{
-            if(resp.status === 200){
-                tableRef.value?.reload()
-                message.success('操作成功!')
+        delRole_api(row.id).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                message.success('操作成功!');
             }
-        })
+        });
     },
     clickEdit: (row: any) => {
-        router.push(`/system/Role/detail/${row.id}`)
+        router.push(`/system/Role/detail/${row.id}`);
     },
 });
-// 弹窗相关
-const dialog = reactive({
-    openAdd: 0,
-});
+
 </script>
 
 <style lang="less" scoped></style>