fix: 销售台账采购台账修复表格无法展开问题。

曹睿

3 天以前 3b73c6d15fc65c777e63eb06cf128f7799120bc5

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -1,196 +1,244 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">采购合同号：</span>
    <el-form :model="filters" :inline="true">
      <el-form-item label="采购合同号">
        <el-input
            v-model="searchForm.purchaseContractNumber"
            style="width: 240px"
            placeholder="请输入"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
          v-model="filters.purchaseContractNumber"
          style="width: 240px"
          placeholder="请输入"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
        <span class="search_title" style="margin-left: 10px">供应商：</span>
      </el-form-item>
      <el-form-item label="供应商">
        <el-input
            v-model="searchForm.supplierName"
            style="width: 240px"
            placeholder="请输入"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
          v-model="filters.supplierName"
          style="width: 240px"
          placeholder="请输入"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
        <span class="search_title" style="margin-left: 10px">来票日期：</span>
      </el-form-item>
      <el-form-item label="来票日期">
        <el-date-picker
            style="width: 240px"
            v-model="searchForm.issueDate"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            type="date"
            placeholder="请选择"
            clearable
          style="width: 240px"
          v-model="filters.createdAt"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable
          @change="getTableData"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters"> 重置 </el-button>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <el-table :data="tableData" border v-loading="tableLoading"
        :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary :summary-method="summarizeMainTable"
        @expand-change="expandChange" height="calc(100vh - 18.5em)">
        <el-table-column align="center"  label="序号" type="index" width="55" />
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children" border show-summary :summary-method="summarizeChildrenTable">
              <el-table-column align="center" label="序号" type="index" width="60" />
              <el-table-column label="产品大类" prop="productCategory" />
              <el-table-column label="规格型号" prop="specificationModel" />
              <el-table-column label="单位" prop="unit" />
              <el-table-column label="数量" prop="quantity" />
              <el-table-column label="税率(%)" prop="taxRate" />
              <el-table-column label="含税单价(元)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber" />
              <el-table-column label="含税总价(元)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber" />
              <el-table-column label="不含税总价(元)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber" />
              <el-table-column label="本次来票数" prop="ticketsNum" />
              <el-table-column label="本次来票金额(元)" prop="ticketsAmount" :formatter="formattedNumber" />
              <el-table-column label="未来票数" prop="futureTickets" />
              <el-table-column label="未来票金额(元)" prop="futureTicketsAmount" :formatter="formattedNumber" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="采购合同号" prop="purchaseContractNumber" show-overflow-tooltip />
        <el-table-column label="销售合同号" prop="salesContractNo" show-overflow-tooltip />
        <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip />
        <el-table-column label="发票号" prop="invoiceNumber" show-overflow-tooltip />
        <el-table-column label="合同金额(元)" prop="invoiceAmount" show-overflow-tooltip :formatter="formattedNumber" />
        <el-table-column label="开票人" prop="issUer" show-overflow-tooltip />
        <el-table-column label="开票日期" prop="issueDate" show-overflow-tooltip />
      </el-table>
      <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
        :page="page.current" :limit="page.size" @pagination="paginationChange" />
      <PIMTable
        rowKey="id"
        :column="columns"
        :tableLoading="loading"
        :tableData="dataList"
        :isSelection="true"
        height="calc(100vh - 18.5em)"
        :isShowSummary="true"
        :summaryMethod="summarizeMainTable"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="onCurrentChange"
      >
        <template #commonFilesRef="{ row }">
          <div v-for="item in row.commonFiles">
            <el-tag type="primary" class="tagBox">
              {{ item.name }}
            </el-tag>
          </div>
        </template>
      </PIMTable>
    </div>
  </div>
