workspace/code/新建文件夹/cw/components/link.vue

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { getTableColumns } from "@/utils/dodata";
import { formatValueByFormat, getAlignByFormat } from "@/utils/column";
import { loaddataApi } from "@/utils/doSql";
import { useRouter } from "vue-router";

const props = defineProps({
  subid: {
    default: "",
  },
  type: {
    default: "",
  },
});

const router = useRouter();
const visible = defineModel(false);
const activetab = ref("账单");
const loading = ref(false);
const columns = ref([]);
const subtable = ref([]);
const subdata = ref(null);

async function handleOpened() {
  if (!props.subid || !props.type) {
    ElMessage.warning("传递信息无效");
    visible.value = false;

    return;
  }

  loaddata();
}

function handleClosed() {
  loading.value = true;
  activetab.value = "账单";

  columns.value = [];
  subtable.value = [];

  subdata.value = null;
}

async function loaddata() {
  try {
    loading.value = true;

    const type = props.type;
    const tab = activetab.value;

    // 获取视图
    const viewMap = {
      账单: {
        应收: "v_cw_ysbill",
        应付: "v_cw_yfbill",
      },
      发票: {
        应收: "v_cw_ysinvoice",
        应付: "v_cw_yfinvoice",
      },
      记录: {
        应收: "v_cw_skd",
        应付: "v_cw_fkd",
      },
    };

    const viewname = viewMap[tab]?.[type];

    const datas = await loaddataApi(
      type === "应收" ? "v_cw_fee_s" : "v_cw_fee_f",
      `subid = '${props.subid}'`,
    );
    if (datas.length === 0) {
      ElMessage.warning("数据无效");
      return;
    }
    subdata.value = datas[0];

    const result = await getTableColumns(viewname);
    if (result.success) {
      columns.value = result.data;
    } else {
      ElMessage.error(`加载失败: ${result.error}`);
      return;
    }

    let data = [];

    if (tab === "账单") {
      if (subdata.value.mx_bill_id) {
        data = await loaddataApi(viewname, `b_id = '${subdata.value.mx_bill_id}'`);
      }
    } else if (tab === "发票") {
      if (subdata.value.mx_invoice_id) {
        data = await loaddataApi(viewname, `b_id = '${subdata.value.mx_invoice_id}'`);
      }
    } else if (tab === "记录") {
      if (subdata.value.mx_sfd_id) {
        const subview = type === "应收" ? "v_cw_skdsub" : "v_cw_fkdsub";

        const subdatas = await loaddataApi(subview, `mx_fee_id = '${subdata.value.subid}'`);

        const fathers = subdatas.map((item) => item.father).filter(Boolean);

        if (fathers.length > 0) {
          const condition = `b_id in (${fathers.map((id) => `'${id}'`).join(",")})`;
          data = await loaddataApi(viewname, condition);
        }
      }
    }

    subtable.value = data || [];
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
}

function handleTabChange() {
  loaddata();
}

function handleToDetail(row) {
  const viewMap = {
    账单: {
      应收: "/cw/ys/detailbill",
      应付: "/cw/yf/detailbill",
    },
    发票: {
      应收: "/cw/ys/detailinvoice",
      应付: "/cw/yf/detailinvoice",
    },
    记录: {
      应收: "/cw/ys/detailskd",
      应付: "/cw/yf/detailfkd",
    },
  };

  const type = props.type;
  const tab = activetab.value;

  const path = viewMap[tab]?.[type];

  if (!path) {
    ElMessage.warning("未找到对应页面");
    return;
  }

  router.push({
    path,
    query: {
      id: row.b_id,
      op: "mod",
    },
  });
}
</script>

<template>
  <el-dialog
    v-model="visible"
    title="费用关联信息"
    width="800"
    @opened="handleOpened"
    @closed="handleClosed"
  >
    <el-tabs v-model="activetab" @tab-change="handleTabChange">
      <el-tab-pane label="账单" name="账单" />
      <el-tab-pane label="发票" name="发票" />
      <el-tab-pane :label="props.type === '应收' ? '收款管理' : '付款管理'" name="记录" />
    </el-tabs>

    <vxe-table
      border
      stripe
      header-align="center"
      :data="subtable"
      :loading="loading"
      :sort-config="{
        //              showIcon: false,
        trigger: 'cell',
      }"
      :filter-config="{
        showIcon: false,
      }"
      size="small"
      :cell-config="{
        height: 26,
      }"
      show-overflow
      show-header-overflow
      height="400px"
    >
      <vxe-column field="seq" type="seq" width="50" align="center" title=" " fixed="left" />
      <vxe-column
        v-for="column in columns"
        :key="column.prop"
        :field="column.prop"
        :title="column.label"
        :width="column.width"
        :align="getAlignByFormat(column.displayFormat)"
        :params="column"
        sortable
      >
        <template #default="{ row }">
          <template v-if="column.edit_type == 'checkbox'">
            <el-checkbox v-model="row[column.prop]" disabled true-value="1" false-value="0" />
          </template>
          <template v-else-if="['b_id', 'father', 'b_ywno'].includes(column.prop)">
            <span class="g3-color" @click="handleToDetail(row)">
              {{ row[column.prop] }}
            </span>
          </template>
          <template v-else>
            {{ formatValueByFormat(row[column.prop], column.displayFormat) }}
          </template>
        </template>
      </vxe-column>
    </vxe-table>

    <template #footer> </template>
  </el-dialog>
</template>

<style lang="css" scoped>
.g3-color {
  color: #409eff;
  cursor: pointer;
}
</style>