kd-aiot-frontend-eom/src/views/purchasingManage/supplierManage/components/parentList.vue

<template>
  <el-dialog
    title="选择供应商"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-card shadow="never">
      <contact-search :fields="searchFields" @search="reload"></contact-search>

      <ele-split-layout
        :width="treeWidth"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div
          v-if="showCategoryTree"
          class="ele-border-lighter split-layout-right-content"
        >
          <AssetTree
            @handleNodeClick="handleNodeClick"
            id="19"
            :isFirstRefreshTable="false"
            ref="treeList"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            row-key="id"
            height="calc(100vh - 450px)"
            class="dict-table"
            @cell-click="cellClick"
          
            @header-dragend="handleHeaderDragend">
            <!-- 表头工具栏 -->
            <template v-slot:action="{ row }">
              <el-radio class="radio" v-model="radio" :label="row.id"
                ><i></i
              ></el-radio>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>

    <div slot="footer">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { contactPageUsages } from '@/api/saleManage/contact';
  import ContactSearch from './contactSearch.vue';
  import AssetTree from '@/components/AssetTree';
import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
  mixins: [tabMixins],
    components: {
      ContactSearch,
      AssetTree
    },
    props: {
      classType: {
        type: Number,
        default: 1
      },
      /**
       * 自定义列表数据源。默认（不传）走客户/供应商档案 contactPageUsages；
       * 一旦传入就完全接管请求，组件只负责拼装
       * { pageNum, size, ...queryParams, ...paramMapper(where) }。
       *
       * 例：对账池发起对账时要选「有可对账数据的往来单位」，
       * 传 getAccountPoolCustomerList（/eom/accountstatementpool/customers）。
       */
      dataSourceApi: {
        type: Function,
        default: null
      },
      /** 固定查询参数，如对账池接口必填的 type（1 销售订单 / 2 采购订单） */
      queryParams: {
        type: Object,
        default: () => ({})
      },
      /**
       * 搜索条件字段名映射：接收搜索表单的 where，返回自定义接口认识的字段名。
       * 不传时原样透传 where（适用于参数名与搜索项一致的场景）。
       */
      paramMapper: {
        type: Function,
        default: null
      },
      /** 左侧客户类别树。接口不支持 categoryId 过滤时传 false 隐藏 */
      showCategoryTree: {
        type: Boolean,
        default: true
      },
      /**
       * 自定义搜索项，透传给 contact-search；不传用默认的客户档案搜索项。
       * 搜索项的 value 就是提交给列表接口的参数名。
       */
      searchFields: {
        type: Array,
        default: null
      },
      /** 自定义表格列（列对象浅拷贝，不污染父组件传入的数组）；不传用默认供应商档案列 */
      tableColumns: {
        type: Array,
        default: null
      }
    },
    computed: {
      columns() {
        this.columnsVersion; // mixin 改列宽/列显隐时触发重算
        // 拷贝一层：applyColumnWidth 会往列对象上写 width，
        // 直接改父组件传进来的数组会污染调用方的数据
        const cols = (this.tableColumns || this.defaultColumns).map((c) => ({
          ...c
        }));
        return this.applyColumnWidth(cols);
      },
      cacheKeyUrl() {
        // 两套列（供应商档案列 / 调用方自定义列）必须用不同的缓存 key：
        // mixin 的 columnsContrast 按 label 比对，共用一个 key 会把另一套列
        // 当成「已删除列」洗掉（localStorage + 服务端 table-config 都按它存）
        return this.tableColumns
          ? 'views_purchasingManage_supplierManage_components_parentList_custom'
          : 'views_purchasingManage_supplierManage_components_parentList';
      },
      treeWidth() {
        return this.showCategoryTree ? '244px' : '0px';
      }
    },
    data() {
      return {
        visible: false,
        current: null,
        pageList: new Map(),
        defaultColumns: [
          {
            action: 'action',
            slot: 'action',
            align: 'center',
            label: '选择'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '供应商编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'name',
            label: '供应商名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'version',
            label: '版本号',
            align: 'center',
            width: 80,
            formatter: (_row, _column, cellValue) => `V${cellValue || 1}.0`
          },
          {
            prop: 'serialNo',
            label: '供应商代号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'phone',
            label: '供应商电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'addressName',
            label: '注册地址',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.addressName ? _row.addressName.replaceAll(',', '') : '') +
                 ( _row.address || '')
              );
            }
          },
          {
            prop: 'otherAddressName',
            label: '联系地址',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.otherAddressName
                  ? _row.otherAddressName.replaceAll(',', '')
                  : '') + (_row.otherAddress || '')
              );
            }
          },
          {
            prop: 'linkName',
            label: '联系人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'linkPhone',
            label: '联系人电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return _row.status === 1 ? '启用' : '禁用';
            }
          }
        ],

        radio: null
      };
    },

    watch: {},
    methods: {
      open(item) {
        if (item) {
          this.radio = item.id;
          const list = [...this.pageList.values()].flat();
          this.current = list?.find(row => row.id === item.id) || null;
        }
        this.visible = true;
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        console.log("dataSourceApi",this.dataSourceApi);
        if (this.dataSourceApi) {
          // 自定义数据源：由调用方决定请求字段（对账池客户列表等）
          const mapped = this.paramMapper
            ? this.paramMapper(where || {})
            : where;
          return this.dataSourceApi({
            pageNum: page,
            size: limit,
            ...this.queryParams,
            ...(mapped || {})
          }).then((res) => this.normalizeList(res, page));
        }
        return contactPageUsages({
          pageNum: page,
          size: limit,
          type: this.classType,
          ...where,
          status: '1'
        }).then(res => {
          console.log(res);
          if(!this.pageList.has(page)) {
            this.pageList.set(page, res?.list || []);
          }
          return res;
        });
      },

      /**
       * 字段归一化 + 分页字段兜底。
       * 各接口的往来单位字段名不一样（对账池返回 contactId/contactCode/contactName，
       * 客户档案返回 id/code/name），这里补齐成 id/code/name，
       * 单选回显、open(item) 预选、父组件拿到的对象都不用改。
       * count/total 两个分页字段名后端都用过，统一成 ele-pro-table 认的 count。
       */
      normalizeRow(row) {
        return {
          ...row,
          id: row.id != null ? row.id : row.contactId,
          code: row.code != null ? row.code : row.contactCode,
          name: row.name != null ? row.name : row.contactName
        };
      },

      normalizeList(res, page) {
        // 对账池两个列表接口的响应字段后端文档都没定义全，
        // 这里把原始响应打出来，方便核对表格列到底该绑哪些字段名
        console.log('[对账池] 列表原始响应：', res);
        const list = ((res && res.list) || []).map((row) =>
          this.normalizeRow(row)
        );
        if (!this.pageList.has(page)) {
          this.pageList.set(page, list);
        }
        const count =
          res && res.count != null
            ? res.count
            : res && res.total != null
            ? res.total
            : list.length;
        return { ...res, list, count };
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      handleNodeClick(data, node) {
        this.curNodeData = data;
        this.reload({ categoryId: data.id });
      },

      // 单击获取id
      cellClick(row) {
        this.current = row;
        this.radio = row.id;
      },
      handleClose() {
        this.visible = false;
        this.current = null;
        this.radio = '';
      },

      selected() {
        if (!this.current) {
          return this.$message.warning('请选择上级客户');
        }
        this.$emit('changeParent', this.current);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }
</style>