feat: 【来票台账】显示附件

曹睿

3 小时以前 a9c3543f4b4fa5a092a8dea688aedc2b2adbd576

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -1,274 +1,215 @@
<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"
          v-model="filters.purchaseContractNumber"
          style="width: 240px"
          placeholder="请输入"
          @change="handleQuery"
          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"
          v-model="filters.supplierName"
          style="width: 240px"
          placeholder="请输入"
          @change="handleQuery"
          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"
          v-model="filters.createdAt"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable
          @change="changeDateRange"
          @clear="clearRange"
          @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"
      <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"
      >
        <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"
      />
        <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 { 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";
import { productRecordList } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import { invoiceListPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import dayjs from "dayjs";

defineOptions({
  name: "来票台账",
});

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
});
const total = ref(0);
// 用户信息表单弹框数据
const data = reactive({
  searchForm: {
    purchaseContractNumber: "",
    supplierName: "",
    issueDate: [
      dayjs().startOf("month").format("YYYY-MM-DD"),
      dayjs().endOf("month").format("YYYY-MM-DD"),
    ],
    issueDateStart: dayjs().startOf("month").format("YYYY-MM-DD"),
    issueDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
const multipleVal = ref([]);
const {
  loading,
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  productRecordPage,
  {
    purchaseContractNumber: undefined, // 采购合同号
    supplierName: undefined, // 供应商
    createdAt: [], // 来票日期
  },
  form: {
    issueDate: "", // 开票日期
    purchaseLedgerId: "",
    purchaseLedgerNo: "",
    issUerId: "", // 开票人id
    issUer: "", // 开票人姓名
  },
  rules: {
    purchaseLedgerId: [
      { required: true, message: "请选择", trigger: "change" },
    ],
  },
});
const { searchForm } = toRefs(data);

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  const { issueDate, ...rest } = searchForm.value;
  invoiceListPage({ ...rest, ...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 = [];
  [
    {
      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 }, // 不保留小数
  });
};
// 子表合计方法
const summarizeChildrenTable = (param) => {
  return proxy.summarizeTable(
    param,
    [
      "taxInclusiveUnitPrice",
      "taxInclusiveTotalPrice",
      "taxExclusiveTotalPrice",
      "ticketsNum",
      "ticketsAmount",
      "futureTickets",
      "futureTicketsAmount",
      "unTicketsPrice",
      "invoiceAmount",
    ],
    {
      ticketsNum: { noDecimal: true }, // 不保留小数
      futureTickets: { noDecimal: true }, // 不保留小数
    }
  );
};

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

// 导出
@@ -286,24 +227,18 @@
    });
};

const changeDateRange = (date) => {
  if (date) {
    searchForm.receiptPaymentDateStart = date[0];
    searchForm.receiptPaymentDateEnd = date[1];
    getList();
  }
};

const clearRange = () => {
  searchForm.value.issueDate = [];
  searchForm.value.issueDateStart = undefined;
  searchForm.value.issueDateEnd = undefined;
  getList();
};
// const handleEdit = () => {};

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

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