yoe-srm-web/src/components/TaxCodeSelect/index.vue

<template>
  <div>
    <el-dialog
      v-model="dialog.visible.value"
      :title="dialog.title.value"
      width="1200px"
      append-to-body
      destroy-on-close
    >
      <div class="tax-code-container">
        <!-- 左侧树 -->
        <div class="tax-tree-panel">
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="treeProps"
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            @node-dblclick="handleTreeDblClick"
          />
        </div>

        <!-- 右侧列表 -->
        <div class="tax-list-panel">
          <!-- 搜索框 -->
          <div class="search-bar">
            <el-input
              v-model="searchKeyword"
              placeholder="请输入名称或编码"
              prefix-icon="Search"
              clearable
              @keyup.enter="handleSearch"
              @clear="handleSearch"
              style="width: 280px"
            />
            <el-button icon="Search" @click="handleSearch" style="margin-left:8px" />
          </div>

          <!-- 表格 -->
          <el-table
            v-loading="loading"
            :data="listData"
            border
            highlight-current-row
            height="360px"
            @row-dblclick="handleRowDblClick"
          >
            <el-table-column label="编码" align="center" prop="taxationNo" min-width="110">
              <template #default="{ row }">
                <el-link type="primary" :underline="false">{{ row.taxationNo }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="合并编码" align="center" prop="mergeNo" min-width="130" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link type="primary" :underline="false">{{ row.mergeNo }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="名称" align="center" prop="name" min-width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link type="primary" :underline="false">{{ row.name }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="简称" align="center" prop="abbreviation" min-width="100" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link type="primary" :underline="false">{{ row.abbreviation }}</el-link>
              </template>
            </el-table-column>
            <!-- <el-table-column label="说明" align="center" prop="remark" min-width="150" show-overflow-tooltip />
            <el-table-column label="税率" align="center" prop="taxRate" width="80" />
            <el-table-column label="用户选择比例" align="center" prop="selectRatio" width="110" /> -->
          </el-table>

          <!-- 分页 -->
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { listTaxCode, getTaxCode, getTaxCodeTree } from '@/api/system/taxCode';
import { TaxCodeVO, TaxCodeQuery } from '@/api/system/taxCode/types';
import useDialog from '@/hooks/useDialog';

const emit = defineEmits<{
  (e: 'select', row: TaxCodeVO): void;
}>();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const dialog = useDialog({ title: '税收编码选择  请双击选择税收编码' });

const treeRef = ref<ElTreeInstance>();
const treeProps = { label: 'label', children: 'children' };
const currentEchoId = ref<string | number | undefined>();
const treeData = ref<any[]>([]);

const listData = ref<TaxCodeVO[]>([]);
const loading = ref(false);
const total = ref(0);
const searchKeyword = ref('');

const queryParams = ref<TaxCodeQuery>({
  pageNum: 1,
  pageSize: 10,
  parentId: undefined,
  name: undefined,
  taxationNo: undefined,

  params: {}
});

/** 加载树形数据 */
const loadTreeData = async () => {
  try {
    const res = await getTaxCodeTree();
    treeData.value = res.data ?? [];
  } catch (error) {
    console.error('加载税收编码树失败:', error);
    treeData.value = [];
  }
};

/** 等待节点出现在树中并展开 */
const expandNodeById = (id: string | number): Promise<void> => {
  return new Promise(resolve => {
    const tryExpand = (retry = 0) => {
      const node = treeRef.value?.getNode(id);
      if (node) {
        node.expand(() => resolve(), false);
      } else if (retry < 30) {
        setTimeout(() => tryExpand(retry + 1), 100);
      } else {
        resolve();
      }
    };
    tryExpand();
  });
};

/** 根据 id 回显：展开祖先路径并高亮目标节点 */
const echoById = async (id: string | number) => {
  try {
    const res = await getTaxCode(id);
    const data = res.data;
    // ancestors 格式如 "0,100001,100002"，按逗号分割并过滤掉根节点 0
    const ancestors = (data.ancestors ?? '')
      .split(',')
      .filter((a: string) => a && a !== '0');
    for (const ancId of ancestors) {
      await expandNodeById(ancId);
    }
    await nextTick();
    treeRef.value?.setCurrentKey(id);
  } catch (e) {
    console.warn('taxCode echo failed', e);
  }
};

/** 查询右侧列表 */
const getList = async () => {
  loading.value = true;
  try {
    const res = await listTaxCode(queryParams.value);
    // 后端已按 isBottom='0' 过滤，仅返回无下级的叶子节点
    listData.value = res.rows ?? [];
    total.value = res.total ?? 0;
  } finally {
    loading.value = false;
  }
};

/** 单击树节点 — 刷新右侧列表 */
const handleNodeClick = (node: any) => {
  queryParams.value.parentId = node.id;
  queryParams.value.pageNum = 1;
  getList();
};

/** 双击树节点 — 叶子节点直接选中 */
const handleTreeDblClick = (data: any, node: any) => {
  if (node.isLeaf) {
    emit('select', data as TaxCodeVO);
    dialog.closeDialog();
  }
};

/** 搜索 */
const handleSearch = () => {
  const kw = searchKeyword.value?.trim();
  queryParams.value.name = kw || undefined;
  queryParams.value.taxationNo = undefined;
  queryParams.value.pageNum = 1;
  getList();
};

/** 双击行选择 */
const handleRowDblClick = (row: TaxCodeVO) => {
  if (row.isBottom !== '0') return;
  emit('select', row);
  dialog.closeDialog();
};

/** 对外暴露打开方法，可传入 id 用于回显 */
const open = (id?: string | number) => {
  currentEchoId.value = id;
  searchKeyword.value = '';
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    parentId: undefined,
    name: undefined,
    taxationNo: undefined,
    isBottom: '0',
    params: {}
  };
  dialog.openDialog();
};

watch(
  () => dialog.visible.value,
  async (val) => {
    if (val) {
      await loadTreeData();
      await getList();
      if (currentEchoId.value) {
        await echoById(currentEchoId.value);
      }
    } else {
      listData.value = [];
      total.value = 0;
    }
  }
);

defineExpose({ open, close: dialog.closeDialog });
</script>

<style scoped>
.tax-code-container {
  display: flex;
  gap: 16px;
  min-height: 460px;
}

.tax-tree-panel {
  width: 300px;
  flex-shrink: 0;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  padding: 8px 0;
  overflow-y: auto;
  max-height: 480px;
}

.tax-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.search-bar {
  display: flex;
  align-items: center;
}
</style>