| | |
| | | </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.name" :value="item.id" /> |
| | | <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="pending" /> |
| | | <el-option label="å·²å®¡æ ¸" value="approved" /> |
| | | <el-option label="已驳å" value="rejected" /> |
| | | <el-option label="å·²å¼ç¥¨" value="invoiced" /> |
| | | <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="getTableData">æç´¢</el-button> |
| | | <el-button type="primary" @click="onSearch">æç´¢</el-button> |
| | | <el-button @click="resetFilters">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | <div></div> |
| | | <div> |
| | | <el-button type="primary" @click="add" icon="Plus">æ°å¢ç³è¯·</el-button> |
| | | <el-button @click="handleBatchApply" icon="Document" :disabled="selectedRows.length === 0">æ¹éç³è¯·</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" |
| | | :page="{ |
| | |
| | | <span>{{ row.taxRate }}%</span> |
| | | </template> |
| | | <template #status="{ row }"> |
| | | <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag> |
| | | <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="row.status === 'pending'">ç¼è¾</el-button> |
| | | <el-button type="success" link @click="handleAudit(row)" v-if="row.status === 'pending'">å®¡æ ¸</el-button> |
| | | <el-button type="warning" link @click="handleInvoice(row)" v-if="row.status === 'approved'">å¼ç¥¨</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="warning" link @click="handleInvoice(row)" v-if="isApprovedStatus(row.status)">å¼ç¥¨</el-button> --> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | |
| | | <FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false"> |
| | | <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 :gutter="20"> |
| | | <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"> |
| | | <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" /> |
| | | <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-select |
| | | v-model="form.outboundBatchNos" |
| | | multiple |
| | | collapse-tags |
| | | collapse-tags-tooltip |
| | | filterable |
| | | placeholder="请å
鿩客æ·" |
| | | style="width: 100%;" |
| | | :disabled="!form.customerId || isView" |
| | | :loading="outboundBatchLoading" |
| | | @change="handleOutboundBatchChange" |
| | | > |
| | | <el-option |
| | | v-for="item in outboundBatchOptions" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <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" style="width: 100%;" /> |
| | | <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%;"> |
| | | <el-select v-model="form.taxRate" placeholder="è¯·éæ©ç¨ç" style="width: 100%;" :disabled="isView"> |
| | | <el-option |
| | | v-for="dict in tax_rate" |
| | | :key="dict.value" |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票类å" prop="invoiceType"> |
| | | <el-select v-model="form.invoiceType" placeholder="è¯·éæ©å票类å" style="width: 100%;"> |
| | | <el-select v-model="form.invoiceType" placeholder="è¯·éæ©å票类å" style="width: 100%;" :disabled="isView"> |
| | | <el-option label="å¢å¼ç¨ä¸ç¨å票" value="special" /> |
| | | <el-option label="å¢å¼ç¨æ®éå票" value="normal" /> |
| | | <el-option label="çµåå票" value="electronic" /> |
| | |
| | | </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%;" /> |
| | | <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-form-item label="å票å
容" prop="content"> |
| | | <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请è¾å
¥å票å
容" /> |
| | | <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="请è¾å
¥å¤æ³¨" /> |
| | | <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请è¾å
¥å¤æ³¨" :disabled="isView" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button type="primary" @click="submitForm">ç¡®å®</el-button> |
| | | <el-button @click="dialogVisible = false">åæ¶</el-button> |
| | | <template v-if="!isView" #footer> |
| | | <el-button type="primary" :loading="submitLoading" @click="submitForm">ç¡®å®</el-button> |
| | | <el-button @click="closeDialog">åæ¶</el-button> |
| | | </template> |
| | | </FormDialog> |
| | | </div> |
| | |
| | | import { ref, reactive, onMounted, getCurrentInstance } from "vue"; |
| | | 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"; |
| | | |
| | | defineOptions({ |
| | | name: "å¼ç¥¨ç³è¯·", |
| | |
| | | applyCode: "", |
| | | customerId: "", |
| | | status: "", |
| | | dateRange: [], |
| | | }); |
| | | |
| | | const pagination = reactive({ |
| | |
| | | const columns = [ |
| | | { label: "ç³è¯·åå·", prop: "applyCode", width: "150" }, |
| | | { label: "客æ·åç§°", prop: "customerName", width: "180" }, |
| | | { label: "å¼ç¥¨éé¢", prop: "amount", slot: "amount" }, |
| | | { label: "ç¨ç", prop: "taxRate", slot: "taxRate" }, |
| | | { label: "å¼ç¥¨éé¢", prop: "amount", dataType: "slot", slot: "amount" }, |
| | | { label: "ç¨ç", prop: "taxRate", dataType: "slot", slot: "taxRate" }, |
| | | { label: "å票类å", prop: "invoiceTypeLabel", width: "130" }, |
| | | { label: "ç³è¯·æ¥æ", prop: "applyDate", width: "120" }, |
| | | { label: "ç¶æ", prop: "status", slot: "status" }, |
| | | { label: "æä½", prop: "operation", slot: "operation", width: "200", fixed: "right" }, |
| | | { label: "å®¡æ ¸ç¶æ", prop: "status", dataType: "slot", slot: "status", width: "110", align: "center" }, |
| | | { label: "æä½", prop: "operation", dataType: "slot", slot: "operation", width: "260", 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 customerList = [ |
| | | { id: 1, name: "åäº¬ç§ææéå
¬å¸" }, |
| | | { id: 2, name: "䏿µ·è´¸æå
¬å¸" }, |
| | | { id: 3, name: "广å·å®ä¸æéå
¬å¸" }, |
| | | { id: 4, name: "æ·±å³çµåå
¬å¸" }, |
| | | ]; |
| | | const closeDialog = () => { |
| | | dialogVisible.value = false; |
| | | isView.value = false; |
| | | isEdit.value = false; |
| | | }; |
| | | |
| | | const customerList = ref([]); |
| | | const outboundBatchOptions = ref([]); |
| | | const outboundBatchLoading = ref(false); |
| | | |
| | | 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 getSelectedOutboundOptions = () => { |
| | | const selected = form.outboundBatchNos || []; |
| | | return outboundBatchOptions.value.filter((opt) => selected.includes(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.includes(opt.value)) |
| | | .reduce((acc, opt) => acc + (Number(opt.outboundAmount) || 0), 0); |
| | | form.amount = sum > 0 ? Number(sum.toFixed(2)) : 0; |
| | | }; |
| | | |
| | | const handleOutboundBatchChange = () => { |
| | | syncInvoiceAmount(); |
| | | checkTaxRateConsistency(); |
| | | }; |
| | | |
| | | const loadOutboundBatches = (customerId, keepSelected = false) => { |
| | | if (!customerId) { |
| | | 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 ?? []; |
| | | outboundBatchOptions.value = normalizeOutboundBatchOptions(list); |
| | | } else { |
| | | outboundBatchOptions.value = []; |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | outboundBatchOptions.value = []; |
| | | }) |
| | | .finally(() => { |
| | | outboundBatchLoading.value = false; |
| | | if (keepSelected) { |
| | | syncInvoiceAmount(); |
| | | checkTaxRateConsistency(false); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleCustomerChange = (customerId) => { |
| | | form.outboundBatchNos = []; |
| | | form.amount = 0; |
| | | loadOutboundBatches(customerId); |
| | | }; |
| | | |
| | | const form = reactive({ |
| | | applyCode: "", |
| | | customerId: "", |
| | | outboundBatchNos: [], |
| | | amount: 0, |
| | | taxRate: 13, |
| | | invoiceType: "special", |
| | |
| | | |
| | | 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" }], |
| | | }; |
| | | |
| | | const mockData = [ |
| | | { id: 1, applyCode: "KP2024001", customerId: 1, customerName: "åäº¬ç§ææéå
¬å¸", amount: 5000, taxRate: 13, invoiceType: "special", invoiceTypeLabel: "å¢å¼ç¨ä¸ç¨å票", applyDate: "2024-01-15", status: "pending", content: "软件æå¡è´¹", remark: "" }, |
| | | { id: 2, applyCode: "KP2024002", customerId: 2, customerName: "䏿µ·è´¸æå
¬å¸", amount: 8000, taxRate: 13, invoiceType: "normal", invoiceTypeLabel: "å¢å¼ç¨æ®éå票", applyDate: "2024-01-16", status: "approved", content: "ååéå®", remark: "" }, |
| | | { id: 3, applyCode: "KP2024003", customerId: 3, customerName: "广å·å®ä¸æéå
¬å¸", amount: 12000, taxRate: 6, invoiceType: "electronic", invoiceTypeLabel: "çµåå票", applyDate: "2024-01-18", status: "invoiced", content: "ææ¯æå¡è´¹", remark: "" }, |
| | | ]; |
| | | const INVOICE_TYPE_LABEL_MAP = { |
| | | special: "å¢å¼ç¨ä¸ç¨å票", |
| | | normal: "å¢å¼ç¨æ®éå票", |
| | | electronic: "çµåå票", |
| | | }; |
| | | |
| | | /** å®¡æ ¸ç¶æï¼0å¾
å®¡æ ¸ 1å®¡æ ¸éè¿ 2å®¡æ ¸ä¸éè¿ */ |
| | | const STATUS_LABEL_MAP = { |
| | | 0: "å¾
å®¡æ ¸", |
| | | 1: "å®¡æ ¸éè¿", |
| | | 2: "å®¡æ ¸ä¸éè¿", |
| | | }; |
| | | |
| | | const STATUS_TYPE_MAP = { |
| | | 0: "warning", |
| | | 1: "success", |
| | | 2: "danger", |
| | | }; |
| | | |
| | | const getInvoiceTypeLabel = (type) => INVOICE_TYPE_LABEL_MAP[type] || type || ""; |
| | | |
| | | 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 normalizeTableRow = (row) => ({ |
| | | ...row, |
| | | applyCode: row.invoiceApplicationNo ?? row.applyCode, |
| | | amount: row.invoiceAmount ?? row.amount, |
| | | content: row.invoiceContent ?? row.content, |
| | | status: normalizeStatus(row.status ?? row.auditStatus), |
| | | invoiceTypeLabel: row.invoiceTypeLabel || getInvoiceTypeLabel(row.invoiceType), |
| | | }); |
| | | |
| | | 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 formatMoney = (value) => { |
| | | if (value === undefined || value === null) return "0.00"; |
| | |
| | | }; |
| | | |
| | | const getStatusLabel = (status) => { |
| | | const map = { pending: "å¾
å®¡æ ¸", approved: "å·²å®¡æ ¸", rejected: "已驳å", invoiced: "å·²å¼ç¥¨" }; |
| | | return map[status] || status; |
| | | const num = normalizeStatus(status); |
| | | if (num === 0 || num === 1 || num === 2) { |
| | | return STATUS_LABEL_MAP[num]; |
| | | } |
| | | return "-"; |
| | | }; |
| | | |
| | | const getStatusType = (status) => { |
| | | const map = { pending: "warning", approved: "success", rejected: "danger", invoiced: "primary" }; |
| | | return map[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 = () => { |
| | | let result = [...mockData]; |
| | | if (filters.applyCode) { |
| | | result = result.filter(item => item.applyCode.includes(filters.applyCode)); |
| | | 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; |
| | | } |
| | | if (filters.customerId) { |
| | | result = result.filter(item => item.customerId === filters.customerId); |
| | | } |
| | | if (filters.status) { |
| | | result = result.filter(item => item.status === filters.status); |
| | | } |
| | | pagination.total = result.length; |
| | | dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize); |
| | | }) |
| | | .catch(() => { |
| | | dataList.value = []; |
| | | pagination.total = 0; |
| | | }) |
| | | .finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const resetFilters = () => { |
| | | filters.applyCode = ""; |
| | | filters.customerId = ""; |
| | | filters.status = ""; |
| | | filters.dateRange = []; |
| | | pagination.currentPage = 1; |
| | | getTableData(); |
| | | }; |
| | |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | const fillFormFromRow = (row) => { |
| | | const outboundBatchNos = Array.isArray(row.outboundBatchNos) |
| | | ? row.outboundBatchNos |
| | | : parseStockOutRecordIds(row.stockOutRecordIds ?? row.outboundBatches); |
| | | Object.assign(form, { |
| | | ...row, |
| | | applyCode: row.applyCode ?? row.invoiceApplicationNo ?? "", |
| | | amount: row.amount ?? row.invoiceAmount, |
| | | content: row.content ?? row.invoiceContent, |
| | | status: normalizeStatus(row.status ?? row.auditStatus), |
| | | outboundBatchNos, |
| | | }); |
| | | }; |
| | | |
| | | const add = () => { |
| | | isEdit.value = false; |
| | | isView.value = false; |
| | | dialogTitle.value = "æ°å¢å¼ç¥¨ç³è¯·"; |
| | | Object.assign(form, { |
| | | applyCode: "KP" + Date.now().toString().slice(-8), |
| | | customerId: "", |
| | | outboundBatchNos: [], |
| | | amount: 0, |
| | | taxRate: 13, |
| | | invoiceType: "special", |
| | |
| | | content: "", |
| | | remark: "", |
| | | }); |
| | | 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, |
| | | }; |
| | | if (forUpdate) { |
| | | payload.id = currentId.value; |
| | | } |
| | | return payload; |
| | | }; |
| | | |
| | | const edit = (row) => { |
| | | isEdit.value = true; |
| | | isView.value = false; |
| | | currentId.value = row.id; |
| | | dialogTitle.value = "ç¼è¾å¼ç¥¨ç³è¯·"; |
| | | Object.assign(form, row); |
| | | fillFormFromRow(row); |
| | | dialogVisible.value = true; |
| | | loadOutboundBatches(form.customerId, true); |
| | | }; |
| | | |
| | | const view = (row) => { |
| | | ElMessage.info(`æ¥çç³è¯·å: ${row.applyCode}`); |
| | | isView.value = true; |
| | | isEdit.value = false; |
| | | dialogTitle.value = "æ¥çå¼ç¥¨ç³è¯·"; |
| | | fillFormFromRow(row); |
| | | dialogVisible.value = true; |
| | | loadOutboundBatches(form.customerId, 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: "驳å", |
| | | ElMessageBox.confirm("è¯·éæ©å®¡æ¹ç»æ", "å¼ç¥¨ç³è¯·å®¡æ ¸", { |
| | | confirmButtonText: "å®¡æ ¸éè¿", |
| | | cancelButtonText: "å®¡æ ¸ä¸éè¿", |
| | | distinguishCancelAndClose: true, |
| | | type: "warning", |
| | | }).then(() => { |
| | | const index = mockData.findIndex(item => item.id === row.id); |
| | | if (index !== -1) { |
| | | mockData[index].status = "approved"; |
| | | } |
| | | ElMessage.success("å®¡æ ¸éè¿"); |
| | | getTableData(); |
| | | }).catch((action) => { |
| | | }) |
| | | .then(() => { |
| | | submitAudit(row, 1); |
| | | }) |
| | | .catch((action) => { |
| | | if (action === "cancel") { |
| | | const index = mockData.findIndex(item => item.id === row.id); |
| | | if (index !== -1) { |
| | | mockData[index].status = "rejected"; |
| | | } |
| | | ElMessage.warning("已驳å"); |
| | | getTableData(); |
| | | submitAudit(row, 2); |
| | | } |
| | | }); |
| | | }; |
| | |
| | | cancelButtonText: "åæ¶", |
| | | type: "info", |
| | | }).then(() => { |
| | | const index = mockData.findIndex(item => item.id === row.id); |
| | | if (index !== -1) { |
| | | mockData[index].status = "invoiced"; |
| | | } |
| | | ElMessage.success("å¼ç¥¨å®æ"); |
| | | getTableData(); |
| | | }); |
| | |
| | | ElMessage.success(`æ¹éç³è¯· ${selectedRows.value.length} æ¡è®°å½`); |
| | | }; |
| | | |
| | | const submitLoading = ref(false); |
| | | |
| | | const submitForm = () => { |
| | | formRef.value.validate((valid) => { |
| | | if (valid) { |
| | | const customer = customerList.find(item => item.id === form.customerId); |
| | | const invoiceTypeMap = { special: "å¢å¼ç¨ä¸ç¨å票", normal: "å¢å¼ç¨æ®éå票", electronic: "çµåå票" }; |
| | | if (isEdit.value) { |
| | | const index = mockData.findIndex(item => item.id === currentId.value); |
| | | if (index !== -1) { |
| | | mockData[index] = { ...mockData[index], ...form, customerName: customer?.name, invoiceTypeLabel: invoiceTypeMap[form.invoiceType] }; |
| | | } |
| | | ElMessage.success("ç¼è¾æå"); |
| | | } else { |
| | | const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1; |
| | | mockData.push({ id: newId, ...form, customerName: customer?.name, invoiceTypeLabel: invoiceTypeMap[form.invoiceType], status: "pending" }); |
| | | ElMessage.success("æ°å¢æå"); |
| | | } |
| | | dialogVisible.value = false; |
| | | 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> |