优化更新

2026-09-14 09:44:33 +08:00
parent b3a9e21254
commit 5b8e178970
60 changed files with 1243 additions and 1022 deletions
@@ -1,6 +1,6 @@
 # 前端页面视图

-前端页面视图是用户直接交互的界面。项目使用 Vue3 + ElementPlus + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：
+前端页面视图是用户直接交互的界面。项目使用 Vue3 + AntDesign Vue + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：

 ```
 ui/src/views/system/position/
@@ -19,10 +19,10 @@ ui/src/views/system/position/
 ```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"
@@ -32,30 +32,29 @@ ui/src/views/system/position/
        @selection-change="onSelectionChange"
      >
        <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
-            <template #icon>
-              <el-icon class="el-input__icon">
+          <a-space>
+            <a-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+              <template #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>
+              </template>
+              添加岗位
+            </a-button>
+            <a-button
+              type="primary"
+              danger
+              @click="handleDelete()"
+              :disabled="!selectionData.length"
+              v-perm="['sys:position:batchDelete']"
+            >
+              <template #icon>
+                <DeleteOutlined />
+              </template>
+              删除
+            </a-button>
+          </a-space>
        </template>
      </BasicTable>
-    </el-card>
+    </a-card>

    <editDialog
      v-if="editVisible"
@@ -68,14 +67,14 @@ ui/src/views/system/position/

 <script lang="ts" setup>
  import { reactive, ref, h, nextTick, defineAsyncComponent } from 'vue';
-  import { ColProps } from 'element-plus';
+  import { PlusOutlined, 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);
@@ -140,10 +139,15 @@ ui/src/views/system/position/
   * 注册搜索表单
   */
  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,
  });

@@ -179,8 +183,8 @@ ui/src/views/system/position/
  /**
   * 执行编辑
   */
-  const handleEdit = async (record: Recordable) => {
-    positionId.value = record.row.id;
+  const handleEdit = async (id: number) => {
+    positionId.value = id;
    await nextTick();
    editVisible.value = true;
  };
@@ -188,15 +192,16 @@ ui/src/views/system/position/
  /**
   * 执行删除（单条 + 批量）
   */
-  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?: number) {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除？',
+      onOk: async () => {
+        id ? await positionDelete(id) : await positionBatchDelete(selectionData.value);
+        message.success('删除成功');
+        reloadTable();
+      },
+    });
  }

  /**
@@ -210,7 +215,7 @@ ui/src/views/system/position/

 ### 代码解析

-**页面结构**：`PageWrapper` 包裹两个 `el-card`，上方是搜索表单，下方是数据表格。
+**页面结构**：`PageWrapper` 包裹两个 `a-card`，上方是搜索表单，下方是数据表格。

 **搜索表单**：通过 `useForm` 注册，Schema 从 `querySchemas.ts` 导入。`submitOnReset: true` 表示重置时自动触发查询。

@@ -230,45 +235,49 @@ ui/src/views/system/position/

 ```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']);
@@ -306,7 +315,7 @@ ui/src/views/system/position/
  const handleSubmit = async () => {
    await formRef.value?.validate();
    props.positionId ? await positionUpdate(formData) : await positionAdd(formData);
-    message('操作成功');
+    message.success('操作成功');
    emit('update:visible', false);
    emit('success');
  };
@@ -369,52 +378,50 @@ ui/src/views/system/position/

 ```typescript
 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',
+    title: '岗位名称',
+    dataIndex: 'name',
    minWidth: 100,
  },
  {
-    label: '岗位状态',
-    prop: 'status',
+    title: '岗位状态',
+    dataIndex: 'status',
    minWidth: 100,
-    render(record) {
+    customRender: ({ record }) => {
      return h(
-        ElTag,
+        Tag,
        {
-          type: record.row.status == 1 ? 'success' : 'danger',
-        },
-        {
-          default: () => (record.row.status == 1 ? '正常' : '停用'),
+          color: record.status == 1 ? 'success' : 'error',
        },
+        () => (record.status == 1 ? '正常' : '停用'),
      );
    },
  },
  {
-    label: '排序',
-    prop: 'sort',
+    title: '排序',
+    dataIndex: 'sort',
    minWidth: 100,
  },
  {
-    label: '创建人',
-    prop: 'createUser',
+    title: '创建人',
+    dataIndex: 'createUser',
    minWidth: 100,
  },
  {
-    label: '创建时间',
-    prop: 'createTime',
+    title: '创建时间',
+    dataIndex: 'createTime',
    width: 180,
  },
 ];
@@ -426,7 +433,7 @@ export const columns = [

 **固定列**：`fixed: 'left'` 固定在左侧，`fixed: 'right'` 固定在右侧（操作列）。

-**自定义渲染**：`render(record)` 使用 Vue 的 `h()` 函数创建虚拟 DOM。状态列将 `1/2` 渲染为绿色/红色标签。
+**自定义渲染**：`customRender({ record })` 使用 Vue 的 `h()` 函数创建虚拟 DOM。状态列将 `1/2` 渲染为绿色/红色标签。

 **宽度设置**：
 - `width`：固定宽度
@@ -455,7 +462,7 @@ export const schemas: FormSchema[] = [
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
-      clearable: true,
+      allowClear: true,
      options: [
        {
          label: '正常',
@@ -478,11 +485,11 @@ export const schemas: FormSchema[] = [
 | 字段 | 说明 |
 |:----|:----|
 | `field` | 字段名，与后端查询参数对应 |
-| `component` | 表单组件类型：`Input` / `Select` / `DatePicker` 等 |
+| `component` | 表单组件类型：`Input` / `Select` / `RangePicker` 等 |
 | `label` | 标签文本 |
-| `componentProps` | 组件属性，透传给 ElementPlus 组件 |
+| `componentProps` | 组件属性，透传给 AntDesign Vue 组件 |

-**Select 组件**：`options` 定义下拉选项，`clearable: true` 允许清空选择。
+**Select 组件**：`options` 定义下拉选项，`allowClear: true` 允许清空选择。

 ## 文件关系图