| | |
| | | <div class="search_form"> |
| | | <el-form :inline="true" :model="searchForm"> |
| | | <el-form-item label="客户名称/合同号"> |
| | | <el-input |
| | | v-model="searchForm.searchText" |
| | | style="width: 240px" |
| | | placeholder="输入客户名称/合同号搜索" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | /> |
| | | <el-input v-model="searchForm.searchText" style="width: 240px" placeholder="输入客户名称/销售合同号搜索" |
| | | @change="handleQuery" clearable :prefix-icon="Search" /> |
| | | </el-form-item> |
| | | <el-form-item label="开票日期"> |
| | | <el-date-picker |
| | | style="width: 240px" |
| | | v-model="searchForm.invoiceDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="daterange" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | clearable |
| | | @change="changeDateRange" |
| | | @clear="clearRange" |
| | | /> |
| | | <el-date-picker style="width: 240px" v-model="searchForm.invoiceDate" value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" clearable |
| | | @change="changeDateRange" @clear="clearRange" /> |
| | | </el-form-item> |
| | | <el-form-item label="录入日期"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="searchForm.createTimeStart" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | @change="handleQuery" |
| | | /> |
| | | <el-date-picker style="width: 100%" v-model="searchForm.createTimeStart" value-format="YYYY-MM-DD HH:mm:ss" |
| | | format="YYYY-MM-DD" type="date" placeholder="请选择" clearable @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="不显示有发票行"> |
| | | <el-checkbox v-model="searchForm.status" @change="handleQuery" /> |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | v-loading="tableLoading" |
| | | @selection-change="handleSelectionChange" |
| | | :row-key="(row) => row.id" |
| | | show-summary |
| | | :summary-method="summarizeMainTable" |
| | | height="calc(100vh - 18.5em)" |
| | | > |
| | | <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" |
| | | :row-key="(row) => row.id" show-summary :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="客户合同号" |
| | | prop="customerContractNo" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="客户名称" |
| | | prop="customerName" |
| | | show-overflow-tooltip |
| | | width="240" |
| | | /> |
| | | <el-table-column label="项目" prop="projectName" /> |
| | | <el-table-column label="产品大类" prop="productCategory" /> |
| | | <el-table-column label="规格型号" prop="specificationModel" /> |
| | | <el-table-column |
| | | label="发票号" |
| | | prop="invoiceNo" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="发票金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | /> |
| | | <el-table-column label="销售合同号" prop="salesContractNo" show-overflow-tooltip width="180" /> |
| | | <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip width="240" /> |
| | | <!-- <el-table-column label="项目" prop="projectName" width="320" />--> |
| | | <el-table-column label="产品大类" prop="productCategory" width="200" /> |
| | | <el-table-column label="规格型号" prop="specificationModel" width="160" show-overflow-tooltip /> |
| | | <el-table-column label="发票号" prop="invoiceNo" width="200" show-overflow-tooltip /> |
| | | <el-table-column label="发票金额(元)" prop="invoiceTotal" show-overflow-tooltip :formatter="formattedNumber" |
| | | width="200" /> |
| | | <el-table-column label="税率(%)" prop="taxRate" show-overflow-tooltip /> |
| | | <el-table-column |
| | | label="录入人" |
| | | prop="invoicePerson" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="录入日期" |
| | | prop="createTime" |
| | | show-overflow-tooltip |
| | | :formatter="formatDate" |
| | | /> |
| | | <el-table-column |
| | | label="开票日期" |
| | | prop="invoiceDate" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="发票" |
| | | prop="invoiceFileName" |
| | | width="120" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | > |
| | | <el-table-column label="录入人" prop="invoicePerson" show-overflow-tooltip /> |
| | | <el-table-column label="录入日期" prop="createTime" show-overflow-tooltip :formatter="formatDate" width="180" /> |
| | | <el-table-column label="开票日期" prop="invoiceDate" show-overflow-tooltip width="120" /> |
| | | <!-- <el-table-column label="发票" prop="invoiceFileName" width="120" align="center" show-overflow-tooltip fixed="right"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | v-if="scope.row.invoiceFileName" |
| | | text |
| | | bg |
| | | type="primary" |
| | | @click="handleFile(scope.row.commonFiles)" |
| | | > |
| | | <el-button v-if="scope.row.invoiceFileName" text bg type="primary" |
| | | @click="handleFile(scope.row.commonFiles)"> |
| | | 查看附件 |
| | | </el-button> |
| | | <el-button |
| | | v-else |
| | | link |
| | | type="primary" |
| | | @click="handleDownload(scope.row)" |
| | | > |
| | | <el-button v-else link type="primary" @click="handleDownload(scope.row)"> |
| | | 上传 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> --> |
| | | <el-table-column fixed="right" label="操作" width="150" align="center"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | @click="openForm(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | @click="delInvoiceLedger(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | <el-button link type="primary" size="small" @click="openForm(scope.row)">编辑</el-button> |
| | | <el-button link type="primary" size="small" @click="downLoadFile(scope.row)">附件</el-button> |
| | | <el-button link type="primary" size="small" @click="delInvoiceLedger(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" |
| | | /> |
| | | <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="开票台账页面" |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | <el-form |
| | | :model="form" |
| | | label-width="140px" |
| | | label-position="top" |
| | | :rules="rules" |
| | | ref="formRef" |
| | | > |
| | | <el-dialog v-model="dialogFormVisible" title="开票台账页面" width="70%" @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="salesContractNo"> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户名称:" prop="customerName"> |
| | | <el-input |
| | | v-model="form.customerName" |
| | | placeholder="自动填充" |
| | | clearable |
| | | disabled |
| | | /> |
| | | <el-input v-model="form.customerName" placeholder="自动填充" clearable disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票号:" prop="invoiceNo"> |
| | | <el-input |
| | | v-model="form.invoiceNo" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-input v-model="form.invoiceNo" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票金额(元):" prop="invoiceTotal"> |
| | | <el-input |
| | | type="number" |
| | | :step="0.01" |
| | | v-model="form.invoiceTotal" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-form-item :label="`发票金额(元): 合同总额(${form.taxInclusiveTotalPrice}元)`" prop="invoiceTotal"> |
| | | <el-input-number :step="0.01" :min="0" :max="form.taxInclusiveTotalPrice" style="width: 100%" v-model="form.invoiceTotal" placeholder="请输入" clearable :precision="2"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="开票人:" prop="invoicePerson"> |
| | | <el-input |
| | | v-model="form.invoicePerson" |
| | | placeholder="请输入" |
| | | clearable |
| | | disabled |
| | | /> |
| | | <el-input v-model="form.invoicePerson" placeholder="请输入" clearable disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="开票日期:" prop="invoiceDate"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="form.invoiceDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | /> |
| | | <el-date-picker style="width: 100%" v-model="form.invoiceDate" value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" type="date" placeholder="请选择" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="附件材料:" prop="remark"> |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | :action="upload.url" |
| | | multiple |
| | | ref="fileUpload" |
| | | auto-upload |
| | | :headers="upload.headers" |
| | | accept=".pdf" |
| | | :limit="1" |
| | | :before-upload="handleBeforeUpload" |
| | | :on-error="handleUploadError" |
| | | :on-success="handleUploadSuccess" |
| | | :on-remove="handleRemove" |
| | | > |
| | | <el-upload v-model:file-list="fileList" :action="upload.url" multiple ref="fileUpload" auto-upload |
| | | :headers="upload.headers" accept=".pdf" :limit="10" :before-upload="handleBeforeUpload" |
| | | :on-error="handleUploadError" :on-success="handleUploadSuccess"> |
| | | <el-button type="primary">上传</el-button> |
| | | <template #tip> |
| | | <!-- 文件格式支持 doc,docx,xls,xlsx,ppt,pptx,pdf,txt,xml,jpg,jpeg,png,gif,bmp,rar,zip,7z--> |
| | |
| | | <el-row :gutter="30"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="附件材料:" prop="remark"> |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | :action="upload.url" |
| | | multiple |
| | | ref="fileUpload" |
| | | auto-upload |
| | | :headers="upload.headers" |
| | | accept=".pdf" |
| | | :limit="1" |
| | | style="width: 100%" |
| | | :on-exceed="handleExceed" |
| | | :before-upload="handleBeforeUpload" |
| | | :on-error="handleUploadError" |
| | | :on-success="handleUploadSuccess" |
| | | :on-remove="handleRemove" |
| | | > |
| | | <el-upload v-model:file-list="fileList" :action="upload.url" multiple ref="fileUpload" auto-upload |
| | | :headers="upload.headers" accept=".pdf" :limit="10" style="width: 100%" :on-exceed="handleExceed" |
| | | :before-upload="handleBeforeUpload" :on-error="handleUploadError" :on-success="handleUploadSuccess" |
| | | :on-remove="handleRemove"> |
| | | <el-button type="primary">上传</el-button> |
| | | <template #tip> |
| | | <div class="el-upload__tip">文件格式仅支持 pdf</div> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <FileList ref="fileListRef" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | registrationProductPage, |
| | | delInvoiceLedgerByRegProductId, |
| | | } from "../../../api/salesManagement/invoiceLedger.js"; |
| | | import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger.js"; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import dayjs from "dayjs"; |
| | | import FileList from "./fileList.vue"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableData = ref([]); |
| | |
| | | searchForm: { |
| | | searchText: "", |
| | | status: false, |
| | | invoiceDate: [ |
| | | dayjs().startOf("month").format("YYYY-MM-DD"), |
| | | dayjs().endOf("month").format("YYYY-MM-DD"), |
| | | ], |
| | | invoiceDateStart: dayjs().startOf("month").format("YYYY-MM-DD"), |
| | | invoiceDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"), |
| | | invoiceDate: null, |
| | | invoiceDateStart: undefined, |
| | | invoiceDateEnd: undefined, |
| | | createTimeStart: "", // 录入日期 |
| | | }, |
| | | form: { |
| | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | const { invoiceDate, ...rest } = searchForm; |
| | | registrationProductPage({ ...rest, ...page }).then((res) => { |
| | | // 将范围日期字段传递给后端 |
| | | const params = { ...rest, ...page }; |
| | | // 移除开票日期的默认值设置,只保留范围日期字段 |
| | | delete params.invoiceDate; |
| | | registrationProductPage(params).then((res) => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | |
| | | fileList.value = res.data.fileList; |
| | | if (!form.value.invoicePerson) { |
| | | form.value.invoicePerson = userStore.nickName; |
| | | form.value.entryDate = getCurrentDate(); |
| | | // 移除录入日期默认值设置,只处理范围日期字段 |
| | | } |
| | | if (!form.value.invoiceDate) { |
| | | form.value.invoiceDate = getCurrentDate(); |
| | | } |
| | | // 移除开票日期默认值设置,只处理范围日期字段 |
| | | }); |
| | | dialogFormVisible.value = true; |
| | | }; |
| | |
| | | }; |
| | | // 上传前校检 |
| | | function handleBeforeUpload(file) { |
| | | console.log("file", file); |
| | | // 校检文件大小 |
| | | if (file.size > 1024 * 1024 * 10) { |
| | | proxy.$modal.msgError("上传文件大小不能超过10MB!"); |
| | |
| | | proxy.$modal.msgError("文件格式不匹配"); |
| | | return false; |
| | | } |
| | | console.log('handleBeforeUpload'); |
| | | proxy.$modal.loading("正在上传文件,请稍候..."); |
| | | return true; |
| | | } |
| | |
| | | // 上传成功回调 |
| | | function handleUploadSuccess(res, file, uploadFiles) { |
| | | proxy.$modal.closeLoading(); |
| | | console.log('handleUploadSuccess'); |
| | | if (res.code === 200) { |
| | | proxy.$refs["fileUpload"].handleRemove(file); |
| | | fileList.value.push(res.data); |
| | | proxy.$modal.msgSuccess("上传成功"); |
| | | // 将上传成功的文件信息添加到fileList中 |
| | | const fileInfo = { |
| | | name: file.name, |
| | | url: res.data.url || file.response?.data?.url || file.url, |
| | | response: file.response |
| | | }; |
| | | // 检查是否已存在相同文件,避免重复添加 |
| | | const existingFileIndex = fileList.value.findIndex(f => f.name === fileInfo.name); |
| | | if (existingFileIndex === -1) { |
| | | fileList.value.push(fileInfo); |
| | | } else { |
| | | fileList.value[existingFileIndex] = fileInfo; |
| | | } |
| | | // 确保表单数据中的fileList也更新 |
| | | form.value.fileList = fileList.value; |
| | | } else { |
| | | proxy.$modal.msgError(res.msg); |
| | | proxy.$refs.fileUpload.handleRemove(file); |
| | | } |
| | | } |
| | | // 移除文件 |
| | | function handleRemove(file) { |
| | | let index = fileList.value.findIndex((item) => item.url === file.url); |
| | | if (index > -1) { |
| | | fileList.value.splice(index, 1); |
| | | } |
| | | } |
| | | // 提交表单 |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 打开附件上传弹窗 |
| | | const handleDownload = (val) => { |
| | | fileList.value = []; |
| | | uploadModal.value = true; |
| | | currentId.value = val.id; |
| | | }; |
| | | |
| | | // 确认文件上传 |
| | | const commiInvoicetFile = () => { |
| | | const object = { |
| | |
| | | }) |
| | | .then(() => { |
| | | delInvoiceLedgerByRegProductId(row.id).then((res) => { |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | getList(); |
| | | }); |
| | | }) |
| | |
| | | getList(); |
| | | }; |
| | | |
| | | //附件相关 |
| | | const fileListRef = ref(null) |
| | | //查看附件 |
| | | const downLoadFile = (row) => { |
| | | invoiceLedgerProductInfo({ id: row.id }).then((res) => { |
| | | fileListRef.value.open(res.data.fileList) |
| | | }); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | // 设置开票日期范围默认值为当天 |
| | | const today = dayjs().format('YYYY-MM-DD'); |
| | | searchForm.invoiceDate = [today, today]; |
| | | // 设置范围日期字段的起始和结束时间 |
| | | searchForm.invoiceDateStart = today; |
| | | searchForm.invoiceDateEnd = today; |
| | | getList(); |
| | | }); |
| | | </script> |