发票抬头
This commit is contained in:
qiuyuan
parent
82b1ca53c7
commit
4d014be9c2
@ -238,6 +238,12 @@ const routes: RouteRecordRaw[] = [
|
|||||||
component: () =>
|
component: () =>
|
||||||
import("@/views/admin/account/bankCard/index.vue"),
|
import("@/views/admin/account/bankCard/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "invoices",
|
||||||
|
name: "invoices",
|
||||||
|
component: () =>
|
||||||
|
import("@/views/admin/account/invoices/index.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "image",
|
path: "image",
|
||||||
name: "Image",
|
name: "Image",
|
||||||
|
|||||||
779
src/views/admin/account/invoices/index.vue
Normal file
779
src/views/admin/account/invoices/index.vue
Normal file
@ -0,0 +1,779 @@
|
|||||||
|
<template>
|
||||||
|
<div class="invoice-page">
|
||||||
|
<!-- 头部区域 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">
|
||||||
|
我的发票抬头
|
||||||
|
</h1>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a-button type="primary" @click="showAddModal" size="large">
|
||||||
|
<template #icon><PlusOutlined /></template>
|
||||||
|
新增抬头
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 发票抬头列表 -->
|
||||||
|
<div class="invoice-list-container">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<template #actions>
|
||||||
|
<span @click="editHeader(header)">
|
||||||
|
<EditOutlined />
|
||||||
|
编辑
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
@click="setDefaultHeader(header.id)"
|
||||||
|
:class="{ disabled: header.isDefault }"
|
||||||
|
>
|
||||||
|
<StarOutlined />
|
||||||
|
{{ header.isDefault ? '已是默认' : '设为默认' }}
|
||||||
|
</span>
|
||||||
|
<span @click="showDeleteConfirm(header)">
|
||||||
|
<DeleteOutlined />
|
||||||
|
删除
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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) }}
|
||||||
|
</a-tag>
|
||||||
|
</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">
|
||||||
|
<span class="info-label">税号：</span>
|
||||||
|
<span class="info-value">{{ header.taxNumber }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="header.bankName" class="info-row">
|
||||||
|
<span class="info-label">开户银行：</span>
|
||||||
|
<span class="info-value">{{ header.bankName }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="header.bankAccount" class="info-row">
|
||||||
|
<span class="info-label">银行账号：</span>
|
||||||
|
<span class="info-value">{{ header.bankAccount }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="header.companyAddress" class="info-row">
|
||||||
|
<span class="info-label">企业地址：</span>
|
||||||
|
<span class="info-value">{{ header.companyAddress }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="header.companyPhone" class="info-row">
|
||||||
|
<span class="info-label">企业电话：</span>
|
||||||
|
<span class="info-value">{{ header.companyPhone }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-row create-time">
|
||||||
|
<span class="info-label">创建时间：</span>
|
||||||
|
<span class="info-value">{{ header.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-card-meta>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</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-form-item label="发票抬头" name="name" required>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.name"
|
||||||
|
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-radio-group>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 发票类型 -->
|
||||||
|
<a-form-item label="发票类型" name="invoiceType" required>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.invoiceType"
|
||||||
|
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>
|
||||||
|
<a-select-option value="special">专用发票</a-select-option>
|
||||||
|
<a-select-option value="general">通用发票</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 开户银行（非个人时显示） -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="formData.type !== 'personal'"
|
||||||
|
label="开户银行"
|
||||||
|
name="bankName"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.bankName"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- 企业地址（非个人时显示） -->
|
||||||
|
<a-form-item
|
||||||
|
v-if="formData.type !== 'personal'"
|
||||||
|
label="企业地址"
|
||||||
|
name="companyAddress"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.companyAddress"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- 设为默认 -->
|
||||||
|
<a-form-item name="isDefault" :wrapper-col="{ offset: 6 }">
|
||||||
|
<a-checkbox v-model:checked="formData.isDefault">
|
||||||
|
设为默认抬头
|
||||||
|
</a-checkbox>
|
||||||
|
<div class="form-tip">设为默认后，下单时将自动选择此抬头</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted } from 'vue'
|
||||||
|
import { message, Modal } 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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const invoiceHeaders = ref([...initialData])
|
||||||
|
const modalVisible = ref(false)
|
||||||
|
const modalMode = ref('add') // 'add' | 'edit'
|
||||||
|
const confirmLoading = ref(false)
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
id: null,
|
||||||
|
name: '',
|
||||||
|
type: 'personal',
|
||||||
|
invoiceType: 'normal',
|
||||||
|
taxNumber: '',
|
||||||
|
bankName: '',
|
||||||
|
bankAccount: '',
|
||||||
|
companyAddress: '',
|
||||||
|
companyPhone: '',
|
||||||
|
isDefault: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const formRules = {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入发票抬头名称', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 100, message: '抬头名称长度为2-100个字符', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
type: [
|
||||||
|
{ required: true, message: '请选择抬头类型', trigger: 'change' }
|
||||||
|
],
|
||||||
|
invoiceType: [
|
||||||
|
{ required: true, message: '请选择发票类型', trigger: 'change' }
|
||||||
|
],
|
||||||
|
taxNumber: [
|
||||||
|
{
|
||||||
|
required: formData.type !== 'personal',
|
||||||
|
message: '请输入税号',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^[A-Z0-9]{15,20}$/,
|
||||||
|
message: '税号格式不正确（15-20位字母或数字）',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
bankAccount: [
|
||||||
|
{
|
||||||
|
pattern: /^[0-9]{12,20}$/,
|
||||||
|
message: '银行账号格式不正确（12-20位数字）',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
companyPhone: [
|
||||||
|
{
|
||||||
|
pattern: /^(\d{3,4}-)?\d{7,8}$/,
|
||||||
|
message: '电话号码格式不正确（例：010-12345678）',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const modalTitle = computed(() => {
|
||||||
|
return modalMode.value === 'add' ? '新增发票抬头' : '编辑发票抬头'
|
||||||
|
})
|
||||||
|
|
||||||
|
const sortedHeaders = computed(() => {
|
||||||
|
return [...invoiceHeaders.value].sort((a, b) => {
|
||||||
|
// 默认的排在最前面
|
||||||
|
if (a.isDefault && !b.isDefault) return -1
|
||||||
|
if (!a.isDefault && b.isDefault) return 1
|
||||||
|
// 其次按创建时间倒序
|
||||||
|
return new Date(b.createTime) - new Date(a.createTime)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const showAddModal = () => {
|
||||||
|
modalMode.value = 'add'
|
||||||
|
resetForm()
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const editHeader = (header) => {
|
||||||
|
modalMode.value = 'edit'
|
||||||
|
Object.assign(formData, { ...header })
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
Object.assign(formData, {
|
||||||
|
id: null,
|
||||||
|
name: '',
|
||||||
|
type: 'personal',
|
||||||
|
invoiceType: 'normal',
|
||||||
|
taxNumber: '',
|
||||||
|
bankName: '',
|
||||||
|
bankAccount: '',
|
||||||
|
companyAddress: '',
|
||||||
|
companyPhone: '',
|
||||||
|
isDefault: false
|
||||||
|
})
|
||||||
|
if (formRef.value) {
|
||||||
|
formRef.value.clearValidate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTypeChange = () => {
|
||||||
|
// 类型切换时，如果是个人类型，清除非必填字段
|
||||||
|
if (formData.type === 'personal') {
|
||||||
|
formData.taxNumber = ''
|
||||||
|
formData.bankName = ''
|
||||||
|
formData.bankAccount = ''
|
||||||
|
formData.companyAddress = ''
|
||||||
|
formData.companyPhone = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
formRef.value.validate().then(() => {
|
||||||
|
confirmLoading.value = true
|
||||||
|
|
||||||
|
// 模拟API调用延迟
|
||||||
|
setTimeout(() => {
|
||||||
|
if (modalMode.value === 'add') {
|
||||||
|
addNewHeader()
|
||||||
|
} else {
|
||||||
|
updateHeader()
|
||||||
|
}
|
||||||
|
|
||||||
|
confirmLoading.value = false
|
||||||
|
modalVisible.value = false
|
||||||
|
}, 500)
|
||||||
|
}).catch(error => {
|
||||||
|
console.log('表单验证失败:', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
message.success('新增发票抬头成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新数据
|
||||||
|
Object.assign(invoiceHeaders.value[index], formData, {
|
||||||
|
createTime: oldHeader.createTime // 保留创建时间
|
||||||
|
})
|
||||||
|
|
||||||
|
message.success('修改发票抬头成功')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setDefaultHeader = (id) => {
|
||||||
|
invoiceHeaders.value.forEach(header => {
|
||||||
|
header.isDefault = header.id === id
|
||||||
|
})
|
||||||
|
message.success('设置默认抬头成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDeleteConfirm = (header) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认删除',
|
||||||
|
icon: ExclamationCircleOutlined, // 这里直接传递图标组件
|
||||||
|
content: `确定要删除发票抬头"${header.name}"吗？此操作不可恢复。`,
|
||||||
|
okText: '删除',
|
||||||
|
okType: 'danger',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk() {
|
||||||
|
deleteHeader(header.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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('已自动设置第一个抬头为默认')
|
||||||
|
}
|
||||||
|
|
||||||
|
message.success('删除发票抬头成功')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
modalVisible.value = false
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 辅助函数
|
||||||
|
const getTypeText = (type) => {
|
||||||
|
const typeMap = {
|
||||||
|
personal: '个人',
|
||||||
|
enterprise: '企业',
|
||||||
|
institution: '事业单位'
|
||||||
|
}
|
||||||
|
return typeMap[type] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTypeColor = (type) => {
|
||||||
|
const colorMap = {
|
||||||
|
personal: 'blue',
|
||||||
|
enterprise: 'green',
|
||||||
|
institution: 'orange'
|
||||||
|
}
|
||||||
|
return colorMap[type] || 'default'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getInvoiceTypeText = (type) => {
|
||||||
|
const typeMap = {
|
||||||
|
vat: '增值税专用',
|
||||||
|
normal: '增值税普通',
|
||||||
|
electronic: '电子普通',
|
||||||
|
special: '专用发票',
|
||||||
|
general: '通用发票'
|
||||||
|
}
|
||||||
|
return typeMap[type] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getInvoiceTypeColor = (type) => {
|
||||||
|
const colorMap = {
|
||||||
|
vat: 'red',
|
||||||
|
normal: 'purple',
|
||||||
|
electronic: 'cyan',
|
||||||
|
special: 'magenta',
|
||||||
|
general: 'gray'
|
||||||
|
}
|
||||||
|
return colorMap[type] || 'default'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('发票抬头管理页面已加载')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.invoice-page {
|
||||||
|
/* padding: 10px; */
|
||||||
|
/* background-color: #f5f5f5; */
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-list-container {
|
||||||
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-card {
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-card:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
|
||||||
|
border-color: #1890ff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-card.default-card {
|
||||||
|
border: 2px solid #52c41a;
|
||||||
|
background: linear-gradient(135deg, #f6ffed 0%, #e6ffd1 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: #f6ffed;
|
||||||
|
border: 1px solid #b7eb8f;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #52c41a;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #666;
|
||||||
|
min-width: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-time {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-top: 1px dashed #f0f0f0;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-actions) {
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-actions > li) {
|
||||||
|
margin: 12px 0;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-actions > li:hover) {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-actions > li.disabled) {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-actions > li span) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-modal-body) {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-tip {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.page-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form .ant-form-item .ant-form-item-label) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form .ant-form-item .ant-form-item-control) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -89,6 +89,7 @@ const menuItems: MenuItem[] = [
|
|||||||
{ path: '/layout/admin/myInvite', name: '我的邀请', visible: true },
|
{ path: '/layout/admin/myInvite', name: '我的邀请', visible: true },
|
||||||
{ path: '/layout/admin/msgCenter', name: '消息中心', visible: true },
|
{ path: '/layout/admin/msgCenter', name: '消息中心', visible: true },
|
||||||
{ path: '/layout/admin/bankCard', name: '银行卡管理', visible: true },
|
{ path: '/layout/admin/bankCard', name: '银行卡管理', visible: true },
|
||||||
|
{ path: '/layout/admin/invoices', name: '发票抬头管理', visible: true },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user