From a9c3543f4b4fa5a092a8dea688aedc2b2adbd576 Mon Sep 17 00:00:00 2001 From: 曹睿 <360930172@qq.com> Date: 星期二, 24 六月 2025 17:34:50 +0800 Subject: [PATCH] feat: 【来票台账】显示附件 --- src/views/procurementManagement/procurementInvoiceLedger/index.vue | 685 +++++++++++++++++--------------------------------------- 1 files changed, 215 insertions(+), 470 deletions(-) diff --git a/src/views/procurementManagement/procurementInvoiceLedger/index.vue b/src/views/procurementManagement/procurementInvoiceLedger/index.vue index d73b2b3..b71bec0 100644 --- a/src/views/procurementManagement/procurementInvoiceLedger/index.vue +++ b/src/views/procurementManagement/procurementInvoiceLedger/index.vue @@ -1,499 +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.purchaseContractNo" - 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-button type="primary" @click="openForm('add')">鏂板鍙拌处</el-button> --> + </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> - <!-- <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button> --> - </div> - </div> + </el-form-item> + </el-form> <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-column align="center" type="selection" width="55" /> - <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="invoiceNumber" show-overflow-tooltip/> - <el-table-column label="鍙戠エ閲戦(鍏�)" prop="invoiceAmount" show-overflow-tooltip/> - <el-table-column label="绋庣巼(%)" prop="taxRate" show-overflow-tooltip/> - <el-table-column label="寮�绁ㄤ汉" prop="issUer" show-overflow-tooltip/> - <el-table-column label="寮�绁ㄦ棩鏈�" prop="issueDate" show-overflow-tooltip/> - <!-- <el-table-column label="鍙戠エ" prop="fileName" show-overflow-tooltip> - <template #default="scope"> - <span v-if="scope.row.fileName">{{ scope.row.fileName }}</span> - <el-button v-else link type="primary" @click="handleDownload(scope.row)">涓婁紶</el-button> - </template> - </el-table-column> --> - <!-- <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-column fixed="right" label="鎿嶄綔" min-width="60" align="center"> - <template #default="scope"> - <el-button link type="primary" size="small" @click="openForm('check', 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" /> + <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> - <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板鍙戠エ鍙烽〉闈�' : '鏌ョ湅鍙戠エ鍙烽〉闈�'" 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="purchaseLedgerId"> - <el-select v-model="form.purchaseLedgerId" placeholder="璇烽�夋嫨" clearable @change="setInfo"> - <el-option v-for="item in purchaseLedgerList" :key="item.id" :label="item.purchaseContractNumber" :value="item.id"/> - </el-select> - </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="invoiceNumber"> - <el-input v-model="form.invoiceNumber" placeholder="璇疯緭鍏�" :disabled="operationType === 'check'" clearable/> - </el-form-item> - </el-col> - </el-row> - <el-row :gutter="30"> - <el-col :span="12"> - <el-form-item label="鍙戠エ閲戦(鍏�)锛�" prop="invoiceAmount"> - <el-input type="number" :step="0.01" v-model="form.invoiceAmount" placeholder="璇疯緭鍏�" :disabled="operationType === 'check'" clearable/> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="绋庣巼锛�" prop="taxRate"> - <el-input type="number" :step="0.01" v-model="form.taxRate" placeholder="璇疯緭鍏�" :disabled="operationType === 'check'" 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 - disabled - style="width: 100%" - v-model="form.issueDate" - 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" - :data="{ type: 3 }" - :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> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> --> - </el-form> - <template #footer> - <div class="dialog-footer"> - <!-- <el-button type="primary" @click="submitForm">纭</el-button> --> - <!-- <el-button @click="closeDia">鍙栨秷</el-button> --> - </div> - </template> - </el-dialog> - <el-dialog title="涓婁紶寮圭獥" width="20%" v-model="uploadModal"> - <el-row :gutter="30"> - <el-col :span="24"> - <el-form-item label="闄勪欢鏉愭枡锛�" prop="remark"> - <el-upload - v-model:file-list="fileList" - :action="upload.url1" - multiple - ref="fileUpload" - auto-upload - accept=".pdf" - :limit="1" - :data="{ type: 3,id: currentId }" - :headers="upload.headers" - :before-upload="handleBeforeUpload" - :on-error="handleUploadError" - :on-success="handleUploadSuccess" - :on-remove="handleRemove" - > - <el-button type="primary">涓婁紶</el-button> - <!-- 鏂囦欢鏍煎紡鏀寔 doc锛宒ocx锛寈ls锛寈lsx锛宲pt锛宲ptx锛宲df锛宼xt锛寈ml锛宩pg锛宩peg锛宲ng锛実if锛宐mp锛宺ar锛寊ip锛�7z--> - <template #tip> - <div class="el-upload__tip"> - 鏂囦欢鏍煎紡鏀寔 pdf - </div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <template #footer> - <div class="dialog-footer"> - <el-button @click="commiInvoicetFile" type="primary">纭</el-button> - <el-button @click="commiInvoicetFile">鍙栨秷</el-button> - </div> - </template> - </el-dialog> </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 { - delLedgerFile, - ledgerListNoPage -} from "@/api/salesManagement/salesLedger.js"; -import { getToken } from "@/utils/auth" -import {getProduct, getInfo} from "@/api/procurementManagement/invoiceEntry.js"; -import useUserStore from "@/store/modules/user.js"; -import { - addOrUpdateInvoice, delCommonFile, - delInvoice, - getInvoiceById, - invoiceList -} from "@/api/procurementManagement/procurementInvoiceLedger.js"; -const { proxy } = getCurrentInstance() -const tableData = ref([]) -const productData = ref([]) -const selectedRows = ref([]) -const tableLoading = ref(false) -const page = reactive({ - current: 1, - size: 10, -}) -const total = ref(0) -const fileList = ref([]) -const ledgerList = ref([]) -const purchaseLedgerList = ref([]) -const userStore = useUserStore() -import { genFileId } from 'element-plus' -// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁 -const operationType = ref('') -const dialogFormVisible = ref(false) -const data = reactive({ - searchForm: { - purchaseContractNo: '', - supplierName: '', - issueDate:'' +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"; + +defineOptions({ + name: "鏉ョエ鍙拌处", +}); + +const { proxy } = getCurrentInstance(); +const multipleVal = ref([]); +const { + loading, + filters, + columns, + dataList, + pagination, + getTableData, + resetFilters, + onCurrentChange, +} = usePaginationApi( + productRecordPage, + { + purchaseContractNumber: undefined, // 閲囪喘鍚堝悓鍙� + supplierName: undefined, // 渚涘簲鍟� + createdAt: [], // 鏉ョエ鏃ユ湡 }, - form: { - purchaseLedgerId: '', - salesLedgerId: '', - customerId: '', - invoiceNumber: '', - invoiceAmount: '', - taxRate: '', - issUerId: '', - issUer: '', - issueDate: '', - customerName:'', - fileList:[] - }, - // rules: { - // purchaseLedgerId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - // customerId: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], - // invoiceNumber: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - // invoiceAmount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], - // taxRate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - // issUer: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], - // issueDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - // customerName: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], - // } -}) -const { searchForm, form, rules } = toRefs(data) -const currentId = ref('') -const upload = reactive({ - // 涓婁紶鐨勫湴鍧� - url: import.meta.env.VITE_APP_BASE_API + "/file/upload", - url1: import.meta.env.VITE_APP_BASE_API + "/purchase/invoice/upload", - // 璁剧疆涓婁紶鐨勮姹傚ご閮� - headers: { Authorization: "Bearer " + getToken() }, -}) -const uploadModal = ref(false) -// 鏌ヨ鍒楄〃 -/** 鎼滅储鎸夐挳鎿嶄綔 */ -const handleQuery = () => { - page.current = 1 - getList() -} -const paginationChange = ({ current, limit }) => { - page.current = current; - page.size = limit; - getList() -} -const getList = () => { - tableLoading.value = true - invoiceList({...searchForm.value, ...page}).then(res => { - tableLoading.value = false - tableData.value = res.rows; - total.value = res.total; - }) -} -// 琛ㄦ牸閫夋嫨鏁版嵁 -const handleSelectionChange = (selection) => { - selectedRows.value = selection -} + [ + { + 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) => { - const { columns, data } = param; - const sums = []; - columns.forEach((column, index) => { - if (index === 0) { - sums[index] = '鍚堣'; - return; + return proxy.summarizeTable( + param, + [ + "taxInclusiveTotalPrice", + "ticketsAmount", + "unTicketsPrice", + "invoiceAmount", + ], + { + ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� } - const prop = column.property; - if (['invoiceAmount'].includes(prop)) { - const values = data.map(item => Number(item[prop])); - if (!values.every(value => isNaN(value))) { - sums[index] = values.reduce((acc, val) => (!isNaN(val) ? acc + val : acc), 0); - } else { - sums[index] = ''; - } - } else { - sums[index] = ''; - } - }) - return sums; + ); }; -// 鎵撴潵寮规 -const openForm = (type, row) => { - operationType.value = type - form.value = {} - productData.value = [] - fileList.value = [] - form.value.issUerId = userStore.id - form.value.issUer = userStore.name - form.value.issueDate = getCurrentDate(); - // 鏌ヨ閿�鍞悎鍚� - ledgerListNoPage({}).then(res => { - ledgerList.value = res.data; - }) - // 鏌ヨ閲囪喘鍚堝悓鍙� - getProduct().then(res => { - purchaseLedgerList.value = res - }) - if (type === 'edit') { - currentId.value = row.id; - getInvoiceById({id: row.id}).then(res => { - form.value = {...res} - fileList.value = res.commonFiles; - }) - } - dialogFormVisible.value = true -} -// 涓婁紶鍓嶆牎妫� -function handleBeforeUpload(file) { - // 鏍℃鏂囦欢澶у皬 - if (file.size > 1024 * 1024 * 10) { - proxy.$modal.msgError('涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃10MB!') - return false - } - proxy.$modal.loading("姝e湪涓婁紶鏂囦欢锛岃绋嶅��...") - return true -} -// 涓婁紶澶辫触 -function handleUploadError(err) { - proxy.$modal.msgError("涓婁紶鏂囦欢澶辫触") - proxy.$modal.closeLoading() -} -// 涓婁紶鎴愬姛鍥炶皟 -function handleUploadSuccess(res, file, uploadFiles) { - proxy.$modal.closeLoading() - if (res.code === 200) { - file.tempId = res.data.tempId - proxy.$modal.msgSuccess("涓婁紶鎴愬姛") - } else { - proxy.$modal.msgError(res.msg) - proxy.$refs.fileUpload.handleRemove(file) - } -} -// 绉婚櫎鏂囦欢 -function handleRemove (file) { - if (operationType.value === 'edit') { - let ids = [] - ids.push(file.id) - delCommonFile(ids).then(res => { - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") - }) - } -} -// 鎻愪氦琛ㄥ崟 -const submitForm = () => { - proxy.$refs["formRef"].validate(valid => { - if (valid) { - let tempFileIds = [] - if (fileList.value.length > 0) { - tempFileIds = fileList.value.map(item => item.tempId) - } - form.value.tempFileIds = tempFileIds - form.value.type = 3; - addOrUpdateInvoice(form.value).then(res => { - proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") - closeDia() - getList() - }) - } - }) -} -// 鍏抽棴寮规 -const closeDia = () => { - proxy.resetForm("formRef") - dialogFormVisible.value = false -} + +const handleSelectionChange = (val) => { + multipleVal.value = val; +}; + // 瀵煎嚭 const handleOut = () => { - ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } - ).then(() => { - proxy.download("/purchase/invoice/export", {}, '鏉ョエ鍙拌处.xlsx') - }).catch(() => { - proxy.$modal.msg("宸插彇娑�") + ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", { + confirmButtonText: "纭", + cancelButtonText: "鍙栨秷", + type: "warning", }) -} -// 鍒犻櫎 -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(() => { - delInvoice(ids).then(res => { - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") - getList() + .then(() => { + proxy.download("/purchase/registration/export", {}, "鏉ョエ鐧昏.xlsx"); }) - }).catch(() => { - proxy.$modal.msg("宸插彇娑�") - }) -} + .catch(() => { + proxy.$modal.msg("宸插彇娑�"); + }); +}; -// 閫夋嫨閲囪喘鍚堝悓鍙疯祴鍊� -const setInfo = (value) => { - getInfo({id: value}).then(res => { - form.value.salesContractNo = res.salesContractNo - form.value.projectName = res.projectName - productData.value = res.productData - form.value.supplierName = res.supplierName - form.value.businessPersonId = res.businessPersonId - }) -} +// const handleEdit = () => {}; -// 鎵撴潵闄勪欢涓婁紶寮圭獥 -const handleDownload = (val) => { - fileList.value = [] - uploadModal.value = true - currentId.value = val.id -} - -// 纭鏂囦欢涓婁紶 -const commiInvoicetFile = () => { - uploadModal.value = false - getList(); -} -// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD -function getCurrentDate() { - const today = new Date(); - const year = today.getFullYear(); - const month = String(today.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮� - const day = String(today.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; -} -getList() +onMounted(() => { + getTableData(); +}); </script> -<style scoped lang="scss"> - +<style lang="scss" scoped> +.table_list { + margin-top: unset; +} +.tagBox { + margin-top: 4px; +} </style> -- Gitblit v1.9.3