|
@@ -81,59 +81,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getList, add, update, remove, getDetail, updateStatus } from '@/api/order/invoice'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import {
|
|
|
- INVOICE_TYPES,
|
|
|
- INVOICE_STATUS,
|
|
|
- INVOICE_TYPE_OPTIONS,
|
|
|
- INVOICE_STATUS_OPTIONS,
|
|
|
- getInvoiceTypeLabel,
|
|
|
- getInvoiceTypeTagType,
|
|
|
- getInvoiceStatusLabel,
|
|
|
- getInvoiceStatusTagType
|
|
|
-} from './constants'
|
|
|
-
|
|
|
-/**
|
|
|
- * 发票查询参数类型定义
|
|
|
- * @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 - 总记录数
|
|
|
- */
|
|
|
+import invoiceMixin from '@/mixins/order/invoiceMixin'
|
|
|
|
|
|
/**
|
|
|
* 发票及开票信息查询组件
|
|
@@ -141,578 +89,7 @@ import {
|
|
|
*/
|
|
|
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',
|
|
|
- search: true,
|
|
|
- width: 120,
|
|
|
- dicData: INVOICE_TYPE_OPTIONS,
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请选择发票类型',
|
|
|
- trigger: 'change'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: '开票状态',
|
|
|
- prop: 'invoiceStatus',
|
|
|
- slot: true,
|
|
|
- search: true,
|
|
|
- type: 'select',
|
|
|
- dicData: INVOICE_STATUS_OPTIONS,
|
|
|
- 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 {string} type - 发票类型
|
|
|
- * @returns {string} 标签文本
|
|
|
- */
|
|
|
- getInvoiceTypeLabel,
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取发票类型标签样式
|
|
|
- * @param {string} type - 发票类型
|
|
|
- * @returns {string} 标签样式类型
|
|
|
- */
|
|
|
- getInvoiceTypeTagType,
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取发票状态标签文本
|
|
|
- * @param {number} status - 发票状态
|
|
|
- * @returns {string} 标签文本
|
|
|
- */
|
|
|
- getInvoiceStatusLabel,
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取发票状态标签样式
|
|
|
- * @param {number} status - 发票状态
|
|
|
- * @returns {string} 标签样式类型
|
|
|
- */
|
|
|
- getInvoiceStatusTagType,
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * 格式化金额显示
|
|
|
- * @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 = getInvoiceStatusLabel(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('状态更新成功')
|
|
|
- await 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
|
|
|
- }
|
|
|
+ mixins: [invoiceMixin]
|
|
|
}
|
|
|
</script>
|
|
|
|