优化更新

DjangoAdmin_Flask_AntdVue/zh/volume4/frontend/perm-directive.md

@@ -90,15 +90,15 @@ export function usePermission() {
 ### v-perm（满足任一权限）
 
 ```vue
-<el-button v-perm="['sys:position:add']">添加岗位</el-button>
-<el-button v-perm="['sys:position:batchDelete']">删除</el-button>
-<el-button v-perm="['sys:position:export']">导出</el-button>
+<a-button v-perm="['sys:position:add']">添加岗位</a-button>
+<a-button v-perm="['sys:position:batchDelete']">删除</a-button>
+<a-button v-perm="['sys:position:export']">导出</a-button>
 ```
 
 ### v-perms（满足所有权限）
 
 ```vue
-<el-button v-perms="['sys:user:add', 'sys:user:import']">高级操作</el-button>
+<a-button v-perms="['sys:user:add', 'sys:user:import']">高级操作</a-button>
 ```
 
 ### 与 v-if 结合
@@ -113,7 +113,7 @@ const showAddBtn = computed(() => hasPermission(['sys:position:add']));
 ```
 
 ```vue
-<el-button v-if="showAddBtn">添加岗位</el-button>
+<a-button v-if="showAddBtn">添加岗位</a-button>
 ```
 
 ## 实际用法（position 模块）
@@ -123,52 +123,39 @@ const showAddBtn = computed(() => hasPermission(['sys:position:add']));
 ```vue
 <!-- src/views/system/position/index.vue -->
 <template>
-    <BasicTable :columns="columns" :request="loadDataTable" ref="tableRef" :actionColumn="actionColumn">
+    <BasicTable :columns="columns" :request="loadDataTable" ref="tableRef">
         <template #tableTitle>
-            <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
-                <template #icon><el-icon><PlusOutlined /></el-icon></template>
-                添加岗位
-            </el-button>
-            <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length"
-                v-perm="['sys:position:batchDelete']">
-                <template #icon><el-icon><Delete /></el-icon></template>
-                删除
-            </el-button>
+            <a-space>
+                <a-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+                    <template #icon><PlusOutlined /></template>
+                    新建
+                </a-button>
+                <a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length"
+                    v-perm="['sys:position:batchDelete']">
+                    <template #icon><DeleteOutlined /></template>
+                    删除
+                </a-button>
+            </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+                <a-space>
+                    <a-button type="primary" @click="handleEdit(record.id)" v-perm="['sys:position:update']">
+                        <template #icon><EditOutlined /></template>
+                        编辑
+                    </a-button>
+                    <a-button type="primary" danger @click="handleDelete(record.id)" v-perm="['sys:position:delete']">
+                        <template #icon><DeleteOutlined /></template>
+                        删除
+                    </a-button>
+                </a-space>
+            </template>
         </template>
     </BasicTable>
 </template>
 ```
 
-操作列中的权限控制通过 `auth` 属性实现：
-
-```typescript
-const actionColumn = reactive({
-    width: 200,
-    label: '操作',
-    fixed: 'right',
-    render(record) {
-        return h(TableAction, {
-            style: 'button',
-            actions: [
-                {
-                    label: '编辑',
-                    icon: 'Edit',
-                    type: 'warning',
-                    onClick: handleEdit.bind(null, record),
-                    auth: ['sys:position:update'],  // 权限节点
-                },
-                {
-                    label: '删除',
-                    icon: 'Delete',
-                    type: 'danger',
-                    onClick: handleDelete.bind(null, record),
-                    auth: ['sys:position:delete'],  // 权限节点
-                },
-            ],
-        });
-    },
-});
-```
+操作列中的权限控制通过 `v-perm` 指令实现，与按钮级权限一致。
 
 ## 权限节点命名规范
 
@@ -202,7 +189,7 @@ def add(request: Request, data: PositionForm):
 
 ```vue
 <!-- 前端 -->
-<el-button v-perm="['sys:position:add']">添加岗位</el-button>
+<a-button v-perm="['sys:position:add']">添加岗位</a-button>
 ```
 
 ## 超级管理员