增加发票管理
This commit is contained in:
parent
0ac3163e79
commit
3e56632e34
@ -185,6 +185,7 @@ export default function InvoiceList() {
|
||||
</div>
|
||||
<Modal open={true}
|
||||
title="申请开票"
|
||||
footer={false}
|
||||
>
|
||||
<InvoiceSave />
|
||||
</Modal>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import {Button, Divider, Form, Input, Radio, Space} from "antd";
|
||||
import {useState} from "react";
|
||||
import {Button, Divider, Flex, Form, Input, Modal, Radio, Space} from "antd";
|
||||
import {useEffect, useState} from "react";
|
||||
import {listDictionary, IDictionary} from "../../util/AjaxUtils.ts";
|
||||
import useMessage from "antd/es/message/useMessage";
|
||||
import InvoiceInfoList from "./info/InvoiceInfoList.tsx";
|
||||
|
||||
type FormFieldType = {
|
||||
invoiceTitle: string;
|
||||
@ -14,11 +17,32 @@ type FormFieldType = {
|
||||
}
|
||||
|
||||
export default function InvoiceSave() {
|
||||
const [messageApi, messageContext] = useMessage();
|
||||
const [form] = Form.useForm<FormFieldType>();
|
||||
const [isSaveInvoiceInfo, setIsSaveInvoiceInfo] = useState(0);
|
||||
|
||||
const [contentArray, setContentArray] = useState<IDictionary[]>([]);
|
||||
const [rateArray, setRateArray] = useState<IDictionary[]>([]);
|
||||
const [typeArray, setTypeArray] = useState<IDictionary[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// 开票内容
|
||||
listDictionary('e0251d55-cd52-4f57-be92-b2bef8a6dd62', messageApi).then((data)=>{
|
||||
setContentArray([...data]);
|
||||
})
|
||||
// 开票税率
|
||||
listDictionary('b67d5208-db1d-4d0e-99de-cc22d9d50041', messageApi).then((data)=>{
|
||||
setRateArray([...data]);
|
||||
})
|
||||
// 开票类型
|
||||
listDictionary('e4808c45-64ee-42fa-a413-a470fbdc0aea', messageApi).then((data)=>{
|
||||
setTypeArray([...data]);
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{messageContext}
|
||||
<Form
|
||||
name="basic"
|
||||
initialValues={{remember: true}}
|
||||
@ -113,10 +137,7 @@ export default function InvoiceSave() {
|
||||
>
|
||||
<Radio.Group>
|
||||
<Space direction="vertical">
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
{contentArray.map(item => <Radio value={item.dataName}>{item.dataName}</Radio>)}
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
@ -131,10 +152,7 @@ export default function InvoiceSave() {
|
||||
rules={[{required: true, message: '请选择开票税率'}]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
{rateArray.map(item => <Radio value={item.dataName}>{item.dataName}</Radio>)}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</td>
|
||||
@ -148,10 +166,9 @@ export default function InvoiceSave() {
|
||||
rules={[{required: true, message: '请选择发票类型'}]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
<Space direction="vertical">
|
||||
{typeArray.map(item => <Radio value={item.dataName}>{item.dataName}</Radio>)}
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</td>
|
||||
@ -183,7 +200,9 @@ export default function InvoiceSave() {
|
||||
<div>
|
||||
<span>￥</span>
|
||||
<span style={{fontSize: '20px', fontWeight: 'bold'}}>300</span>
|
||||
<Button type="link" size="small">请选择需要开票的订单</Button>
|
||||
<Button type="link" size="small" onClick={() => {
|
||||
|
||||
}}>请选择需要开票的订单</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -201,7 +220,26 @@ export default function InvoiceSave() {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Form.Item style={{marginBottom: '0'}}>
|
||||
<Flex justify="center" style={{marginTop: '15px'}}>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit" style={{
|
||||
backgroundColor: 'var(--color-primary)'
|
||||
}} onClick={() => {
|
||||
|
||||
}}>提交</Button>
|
||||
<Button type="default">返回</Button>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Modal open={true}
|
||||
title="开票信息"
|
||||
width={1000}
|
||||
footer={false}
|
||||
>
|
||||
<InvoiceInfoList/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
136
src/components/invoice/info/InvoiceInfoList.tsx
Normal file
136
src/components/invoice/info/InvoiceInfoList.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import {Button, Modal, Space, Table, TableProps} from "antd";
|
||||
import {DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
|
||||
import useMessage from "antd/es/message/useMessage";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get} from "../../../util/AjaxUtils.ts";
|
||||
import {IListPage} from "../../../interfaces/listpage/IListPage.ts";
|
||||
import InvoiceInfoSave from "./InvoiceInfoSave.tsx";
|
||||
|
||||
type DataType = {
|
||||
invoiceTitle: string;
|
||||
invoicePhone: string;
|
||||
invoiceNo: string;
|
||||
invoiceInfoId: string;
|
||||
invoiceBank: string;
|
||||
invoiceAddress: string;
|
||||
invoiceAccount: string;
|
||||
gmtCreate: number;
|
||||
creator: string;
|
||||
}
|
||||
|
||||
export default function InvoiceInfoList() {
|
||||
const [messageApi, messageContext] = useMessage();
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [dataArray, setDataArray] = useState<DataType[]>([]);
|
||||
|
||||
const columns: TableProps<DataType>['columns'] = [
|
||||
{
|
||||
title: '公司名称',
|
||||
dataIndex: 'invoiceTitle',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '纳税人识别号',
|
||||
dataIndex: 'invoiceNo',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '公司地址',
|
||||
dataIndex: 'invoiceAddress',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'invoicePhone',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '开户行',
|
||||
dataIndex: 'invoiceBank',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '开户行账号',
|
||||
dataIndex: 'invoiceAccount',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
render: () => {
|
||||
return (
|
||||
<Space size={5}>
|
||||
<Button type="primary" size="small"><EditOutlined/></Button>
|
||||
<Button size="small"><DeleteOutlined/></Button>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
get<IListPage<DataType>>({
|
||||
messageApi,
|
||||
url: '/api/invoice-info/listpage/self',
|
||||
config: {
|
||||
params: {
|
||||
page: page,
|
||||
rows: 20
|
||||
}
|
||||
},
|
||||
onSuccess({data}) {
|
||||
setPage(data.page);
|
||||
setTotal(data.total);
|
||||
setDataArray(data.rows);
|
||||
}
|
||||
})
|
||||
}, [page]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="invoice-list-container">
|
||||
<div className="mod-list">
|
||||
<div className="table-btn-group" style={{marginBottom: '15px'}}>
|
||||
<Button value="small" onClick={() => {
|
||||
|
||||
}}><PlusOutlined/> 新增</Button>
|
||||
</div>
|
||||
<Table rowSelection={
|
||||
{
|
||||
type: 'radio',
|
||||
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
}
|
||||
} columns={columns} dataSource={dataArray} pagination={
|
||||
{
|
||||
pageSize: 20,
|
||||
total: total,
|
||||
onChange: (currentPage) => {
|
||||
setPage(currentPage);
|
||||
}
|
||||
}
|
||||
} scroll={{y: 500}} bordered key="dataTable" rowKey="invoiceInfoId"/>
|
||||
</div>
|
||||
</div>
|
||||
<Modal open={true}
|
||||
title="新增"
|
||||
footer={false}
|
||||
>
|
||||
<InvoiceInfoSave/>
|
||||
</Modal>
|
||||
{messageContext}
|
||||
</>
|
||||
);
|
||||
}
|
||||
78
src/components/invoice/info/InvoiceInfoSave.tsx
Normal file
78
src/components/invoice/info/InvoiceInfoSave.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import {Button, Flex, Form, Input, Space} from "antd";
|
||||
import {useForm} from "antd/es/form/Form";
|
||||
|
||||
type FormDataType = {
|
||||
invoiceTitle: string;
|
||||
invoicePhone: string;
|
||||
invoiceNo: string;
|
||||
invoiceBank: string;
|
||||
invoiceAddress: string;
|
||||
invoiceAccount: string;
|
||||
}
|
||||
|
||||
export default function InvoiceInfoSave() {
|
||||
|
||||
const [form] = useForm<FormDataType>()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
name="basic"
|
||||
layout="vertical"
|
||||
form={form}
|
||||
onFinish={() => {
|
||||
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="公司名称"
|
||||
name="invoiceTitle"
|
||||
rules={[{required: true, message: '请输入公司名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司名称"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="纳税人识别号"
|
||||
name="invoiceNo"
|
||||
rules={[{required: true, message: '请输入纳税人识别号'}]}
|
||||
>
|
||||
<Input placeholder="请输入纳税人识别号"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="公司地址"
|
||||
name="invoiceAddress"
|
||||
rules={[{required: true, message: '请输入公司地址'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司地址"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="公司电话"
|
||||
name="invoicePhone"
|
||||
rules={[{required: true, message: '请输入公司电话'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司电话"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="开户行"
|
||||
name="invoiceBank"
|
||||
rules={[{required: true, message: '请输入开户行'}]}
|
||||
>
|
||||
<Input placeholder="请输入开户行"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="开户行账号"
|
||||
name="invoiceAccount"
|
||||
rules={[{required: true, message: '请输入开户行账号'}]}
|
||||
>
|
||||
<Input placeholder="请输入开户行账号"/>
|
||||
</Form.Item>
|
||||
<Flex justify="center">
|
||||
<Space size={5}>
|
||||
<Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-primary)'}}>保存</Button>
|
||||
<Button type="default" onClick={() => {}}>关闭</Button>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -384,7 +384,6 @@ export default function Payment(props: IPaymentProps) {
|
||||
<Spin tip="正在提交..." spinning={isLoading}>
|
||||
<Form
|
||||
name="basic"
|
||||
initialValues={{remember: true}}
|
||||
form={form}
|
||||
onFinish={() => {
|
||||
post<any>({
|
||||
|
||||
@ -18,6 +18,13 @@ type Req<T> = {
|
||||
onFinally?(): void;
|
||||
}
|
||||
|
||||
export interface IDictionary {
|
||||
dataId: string;
|
||||
dataParentId: string;
|
||||
dataName: string;
|
||||
dataCode: string;
|
||||
}
|
||||
|
||||
axios.interceptors.request.use(config => {
|
||||
if (config.method === 'get') {
|
||||
config.data = {unused: 0} // 这个是关键点，解决get 请求添加不上content_type
|
||||
@ -39,6 +46,18 @@ export function uploadFileUrl() {
|
||||
return `${Axios.defaults?.baseURL}/api/file/v2/upload-file`;
|
||||
}
|
||||
|
||||
export async function listDictionary(parentId: string, messageApi: MessageInstance) {
|
||||
return new Promise<IDictionary[]>(resolve => {
|
||||
get<IDictionary[]>({
|
||||
messageApi,
|
||||
url: `/api/data/listbyparentid/${parentId}`,
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function get<T>(req: Req<T>) {
|
||||
req.onBefore?.();
|
||||
Axios.get<T>(req.url, req.config).then(res => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user