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

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

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

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

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

复制代码

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

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

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

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

复制代码

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

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

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

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

复制代码

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

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

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

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

复制代码

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

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

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

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

复制代码

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

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

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

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

复制代码

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
/>