</template>

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {ElMessageBox } from "element-plus";
import {productRecordList} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import {
  invoiceListPage
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableLoading = ref(false)
const page = reactive({
  current: 1,
  size: 10,
})
const total = ref(0)
// 用户信息表单弹框数据
  const data = reactive({
  searchForm: {
    purchaseContractNumber: '',
    supplierName: '',
    issueDate:''
  },
  form: {
    issueDate:"",// 开票日期
    purchaseLedgerId: '',
    purchaseLedgerNo: '',
    issUerId: '', // 开票人id
    issUer: '' ,// 开票人姓名
  },
  rules: {
    purchaseLedgerId: [{ required: true, message: "请选择", trigger: "change" }],
  }
})
const { searchForm } = toRefs(data)
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { Search } from "@element-plus/icons-vue";
import { productRecordPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList()
}
const getList = () => {
  tableLoading.value = true
  invoiceListPage({ ...searchForm.value, ...page }).then(res => {
    tableLoading.value = false
    tableData.value = res.records
    tableData.value.map(item => {
      item.children = []
    })
    total.value = res.total
    expandedRowKeys.value = []
  }).catch(() => {
    tableLoading.value = false
  })
}
const formattedNumber = (row, column, cellValue) => {
  return parseFloat(cellValue).toFixed(2);
};
// 表格选择数据
const expandedRowKeys = ref([])
// 展开行
const expandChange = (row, expandedRows) => {
  if (expandedRows.length > 0) {
    expandedRowKeys.value = []
    try {
      productRecordList({ id: row.id }).then(res => {
        const index = tableData.value.findIndex(item => item.id === row.id);
        if (index > -1) {
          tableData.value[index].children = res;
        }
        expandedRowKeys.value.push(row.id)
      })
    } catch (error) {
      console.log(error)
    }
  } else {
    expandedRowKeys.value = []
defineOptions({
  name: "来票台账",
});

const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
const {
  loading,
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  productRecordPage,
  {
    purchaseContractNumber: undefined, // 采购合同号
    supplierName: undefined, // 供应商
    createdAt: [], // 来票日期
  },
  [
    {
      label: "采购合同号",
      prop: "purchaseContractNumber",
      align: "center",
    },
    {
      label: "销售合同号",
      prop: "salesContractNo",
      align: "center",
    },
    {
      label: "客户名称",
      prop: "customerName",
      align: "center",
    },
    {
      label: "供应商名称",
      prop: "supplierName",
      align: "center",
    },
    {
      label: "规格型号",
      prop: "specificationModel",
      align: "center",
    },
    {
      label: "发票号",
      prop: "invoiceNumber",
      align: "center",
    },
    {
      label: "合同金额(元)",
      prop: "taxInclusiveTotalPrice",
      align: "center",
      formatData: (cell) => {
        return parseFloat(cell).toFixed(2);
      },
    },
    {
      label: "开票日期",
      prop: "createdAt",
      align: "center",
    },
    {
      label: "开票金额",
      prop: "ticketsAmount",
      align: "center",
      formatData: (cell) => {
        return parseFloat(cell).toFixed(2);
      },
    },
    {
      label: "不含税金额",
      prop: "unTicketsPrice",
      align: "center",
      formatData: (cell) => {
        return parseFloat(cell).toFixed(2);
      },
    },
    {
      label: "增值税",
      prop: "invoiceAmount",
      align: "center",
    },
    {
      label: "附件",
      align: "center",
      prop: "commonFiles",
      dataType: "slot",
      slot: "commonFilesRef",
      width: 200,
    },
    // {
    //   fixed: "right",
    //   width: 120,
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    // },
  ],
  {},
  {
    createdAt: (aim) => ({
      createdAtStart: aim ? aim[0] : undefined,
      createdAtEnd: aim ? aim[1] : undefined,
    }),
  }
}
);

// 主表合计方法
const summarizeMainTable = (param) => {
  return proxy.summarizeTable(param, ['invoiceAmount'], {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });
  return proxy.summarizeTable(
    param,
    [
      "taxInclusiveTotalPrice",
      "ticketsAmount",
      "unTicketsPrice",
      "invoiceAmount",
    ],
    {
      ticketsNum: { noDecimal: true }, // 不保留小数
      futureTickets: { noDecimal: true }, // 不保留小数
    }
  );
};
// 子表合计方法
const summarizeChildrenTable = (param) => {
  return proxy.summarizeTable(param, ['taxInclusiveUnitPrice', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice', 'ticketsNum', 'ticketsAmount', 'futureTickets', 'futureTicketsAmount'], {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });

const handleSelectionChange = (val) => {
  multipleVal.value = val;
};

// 导出
const handleOut = () => {
  ElMessageBox.confirm(
    '选中的内容将被导出，是否确认导出？',
    '导出', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }
  ).then(() => {
    proxy.download("/purchase/registration/export", {}, '来票登记.xlsx')
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
}
getList()
    .then(() => {
      proxy.download("/purchase/registration/export", {}, "来票登记.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

// const handleEdit = () => {};

onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss"></style>
<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.tagBox {
  margin-top: 4px;
}
</style>