From 3039c20e2f06d5e03db524c807c1d6ef6c60f4aa Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 16:35:59 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=8D=A2=E3=80=81=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/Role/Detail/Permiss/index.vue      |  32 +--
 src/views/system/Role/Detail/User/index.vue   | 253 ++++++++++--------
 .../Role/Detail/components/AddUserDialog.vue  | 148 +++++-----
 .../Role/Detail/components/PermissTree.vue    |  56 ++--
 src/views/system/Role/Detail/index.vue        |   9 +-
 .../system/Role/components/AddDialog.vue      |  90 +++----
 src/views/system/Role/index.vue               | 122 ++++-----
 7 files changed, 338 insertions(+), 372 deletions(-)

diff --git a/src/views/system/Role/Detail/Permiss/index.vue b/src/views/system/Role/Detail/Permiss/index.vue
index c41cb1b8..3fcbe584 100644
--- a/src/views/system/Role/Detail/Permiss/index.vue
+++ b/src/views/system/Role/Detail/Permiss/index.vue
@@ -1,42 +1,42 @@
 <template>
     <div class="role-permiss-container">
-        <a-card>
+        <section class="card">
             <h5>基本信息</h5>
-            <a-form ref="formRef" class="basic-form" :model="form.data" layout="vertical">
-                <a-form-item
+            <j-form ref="formRef" class="basic-form" :model="form.data" layout="vertical">
+                <j-form-item
                     name="name"
                     label="名称"
                     :rules="[{ required: true, message: '请输入名称' }]"
                 >
-                    <a-input
+                    <j-input
                         v-model:value="form.data.name"
                         placeholder="请输入角色名称"
                         :maxlength="64"
                     />
-                </a-form-item>
-                <a-form-item name="name" label="说明">
-                    <a-textarea
+                </j-form-item>
+                <j-form-item name="name" label="说明">
+                    <j-textarea
                         v-model:value="form.data.description"
                         placeholder="请输入说明"
                         :maxlength="200"
                         show-count
                     />
-                </a-form-item>
-            </a-form>
-        </a-card>
+                </j-form-item>
+            </j-form>
+        </section>
 
-        <a-card>
+        <section class="card">
             <h5>权限分配</h5>
             <PermissTree v-model:select-items="form.menus" />
 
-            <a-button
+            <j-button
                 type="primary"
                 :disabled="form.loading"
                 @click="form.clickSave"
                 style="margin-top: 24px;"
-                >保存</a-button
+                >保存</j-button
             >
-        </a-card>
+        </section>
     </div>
 </template>
 
