Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web
This commit is contained in:
Leo_Ding
commit
bc094f968c
@ -11,5 +11,27 @@ export const useList = (params:any) => request.get('/v1/order/use_list',{params}
|
||||
export const hostCaseList = (params:any) => request.get('/v1/host_case/case_list',{params})
|
||||
// 镜像列表
|
||||
export const getImageList = (params:any) => request.get('/v1/image/image_list',{params})
|
||||
|
||||
|
||||
// 发票列表
|
||||
export const getinvoiceTitleList = (params:any) => request.get('/v1/invoice_title/invoice_title_list',{params})
|
||||
|
||||
// 设置是否是默认抬头发票
|
||||
export const getDefaultInvoiceTitle = (id:any) => request.get(`/v1/invoice_title/default_invoice_title/${id}`)
|
||||
|
||||
// 获取发票详情
|
||||
export const invoiceTitleInfo = (id:any) => request.get(`/v1/invoice_title/invoice_title_info/${id}`)
|
||||
|
||||
|
||||
// 编辑发票
|
||||
export const UpdateDefaultInvoiceTitle = (params:any) => request.put('/v1/invoice_title/update_invoice_title',params)
|
||||
|
||||
|
||||
// 新增抬头
|
||||
export const AddDefaultInvoiceTitle = (params:any) => request.put('/v1/invoice_title/add_invoice_title',params)
|
||||
|
||||
// 删除发票抬头
|
||||
export const DelInvoiceTitleInfo = (id:any) => request.delete(`/v1/invoice_title/delete_invoice_title/${id}`)
|
||||
|
||||
// 删除镜像
|
||||
export const delImageItem = (params:any) => request.delete(`/v1/image/delete_image/${params.image_id}`)
|
||||
@ -7,7 +7,9 @@
|
||||
</h1>
|
||||
<div class="header-actions">
|
||||
<a-button type="primary" @click="showAddModal" size="large">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
新增抬头
|
||||
</a-button>
|
||||
</div>
|
||||
@ -15,39 +17,21 @@
|
||||
|
||||
<!-- 发票抬头列表 -->
|
||||
<div class="invoice-list-container">
|
||||
<a-alert
|
||||
v-if="invoiceHeaders.length === 0"
|
||||
message="暂无发票抬头"
|
||||
description="点击上方按钮添加您的第一个发票抬头"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<a-alert v-if="invoiceHeaders.length === 0" message="暂无发票抬头" description="点击上方按钮添加您的第一个发票抬头" type="info"
|
||||
show-icon style="margin-bottom: 20px;" />
|
||||
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-col
|
||||
v-for="header in sortedHeaders"
|
||||
:key="header.id"
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
>
|
||||
<a-card
|
||||
:class="['invoice-card', { 'default-card': header.isDefault }]"
|
||||
:bordered="true"
|
||||
>
|
||||
<a-col v-for="header in sortedHeaders" :key="header.invoiceTitleID" :xs="24" :sm="24" :md="12" :lg="8">
|
||||
<a-card :class="['invoice-card', { 'default-card': header.is_default }]" :bordered="true">
|
||||
<template #actions>
|
||||
<span @click="editHeader(header)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</span>
|
||||
<span
|
||||
@click="setDefaultHeader(header.id)"
|
||||
:class="{ disabled: header.isDefault }"
|
||||
>
|
||||
<span @click="setDefaultHeader(header.invoiceTitleID)"
|
||||
:class="{ disabled: header.is_default }">
|
||||
<StarOutlined />
|
||||
{{ header.isDefault ? '已是默认' : '设为默认' }}
|
||||
{{ header.is_default ? '已是默认' : '设为默认' }}
|
||||
</span>
|
||||
<span @click="showDeleteConfirm(header)">
|
||||
<DeleteOutlined />
|
||||
@ -58,60 +42,48 @@
|
||||
<a-card-meta>
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
<span class="header-name">{{ header.name }}</span>
|
||||
<a-tag
|
||||
:color="getTypeColor(header.type)"
|
||||
size="small"
|
||||
>
|
||||
{{ getTypeText(header.type) }}
|
||||
</a-tag>
|
||||
<a-tag
|
||||
:color="getInvoiceTypeColor(header.invoiceType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getInvoiceTypeText(header.invoiceType) }}
|
||||
<span class="header-name">
|
||||
{{ header.invoice_title }}
|
||||
<a-tag :color="getTypeColor(header.title_type)" size="small">
|
||||
{{ getTypeText(header.title_type) }}
|
||||
</a-tag>
|
||||
<span v-if="header.is_default" class="default-badge">
|
||||
<CheckCircleFilled style="color: #52c41a; margin-right: 4px;" />
|
||||
<span>默认抬头</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<div class="card-content">
|
||||
<!-- 默认标识 -->
|
||||
<div v-if="header.isDefault" class="default-badge">
|
||||
<CheckCircleFilled style="color: #52c41a; margin-right: 4px;" />
|
||||
<span>默认抬头</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<div class="info-section">
|
||||
<div v-if="header.taxNumber" class="info-row">
|
||||
<div v-if="header.invoice_taxpayer_id" class="info-row">
|
||||
<span class="info-label">税号：</span>
|
||||
<span class="info-value">{{ header.taxNumber }}</span>
|
||||
<span class="info-value">{{ header.invoice_taxpayer_id }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="header.bankName" class="info-row">
|
||||
<div v-if="header.invoice_ban_name" class="info-row">
|
||||
<span class="info-label">开户银行：</span>
|
||||
<span class="info-value">{{ header.bankName }}</span>
|
||||
<span class="info-value">{{ header.invoice_ban_name }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="header.bankAccount" class="info-row">
|
||||
<div v-if="header.invoice_bank_account" class="info-row">
|
||||
<span class="info-label">银行账号：</span>
|
||||
<span class="info-value">{{ header.bankAccount }}</span>
|
||||
<span class="info-value">{{ header.invoice_bank_account }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="header.companyAddress" class="info-row">
|
||||
<div v-if="header.invoice_address" class="info-row">
|
||||
<span class="info-label">企业地址：</span>
|
||||
<span class="info-value">{{ header.companyAddress }}</span>
|
||||
<span class="info-value">{{ header.invoice_address }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="header.companyPhone" class="info-row">
|
||||
<div v-if="header.invoice_phone" class="info-row">
|
||||
<span class="info-label">企业电话：</span>
|
||||
<span class="info-value">{{ header.companyPhone }}</span>
|
||||
<span class="info-value">{{ header.invoice_phone }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row create-time">
|
||||
<span class="info-label">创建时间：</span>
|
||||
<span class="info-value">{{ header.createTime }}</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">发票类型：</span>
|
||||
<a-tag :color="getInvoiceTypeColor(header.invoice_type)" size="small">
|
||||
{{ getInvoiceTypeText(header.invoice_type) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -123,53 +95,26 @@
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="modalVisible"
|
||||
:title="modalTitle"
|
||||
width="600px"
|
||||
:maskClosable="false"
|
||||
:keyboard="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="confirmLoading"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-modal v-model:visible="modalVisible" :title="modalTitle" width="600px" :maskClosable="false"
|
||||
:keyboard="false" @ok="handleSubmit" @cancel="handleCancel" :confirm-loading="confirmLoading">
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }" layout="horizontal">
|
||||
<!-- 发票抬头名称 -->
|
||||
<a-form-item label="发票抬头" name="name" required>
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入发票抬头名称"
|
||||
:maxlength="100"
|
||||
show-count
|
||||
/>
|
||||
<a-form-item label="发票抬头" name="invoice_title" required>
|
||||
<a-input v-model:value="formData.invoice_title" placeholder="请输入发票抬头名称" :maxlength="100" show-count />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 抬头类型 -->
|
||||
<a-form-item label="抬头类型" name="type" required>
|
||||
<a-radio-group
|
||||
v-model:value="formData.type"
|
||||
button-style="solid"
|
||||
@change="handleTypeChange"
|
||||
>
|
||||
<a-radio-button value="personal">个人</a-radio-button>
|
||||
<a-radio-button value="enterprise">企业</a-radio-button>
|
||||
<a-radio-button value="institution">事业单位</a-radio-button>
|
||||
<a-form-item label="抬头类型" name="title_type" required>
|
||||
<a-radio-group v-model:value="formData.title_type" button-style="solid" @change="handleTypeChange">
|
||||
<a-radio-button value="USER">个人</a-radio-button>
|
||||
<a-radio-button value="COMPANY">企业</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发票类型 -->
|
||||
<a-form-item label="发票类型" name="invoiceType" required>
|
||||
<a-select
|
||||
v-model:value="formData.invoiceType"
|
||||
placeholder="请选择发票类型"
|
||||
>
|
||||
<a-form-item label="发票类型" name="invoice_type" required>
|
||||
<a-select v-model:value="formData.invoice_type" placeholder="请选择发票类型">
|
||||
<a-select-option value="vat">增值税专用发票</a-select-option>
|
||||
<a-select-option value="normal">增值税普通发票</a-select-option>
|
||||
<a-select-option value="electronic">电子普通发票</a-select-option>
|
||||
@ -179,188 +124,114 @@
|
||||
</a-form-item>
|
||||
|
||||
<!-- 税号（非个人时显示） -->
|
||||
<a-form-item
|
||||
v-if="formData.type !== 'personal'"
|
||||
label="税号"
|
||||
name="taxNumber"
|
||||
required
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.taxNumber"
|
||||
placeholder="请输入纳税人识别号/统一社会信用代码"
|
||||
:maxlength="30"
|
||||
/>
|
||||
<a-form-item v-if="formData.title_type !== 'USER'" label="税号" name="invoice_taxpayer_id" :required="formData.title_type === 'COMPANY'">
|
||||
<a-input v-model:value="formData.invoice_taxpayer_id" placeholder="请输入纳税人识别号/统一社会信用代码" :maxlength="30" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 开户银行（非个人时显示） -->
|
||||
<a-form-item
|
||||
v-if="formData.type !== 'personal'"
|
||||
label="开户银行"
|
||||
name="bankName"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.bankName"
|
||||
placeholder="请输入开户银行名称"
|
||||
:maxlength="100"
|
||||
/>
|
||||
<a-form-item v-if="formData.title_type !== 'USER'" label="开户银行" name="invoice_ban_name">
|
||||
<a-input v-model:value="formData.invoice_ban_name" placeholder="请输入开户银行名称" :maxlength="100" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 银行账号（非个人时显示） -->
|
||||
<a-form-item
|
||||
v-if="formData.type !== 'personal'"
|
||||
label="银行账号"
|
||||
name="bankAccount"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.bankAccount"
|
||||
placeholder="请输入银行账号"
|
||||
:maxlength="30"
|
||||
/>
|
||||
<a-form-item v-if="formData.title_type !== 'USER'" label="银行账号" name="invoice_bank_account">
|
||||
<a-input v-model:value="formData.invoice_bank_account" placeholder="请输入银行账号" :maxlength="30" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 企业地址（非个人时显示） -->
|
||||
<a-form-item
|
||||
v-if="formData.type !== 'personal'"
|
||||
label="企业地址"
|
||||
name="companyAddress"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.companyAddress"
|
||||
placeholder="请输入企业注册地址"
|
||||
:maxlength="200"
|
||||
/>
|
||||
<a-form-item v-if="formData.title_type !== 'USER'" label="企业地址" name="invoice_address">
|
||||
<a-input v-model:value="formData.invoice_address" placeholder="请输入企业注册地址" :maxlength="200" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 企业电话（非个人时显示） -->
|
||||
<a-form-item
|
||||
v-if="formData.type !== 'personal'"
|
||||
label="企业电话"
|
||||
name="companyPhone"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.companyPhone"
|
||||
placeholder="请输入企业联系电话"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<a-form-item v-if="formData.title_type !== 'USER'" label="企业电话" name="invoice_phone">
|
||||
<a-input v-model:value="formData.invoice_phone" placeholder="请输入企业联系电话" :maxlength="20" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 设为默认 -->
|
||||
<a-form-item name="isDefault" :wrapper-col="{ offset: 6 }">
|
||||
<a-checkbox v-model:checked="formData.isDefault">
|
||||
<a-form-item name="is_default" :wrapper-col="{ offset: 6 }">
|
||||
<a-checkbox v-model:checked="formData.is_default">
|
||||
设为默认抬头
|
||||
</a-checkbox>
|
||||
<div class="form-tip">设为默认后，下单时将自动选择此抬头</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 分页固定在底部 -->
|
||||
<div class="pagination-container">
|
||||
<a-pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total" show-size-changer show-jumper show-less-items
|
||||
:page-size-options="[5, 10, 20, 50]" @change="onPageChange" @showSizeChange="onShowSizeChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
StarOutlined,
|
||||
FileTextOutlined,
|
||||
CheckCircleFilled,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
// 初始数据
|
||||
const initialData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '张三科技有限公司',
|
||||
type: 'enterprise',
|
||||
invoiceType: 'vat',
|
||||
taxNumber: '91370100MA3C4BQ123',
|
||||
bankName: '中国工商银行北京分行',
|
||||
bankAccount: '6222021234567890123',
|
||||
companyAddress: '北京市海淀区中关村软件园一期1号楼',
|
||||
companyPhone: '010-12345678',
|
||||
isDefault: true,
|
||||
createTime: '2024-01-15 10:30:45'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四个人',
|
||||
type: 'personal',
|
||||
invoiceType: 'normal',
|
||||
taxNumber: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
companyAddress: '',
|
||||
companyPhone: '',
|
||||
isDefault: false,
|
||||
createTime: '2024-01-10 14:20:15'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '某某研究所',
|
||||
type: 'institution',
|
||||
invoiceType: 'electronic',
|
||||
taxNumber: '123456789012345',
|
||||
bankName: '中国建设银行上海分行',
|
||||
bankAccount: '6217001234567890123',
|
||||
companyAddress: '上海市浦东新区张江高科技园区',
|
||||
companyPhone: '021-87654321',
|
||||
isDefault: false,
|
||||
createTime: '2024-01-05 09:15:30'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '王五网络有限公司',
|
||||
type: 'enterprise',
|
||||
invoiceType: 'vat',
|
||||
taxNumber: '91370200MA3D4CQ456',
|
||||
bankName: '招商银行深圳分行',
|
||||
bankAccount: '6225881234567890',
|
||||
companyAddress: '深圳市南山区科技园',
|
||||
companyPhone: '0755-66889900',
|
||||
isDefault: false,
|
||||
createTime: '2024-01-20 16:45:22'
|
||||
}
|
||||
]
|
||||
import {
|
||||
getinvoiceTitleList,
|
||||
getDefaultInvoiceTitle,
|
||||
invoiceTitleInfo,
|
||||
UpdateDefaultInvoiceTitle,
|
||||
AddDefaultInvoiceTitle,
|
||||
DelInvoiceTitleInfo
|
||||
} from '@/apis/admin'
|
||||
|
||||
// 响应式数据
|
||||
const invoiceHeaders = ref([...initialData])
|
||||
const invoiceHeaders = ref([])
|
||||
const modalVisible = ref(false)
|
||||
const modalMode = ref('add') // 'add' | 'edit'
|
||||
const confirmLoading = ref(false)
|
||||
const formRef = ref()
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
type: 'personal',
|
||||
invoiceType: 'normal',
|
||||
taxNumber: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
companyAddress: '',
|
||||
companyPhone: '',
|
||||
isDefault: false
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
// 表单数据（使用下划线命名）
|
||||
const formData = reactive({
|
||||
invoiceTitleID: null as string | null,
|
||||
invoice_title: '',
|
||||
title_type: 'USER',
|
||||
invoice_type: '',
|
||||
invoice_taxpayer_id: '',
|
||||
invoice_ban_name: '',
|
||||
invoice_bank_account: '',
|
||||
invoice_address: '',
|
||||
invoice_phone: '',
|
||||
is_default: false,
|
||||
})
|
||||
|
||||
// 表单验证规则（使用下划线命名）
|
||||
const formRules = {
|
||||
name: [
|
||||
invoice_title: [
|
||||
{ required: true, message: '请输入发票抬头名称', trigger: 'blur' },
|
||||
{ min: 2, max: 100, message: '抬头名称长度为2-100个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
title_type: [
|
||||
{ required: true, message: '请选择抬头类型', trigger: 'change' }
|
||||
],
|
||||
invoiceType: [
|
||||
invoice_type: [
|
||||
{ required: true, message: '请选择发票类型', trigger: 'change' }
|
||||
],
|
||||
taxNumber: [
|
||||
invoice_taxpayer_id: [
|
||||
{
|
||||
required: formData.type !== 'personal',
|
||||
required: formData.title_type === 'COMPANY',
|
||||
message: '请输入税号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
@ -370,14 +241,14 @@ const formRules = {
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
bankAccount: [
|
||||
invoice_bank_account: [
|
||||
{
|
||||
pattern: /^[0-9]{12,20}$/,
|
||||
message: '银行账号格式不正确（12-20位数字）',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
companyPhone: [
|
||||
invoice_phone: [
|
||||
{
|
||||
pattern: /^(\d{3,4}-)?\d{7,8}$/,
|
||||
message: '电话号码格式不正确（例：010-12345678）',
|
||||
@ -394,8 +265,8 @@ const modalTitle = computed(() => {
|
||||
const sortedHeaders = computed(() => {
|
||||
return [...invoiceHeaders.value].sort((a, b) => {
|
||||
// 默认的排在最前面
|
||||
if (a.isDefault && !b.isDefault) return -1
|
||||
if (!a.isDefault && b.isDefault) return 1
|
||||
if (a.is_default && !b.is_default) return -1
|
||||
if (!a.is_default && b.is_default) return 1
|
||||
// 其次按创建时间倒序
|
||||
return new Date(b.createTime) - new Date(a.createTime)
|
||||
})
|
||||
@ -408,134 +279,200 @@ const showAddModal = () => {
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const editHeader = (header) => {
|
||||
const editHeader = async (header: any) => {
|
||||
try {
|
||||
modalMode.value = 'edit'
|
||||
Object.assign(formData, { ...header })
|
||||
// 保存当前编辑的ID
|
||||
formData.invoiceTitleID = header.invoiceTitleID
|
||||
|
||||
// 调用API获取详情
|
||||
const res: any = await invoiceTitleInfo(header.invoiceTitleID)
|
||||
console.log('API返回的发票详情:', res)
|
||||
|
||||
// 根据API响应结构：{code: 1, msg: 'success', data: {...}}
|
||||
if (res) {
|
||||
// 直接将API返回的data对象赋值给表单数据
|
||||
Object.assign(formData, {
|
||||
invoice_title: res.invoice_title || '',
|
||||
title_type: res.title_type || 'USER',
|
||||
invoice_type: res.invoice_type || '',
|
||||
invoice_taxpayer_id: res.invoice_taxpayer_id || '',
|
||||
invoice_ban_name: res.invoice_ban_name || '',
|
||||
invoice_bank_account: res.invoice_bank_account || '',
|
||||
invoice_address: res.invoice_address || '',
|
||||
invoice_phone: res.invoice_phone || '',
|
||||
is_default: res.is_default || false
|
||||
})
|
||||
console.log('赋值后的表单数据:', formData)
|
||||
|
||||
modalVisible.value = true
|
||||
|
||||
// 清空验证状态
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('API响应格式不正确:', res)
|
||||
message.error('获取发票详情失败：' + (res?.msg || '未知错误'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取发票详情失败:', error)
|
||||
message.error('获取发票详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
id: null,
|
||||
name: '',
|
||||
type: 'personal',
|
||||
invoiceType: 'normal',
|
||||
taxNumber: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
companyAddress: '',
|
||||
companyPhone: '',
|
||||
isDefault: false
|
||||
invoiceTitleID: null,
|
||||
invoice_title: '',
|
||||
title_type: 'USER',
|
||||
invoice_type: '',
|
||||
invoice_taxpayer_id: '',
|
||||
invoice_ban_name: '',
|
||||
invoice_bank_account: '',
|
||||
invoice_address: '',
|
||||
invoice_phone: '',
|
||||
is_default: false
|
||||
})
|
||||
|
||||
// 清空验证状态
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleTypeChange = () => {
|
||||
// 类型切换时，如果是个人类型，清除非必填字段
|
||||
if (formData.type === 'personal') {
|
||||
formData.taxNumber = ''
|
||||
formData.bankName = ''
|
||||
formData.bankAccount = ''
|
||||
formData.companyAddress = ''
|
||||
formData.companyPhone = ''
|
||||
if (formData.title_type === 'USER') {
|
||||
formData.invoice_taxpayer_id = ''
|
||||
formData.invoice_ban_name = ''
|
||||
formData.invoice_bank_account = ''
|
||||
formData.invoice_address = ''
|
||||
formData.invoice_phone = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate().then(() => {
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
confirmLoading.value = true
|
||||
|
||||
// 模拟API调用延迟
|
||||
setTimeout(() => {
|
||||
// 准备提交数据 - 将下划线字段名映射到驼峰字段名
|
||||
const submitData = {
|
||||
invoiceTitleID: formData.invoiceTitleID,
|
||||
invoiceTitle: formData.invoice_title,
|
||||
titleType: formData.title_type,
|
||||
invoiceType: formData.invoice_type,
|
||||
invoiceTaxpayerID: formData.invoice_taxpayer_id,
|
||||
invoiceBankName: formData.invoice_ban_name,
|
||||
invoiceBankAccount: formData.invoice_bank_account,
|
||||
invoiceAddress: formData.invoice_address,
|
||||
invoicePhone: formData.invoice_phone,
|
||||
isDefault: formData.is_default
|
||||
}
|
||||
|
||||
console.log('提交的数据:', submitData)
|
||||
console.log('当前模式:', modalMode.value)
|
||||
|
||||
let res: any
|
||||
|
||||
if (modalMode.value === 'add') {
|
||||
addNewHeader()
|
||||
} else {
|
||||
updateHeader()
|
||||
}
|
||||
// 新增逻辑 - 不需要传递 invoiceTitleID 字段
|
||||
const addData = { ...submitData }
|
||||
// 删除 invoiceTitleID 字段，因为新增时不需要
|
||||
delete addData.invoiceTitleID
|
||||
console.log('新增数据:', addData)
|
||||
|
||||
confirmLoading.value = false
|
||||
modalVisible.value = false
|
||||
}, 500)
|
||||
}).catch(error => {
|
||||
console.log('表单验证失败:', error)
|
||||
})
|
||||
}
|
||||
res = await AddDefaultInvoiceTitle(addData)
|
||||
|
||||
const addNewHeader = () => {
|
||||
const newHeader = {
|
||||
...formData,
|
||||
id: Date.now(), // 生成唯一ID
|
||||
createTime: new Date().toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 如果设置为默认，清除其他默认设置
|
||||
if (newHeader.isDefault) {
|
||||
invoiceHeaders.value.forEach(header => {
|
||||
header.isDefault = false
|
||||
})
|
||||
}
|
||||
|
||||
invoiceHeaders.value.unshift(newHeader)
|
||||
if (res?.code === 1) {
|
||||
message.success('新增发票抬头成功')
|
||||
}
|
||||
modalVisible.value = false
|
||||
resetForm()
|
||||
// 刷新列表
|
||||
getDataList()
|
||||
} else {
|
||||
message.error(res?.msg || '新增失败')
|
||||
}
|
||||
} else {
|
||||
// 编辑逻辑
|
||||
console.log('调用更新接口，invoiceTitleID:', formData.invoiceTitleID)
|
||||
|
||||
const updateHeader = () => {
|
||||
const index = invoiceHeaders.value.findIndex(item => item.id === formData.id)
|
||||
if (index !== -1) {
|
||||
const oldHeader = invoiceHeaders.value[index]
|
||||
|
||||
// 如果设置为默认，清除其他默认设置
|
||||
if (formData.isDefault && !oldHeader.isDefault) {
|
||||
invoiceHeaders.value.forEach(header => {
|
||||
header.isDefault = false
|
||||
})
|
||||
// 确保invoiceTitleID有值
|
||||
if (!formData.invoiceTitleID) {
|
||||
message.error('发票抬头ID不能为空')
|
||||
confirmLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// 更新数据
|
||||
Object.assign(invoiceHeaders.value[index], formData, {
|
||||
createTime: oldHeader.createTime // 保留创建时间
|
||||
})
|
||||
res = await UpdateDefaultInvoiceTitle(submitData)
|
||||
|
||||
if (res?.code === 1) {
|
||||
message.success('修改发票抬头成功')
|
||||
modalVisible.value = false
|
||||
resetForm()
|
||||
// 刷新列表
|
||||
getDataList()
|
||||
} else {
|
||||
message.error(res?.msg || '修改失败')
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log('表单验证失败:', error)
|
||||
message.error('请检查表单填写是否正确')
|
||||
} finally {
|
||||
confirmLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setDefaultHeader = (id) => {
|
||||
invoiceHeaders.value.forEach(header => {
|
||||
header.isDefault = header.id === id
|
||||
})
|
||||
const setDefaultHeader = async (id: string) => {
|
||||
try {
|
||||
const res: any = await getDefaultInvoiceTitle(id)
|
||||
if (res?.code === 1) {
|
||||
message.success('设置默认抬头成功')
|
||||
getDataList()
|
||||
} else {
|
||||
message.error(res?.msg || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('设置默认抬头失败:', error)
|
||||
message.error('设置默认抬头失败')
|
||||
}
|
||||
}
|
||||
|
||||
const showDeleteConfirm = (header) => {
|
||||
const showDeleteConfirm = (header: any) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
icon: ExclamationCircleOutlined, // 这里直接传递图标组件
|
||||
content: `确定要删除发票抬头"${header.name}"吗？此操作不可恢复。`,
|
||||
|
||||
content: `确定要删除发票抬头"${header.invoice_title}"吗？此操作不可恢复。`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
deleteHeader(header.id)
|
||||
deleteHeader(header.invoiceTitleID)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteHeader = (id) => {
|
||||
const index = invoiceHeaders.value.findIndex(item => item.id === id)
|
||||
if (index !== -1) {
|
||||
const isDefault = invoiceHeaders.value[index].isDefault
|
||||
invoiceHeaders.value.splice(index, 1)
|
||||
|
||||
// 如果删除的是默认抬头，且还有其他抬头，设置第一个为默认
|
||||
if (isDefault && invoiceHeaders.value.length > 0) {
|
||||
invoiceHeaders.value[0].isDefault = true
|
||||
message.success('已自动设置第一个抬头为默认')
|
||||
}
|
||||
|
||||
const deleteHeader = async (id: string) => {
|
||||
try {
|
||||
const res: any = await DelInvoiceTitleInfo(id)
|
||||
if (res?.code === 1) {
|
||||
message.success('删除发票抬头成功')
|
||||
getDataList()
|
||||
} else {
|
||||
message.error(res?.msg || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除发票抬头失败:', error)
|
||||
message.error('删除发票抬头失败')
|
||||
}
|
||||
}
|
||||
|
||||
@ -544,27 +481,39 @@ const handleCancel = () => {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const onPageChange = (page: number, pageSize: number) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const onShowSizeChange = (current: number, size: number) => {
|
||||
pagination.current = 1
|
||||
pagination.pageSize = size
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 辅助函数
|
||||
const getTypeText = (type) => {
|
||||
const typeMap = {
|
||||
personal: '个人',
|
||||
enterprise: '企业',
|
||||
const getTypeText = (type: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
USER: '个人',
|
||||
COMPANY: '企业',
|
||||
institution: '事业单位'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
personal: 'blue',
|
||||
enterprise: 'green',
|
||||
const getTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
USER: 'blue',
|
||||
COMPANY: 'green',
|
||||
institution: 'orange'
|
||||
}
|
||||
return colorMap[type] || 'default'
|
||||
}
|
||||
|
||||
const getInvoiceTypeText = (type) => {
|
||||
const typeMap = {
|
||||
const getInvoiceTypeText = (type: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
vat: '增值税专用',
|
||||
normal: '增值税普通',
|
||||
electronic: '电子普通',
|
||||
@ -574,8 +523,8 @@ const getInvoiceTypeText = (type) => {
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
const getInvoiceTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
const getInvoiceTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
vat: 'red',
|
||||
normal: 'purple',
|
||||
electronic: 'cyan',
|
||||
@ -585,16 +534,29 @@ const getInvoiceTypeColor = (type) => {
|
||||
return colorMap[type] || 'default'
|
||||
}
|
||||
|
||||
// 初始化
|
||||
// 获取发票列表
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const res: any = await getinvoiceTitleList({
|
||||
page_num: pagination.current,
|
||||
page_size: pagination.pageSize
|
||||
})
|
||||
console.log('发票列表:', res)
|
||||
invoiceHeaders.value = res || []
|
||||
// pagination.total = res.total || 0
|
||||
} catch (error) {
|
||||
console.error('获取发票列表错误:', error)
|
||||
message.error('获取发票列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('发票抬头管理页面已加载')
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invoice-page {
|
||||
/* padding: 10px; */
|
||||
/* background-color: #f5f5f5; */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@ -611,17 +573,12 @@ onMounted(() => {
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
/* color: #1890ff; */
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title .anticon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@ -673,13 +630,13 @@ onMounted(() => {
|
||||
.default-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
padding: 2px 8px;
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: #52c41a;
|
||||
margin-bottom: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
@ -756,6 +713,13 @@ onMounted(() => {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user