From 02ecd75c6ba81122086b9cf75a2cf6d703eb3020 Mon Sep 17 00:00:00 2001 From: 张诺 <zhang_12370@163.com> Date: 星期五, 23 五月 2025 18:01:18 +0800 Subject: [PATCH] 采购管理>供应商往来=>书写页面样式以及页面交互逻辑 采购管理>付款登记=>编辑无登记人问题 --- src/views/procurementManagement/procurementInvoiceLedger/index.vue | 487 ++++++++++------------------------------------------- 1 files changed, 92 insertions(+), 395 deletions(-) diff --git a/src/views/procurementManagement/procurementInvoiceLedger/index.vue b/src/views/procurementManagement/procurementInvoiceLedger/index.vue index d73b2b3..dca8d7b 100644 --- a/src/views/procurementManagement/procurementInvoiceLedger/index.vue +++ b/src/views/procurementManagement/procurementInvoiceLedger/index.vue @@ -4,7 +4,7 @@ <div> <span class="search_title">閲囪喘鍚堝悓鍙凤細</span> <el-input - v-model="searchForm.purchaseContractNo" + v-model="searchForm.purchaseContractNumber" style="width: 240px" placeholder="璇疯緭鍏�" @change="handleQuery" @@ -33,182 +33,44 @@ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> </div> <div> - <!-- <el-button type="primary" @click="openForm('add')">鏂板鍙拌处</el-button> --> <el-button @click="handleOut">瀵煎嚭</el-button> - <!-- <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button> --> </div> </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-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> + :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" /> + <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="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> @@ -217,77 +79,38 @@ import { ref } from 'vue' import {Search} from "@element-plus/icons-vue"; import {ElMessageBox } from "element-plus"; +import {productRecordList} from "@/api/procurementManagement/procurementInvoiceLedger.js"; 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({ + const data = reactive({ searchForm: { - purchaseContractNo: '', + purchaseContractNumber: '', supplierName: '', issueDate:'' }, form: { + issueDate:"",// 寮�绁ㄦ棩鏈� purchaseLedgerId: '', - salesLedgerId: '', - customerId: '', - invoiceNumber: '', - invoiceAmount: '', - taxRate: '', - issUerId: '', - issUer: '', - issueDate: '', - customerName:'', - fileList:[] + purchaseLedgerNo: '', + issUerId: '', // 寮�绁ㄤ汉id + issUer: '' ,// 寮�绁ㄤ汉濮撳悕 }, - // 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" }], - // } + rules: { + purchaseLedgerId: [{ 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 { searchForm } = toRefs(data) + // 鏌ヨ鍒楄〃 /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { @@ -301,199 +124,73 @@ } const getList = () => { tableLoading.value = true - invoiceList({...searchForm.value, ...page}).then(res => { + invoiceList({ ...searchForm.value, ...page }).then(res => { tableLoading.value = false - tableData.value = res.rows; - total.value = res.total; + tableData.value = res.rows + 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 +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 = [] + } } // 涓昏〃鍚堣鏂规硶 const summarizeMainTable = (param) => { - const { columns, data } = param; - const sums = []; - columns.forEach((column, index) => { - if (index === 0) { - sums[index] = '鍚堣'; - return; - } - 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; + return proxy.summarizeTable(param, ['invoiceAmount'], { + ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + }); }; -// 鎵撴潵寮规 -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 summarizeChildrenTable = (param) => { + return proxy.summarizeTable(param, ['taxInclusiveUnitPrice', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice', 'ticketsNum', 'ticketsAmount', 'futureTickets', 'futureTicketsAmount'], { + ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁� + }); +}; + // 瀵煎嚭 const handleOut = () => { ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } - ).then(() => { - proxy.download("/purchase/invoice/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 + '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', } - ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } ).then(() => { - delInvoice(ids).then(res => { - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") - getList() - }) + proxy.download("/purchase/registration/export", {}, '鏉ョエ鐧昏.xlsx') }).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 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() </script> -<style scoped lang="scss"> - -</style> +<style scoped lang="scss"></style> \ No newline at end of file -- Gitblit v1.9.3