优化更新

2026-09-14 09:44:33 +08:00
parent b3a9e21254
commit 5b8e178970
60 changed files with 1243 additions and 1022 deletions
@@ -32,7 +32,7 @@ src/views/
 | 文件 | 职责 | 说明 |
 |------|------|------|
 | `index.vue` | 列表页 | 搜索表单 + 工具栏 + BasicTable + 编辑弹窗引用 |
-| `edit.vue` | 编辑弹窗 | el-dialog + el-form，懒加载 |
+| `edit.vue` | 编辑弹窗 | a-modal + a-form，懒加载 |
 | `columns.ts` | 表格列定义 | 定义列 prop、label、render 函数等 |
 | `querySchemas.ts` | 搜索表单定义 | FormSchema 数组，定义搜索字段 |

@@ -44,10 +44,10 @@ 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"
@@ -57,30 +57,29 @@ src/views/
        @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"
@@ -93,14 +92,14 @@ src/views/

 <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);
@@ -167,10 +166,15 @@ 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,
  });

@@ -205,27 +209,28 @@ src/views/

  /**
   * 执行编辑
-   * @param record 参数
+   * @param id 参数
   */
-  const handleEdit = async (record: Recordable) => {
-    positionId.value = record.row.id;
+  const handleEdit = async (id: number) => {
+    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?: number) {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除？',
+      onOk: async () => {
+        id ? await positionDelete(id) : await positionBatchDelete(selectionData.value);
+        message.success('删除成功');
+        reloadTable();
+      },
+    });
  }

  /**
@@ -245,44 +250,48 @@ 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 +329,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 +365,6 @@ src/views/
    }
  });
 </script>
-
-</script>
 ```

 ## 数据流
@@ -375,52 +382,50 @@ 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',
+    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,
  },
 ];
@@ -446,7 +451,7 @@ export const schemas: FormSchema[] = [
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
-      clearable: true,
+      allowClear: true,
      options: [
        {
          label: '正常',
@@ -463,7 +468,7 @@ 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 动态获取。
 :::

 ## 总结