fix: 修复PIMTable不支持懒加载问题。修复【来票登记】金额格式化显示NaN问题。 style: 重构来票登记页面。 feat: 完善文件上传...

曹睿

2 天以前 1c0f01cc462d37e146c34127d2883ca51e26d508

 src/views/procurementManagement/invoiceEntry/index.vue

@@ -1,699 +1,185 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">采购合同号：</span>
        <el-input
          v-model="searchForm.purchaseContractNumber"
          style="width: 240px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          prefix-icon="Search"
        />
        <el-button
          type="primary"
          @click="handleQuery"
          style="margin-left: 10px"
        >
          搜索
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="handleAdd">新增登记</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
      <el-form :model="filters" :inline="true">
        <el-form-item label="采购合同号：">
          <el-input
            v-model="filters.purchaseContractNumber"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData"> 搜索 </el-button>
          <el-button @click="resetFilters"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        @selection-change="handleSelectionChange"
        :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" type="selection" 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 align="center" label="序号" type="index" width="60" />
        <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="projectName"
          show-overflow-tooltip
        />
        <el-table-column
          label="合同金额(元)"
          prop="contractAmount"
          show-overflow-tooltip
          :formatter="formattedNumber"
        />
        <el-table-column
          label="已开票金额(元)"
          prop="receiptPaymentAmount"
          show-overflow-tooltip
          :formatter="formattedNumber"
        />
        <el-table-column
          label="待开票金额(元)"
          prop="unReceiptPaymentAmount"
          show-overflow-tooltip
          :formatter="formattedNumber"
        />
        <!-- <el-table-column fixed="right" label="操作" min-width="60" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm('edit', scope.row);">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="page.current"
        :limit="page.size"
        @pagination="paginationChange"
      />
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增来票登记' : '编辑来票登记'"
      width="80%"
      @close="closeDia"
    >
      <el-form
        :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="采购合同号：" prop="purchaseLedgerNo">
              <el-input v-model="form.purchaseLedgerNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售合同号：" prop="salesContractNo">
              <el-input
                v-model="form.salesContractNo"
                placeholder="自动填充"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="供应商名称：" prop="supplierName">
              <el-input
                v-model="form.supplierName"
                placeholder="自动填充"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称：" prop="projectName">
              <el-input
                v-model="form.projectName"
                placeholder="自动填充"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="发票号：" prop="invoiceNumber">
              <el-input
                v-model="form.invoiceNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票金额(元)：" prop="invoiceAmount">
              <el-input
                type="number"
                :step="0.01"
                v-model="form.invoiceAmount"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="录入人：" prop="issUer">
              <el-input
                v-model="form.issUer"
                placeholder="请输入"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票日期：" prop="issueDate">
              <el-date-picker
                style="width: 100%"
                v-model="form.issueDate"
                type="date"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="录入日期：" prop="createTime">
              <el-date-picker
                style="width: 100%"
                v-model="form.createTime"
                type="date"
                placeholder="请选择"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-form-item label="产品信息：" prop="entryDate"> </el-form-item>
        </el-row>
        <el-table
          :data="productData"
          border
          @selection-change="productSelected"
          show-summary
          style="width: 100%"
          :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" width="70" />
          <el-table-column label="数量" prop="quantity" width="70" />
          <el-table-column label="税率(%)" prop="taxRate" width="80" />
          <el-table-column label="录入日期" prop="createTime" width="120" />
          <el-table-column
            label="含税单价(元)"
            width="150"
            prop="taxInclusiveUnitPrice"
            :formatter="formattedNumber"
          />
          <el-table-column
            label="含税总价(元)"
            width="150"
            prop="taxInclusiveTotalPrice"
            :formatter="formattedNumber"
          />
          <el-table-column
            label="不含税总价(元)"
            width="150"
            prop="taxExclusiveTotalPrice"
            :formatter="formattedNumber"
          />
          <el-table-column label="本次来票数" prop="ticketsNum" width="170">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.ticketsNum"
                placeholder="请选择"
                :min="0"
                :step="0.1"
                clearable
                style="width: 100%"
                @change="invoiceNumBlur(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="本次来票金额(元)"
            prop="ticketsAmount"
            :min="0"
            :step="0.1"
            :formatter="formattedNumber"
            @change="invoiceAmountBlur"
            width="170"
          >
            <template #default="scope">
              <el-input-number
                v-model="scope.row.ticketsAmount"
                placeholder="请选择"
                :min="0"
                :step="0.1"
                clearable
                style="width: 100%"
                @change="invoiceAmountBlur(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="未来票数"
            prop="futureTickets"
            :="
              (row) =>
                row.futureTickets == null || row.futureTickets === ''
                  ? row.quantity
                  : row.futureTickets
            "
          >
          </el-table-column>
          <el-table-column
            label="未来票金额(元)"
            prop="futureTicketsAmount"
            :formatter="
              (row) =>
                row.futureTicketsAmount !== undefined &&
                row.futureTicketsAmount !== null &&
                row.futureTicketsAmount !== ''
                  ? row.futureTicketsAmount
                  : row.taxExclusiveTotalPrice
            "
          >
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="handleAdd('add')">
            新增登记
          </el-button>
          <el-button @click="handleOut">导出</el-button>
          <el-button type="danger" plain @click="handleDelete">删除</el-button>
        </div>
      </template>
    </el-dialog>
      </div>
      <PIMTable
        rowKey="id"
        :column="columns"
        :tableData="dataList"
        :tableLoading="loading"
        :isSelection="true"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        :expand-row-keys="expandRowKeys"
        @expand-change="expandChange"
        @selection-change="handleSelectionChange"
      >
        <template #expand="{ row }">
          <ExpandTable ref="expandTableRef" />
        </template>
        <template #operation="{ row }">
          <el-button
            text
            type="primary"
            size="small"
            @click="handleEdit('edit', row.id)"
          >
            编辑
          </el-button>
        </template>
      </PIMTable>
    </div>
    <Modal ref="modalRef"></Modal>
  </div>