@@ -86,8 +86,10 @@ form.getForm();
 
 <style lang="less" scoped>
 .role-permiss-container {
-    .ant-card {
+    .card {
         margin-bottom: 24px;
+        background-color: #fff;
+        padding: 24px;
 
         h5 {
             position: relative;
diff --git a/src/views/system/Role/Detail/User/index.vue b/src/views/system/Role/Detail/User/index.vue
index abb633d8..2ad6f4ee 100644
--- a/src/views/system/Role/Detail/User/index.vue
+++ b/src/views/system/Role/Detail/User/index.vue
@@ -1,134 +1,149 @@
 <template>
-    <a-card class="role-user-container">
-        <Search :columns="query.columns" />
+    <div class="role-user-container">
+        <j-advanced-search
+            :columns="columns"
+            @search="(params:any)=>queryParams = {...params}"
+        />
 
         <j-pro-table
             ref="tableRef"
-            :columns="table.columns"
-            :request="getUserByRole_api"
+            :columns="columns"
+            :request="table.getList"
             model="TABLE"
-            :defaultParams="query.params"
+            :params="queryParams"
             :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys,
-                onChange: table.onSelectChange,
+                selectedRowKeys: selectedRowKeys,
+                onChange: (keys:string[])=>selectedRowKeys = keys,
             }"
-            @cancelSelect="table.cancelSelect"
+            @cancelSelect="selectedRowKeys = []"
+            size="small"
         >
             <template #headerTitle>
-                <a-button type="primary" @click="table.clickAdd"
-                    ><plus-outlined />新增</a-button
-                >
+                <j-button type="primary" @click="dialogVisible = true">
+                    <AIcon type="PlusOutlined" />新增
+                </j-button>
+            </template>
+
+            <template #status="slotProps">
+                <BadgeStatus
+                    :status="slotProps.status"
+                    :text="slotProps.status ? '正常' : '禁用'"
+                    :statusNames="{
+                        1: 'success',
+                        0: 'error',
+                    }"
+                ></BadgeStatus>
             </template>
 
             <template #action="slotProps">
-                <a-space :size="16">
-                    <a-popconfirm
-                        title="确认解绑"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickUnBind(slotProps)"
+                <j-space :size="16">
+                    <PermissionButton
+                        type="link"
+                        :tooltip="{ title: '解绑' }"
+                        :pop-confirm="{
+                            title: `确认解绑`,
+                            onConfirm: () => table.unbind([slotProps.id]),
+                        }"
                     >
-                        <a-tooltip>
-                            <template #title>解绑</template>
-                            <a-button style="padding: 0" type="link">
-                                <disconnect-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
-                </a-space>
+                        <AIcon type="DisconnectOutlined" />
+                    </PermissionButton>
+                </j-space>
             </template>
         </j-pro-table>
 
-        <div class="dialogs">
-            <AddUserDialog :open="dialog.openAdd" @refresh="table.refresh" />
-        </div>
-    </a-card>
+        <AddUserDialog
+            v-if="dialogVisible"
+            v-model:visible="dialogVisible"
+            :role-id="roleId"
+            @refresh="table.refresh"
+        />
+    </div>
 </template>
 
 <script setup lang="ts" name="RoleUser">
-import { PlusOutlined, DisconnectOutlined } from '@ant-design/icons-vue';
+import PermissionButton from '@/components/PermissionButton/index.vue';
 import AddUserDialog from '../components/AddUserDialog.vue';
 import { getUserByRole_api, unbindUser_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-import userType from './index';
 
-const route = useRoute();
-const roleId = route.params.id as string;
-const query = reactive<userType.queryType>({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
+const roleId = useRoute().params.id as string;
+
+const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
         },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-        },
-    ],
-    params: {
-        terms: [
-            {
-                terms: [
-                    {
-                        column: 'id$in-dimension$role',
-                        value: route.params.id,
-                    },
-                ],
-            },
-        ],
     },
-});
+    {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '正常',
+                    value: 1,
+                },
+                {
+                    label: '禁用',
+                    value: 0,
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        width: '200px',
+        scopedSlots: true,
+    },
+];
+const queryParams = ref({});
 
 const tableRef = ref<Record<string, any>>({});
