优化更新

DjangoAdmin_Flask_AntdVue/zh/volume4/frontend/view.md

@@ -9,21 +9,21 @@
 ```
 src/views/
 ├── system/
-│ ├── position/
-│ │ ├── index.vue       # 岗位列表页
-│ │ ├── edit.vue        # 岗位编辑弹窗
-│ │ ├── columns.ts      # 表格列定义
-│ │ └── querySchemas.ts # 搜索表单定义
-│ ├── user/
-│ │ ├── index.vue
-│ │ └── edit.vue
-│ ├── role/
-│ │ ├── index.vue
-│ │ └── edit.vue
-│ └── ...
+│   ├── position/
+│   │   ├── index.vue       # 岗位列表页
+│   │   ├── edit.vue        # 岗位编辑弹窗
+│   │   ├── columns.ts      # 表格列定义
+│   │   └── querySchemas.ts # 搜索表单定义
+│   ├── user/
+│   │   ├── index.vue
+│   │   └── edit.vue
+│   ├── role/
+│   │   ├── index.vue
+│   │   └── edit.vue
+│   └── ...
 ├── cms/
-│ ├── article/
-│ └── ...
+│   ├── article/
+│   └── ...
 └── ...
 ```
 
@@ -32,8 +32,8 @@ src/views/
 | 文件 | 职责 | 说明 |
 |------|------|------|
 | `index.vue` | 列表页 | 搜索表单 + 工具栏 + BasicTable + 编辑弹窗引用 |
-| `edit.vue` | 编辑弹窗 | el-dialog + el-form，懒加载 |
-| `columns.ts` | 表格列定义 | 定义列 prop、label、render 函数等 |
+| `edit.vue` | 编辑弹窗 | a-modal + a-form，懒加载 |
+| `columns.ts` | 表格列定义 | 定列 dataIndex、title、customRender 函数等 |
 | `querySchemas.ts` | 搜索表单定义 | FormSchema 数组，定义搜索字段 |
 
 ## index.vue 列表页
@@ -44,43 +44,51 @@ src/views/
 <!-- src/views/system/position/index.vue -->
 <template>
   <PageWrapper>
-    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+    <a-card :bordered="false" class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
-    </el-card>
-    <el-card :bordered="false" class="proCard">
+    </a-card>
+    <a-card :bordered="false" class="proCard">
       <BasicTable
         :columns="columns"
         :request="loadDataTable"
         :row-key="(row) => row.id"
         ref="tableRef"
-        :actionColumn="actionColumn"
-        @selection-change="onSelectionChange"
+        scroll-x="1200"
+        :row-selection="{ onChange: onSelectionChange }"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
-            <template #icon>
-              <el-icon class="el-input__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 class="el-input__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>
-    </el-card>
+    </a-card>
 
     <editDialog
       v-if="editVisible"
@@ -92,15 +100,14 @@ src/views/
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, h, nextTick, defineAsyncComponent } from 'vue';
-  import { ColProps } from 'element-plus';
+  import { reactive, ref, nextTick, defineAsyncComponent } from 'vue';
+  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { schemas } from './querySchemas';
   import { useForm } from '@/components/Form/index';
-  import { TableAction } from '@/components/Table';
   import { getPositionList, positionDelete, positionBatchDelete } from '@/api/system/position';
   import { columns } from './columns';
-  import { PlusOutlined } from '@vicons/antd';
-  import { message, confirm } from '@/utils/auth';
+  import { Modal, message } from 'ant-design-vue';
+
   const editDialog = defineAsyncComponent(() => import('./edit.vue'));
   const positionId = ref(0);
   const editVisible = ref(false);
@@ -115,42 +122,11 @@ src/views/
     status: '',
   });
 
-  /**
-   * 定义操作栏
-   */
-  const actionColumn = reactive({
-    width: 200,
-    label: '操作',
-    prop: 'action',
-    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'],
-          },
-        ],
-      });
-    },
-  });
-
   /**
    * 加载数据列表
    * @param res 参数
    */
