生成时间: 2026-08-03 · 数据来源: xnybw平台需求及工作计划.xlsx(南网在线绿能云缺陷跟踪表)· 仅针对 backup730/730backup 分支代码

Row 41:"关联规划项目"弹窗数据没有根据项目类型进行筛选

中等 2.1.待开发 全部类型 模块:项目信息填报 处理人:待指派

1基本信息

问题描述项目基本信息表单页面的"关联规划项目"按钮,弹窗页面的数据没有根据类型进行筛选。
所属模块项目信息填报
严重程度中等
涉及类型全部类型
提出人刘向诚
处理人 / 状态待指派 / 2.1.待开发
建议处理方式按照项目类型对规划项目库进行级联筛选(工作计划中原文备注)

2问题截图

关联规划项目弹窗类型未筛选
图1:当前正在编辑的是"新型储能"项目,弹出的"关联规划项目"列表里"类型"列却混杂了陆上风电、光伏发电、电网侧储能等各种类型;顶部"类型"筛选框是空白输入框,不是可选下拉

3旧代码定位(backup730 分支)

弹窗组件:xnybw5f · src/views/projectNew/components/baseInfo/dialog/planRelationSelector.vue

第 26-27 行,"类型"筛选项是裸文本输入框,没有下拉选项、也没有绑定字典:

<el-form-item label="类型:" class="el-form-item--reset" prop="type" label-width="100px">
  <el-input v-model="searchForm.type" clearable maxlength="50" />
</el-form-item>
<!-- 对比同一表单里"省份""地市""电压等级"都是正经的 el-select + 字典下拉 -->

第 340-349 行,searchForm 初始值里压根没有 type 字段,且组件 props 只接收一个 timestamp,没有任何渠道能拿到"当前正在编辑的项目类型":

data() {
  return {
    ...
    searchForm: { pageNum: 1, pageSize: 20, municipal: [] },   // 没有 type 字段的默认值
  }
},
props: { timestamp: '' },   // 只有 timestamp,父组件无法传入项目类型

调用方 src/views/projectNew/components/baseInfo/components/baseInfo.vue 第 313 行:

<plan-relation-selector v-if="relationTimestamp" ref="relationDiaLog"
  :timestamp="relationTimestamp" @checkReplationData="checkReplationData" />
<!-- 没有传入 :type 或 :project-type,弹窗完全不知道当前项目是"新型储能"还是"陆上风电" -->
根因说明:"关联规划项目"弹窗组件与父组件(项目基本信息表单)之间没有建立类型传递通道——弹窗只接收一个用于触发刷新的 timestamp prop,父组件从未告诉它"我现在是什么类型的项目";弹窗自身的"类型"筛选控件又是一个自由文本框(既没有下拉选项列表,也没有默认值),需要用户手动输入精确匹配的类型文案才能筛选。两个问题叠加导致:默认打开时不做任何类型过滤(展示全部 6478 条规划项目),用户也没有便捷的方式按类型筛选。

4修复方案

第一步:父组件在打开弹窗时把当前项目类型传进去。修改 baseInfo.vue / baseInfoXXCN.vue 等所有引用 plan-relation-selector 的地方:
<plan-relation-selector v-if="relationTimestamp" ref="relationDiaLog"
  :timestamp="relationTimestamp" :project-type="form.type || '新型储能'"
  @checkReplationData="checkReplationData" />
第二步:弹窗组件 planRelationSelector.vue 接收该 prop,并把"类型"筛选控件从裸文本框改为下拉选择(复用现有 voltageOptions 一类字典写法),默认值取父组件传入的项目类型:
props: {
  timestamp: '',
  projectType: { type: String, default: '' },
},
data() {
  return {
    ...
    typeOptions: [], // 从字典接口获取,与规划项目库"类型"字段的取值对齐
    searchForm: { pageNum: 1, pageSize: 20, municipal: [], type: '' },
  }
},
watch: {
  timestamp() {
    this.searchForm.type = this.projectType || ''   // 弹窗打开时默认按当前项目类型筛选
    this.selectRelation = {}
    this._getProvinceAndMunicipalList()
    this._getDataList()
    window.addEventListener('resize', this.resizeEvent, false)
  }
},
<!-- 模板:文本框改为下拉,保留可清空以支持"查看全部类型"的场景 -->
<el-form-item label="类型:" class="el-form-item--reset" prop="type" label-width="100px">
  <el-select v-model="searchForm.type" clearable placeholder="请选择类型">
    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</el-form-item>
第三步:确认 _getDataList() 请求参数中把 searchForm.type 一并传给后端规划项目查询接口(若后端接口尚未支持按类型过滤,需同步在查询规划项目列表的接口/SQL 中补充 type 过滤条件)。
效果:弹窗默认只展示与当前项目类型一致的规划项目(如新型储能项目默认只看电网侧储能/独立储能等规划记录),并允许用户手动切换类型下拉做进一步筛选,避免在 6000+ 条规划项目里人工翻找。