feat: 优化代码

src/pages/system/role/RoleManagement.vue

 <template>
-    <my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table" noPage>
-        <template #drawer>
-            <Form ref="form" />
+    <Table url="/api/v1/roles" rowKey="roleId" addBtn ref="table" noPage :buttons="buttons">
+        <template #drawer="drawer">
+            <Form v-bind="drawer" />
         </template>
         <a-table-column title="角色名称" data-index="roleName" />
         <a-table-column title="角色编码" data-index="roleCode" />
         <a-table-column title="角色说明" data-index="remark" />
-        <a-table-column title="操作">
-            <template #default="row">
-                <a @click="() => view(row, 2)">查看</a>
-                <a-divider type="vertical" />
-                <a @click="() => view(row, 1)">编辑</a>
-                <a-divider type="vertical" />
-                <PopconfirmDelete :url="`/api/v1/roles/${row.roleId}`" :cb="refreshTable" />
-            </template>
-        </a-table-column>
-    </my-table>
+    </Table>
 </template>
 
 <script>
 import Form from './form.vue';
-import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+import { Table } from '@/components/table';
 
 export default {
-    components: { Form, PopconfirmDelete },
+    components: { Form, Table },
     data() {
         return {
-            addBtn: { onOk: () => this.$refs['form']?.submit() },
+            buttons: [
+                {
+                    label: this.$t('table.edit'),
+                    click: this.edit,
+                },
+                { type: 'confirm', url: (row) => `/api/v1/roles/${row.roleId}`, after: this.refreshTable },
+            ],
         };
     },
     methods: {
         refreshTable() {
             this.$refs['table']?.getData();
         },
-        view(data, type) {
-            this.$refs['table']?.show({ type, noFooter: type === 2 });
-            this.$nextTick(() => {
-                this.$refs['form'].setData({ ...data }, type);
-            });
+        edit(row) {
+            this.$refs.table.show({ row, title: this.$t('table.edit'), type: 'edit' });
         },
     },
 };

src/pages/system/role/form.vue

 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
-        <a-form-model-item label="角色名称">
-            <a-input v-model="form.roleName" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="角色编码">
-            <a-input v-model="form.roleCode" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="角色说明" prop="remark">
-            <a-input v-model="form.remark" :disabled="isView" />
-        </a-form-model-item>
+    <Wraper :hidden="hidden" :refresh="refresh" :onOk="sumit">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+            <a-form-model-item label="角色名称">
+                <a-input v-model="form.roleName" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="角色编码">
+                <a-input v-model="form.roleCode" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="角色说明" prop="remark">
+                <a-input v-model="form.remark" :disabled="isView" />
+            </a-form-model-item>
 
-        <a-form-model-item label="菜单权限">
-            <MenuTree
-                v-model="checkedKeys"
-                :defaultCheckedKeys="defaultCheckedKeys"
-                showMenu
-                ref="menuTree"
-                :disabled="isView"
-            />
-        </a-form-model-item>
-    </a-form-model>
+            <a-form-model-item label="菜单权限">
+                <MenuTree
+                    v-model="checkedKeys"
+                    :defaultCheckedKeys="defaultCheckedKeys"
+                    showMenu
+                    ref="menuTree"
+                    :disabled="isView"
+                />
+            </a-form-model-item>
+        </a-form-model>
+    </Wraper>
 </template>
 
 <script>
 import MenuTree from '@/components/menu_tree/index.vue';
 import { addRoleApi, getRoleApi, updateRoleApi } from '@/api';
 import FormMixin from '@/components/FormMixin';
+import { WraperMixins } from '@/components/table';
 
 export default {
-    mixins: [FormMixin],
+    mixins: [FormMixin, WraperMixins],
     components: { MenuTree },
     data() {
         return {
@@ -38,11 +41,22 @@ export default {
             defaultCheckedKeys: [],
         };
     },
+    computed: {
+        isEdit() {
+            return this.type === 'edit';
+        },
+    },
+
+    mounted() {
+        if (this.type) {
+            this.getData(this.row.rowId);
+        }
+    },
     methods: {
         submit() {
             const query = {
                 ...this.form,
-                authorityList: this.$refs['menuTree'].get().map(i => ({
+                authorityList: this.$refs['menuTree'].get().map((i) => ({
                     ...i,
                     nodeId: i.menuId,
                     parentNodeId: i.parentMenuId,
@@ -51,14 +65,11 @@ export default {
             };
             return this.isEdit ? updateRoleApi(query) : addRoleApi(query);
         },
-        setData(data, type) {
-            this.getData(data.roleId);
-            this.type = type;
-        },
+
         async getData(id) {
             const res = await getRoleApi(id);
             this.form = res;
-            this.defaultCheckedKeys = res.menuComponentKeys.map(i => parseInt(i.split('-')[0]));
+            this.defaultCheckedKeys = res.menuComponentKeys.map((i) => parseInt(i.split('-')[0]));
         },
     },
 };