</template>

<script setup>
import pagination from "@/components/PIMTable/Pagination.vue";
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { userListNoPage } from "@/api/system/user.js";
import { productList } from "@/api/procurementManagement/procurementLedger.js";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { gePurchaseListPage } from "@/api/procurementManagement/invoiceEntry.js";
import { nextTick, onMounted, getCurrentInstance } from "vue";
import ExpandTable from "./components/ExpandTable.vue";
import Modal from "./components/Modal.vue";

defineOptions({
  name: "来票登记",
});

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const productData = ref([]);
const expandRowKeys = ref([]);
const expandTableRef = ref();
const modalRef = ref();
const selectedRows = ref([]);
const productSelectedRows = ref([]);
const userList = ref([]);
const purchaseLedgerList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
});
const total = ref(0);
const fileList = ref([]);
import {
  addOrUpdateRegistration,
  delRegistration,

const {
  loading,
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
} = usePaginationApi(
  gePurchaseListPage,
  getInfo,
  getProduct,
  getPurchaseNoById,
  getRegistrationById,
} from "@/api/procurementManagement/invoiceEntry.js";
  {
    purchaseContractNumber: undefined,
  },
  [
    {
      type: "expand",
      dataType: "slot",
      slot: "expand",
    },
    {
      label: "销售合同号",
      prop: "salesContractNo",
    },
    {
      label: "供应商名称",
      prop: "supplierName",
    },
    {
      label: "项目名称",
      prop: "projectName",
    },
    {
      label: "合同金额(元)",
      prop: "contractAmount",
      formatData: (val) => {
        return parseFloat(val).toFixed(2) ?? 0;
      },
    },
    {
      label: "已开票金额(元)",
      prop: "receiptPaymentAmount",
      formatData: (val) => {
        return parseFloat(val).toFixed(2) ?? 0;
      },
    },
    {
      label: "待开票金额(元)",
      prop: "unReceiptPaymentAmount",
      formatData: (val) => {
        return parseFloat(val).toFixed(2) ?? 0;
      },
    },
    // {
    //   fixed: "right",
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    //   width: "200px",
    // },
  ]
);