-  const loadDataTable = async (res: any) => {
+  const loadDataTable = async (res) => {
     const result = await getPositionList({ ...formParams, ...res });
     return result;
   };
@@ -167,18 +143,25 @@ src/views/
    * 注册
    */
   const [register, {}] = useForm({
-    labelWidth: 80,
-    layout: 'horizontal',
-    colProps: { span: 6 } as ColProps,
-    submitOnReset: true,
+    rowProps: { gutter: [16, 0] },
+    colProps: {
+      xs: 24,
+      sm: 24,
+      md: 12,
+      lg: 8,
+      xl: 6,
+    },
+    labelCol: { span: 6, offset: 0 },
     schemas,
   });
 
   /**
    * 执行提交表单
    */
-  function handleSubmit(values: Recordable) {
-    handleReset();
+  function handleSubmit(values) {
+    for (const key in formParams) {
+      formParams[key] = '';
+    }
     for (const key in values) {
       formParams[key] = values[key];
     }
@@ -192,6 +175,7 @@ src/views/
     for (const key in formParams) {
       formParams[key] = '';
     }
+    reloadTable();
   }
 
   /**
@@ -205,27 +189,28 @@ src/views/
 
   /**
    * 执行编辑
-   * @param record 参数
+   * @param id 参数
    */
-  const handleEdit = async (record: Recordable) => {
-    positionId.value = record.row.id;
+  async function handleEdit(id) {
+    positionId.value = id;
     await nextTick();
     editVisible.value = true;
-  };
+  }
 
   /**
    * 执行删除
-   * @param record 参数
+   * @param id 参数
    */
-  async function handleDelete(record: Recordable) {
-    let ids = [];
-    if (!record) {
-      ids = selectionData.value.map(({ id }) => id);
-    }
-    await confirm('确定要删除？');
-    record ? await positionDelete(record.row.id) : await positionBatchDelete(ids);
-    message('删除成功');
-    reloadTable();
+  async function handleDelete(id) {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除？',
+      onOk: async () => {
+        id ? await positionDelete(id) : await positionBatchDelete(selectionData.value);
+        message.success('删除成功');
+        reloadTable();
+      },
+    });
   }
 
   /**
@@ -237,7 +222,7 @@ src/views/
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
 ```
 
 ## edit.vue 编辑弹窗
@@ -245,44 +230,43 @@ src/views/
 ```vue
 <!-- src/views/system/position/edit.vue -->
 <template>
-  <el-dialog
-    v-model="props.visible"
+  <a-modal
+    v-model:visible="props.visible"
     :title="props.positionId ? '编辑' : '新增'"
-    width="500"
-    :close-on-click-modal="false"
-    :before-close="dialogClose"
+    width="500px"
+    @cancel="dialogClose"
   >
-    <el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
-      <el-form-item
+    <a-form class="ls-form" ref="formRef" :model="formData" :label-col="{ style: { width: '85px' } }">
+      <a-form-item
         label="岗位名称"
-        prop="name"
+        name="name"
         :rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
       >
-        <el-input class="ls-input" v-model="formData.name" placeholder="请输入岗位名称" clearable />
-      </el-form-item>
-      <el-form-item label="岗位状态" prop="status">
-        <el-radio-group v-model="formData.status" name="status">
-          <el-radio :value="1">正常</el-radio>
-          <el-radio :value="2">停用</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input-number v-model="formData.sort" />
-      </el-form-item>
-    </el-form>
+        <a-input v-model:value="formData.name" placeholder="请输入岗位名称" allow-clear />
+      </a-form-item>
+      <a-form-item label="岗位状态" name="status">
+        <a-radio-group v-model:value="formData.status" name="status">
+          <a-radio :value="1">正常</a-radio>
+          <a-radio :value="2">停用</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="formData.sort" />
+      </a-form-item>
+    </a-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogClose">取消</el-button>
-        <el-button :loading="subLoading" type="primary" @click="submit"> 确定 </el-button>
+        <a-button @click="dialogClose">取消</a-button>
+        <a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
       </span>
     </template>
-  </el-dialog>
+  </a-modal>
 </template>
 <script lang="ts" setup>
-  import type { FormInstance } from 'element-plus';
+  import type { FormInstance } from 'ant-design-vue';
   import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/position';
   import { onMounted, reactive, shallowRef } from 'vue';
-  import { message } from '@/utils/auth';
+  import { message } from 'ant-design-vue';
   import { useLockFn } from '@/utils/useLockFn';
 
   const emit = defineEmits(['success', 'update:visible']);
@@ -320,7 +304,7 @@ src/views/
   const handleSubmit = async () => {
     await formRef.value?.validate();
     props.positionId ? await positionUpdate(formData) : await positionAdd(formData);
-    message('操作成功');
+    message.success('操作成功');
     emit('update:visible', false);
     emit('success');
   };
@@ -356,8 +340,6 @@ src/views/
     }
   });
 </script>
-
-</script>
 ```
 
 ## 数据流
@@ -367,7 +349,7 @@ src/views/
 用户搜索 → handleSubmit → 更新 formParams → reloadTable → 重新请求
 用户新增 → handleAdd → positionId=0 → editVisible=true → edit.vue 加载 → 表单填写 → 提交
 用户编辑 → handleEdit → positionId=id → editVisible=true → edit.vue 加载详情 → 修改 → 提交
-用户删除 → confirm → API → reloadTable
+用户删除 → Modal.confirm → API → reloadTable
 ```
 
 ## columns.ts
@@ -375,54 +357,54 @@ src/views/
 ```typescript
 // src/views/system/position/columns.ts
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { Tag } from 'ant-design-vue';
 
 export const columns = [
   {
-    type: 'selection',
-  },
-  {
-    label: 'ID',
-    prop: 'id',
+    title: 'ID',
+    dataIndex: 'id',
     fixed: 'left',
     width: 50,
   },
   {
-    label: '岗位名称',
-    prop: 'name',
-    minWidth: 100,
+    title: '岗位名称',
+    dataIndex: 'name',
+    width: 100,
   },
   {
-    label: '岗位状态',
-    prop: 'status',
-    minWidth: 100,
-    render(record) {
+    title: '岗位状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender({ record }) {
       return h(
-        ElTag,
-        {
-          type: record.row.status == 1 ? 'success' : 'danger',
-        },
-        {
-          default: () => (record.row.status == 1 ? '正常' : '停用'),
-        },
+        Tag,
+        { color: record.status == 1 ? 'success' : 'error' },
+        { default: () => (record.status == 1 ? '正常' : '停用') },
       );
     },
   },
   {
-    label: '排序',
-    prop: 'sort',
-    minWidth: 100,
+    title: '排序',
+    dataIndex: 'sort',
+    width: 100,
   },
   {
-    label: '创建人',
-    prop: 'createUser',
-    minWidth: 100,
+    title: '创建人',
+    dataIndex: 'createUser',
+    width: 100,
   },
   {
-    label: '创建时间',
-    prop: 'createTime',
+    title: '创建时间',
+    dataIndex: 'createTime',
     width: 180,
   },
+  {
+    title: '操作',
+    fixed: 'right',
+    dataIndex: 'action',
+    key: 'action',
+    width: 200,
+  },
 ];
 ```
 
@@ -433,7 +415,7 @@ export const columns = [
 import { FormSchema } from '@/components/Form/index';
 export const schemas: FormSchema[] = [
   {
-    field: 'name',
+    name: 'name',
     component: 'Input',
     label: '岗位名称',
     componentProps: {
@@ -441,7 +423,7 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'status',
+    name: 'status',
     component: 'Select',
     label: '状态',
     componentProps: {
@@ -463,9 +445,9 @@ export const schemas: FormSchema[] = [
 ```
 
 :::tip 温馨提示
-`columns.ts` 和 `querySchemas.ts` 独立为配置文件，便于维护和复用。`columns` 中的 `render` 函数使用 Vue 的 `h()` 创建虚拟 DOM，可实现任意复杂的自定义渲染。`querySchemas` 中的 `options` 硬编码或通过字典 API 动态获取。
+`columns.ts` 和 `querySchemas.ts` 独立为配置文件，便于维护和复用。`columns` 中的 `customRender` 函数使用 Vue 的 `h()` 创建虚拟 DOM，可实现任意复杂的自定义渲染。`querySchemas` 中的 `options` 硬编码或通过字典 API 动态获取。
 :::
 
 ## 总结
 
-页面视图遵循 `index.vue` + `edit.vue` + `columns.ts` + `querySchemas.ts` 标准模式。列表页使用 `BasicForm` 搜索 + `BasicTable` 展示数据 + `TableAction` 操作按钮，编辑弹窗使用 `defineAsyncComponent` 懒加载 + `useLockFn` 防重复提交。数据流清晰：搜索更新参数 → 刷新表格，操作成功 → emit 事件 → 刷新表格。
+页面视图遵循 `index.vue` + `edit.vue` + `columns.ts` + `querySchemas.ts` 标准模式。列表页使用 `BasicForm` 搜索 + `BasicTable` 展示数据 + `bodyCell` 插槽操作按钮，编辑弹窗使用 `defineAsyncComponent` 懒加载 + `useLockFn` 防重复提交。数据流清晰：搜索更新参数 → 刷新表格，操作成功 → emit 事件 → 刷新表格。