进销存升级 1.回款登记第二次新增回款时，页面展示有误 2.打包报错修改

gaoluyang

4 天以前 aa33a7a6e635b42ec63db6730b04e2e8b32f06bb

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -1,196 +1,456 @@
<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 - 19.5em)"
        :isShowSummary="true"
        :summaryMethod="summarizeMainTable"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #operation="{ row }">
          <el-button
            type="primary"
            link
            @click="openEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            @click="downLoadFile(row)"
          >
            附件
          </el-button>
          <el-button
            type="primary"
            link
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </PIMTable>
    </div>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      title="附件列表"
      :showUploadButton="true"
      :showDeleteButton="true"
      :deleteMethod="handleDeleteFile"
      :uploadMethod="handleFileUpload"
      :rulesRegulationsManagementId="currentRowId"
    />
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </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 { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import {
  invoiceListPage
   Search,
} from "@element-plus/icons-vue";
import {
   delRegistration,
   productRecordPage,
   delCommonFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
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:''
  },
  form: {
    issueDate:"",// 开票日期
    purchaseLedgerId: '',
    purchaseLedgerNo: '',
    issUerId: '', // 开票人id
    issUer: '' ,// 开票人姓名
  },
  rules: {
    purchaseLedgerId: [{ required: true, message: "请选择", trigger: "change" }],
  }
})
const { searchForm } = toRefs(data)
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import EditModal from "./Modal/EditModal.vue";
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
import useUserStore from "@/store/modules/user.js";
const userStore = useUserStore();

// 查询列表
/** 搜索按钮操作 */
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 editmodalRef = ref();
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentRowId = ref(null); // 当前查看附件的行ID

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",
      width: 150,
    },
    {
      label: "销售合同号",
      prop: "salesContractNo",
      width: 150,
    },
    {
      label: "项目名称",
      prop: "projectName",
      width: 240,
    },
    {
      label: "供应商名称",
      prop: "supplierName",
      width: 240,
    },
    {
      label: "产品大类",
      prop: "productCategory",
      width: 150,
    },
    {
      label: "规格型号",
      prop: "specificationModel",
      width: 150,
    },
    {
      label: "发票号",
      prop: "invoiceNumber",
      width: 200,
    },
    {
      label: "合同金额(元)",
      prop: "taxInclusiveTotalPrice",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
    },
    {
      label: "开票日期",
      prop: "createdAt",
      width: 110,
    },
    {
      label: "开票金额",
      prop: "ticketsAmount",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
    },
    {
      label: "不含税金额",
      prop: "unTicketsPrice",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
    },
    {
      label: "增值税",
      prop: "invoiceAmount",
      width: 200,
    },
    {
      label: "录入人",
      prop: "issUer",
      width: 200,
    },
    {
      fixed: "right",
      width: 200,
      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 changePage = ({ page, limit }) => {
  pagination.currentPage = page;
   pagination.pageSize = limit;
  onCurrentChange(page);
};

const downLoadFile = row => {
  currentRowId.value = row.id;
  if (fileListRef.value) {
    fileListRef.value.open(row.commonFiles || []);
  }
};

// 上传附件（自定义上传方法）
const handleFileUpload = async () => {
  if (!currentRowId.value) {
    proxy.$modal.msgWarning("缺少登记ID，无法保存附件");
    return;
  }
  
  return new Promise((resolve) => {
    // 创建一个隐藏的文件输入元素
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = async (e) => {
      const file = e.target.files[0];
      if (!file) {
        resolve(null);
        return;
      }
      
      try {
        // 使用 FormData 上传文件
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type', '4'); // type 参数，用户未指定具体值，先传空字符串
        formData.append('id', currentRowId.value); // 当前行的 id
        
        const uploadRes = await request({
          url: '/file/uploadByCommon',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${getToken()}`
          }
        });
        
        if (uploadRes.code === 200) {
          proxy.$modal.msgSuccess("附件上传成功");
          
          // 刷新列表获取最新数据
          await new Promise((resolveRefresh) => {
            // 调用 API 获取最新列表数据
            productRecordPage({
              ...filters,
              current: pagination.currentPage,
              size: pagination.pageSize
            }).then(({ code, data }) => {
              if (code === 200) {
                // 更新数据列表
                dataList.value = data.records;
                pagination.total = data.total;
                
                // 从外部数据获取 commonFiles
                const currentRow = dataList.value.find(row => row.id === currentRowId.value);
                if (currentRow && fileListRef.value) {
                  // 刷新附件列表，使用从外部获取的最新 commonFiles
                  fileListRef.value.open(currentRow.commonFiles || []);
                }
                resolveRefresh();
              } else {
                resolveRefresh();
              }
            }).catch(() => {
              resolveRefresh();
            });
          });
          
          resolve({
            name: uploadRes.data?.originalName || file.name,
            url: uploadRes.data?.tempPath || uploadRes.data?.url,
            id: uploadRes.data?.id
          });
        } else {
          proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
          resolve(null);
        }
      } catch (error) {
        console.error("附件上传失败:", error);
        proxy.$modal.msgError("附件上传失败");
        resolve(null);
      } finally {
        document.body.removeChild(input);
      }
    };
    
    document.body.appendChild(input);
    input.click();
  });
};

// 删除附件
const handleDeleteFile = async (file) => {
  try {
    await delCommonFile([file.id]);
    proxy.$modal.msgSuccess("删除成功");
    
    // 刷新列表获取最新数据
    await new Promise((resolveRefresh) => {
      // 调用 API 获取最新列表数据
      productRecordPage({
        ...filters,
        current: pagination.currentPage,
        size: pagination.pageSize
      }).then(({ code, data }) => {
        if (code === 200) {
          // 更新数据列表
          dataList.value = data.records;
          pagination.total = data.total;
          
          // 从外部数据获取 commonFiles
          const currentRow = dataList.value.find(row => row.id === currentRowId.value);
          if (currentRow && fileListRef.value) {
            // 刷新附件列表，使用从外部获取的最新 commonFiles
            fileListRef.value.open(currentRow.commonFiles || []);
          }
          resolveRefresh();
        } else {
          resolveRefresh();
        }
      }).catch(() => {
        resolveRefresh();
      });
    });
    
    return true;
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
};

const openEdit = (row) => {
  editmodalRef.value.open(row);
};
// 删除
const handleDelete = (row) => {
   let ids = [];
   ids.push(row.id);
   ElMessageBox.confirm("该开票台账将被删除,是否确认删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         loading.value = true;
         delRegistration(ids).then((res) => {
            getTableData();
         });
         loading.value = false;
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};

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

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