-const table = reactive<userType.tableType>({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-        },
-    ],
-    tableData: [],
-    // 点击打开新增弹窗
-    clickAdd: () => {
-        dialog.openAdd += 1;
-    },
-    // 点击解绑
-    clickUnBind: (row: any) => {
-        table.unbind([row.id]);
+const selectedRowKeys = ref<string[]>([]);
+const table = {
+    getList: (oParams: any) => {
+        const params = {
+            ...oParams,
+            terms: [
+                {
+                    terms: [
+                        {
+                            column: 'id$in-dimension$role',
+                            value: roleId,
+                        },
+                    ],
+                },
+            ],
+        };
+        if (oParams.terms[0])
+            params.terms.unshift({
+                terms: oParams.terms[0].terms,
+            });
+        return getUserByRole_api(params);
     },
     // 批量解绑
     unbind: (ids: string[] = []) => {
@@ -143,20 +158,24 @@ const table = reactive<userType.tableType>({
     refresh: () => {
         tableRef.value.reload();
     },
-    // 多选
-    _selectedRowKeys: [] as string[],
-    onSelectChange: (keys: string[]) => {
-        table._selectedRowKeys = [...keys];
-    },
-    cancelSelect: () => {
-        table._selectedRowKeys = [];
-    },
-});
+};
 
 // 弹窗相关
-const dialog = reactive({
-    openAdd: 0,
-});
+const dialogVisible = ref(false);
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.role-user-container {
+    background-color: #fff;
+
+    :deep(.ant-table-tbody) {
+        .ant-table-cell {
+            .ant-space-item {
+                .ant-btn-link {
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Role/Detail/components/AddUserDialog.vue b/src/views/system/Role/Detail/components/AddUserDialog.vue
index e22e46ba..bd34c834 100644
--- a/src/views/system/Role/Detail/components/AddUserDialog.vue
+++ b/src/views/system/Role/Detail/components/AddUserDialog.vue
@@ -1,123 +1,99 @@
 <template>
-    <a-modal
-        v-model:visible="dialog.visible"
+    <j-modal
+        visible
         title="新增"
         width="1000px"
-        @ok="dialog.handleOk"
+        @ok="confirm"
+        @cancel="emits('update:visible', false)"
     >
-        <Search :columns="query.columns" type="simple" />
+        <j-advanced-search
+            :columns="columns"
+            type="simple"
+            @search="(params:any)=>queryParams = {...params}"
+        />
 
         <j-pro-table
             ref="tableRef"
-            :columns="table.columns"
-            :request="getUserByRole_api"
+            :columns="columns"
+            :request="getUserList"
             model="TABLE"
-            :params="query.params"
+            :params="queryParams"
             :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys,
-                onChange: table.onSelectChange,
+                selectedRowKeys: selectedRowKeys,
+                onChange: (keys:string[])=>selectedRowKeys = keys,
             }"
-            @cancelSelect="table.cancelSelect"
+            @cancelSelect="selectedRowKeys = []"
         >
         </j-pro-table>
-
-        <template #footer>
-            <a-button key="back" @click="dialog.visible = false">取消</a-button>
-            <a-button key="submit" type="primary" @click="dialog.handleOk"
-                >确定</a-button
-            >
-        </template>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
 import { getUserByRole_api, bindUser_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-const route = useRoute();
 
-const emits = defineEmits(['refresh']);
-const props = defineProps({
-    open: Number,
-});
+const emits = defineEmits(['refresh', 'update:visible']);
+const props = defineProps<{
+    visible: boolean;
+    roleId: string
+}>();
 
-const query = reactive({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
+const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
         },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
+    },
+    {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
         },
-    ],
-    params: {
+    },
+];
+const queryParams = ref({});
+
+const selectedRowKeys = ref<string[]>([]);
+const getUserList = (oParams: any) => {
+    const params = {
+        ...oParams,
         sorts: [{ name: 'createTime', order: 'desc' }],
         terms: [
             {
                 terms: [
                     {
                         column: 'id$in-dimension$role$not',
-                        value: route.params.id,
+                        value: props.roleId,
                     },
                 ],
             },
         ],
-    },
-});
-const tableRef = ref<Record<string, any>>({});
-const table = reactive({
-    _selectedRowKeys: [] as string[],
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-    ],
-    tableData: [],
-    onSelectChange: (keys: string[]) => {
-        table._selectedRowKeys = [...keys];
-    },
-    cancelSelect: () => {
-        table._selectedRowKeys = [];
-    },
-});
+    };
+    if (oParams.terms[0])
+        params.terms.unshift({
+            terms: oParams.terms[0].terms,
+        });
+    return getUserByRole_api(params);
+};
 
-// 弹窗相关
-const dialog = reactive({
-    visible: false,
-    handleOk: () => {
-        if (table._selectedRowKeys.length < 1) {
-            message.error('请至少选择一项');
-        } else {
-            bindUser_api(
-                route.params.id as string,
-                table._selectedRowKeys,
-            ).then((resp) => {
+const confirm = () => {
+    if (selectedRowKeys.value.length < 1) {
+        message.error('请至少选择一项');
+    } else {
+        bindUser_api(props.roleId, selectedRowKeys.value).then(
+            (resp) => {
                 if (resp.status === 200) {
                     message.success('操作成功');
                     emits('refresh');
-                    dialog.visible = false;
+                    emits('update:visible', false);
                 }
-            });
-        }
-    },
-});
-
-watch(
-    () => props.open,
-    () => {
-        dialog.visible = true;
-    },
-);
+            },
+        );
+    }
+};
 </script>
-
-<style scoped></style>
diff --git a/src/views/system/Role/Detail/components/PermissTree.vue b/src/views/system/Role/Detail/components/PermissTree.vue
index ec63d97d..dc7875ab 100644
--- a/src/views/system/Role/Detail/components/PermissTree.vue
+++ b/src/views/system/Role/Detail/components/PermissTree.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="permiss-tree-container">
-        <a-table
+        <j-table
             :columns="columns"
             :data-source="tableData"
             :pagination="false"
@@ -10,28 +10,28 @@
             <!-- 表头 -->
             <template #headerCell="{ column }">
                 <div v-if="column.key === 'menu'">
-                    <a-checkbox
+                    <j-checkbox
                         v-model:checked="selectedAll"
                         :indeterminate="indeterminate"
                         @change="selectAllChange"
-                        >菜单权限</a-checkbox
+                        >菜单权限</j-checkbox
                     >
                 </div>
                 <div v-else-if="column.key === 'data'">
                     <span style="">数据权限</span>
-                    <a-tooltip>
+                    <j-tooltip>
                         <template #title
                             >勾选任意数据权限均能看到自己创建的数据权限</template
                         >
-                        <question-circle-outlined />
-                    </a-tooltip>
-                    <a-checkbox
+                        <AIcon type="QuestionCircleOutlined" />
+                    </j-tooltip>
+                    <j-checkbox
                         v-model:checked="bulkShow"
                         @change="bulkValue = ''"
                         style="margin-left: 10px"
-                        >批量设置</a-checkbox
+                        >批量设置</j-checkbox
                     >
-                    <a-select
+                    <j-select
                         v-show="bulkShow"
                         v-model:value="bulkValue"
                         :size="'middle'"
@@ -39,7 +39,7 @@
                         :options="bulkOptions"
                         @change="bulkChange"
                         placeholder="请选择"
-                    ></a-select>
+                    ></j-select>
                 </div>
                 <div v-else>
                     <span>{{ column.title }}</span>
@@ -48,21 +48,21 @@
             <!-- 表格内容 -->
             <template #bodyCell="{ column, record }">
                 <div v-if="column.key === 'menu'">
-                    <a-checkbox
+                    <j-checkbox
                         v-model:checked="record.granted"
                         :indeterminate="record.indeterminate"
                         @change="menuChange(record, true)"
-                        >{{ record.name }}</a-checkbox
+                        >{{ record.name }}</j-checkbox
                     >
                 </div>
 
                 <div v-else-if="column.key === 'action'">
                     <div v-if="record.buttons && record.buttons.length > 0">
-                        <a-checkbox
+                        <j-checkbox
                             v-for="button in record.buttons"
                             v-model:checked="button.granted"
                             @change="actionChange(record)"
-                            >{{ button.name }}</a-checkbox
+                            >{{ button.name }}</j-checkbox
                         >
                     </div>
                 </div>
@@ -72,13 +72,16 @@
                         不支持数据权限配置，默认可查看全部数据
                     </span>
                     <div v-else-if="record.accessSupport.value === 'support'">
-                        <a-radio-group v-model:value="record.selectAccesses">
-                            <a-radio
+                        <j-radio-group
+                            v-model:value="record.selectAccesses"
+                            @change="resetBulk"
+                        >
+                            <j-radio
                                 :value="asset.supportId"
                                 v-for="asset in record.assetAccesses"
-                                >{{ asset.name }}</a-radio
+                                >{{ asset.name }}</j-radio
                             >
-                        </a-radio-group>
+                        </j-radio-group>
                     </div>
                     <span
                         v-else-if="
@@ -89,12 +92,11 @@
                     >
                 </div>
             </template>
-        </a-table>
+        </j-table>
     </div>
 </template>
 
 <script setup lang="ts">
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { cloneDeep } from 'lodash-es';
 import { getPrimissTree_api } from '@/api/system/role';
 
@@ -167,6 +169,12 @@ const bulkChange = () => {
         }
     });
 };
