若依框架原有页面功能进行了点位管理模块完整改造（3）

本次点位管理模块改造主要围绕交互体验优化与代码规范展开。通过新增公共分页参数文件实现配置复用；在页面中引入并加载区域、合作商数据，将原有手动输入 ID 的方式统一改为下拉选择框，既降低了操作错误率，又提升了录入与查询效率；同时对表格地址列进行溢出显示优化，使界面展示更加友好规范。

一、新增公共分页参数配置

文件位置：src/api/page.js（新增文件）

改造说明：抽取通用全量查询分页参数，用于下拉框加载全部数据，实现复用。

export const loadAllParams = reactive({ pageNum: 1, pageSize: 10000 });

二、引入依赖接口与公共参数

文件位置：src/views/manage/node/index.vuescript 顶部 import 区域

改造说明：新增区域、合作商接口及公共分页参数引入，为下拉框提供数据支持。

import { listRegion } from "@/api/manage/region"; import { listPartner } from "@/api/manage/partner"; import { loadAllParams } from "@/api/page";

三、定义下拉列表响应式变量

文件位置：src/views/manage/node/index.vuescript 数据定义区域

改造说明：新增区域列表、合作商列表变量，用于存储下拉选项数据。

const regionList = ref([]); const partnerList = ref([]);

四、新增区域数据加载方法

文件位置：src/views/manage/node/index.vuescript 方法定义区域

改造说明：封装加载区域数据方法，调用接口并赋值给下拉数据源。

function getRegionList() { listRegion(loadAllParams).then(response => { regionList.value = response.rows; }); }

五、新增合作商数据加载方法

文件位置：src/views/manage/node/index.vuescript 方法定义区域

改造说明：封装加载合作商数据方法，为下拉选择框提供数据来源。

function getPartnerList() { listPartner(loadAllParams).then(response => { partnerList.value = response.rows; }); }

六、页面初始化加载下拉数据

文件位置：src/views/manage/node/index.vuescript 初始化执行区域

改造说明：在页面加载时调用方法，获取区域与合作商数据。

getPartnerList(); getRegionList();

七、查询条件区域新增所属区域下拉框

文件位置：src/views/manage/node/index.vue顶部查询表单区域

改造说明：将原手动输入区域 ID 改为下拉选择，提升操作便捷性。

<el-form-item label="所属区域"> <el-select v-model="queryParams.regionId" placeholder="请选择所属区域" clearable> <el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item.id" /> </el-select> </el-form-item>

八、查询条件区域新增合作商下拉框

文件位置：src/views/manage/node/index.vue顶部查询表单区域

改造说明：将原手动输入合作商 ID 改为下拉选择，优化查询体验。

<el-form-item label="合作商"> <el-select v-model="queryParams.partnerId" placeholder="请选择合作商" clearable> <el-option v-for="item in partnerList" :key="item.id" :label="item.partnerName" :value="item.id" /> </el-select> </el-form-item>

九、新增 / 编辑表单新增所属区域下拉框

文件位置：src/views/manage/node/index.vue新增 / 编辑弹窗表单区域

改造说明：表单中原区域 ID 输入框替换为下拉选择，避免输入错误。

<el-form-item label="所属区域" prop="regionId"> <el-select v-model="form.regionId" placeholder="请选择所属区域"> <el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item.id" /> </el-select> </el-form-item>

十、新增 / 编辑表单新增合作商下拉框

文件位置：src/views/manage/node/index.vue新增 / 编辑弹窗表单区域

改造说明：表单中原合作商 ID 输入框替换为下拉选择，规范数据录入。

<el-form-item label="合作商" prop="partnerId"> <el-select v-model="form.partnerId" placeholder="请选择合作商"> <el-option v-for="item in partnerList" :key="item.id" :label="item.partnerName" :value="item.id" /> </el-select> </el-form-item>

十一、表格详细地址列优化

文件位置：src/views/manage/node/index.vue表格列区域

改造说明：添加溢出提示属性，解决地址内容过长显示不全问题。

<el-table-column label="详细地址" align="left" prop="address" show-overflow-tooltip />