216 lines
7.6 KiB
Vue
216 lines
7.6 KiB
Vue
<template>
|
|
<a-row :gutter="[18, 18]">
|
|
|
|
<a-col :span="24">
|
|
<a-card title="开票记录">
|
|
<a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
|
|
@change="onTableChange" />
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
<a-modal v-model:open="visibleOpen" title="发票信息" @ok="handleOk" style="width: 800px;">
|
|
<a-card>
|
|
<a-form ref="formRef" :model="formData" labelAlign="left" :rules="rules">
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item label="发票抬头" name="title">
|
|
<a-input v-model:value="formData.title" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="发票类型" name="type">
|
|
<a-radio-group v-model:value="formData.type" button-style="solid">
|
|
<a-radio-button value="a">增值税发票</a-radio-button>
|
|
<a-radio-button value="b">增值税专用发票</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="纳税人识别号" name="number">
|
|
<a-input v-model:value="formData.number" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="开户银行名称" name="bankName">
|
|
<a-input v-model:value="formData.bankName" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="基本开户账号" name="bankNumber">
|
|
<a-input v-model:value="formData.bankNumber" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="注册场所地址" name="address">
|
|
<a-input v-model:value="formData.address" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="注册固定电话" name="phone">
|
|
<a-input v-model:value="formData.phone" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="收件人姓名" name="recipientName">
|
|
<a-input v-model:value="formData.recipientName" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="收件人手机号" name="recipientPhone">
|
|
<a-input v-model:value="formData.recipientPhone" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="收件人地址" name="recipientAddress">
|
|
<a-input v-model:value="formData.recipientAddress" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="邮箱地址" name="emailAddress">
|
|
<a-input v-model:value="formData.emailAddress" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
</a-modal>
|
|
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onBeforeMount, computed } from 'vue'
|
|
import { usePagination } from '@/hooks'
|
|
import {
|
|
invoiceList,
|
|
invoiceDetail
|
|
} from '@/apis/admin'
|
|
|
|
// const listData=ref([ {title:1}])
|
|
// const paginationState=ref({
|
|
// total: 0,
|
|
// current: 1,
|
|
// pageSize: 10,
|
|
// showTotal: (total) => `总 ${total} 条数据`,
|
|
// pageSizeOptions: ['10', '20', '30', '40'],
|
|
// })
|
|
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
|
|
const visibleOpen = ref(false)
|
|
const formData = ref({ type: 'a' })
|
|
const formRef=ref(null)
|
|
const rules = computed(() => ({
|
|
title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
|
|
recipientName: [{ required: true, message: '请选择收件人姓名', trigger: 'change' }],
|
|
recipientPhone: [{ required: true, message: '请选择收件人手机号', trigger: 'change' }],
|
|
recipientAddress: [{ required: true, message: '请选择收件人地址', trigger: 'change' }],
|
|
number: [
|
|
{
|
|
required: formData.value.type === 'b', // 只有“增值税专用发票”(value='b')才必填
|
|
message: '请输入纳税人识别号',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
bankName: [
|
|
{
|
|
required: formData.value.type === 'b',
|
|
message: '请输入开户银行名称',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
bankNumber: [
|
|
{
|
|
required: formData.value.type === 'b',
|
|
message: '请输入基本开户账号',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
address: [
|
|
{
|
|
required: formData.value.type === 'b',
|
|
message: '请输入注册场所地址',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
phone: [
|
|
{
|
|
required: formData.value.type === 'b',
|
|
message: '请输入注册固定电话',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}))
|
|
const columns = ref([
|
|
{ title: '申请时间', dataIndex: 'invoiceDate', key: 'invoiceDate' },
|
|
{ title: '开票内容', dataIndex: 'invoiceContent', key: 'invoiceContent' },
|
|
{ title: '发票抬头', dataIndex: 'invoiceTitle', key: 'invoiceTitle' },
|
|
{ title: '发票总额', dataIndex: 'invoiceAmount', key: 'invoiceAmount' },
|
|
{ title: '开票方式', dataIndex: 'invoiceMethod', key: 'invoiceMethod' },
|
|
{ title: '发票类型', dataIndex: 'invoiceType', key: 'invoiceType' },
|
|
{ title: '发票状态', dataIndex: 'invoiceStatus', key: 'invoiceStatus' },
|
|
{ title: '驳回原因', dataIndex: 'rejectReason', key: 'rejectReason' },
|
|
{ title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
|
|
])
|
|
onBeforeMount(() => {
|
|
getPageList()
|
|
|
|
})
|
|
|
|
const getPageList = async () => {
|
|
try {
|
|
const params = {
|
|
page_num: 1,
|
|
page_size: 10, // 获取足够多的数据来统计
|
|
};
|
|
|
|
const response: any = await invoiceList(params);
|
|
|
|
if (response.data && Array.isArray(response.data)) {
|
|
listData.value = response.data
|
|
console.log('发票列表:', response.data);
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
console.error('获取全部消息失败:', error);
|
|
listData.value = [];
|
|
}
|
|
};
|
|
/**
|
|
* 分页
|
|
*/
|
|
function onTableChange({ current, pageSize }) {
|
|
paginationState.current = current
|
|
paginationState.pageSize = pageSize
|
|
getPageList()
|
|
}
|
|
/**
|
|
* 搜索
|
|
*/
|
|
function handleSearch() {
|
|
resetPagination()
|
|
getPageList()
|
|
}
|
|
/**
|
|
* 重置
|
|
*/
|
|
function handleResetSearch() {
|
|
searchFormData.value = {}
|
|
resetPagination()
|
|
getPageList()
|
|
}
|
|
function handleOk() {
|
|
visibleOpen.value = false
|
|
|
|
formRef.value.validateFields().then(async(values)=>{
|
|
try {
|
|
|
|
} catch (error) {
|
|
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
</style> |