+
+// 重置批量设置
+const resetBulk = () => {
+    bulkValue.value = '';
+    bulkShow.value = false;
+};
 // ------------下面为表格内容部分------------------
 const flatTableData: tableItemType[] = []; // 表格数据的扁平化版本--浅克隆   方便进行对表格数据进行操作
 
@@ -273,6 +281,9 @@ function menuChange(
         }
     }
 
+    // 取消批量设置
+    resetBulk();
+
     // 改变头部节点状态
     const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项
     if (selectList.length === flatTableData.length) {
@@ -390,8 +401,3 @@ type tableItemType = {
     assetAccesses?: any[];
 };
 </script>
-
-<style lang="less" scoped>
-.permiss-tree-container {
-}
-</style>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
index 639cdc98..c97dbd05 100644
--- a/src/views/system/Role/Detail/index.vue
+++ b/src/views/system/Role/Detail/index.vue
@@ -1,10 +1,10 @@
 <template>
     <page-container>
         <div class="details-container">
-            <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>
-            </a-tabs>
+            <j-tabs v-model:activeKey="activeKey">
+                <j-tab-pane key="1" tab="权限分配"><Permiss /></j-tab-pane>
+                <j-tab-pane key="2" tab="用户管理"><User /></j-tab-pane>
+            </j-tabs>
         </div>
     </page-container>
 </template>
@@ -12,7 +12,6 @@
 <script setup lang="ts" name="Detail">
 import Permiss from './Permiss/index.vue';
 import User from './User/index.vue';
-const route = useRoute();
 
 const activeKey = ref('1');
 </script>
diff --git a/src/views/system/Role/components/AddDialog.vue b/src/views/system/Role/components/AddDialog.vue
index 16c3fc54..b57c50e3 100644
--- a/src/views/system/Role/components/AddDialog.vue
+++ b/src/views/system/Role/components/AddDialog.vue
@@ -1,18 +1,20 @@
 <template>
     <a-modal
-        v-model:visible="dialog.visible"
+        visible
         title="新增"
         width="670px"
-        @ok="dialog.handleOk"
+        @cancel="emits('update:visible', false)"
+        @ok="confirm"
+        :confirm-loading="loading"
     >
-        <a-form ref="formRef" :model="form.data" layout="vertical">
+        <a-form ref="formRef" :model="form" layout="vertical">
             <a-form-item
                 name="name"
                 label="名称"
                 :rules="[{ required: true, message: '请输入名称' }]"
             >
                 <a-input
-                    v-model:value="form.data.name"
+                    v-model:value="form.name"
                     placeholder="请输入角色名称"
                     allow-clear
                     :maxlength="64"
@@ -20,72 +22,52 @@
             </a-form-item>
             <a-form-item name="name" label="说明">
                 <a-textarea
-                    v-model:value="form.data.description"
+                    v-model:value="form.description"
                     placeholder="请输入说明"
                     allow-clear
                     :maxlength="200"
                 />
             </a-form-item>
         </a-form>
-
-        <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 { saveRole_api } from '@/api/system/role';
-const router = useRouter();
+import { useMenuStore } from '@/store/menu';
 const route = useRoute();
+const { jumpPage } = useMenuStore();
+
+const emits = defineEmits(['update:visible']);
+const props = defineProps<{
+    visible: boolean;
+}>();
 // 弹窗相关
-const dialog = reactive({
-    visible: false,
-    handleOk: () => {
-        formRef.value
-            ?.validate()
-            .then(() => saveRole_api(form.data))
-            .then((resp) => {
-                if (resp.status === 200) {
-                    message.success('操作成功');
-                    dialog.visible = false;
-
-                    if (route.query.save) {
-                        // @ts-ignore
-                        window?.onSaveSuccess && window.onSaveSuccess(resp.result.id);
-                        window.close();
-                    } else router.push(`/system/Role/detail/${resp.result.id}`);
-                }
-            });
-    },
-    // 控制弹窗的打开与关闭
-    changeVisible: (status: boolean, defaultForm: object = {}) => {
-        dialog.visible = status;
-        form.data = { name: '', description: '', ...defaultForm };
-    },
-});
-// 表单相关
+const loading = ref(false);
+const form = ref<any>({});
 const formRef = ref<FormInstance>();
-const form = reactive({
-    loading: false,
-    data: {
-        name: '',
-        description: '',
-    },
-});
 
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
+const confirm = () => {
+    loading.value = true;
+    formRef.value
+        ?.validate()
+        .then(() => saveRole_api(form.value))
+        .then((resp) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emits('update:visible', false);
+
+                if (route.query.save) {
+                    // @ts-ignore
+                    window?.onSaveSuccess(resp.result.id);
+                    window.close();
+                } else jumpPage(`system/Role/detail`, { id: resp.result.id });
+            }
+        })
+        .finally(() => (loading.value = false));
+};
+// 表单相关
 </script>
 
 <style scoped></style>
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index 72ee4749..ee75a296 100644
--- a/src/views/system/Role/index.vue
+++ b/src/views/system/Role/index.vue
@@ -1,20 +1,23 @@
 <template>
     <page-container>
         <a-card class="role-container">
