refactor(organization): 将所属组织搜索组件统一替换为级联选择器

- 全站搜索栏所属组织由树形下拉 (el-tree-select) 统一替换为级联选择器 (el-cascader) - 修改多个视图和组件中所属组织相关表单与搜索逻辑，适配级联选择器数据结构 - 组织数据结构调整及新增 findOrgPath、findDeptPath 等方法支持路径反查与回显 - 表单模型与搜索参数中所属组织字段改用 ID 路径数组，提交时转换为名称 - 优化所属组织搜索UI，统一清除、过滤、提示等功能样式和行为 - 引入 organization-search mixin 支持组织数据加载、路径转换及搜索参数格式化 - 更新相关依赖组件 Element Plus 引入 ElCascader 替换 ElTreeSelect - 修正搜索表单CSS，新增el-cascader全宽样式支持搜索栏布局一致性 - 兼容老数据，支持多种部门ID格式自动转换到单选路径数组格式 - 业务部门与承办部门表单同样应用级联选择器及路径转换逻辑 - 相关搜索配置项所属组织字段类型由 input 改为 cascader，提升搜索交互体验
2026-08-31 12:19:18 +08:00
parent 3a08e12c65
commit 9b9e652afd
26 changed files with 515 additions and 192 deletions
@@ -27,6 +27,16 @@
                :value="item.value"
              />
            </el-select>
+            <el-cascader
+              v-else-if="field.type === 'cascader'"
+              v-model="query[field.prop]"
+              :options="organizationTreeOptions"
+              :props="organizationCascaderProps"
+              clearable
+              filterable
+              style="width: 100%"
+              placeholder="请选择"
+            />
            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
          </el-form-item>
          <div class="formal-page__search-actions">
@@ -168,6 +178,7 @@ import {
  invoiceStatusOptions,
  paymentStatusOptions,
 } from '@/option/settlement/formalSettlementSearch';
+import organizationSearch from '@/mixins/organization-search';
 import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
 import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
