| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="filters" :inline="true"> |
| | | <el-form-item label="ç³è¯·åå·:"> |
| | | <el-input v-model="filters.applyCode" placeholder="请è¾å
¥ç³è¯·åå·" clearable style="width: 200px;" /> |
| | | </el-form-item> |
| | | <el-form-item label="客æ·:"> |
| | | <el-select v-model="filters.customerId" placeholder="è¯·éæ©å®¢æ·" clearable style="width: 200px;"> |
| | | <el-option v-for="item in customerList" :key="item.id" :label="item.customerName" :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="å®¡æ ¸ç¶æ:"> |
| | | <el-select v-model="filters.status" placeholder="è¯·éæ©å®¡æ ¸ç¶æ" clearable style="width: 150px;"> |
| | | <el-option label="å¾
å®¡æ ¸" :value="0" /> |
| | | <el-option label="å®¡æ ¸éè¿" :value="1" /> |
| | | <el-option label="å®¡æ ¸ä¸éè¿" :value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ç³è¯·æ¥æ:"> |
| | | <el-date-picker |
| | | v-model="filters.dateRange" |
| | | type="daterange" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | range-separator="è³" |
| | | start-placeholder="å¼å§æ¥æ" |
| | | end-placeholder="ç»ææ¥æ" |
| | | clearable |
| | | style="width: 240px;" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="onSearch">æç´¢</el-button> |
| | | <el-button @click="resetFilters">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="table_list"> |
| | | <div class="actions"> |
| | | <div></div> |
| | | <div> |
| | | <el-button type="primary" @click="add" icon="Plus">æ°å¢ç³è¯·</el-button> |
| | | <el-button type="success" @click="handleExport" icon="Download">导åºå¼ç¥¨ç³è¯·</el-button> |
| | | </div> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | isSelection |
| | | v-loading="tableLoading" |
| | | :column="columns" |
| | | :tableData="dataList" |
| | | isShowSummary |
| | | :summaryMethod="getSummaries" |
| | | :page="{ |
| | | current: pagination.currentPage, |
| | | size: pagination.pageSize, |
| | | total: pagination.total, |
| | | }" |
| | | @selection-change="handleSelectionChange" |
| | | @pagination="changePage" |
| | | > |
| | | <template #amount="{ row }"> |
| | | <span class="text-primary">Â¥{{ formatMoney(row.amount) }}</span> |
| | | </template> |
| | | <template #taxRate="{ row }"> |
| | | <span>{{ row.taxRate }}%</span> |
| | | </template> |
| | | <template #status="{ row }"> |
| | | <el-tag :type="getStatusType(row.status)" effect="light" round> |
| | | {{ getStatusLabel(row.status) }} |
| | | </el-tag> |
| | | </template> |
| | | <template #operation="{ row }"> |
| | | <el-button type="primary" link @click="view(row)">æ¥ç</el-button> |
| | | <el-button type="primary" link @click="edit(row)" v-if="isPendingStatus(row.status)">ç¼è¾</el-button> |
| | | <el-button type="danger" link @click="handleDelete(row)" v-if="isPendingStatus(row.status)">å é¤</el-button> |
| | | <el-button type="success" link @click="handleAudit(row)" v-if="isPendingStatus(row.status)">å®¡æ ¸</el-button> |
| | | <el-button type="primary" link @click="openFileDialog(row)" v-if="isApprovedStatus(row.status)">éä»¶</el-button> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | |
| | | <FormDialog |
| | | :title="dialogTitle" |
| | | v-model="dialogVisible" |
| | | width="800px" |
| | | :operation-type="isView ? 'detail' : ''" |
| | | @confirm="submitForm" |
| | | @cancel="closeDialog" |
| | | > |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> |
| | | <el-row v-if="isView" :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å®¡æ ¸ç¶æ"> |
| | | <el-tag :type="getStatusType(form.status)" effect="light" round> |
| | | {{ getStatusLabel(form.status) }} |
| | | </el-tag> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="ç³è¯·åå·" prop="applyCode"> |
| | | <el-input v-model="form.applyCode" placeholder="ä¿ååèªå¨çæ" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客æ·" prop="customerId"> |
| | | <el-select |
| | | v-model="form.customerId" |
| | | placeholder="è¯·éæ©å®¢æ·" |
| | | style="width: 100%;" |
| | | :disabled="isEdit || isView" |
| | | filterable |
| | | @change="handleCustomerChange" |
| | | > |
| | | <el-option v-for="item in customerList" :key="item.id" :label="item.customerName" :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åºåºåå·" prop="outboundBatchNos"> |
| | | <el-input |
| | | :model-value="outboundBatchDisplayText" |
| | | placeholder="请å
鿩客æ·" |
| | | readonly |
| | | :disabled="!form.customerId || isEdit || isView" |
| | | class="outbound-batch-input" |
| | | @click="handleOutboundInputClick" |
| | | > |
| | | <template v-if="!isEdit && !isView" #append> |
| | | <el-button |
| | | :disabled="!form.customerId" |
| | | :loading="outboundBatchLoading" |
| | | @click.stop="openOutboundSelectDialog" |
| | | > |
| | | éæ© |
| | | </el-button> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å¼ç¥¨éé¢" prop="amount"> |
| | | <el-input-number |
| | | v-model="form.amount" |
| | | :min="0" |
| | | :precision="2" |
| | | :disabled="isView" |
| | | style="width: 100%;" |
| | | placeholder="æ ¹æ®æéåºåºåèªå¨æ±æ»ï¼å¯ä¿®æ¹" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç¨ç" prop="taxRate"> |
| | | <el-select v-model="form.taxRate" placeholder="è¯·éæ©ç¨ç" style="width: 100%;" :disabled="isView"> |
| | | <el-option |
| | | v-for="dict in tax_rate" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="Number(dict.value)" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票类å" prop="invoiceType"> |
| | | <el-select v-model="form.invoiceType" placeholder="è¯·éæ©å票类å" style="width: 100%;" :disabled="isView"> |
| | | <el-option label="å¢å¼ç¨ä¸ç¨å票" value="å¢å¼ç¨ä¸ç¨å票" /> |
| | | <el-option label="å¢å¼ç¨æ®éå票" value="å¢å¼ç¨æ®éå票" /> |
| | | <el-option label="çµåå票" value="çµåå票" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç³è¯·æ¥æ" prop="applyDate"> |
| | | <el-date-picker |
| | | v-model="form.applyDate" |
| | | type="date" |
| | | placeholder="éæ©æ¥æ" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 100%;" |
| | | :disabled="isView" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å建æ¶é´" prop="createTime"> |
| | | <el-date-picker |
| | | v-model="formCreateTimeDate" |
| | | type="date" |
| | | placeholder="éæ©æ¥æ" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 100%;" |
| | | :disabled="isView" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item label="å票å
容" prop="content"> |
| | | <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请è¾å
¥å票å
容" :disabled="isView" /> |
| | | </el-form-item> |
| | | <el-form-item label="夿³¨" prop="remark"> |
| | | <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请è¾å
¥å¤æ³¨" :disabled="isView" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template v-if="!isView" #footer> |
| | | <el-button type="primary" :loading="submitLoading" @click="submitForm">ç¡®å®</el-button> |
| | | <el-button @click="closeDialog">åæ¶</el-button> |
| | | </template> |
| | | </FormDialog> |
| | | |
| | | <el-dialog |
| | | v-model="outboundSelectVisible" |
| | | title="éæ©åºåºå" |
| | | width="1200px" |
| | | append-to-body |
| | | destroy-on-close |
| | | :close-on-click-modal="false" |
| | | @closed="handleOutboundDialogClosed" |
| | | > |
| | | <el-table |
| | | ref="outboundTableRef" |
| | | v-loading="outboundBatchLoading" |
| | | :data="outboundBatchList" |
| | | row-key="id" |
| | | border |
| | | stripe |
| | | max-height="480" |
| | | @selection-change="handleOutboundDialogSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column prop="outboundBatches" label="åºåºåå·" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column prop="customerName" label="客æ·åç§°" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column prop="productName" label="产ååç§°" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column prop="specificationModel" label="è§æ ¼åå·" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column prop="salesContractNo" label="éå®ååå·" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column prop="shippingNo" label="åè´§åå·" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column prop="shippingDate" label="åè´§æ¥æ" width="110" align="center" /> |
| | | <el-table-column prop="outboundAmount" label="åºåºéé¢" width="110" align="right"> |
| | | <template #default="{ row }">Â¥{{ formatMoney(row.outboundAmount) }}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="taxRate" label="ç¨ç" width="80" align="center"> |
| | | <template #default="{ row }">{{ row.taxRate }}%</template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <template #footer> |
| | | <el-button type="primary" @click="confirmOutboundSelection">ç¡®å®</el-button> |
| | | <el-button @click="outboundSelectVisible = false">åæ¶</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <FileList |
| | | v-if="fileDialogVisible" |
| | | v-model:visible="fileDialogVisible" |
| | | record-type="account_invoice_application" |
| | | :record-id="currentRecordId" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance, defineAsyncComponent } from "vue"; |
| | | import dayjs from "dayjs"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import { listCustomer } from "@/api/basicData/customer.js"; |
| | | import { |
| | | getOutboundBatchesByCustomer, |
| | | addAccountInvoiceApplication, |
| | | listPageAccountInvoiceApplication, |
| | | auditAccountInvoiceApplication, |
| | | updateAccountInvoiceApplication, |
| | | deleteAccountInvoiceApplication, |
| | | } from "@/api/financialManagement/invoiceApply.js"; |
| | | |
| | | const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue")); |
| | | |
| | | defineOptions({ |
| | | name: "å¼ç¥¨ç³è¯·", |
| | | }); |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const { tax_rate } = proxy.useDict("tax_rate"); |
| | | |
| | | const filters = reactive({ |
| | | applyCode: "", |
| | | customerId: "", |
| | | status: "", |
| | | dateRange: [], |
| | | }); |
| | | |
| | | const pagination = reactive({ |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | }); |
| | | |
| | | const columns = [ |
| | | { label: "ç³è¯·åå·", prop: "applyCode", width: "150" }, |
| | | { label: "客æ·åç§°", prop: "customerName", width: "180" }, |
| | | { label: "å¼ç¥¨éé¢", prop: "amount", dataType: "slot", slot: "amount" }, |
| | | { label: "ç¨ç", prop: "taxRate", dataType: "slot", slot: "taxRate" }, |
| | | { label: "å票类å", prop: "invoiceType", width: "130" }, |
| | | { label: "ç³è¯·æ¥æ", prop: "applyDate", width: "120" }, |
| | | { label: "å®¡æ ¸ç¶æ", prop: "status", dataType: "slot", slot: "status", width: "110", align: "center" }, |
| | | { label: "æä½", prop: "operation", dataType: "slot", slot: "operation", width: "300", fixed: "right" }, |
| | | ]; |
| | | |
| | | const dataList = ref([]); |
| | | const tableLoading = ref(false); |
| | | const selectedRows = ref([]); |
| | | const dialogVisible = ref(false); |
| | | const dialogTitle = ref(""); |
| | | const formRef = ref(null); |
| | | const isEdit = ref(false); |
| | | const isView = ref(false); |
| | | const currentId = ref(null); |
| | | |
| | | const closeDialog = () => { |
| | | dialogVisible.value = false; |
| | | outboundSelectVisible.value = false; |
| | | isView.value = false; |
| | | isEdit.value = false; |
| | | }; |
| | | |
| | | const customerList = ref([]); |
| | | const outboundBatchList = ref([]); |
| | | const outboundBatchOptions = ref([]); |
| | | const outboundBatchLoading = ref(false); |
| | | const outboundSelectVisible = ref(false); |
| | | const outboundTableRef = ref(null); |
| | | const dialogOutboundSelection = ref([]); |
| | | |
| | | const getCustomerList = () => { |
| | | listCustomer({ current: -1, size: -1, type: 0 }).then((res) => { |
| | | if (res.code === 200) { |
| | | customerList.value = res.data?.records || []; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const normalizeOutboundBatchOptions = (data) => { |
| | | const list = Array.isArray(data) ? data : []; |
| | | return list.map((item, index) => { |
| | | if (typeof item === "string" || typeof item === "number") { |
| | | const text = String(item); |
| | | return { label: text, value: text, outboundAmount: 0 }; |
| | | } |
| | | const label = |
| | | item.outboundBatches ?? |
| | | item.batchNo ?? |
| | | item.shippingNo ?? |
| | | item.outboundNo ?? |
| | | item.label ?? |
| | | `åºåºå${index + 1}`; |
| | | const value = item.id ?? item.stockOutRecordId ?? item.stockOutRecordIds ?? label; |
| | | const outboundAmount = Number(item.outboundAmount) || 0; |
| | | const taxRate = |
| | | item.taxRate !== undefined && item.taxRate !== null && item.taxRate !== "" |
| | | ? Number(item.taxRate) |
| | | : undefined; |
| | | return { label: String(label), value, outboundAmount, taxRate }; |
| | | }); |
| | | }; |
| | | |
| | | const isSameOutboundId = (a, b) => String(a) === String(b); |
| | | |
| | | const getSelectedOutboundOptions = () => { |
| | | const selected = form.outboundBatchNos || []; |
| | | return outboundBatchOptions.value.filter((opt) => |
| | | selected.some((id) => isSameOutboundId(id, opt.value)) |
| | | ); |
| | | }; |
| | | |
| | | /** æ ¡éªæéåºåºåç¨çæ¯å¦ä¸è´ï¼ä¸è´ååå¡« form.taxRate */ |
| | | const checkTaxRateConsistency = (showMessage = true) => { |
| | | const selected = getSelectedOutboundOptions(); |
| | | if (selected.length === 0) return true; |
| | | |
| | | const withTaxRate = selected.filter( |
| | | (opt) => opt.taxRate !== undefined && opt.taxRate !== null && !Number.isNaN(opt.taxRate) |
| | | ); |
| | | if (withTaxRate.length === 0) return true; |
| | | |
| | | const uniqueRates = [...new Set(withTaxRate.map((opt) => Number(opt.taxRate)))]; |
| | | if (uniqueRates.length > 1) { |
| | | if (showMessage) { |
| | | const detail = withTaxRate.map((opt) => `${opt.label}(${opt.taxRate}%)`).join("ã"); |
| | | ElMessage.error(`æéåºåºåç¨çä¸ä¸è´ï¼æ æ³å¼ç¥¨ï¼${detail}`); |
| | | } |
| | | return false; |
| | | } |
| | | |
| | | form.taxRate = uniqueRates[0]; |
| | | return true; |
| | | }; |
| | | |
| | | /** æ ¹æ®æéåºåºåæ±æ» outboundAmount ä½ä¸ºå¼ç¥¨éé¢ */ |
| | | const syncInvoiceAmount = () => { |
| | | const selected = form.outboundBatchNos || []; |
| | | const sum = outboundBatchOptions.value |
| | | .filter((opt) => selected.some((id) => isSameOutboundId(id, opt.value))) |
| | | .reduce((acc, opt) => acc + (Number(opt.outboundAmount) || 0), 0); |
| | | form.amount = sum > 0 ? Number(sum.toFixed(2)) : 0; |
| | | }; |
| | | |
| | | const getOutboundRowId = (row) => row?.id ?? row?.stockOutRecordId; |
| | | |
| | | const outboundBatchDisplayText = computed(() => { |
| | | if (isEdit.value || isView.value) { |
| | | return form.outboundBatches || ""; |
| | | } |
| | | if (form.outboundBatches) return form.outboundBatches; |
| | | const ids = form.outboundBatchNos || []; |
| | | if (!ids.length) return ""; |
| | | return outboundBatchOptions.value |
| | | .filter((opt) => ids.some((id) => isSameOutboundId(id, opt.value))) |
| | | .map((opt) => opt.label) |
| | | .join("ã"); |
| | | }); |
| | | |
| | | const handleOutboundInputClick = () => { |
| | | if (isEdit.value || isView.value) return; |
| | | openOutboundSelectDialog(); |
| | | }; |
| | | |
| | | const restoreOutboundTableSelection = () => { |
| | | nextTick(() => { |
| | | const table = outboundTableRef.value; |
| | | if (!table) return; |
| | | table.clearSelection(); |
| | | const selectedIds = new Set((form.outboundBatchNos || []).map((id) => String(id))); |
| | | outboundBatchList.value.forEach((row) => { |
| | | const rowId = getOutboundRowId(row); |
| | | if (rowId !== undefined && rowId !== null && selectedIds.has(String(rowId))) { |
| | | table.toggleRowSelection(row, true); |
| | | } |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | const openOutboundSelectDialog = () => { |
| | | if (!form.customerId || isEdit.value || isView.value) return; |
| | | outboundSelectVisible.value = true; |
| | | loadOutboundBatches(form.customerId, true).then(() => { |
| | | restoreOutboundTableSelection(); |
| | | }); |
| | | }; |
| | | |
| | | const handleOutboundDialogSelectionChange = (selection) => { |
| | | dialogOutboundSelection.value = selection; |
| | | }; |
| | | |
| | | const confirmOutboundSelection = () => { |
| | | if (dialogOutboundSelection.value.length === 0) { |
| | | ElMessage.warning("请è³å°éæ©ä¸æ¡åºåºå"); |
| | | return; |
| | | } |
| | | const prevIds = [...(form.outboundBatchNos || [])]; |
| | | const prevBatches = form.outboundBatches; |
| | | form.outboundBatchNos = dialogOutboundSelection.value |
| | | .map((row) => getOutboundRowId(row)) |
| | | .filter((id) => id !== undefined && id !== null); |
| | | form.outboundBatches = dialogOutboundSelection.value |
| | | .map((row) => row.outboundBatches ?? row.batchNo ?? row.shippingNo ?? "") |
| | | .filter(Boolean) |
| | | .join("ã"); |
| | | if (!checkTaxRateConsistency()) { |
| | | form.outboundBatchNos = prevIds; |
| | | form.outboundBatches = prevBatches; |
| | | return; |
| | | } |
| | | outboundSelectVisible.value = false; |
| | | syncInvoiceAmount(); |
| | | formRef.value?.validateField("outboundBatchNos"); |
| | | }; |
| | | |
| | | const handleOutboundDialogClosed = () => { |
| | | dialogOutboundSelection.value = []; |
| | | }; |
| | | |
| | | const loadOutboundBatches = (customerId, keepSelected = false) => { |
| | | if (!customerId) { |
| | | outboundBatchList.value = []; |
| | | outboundBatchOptions.value = []; |
| | | if (!keepSelected) { |
| | | form.outboundBatchNos = []; |
| | | form.amount = 0; |
| | | } |
| | | return Promise.resolve(); |
| | | } |
| | | outboundBatchLoading.value = true; |
| | | return getOutboundBatchesByCustomer({ customerId }) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | const list = res.data?.records ?? res.data ?? []; |
| | | outboundBatchList.value = Array.isArray(list) ? list : []; |
| | | outboundBatchOptions.value = normalizeOutboundBatchOptions(list); |
| | | } else { |
| | | outboundBatchList.value = []; |
| | | outboundBatchOptions.value = []; |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | outboundBatchList.value = []; |
| | | outboundBatchOptions.value = []; |
| | | }) |
| | | .finally(() => { |
| | | outboundBatchLoading.value = false; |
| | | if (keepSelected) { |
| | | syncInvoiceAmount(); |
| | | checkTaxRateConsistency(false); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleCustomerChange = (customerId) => { |
| | | form.outboundBatchNos = []; |
| | | form.outboundBatches = ""; |
| | | form.amount = 0; |
| | | loadOutboundBatches(customerId); |
| | | }; |
| | | |
| | | const form = reactive({ |
| | | applyCode: "", |
| | | customerId: "", |
| | | outboundBatchNos: [], |
| | | outboundBatches: "", |
| | | amount: 0, |
| | | taxRate: 13, |
| | | invoiceType: "å¢å¼ç¨ä¸ç¨å票", |
| | | applyDate: "", |
| | | content: "", |
| | | remark: "", |
| | | createTime: "", |
| | | }); |
| | | const formCreateTimeDate = computed({ |
| | | get: () => (form.createTime ? String(form.createTime).split(" ")[0] : ""), |
| | | set: (value) => { |
| | | form.createTime = value ? `${value} ${dayjs().format("HH:mm:ss")}` : ""; |
| | | }, |
| | | }); |
| | | |
| | | const rules = { |
| | | customerId: [{ required: true, message: "è¯·éæ©å®¢æ·", trigger: "change" }], |
| | | outboundBatchNos: [{ required: true, type: "array", min: 1, message: "è¯·éæ©åºåºåå·", trigger: "change" }], |
| | | amount: [{ required: true, message: "请è¾å
¥å¼ç¥¨éé¢", trigger: "blur" }], |
| | | taxRate: [{ required: true, message: "è¯·éæ©ç¨ç", trigger: "change" }], |
| | | invoiceType: [{ required: true, message: "è¯·éæ©å票类å", trigger: "change" }], |
| | | applyDate: [{ required: true, message: "è¯·éæ©ç³è¯·æ¥æ", trigger: "change" }], |
| | | }; |
| | | |
| | | /** å®¡æ ¸ç¶æï¼0å¾
å®¡æ ¸ 1å®¡æ ¸éè¿ 2å®¡æ ¸ä¸éè¿ */ |
| | | const STATUS_LABEL_MAP = { |
| | | 0: "å¾
å®¡æ ¸", |
| | | 1: "å®¡æ ¸éè¿", |
| | | 2: "å®¡æ ¸ä¸éè¿", |
| | | }; |
| | | |
| | | const STATUS_TYPE_MAP = { |
| | | 0: "warning", |
| | | 1: "success", |
| | | 2: "danger", |
| | | }; |
| | | |
| | | const normalizeStatus = (status) => { |
| | | if (status === undefined || status === null || status === "") return status; |
| | | const num = Number(status); |
| | | return Number.isNaN(num) ? status : num; |
| | | }; |
| | | |
| | | const isPendingStatus = (status) => normalizeStatus(status) === 0; |
| | | const isApprovedStatus = (status) => normalizeStatus(status) === 1; |
| | | |
| | | const fileDialogVisible = ref(false); |
| | | const currentRecordId = ref(0); |
| | | |
| | | const openFileDialog = (row) => { |
| | | currentRecordId.value = row.id; |
| | | fileDialogVisible.value = true; |
| | | }; |
| | | |
| | | const formatOutboundBatches = (value) => { |
| | | if (value === undefined || value === null || value === "") return ""; |
| | | if (Array.isArray(value)) return value.filter(Boolean).join("ã"); |
| | | return String(value) |
| | | .split(/[,ï¼]/) |
| | | .map((s) => s.trim()) |
| | | .filter(Boolean) |
| | | .join("ã"); |
| | | }; |
| | | |
| | | const normalizeTableRow = (row) => ({ |
| | | ...row, |
| | | applyCode: row.invoiceApplicationNo ?? row.applyCode, |
| | | amount: row.invoiceAmount ?? row.amount, |
| | | content: row.invoiceContent ?? row.content, |
| | | status: normalizeStatus(row.status ?? row.auditStatus), |
| | | stockOutRecordIds: row.stockOutRecordIds ?? row.stockOutRecordId ?? "", |
| | | outboundBatches: formatOutboundBatches(row.outboundBatches), |
| | | }); |
| | | |
| | | const appendFilterParams = (params) => { |
| | | if (filters.applyCode) { |
| | | params.invoiceApplicationNo = filters.applyCode; |
| | | } |
| | | if (filters.customerId) { |
| | | params.customerId = filters.customerId; |
| | | } |
| | | if (filters.status !== "" && filters.status != null) { |
| | | params.status = filters.status; |
| | | } |
| | | if (filters.dateRange?.length === 2) { |
| | | params.startDate = filters.dateRange[0]; |
| | | params.endDate = filters.dateRange[1]; |
| | | } |
| | | return params; |
| | | }; |
| | | |
| | | const buildListParams = () => { |
| | | return appendFilterParams({ |
| | | current: pagination.currentPage, |
| | | size: pagination.pageSize, |
| | | }); |
| | | }; |
| | | |
| | | const buildExportParams = () => { |
| | | const params = appendFilterParams({}); |
| | | if (selectedRows.value.length > 0) { |
| | | params.ids = selectedRows.value.map((row) => row.id).join(","); |
| | | } |
| | | return params; |
| | | }; |
| | | |
| | | const handleExport = () => { |
| | | const params = buildExportParams(); |
| | | const filename = |
| | | selectedRows.value.length > 0 |
| | | ? `å¼ç¥¨ç³è¯·_å·²é${selectedRows.value.length}æ¡_${Date.now()}.xlsx` |
| | | : `å¼ç¥¨ç³è¯·_${Date.now()}.xlsx`; |
| | | proxy.download("/accountInvoiceApplication/exportAccountInvoiceApplication", params, filename); |
| | | }; |
| | | |
| | | const getSummaries = ({ columns, data }) => { |
| | | const sums = []; |
| | | columns.forEach((col, index) => { |
| | | if (index === 0) { |
| | | sums[index] = "å计"; |
| | | } else if (col.property === "amount") { |
| | | const total = data.reduce((prev, cur) => { |
| | | const v = Number(cur.amount); |
| | | return prev + (isNaN(v) ? 0 : v); |
| | | }, 0); |
| | | sums[index] = total.toLocaleString("zh-CN", { |
| | | minimumFractionDigits: 2, |
| | | maximumFractionDigits: 2, |
| | | }); |
| | | } else { |
| | | sums[index] = ""; |
| | | } |
| | | }); |
| | | return sums; |
| | | }; |
| | | |
| | | const formatMoney = (value) => { |
| | | if (value === undefined || value === null) return "0.00"; |
| | | return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| | | }; |
| | | |
| | | const getStatusLabel = (status) => { |
| | | const num = normalizeStatus(status); |
| | | if (num === 0 || num === 1 || num === 2) { |
| | | return STATUS_LABEL_MAP[num]; |
| | | } |
| | | return "-"; |
| | | }; |
| | | |
| | | const getStatusType = (status) => { |
| | | const num = normalizeStatus(status); |
| | | if (num === 0 || num === 1 || num === 2) { |
| | | return STATUS_TYPE_MAP[num]; |
| | | } |
| | | return "info"; |
| | | }; |
| | | |
| | | const onSearch = () => { |
| | | pagination.currentPage = 1; |
| | | getTableData(); |
| | | }; |
| | | |
| | | const getTableData = () => { |
| | | tableLoading.value = true; |
| | | listPageAccountInvoiceApplication(buildListParams()) |
| | | .then((res) => { |
| | | const ok = res.code === 200 || res.code === 0; |
| | | if (ok && res.data) { |
| | | pagination.total = res.data.total ?? 0; |
| | | dataList.value = (res.data.records ?? []).map(normalizeTableRow); |
| | | } else { |
| | | ElMessage.error(res.msg || "æ¥è¯¢å¤±è´¥"); |
| | | dataList.value = []; |
| | | pagination.total = 0; |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | dataList.value = []; |
| | | pagination.total = 0; |
| | | }) |
| | | .finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const resetFilters = () => { |
| | | filters.applyCode = ""; |
| | | filters.customerId = ""; |
| | | filters.status = ""; |
| | | filters.dateRange = []; |
| | | pagination.currentPage = 1; |
| | | getTableData(); |
| | | }; |
| | | |
| | | const changePage = ({ current, size }) => { |
| | | pagination.currentPage = current; |
| | | pagination.pageSize = size; |
| | | getTableData(); |
| | | }; |
| | | |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | const fillFormFromRow = (row) => { |
| | | const outboundBatchNos = Array.isArray(row.outboundBatchNos) |
| | | ? row.outboundBatchNos |
| | | : parseStockOutRecordIds(row.stockOutRecordIds ?? row.stockOutRecordId); |
| | | Object.assign(form, { |
| | | ...row, |
| | | applyCode: row.applyCode ?? row.invoiceApplicationNo ?? "", |
| | | amount: Number(row.amount ?? row.invoiceAmount ?? 0), |
| | | content: row.content ?? row.invoiceContent, |
| | | status: normalizeStatus(row.status ?? row.auditStatus), |
| | | outboundBatchNos, |
| | | outboundBatches: formatOutboundBatches(row.outboundBatches), |
| | | createTime: row.createTime ?? "", |
| | | }); |
| | | }; |
| | | |
| | | const add = () => { |
| | | isEdit.value = false; |
| | | isView.value = false; |
| | | dialogTitle.value = "æ°å¢å¼ç¥¨ç³è¯·"; |
| | | Object.assign(form, { |
| | | applyCode: "", |
| | | customerId: "", |
| | | outboundBatchNos: [], |
| | | outboundBatches: "", |
| | | amount: 0, |
| | | taxRate: 13, |
| | | invoiceType: "å¢å¼ç¨ä¸ç¨å票", |
| | | applyDate: new Date().toISOString().split("T")[0], |
| | | content: "", |
| | | remark: "", |
| | | createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), |
| | | }); |
| | | outboundBatchList.value = []; |
| | | outboundBatchOptions.value = []; |
| | | dialogVisible.value = true; |
| | | }; |
| | | |
| | | const parseStockOutRecordIds = (value) => { |
| | | if (!value) return []; |
| | | if (Array.isArray(value)) return value; |
| | | return String(value) |
| | | .split(/[,ï¼]/) |
| | | .map((s) => s.trim()) |
| | | .filter(Boolean) |
| | | .map((s) => (/^\d+$/.test(s) ? Number(s) : s)); |
| | | }; |
| | | |
| | | const buildSubmitPayload = (forUpdate = false) => { |
| | | const payload = { |
| | | customerId: form.customerId, |
| | | stockOutRecordIds: (form.outboundBatchNos || []).join(","), |
| | | invoiceApplicationNo: form.applyCode || "", |
| | | invoiceType: form.invoiceType, |
| | | applyDate: form.applyDate, |
| | | invoiceContent: form.content, |
| | | remark: form.remark || "", |
| | | invoiceAmount: form.amount, |
| | | taxRate: form.taxRate, |
| | | status: 0, |
| | | createTime: form.createTime, |
| | | }; |
| | | if (forUpdate) { |
| | | payload.id = currentId.value; |
| | | } |
| | | return payload; |
| | | }; |
| | | |
| | | const edit = (row) => { |
| | | isEdit.value = true; |
| | | isView.value = false; |
| | | currentId.value = row.id; |
| | | dialogTitle.value = "ç¼è¾å¼ç¥¨ç³è¯·"; |
| | | fillFormFromRow(row); |
| | | dialogVisible.value = true; |
| | | loadOutboundBatches(form.customerId, true); |
| | | }; |
| | | |
| | | const view = (row) => { |
| | | isView.value = true; |
| | | isEdit.value = false; |
| | | dialogTitle.value = "æ¥çå¼ç¥¨ç³è¯·"; |
| | | fillFormFromRow(row); |
| | | dialogVisible.value = true; |
| | | }; |
| | | |
| | | const submitAudit = (row, status) => { |
| | | auditAccountInvoiceApplication({ id: row.id, status }) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | ElMessage.success(status === 1 ? "å®¡æ ¸éè¿" : "å®¡æ ¸ä¸éè¿"); |
| | | getTableData(); |
| | | } else { |
| | | ElMessage.error(res.msg || "审æ¹å¤±è´¥"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | ElMessage.error("审æ¹å¤±è´¥"); |
| | | }); |
| | | }; |
| | | |
| | | const handleDelete = (row) => { |
| | | ElMessageBox.confirm(`确认å é¤ç³è¯·åã${row.applyCode ?? row.invoiceApplicationNo}ãåï¼`, "æç¤º", { |
| | | confirmButtonText: "ç¡®å®", |
| | | cancelButtonText: "åæ¶", |
| | | type: "warning", |
| | | }).then(() => { |
| | | deleteAccountInvoiceApplication([row.id]) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | ElMessage.success("å 餿å"); |
| | | getTableData(); |
| | | } else { |
| | | ElMessage.error(res.msg || "å é¤å¤±è´¥"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | ElMessage.error("å é¤å¤±è´¥"); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | const handleAudit = (row) => { |
| | | ElMessageBox.confirm("è¯·éæ©å®¡æ¹ç»æ", "å¼ç¥¨ç³è¯·å®¡æ ¸", { |
| | | confirmButtonText: "å®¡æ ¸éè¿", |
| | | cancelButtonText: "å®¡æ ¸ä¸éè¿", |
| | | distinguishCancelAndClose: true, |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | submitAudit(row, 1); |
| | | }) |
| | | .catch((action) => { |
| | | if (action === "cancel") { |
| | | submitAudit(row, 2); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleInvoice = (row) => { |
| | | ElMessageBox.confirm("确认已å¼å
·å票ï¼", "æç¤º", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "åæ¶", |
| | | type: "info", |
| | | }).then(() => { |
| | | ElMessage.success("å¼ç¥¨å®æ"); |
| | | getTableData(); |
| | | }); |
| | | }; |
| | | |
| | | const handleBatchApply = () => { |
| | | ElMessage.success(`æ¹éç³è¯· ${selectedRows.value.length} æ¡è®°å½`); |
| | | }; |
| | | |
| | | const submitLoading = ref(false); |
| | | |
| | | const submitForm = () => { |
| | | formRef.value.validate((valid) => { |
| | | if (!valid) return; |
| | | if (!checkTaxRateConsistency()) return; |
| | | |
| | | submitLoading.value = true; |
| | | const request = isEdit.value |
| | | ? updateAccountInvoiceApplication(buildSubmitPayload(true)) |
| | | : addAccountInvoiceApplication(buildSubmitPayload()); |
| | | |
| | | request |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | ElMessage.success(isEdit.value ? "ä¿®æ¹æå" : "æ°å¢æå"); |
| | | closeDialog(); |
| | | getTableData(); |
| | | } else { |
| | | ElMessage.error(res.msg || (isEdit.value ? "ä¿®æ¹å¤±è´¥" : "æ°å¢å¤±è´¥")); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | ElMessage.error(isEdit.value ? "ä¿®æ¹å¤±è´¥" : "æ°å¢å¤±è´¥"); |
| | | }) |
| | | .finally(() => { |
| | | submitLoading.value = false; |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getCustomerList(); |
| | | getTableData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .actions { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .text-primary { |
| | | color: #409eff; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .outbound-batch-input:not(.is-disabled) { |
| | | :deep(.el-input__wrapper) { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | </style> |