签入版本

DjangoAdmin_Tornado_AntdVue/zh/volume4/frontend/view.md

@@ -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,30 @@ src/views/
         @selection-change="onSelectionChange"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+          <a-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
+          </a-button>
+          <a-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-button>
         </template>
       </BasicTable>
-    </el-card>
+    </a-card>
 
     <editDialog
       v-if="editVisible"
@@ -93,7 +93,7 @@ src/views/
 
 <script lang="ts" setup>
   import { reactive, ref, h, nextTick, defineAsyncComponent } from 'vue';
-  import { ColProps } from 'element-plus';
+  import { ColProps } from 'ant-design-vue';
   import { schemas } from './querySchemas';
   import { useForm } from '@/components/Form/index';
   import { TableAction } from '@/components/Table';
@@ -245,41 +245,41 @@ src/views/
 ```vue
 <!-- src/views/system/position/edit.vue -->
 <template>
-  <el-dialog
+  <a-modal
     v-model="props.visible"
     :title="props.positionId ? '编辑' : '新增'"
     width="500"
-    :close-on-click-modal="false"
-    :before-close="dialogClose"
+    :mask-closable="false"
+    
   >
-    <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: '80px' } }">
+      <a-form-item
         label="岗位名称"
         prop="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 class="ls-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';
@@ -375,7 +375,7 @@ 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 = [
   {
@@ -398,7 +398,7 @@ export const columns = [
     minWidth: 100,
     render(record) {
       return h(
-        ElTag,
+        Tag,
         {
           type: record.row.status == 1 ? 'success' : 'danger',
         },
@@ -446,7 +446,7 @@ export const schemas: FormSchema[] = [
     label: '状态',
     componentProps: {
       placeholder: '请选择状态',
-      clearable: true,
+      allowClear: true,
       options: [
         {
           label: '正常',