@@ -176,7 +187,7 @@ const emptyQuery = () => ({
  formalSettlementNo: '',
  preSettlementNo: '',
  projectName: '',
-  deptName: '',
+  deptName: [],
  contractNo: '',
  payerName: '',
  payeeName: '',
@@ -190,6 +201,7 @@ const emptyQuery = () => ({
 export default {
  name: 'FormalSettlement',
  components: { FormalSettlementEditor, FormalSettlementTablePanel },
+  mixins: [organizationSearch],
  data() {
    return {
      ArrowDown,
@@ -231,6 +243,7 @@ export default {
    },
  },
  mounted() {
+    this.loadOrganizationOptions();
    this.loadTable();
    this.openRouteDetail();
  },
@@ -517,7 +530,8 @@ export default {
      XLSX.writeFile(workbook, `正式结算单${this.$dayjs().format('YYYY-MM-DD HH-mm-ss')}.xlsx`);
    },
    buildQueryParams() {
-      const params = { ...this.query };
+      // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+      const params = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
      params.settlementType = this.activeSettlementType;
      const range = params.createDateRange || [];
      delete params.createDateRange;
@@ -29,6 +29,16 @@
                  :value="item.value"
                />
              </el-select>
+              <el-cascader
+                v-else-if="field.type === 'cascader'"
+                v-model="query[field.prop]"
+                :options="organizationTreeOptions"
+                :props="organizationCascaderProps"
+                clearable
+                filterable
+                style="width: 100%"
+                placeholder="请选择"
+              />
              <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
            </el-form-item>
          </template>
@@ -280,6 +290,7 @@ import {
  voidBill,
 } from '@/api/settlement/preSettlement';
 import { preSettlementSearchFields } from '@/option/settlement/preSettlementSearch';
+import organizationSearch from '@/mixins/organization-search';
 import { preSettlementTableColumns } from '@/option/settlement/preSettlementTable';
 import { createSettlementTransfer } from '@/utils/settlement-transfer';
 import { downloadFile } from '@/utils/util';
@@ -289,7 +300,7 @@ const emptyQuery = () => ({
  preSettlementNo: '',
  advanceNo: '',
  projectName: '',
-  deptName: '',
+  deptName: [],
  contractName: '',
  contractNo: '',
  payeeName: '',
@@ -301,6 +312,7 @@ const emptyQuery = () => ({
 export default {
  name: 'PreSettlement',
  components: { PreSettlementEditor },
+  mixins: [organizationSearch],
  data() {
    return {
      ArrowDown,
@@ -354,6 +366,7 @@ export default {
    },
  },
  created() {
+    this.loadOrganizationOptions();
    this.loadTable();
    this.openRouteDetail();
  },
@@ -374,8 +387,10 @@ export default {
    },
    buildQuery() {
      const range = this.query.createDateRange || [];
+      // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+      const query = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
      return {
-        ...this.query,
+        ...query,
        createDateRange: undefined,
        createStartDate: range[0],
        createEndDate: range[1],
@@ -15,6 +15,16 @@
                start-placeholder="年/月/日"
                end-placeholder="年/月/日"
              />
+              <el-cascader
+                v-else-if="field.type === 'cascader'"
+                v-model="query[field.prop]"
+                :options="organizationTreeOptions"
+                :props="organizationCascaderProps"
+                clearable
+                filterable
+                style="width: 100%"
+                placeholder="请选择"
+              />
              <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
            </el-form-item>
          </template>
@@ -627,8 +637,10 @@ import { exportBlob } from '@/api/common';
 import { getDictionary } from '@/api/system/dictbiz';
 import { downloadXls } from '@/utils/util';
 import { createSettlementTransfer } from '@/utils/settlement-transfer';
+import organizationSearch from '@/mixins/organization-search';

 export default {
+  mixins: [organizationSearch],
  props: {
    settlementType: {
      type: String,
@@ -755,6 +767,7 @@ export default {
    },
  },
  mounted() {
+    this.loadOrganizationOptions();
    this.loadTransportTypeOptions();
    this.loadCargoTypeOptions();
    this.loadPriceUnitOptions();
@@ -937,11 +950,15 @@ export default {
      this.tableFeeItemNames = [];
      try {
        const params = this.buildRequestParams(
-          this.normalizeQuery(
-            this.query,
-            'generateDateRange',
-            'generateStartDate',
-            'generateEndDate'
+          // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+          this.normalizeOrganizationSearch(
+            this.normalizeQuery(
+              { ...this.query },
+              'generateDateRange',
+              'generateStartDate',
+              'generateEndDate'
+            ),
+            'deptName'
          )
        );
        const res = await api.getList(this.page.current, this.page.size, params);
@@ -25,6 +25,16 @@
                :label="item.label"
                :value="item.value"
            /></el-select>
+            <el-cascader
+              v-else-if="field.type === 'cascader'"
+              v-model="query[field.prop]"
+              :options="organizationTreeOptions"
+              :props="organizationCascaderProps"
+              clearable
+              filterable
+              style="width: 100%"
+              placeholder="请选择"
+            />
            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
          </el-form-item>
          <div class="settlement-adjustment-page__search-actions">
@@ -159,6 +169,7 @@ import { ArrowDown, ArrowUp, Refresh } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/settlement/settlementAdjustment';
 import { settlementAdjustmentSearchFields } from '@/option/settlement/settlementAdjustmentSearch';
+import organizationSearch from '@/mixins/organization-search';
 import { settlementAdjustmentTableColumns } from '@/option/settlement/settlementAdjustmentTable';
 import SettlementAdjustmentEditor from './components/settlement-adjustment-editor.vue';

@@ -167,7 +178,7 @@ const emptyQuery = () => ({
  createDateRange: [],
  customerName: '',
  projectName: '',
-  deptName: '',
+  deptName: [],
  formalSettlementNo: '',
  settlementType: '',
  approvalStatus: '',
@@ -175,6 +186,7 @@ const emptyQuery = () => ({
 export default {
  name: 'SettlementAdjustment',
  components: { SettlementAdjustmentEditor },
+  mixins: [organizationSearch],
  data: () => ({
    ArrowDown,
    ArrowUp,
@@ -199,6 +211,7 @@ export default {
    },
  },
  created() {
+    this.loadOrganizationOptions();
    this.loadTable();
  },
  methods: {
@@ -210,7 +223,8 @@ export default {
      try {
        const range = this.query.createDateRange || [];
        const { data } = await api.getList(this.page.current, this.page.size, {
-          ...this.query,
+          // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+          ...this.normalizeOrganizationSearch({ ...this.query }, 'deptName'),
          createDateRange: undefined,
          createStartDate: range[0],
          createEndDate: range[1],
@@ -17,6 +17,16 @@
                :value="item.value"
              />
            </el-select>
+            <el-cascader
+              v-else-if="field.type === 'cascader'"
+              v-model="query[field.prop]"
+              :options="organizationTreeOptions"
+              :props="organizationCascaderProps"
+              clearable
+              filterable
+              style="width: 100%"
+              placeholder="请选择"
+            />
            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
          </el-form-item>
        </div>
@@ -87,6 +97,7 @@ import * as XLSX from 'xlsx';
 import * as api from '@/api/settlement/transportReconciliation';
 import { transportReconciliationSearchFields } from '@/option/settlement/transportReconciliationSearch';
 import { transportReconciliationTableColumns } from '@/option/settlement/transportReconciliationTable';
+import organizationSearch from '@/mixins/organization-search';
 import TransportReconciliationEditor from './components/transport-reconciliation-editor.vue';
 import TransportReconciliationTablePanel from './components/transport-reconciliation-table-panel.vue';

@@ -94,7 +105,7 @@ const emptyQuery = () => ({
  reconciliationNo: '',
  preSettlementNos: '',
  projectName: '',
-  deptName: '',
+  deptName: [],
  contractNo: '',
  payerName: '',
  payeeName: '',
@@ -105,6 +116,7 @@ const emptyQuery = () => ({
 export default {
  name: 'TransportReconciliation',
  components: { TransportReconciliationEditor, TransportReconciliationTablePanel },
+  mixins: [organizationSearch],
  data() {
    return {
      ArrowDown,
@@ -129,6 +141,7 @@ export default {
    },
  },
  mounted() {
+    this.loadOrganizationOptions();
    this.loadTable();
  },
  methods: {
@@ -139,7 +152,8 @@ export default {
      this.loading = true;
      try {
        const response = await api.getList(this.page.current, this.page.size, {
-          ...this.query,
+          // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+          ...this.normalizeOrganizationSearch({ ...this.query }, 'deptName'),
          settlementType: this.settlementType,
        });
        const data = response?.data?.data || response?.data || response || {};