优化更新

This commit is contained in:
2026-09-13 18:12:07 +08:00
parent 7f758cc6e9
commit d7a081e8b7
92 changed files with 2429 additions and 1117 deletions
@@ -145,16 +145,17 @@ def update_category(request):
### 树形选择组件
分类选择通常使用 el-tree-select 组件:
分类选择通常使用 n-tree-select 组件:
```vue
<template>
<el-tree-select
v-model="form.category_id"
:data="categoryTree"
:props="{ label: 'categoryName', value: 'id' }"
<n-tree-select
v-model:value="form.category_id"
:options="categoryTree"
label-field="categoryName"
key-field="id"
placeholder="请选择分类"
check-strictly
check-strategy="all"
/>
</template>
```
@@ -166,9 +167,9 @@ def update_category(request):
```vue
<template>
<BasicTable :data="categoryTree" row-key="id" default-expand-all>
<el-table-column prop="categoryName" label="分类名称" />
<el-table-column prop="categoryCode" label="分类编码" />
<el-table-column prop="sort" label="排序" />
<n-table-column title="分类名称" field="categoryName" />
<n-table-column title="分类编码" field="categoryCode" />
<n-table-column title="排序" field="sort" />
</BasicTable>
</template>
```
@@ -178,11 +179,11 @@ def update_category(request):
支持拖拽调整分类层级和顺序:
```vue
<el-tree
<n-tree
:data="categoryTree"
draggable
allow-drop="allowDrop"
@node-drop="handleDrop"
:allow-drop="allowDrop"
@drop="handleDrop"
/>
```
@@ -197,5 +198,5 @@ def update_category(request):
4. 排序控制:sort 字段控制分类显示顺序
5. 删除校验:删除前检查子级,保证数据完整性
6. 循环引用校验:更新时防止 A→B→C→A 死循环
7. 前端集成:el-tree-select、树形表格、拖拽排序
7. 前端集成:n-tree-select、树形表格、拖拽排序
```
@@ -190,12 +190,16 @@ def delete_cities(city_ids):
## 前端级联选择
前端使用 `el-cascader` 组件实现省市区三级联动选择:
前端使用 `ChinaArea` 组件或 `n-cascader` 实现省市区三级联动选择:
```vue
<el-cascader
v-model="selectedRegion"
:props="cascaderProps"
<!-- 推荐使用项目内置的 ChinaArea 组件 -->
<ChinaArea v-model="formData.cityCode" :type="3" @change="handleCityChange" />
<!-- 或使用 NaiveUI 的 n-cascader -->
<n-cascader
v-model:value="selectedRegion"
:options="regionOptions"
placeholder="请选择省/市/区"
/>
@@ -237,7 +241,7 @@ python manage.py migrate
1. 五级行政区划:省/市/区/街道/社区,通过 parent_code 形成树形结构
2. 丰富字段:含经纬度、拼音、邮编等信息
3. 用户关联:用户表通过四级编码关联城市表
4. 级联选择:前端通过 el-cascader 组件实现级联选择
4. 级联选择:前端通过 ChinaArea 组件或 n-cascader 实现级联选择
5. 删除校验:删除前检查子级,保证数据完整性
6. 批量导入:内置全国行政区划数据
```
@@ -209,7 +209,7 @@ application/notice/ application/link/
<BasicForm @register="registerSearch" />
<BasicTable @register="registerTable">
<template #tableTitle>
<el-button type="primary" @click="handleAdd">新增链接</el-button>
<n-button type="primary" @click="handleAdd">新增链接</n-button>
</template>
</BasicTable>
</PageWrapper>