|
|
@@ -0,0 +1,728 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud
|
|
|
+ :option="option"
|
|
|
+ :data="data"
|
|
|
+ ref="crud"
|
|
|
+ v-model="form"
|
|
|
+ :page.sync="page"
|
|
|
+ :permission="permissionList"
|
|
|
+ :before-open="beforeOpen"
|
|
|
+ :table-loading="loading"
|
|
|
+ @row-del="rowDel"
|
|
|
+ @row-update="rowUpdate"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @on-load="onLoad"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ v-if="permission.order_invoice_delete"
|
|
|
+ @click="handleDelete"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ icon="el-icon-check"
|
|
|
+ v-if="permission.order_invoice_update"
|
|
|
+ @click="handleBatchUpdateStatus(1)"
|
|
|
+ >
|
|
|
+ 批量标记已开票
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ icon="el-icon-close"
|
|
|
+ v-if="permission.order_invoice_update"
|
|
|
+ @click="handleBatchUpdateStatus(0)"
|
|
|
+ >
|
|
|
+ 批量标记未开票
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot-scope="{row}" slot="invoiceStatus">
|
|
|
+ <el-tag :type="getInvoiceStatusType(row.invoiceStatus)">
|
|
|
+ {{ getInvoiceStatusText(row.invoiceStatus) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot-scope="{row}" slot="invoiceType">
|
|
|
+ <el-tag :type="row.invoiceType === 'SPECIAL' ? 'success' : 'info'">
|
|
|
+ {{ row.invoiceType === 'SPECIAL' ? '专用发票' : '普通发票' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot-scope="{row}" slot="amount">
|
|
|
+ <span class="amount-text">¥{{ formatAmount(row.amount) }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot-scope="{row}" slot="taxAmount">
|
|
|
+ <span class="amount-text">¥{{ formatAmount(row.taxAmount) }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot-scope="{row}" slot="totalAmount">
|
|
|
+ <span class="amount-text total-amount">¥{{ formatAmount(row.totalAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getList, add, update, remove, getDetail, updateStatus } from '@/api/order/invoice'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+/**
|
|
|
+ * 发票查询参数类型定义
|
|
|
+ * @typedef {Object} InvoiceQueryParams
|
|
|
+ * @property {string} [orderId] - 订单ID
|
|
|
+ * @property {string} [invoiceId] - 发票ID
|
|
|
+ * @property {string} [invoiceNo] - 发票号码
|
|
|
+ * @property {string} [customerName] - 客户名称
|
|
|
+ * @property {number} [invoiceStatus] - 开票状态
|
|
|
+ * @property {string} [startDate] - 开始日期
|
|
|
+ * @property {string} [endDate] - 结束日期
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * 发票表单数据类型定义
|
|
|
+ * @typedef {Object} InvoiceForm
|
|
|
+ * @property {string} [id] - 发票ID
|
|
|
+ * @property {string} invoiceNo - 发票号码
|
|
|
+ * @property {string} invoiceCode - 发票代码
|
|
|
+ * @property {number} orderId - 订单ID
|
|
|
+ * @property {string} orderCode - 订单编码
|
|
|
+ * @property {number} customerId - 客户ID
|
|
|
+ * @property {string} customerCode - 客户编码
|
|
|
+ * @property {string} customerName - 客户名称
|
|
|
+ * @property {string} taxNo - 税号
|
|
|
+ * @property {string} invoiceTitle - 发票抬头
|
|
|
+ * @property {string} amount - 金额
|
|
|
+ * @property {string} taxAmount - 税额
|
|
|
+ * @property {string} totalAmount - 总金额
|
|
|
+ * @property {string} invoiceType - 发票类型
|
|
|
+ * @property {number} invoiceStatus - 开票状态
|
|
|
+ * @property {string} invoiceDate - 开票日期
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * 分页信息类型定义
|
|
|
+ * @typedef {Object} PageInfo
|
|
|
+ * @property {number} pageSize - 每页大小
|
|
|
+ * @property {number} currentPage - 当前页码
|
|
|
+ * @property {number} total - 总记录数
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * 发票及开票信息查询组件
|
|
|
+ * @component InvoiceIndex
|
|
|
+ */
|
|
|
+export default {
|
|
|
+ name: 'InvoiceIndex',
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ /** @type {InvoiceForm} 表单数据 */
|
|
|
+ form: {},
|
|
|
+
|
|
|
+ /** @type {InvoiceQueryParams} 查询参数 */
|
|
|
+ query: {},
|
|
|
+
|
|
|
+ /** @type {boolean} 加载状态 */
|
|
|
+ loading: true,
|
|
|
+
|
|
|
+ /** @type {PageInfo} 分页信息 */
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+
|
|
|
+ /** @type {Array<InvoiceItem>} 选中的数据列表 */
|
|
|
+ selectionList: [],
|
|
|
+
|
|
|
+ /** @type {Array<InvoiceItem>} 表格数据 */
|
|
|
+ data: [],
|
|
|
+
|
|
|
+ /** @type {Object} 表格配置选项 */
|
|
|
+ option: {
|
|
|
+ height: 'auto',
|
|
|
+ calcHeight: 30,
|
|
|
+ dialogWidth: 1000,
|
|
|
+ labelWidth: 120,
|
|
|
+ tip: false,
|
|
|
+ searchShow: true,
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ selection: true,
|
|
|
+ viewBtn: true,
|
|
|
+ editBtn: true,
|
|
|
+ addBtn: true,
|
|
|
+ delBtn: true,
|
|
|
+ dialogClickModal: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '发票号码',
|
|
|
+ prop: 'invoiceNo',
|
|
|
+ search: true,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入发票号码',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发票代码',
|
|
|
+ prop: 'invoiceCode',
|
|
|
+ search: true,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入发票代码',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订单ID',
|
|
|
+ prop: 'orderId',
|
|
|
+ search: true,
|
|
|
+ type: 'number',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入订单ID',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订单编码',
|
|
|
+ prop: 'orderCode',
|
|
|
+ search: true,
|
|
|
+ addDisplay: false,
|
|
|
+ editDisplay: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户名称',
|
|
|
+ prop: 'customerName',
|
|
|
+ search: true,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入客户名称',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户编码',
|
|
|
+ prop: 'customerCode',
|
|
|
+ search: true,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入客户编码',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '税号',
|
|
|
+ prop: 'taxNo',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入税号',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发票抬头',
|
|
|
+ prop: 'invoiceTitle',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入发票抬头',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '金额',
|
|
|
+ prop: 'amount',
|
|
|
+ slot: true,
|
|
|
+ type: 'number',
|
|
|
+ precision: 2,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入金额',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '税额',
|
|
|
+ prop: 'taxAmount',
|
|
|
+ slot: true,
|
|
|
+ type: 'number',
|
|
|
+ precision: 2,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入税额',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总金额',
|
|
|
+ prop: 'totalAmount',
|
|
|
+ slot: true,
|
|
|
+ type: 'number',
|
|
|
+ precision: 2,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入总金额',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发票类型',
|
|
|
+ prop: 'invoiceType',
|
|
|
+ slot: true,
|
|
|
+ type: 'select',
|
|
|
+ dicData: [
|
|
|
+ { label: '普通发票', value: 'NORMAL' },
|
|
|
+ { label: '专用发票', value: 'SPECIAL' }
|
|
|
+ ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择发票类型',
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开票状态',
|
|
|
+ prop: 'invoiceStatus',
|
|
|
+ slot: true,
|
|
|
+ search: true,
|
|
|
+ type: 'select',
|
|
|
+ dicData: [
|
|
|
+ { label: '未开票', value: 0 },
|
|
|
+ { label: '已开票', value: 1 },
|
|
|
+ { label: '部分开票', value: 2 }
|
|
|
+ ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择开票状态',
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开票日期',
|
|
|
+ prop: 'invoiceDate',
|
|
|
+ type: 'date',
|
|
|
+ format: 'yyyy-MM-dd',
|
|
|
+ valueFormat: 'yyyy-MM-dd',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择开票日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '创建时间',
|
|
|
+ prop: 'createTime',
|
|
|
+ type: 'datetime',
|
|
|
+ format: 'yyyy-MM-dd HH:mm:ss',
|
|
|
+ valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
|
+ addDisplay: false,
|
|
|
+ editDisplay: false,
|
|
|
+ width: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '更新时间',
|
|
|
+ prop: 'updateTime',
|
|
|
+ type: 'datetime',
|
|
|
+ format: 'yyyy-MM-dd HH:mm:ss',
|
|
|
+ valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
|
+ addDisplay: false,
|
|
|
+ editDisplay: false,
|
|
|
+ width: 160
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['permission']),
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 权限列表
|
|
|
+ * @returns {Object} 权限配置对象
|
|
|
+ */
|
|
|
+ permissionList() {
|
|
|
+ return {
|
|
|
+ addBtn: this.vaildData(this.permission.order_invoice_add, false),
|
|
|
+ viewBtn: this.vaildData(this.permission.order_invoice_view, false),
|
|
|
+ editBtn: this.vaildData(this.permission.order_invoice_edit, false),
|
|
|
+ delBtn: this.vaildData(this.permission.order_invoice_delete, false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 是否有选中的数据
|
|
|
+ * @returns {boolean} 是否有选中数据
|
|
|
+ */
|
|
|
+ hasSelection() {
|
|
|
+ return this.selectionList.length > 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取发票状态对应的标签类型
|
|
|
+ * @param {number} status - 发票状态
|
|
|
+ * @returns {string} 标签类型
|
|
|
+ */
|
|
|
+ getInvoiceStatusType(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 0: 'danger', // 未开票
|
|
|
+ 1: 'success', // 已开票
|
|
|
+ 2: 'warning' // 部分开票
|
|
|
+ }
|
|
|
+ return statusMap[status] || 'info'
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取发票状态文本
|
|
|
+ * @param {number} status - 发票状态
|
|
|
+ * @returns {string} 状态文本
|
|
|
+ */
|
|
|
+ getInvoiceStatusText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 0: '未开票',
|
|
|
+ 1: '已开票',
|
|
|
+ 2: '部分开票'
|
|
|
+ }
|
|
|
+ return statusMap[status] || '未知状态'
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 格式化金额显示
|
|
|
+ * @param {string|number} amount - 金额
|
|
|
+ * @returns {string} 格式化后的金额
|
|
|
+ */
|
|
|
+ formatAmount(amount) {
|
|
|
+ if (!amount) return '0.00'
|
|
|
+ return parseFloat(amount).toLocaleString('zh-CN', {
|
|
|
+ minimumFractionDigits: 2,
|
|
|
+ maximumFractionDigits: 2
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 批量删除处理
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async handleDelete() {
|
|
|
+ if (!this.hasSelection) {
|
|
|
+ this.$message.warning('请选择要删除的数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ await this.$confirm('确定删除选中的发票信息吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+
|
|
|
+ const ids = this.selectionList.map(item => item.id).join(',')
|
|
|
+ const res = await remove(ids)
|
|
|
+
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '删除失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ if (error !== 'cancel') {
|
|
|
+ console.error('删除发票失败:', error)
|
|
|
+ this.$message.error('删除失败，请重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 批量更新发票状态
|
|
|
+ * @param {number} status - 新状态
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async handleBatchUpdateStatus(status) {
|
|
|
+ if (!this.hasSelection) {
|
|
|
+ this.$message.warning('请选择要更新状态的数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const statusText = this.getInvoiceStatusText(status)
|
|
|
+
|
|
|
+ try {
|
|
|
+ await this.$confirm(`确定将选中的发票状态更新为"${statusText}"吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+
|
|
|
+ const ids = this.selectionList.map(item => item.id)
|
|
|
+ const res = await updateStatus(ids, status)
|
|
|
+
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('状态更新成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '状态更新失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ if (error !== 'cancel') {
|
|
|
+ console.error('更新发票状态失败:', error)
|
|
|
+ this.$message.error('状态更新失败，请重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 行删除处理
|
|
|
+ * @param {InvoiceItem} row - 要删除的行数据
|
|
|
+ * @param {number} index - 行索引
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async rowDel(row, index) {
|
|
|
+ try {
|
|
|
+ const res = await remove(row.id)
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '删除失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('删除发票失败:', error)
|
|
|
+ this.$message.error('删除失败，请重试')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 行更新处理
|
|
|
+ * @param {InvoiceForm} row - 更新的行数据
|
|
|
+ * @param {number} index - 行索引
|
|
|
+ * @param {Function} done - 完成回调
|
|
|
+ * @param {Function} loading - 加载状态回调
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async rowUpdate(row, index, done, loading) {
|
|
|
+ try {
|
|
|
+ loading()
|
|
|
+ const res = await update(row)
|
|
|
+
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ done()
|
|
|
+ this.onLoad(this.page)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '修改失败')
|
|
|
+ loading()
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('修改发票失败:', error)
|
|
|
+ this.$message.error('修改失败，请重试')
|
|
|
+ loading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 行保存处理
|
|
|
+ * @param {InvoiceForm} row - 保存的行数据
|
|
|
+ * @param {Function} done - 完成回调
|
|
|
+ * @param {Function} loading - 加载状态回调
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async rowSave(row, done, loading) {
|
|
|
+ try {
|
|
|
+ loading()
|
|
|
+ const res = await add(row)
|
|
|
+
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('添加成功')
|
|
|
+ done()
|
|
|
+ this.onLoad(this.page)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '添加失败')
|
|
|
+ loading()
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('添加发票失败:', error)
|
|
|
+ this.$message.error('添加失败，请重试')
|
|
|
+ loading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 搜索变化处理
|
|
|
+ * @param {InvoiceQueryParams} params - 搜索参数
|
|
|
+ * @param {Function} done - 完成回调
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.query = params
|
|
|
+ this.onLoad(this.page, params)
|
|
|
+ done()
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 搜索重置处理
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ searchReset() {
|
|
|
+ this.query = {}
|
|
|
+ this.onLoad(this.page)
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 选择变化处理
|
|
|
+ * @param {Array<InvoiceItem>} list - 选中的数据列表
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ selectionChange(list) {
|
|
|
+ this.selectionList = list
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 当前页变化处理
|
|
|
+ * @param {number} currentPage - 当前页码
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页大小变化处理
|
|
|
+ * @param {number} pageSize - 页大小
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 刷新变化处理
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoad(this.page, this.query)
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 打开前处理
|
|
|
+ * @param {Function} done - 完成回调
|
|
|
+ * @param {string} type - 操作类型
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ beforeOpen(done, type) {
|
|
|
+ done()
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载数据
|
|
|
+ * @param {PageInfo} page - 分页信息
|
|
|
+ * @param {InvoiceQueryParams} params - 查询参数
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async onLoad(page, params = {}) {
|
|
|
+ this.loading = true
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await getList(page.currentPage || 1, page.pageSize || 10, {
|
|
|
+ ...this.query,
|
|
|
+ ...params
|
|
|
+ })
|
|
|
+
|
|
|
+ if (res.data.success) {
|
|
|
+ const { records, total } = res.data.data
|
|
|
+ this.data = records || []
|
|
|
+ this.page.total = total || 0
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg || '获取数据失败')
|
|
|
+ this.data = []
|
|
|
+ this.page.total = 0
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取发票列表失败:', error)
|
|
|
+ this.$message.error('获取数据失败，请重试')
|
|
|
+ this.data = []
|
|
|
+ this.page.total = 0
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 组件挂载后初始化
|
|
|
+ * @returns {void}
|
|
|
+ */
|
|
|
+ mounted() {
|
|
|
+ // 默认不加载数据，需要通过搜索条件触发
|
|
|
+ this.loading = false
|
|
|
+ this.data = []
|
|
|
+ this.page.total = 0
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.amount-text {
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &.total-amount {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table {
|
|
|
+ .amount-text {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yz