-            <Search :columns="query.columns" />
+            <j-advanced-search
+                :columns="columns"
+                @search="(params:any)=>queryParams = params"
+            />
 
             <j-pro-table
                 ref="tableRef"
-                :columns="table.columns"
+                :columns="columns"
                 :request="getRoleList_api"
                 model="TABLE"
-                :params="query.params"
+                :params="queryParams"
             >
                 <template #headerTitle>
                     <PermissionButton
                         type="primary"
                         :uhasPermission="`${permission}:add`"
-                        @click="table.clickAdd"
+                        @click="dialogVisible = true"
                     >
                         <AIcon type="PlusOutlined" />新增
                     </PermissionButton>
@@ -47,9 +50,7 @@
                 </template>
             </j-pro-table>
 
-            <div class="dialogs">
-                <AddDialog ref="addDialogRef" />
-            </div>
+            <AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" />
         </a-card>
     </page-container>
 </template>
@@ -59,73 +60,56 @@ import PermissionButton from '@/components/PermissionButton/index.vue';
 import AddDialog from './components/AddDialog.vue';
 import { getRoleList_api, delRole_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
+import { useMenuStore } from '@/store/menu';
 
 const permission = 'system/Role';
+const { jumpPage } = useMenuStore();
 
 const addDialogRef = ref(); // 新增弹窗实例
-const router = useRouter();
-const route = useRoute();
+const isSave = !!useRoute().query.save;
 
-// 筛选
-const query = reactive({
-    columns: [
-        {
-            title: '标识',
-            dataIndex: 'id',
-            key: 'id',
-            ellipsis: true,
-            fixed: 'left',
+const columns = [
+    {
+        title: '标识',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
         },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
         },
-        {
-            title: '描述',
-            key: 'description',
-            ellipsis: true,
-            dataIndex: 'description',
-            filters: true,
-            onFilter: true,
+    },
+    {
+        title: '描述',
+        key: 'description',
+        ellipsis: true,
+        dataIndex: 'description',
+        search: {
+            type: 'string',
         },
-        {
-            title: '操作',
-            valueType: 'option',
-            width: 200,
-            fixed: 'right',
-        },
-    ],
-    params: {},
-});
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        width: 200,
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
+const queryParams = ref({});
 // 表格
 const tableRef = ref<Record<string, any>>({});
-const table = reactive({
-    columns: [
-        {
-            title: '标识',
-            dataIndex: 'id',
-            key: 'id',
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '说明',
-            dataIndex: 'description',
-            key: 'description',
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-        },
-    ],
-    tableData: [],
+const table = {
     clickAdd: () => {
         addDialogRef.value.openDialog(true, {});
     },
@@ -137,13 +121,11 @@ const table = reactive({
             }
         });
     },
-    clickEdit: (row: any) => {
-        router.push(`/system/Role/detail/${row.id}`);
+    clickEdit: ({ id }: { id: string }) => {
+        jumpPage(`system/Role/Detail`, { id });
     },
-});
-nextTick(() => {
-    route.query.save && table.clickAdd();
-});
+};
+const dialogVisible = ref(isSave);
 </script>
 
 <style lang="less" scoped>