// 用户信息表单弹框数据
const operationType = ref("");
const dialogFormVisible = ref(false);
const data = reactive({
  searchForm: {
    purchaseContractNumber: "",
  },
  form: {
    issueDate: "", // 开票日期
    purchaseLedgerId: "",
    purchaseLedgerNo: "",
    issUerId: "", // 开票人id
    issUer: "", // 开票人姓名
    invoiceNumber: "", // 发票号
    invoiceAmount: "", // 发票金额
    createTime: "", // 录入日期
  },
  rules: {
    invoiceNumber: [
      { required: true, message: "请输入发票号", trigger: "blur" },
      { type: "string" },
    ],
    invoiceAmount: [
      { required: true, message: "请输入发票金额", trigger: "blur" },
    ],
  },
});
const { searchForm, form, rules } = toRefs(data);
// 产品表单弹框数据
const productFormVisible = ref(false);
const productOperationType = ref("");
const currentId = ref("");

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  gePurchaseListPage({ ...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 handleSelectionChange = (selection) => {
  selectedRows.value = selection.filter(
    (item) => item.purchaseContractNumber !== undefined
  );
};
const productSelected = (selectedRows) => {
  productSelectedRows.value = selectedRows;
};
const expandedRowKeys = ref([]);
// 展开行
const expandChange = (row, expandedRows) => {
  if (expandedRows.length > 0) {
    expandedRowKeys.value = [];
    try {
      productList({ salesLedgerId: row.id, type: 2 }).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 = [];
  }
};
// 主表合计方法
const summarizeMainTable = (param) => {
  return proxy.summarizeTable(
    param,
    ["contractAmount", "receiptPaymentAmount", "unReceiptPaymentAmount"],
    {
      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 handleAdd = () => {
const handleAdd = (type) => {
  if (selectedRows.value.length !== 1) {
    proxy.$modal.msgWarning("请先选中一条数据");
    return;
  }
  openForm("add", selectedRows.value[0]);
  modalRef.value.open(type, selectedRows.value[0].id);
};

// 打开弹框
const openForm = (type, row) => {
  invoiceNumBlur(row);
  operationType.value = type;
  form.value = {};
  productData.value = [];
  fileList.value = [];
  form.value.issUerId = userStore.id;
  form.value.issUer = userStore.name;
  form.value.issueDate = getNowFormatDate();
  userListNoPage().then((res) => {
    userList.value = res.data;
  });
  // 新增时传入当前行id并查询采购合同号
  if (type === "add" && row && row.id) {
    form.value.purchaseLedgerId = row.id;
    getPurchaseNoById({ id: row.id }).then((res) => {
      let result = res.data;
      (purchaseLedgerList.value = result),
        (form.value.purchaseLedgerNo = result.purchaseContractNumber);
      form.value.invoiceAmount = result.invoiceAmount;
      form.value.invoiceNumber = result.invoiceNumber;
      setInfo(result.id);
    });
  } else {
    getProduct().then((res) => {
      purchaseLedgerList.value = res;
    });
  }
  if (type === "edit") {
    currentId.value = row.id;
    getRegistrationById({ id: row.id }).then((res) => {
      form.value = { ...res };
      productData.value = form.value.productData;
      if (form.value.salesLedgerFiles) {
        fileList.value = form.value.salesLedgerFiles;
      } else {
        fileList.value = [];
      }
    });
  }
  dialogFormVisible.value = true;
};
// 选择采购合同号赋值
const setInfo = (value) => {
  getInfo({ id: value }).then((res) => {
    let result = res.data;
    form.value.salesContractNo = result.salesContractNo;
    form.value.projectName = result.projectName;
    productData.value = result.productData;
    form.value.supplierName = result.supplierName;
  });
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.productData = proxy.HaveJson(productData.value);
      addOrUpdateRegistration(form.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeDia();
        getList();
      });
    }
  });
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// 导出
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download("/purchase/registration/export", {}, "来票登记.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
// 删除
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delRegistration(ids).then((res) => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
//本次来票数失焦操作
const invoiceNumBlur = (row) => {
  if (!row.ticketsNum || row.ticketsNum === "") {
    row.ticketsNum = 0;
  }
  if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
    proxy.$modal.msgWarning("本次开票数不得大于未开票数");
    row.ticketsNum = 0;
    return;
  }
  // 计算本次来票金额
  row.ticketsAmount = row.ticketsNum * row.taxInclusiveUnitPrice;
  // 计算未来票数
  row.futureTickets = row.tempFutureTickets - row.ticketsNum;
  // 计算未来票金额
  row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
  calculateinvoiceAmount();
};
// 本次来票金额失焦操作
const invoiceAmountBlur = (row) => {
  if (!row.ticketsAmount) {
    row.ticketsAmount = 0;
  }
  // 计算是否超过来票总金额
  if (row.ticketsAmount > row.tempFutureTicketsAmount) {
    proxy.$modal.msgWarning("本次来票金额不得大于未来票金额");
    row.ticketsAmount = 0;
  }
  // 计算本次来票数
  row.ticketsNum = (row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2);
  // 计算未来票数
  row.futureTickets = row.tempFutureTickets - row.ticketsNum;
  // 计算未来票金额
  row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
  calculateinvoiceAmount();
const handleEdit = (type, id) => {
  modalRef.value.open(type, id);
};

// 获取当前日期函数
function getNowFormatDate() {
  let date = new Date(),
    year = date.getFullYear(), //获取完整的年份(4位)
    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
    strDate = date.getDate(); // 获取当前日(1-31)
  if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
  if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
  return `${year}-${month}-${strDate}`;
}
const handleOut = () => {};
const handleDelete = () => {};

function calculateinvoiceAmount() {
  console.log("productData", productData.value);
  var invoiceAmountTotal = 0;
  productData.value.forEach((item) => {
    if (item.ticketsAmount) {
      invoiceAmountTotal += item.ticketsAmount;
    }
  });
  form.value.invoiceAmount = invoiceAmountTotal.toFixed(2);
}
const expandChange = async (row, expandedRows) => {
  await nextTick();
  expandTableRef.value.getList(row.id);
};

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

<style scoped lang="scss"></style>
<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>