From c99b4166febfde47d5b350d30bac443a11de42f5 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 31 十月 2025 15:11:21 +0800
Subject: [PATCH] 协同审批-添加导出功能
---
src/views/procurementManagement/procurementInvoiceLedger/index.vue | 500 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 333 insertions(+), 167 deletions(-)
diff --git a/src/views/procurementManagement/procurementInvoiceLedger/index.vue b/src/views/procurementManagement/procurementInvoiceLedger/index.vue
index dca8d7b..439837b 100644
--- a/src/views/procurementManagement/procurementInvoiceLedger/index.vue
+++ b/src/views/procurementManagement/procurementInvoiceLedger/index.vue
@@ -1,196 +1,362 @@
<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 #commonFilesRef="{ row }">
+ <el-dropdown @command="(command) => handleCommand(command, row)">
+ <el-button link :icon="Files" type="danger"> 闄勪欢 </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item
+ v-if="row.commonFiles.length !== 0"
+ :icon="Download"
+ command="download"
+ >
+ 涓嬭浇
+ </el-dropdown-item>
+ <el-dropdown-item :icon="Upload" command="upload">
+ 涓婁紶
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </template>
+ <template #operation="{ row }">
+ <el-button
+ type="primary"
+ text
+ @click="openEdit(row)"
+ :disabled="row.issUerId !== userStore.id"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="primary"
+ text
+ :disabled="row.issUerId !== userStore.id"
+ @click="handleDelete(row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </PIMTable>
</div>
+ <UploadModal ref="modalRef" @uploadSuccess="uploadSuccess"></UploadModal>
+ <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 {
- invoiceList
+ Files,
+ Download,
+ Search,
+ Upload,
+ EditPen,
+} from "@element-plus/icons-vue";
+import {
+ delRegistration,
+ productRecordPage,
+ productUploadFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
-const { proxy } = getCurrentInstance()
-const tableData = ref([])
-const tableLoading = ref(false)
-const page = reactive({
- current: 1,
- size: 10,
-})
-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 { onMounted } from "vue";
+import { ElMessageBox } from "element-plus";
+import UploadModal from "./Modal/UploadModal.vue";
+import EditModal from "./Modal/EditModal.vue";
+import useUserStore from "@/store/modules/user.js";
+import {delInvoiceLedgerByRegProductId} from "@/api/salesManagement/invoiceLedger.js";
+const userStore = useUserStore();
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-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
- 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 modalRef = ref();
+const editmodalRef = ref();
+
+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: "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,
+ },
+ {
+ label: "闄勪欢",
+ align: "center",
+ prop: "commonFiles",
+ dataType: "slot",
+ fixed: "right",
+ slot: "commonFilesRef",
+ width: 120,
+ },
+ {
+ fixed: "right",
+ width: 150,
+ 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 handleFiles = (fileList) => {
+ fileList.forEach((e) => {
+ proxy.$download.name(e.url);
+ });
+};
+
+const changePage = ({ page, limit }) => {
+ pagination.currentPage = page;
+ pagination.pageSize = limit;
+ onCurrentChange(page);
+};
+
+const handleCommand = (command, row) => {
+ switch (command) {
+ case "download":
+ handleFiles(row.commonFiles);
+ break;
+ case "upload":
+ console.log(row.commonFiles);
+ openUoload(row.ticketRegistrationId);
+ break;
+ }
+};
+
+const openUoload = (id) => {
+ modalRef.value.handleImport(id);
+};
+
+const openEdit = (row) => {
+ editmodalRef.value.open(row);
+};
+
+// 涓婁紶鎴愬姛鍚庡仛浠�涔�
+const uploadSuccess = async (data) => {
+ const { code } = await productUploadFile({
+ ticketRegistrationId: data.id,
+ tempFileIds: data.tempFileIds,
+ });
+ if (code === 200) {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ getTableData();
+ }
+};
+// 鍒犻櫎
+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>
\ No newline at end of file
+<style lang="scss" scoped>
+.table_list {
+ margin-top: unset;
+}
+.tagBox {
+ margin-top: 4px;
+}
+</style>
--
Gitblit v1.9.3