feat(invoice): optimize invoice components and enhance user experience (3dd1b455) | Commits | canrd-main / canrd-erp-front

Commit 3dd1b455576b0859e6f52923e6aaeb584ab3318d

Authored by 曾国涛 2024-08-06 10:54:55 +0800

feat(invoice): optimize invoice components and enhance user experience

- 重构Client页面表格组件，文件重命名为AllRecordTable.tsx，优化表格项显示
- 修改发票类型显示名称，增加文本复制功能，提升用户交互体验
- 移除部分不必要组件和代码，简化页面结构，提高代码可维护性- 修正InvoiceModal组件中submitter属性，改进页面提交逻辑- 优化InvoiceRecordDetailModal组件，简化订单号显示方式，增加复制功能
- 调整InvoicingModal和ManualInvoicingModal组件，移除冗余的select和list组件
-增加pageSizeOptions配置，提供分页大小选择，改善数据浏览体验
- 修复Invoice组件中开票日期显示格式问题，统一数据展示样式
- 优化Order组件中的按钮权限判断逻辑，提升页面响应性
- 删除不再使用的enumToSelect函数，精简代码依赖
- 修正InvoicingDrawerForm组件中产品名称复制功能的实现
- 优化表单验证逻辑，增强数据校验的准确性和用户体验

通过这些改动，- 实现导出客户信息为Excel文件的功能。
- 使用useMessage钩子来管理Ant Design消息提示。
- 添加单元格操作按钮，包括查看沟通历史、详情和编辑客户信息。
- 组件使用了editable、columnsState和form等高级特性，以提供更好的用户体验和数据管理。

通过这个提交，我们完成了客户记录的表格展示页面，实现了数据的查询、筛选、导出及一些基本操作，提升了项目的业务功能完备性。"增加客户统计信息和调整客户端表格布局"模块结构以支持核销功能本次更新主要涉及发票相关组件及页面的重构，以支持新的核销功能。具体变更包括：

- 重命名并移动了多个与发票核销相关的组件，以便于在新的`InvoiceVerification`目录中集中管理。
- 对`InvoiceVerificationModal`进行了清理，并更新了相关的导入路径。
- 移除了未使用的常量导入和组件，以简化代码并提高可维护性。- 更新了`index.tsx`中的导入路径，以确保正确引入新的组件和常量。
- 修改了`constant.tsx`中的部分导出，以适应新的核销功能。

此次重构旨在为系统引入核销功能，提高发票管理的灵活性和效率。通过整理和更新代码结构，也使得代码更加清晰，便于后续的维护和开发。```

Inline Side-by-side

Showing 16 changed files with 2661 additions and 1177 deletions

src/pages/Invoice/InvoiceVerification/components/AddInvoiceDrawerForm.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import { PAYEE_OPTIONS } from '@/pages/Order/constant';
	3	+import {
	4	+ postServiceInvoiceAddInvoice,
	5	+ postServiceOrderQuerySalesCode,
	6	+} from '@/services';
	7	+import { enumToSelect } from '@/utils';
	8	+import { PlusOutlined } from '@ant-design/icons';
	9	+import {
	10	+ DrawerForm,
	11	+ ProFormDateTimePicker,
	12	+ ProFormGroup,
	13	+ ProFormList,
	14	+ ProFormMoney,
	15	+ ProFormSelect,
	16	+ ProFormText,
	17	+ ProFormTextArea,
	18	+} from '@ant-design/pro-components';
	19	+import { Button, Form, message } from 'antd';
	20	+import { useEffect, useState } from 'react';
	21	+
	22	+export default ({ onClose }) => {
	23	+ const [form] = Form.useForm<{
	24	+ invoiceNumber: '';
	25	+ invoiceStatus: '';
	26	+ purchaser: '';
	27	+ payee: '';
	28	+ contacts: '';
	29	+ sale: '';
	30	+ invoicingTime: '';
	31	+ notes: '';
	32	+ mainOrderIdObjs: [
	33	+ {
	34	+ mainOrderId: '';
	35	+ },
	36	+ ];
	37	+ money: '';
	38	+ }>();
	39	+ const [salesCodeOptions, setSalesCodeOptions] = useState([]);
	40	+ const getSalesCodeOptions = async () => {
	41	+ const res = await postServiceOrderQuerySalesCode();
	42	+ let options = res.data?.map((item) => {
	43	+ return {
	44	+ label: item.userName,
	45	+ value: item.userName,
	46	+ number: item.number,
	47	+ };
	48	+ });
	49	+ setSalesCodeOptions(options);
	50	+ };
	51	+ useEffect(() => {
	52	+ getSalesCodeOptions();
	53	+ }, []);
	54	+ return (
	55	+ <DrawerForm<{
	56	+ invoiceNumber: string;
	57	+ invoiceStatus: string;
	58	+ purchaser: string;
	59	+ payee: string;
	60	+ contacts: string;
	61	+ sale: string;
	62	+ invoicingTime: Date;
	63	+ notes: string;
	64	+ mainOrderIdObjs: [
	65	+ {
	66	+ mainOrderId: string;
	67	+ },
	68	+ ];
	69	+ money: string;
	70	+ }>
	71	+ title="新增开票"
	72	+ resize={{
	73	+ onResize() {
	74	+ console.log('resize!');
	75	+ },
	76	+ maxWidth: window.innerWidth * 0.8,
	77	+ minWidth: 500,
	78	+ }}
	79	+ form={form}
	80	+ trigger={
	81	+ <Button type="primary">
	82	+ <PlusOutlined />
	83	+ 新增
	84	+ </Button>
	85	+ }
	86	+ autoFocusFirstInput
	87	+ drawerProps={{
	88	+ destroyOnClose: true,
	89	+ }}
	90	+ submitTimeout={2000}
	91	+ onFinish={async (values) => {
	92	+ console.log(values);
	93	+ const mainOrderIds = values.mainOrderIdObjs.flatMap(
	94	+ (item) => item.mainOrderId,
	95	+ );
	96	+ let attrs = { ...values, mainOrderIds };
	97	+ let res = await postServiceInvoiceAddInvoice({
	98	+ data: { ...attrs },
	99	+ });
	100	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	101	+ message.success(res.message);
	102	+ } else {
	103	+ message.error(res.message);
	104	+ return false;
	105	+ }
	106	+ onClose();
	107	+ // 不返回不会关闭弹框
	108	+ return true;
	109	+ }}
	110	+ >
	111	+ <ProFormText
	112	+ name="invoiceNumber"
	113	+ width="md"
	114	+ label="发票号码"
	115	+ placeholder="请输入名称"
	116	+ rules={[{ required: true, message: '请输入名称!' }]}
	117	+ />
	118	+ <ProFormSelect
	119	+ name="invoiceStatus"
	120	+ label="发票类型"
	121	+ valueEnum={{
	122	+ SPECIALLY_INVOICED: '专票',
	123	+ COMMON_INVOICED: '普票',
	124	+ }}
	125	+ rules={[{ required: true, message: '请选择发票类型!' }]}
	126	+ />
	127	+ <ProFormText
	128	+ name="purchaser"
	129	+ width="md"
	130	+ label="购买方"
	131	+ placeholder="请输入购买方"
	132	+ rules={[{ required: true, message: '请输入购买方!' }]}
	133	+ />
	134	+ <ProFormSelect
	135	+ placeholder="收款单位"
	136	+ name="payee"
	137	+ width="lg"
	138	+ key="payee"
	139	+ showSearch
	140	+ label="开票收款单位"
	141	+ tooltip="财务开票将依据这个字段，选择对应的公司开票"
	142	+ options={enumToSelect(PAYEE_OPTIONS)}
	143	+ />
	144	+ <ProFormText
	145	+ name="contacts"
	146	+ width="md"
	147	+ label="联系人"
	148	+ placeholder="请输入联系人"
	149	+ rules={[{ required: true, message: '请输入联系人!' }]}
	150	+ />
	151	+ <ProFormSelect
	152	+ name="sale"
	153	+ key="sale"
	154	+ width="lg"
	155	+ showSearch
	156	+ label="销售代表"
	157	+ placeholder="请选择销售代表"
	158	+ options={salesCodeOptions}
	159	+ />
	160	+ <ProFormDateTimePicker
	161	+ name="invoicingTime"
	162	+ label="开票时间"
	163	+ fieldProps={{
	164	+ format: (value) => value.format('YYYY-MM-DD'),
	165	+ }}
	166	+ rules={[{ required: true, message: '请输入开票时间!' }]}
	167	+ />
	168	+ <ProFormTextArea name="notes" label="备注" placeholder="请输入名称" />
	169	+ <ProFormList
	170	+ name="mainOrderIdObjs"
	171	+ label="订单号"
	172	+ min={1}
	173	+ copyIconProps={false}
	174	+ deleteIconProps={{
	175	+ tooltipText: '删除',
	176	+ }}
	177	+ initialValue={[
	178	+ {
	179	+ mainOrderId: '',
	180	+ },
	181	+ ]}
	182	+ >
	183	+ <ProFormGroup key="group">
	184	+ <ProFormText
	185	+ rules={[{ required: true, message: '请输入关联订单!' }]}
	186	+ name="mainOrderId"
	187	+ />
	188	+ </ProFormGroup>
	189	+ </ProFormList>
	190	+ <ProFormMoney
	191	+ label="金额"
	192	+ name="money"
	193	+ customSymbol="￥"
	194	+ min={0}
	195	+ rules={[{ required: true, message: '请输入金额!' }]}
	196	+ />
	197	+ </DrawerForm>
	198	+ );
	199	+};
...	...

src/pages/Invoice/InvoiceVerification/components/BankChooseModal.tsx 0 → 100644

View file @3dd1b45

	1	+import EllipsisDiv from '@/components/Div/EllipsisDiv';
	2	+import { RESPONSE_CODE } from '@/constants/enum';
	3	+import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
	4	+import {
	5	+ postServiceBankStatementQueryBankStatement,
	6	+ postServiceInvoiceInvoiceWriteOff,
	7	+} from '@/services';
	8	+import { FloatAdd, FloatSub, enumValueToLabel, formatDateTime } from '@/utils';
	9	+import { formatDate } from '@/utils/time';
	10	+
	11	+import { ActionType, ProCard, ProTable } from '@ant-design/pro-components';
	12	+import { Button, Divider, Flex, Modal, Tag, message } from 'antd';
	13	+import { useRef, useState } from 'react';
	14	+import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../../constant';
	15	+import '../index.less';
	16	+
	17	+export default ({ loadInvoiceData, invoiceId, setVisible, onClose }) => {
	18	+ const [selectedStatement, setSelectedStatement] = useState([]);
	19	+ const [selectedStatementIdSet, setSelectedStatementIdSet] = useState(
	20	+ new Set(),
	21	+ );
	22	+ const [totalAmount, setTotalAmount] = useState(0);
	23	+
	24	+ // 添加元素到Set
	25	+ const addElement = (element) => {
	26	+ setSelectedStatementIdSet((prevSet) => new Set([...prevSet, element]));
	27	+ };
	28	+
	29	+ // 从Set中删除元素
	30	+ const removeElement = (element) => {
	31	+ setSelectedStatementIdSet((prevSet) => {
	32	+ const newSet = new Set(prevSet);
	33	+ newSet.delete(element);
	34	+ return newSet;
	35	+ });
	36	+ };
	37	+
	38	+ const [btnLoading, setBtnLoading] = useState(false);
	39	+
	40	+ const actionRef = useRef<ActionType>();
	41	+ const getTableCellText = (target: any) => {
	42	+ if (!target) {
	43	+ return '';
	44	+ }
	45	+
	46	+ if (target.props) {
	47	+ return target.props.text;
	48	+ }
	49	+
	50	+ return target;
	51	+ };
	52	+
	53	+ /**
	54	+ * 加载列表表格的各个列格式
	55	+ */
	56	+ const bankStatementColumnsInit = () => {
	57	+ let columns = BANK_STATEMENT_COLUMNS.map((item) => {
	58	+ let newItem = { ...item };
	59	+ let dataIndex = item.dataIndex;
	60	+ let dataType = item.valueType;
	61	+
	62	+ if (item.dataIndex === 'status') {
	63	+ newItem.hideInSearch = true;
	64	+ }
	65	+
	66	+ newItem.render = (text, record) => {
	67	+ let textValue = record[dataIndex];
	68	+
	69	+ if (dataType === 'date') {
	70	+ textValue = formatDate(textValue);
	71	+ }
	72	+
	73	+ if (dataType === 'dateTime') {
	74	+ textValue = formatDateTime(textValue);
	75	+ }
	76	+
	77	+ if (dataType === 'money') {
	78	+ textValue = '￥' + textValue;
	79	+ }
	80	+
	81	+ switch (dataIndex) {
	82	+ case 'invoiceStatus':
	83	+ return (
	84	+ <EllipsisDiv
	85	+ text={enumValueToLabel(
	86	+ getTableCellText(textValue),
	87	+ INVOCING_STATUS,
	88	+ )}
	89	+ />
	90	+ );
	91	+
	92	+ case 'status': {
	93	+ //这里状态不显示在筛选条件中，只能筛异常的流水
	94	+ return (
	95	+ <EllipsisDiv
	96	+ text={enumValueToLabel(
	97	+ getTableCellText(textValue),
	98	+ INVOICE_STATUS,
	99	+ )}
	100	+ />
	101	+ );
	102	+ }
	103	+ case 'payee':
	104	+ return (
	105	+ <EllipsisDiv
	106	+ text={enumValueToLabel(
	107	+ getTableCellText(textValue),
	108	+ PAYEE_OPTIONS,
	109	+ )}
	110	+ />
	111	+ );
	112	+
	113	+ default:
	114	+ return <EllipsisDiv text={getTableCellText(textValue)} />;
	115	+ }
	116	+ };
	117	+
	118	+ return newItem;
	119	+ });
	120	+
	121	+ columns.push({
	122	+ title: '操作',
	123	+ valueType: 'option',
	124	+ key: 'option',
	125	+ fixed: 'right',
	126	+ width: 70,
	127	+ render: (text, record) => [
	128	+ <Button
	129	+ className="p-0"
	130	+ key="choose"
	131	+ type="link"
	132	+ onClick={() => {
	133	+ let amount = record.loanAmount \|\| record.transactionAmount \|\| 0;
	134	+
	135	+ //已经选中，取消选中
	136	+ if (selectedStatementIdSet.has(record.id)) {
	137	+ setSelectedStatement(
	138	+ selectedStatement.filter((item) => {
	139	+ return item.id !== record.id;
	140	+ }),
	141	+ );
	142	+ removeElement(record.id);
	143	+ setTotalAmount(parseFloat(FloatSub(totalAmount, amount)));
	144	+ } else {
	145	+ //添加到已选中区域中
	146	+ let newSelectedStatement = [...selectedStatement];
	147	+ newSelectedStatement.push(record);
	148	+ setSelectedStatement(newSelectedStatement);
	149	+ addElement(record.id);
	150	+ setTotalAmount(FloatAdd(totalAmount, amount));
	151	+ }
	152	+ }}
	153	+ >
	154	+ {selectedStatementIdSet.has(record.id) ? '取消选中' : '选中'}
	155	+ </Button>,
	156	+ ],
	157	+ });
	158	+
	159	+ return columns;
	160	+ };
	161	+
	162	+ /**
	163	+ * 删除已选中
	164	+ * @param record
	165	+ */
	166	+ const removeSelectedStatement = (record: any) => {
	167	+ setSelectedStatement(
	168	+ selectedStatement.filter((item) => {
	169	+ return item.id !== record.id;
	170	+ }),
	171	+ );
	172	+ removeElement(record.id);
	173	+ };
	174	+
	175	+ const showSelectedStatement = () => {
	176	+ let i = 0;
	177	+
	178	+ let tags = selectedStatement.map((item) => {
	179	+ let tagText = item.id;
	180	+
	181	+ if (item.payeePayerName) {
	182	+ tagText += ' ' + item.payeePayerName + ' ';
	183	+ }
	184	+
	185	+ if (item.loanAmount) {
	186	+ tagText += item.loanAmount + ' ';
	187	+ }
	188	+
	189	+ if (item.transactionAmount) {
	190	+ tagText += item.transactionAmount;
	191	+ }
	192	+
	193	+ return (
	194	+ <Tag
	195	+ key={i++}
	196	+ closable={true}
	197	+ style={{ userSelect: 'none' }}
	198	+ color="blue"
	199	+ onClose={(e) => {
	200	+ e.preventDefault(); //需要加上这句代码，不然删除tag时，当前tag的下一个tag会被设置ant-tag-hidden
	201	+ removeSelectedStatement(item);
	202	+ }}
	203	+ >
	204	+ <span>{tagText}</span>
	205	+ </Tag>
	206	+ );
	207	+ });
	208	+
	209	+ return tags;
	210	+ };
	211	+
	212	+ return (
	213	+ <>
	214	+ <Modal
	215	+ open
	216	+ width="80%"
	217	+ title="添加银行流水"
	218	+ className="bank-statement-choose"
	219	+ onOk={async () => {
	220	+ setBtnLoading(true);
	221	+ let bankStatementIds = selectedStatement?.map((item) => {
	222	+ return item.id;
	223	+ });
	224	+ let res = await postServiceInvoiceInvoiceWriteOff({
	225	+ data: {
	226	+ invoiceId: invoiceId,
	227	+ bankStatementIds: bankStatementIds,
	228	+ },
	229	+ });
	230	+ setTimeout(() => {
	231	+ loadInvoiceData();
	232	+ }, 500);
	233	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	234	+ if (res.data?.length > 0) {
	235	+ message.info(res.data);
	236	+ } else {
	237	+ message.success(res.message);
	238	+ }
	239	+
	240	+ onClose();
	241	+ }
	242	+ setBtnLoading(false);
	243	+ }}
	244	+ okButtonProps={{
	245	+ loading: btnLoading,
	246	+ }}
	247	+ onCancel={() => {
	248	+ setVisible(false);
	249	+ }}
	250	+ >
	251	+ <Divider orientation="left" plain>
	252	+ 已选中（合计：￥{totalAmount}）
	253	+ </Divider>
	254	+ <ProCard className="mb-[16px]" bordered style={{}}>
	255	+ <Flex wrap="wrap" gap="small">
	256	+ {showSelectedStatement()}
	257	+ </Flex>
	258	+ </ProCard>
	259	+
	260	+ <ProTable
	261	+ columns={bankStatementColumnsInit()}
	262	+ actionRef={actionRef}
	263	+ cardBordered
	264	+ pagination={{
	265	+ pageSize: 10,
	266	+ }}
	267	+ editable={{
	268	+ type: 'multiple',
	269	+ onSave: async (rowKey, data) => {
	270	+ console.log(rowKey, data);
	271	+ },
	272	+ actionRender: (row, config, defaultDom) => [
	273	+ defaultDom.save,
	274	+ defaultDom.cancel,
	275	+ ],
	276	+ }}
	277	+ request={async (params) => {
	278	+ const res = await postServiceBankStatementQueryBankStatement({
	279	+ data: { ...params, status: 'ABNORMAL' },
	280	+ });
	281	+ if (res) {
	282	+ return {
	283	+ data: res?.data?.data \|\| [],
	284	+ total: res?.data?.total \|\| 0,
	285	+ };
	286	+ }
	287	+ }}
	288	+ columnsState={{
	289	+ persistenceKey: 'pro-table-singe-demos',
	290	+ persistenceType: 'localStorage',
	291	+ defaultValue: {
	292	+ option: { fixed: 'right', disable: true },
	293	+ },
	294	+ onChange(value) {
	295	+ console.log('value: ', value);
	296	+ },
	297	+ }}
	298	+ rowKey="id"
	299	+ search={{
	300	+ labelWidth: 'auto',
	301	+ }}
	302	+ options={{
	303	+ setting: {
	304	+ listsHeight: 400,
	305	+ },
	306	+ }}
	307	+ form={{}}
	308	+ dateFormatter="string"
	309	+ headerTitle="银行流水列表"
	310	+ scroll={{ x: 1400, y: 360 }}
	311	+ toolBarRender={() => []}
	312	+ />
	313	+ </Modal>
	314	+ </>
	315	+ );
	316	+};
...	...

src/pages/Invoice/InvoiceVerification/components/BankImportModal.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import { blobToJson } from '@/utils';
	3	+
	4	+import { UploadOutlined } from '@ant-design/icons';
	5	+import { ModalForm } from '@ant-design/pro-components';
	6	+import { Button, Form, Upload, UploadFile, UploadProps, message } from 'antd';
	7	+import { RcFile } from 'antd/es/upload';
	8	+import axios from 'axios';
	9	+import { useState } from 'react';
	10	+
	11	+// import { cloneDeep } from 'lodash';
	12	+export default ({ setVisible, onClose }) => {
	13	+ const [form] = Form.useForm<{ name: string; company: string }>();
	14	+ const [fileList, setFileList] = useState<UploadFile[]>([]);
	15	+ const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
	16	+ setFileList(newFileList);
	17	+
	18	+ const [messageApi, contextHolder] = message.useMessage();
	19	+ const [uploadLoading, setUploading] = useState(false);
	20	+ console.log(uploadLoading);
	21	+
	22	+ const exportLoading = (content: string) => {
	23	+ messageApi.open({
	24	+ type: 'loading',
	25	+ content: content,
	26	+ duration: 0,
	27	+ });
	28	+ };
	29	+
	30	+ const downloadImportTemplate = async () => {
	31	+ exportLoading('正在下载......');
	32	+ axios({
	33	+ url: '/api/service/bankStatement/exportTemplate',
	34	+ method: 'post',
	35	+ responseType: 'blob',
	36	+ headers: { Authorization: localStorage.getItem('token') },
	37	+ })
	38	+ .then((response) => {
	39	+ // 创建一个新的 Blob 对象，它包含了服务器响应的数据（即你的 Excel 文件）
	40	+ const blob = new Blob([response.data]); // Excel 的 MIME 类型
	41	+ const downloadUrl = window.URL.createObjectURL(blob);
	42	+ const a = document.createElement('a');
	43	+ a.href = downloadUrl;
	44	+ a.download = '导入模板.xlsx'; // 你可以为文件命名
	45	+ document.body.appendChild(a);
	46	+ a.click(); // 模拟点击操作来下载文件
	47	+ URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
	48	+ document.body.removeChild(a);
	49	+ })
	50	+ .catch((error) => {
	51	+ // 处理错误
	52	+ console.error('导出错误', error);
	53	+ })
	54	+ .finally(() => {
	55	+ messageApi.destroy();
	56	+ });
	57	+ };
	58	+ const handleUpload = async () => {
	59	+ exportLoading('正在导入......');
	60	+
	61	+ const formData = new FormData();
	62	+ fileList.forEach((file) => {
	63	+ formData.append('file', file.originFileObj as RcFile);
	64	+ });
	65	+
	66	+ setUploading(true);
	67	+
	68	+ axios({
	69	+ url: '/api/service/bankStatement/importBankStatementForm',
	70	+ method: 'post',
	71	+ responseType: 'blob',
	72	+ headers: {
	73	+ Authorization: localStorage.getItem('token'),
	74	+ 'Content-Type':
	75	+ 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
	76	+ },
	77	+ data: formData,
	78	+ })
	79	+ .then((response) => {
	80	+ let data = response.data;
	81	+ if (data.type === 'application/json') {
	82	+ blobToJson(data).then((dataJson) => {
	83	+ if (dataJson?.result === RESPONSE_CODE.SUCCESS) {
	84	+ message.success(dataJson?.message);
	85	+ onClose();
	86	+ } else {
	87	+ message.error(dataJson?.message);
	88	+ }
	89	+ });
	90	+ } else {
	91	+ message.error('上传失败，已下载错误信息表格');
	92	+ // 创建一个新的 Blob 对象，它包含了服务器响应的数据（即你的 Excel 文件）
	93	+ const blob = new Blob([response.data]); // Excel 的 MIME 类型
	94	+ const downloadUrl = window.URL.createObjectURL(blob);
	95	+ const a = document.createElement('a');
	96	+ a.href = downloadUrl;
	97	+ a.download = '银行流水导入模板.xlsx'; // 你可以为文件命名
	98	+ document.body.appendChild(a);
	99	+ a.click(); // 模拟点击操作来下载文件
	100	+ URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
	101	+ document.body.removeChild(a);
	102	+ }
	103	+ })
	104	+ .catch((error) => {
	105	+ // 处理错误
	106	+ message.error('系统出现异常了，请联系管理员', error);
	107	+ })
	108	+ .finally(() => {
	109	+ setUploading(false);
	110	+ messageApi.destroy();
	111	+ });
	112	+ };
	113	+ const props: UploadProps = {
	114	+ onRemove: (file) => {
	115	+ const index = fileList.indexOf(file);
	116	+ const newFileList = fileList.slice();
	117	+ newFileList.splice(index, 1);
	118	+ setFileList(newFileList);
	119	+ },
	120	+ beforeUpload: (file) => {
	121	+ setFileList([...fileList, file]);
	122	+
	123	+ return false;
	124	+ },
	125	+ fileList,
	126	+ onChange: handleChange,
	127	+ accept: '.xlsx',
	128	+ };
	129	+
	130	+ return (
	131	+ <>
	132	+ <ModalForm<{
	133	+ name: string;
	134	+ company: string;
	135	+ }>
	136	+ width={500}
	137	+ open
	138	+ title="银行流水导入"
	139	+ form={form}
	140	+ autoFocusFirstInput
	141	+ modalProps={{
	142	+ okText: '确定',
	143	+ cancelText: '取消',
	144	+ destroyOnClose: true,
	145	+ onCancel: () => {
	146	+ setVisible(false);
	147	+ },
	148	+ }}
	149	+ onFinish={async () => {
	150	+ handleUpload();
	151	+ }}
	152	+ onOpenChange={setVisible}
	153	+ >
	154	+ <div className="py-4 font-semibold">
	155	+ 导入银行流水
	156	+ <Button type="link" onClick={downloadImportTemplate}>
	157	+ 下载导入模板
	158	+ </Button>
	159	+ </div>
	160	+ <Upload {...props}>
	161	+ <Button icon={<UploadOutlined />} disabled={fileList.length > 0}>
	162	+ 点击选择文件
	163	+ </Button>
	164	+ </Upload>
	165	+ </ModalForm>
	166	+
	167	+ {contextHolder}
	168	+ </>
	169	+ );
	170	+};
...	...

src/pages/Invoice/InvoiceVerification/components/Invoice.tsx 0 → 100644

View file @3dd1b45

	1	+import styled from 'styled-components';
	2	+const InvoiceTmpDiv = styled.div`
	3	+ font-size: 12px;
	4	+ width: 1120px;
	5	+ .title {
	6	+ font-size: 26px;
	7	+ color: #b16363;
	8	+ text-align: center;
	9	+ line-height: 56px;
	10	+ padding-top: 0;
	11	+ }
	12	+ .extra {
	13	+ color: #b15b16;
	14	+ .content {
	15	+ color: #181818;
	16	+ }
	17	+ }
	18	+ .height84 {
	19	+ height: 110px;
	20	+ }
	21	+ .row {
	22	+ border: 2px solid #b16363;
	23	+ border-bottom: none;
	24	+ color: #b15b16;
	25	+ .content {
	26	+ color: #181818;
	27	+ }
	28	+ }
	29	+ .last-row {
	30	+ .content {
	31	+ color: #181818;
	32	+ }
	33	+ color: #b15b16;
	34	+ border-top: 2px solid #b16363;
	35	+ }
	36	+ .label {
	37	+ width: 78px;
	38	+ display: inline-block;
	39	+ text-align-last: justify;
	40	+ text-align: justify;
	41	+ }
	42	+ .longLabel {
	43	+ width: 178px;
	44	+ display: inline-block;
	45	+ text-align-last: justify;
	46	+ text-align: justify;
	47	+ }
	48	+ .title-label {
	49	+ width: 52px;
	50	+ }
	51	+`;
	52	+const Row = styled.div`
	53	+ .col_1 {
	54	+ width: 2.65%;
	55	+ borderleft: none;
	56	+ }
	57	+ .col_4 {
	58	+ width: 3.75%;
	59	+ }
	60	+ .col_9 {
	61	+ width: 7.4%;
	62	+ }
	63	+ .col_2 {
	64	+ width: 8.33%;
	65	+ }
	66	+ .col_3 {
	67	+ width: 12.5%;
	68	+ }
	69	+ .col_5 {
	70	+ width: 20.83%;
	71	+ }
	72	+ .col_6 {
	73	+ width: 42.5%;
	74	+ }
	75	+ .col_7 {
	76	+ width: 29.16%;
	77	+ }
	78	+ .col_8 {
	79	+ width: 33.33%;
	80	+ }
	81	+ .col_14 {
	82	+ width: 58.33%;
	83	+ }
	84	+ .col_15 {
	85	+ width: 42.5%;
	86	+ }
	87	+ .col_17 {
	88	+ width: 70.83%;
	89	+ }
	90	+ .col_18 {
	91	+ width: 100%;
	92	+ }
	93	+ .col_24 {
	94	+ width: 100%;
	95	+ }
	96	+`;
	97	+const Col = styled.span`
	98	+ display: inline-block;
	99	+ padding: 8px;
	100	+ box-sizing: border-box;
	101	+ vertical-align: middle;
	102	+ border-left: 2px solid #b16363;
	103	+ height: 100%;
	104	+ &.no-border {
	105	+ border-left: none;
	106	+ }
	107	+ .text-center {
	108	+ text-align: center;
	109	+ border-left: none;
	110	+ border-right: none;
	111	+ }
	112	+ &.transparent-border {
	113	+ border-left: 2px solid rgba(0, 0, 0, 0);
	114	+ }
	115	+ &.invoice-number {
	116	+ border-left: none;
	117	+ color: #b16363;
	118	+ padding: 0 0 0 800px;
	119	+ font-size: 14px;
	120	+ }
	121	+`;
	122	+const UnderLine = styled.div`
	123	+ border: 2px solid #b16363;
	124	+ width: 325px;
	125	+ height: 8px;
	126	+ margin: -1% 0 2% 35%;
	127	+ border-left: none;
	128	+ border-right: none;
	129	+`;
	130	+const InvoiceInfo = styled.span`
	131	+ color: black;
	132	+`;
	133	+const TitleDescription = styled.div`
	134	+ margin-top: 4.2%;
	135	+`;
	136	+const ProjectContainer = styled.div`
	137	+ width: 100%;
	138	+ height: 160px;
	139	+ border-top: 2px solid #b16363;
	140	+ border-right: 2px solid #b16363;
	141	+ border-left: 2px solid #b16363;
	142	+ overflow: auto;
	143	+ .single-project {
	144	+ width: 100%;
	145	+ height: 30px;
	146	+ }
	147	+`;
	148	+export default ({ data }) => {
	149	+ return (
	150	+ <div>
	151	+ <InvoiceTmpDiv>
	152	+ <Row>
	153	+ <Col className="col_18 invoice-number">
	154	+ 发票号码：<InvoiceInfo>{data.invoiceNumber}</InvoiceInfo>
	155	+ </Col>
	156	+ <Col className="title col_18 no-border">
	157	+ 电子发票（
	158	+ {data.type === 'SPECIAL_TICKET' ? '增值税专用发票' : '普通发票'}）
	159	+ </Col>
	160	+ <UnderLine className="UnderLine">
	161	+ <div></div>
	162	+ </UnderLine>
	163	+ </Row>
	164	+ <Row className="row height84">
	165	+ <Col className="col_1 no-border">购买方信息</Col>
	166	+ <Col className="col_15">
	167	+ <TitleDescription>
	168	+ <span className="label">名称</span>：
	169	+ <span className="content">{data.partyAName}</span>
	170	+ </TitleDescription>
	171	+ <TitleDescription>
	172	+ <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
	173	+ <span className="content">{data.partyATaxid}</span>
	174	+ </TitleDescription>
	175	+ </Col>
	176	+ <Col className="col_1">销售方信息</Col>
	177	+ <Col className="col_6">
	178	+ <TitleDescription>
	179	+ <span className="label">名称</span>：
	180	+ <span className="content">{data.partyBName}</span>
	181	+ </TitleDescription>
	182	+ <TitleDescription>
	183	+ <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
	184	+ <span className="content">{data.partyBTaxid}</span>
	185	+ </TitleDescription>
	186	+ </Col>
	187	+ </Row>
	188	+ <Row className="row">
	189	+ <Col className="col_7 no-border">
	190	+ <div className="text-center">项目名称</div>
	191	+ </Col>
	192	+ <Col className="col_5">
	193	+ <div className="text-center">规格型号</div>
	194	+ </Col>
	195	+ <Col className="">
	196	+ <div className="text-center">单位</div>
	197	+ </Col>
	198	+ <Col className="col_2">
	199	+ <div className="text-center">数量</div>
	200	+ </Col>
	201	+ <Col className="col_2">
	202	+ <div className="text-center">单价</div>
	203	+ </Col>
	204	+ <Col className="col_2">
	205	+ <div className="text-center">金额</div>
	206	+ </Col>
	207	+ <Col className="">
	208	+ <div className="text-center">税率/征收率</div>
	209	+ </Col>
	210	+ <Col className="col_2">
	211	+ <div className="text-center">税额</div>
	212	+ </Col>
	213	+ </Row>
	214	+ <Row>
	215	+ <ProjectContainer>
	216	+ {data &&
	217	+ data.invoiceDetails?.map((item) => {
	218	+ const {
	219	+ taxPrice,
	220	+ totalPrice,
	221	+ specification,
	222	+ projectName,
	223	+ quantity,
	224	+ price,
	225	+ taxRate,
	226	+ unit,
	227	+ } = item;
	228	+ return (
	229	+ <div className="single-project" key={item.id}>
	230	+ <Col
	231	+ className="col_7 transparent-border"
	232	+ key={'projectName'}
	233	+ >
	234	+ <div className="text-center">{projectName}</div>
	235	+ </Col>
	236	+ <Col
	237	+ className="col_5 transparent-border"
	238	+ key={'specification'}
	239	+ >
	240	+ <div className="text-center">{specification}</div>
	241	+ </Col>
	242	+ <Col className=" transparent-border" key={'unit'}>
	243	+ <div className="text-center">{unit}</div>
	244	+ </Col>
	245	+ <Col className="col_2 transparent-border" key={'quantity'}>
	246	+ <div className="text-center">{quantity}</div>
	247	+ </Col>
	248	+ <Col className="col_2 transparent-border" key={'price'}>
	249	+ <div className="text-center">{price}</div>
	250	+ </Col>
	251	+ <Col
	252	+ className="col_2 transparent-border"
	253	+ key={'totalPrice'}
	254	+ >
	255	+ <div className="text-center">{totalPrice}</div>
	256	+ </Col>
	257	+ <Col className=" transparent-border" key={'taxRate'}>
	258	+ <div className="text-center">{taxRate}</div>
	259	+ </Col>
	260	+ <Col className="col_2 transparent-border" key={'taxPrice'}>
	261	+ <div className="text-center">{taxPrice}</div>
	262	+ </Col>
	263	+ </div>
	264	+ );
	265	+ })}
	266	+ </ProjectContainer>
	267	+ </Row>
	268	+ <Row className="row">
	269	+ <Col className="col_15 no-border">
	270	+ 价税合计（大写）
	271	+ <InvoiceInfo>{data.totalPriceText}</InvoiceInfo>
	272	+ </Col>
	273	+ <Col className="no-border">
	274	+ （小写）<InvoiceInfo>￥{data.totalPrice}</InvoiceInfo>
	275	+ </Col>
	276	+ </Row>
	277	+ <Row className="row height84">
	278	+ <Col className="col_1 no-border">备注</Col>
	279	+ <Col className="col_7">
	280	+ <InvoiceInfo>{data.comment}</InvoiceInfo>
	281	+ </Col>
	282	+ </Row>
	283	+ <Row className="last-row">
	284	+ <Col className="col_6 no-border">
	285	+ 开票人：<InvoiceInfo>{data.invoicingPerson}</InvoiceInfo>
	286	+ </Col>
	287	+ </Row>
	288	+ </InvoiceTmpDiv>
	289	+ </div>
	290	+ );
	291	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceDetailImportModal.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import { postServiceInvoiceImportInvoiceDetails } from '@/services';
	3	+import { ModalForm, ProFormUploadDragger } from '@ant-design/pro-components';
	4	+import { Button, Form, message } from 'antd';
	5	+
	6	+export default ({ recordId }) => {
	7	+ const [form] = Form.useForm();
	8	+ return (
	9	+ <ModalForm
	10	+ title="新建表单"
	11	+ trigger={<Button type="primary">导入明细</Button>}
	12	+ form={form}
	13	+ autoFocusFirstInput
	14	+ modalProps={{
	15	+ destroyOnClose: true,
	16	+ onCancel: () => console.log('run'),
	17	+ }}
	18	+ submitTimeout={2000}
	19	+ onFinish={async (values) => {
	20	+ const formData = new FormData();
	21	+ // console.log(fileList[0] as RcFile)
	22	+ // formData.append('file', fileList[0] as RcFile);
	23	+ formData.append('invoiceRecordId', recordId);
	24	+ formData.append('detailsExcel', values.detailsExcel[0].originFileObj);
	25	+ // You can use any AJAX library you like
	26	+ const res = await postServiceInvoiceImportInvoiceDetails({
	27	+ data: formData,
	28	+ headers: {
	29	+ 'Content-Type':
	30	+ 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
	31	+ },
	32	+ });
	33	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	34	+ message.success('导入成功');
	35	+ return true;
	36	+ }
	37	+ }}
	38	+ >
	39	+ <ProFormUploadDragger name="detailsExcel" label="导入明细表" />
	40	+ </ModalForm>
	41	+ );
	42	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceDetailTable.tsx 0 → 100644

View file @3dd1b45

	1	+import InvoiceDetailImportModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceDetailImportModal';
	2	+import { InvoiceProjectSelect } from '@/pages/Invoice/InvoiceVerification/components/InvoiceProjectSelect';
	3	+import {
	4	+ ActionType,
	5	+ EditableProTable,
	6	+ ProCard,
	7	+ ProColumns,
	8	+ ProFormField,
	9	+} from '@ant-design/pro-components';
	10	+import { useEffect, useRef, useState } from 'react';
	11	+
	12	+export default ({ recordId, details, updateDetails, readOnly }) => {
	13	+ const [editableKeys, setEditableRowKeys] = useState([]);
	14	+ const ref = useRef<ActionType>();
	15	+ useEffect(() => {
	16	+ updateDetails(details);
	17	+ }, []);
	18	+
	19	+ useEffect(() => {
	20	+ setEditableRowKeys(details?.map((item) => item.tid));
	21	+ }, [details]);
	22	+ const columns: ProColumns[] = [
	23	+ {
	24	+ title: '项目名称',
	25	+ dataIndex: 'projectName',
	26	+ width: 200,
	27	+ ellipsis: true,
	28	+ readonly: readOnly,
	29	+ renderFormItem: () => {
	30	+ return <InvoiceProjectSelect readOnly={readOnly} />;
	31	+ },
	32	+ },
	33	+ {
	34	+ title: '规格型号',
	35	+ readonly: readOnly,
	36	+ dataIndex: 'specification',
	37	+ valueType: 'text',
	38	+ ellipsis: true,
	39	+ },
	40	+ {
	41	+ title: '单位',
	42	+ readonly: readOnly,
	43	+ dataIndex: 'unit',
	44	+ valueType: 'text',
	45	+ ellipsis: true,
	46	+ },
	47	+ {
	48	+ title: '数量',
	49	+ readonly: readOnly,
	50	+ dataIndex: 'quantity',
	51	+ valueType: 'digit',
	52	+ ellipsis: true,
	53	+ },
	54	+ {
	55	+ title: '单价',
	56	+ readonly: readOnly,
	57	+ dataIndex: 'price',
	58	+ valueType: 'digit',
	59	+ ellipsis: true,
	60	+ },
	61	+ {
	62	+ title: '金额',
	63	+ readonly: readOnly,
	64	+ dataIndex: 'totalPrice',
	65	+ valueType: 'digit',
	66	+ ellipsis: true,
	67	+ },
	68	+ {
	69	+ title: '税率/征收率',
	70	+ readonly: true,
	71	+ dataIndex: 'taxRate',
	72	+ valueType: () => ({
	73	+ type: 'percent',
	74	+ }),
	75	+ ellipsis: true,
	76	+ },
	77	+ {
	78	+ title: '税额',
	79	+ readonly: true,
	80	+ dataIndex: 'taxPrice',
	81	+ valueType: 'digit',
	82	+ ellipsis: true,
	83	+ },
	84	+ {
	85	+ title: '操作',
	86	+ valueType: 'option',
	87	+ width: 100,
	88	+ render: () => {
	89	+ return null;
	90	+ },
	91	+ },
	92	+ ];
	93	+
	94	+ return (
	95	+ <>
	96	+ <EditableProTable
	97	+ columns={columns}
	98	+ actionRef={ref}
	99	+ rowKey="tid"
	100	+ scroll={{
	101	+ x: 960,
	102	+ }}
	103	+ value={details}
	104	+ controlled={true}
	105	+ recordCreatorProps={
	106	+ readOnly
	107	+ ? false
	108	+ : {
	109	+ newRecordType: 'dataSource',
	110	+ record: () => ({
	111	+ tid: Date.now(),
	112	+ }),
	113	+ }
	114	+ }
	115	+ toolBarRender={() => {
	116	+ return [
	117	+ <InvoiceDetailImportModal key={'import'} recordId={recordId} />,
	118	+ ];
	119	+ }}
	120	+ editable={{
	121	+ type: 'multiple',
	122	+ editableKeys,
	123	+ actionRender: (row, config, defaultDoms) => {
	124	+ return [defaultDoms.delete];
	125	+ },
	126	+
	127	+ onValuesChange: (record, recordList) => {
	128	+ //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
	129	+ const records = recordList.map((item) => {
	130	+ return item;
	131	+ });
	132	+ updateDetails(records);
	133	+ },
	134	+ }}
	135	+ />
	136	+ {
	137	+ <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
	138	+ <ProFormField
	139	+ ignoreFormItem
	140	+ fieldProps={{
	141	+ style: {
	142	+ width: '100%',
	143	+ },
	144	+ }}
	145	+ mode="read"
	146	+ valueType="jsonCode"
	147	+ text={JSON.stringify(details)}
	148	+ />
	149	+ </ProCard>
	150	+ }
	151	+ </>
	152	+ );
	153	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceModal.tsx 0 → 100644

View file @3dd1b45

	1	+import Invoice from '@/pages/Invoice/InvoiceVerification/components/Invoice';
	2	+import { postServiceInvoiceGetInvoiceRecord } from '@/services';
	3	+import { ModalForm } from '@ant-design/pro-components';
	4	+import { Form } from 'antd';
	5	+import { useEffect, useState } from 'react';
	6	+
	7	+export default ({ recordId, getRecord, button }) => {
	8	+ const [data, setData] = useState<any>({});
	9	+ const getData = async () => {
	10	+ let ret = await postServiceInvoiceGetInvoiceRecord({
	11	+ query: {
	12	+ id: recordId,
	13	+ },
	14	+ });
	15	+ setData(ret.data);
	16	+ };
	17	+ useEffect(() => {
	18	+ if (recordId) {
	19	+ getData();
	20	+ }
	21	+ }, []);
	22	+ const [form] = Form.useForm();
	23	+ return (
	24	+ <ModalForm
	25	+ title="预览发票"
	26	+ trigger={button ? button : <a type="primary">预览</a>}
	27	+ onOpenChange={(open) => {
	28	+ if (open) {
	29	+ if (getRecord) {
	30	+ setData(getRecord());
	31	+ } else {
	32	+ getData();
	33	+ }
	34	+ }
	35	+ }}
	36	+ width={1200}
	37	+ form={form}
	38	+ autoFocusFirstInput
	39	+ submitter={false}
	40	+ modalProps={{
	41	+ destroyOnClose: true,
	42	+ }}
	43	+ >
	44	+ <hr />
	45	+ <Invoice data={data} />
	46	+ </ModalForm>
	47	+ );
	48	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceProjectSelect.tsx 0 → 100644

View file @3dd1b45

	1	+import { postServiceConstListInvoiceDetailNames } from '@/services';
	2	+import { Select, Tooltip } from 'antd';
	3	+import { useState } from 'react';
	4	+
	5	+export const InvoiceProjectSelect = ({ readOnly, value, onChange }) => {
	6	+ const [options, setOptions] = useState<any[]>([]);
	7	+ // 定义防抖函数
	8	+ let timeoutId = null;
	9	+ const fetchOptions = async (keywords) => {
	10	+ clearTimeout(timeoutId);
	11	+ timeoutId = setTimeout(async () => {
	12	+ const res = await postServiceConstListInvoiceDetailNames({
	13	+ data: {
	14	+ nameLike: keywords,
	15	+ },
	16	+ });
	17	+ const data = res.data;
	18	+
	19	+ setOptions(
	20	+ data.map((item) => {
	21	+ console.log(item);
	22	+ return {
	23	+ key: item.id,
	24	+ label:
	25	+ '*' +
	26	+ item.productAndServiceCatagoryAbbreviation +
	27	+ '*' +
	28	+ item?.name,
	29	+ value:
	30	+ '*' +
	31	+ item.productAndServiceCatagoryAbbreviation +
	32	+ '*' +
	33	+ item?.name,
	34	+ ...item,
	35	+ };
	36	+ }),
	37	+ );
	38	+ // 这里可以放置实际的搜索逻辑，比如发起网络请求等
	39	+ }, 500); // 设置延迟时间，单位毫秒
	40	+ };
	41	+
	42	+ return readOnly ? (
	43	+ <Tooltip title={value}>{value}</Tooltip>
	44	+ ) : (
	45	+ <Select
	46	+ key="project"
	47	+ /readonly={readonly}/
	48	+ showSearch
	49	+ placeholder="请选择开票项目"
	50	+ filterOption={(input, option) => (option?.label ?? '').includes(input)}
	51	+ onChange={(e) => {
	52	+ onChange(e);
	53	+ }}
	54	+ defaultValue={value}
	55	+ options={options}
	56	+ onSearch={(e) => {
	57	+ fetchOptions(e);
	58	+ }}
	59	+ />
	60	+ );
	61	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceRecordDetailModal.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import InvoiceDetailTable from '@/pages/Invoice/InvoiceVerification/components/InvoiceDetailTable';
	3	+import {
	4	+ postServiceConstGetPayeeEnum,
	5	+ postServiceConstInvoiceType,
	6	+ postServiceConstInvoicingType,
	7	+ postServiceInvoiceGetInvoiceRecord,
	8	+ postServiceInvoiceModifyRecord,
	9	+} from '@/services';
	10	+import { enumToSelect } from '@/utils';
	11	+import {
	12	+ ModalForm,
	13	+ ProCard,
	14	+ ProForm,
	15	+ ProFormInstance,
	16	+ ProFormList,
	17	+ ProFormSelect,
	18	+ ProFormText,
	19	+ ProFormTextArea,
	20	+} from '@ant-design/pro-components';
	21	+import { Button, Divider, Form, Space, message } from 'antd';
	22	+import { useEffect, useRef, useState } from 'react';
	23	+
	24	+export default ({ id, setVisible }) => {
	25	+ const [readOnly, setReadOnly] = useState(true);
	26	+ const [detailTableData, setDetailTableData] = useState([]);
	27	+ const [payees, setPayees] = useState([]);
	28	+ const [payeeNameOptions, setPayeeNameOptions] = useState([]);
	29	+ const formRef = useRef<ProFormInstance>();
	30	+ const [form] = Form.useForm();
	31	+
	32	+ useEffect(() => {
	33	+ console.log('id' + id);
	34	+ const getPayees = async () => {
	35	+ let res = await postServiceConstGetPayeeEnum();
	36	+ setPayees(res.data);
	37	+ let payeeNameOptions = res.data.map((item) => {
	38	+ return {
	39	+ label: item.payeeName,
	40	+ value: item.payeeName,
	41	+ };
	42	+ });
	43	+ setPayeeNameOptions(payeeNameOptions);
	44	+ };
	45	+ getPayees();
	46	+ }, []);
	47	+ const getRecord = async (id) => {
	48	+ let ret = await postServiceInvoiceGetInvoiceRecord({
	49	+ query: {
	50	+ id: id,
	51	+ },
	52	+ });
	53	+ console.log(ret.data);
	54	+ const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
	55	+ (item, index) => ({
	56	+ ...item, // 保留原有属性
	57	+ tid: index + 1, // 添加tid属性，这里以T开头，后面跟索引+1，仅作示例，实际可根据需求生成tid
	58	+ }),
	59	+ );
	60	+ setDetailTableData(updatedInvoiceDetails);
	61	+ };
	62	+ useEffect(() => {
	63	+ getRecord(id);
	64	+ }, []);
	65	+
	66	+ const updateDetails = (values) => {
	67	+ setDetailTableData(values);
	68	+ };
	69	+ return (
	70	+ <>
	71	+ <Space>
	72	+ <ModalForm
	73	+ open
	74	+ title="发票详情"
	75	+ formRef={formRef}
	76	+ request={async () => {
	77	+ let ret = await postServiceInvoiceGetInvoiceRecord({
	78	+ query: {
	79	+ id: id,
	80	+ },
	81	+ });
	82	+ const data = ret.data;
	83	+ const orderIdMap = data.orderIdMap;
	84	+ const orderIdList = [];
	85	+
	86	+ // 使用Object.entries()遍历属性
	87	+ Object.entries(orderIdMap).forEach(([key, value]) => {
	88	+ const orderId = {
	89	+ mainId: key,
	90	+ subIds: value,
	91	+ };
	92	+ orderIdList.push(orderId);
	93	+ });
	94	+ return {
	95	+ ...data,
	96	+ orderIdList: orderIdList,
	97	+ };
	98	+ }}
	99	+ submitter={{
	100	+ render: () => {
	101	+ return [
	102	+ <Button
	103	+ type={readOnly ? 'primary' : 'default'}
	104	+ key="ok"
	105	+ onClick={() => {
	106	+ setReadOnly(!readOnly);
	107	+ }}
	108	+ >
	109	+ {readOnly ? '编辑' : '取消编辑'}
	110	+ </Button>,
	111	+ <>
	112	+ {!readOnly && (
	113	+ <Button
	114	+ type="primary"
	115	+ key="submit"
	116	+ onClick={async () => {
	117	+ const result = await postServiceInvoiceModifyRecord({
	118	+ data: {
	119	+ ...form.getFieldsValue(),
	120	+ invoiceDetails: [...detailTableData],
	121	+ },
	122	+ });
	123	+ if (result.result === RESPONSE_CODE.SUCCESS) {
	124	+ message.success('提交成功');
	125	+ }
	126	+ setVisible(false);
	127	+ return true;
	128	+ }}
	129	+ >
	130	+ 提交
	131	+ </Button>
	132	+ )}
	133	+ </>,
	134	+ /*<Button
	135	+ type={'default'}
	136	+ key="ok"
	137	+ onClick={() => {
	138	+ setVisible(false)
	139	+ }}
	140	+ >
	141	+ 取消
	142	+ </Button>,*/
	143	+ ];
	144	+ },
	145	+ }}
	146	+ width={1200}
	147	+ form={form}
	148	+ autoFocusFirstInput
	149	+ modalProps={{
	150	+ destroyOnClose: true,
	151	+ onCancel: () => {
	152	+ setVisible(false);
	153	+ },
	154	+ }}
	155	+ grid={true}
	156	+ layout="horizontal"
	157	+ rowProps={{
	158	+ gutter: [0, 0],
	159	+ }}
	160	+ submitTimeout={2000}
	161	+ onFinish={async (values) => {
	162	+ const result = await postServiceInvoiceModifyRecord({
	163	+ data: {
	164	+ ...values,
	165	+ invoiceDetails: {
	166	+ ...detailTableData,
	167	+ },
	168	+ },
	169	+ });
	170	+ if (result.result === RESPONSE_CODE.SUCCESS) {
	171	+ message.success('提交成功');
	172	+ }
	173	+ return true;
	174	+ }}
	175	+ >
	176	+ <ProCard
	177	+ title="基础信息"
	178	+ bordered
	179	+ //
	180	+ headStyle={{}}
	181	+ headerBordered
	182	+ size={'small'}
	183	+ >
	184	+ <ProForm.Group>
	185	+ <ProFormText
	186	+ readonly
	187	+ name="id"
	188	+ label="订单批号"
	189	+ colProps={{
	190	+ span: 5,
	191	+ }}
	192	+ tooltip="最长为 24 位"
	193	+ placeholder="请输入名称"
	194	+ />
	195	+
	196	+ <ProFormText
	197	+ readonly
	198	+ width="md"
	199	+ colProps={{
	200	+ span: 5,
	201	+ }}
	202	+ name="createByName"
	203	+ label="销售代表"
	204	+ placeholder="请输入名称"
	205	+ />
	206	+ <ProFormText
	207	+ readonly
	208	+ width="md"
	209	+ colProps={{
	210	+ span: 5,
	211	+ }}
	212	+ name="createTime"
	213	+ label="申请时间"
	214	+ placeholder="请输入名称"
	215	+ />
	216	+ <ProFormSelect
	217	+ name="type"
	218	+ label="发票类型"
	219	+ colProps={{
	220	+ span: 5,
	221	+ }}
	222	+ readonly={readOnly}
	223	+ request={async () => {
	224	+ let invoiceTypeRet = await postServiceConstInvoiceType();
	225	+ return enumToSelect(invoiceTypeRet.data);
	226	+ }}
	227	+ placeholder="Please select a country"
	228	+ rules={[
	229	+ { required: true, message: 'Please select your country!' },
	230	+ ]}
	231	+ />
	232	+ <ProFormSelect
	233	+ name="invoicingType"
	234	+ readonly={readOnly}
	235	+ label="开具类型"
	236	+ colProps={{
	237	+ span: 4,
	238	+ }}
	239	+ request={async () => {
	240	+ let invoicingTypeRet = await postServiceConstInvoicingType();
	241	+ let options = enumToSelect(invoicingTypeRet.data);
	242	+ return options;
	243	+ }}
	244	+ placeholder="Please select a country"
	245	+ rules={[
	246	+ { required: true, message: 'Please select your country!' },
	247	+ ]}
	248	+ />
	249	+ <ProFormList
	250	+ label="订单号"
	251	+ name="orderIdList"
	252	+ creatorButtonProps={false}
	253	+ itemRender={({}, { record }) => {
	254	+ console.log('record' + JSON.stringify(record));
	255	+ return (
	256	+ <Space>
	257	+ <Button
	258	+ key={record.mainId}
	259	+ className="pl-1 pr-0"
	260	+ type="link"
	261	+ target="_blank"
	262	+ href={'/order?id=' + record.mainId}
	263	+ >
	264	+ {record.mainId}
	265	+ </Button>
	266	+ (
	267	+ {record.subIds.map((item) => {
	268	+ return (
	269	+ <Button
	270	+ key={item}
	271	+ className="pl-1 pr-0"
	272	+ type="link"
	273	+ target="_blank"
	274	+ href={'/order?subOrderId=' + item}
	275	+ >
	276	+ {item}
	277	+ </Button>
	278	+ );
	279	+ })}
	280	+ )
	281	+ <Divider type="vertical" />
	282	+ </Space>
	283	+ );
	284	+ }}
	285	+ >
	286	+ <ProFormText allowClear={false} width="xs" name={['name']} />
	287	+ </ProFormList>
	288	+ </ProForm.Group>
	289	+ </ProCard>
	290	+ <hr />
	291	+ <ProCard title="购方信息" bordered headerBordered size={'small'}>
	292	+ <ProForm.Group>
	293	+ <ProFormText
	294	+ readonly={readOnly}
	295	+ width="md"
	296	+ colProps={{
	297	+ span: 8,
	298	+ }}
	299	+ name="partyAName"
	300	+ label="购方名称"
	301	+ placeholder="请输入名称"
	302	+ />
	303	+ <ProFormText
	304	+ readonly={readOnly}
	305	+ width="md"
	306	+ colProps={{
	307	+ span: 8,
	308	+ }}
	309	+ name="partyATaxid"
	310	+ label="购方税号"
	311	+ placeholder="请输入名称"
	312	+ />
	313	+ <ProFormText
	314	+ readonly={readOnly}
	315	+ width="md"
	316	+ colProps={{
	317	+ span: 8,
	318	+ }}
	319	+ label="开户银行"
	320	+ name={'partyAOpenBank'}
	321	+ placeholder="请输入名称"
	322	+ />
	323	+ <ProFormText
	324	+ readonly={readOnly}
	325	+ width="md"
	326	+ colProps={{
	327	+ span: 8,
	328	+ }}
	329	+ name="partyABankAccount"
	330	+ label="银行账号"
	331	+ placeholder="请输入名称"
	332	+ />
	333	+ <ProFormText
	334	+ readonly={readOnly}
	335	+ width="md"
	336	+ colProps={{
	337	+ span: 8,
	338	+ }}
	339	+ name="partyAAddress"
	340	+ label="购方地址"
	341	+ placeholder="请输入名称"
	342	+ />
	343	+ <ProFormText
	344	+ readonly={readOnly}
	345	+ width="md"
	346	+ colProps={{
	347	+ span: 8,
	348	+ }}
	349	+ name="partyAPhoneNumber"
	350	+ label="电话"
	351	+ placeholder="请输入名称"
	352	+ />
	353	+ </ProForm.Group>
	354	+ </ProCard>
	355	+ <hr />
	356	+ <ProCard title="销方信息" bordered headerBordered size={'small'}>
	357	+ <ProForm.Group>
	358	+ <ProFormSelect
	359	+ readonly={readOnly}
	360	+ width="md"
	361	+ name="partyBName"
	362	+ options={payeeNameOptions}
	363	+ onChange={(value: any) => {
	364	+ let payee = payees.find((item: any) => {
	365	+ return item.payeeName === value;
	366	+ });
	367	+ console.log(JSON.stringify(payee));
	368	+ form.setFieldsValue({
	369	+ partyBTaxid: payee.taxId,
	370	+ partyBBankAccount: payee.bankAccount,
	371	+ partyBOpenBank: payee.openBank,
	372	+ partyBAddress: payee.address,
	373	+ partyBPhoneNumber: payee.phoneNumber,
	374	+ });
	375	+ }}
	376	+ label="销方名称"
	377	+ colProps={{
	378	+ span: 8,
	379	+ }}
	380	+ placeholder="请输入名称"
	381	+ />
	382	+
	383	+ <ProFormText
	384	+ readonly
	385	+ width="md"
	386	+ name="partyBTaxid"
	387	+ label="销方税号"
	388	+ colProps={{
	389	+ span: 8,
	390	+ }}
	391	+ placeholder="请输入名称"
	392	+ />
	393	+ <ProFormText
	394	+ readonly
	395	+ width="md"
	396	+ name="partyBOpenBank"
	397	+ label="开户银行"
	398	+ colProps={{
	399	+ span: 8,
	400	+ }}
	401	+ placeholder="请输入名称"
	402	+ />
	403	+ <ProFormText
	404	+ readonly
	405	+ width="md"
	406	+ name="partyBBankAccount"
	407	+ label="银行账号"
	408	+ colProps={{
	409	+ span: 8,
	410	+ }}
	411	+ placeholder="请输入名称"
	412	+ />
	413	+ <ProFormText
	414	+ readonly
	415	+ width="md"
	416	+ colProps={{
	417	+ span: 8,
	418	+ }}
	419	+ name="partyBAddress"
	420	+ label="销方地址"
	421	+ placeholder="请输入名称"
	422	+ />
	423	+ <ProFormText
	424	+ readonly
	425	+ width="md"
	426	+ colProps={{
	427	+ span: 8,
	428	+ }}
	429	+ name="partyBPhoneNumber"
	430	+ label="电话"
	431	+ placeholder="请输入名称"
	432	+ />
	433	+ </ProForm.Group>
	434	+ </ProCard>
	435	+ <hr />
	436	+ <ProCard title="发票明细" bordered headerBordered size={'small'}>
	437	+ <InvoiceDetailTable
	438	+ recordId={id}
	439	+ details={detailTableData}
	440	+ updateDetails={updateDetails}
	441	+ readOnly={readOnly}
	442	+ />
	443	+ </ProCard>
	444	+ <hr />
	445	+ <ProCard title="备注" bordered headerBordered size={'small'}>
	446	+ <ProFormTextArea
	447	+ readonly={readOnly}
	448	+ name="comment"
	449	+ placeholder="请输入备注"
	450	+ />
	451	+ </ProCard>
	452	+ </ModalForm>
	453	+ </Space>
	454	+ </>
	455	+ );
	456	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoiceVerificationModal.tsx 0 → 100644

View file @3dd1b45

	1	+import ButtonConfirm from '@/components/ButtomConfirm';
	2	+import EllipsisDiv from '@/components/Div/EllipsisDiv';
	3	+import { RESPONSE_CODE } from '@/constants/enum';
	4	+import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
	5	+import {
	6	+ postServiceInvoiceCancelInvoiceAndBankStatement,
	7	+ postServiceInvoiceQueryInvoiceDetail,
	8	+} from '@/services';
	9	+import { enumValueToLabel, formatDateTime } from '@/utils';
	10	+import { formatDate } from '@/utils/time';
	11	+import { PlusOutlined } from '@ant-design/icons';
	12	+import {
	13	+ ActionType,
	14	+ ModalForm,
	15	+ ProCard,
	16	+ ProTable,
	17	+} from '@ant-design/pro-components';
	18	+import {
	19	+ Button,
	20	+ Descriptions,
	21	+ DescriptionsProps,
	22	+ Divider,
	23	+ Flex,
	24	+ Form,
	25	+ message,
	26	+} from 'antd';
	27	+import { useEffect, useRef, useState } from 'react';
	28	+import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../../constant';
	29	+import '../index.less';
	30	+import BankChooseModal from './BankChooseModal';
	31	+
	32	+export default ({ invoiceId, setVisible, onClose }) => {
	33	+ const [form] = Form.useForm<{ id: string }>();
	34	+ const [bankChooseModalVisible, setBankChooseModalVisible] = useState(false);
	35	+ const [invoiceInfo, setInvoiceInfo] = useState({});
	36	+ const [relationOrderIds, setRelationOrderIds] = useState([]);
	37	+ const [relationBankStatements, setRelationBankStatements] = useState([]);
	38	+ const actionRef = useRef<ActionType>();
	39	+
	40	+ const loadInvoiceData = async () => {
	41	+ let res = await postServiceInvoiceQueryInvoiceDetail({
	42	+ data: { invoiceId: invoiceId },
	43	+ });
	44	+ if (res && res.data) {
	45	+ setInvoiceInfo(res.data);
	46	+ setRelationOrderIds(res.data.mainOrderIds);
	47	+ console.log('bs:' + res.data.bankStatementDtos);
	48	+ setRelationBankStatements(res.data.bankStatementDtos);
	49	+ }
	50	+ };
	51	+
	52	+ const showRelationOrders = () => {
	53	+ return relationOrderIds?.map((item) => {
	54	+ return (
	55	+ <>
	56	+ <Button
	57	+ className="pl-1 pr-0"
	58	+ type="link"
	59	+ target="_blank"
	60	+ href={'/order?id=' + item}
	61	+ >
	62	+ {item}
	63	+ </Button>
	64	+ <Divider type="vertical" />
	65	+ </>
	66	+ );
	67	+ });
	68	+ };
	69	+
	70	+ const items: DescriptionsProps['items'] = [
	71	+ {
	72	+ key: '1',
	73	+ label: '发票号码',
	74	+ children: invoiceInfo?.invoiceNumber,
	75	+ span: 6,
	76	+ },
	77	+ {
	78	+ key: '2',
	79	+ label: '发票类型',
	80	+ children: enumValueToLabel(invoiceInfo?.invoiceStatus, INVOCING_STATUS),
	81	+ span: 6,
	82	+ },
	83	+ {
	84	+ key: '3',
	85	+ label: '状态',
	86	+ children: enumValueToLabel(invoiceInfo?.status, INVOICE_STATUS),
	87	+ span: 4,
	88	+ },
	89	+ {
	90	+ key: '4',
	91	+ label: '购买方',
	92	+ children: invoiceInfo?.purchaser,
	93	+ span: 8,
	94	+ },
	95	+ {
	96	+ key: '5',
	97	+ label: '收款单位',
	98	+ children: enumValueToLabel(invoiceInfo?.payee, PAYEE_OPTIONS),
	99	+ span: 12,
	100	+ },
	101	+ {
	102	+ key: '6',
	103	+ label: '联系人',
	104	+ children: invoiceInfo?.contacts,
	105	+ span: 4,
	106	+ },
	107	+ {
	108	+ key: '7',
	109	+ label: '销售',
	110	+ children: invoiceInfo?.sale,
	111	+ span: 8,
	112	+ },
	113	+
	114	+ {
	115	+ key: '9',
	116	+ label: '开票日期',
	117	+ children: formatDate(invoiceInfo?.invoicingTime),
	118	+ span: 12,
	119	+ },
	120	+ {
	121	+ key: '10',
	122	+ label: '收款时间',
	123	+ children: formatDate(invoiceInfo?.collectionTime),
	124	+ span: 4,
	125	+ },
	126	+ {
	127	+ key: '8',
	128	+ label: '金额',
	129	+ children: invoiceInfo?.money,
	130	+ span: 10,
	131	+ },
	132	+ {
	133	+ key: '11',
	134	+ label: '备注',
	135	+ children: invoiceInfo?.notes,
	136	+ span: 24,
	137	+ },
	138	+ ];
	139	+
	140	+ const getTableCellText = (target: any) => {
	141	+ if (!target) {
	142	+ return '';
	143	+ }
	144	+
	145	+ if (target.props) {
	146	+ return target.props.text;
	147	+ }
	148	+
	149	+ return target;
	150	+ };
	151	+
	152	+ /**
	153	+ * 加载表格的各个列格式
	154	+ */
	155	+ const bankStatementColumnsInit = () => {
	156	+ let columns = BANK_STATEMENT_COLUMNS.map((item) => {
	157	+ let newItem = { ...item };
	158	+ let dataIndex = item.dataIndex;
	159	+ let dataType = item.valueType;
	160	+
	161	+ newItem.render = (text, record) => {
	162	+ let textValue = record[dataIndex];
	163	+
	164	+ if (dataType === 'date') {
	165	+ textValue = formatDate(textValue);
	166	+ }
	167	+
	168	+ if (dataType === 'dateTime') {
	169	+ textValue = formatDateTime(textValue);
	170	+ }
	171	+
	172	+ if (dataType === 'money') {
	173	+ textValue = '￥' + textValue;
	174	+ }
	175	+
	176	+ switch (dataIndex) {
	177	+ case 'invoiceStatus':
	178	+ return (
	179	+ <EllipsisDiv
	180	+ text={enumValueToLabel(
	181	+ getTableCellText(textValue),
	182	+ INVOCING_STATUS,
	183	+ )}
	184	+ />
	185	+ );
	186	+
	187	+ case 'status':
	188	+ return (
	189	+ <EllipsisDiv
	190	+ text={enumValueToLabel(
	191	+ getTableCellText(textValue),
	192	+ INVOICE_STATUS,
	193	+ )}
	194	+ />
	195	+ );
	196	+
	197	+ case 'payee':
	198	+ return (
	199	+ <EllipsisDiv
	200	+ text={enumValueToLabel(
	201	+ getTableCellText(textValue),
	202	+ PAYEE_OPTIONS,
	203	+ )}
	204	+ />
	205	+ );
	206	+
	207	+ default:
	208	+ return <EllipsisDiv text={getTableCellText(textValue)} />;
	209	+ }
	210	+ };
	211	+
	212	+ return newItem;
	213	+ });
	214	+
	215	+ columns.push({
	216	+ title: '操作',
	217	+ valueType: 'option',
	218	+ key: 'option',
	219	+ fixed: 'right',
	220	+ width: 70,
	221	+ render: (text, record) => {
	222	+ let optBtns = [];
	223	+ if (invoiceInfo?.status === 'VERIFIED') {
	224	+ return [];
	225	+ }
	226	+
	227	+ optBtns.push(
	228	+ <ButtonConfirm
	229	+ key="delete"
	230	+ className="p-0"
	231	+ title={'确认删除此项吗？'}
	232	+ text="删除"
	233	+ onConfirm={async () => {
	234	+ let res = await postServiceInvoiceCancelInvoiceAndBankStatement({
	235	+ data: {
	236	+ invoiceId: invoiceId,
	237	+ cancelId: [record.id],
	238	+ },
	239	+ });
	240	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	241	+ message.success(res.message);
	242	+ loadInvoiceData();
	243	+ }
	244	+ }}
	245	+ />,
	246	+ );
	247	+ return optBtns;
	248	+ },
	249	+ });
	250	+
	251	+ return columns;
	252	+ };
	253	+
	254	+ useEffect(() => {
	255	+ loadInvoiceData();
	256	+ }, []);
	257	+
	258	+ return (
	259	+ <>
	260	+ <ModalForm<{
	261	+ id: string;
	262	+ }>
	263	+ className="invoice-detail"
	264	+ open
	265	+ width="80%"
	266	+ title="发票详情"
	267	+ form={form}
	268	+ autoFocusFirstInput
	269	+ modalProps={{
	270	+ okText: '确定',
	271	+ cancelText: '返回',
	272	+ destroyOnClose: true,
	273	+ onCancel: () => {
	274	+ setVisible(false);
	275	+ onClose();
	276	+ },
	277	+ }}
	278	+ submitter={{
	279	+ render: (props, defaultDoms) => {
	280	+ return [defaultDoms[0]];
	281	+ },
	282	+ }}
	283	+ onFinish={async () => {
	284	+ onClose();
	285	+ }}
	286	+ onOpenChange={setVisible}
	287	+ >
	288	+ <Divider orientation="left" plain>
	289	+ 发票信息
	290	+ </Divider>
	291	+
	292	+ <Descriptions
	293	+ bordered
	294	+ column={24}
	295	+ size="small"
	296	+ title=""
	297	+ items={items}
	298	+ />
	299	+
	300	+ <Divider orientation="left" plain>
	301	+ 订单号
	302	+ </Divider>
	303	+
	304	+ <ProCard bordered style={{}}>
	305	+ <Flex>
	306	+ <div>{showRelationOrders()}</div>
	307	+ </Flex>
	308	+ </ProCard>
	309	+
	310	+ <Divider plain></Divider>
	311	+
	312	+ <ProTable
	313	+ columns={bankStatementColumnsInit()}
	314	+ actionRef={actionRef}
	315	+ cardBordered
	316	+ pagination={{
	317	+ pageSize: 10,
	318	+ }}
	319	+ dataSource={relationBankStatements}
	320	+ columnsState={{
	321	+ persistenceKey: 'pro-table-singe-demos',
	322	+ persistenceType: 'localStorage',
	323	+ defaultValue: {
	324	+ option: { fixed: 'right', disable: true },
	325	+ },
	326	+ onChange(value) {
	327	+ console.log('value: ', value);
	328	+ },
	329	+ }}
	330	+ rowKey="id"
	331	+ search={false}
	332	+ options={{
	333	+ setting: {
	334	+ listsHeight: 400,
	335	+ },
	336	+ reload: false,
	337	+ }}
	338	+ form={{
	339	+ // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
	340	+ syncToUrl: (values, type) => {
	341	+ if (type === 'get') {
	342	+ return {
	343	+ ...values,
	344	+ created_at: [values.startTime, values.endTime],
	345	+ };
	346	+ }
	347	+ return values;
	348	+ },
	349	+ }}
	350	+ dateFormatter="string"
	351	+ headerTitle="银行流水"
	352	+ scroll={{ x: 1400, y: 360 }}
	353	+ toolBarRender={() => [
	354	+ <Button
	355	+ key="button"
	356	+ icon={<PlusOutlined />}
	357	+ onClick={() => {
	358	+ setBankChooseModalVisible(true);
	359	+ }}
	360	+ hidden={invoiceInfo?.status === 'VERIFIED'}
	361	+ type="primary"
	362	+ >
	363	+ 添加
	364	+ </Button>,
	365	+ ]}
	366	+ />
	367	+ </ModalForm>
	368	+
	369	+ {bankChooseModalVisible ? (
	370	+ <BankChooseModal
	371	+ loadInvoiceData={loadInvoiceData}
	372	+ setVisible={setBankChooseModalVisible}
	373	+ invoiceId={invoiceId}
	374	+ onClose={() => {
	375	+ setBankChooseModalVisible(false);
	376	+ loadInvoiceData();
	377	+ actionRef.current?.reload();
	378	+ }}
	379	+ ></BankChooseModal>
	380	+ ) : (
	381	+ ''
	382	+ )}
	383	+ </>
	384	+ );
	385	+};
...	...

src/pages/Invoice/InvoiceVerification/components/InvoicingModal.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import { postServiceInvoiceInvoicing } from '@/services';
	3	+import { ModalForm } from '@ant-design/pro-components';
	4	+import { Button, Form, message } from 'antd';
	5	+
	6	+export default ({ selectedRowKeys, reloadRecordTable }) => {
	7	+ const [form] = Form.useForm<{ name: string; company: string }>();
	8	+ return (
	9	+ <ModalForm<{
	10	+ name: string;
	11	+ company: string;
	12	+ }>
	13	+ title="开票"
	14	+ trigger={
	15	+ <Button type="primary" disabled={selectedRowKeys?.length === 0}>
	16	+ 开票
	17	+ </Button>
	18	+ }
	19	+ form={form}
	20	+ autoFocusFirstInput
	21	+ modalProps={{
	22	+ destroyOnClose: true,
	23	+ onCancel: () => console.log('run'),
	24	+ }}
	25	+ submitTimeout={2000}
	26	+ onFinish={async (values) => {
	27	+ let res = await postServiceInvoiceInvoicing({
	28	+ data: {
	29	+ ...values,
	30	+ invoiceRecordIds: selectedRowKeys,
	31	+ },
	32	+ });
	33	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	34	+ message.success(res.message);
	35	+ }
	36	+ reloadRecordTable();
	37	+ message.success('提交成功');
	38	+ return true;
	39	+ }}
	40	+ >
	41	+ {/*<ProFormSelect
	42	+ name="invoicingAccount"
	43	+ label="开票账号"
	44	+ request={async () => {
	45	+ const res = await postServiceInvoiceGetInvoicingAccount();
	46	+ return res.data.map((item) => {
	47	+ return {
	48	+ label: item.accountText,
	49	+ value: item.account,
	50	+ };
	51	+ });
	52	+ }}
	53	+ placeholder="请选择开票账号"
	54	+ rules={[{ required: true, message: '请选择开票账号!' }]}
	55	+ />*/}
	56	+ </ModalForm>
	57	+ );
	58	+};
...	...

src/pages/Invoice/InvoiceVerification/components/ManualInvoicingModal.tsx 0 → 100644

View file @3dd1b45

	1	+import { RESPONSE_CODE } from '@/constants/enum';
	2	+import UploadC from '@/pages/Invoice/InvoiceVerification/components/UploadSingleImg';
	3	+import {
	4	+ postOrderErpOrderStagesUpload,
	5	+ postServiceInvoiceDealInvoicingResult,
	6	+} from '@/services';
	7	+import {
	8	+ ModalForm,
	9	+ ProFormDatePicker,
	10	+ ProFormText,
	11	+} from '@ant-design/pro-components';
	12	+import { Col, Form, Row, message } from 'antd';
	13	+import { RcFile } from 'antd/es/upload';
	14	+import { useEffect } from 'react';
	15	+
	16	+export default ({ record }) => {
	17	+ useEffect(() => {
	18	+ console.log('invoicing');
	19	+ }, []);
	20	+ const [form] = Form.useForm();
	21	+ return (
	22	+ <ModalForm
	23	+ title="手动开票"
	24	+ trigger={<a type="primary">手动开票</a>}
	25	+ width={600}
	26	+ layout={'horizontal'}
	27	+ form={form}
	28	+ autoFocusFirstInput
	29	+ modalProps={{
	30	+ destroyOnClose: true,
	31	+ onCancel: () => console.log('run'),
	32	+ }}
	33	+ submitTimeout={2000}
	34	+ onFinish={async (values) => {
	35	+ const res = await postServiceInvoiceDealInvoicingResult({
	36	+ data: {
	37	+ ...values,
	38	+ isSuccess: true,
	39	+ invoiceRecordId: record.id,
	40	+ manual: true,
	41	+ },
	42	+ });
	43	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	44	+ message.success('开票成功');
	45	+ return true;
	46	+ } else {
	47	+ message.error('开票失败');
	48	+ }
	49	+ }}
	50	+ >
	51	+ {/*<ProFormText
	52	+ rules={[{ required: true, message: '此项为必填项' }]}
	53	+ width={'md'}
	54	+ name="invoicingPerson"
	55	+ label="开票人"
	56	+ />*/}
	57	+ <ProFormText
	58	+ rules={[{ required: true, message: '此项为必填项' }]}
	59	+ width={'md'}
	60	+ name="invoiceNumber"
	61	+ label="发票号码"
	62	+ />
	63	+ <ProFormDatePicker
	64	+ rules={[{ required: true, message: '此项为必填项' }]}
	65	+ fieldProps={{
	66	+ format: 'YYYY-MM-DD',
	67	+ }}
	68	+ name="invoicingDate"
	69	+ label="开票日期"
	70	+ />
	71	+ <ProFormText
	72	+ rules={[{ required: true, message: '发票必须上传' }]}
	73	+ hidden
	74	+ name="url"
	75	+ label="發票地址"
	76	+ />
	77	+ <Row>
	78	+ <Col span={4}>上传发票</Col>
	79	+ <Col span={20}>
	80	+ <UploadC
	81	+ onFilesChange={async (newFileList) => {
	82	+ if (newFileList.length > 0) {
	83	+ const formData = new FormData();
	84	+ formData.append('file', newFileList[0].originFileObj as RcFile);
	85	+ const res = await postOrderErpOrderStagesUpload({
	86	+ data: formData,
	87	+ headers: {
	88	+ 'Content-Type':
	89	+ 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
	90	+ },
	91	+ });
	92	+ const url = res.data;
	93	+ form.setFieldValue('url', url);
	94	+ } else {
	95	+ form.setFieldValue('url', null);
	96	+ }
	97	+ }}
	98	+ ></UploadC>
	99	+ </Col>
	100	+ </Row>
	101	+ {/*<ProFormList
	102	+ name="invoiceDetailDtoList"
	103	+ label="明细"
	104	+ creatorButtonProps={false}
	105	+ copyIconProps={false}
	106	+ itemRender={({ listDom }, { index }) => (
	107	+ <ProCard
	108	+ bordered
	109	+ style={{ marginBlockEnd: 8 }}
	110	+ title={`明细${index + 1}`}
	111	+ bodyStyle={{ paddingBlockEnd: 0 }}
	112	+ >
	113	+ {listDom}
	114	+ </ProCard>
	115	+ )}
	116	+ creatorRecord={{ name: '', items: [{ name: '' }] }}
	117	+ initialValue={record.invoiceDetails}
	118	+ >
	119	+ <ProFormText
	120	+ name="projectName"
	121	+ label="名称"
	122	+ placeholder="请输入名称"
	123	+ readonly
	124	+ />
	125	+ <ProFormDigit label="税率" name="taxRate" min={0} max={100} />
	126	+ <ProFormMoney label="税额" name="taxPrice" locale="zh-CN" min={0} />
	127	+ </ProFormList>*/}
	128	+ </ModalForm>
	129	+ );
	130	+};
...	...

src/pages/Invoice/InvoiceVerification/components/UploadSingleImg.tsx 0 → 100644

View file @3dd1b45

	1	+import { PlusOutlined } from '@ant-design/icons';
	2	+import type { GetProp, UploadFile, UploadProps } from 'antd';
	3	+import { Image, Upload } from 'antd';
	4	+import { useState } from 'react';
	5	+
	6	+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
	7	+
	8	+const getBase64 = (file: FileType): Promise<string> =>
	9	+ new Promise((resolve, reject) => {
	10	+ const reader = new FileReader();
	11	+ reader.readAsDataURL(file);
	12	+ reader.onload = () => resolve(reader.result as string);
	13	+ reader.onerror = (error) => reject(error);
	14	+ });
	15	+
	16	+export default ({ onFilesChange }) => {
	17	+ const [previewOpen, setPreviewOpen] = useState(false);
	18	+ const [previewImage, setPreviewImage] = useState('');
	19	+ const [fileList, setFileList] = useState<UploadFile[]>([]);
	20	+
	21	+ const handlePreview = async (file: UploadFile) => {
	22	+ if (!file.url && !file.preview) {
	23	+ file.preview = await getBase64(file.originFileObj as FileType);
	24	+ }
	25	+
	26	+ setPreviewImage(file.url \|\| (file.preview as string));
	27	+ setPreviewOpen(true);
	28	+ };
	29	+
	30	+ const uploadButton = (
	31	+ <button style={{ border: 0, background: 'none' }} type="button">
	32	+ <PlusOutlined />
	33	+ <div style={{ marginTop: 8 }}>Upload</div>
	34	+ </button>
	35	+ );
	36	+ return (
	37	+ <>
	38	+ <Upload
	39	+ listType="picture-card"
	40	+ fileList={fileList}
	41	+ onPreview={handlePreview}
	42	+ onChange={({ fileList: newFileList }) => {
	43	+ setFileList(newFileList);
	44	+ console.log('file' + JSON.stringify(newFileList));
	45	+ onFilesChange(newFileList);
	46	+ }}
	47	+ >
	48	+ {fileList.length >= 1 ? null : uploadButton}
	49	+ </Upload>
	50	+ {previewImage && (
	51	+ <Image
	52	+ wrapperStyle={{ display: 'none' }}
	53	+ preview={{
	54	+ visible: previewOpen,
	55	+ onVisibleChange: (visible) => setPreviewOpen(visible),
	56	+ afterOpenChange: (visible) => !visible && setPreviewImage(''),
	57	+ }}
	58	+ src={previewImage}
	59	+ />
	60	+ )}
	61	+ </>
	62	+ );
	63	+};
...	...

src/pages/Invoice/InvoiceVerification/index.less 0 → 100644

View file @3dd1b45

	1	+.invoice-index td {
	2	+ font-family: 'San Francisco', 'Helvetica Neue', Helvetica, Arial,
	3	+ 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
	4	+ 'WenQuanYi Micro Hei', sans-serif;
	5	+ font-size: 14px;
	6	+}
	7	+
	8	+.invoice-detail td {
	9	+ font-family: 'San Francisco', 'Helvetica Neue', Helvetica, Arial,
	10	+ 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
	11	+ 'WenQuanYi Micro Hei', sans-serif;
	12	+ font-size: 14px;
	13	+}
	14	+
	15	+.bank-statement-choose td {
	16	+ font-family: 'San Francisco', 'Helvetica Neue', Helvetica, Arial,
	17	+ 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
	18	+ 'WenQuanYi Micro Hei', sans-serif;
	19	+ font-size: 14px;
	20	+}
...	...

src/pages/Invoice/InvoiceVerification/index.tsx 0 → 100644

View file @3dd1b45

	1	+import ButtonConfirm from '@/components/ButtomConfirm';
	2	+import EllipsisDiv from '@/components/Div/EllipsisDiv';
	3	+import { RESPONSE_CODE } from '@/constants/enum';
	4	+import BankImportModal from '@/pages/Invoice/InvoiceVerification/components/BankImportModal';
	5	+import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceRecordDetailModal';
	6	+import InvoiceVerificationModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceVerificationModal';
	7	+import {
	8	+ BANK_STATEMENT_COLUMNS,
	9	+ INVOICE_STATUS,
	10	+} from '@/pages/Invoice/constant';
	11	+import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
	12	+import {
	13	+ postServiceBankStatementDeleteBankStatement,
	14	+ postServiceBankStatementEditBankStatement,
	15	+ postServiceBankStatementQueryBankStatement,
	16	+} from '@/services';
	17	+import { enumValueToLabel, formatDateTime } from '@/utils';
	18	+import { formatDate } from '@/utils/time';
	19	+import { PlusOutlined } from '@ant-design/icons';
	20	+import { ActionType, ProTable } from '@ant-design/pro-components';
	21	+import { Button, message } from 'antd';
	22	+import { useRef, useState } from 'react';
	23	+
	24	+const InvoiceRecord = () => {
	25	+ const invoiceActionRef = useRef<ActionType>();
	26	+ const bankActionRef = useRef<ActionType>();
	27	+ const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
	28	+ const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
	29	+ useState(false);
	30	+ const [invoiceId] = useState(undefined);
	31	+ const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
	32	+ useState(false);
	33	+ const [invoiceRecord] = useState({});
	34	+ const [contextHolder] = message.useMessage();
	35	+
	36	+ const reloadBankStatementTable = () => {
	37	+ bankActionRef.current?.reload();
	38	+ };
	39	+
	40	+ const getTableCellText = (target: any) => {
	41	+ if (!target) {
	42	+ return '';
	43	+ }
	44	+
	45	+ if (target.props) {
	46	+ return target.props.text;
	47	+ }
	48	+
	49	+ return target;
	50	+ };
	51	+
	52	+ const bankStatemetColumnsInit = () => {
	53	+ let columns = BANK_STATEMENT_COLUMNS.map((item) => {
	54	+ let newItem = { ...item };
	55	+ let dataIndex = item.dataIndex;
	56	+ let dataType = item.valueType;
	57	+
	58	+ newItem.render = (text, record) => {
	59	+ let textValue = record[dataIndex];
	60	+
	61	+ if (dataType === 'date') {
	62	+ textValue = formatDate(textValue);
	63	+ }
	64	+
	65	+ if (dataType === 'dateTime') {
	66	+ textValue = formatDateTime(textValue);
	67	+ }
	68	+
	69	+ if (dataType === 'money') {
	70	+ if (textValue === null \|\| textValue === undefined) {
	71	+ textValue = '';
	72	+ } else {
	73	+ textValue = '￥' + textValue;
	74	+ }
	75	+ }
	76	+
	77	+ switch (dataIndex) {
	78	+ case 'invoiceStatus':
	79	+ return (
	80	+ <EllipsisDiv
	81	+ text={enumValueToLabel(
	82	+ getTableCellText(textValue),
	83	+ INVOCING_STATUS,
	84	+ )}
	85	+ />
	86	+ );
	87	+
	88	+ case 'status':
	89	+ return (
	90	+ <EllipsisDiv
	91	+ text={enumValueToLabel(
	92	+ getTableCellText(textValue),
	93	+ INVOICE_STATUS,
	94	+ )}
	95	+ />
	96	+ );
	97	+
	98	+ case 'payee':
	99	+ return (
	100	+ <EllipsisDiv
	101	+ text={enumValueToLabel(
	102	+ getTableCellText(textValue),
	103	+ PAYEE_OPTIONS,
	104	+ )}
	105	+ />
	106	+ );
	107	+
	108	+ default:
	109	+ return <EllipsisDiv text={getTableCellText(textValue)} />;
	110	+ }
	111	+ };
	112	+
	113	+ return newItem;
	114	+ });
	115	+
	116	+ columns.push({
	117	+ title: '操作',
	118	+ valueType: 'option',
	119	+ key: 'option',
	120	+ fixed: 'right',
	121	+ width: 120,
	122	+ render: (text, record, _, action) => {
	123	+ let btns = [];
	124	+ if (record.path?.includes('editBankStatement')) {
	125	+ btns.push(
	126	+ <a
	127	+ key="editable"
	128	+ onClick={() => {
	129	+ action?.startEditable?.(record.id);
	130	+ }}
	131	+ >
	132	+ 编辑
	133	+ </a>,
	134	+ );
	135	+ }
	136	+
	137	+ if (record.path?.includes('deleteBankStatement')) {
	138	+ btns.push(
	139	+ <ButtonConfirm
	140	+ key="delete"
	141	+ className="p-0"
	142	+ title={'是否删除该银行流水记录？'}
	143	+ text="删除"
	144	+ onConfirm={async () => {
	145	+ let res = await postServiceBankStatementDeleteBankStatement({
	146	+ data: { id: record.id },
	147	+ });
	148	+ if (res.result === RESPONSE_CODE.SUCCESS) {
	149	+ message.success(res.message);
	150	+ reloadBankStatementTable();
	151	+ }
	152	+ }}
	153	+ />,
	154	+ );
	155	+ }
	156	+ return btns;
	157	+ },
	158	+ });
	159	+
	160	+ return columns;
	161	+ };
	162	+
	163	+ return (
	164	+ <div className="invoice-index">
	165	+ <ProTable
	166	+ columns={bankStatemetColumnsInit()}
	167	+ actionRef={bankActionRef}
	168	+ cardBordered
	169	+ pagination={{
	170	+ pageSize: 10,
	171	+ }}
	172	+ editable={{
	173	+ type: 'multiple',
	174	+ onSave: async (rowKey, data) => {
	175	+ await postServiceBankStatementEditBankStatement({ data: data });
	176	+ },
	177	+ actionRender: (row, config, defaultDom) => [
	178	+ defaultDom.save,
	179	+ defaultDom.cancel,
	180	+ ],
	181	+ }}
	182	+ request={async (params) => {
	183	+ const res = await postServiceBankStatementQueryBankStatement({
	184	+ data: { ...params },
	185	+ });
	186	+ if (res) {
	187	+ return {
	188	+ data: res?.data?.data \|\| [],
	189	+ total: res?.data?.total \|\| 0,
	190	+ };
	191	+ }
	192	+ }}
	193	+ columnsState={{
	194	+ persistenceKey: 'pro-table-singe-demos',
	195	+ persistenceType: 'localStorage',
	196	+ defaultValue: {
	197	+ option: { fixed: 'right', disable: true },
	198	+ },
	199	+ onChange(value) {
	200	+ console.log('value: ', value);
	201	+ },
	202	+ }}
	203	+ rowKey="id"
	204	+ search={{
	205	+ labelWidth: 'auto',
	206	+ }}
	207	+ options={{
	208	+ setting: {
	209	+ listsHeight: 400,
	210	+ },
	211	+ }}
	212	+ form={{}}
	213	+ dateFormatter="string"
	214	+ headerTitle="银行流水列表"
	215	+ scroll={{ x: 1400, y: 360 }}
	216	+ toolBarRender={() => [
	217	+ <Button
	218	+ key="button"
	219	+ icon={<PlusOutlined />}
	220	+ onClick={() => {
	221	+ setBankImportModalVisible(true);
	222	+ }}
	223	+ type="primary"
	224	+ >
	225	+ 导入
	226	+ </Button>,
	227	+ ]}
	228	+ />
	229	+
	230	+ {bankImportModalVisible ? (
	231	+ <BankImportModal
	232	+ setVisible={setBankImportModalVisible}
	233	+ onClose={() => {
	234	+ setBankImportModalVisible(false);
	235	+ invoiceActionRef.current?.reload();
	236	+ bankActionRef.current?.reload();
	237	+ }}
	238	+ ></BankImportModal>
	239	+ ) : (
	240	+ ''
	241	+ )}
	242	+
	243	+ {invoiceVerificationVisible ? (
	244	+ <InvoiceVerificationModal
	245	+ setVisible={setInvoiceVerificationVisible}
	246	+ invoiceId={invoiceId}
	247	+ onClose={() => {
	248	+ invoiceActionRef.current?.reload();
	249	+ bankActionRef.current?.reload();
	250	+ }}
	251	+ ></InvoiceVerificationModal>
	252	+ ) : (
	253	+ ''
	254	+ )}
	255	+ {invoiceRecordDetailVisible ? (
	256	+ <InvoiceRecordDetailModal
	257	+ key="detail"
	258	+ id={invoiceRecord.id}
	259	+ setVisible={setInvoiceRecordDetailVisible}
	260	+ />
	261	+ ) : (
	262	+ ''
	263	+ )}
	264	+ {contextHolder}
	265	+ </div>
	266	+ );
	267	+};
	268	+
	269	+export default InvoiceRecord;
...	...

src/pages/Invoice/index.tsx deleted 100644 → 0

View file @768fbcc

1		-import ButtonConfirm from '@/components/ButtomConfirm';
2		-import EllipsisDiv from '@/components/Div/EllipsisDiv';
3		-import { RESPONSE_CODE } from '@/constants/enum';
4		-import AddInvoiceDrawerForm from '@/pages/Invoice/components/AddInvoiceDrawerForm';
5		-import InvoiceModal from '@/pages/Invoice/components/InvoiceModal';
6		-import InvoiceRecordDetailModal from '@/pages/Invoice/components/InvoiceRecordDetailModal';
7		-import InvoicingModal from '@/pages/Invoice/components/InvoicingModal';
8		-import ManualInvoicingModal from '@/pages/Invoice/components/ManualInvoicingModal';
9		-import {
10		- BANK_STATEMENT_COLUMNS,
11		- INVOICE_COLUMNS,
12		- INVOICE_STATUS,
13		-} from '@/pages/Invoice/constant';
14		-import {
15		- postServiceBankStatementDeleteBankStatement,
16		- postServiceBankStatementEditBankStatement,
17		- postServiceBankStatementQueryBankStatement,
18		- postServiceConstAfterInvoicingInvoiceRecordStatus,
19		- postServiceConstBeforeInvoicingInvoiceRecordStatus,
20		- postServiceConstInvoiceType,
21		- postServiceConstInvoicingType,
22		- postServiceInvoiceDeleteInvoice,
23		- postServiceInvoiceInvoicing,
24		- postServiceInvoiceQueryInvoice,
25		- postServiceInvoiceQueryInvoiceRecordList,
26		- postServiceOrderQuerySalesCode,
27		-} from '@/services';
28		-import { excelExport } from '@/services/exportRequest';
29		-import {
30		- enumToProTableEnumValue,
31		- enumToSelect,
32		- enumValueToLabel,
33		- formatDateTime,
34		-} from '@/utils';
35		-import { formatDate } from '@/utils/time';
36		-import { PlusOutlined } from '@ant-design/icons';
37		-import { ActionType, ModalForm, ProTable } from '@ant-design/pro-components';
38		-import { Button, Space, Table, Tabs, message } from 'antd';
39		-import { useEffect, useRef, useState } from 'react';
40		-import { INVOCING_STATUS, PAYEE_OPTIONS } from '../Order/constant';
41		-import BankImportModal from './components/BankImportModal';
42		-import InvoiceVerificationModal from './components/InvoiceVerificationModal';
43		-import './index.less';
44		-
45		-const InvoicePage = () => {
46		- const invoiceActionRef = useRef<ActionType>();
47		- const bankActionRef = useRef<ActionType>();
48		- const waitDealrecordActionRef = useRef<ActionType>();
49		- const processedRecordRef = useRef<ActionType>();
50		- const [invoiceTypeValueEnum, setInvoiceTypeValueEnum] = useState({});
51		- const [invoicingTypeValueEnum, setInvoicingTypeValueEnum] = useState({});
52		- const [salesCodeValueEnum, setSalesCodeValueEnum] = useState({});
53		- const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
54		- const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
55		- useState(false);
56		- const [invoiceId, setInvoiceId] = useState(undefined);
57		- const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
58		- useState(false);
59		- const [invoiceRecord, setInvoiceRecord] = useState({});
60		- const [messageApi, contextHolder] = message.useMessage();
61		-
62		- useEffect(() => {
63		- async function extracted() {
64		- let invoiceTypeRet = await postServiceConstInvoiceType();
65		- setInvoiceTypeValueEnum(invoiceTypeRet.data);
66		- }
67		-
68		- extracted().catch(console.error);
69		- }, []);
70		-
71		- useEffect(() => {
72		- async function extracted() {
73		- let invoicingTypeRet = await postServiceConstInvoicingType();
74		- setInvoicingTypeValueEnum(invoicingTypeRet.data);
75		- }
76		-
77		- extracted().catch(console.error);
78		- }, []);
79		-
80		- useEffect(() => {
81		- async function extracted() {
82		- const res = await postServiceOrderQuerySalesCode();
83		- let map = {};
84		- res.data?.forEach((item) => {
85		- map[item.userName] = {
86		- text: item.userName,
87		- status: item.userName,
88		- };
89		- });
90		- setSalesCodeValueEnum(map);
91		- }
92		-
93		- extracted().catch(console.error);
94		- }, []);
95		-
96		- const reloadInvoiceTable = () => {
97		- invoiceActionRef.current?.reload();
98		- };
99		-
100		- const reloadBankStatementTable = () => {
101		- bankActionRef.current?.reload();
102		- };
103		- const reloadRecordTable = () => {
104		- waitDealrecordActionRef.current?.reload();
105		- processedRecordRef.current?.reload();
106		- };
107		-
108		- const getTableCellText = (target: any) => {
109		- if (!target) {
110		- return '';
111		- }
112		-
113		- if (target.props) {
114		- return target.props.text;
115		- }
116		-
117		- return target;
118		- };
119		-
120		- const waitDealRecordColumns = [
121		- {
122		- dataIndex: 'index',
123		- valueType: 'indexBorder',
124		- hideInSearch: true,
125		- ellipsis: true,
126		- width: 48,
127		- },
128		- {
129		- title: '开票编号',
130		- valueType: 'text',
131		- dataIndex: 'id',
132		- copyable: true,
133		- hideInSearch: true,
134		- ellipsis: true,
135		- width: 100,
136		- },
137		- {
138		- title: '发票状态',
139		- valueType: 'Text',
140		- dataIndex: 'statusText',
141		- ellipsis: true,
142		- hideInSearch: true,
143		- },
144		- {
145		- title: '申请开票时间',
146		- dataIndex: 'createTime',
147		- valueType: 'dateTime',
148		- hideInSearch: true,
149		- ellipsis: true,
150		- },
151		- {
152		- title: '销售代表',
153		- valueType: 'text',
154		- hideInSearch: true,
155		- ellipsis: true,
156		- dataIndex: 'createByName',
157		- },
158		- {
159		- title: '购方名称',
160		- valueType: 'text',
161		- dataIndex: 'partyAName',
162		- hideInSearch: true,
163		- ellipsis: true,
164		- },
165		- {
166		- title: '购方税号',
167		- valueType: 'text',
168		- hideInSearch: true,
169		- dataIndex: 'partyATaxid',
170		- ellipsis: true,
171		- },
172		- {
173		- title: '收款单位',
174		- valueType: 'text',
175		- hideInSearch: true,
176		- dataIndex: 'partyBName',
177		- ellipsis: true,
178		- },
179		- {
180		- title: '开票金额',
181		- valueType: 'money',
182		- dataIndex: 'price',
183		- hideInSearch: true,
184		- ellipsis: true,
185		- },
186		- {
187		- title: '开具类型',
188		- valueType: 'Text',
189		- dataIndex: 'invoicingTypeText',
190		- hideInSearch: true,
191		- ellipsis: true,
192		- },
193		- {
194		- title: '发票类型',
195		- valueType: 'Text',
196		- dataIndex: 'typeText',
197		- hideInSearch: true,
198		- ellipsis: true,
199		- },
200		- {
201		- title: '是否加急',
202		- valueType: 'Text',
203		- dataIndex: 'isUrgentText',
204		- hideInSearch: true,
205		- ellipsis: true,
206		- },
207		- {
208		- title: '申请备注',
209		- valueType: 'text',
210		- dataIndex: 'applyInvoicingNotes',
211		- hideInSearch: true,
212		- ellipsis: true,
213		- },
214		- {
215		- title: '购方名称',
216		- valueType: 'Text',
217		- dataIndex: 'partyANameLike',
218		- hideInTable: true,
219		- },
220		- {
221		- title: '收款单位',
222		- valueType: 'select',
223		- dataIndex: 'partyB',
224		- filters: true,
225		- onFilter: true,
226		- hideInTable: true,
227		- valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
228		- },
229		- {
230		- title: '主订单号',
231		- valueType: 'Text',
232		- dataIndex: 'mainOrderId',
233		- hideInTable: true,
234		- },
235		- {
236		- title: '子订单号',
237		- valueType: 'Text',
238		- dataIndex: 'subOrderId',
239		- hideInTable: true,
240		- },
241		- {
242		- title: '销售代表',
243		- valueType: 'select',
244		- dataIndex: 'salesCode',
245		- filters: true,
246		- onFilter: true,
247		- hideInTable: true,
248		- valueEnum: salesCodeValueEnum,
249		- },
250		- {
251		- title: '发票类型',
252		- valueType: 'select',
253		- dataIndex: 'type',
254		- filters: true,
255		- onFilter: true,
256		- hideInTable: true,
257		- valueEnum: enumToProTableEnumValue(invoiceTypeValueEnum),
258		- },
259		- {
260		- title: '开具类型',
261		- valueType: 'select',
262		- dataIndex: 'invoicingType',
263		- filters: true,
264		- onFilter: true,
265		- hideInTable: true,
266		- valueEnum: enumToProTableEnumValue(invoicingTypeValueEnum),
267		- },
268		- {
269		- title: '开票状态',
270		- valueType: 'select',
271		- dataIndex: 'status',
272		- filters: true,
273		- onFilter: true,
274		- hideInTable: true,
275		- request: async () => {
276		- const res = await postServiceConstBeforeInvoicingInvoiceRecordStatus();
277		- return enumToSelect(res.data);
278		- },
279		- },
280		- {
281		- title: '是否加急',
282		- valueType: 'select',
283		- dataIndex: 'isUrgent',
284		- filters: true,
285		- onFilter: true,
286		- hideInTable: true,
287		- valueEnum: {
288		- true: {
289		- text: '是',
290		- status: true,
291		- },
292		- false: {
293		- text: '否',
294		- status: false,
295		- },
296		- },
297		- },
298		- {
299		- title: '申请开票时间',
300		- dataIndex: 'createTime',
301		- valueType: 'dateTimeRange',
302		- width: 200,
303		- hideInTable: true,
304		- search: {
305		- transform: (value) => {
306		- if (value) {
307		- return {
308		- createTimeGe: value[0],
309		- createTimeLe: value[1],
310		- };
311		- }
312		- },
313		- },
314		- },
315		- {
316		- title: '操作',
317		- valueType: 'option',
318		- key: 'option',
319		- render: (text, record) => {
320		- return [
321		- /*<InvoiceRecordDetailModal
322		- key="detail"
323		- id={record.id}
324		- subOrderIds={record.subOrderIds}
325		- onClose={()=>{
326		- waitDealrecordActionRef.current?.reload();
327		- }
328		- }
329		- />*/
330		- <>
331		- {record.paths.includes('DETAIL') && (
332		- <a
333		- key="detail"
334		- onClick={() => {
335		- setInvoiceRecordDetailVisible(true);
336		- setInvoiceRecord(record);
337		- }}
338		- >
339		- 详情
340		- </a>
341		- )}
342		- </>,
343		- <>
344		- {record.paths.includes('PREVIEW') && (
345		- <InvoiceModal key="invoiceModal" recordId={record.id} />
346		- )}
347		- </>,
348		- <>
349		- {record.paths.includes('INVOICING') && (
350		- <ManualInvoicingModal
351		- key={'ManualInvoicingModal'}
352		- record={record}
353		- ></ManualInvoicingModal>
354		- )}
355		- </>,
356		- ];
357		- },
358		- },
359		- ];
360		-
361		- const processedRecordColumns = [
362		- {
363		- dataIndex: 'index',
364		- valueType: 'indexBorder',
365		- },
366		- {
367		- title: '开票编号',
368		- valueType: 'text',
369		- dataIndex: 'id',
370		- copyable: true,
371		- ellipsis: true,
372		- },
373		- {
374		- title: '发票号码',
375		- valueType: 'text',
376		- dataIndex: 'invoiceNumber',
377		- copyable: true,
378		- ellipsis: true,
379		- },
380		- {
381		- title: '开票日期',
382		- dataIndex: 'invoicingDate',
383		- valueType: 'date',
384		- hideInSearch: true,
385		- ellipsis: true,
386		- },
387		- {
388		- title: '发票类型',
389		- valueType: 'Text',
390		- dataIndex: 'typeText',
391		- hideInSearch: true,
392		- ellipsis: true,
393		- },
394		- {
395		- title: '发票状态',
396		- valueType: 'Text',
397		- dataIndex: 'statusText',
398		- hideInSearch: true,
399		- ellipsis: true,
400		- },
401		- {
402		- title: '购方名称',
403		- valueType: 'text',
404		- dataIndex: 'partyAName',
405		- hideInSearch: true,
406		- ellipsis: true,
407		- },
408		- {
409		- title: '购方税号',
410		- valueType: 'text',
411		- dataIndex: 'partyATaxid',
412		- ellipsis: true,
413		- },
414		- {
415		- title: '收款单位',
416		- valueType: 'text',
417		- dataIndex: 'partyBName',
418		- hideInSearch: true,
419		- ellipsis: true,
420		- },
421		- {
422		- title: '联系人',
423		- valueType: 'text',
424		- dataIndex: 'contacts',
425		- hideInSearch: true,
426		- ellipsis: true,
427		- },
428		- {
429		- title: '申请人',
430		- valueType: 'text',
431		- dataIndex: 'createByName',
432		- hideInSearch: true,
433		- ellipsis: true,
434		- },
435		- {
436		- title: '开票金额(元)',
437		- valueType: 'money',
438		- dataIndex: 'price',
439		- hideInSearch: true,
440		- ellipsis: true,
441		- },
442		- {
443		- title: '备注',
444		- valueType: 'text',
445		- dataIndex: 'contacts',
446		- hideInSearch: true,
447		- ellipsis: true,
448		- },
449		- {
450		- title: '失败原因',
451		- valueType: 'text',
452		- dataIndex: 'failureReason',
453		- hideInSearch: true,
454		- ellipsis: true,
455		- },
456		-
457		- {
458		- title: '购方名称',
459		- valueType: 'text',
460		- dataIndex: 'partyANameLike',
461		- hideInTable: true,
462		- },
463		- {
464		- title: '发票类型',
465		- valueType: 'select',
466		- dataIndex: 'type',
467		- filters: true,
468		- onFilter: true,
469		- hideInTable: true,
470		- valueEnum: enumToProTableEnumValue(invoiceTypeValueEnum),
471		- },
472		-
473		- {
474		- title: '开票状态',
475		- valueType: 'select',
476		- dataIndex: 'status',
477		- filters: true,
478		- onFilter: true,
479		- hideInTable: true,
480		- request: async () => {
481		- const res = await postServiceConstAfterInvoicingInvoiceRecordStatus();
482		- return enumToSelect(res.data);
483		- },
484		- },
485		- {
486		- title: '销售代表',
487		- valueType: 'select',
488		- dataIndex: 'salesCode',
489		- filters: true,
490		- onFilter: true,
491		- hideInTable: true,
492		- valueEnum: salesCodeValueEnum,
493		- },
494		- {
495		- title: '联系人',
496		- valueType: 'text',
497		- dataIndex: 'contactsLike',
498		- hideInTable: true,
499		- },
500		- {
501		- title: '开票日期',
502		- dataIndex: 'invoicingDate',
503		- valueType: 'dateRange',
504		- hideInTable: true,
505		- search: {
506		- transform: (value) => {
507		- if (value) {
508		- return {
509		- invoicingDateGe: value[0],
510		- invoicingDateLe: value[1],
511		- };
512		- }
513		- },
514		- },
515		- },
516		- {
517		- title: '收款单位',
518		- valueType: 'select',
519		- dataIndex: 'partyB',
520		- filters: true,
521		- onFilter: true,
522		- hideInTable: true,
523		- valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
524		- },
525		- {
526		- title: '操作',
527		- valueType: 'option',
528		- key: 'option',
529		- render: (text, record) => [
530		- <>
531		- {record.status === 'SUCCESS' && record.paths.includes('DETAIL') && (
532		- <a
533		- key="detail"
534		- onClick={() => {
535		- setInvoiceRecordDetailVisible(true);
536		- setInvoiceRecord(record);
537		- }}
538		- >
539		- 详情
540		- </a>
541		- )}
542		- </>,
543		- <>
544		- {record.status === 'SUCCESS' &&
545		- record.paths.includes('DOWNLOAD_INVOICE') && (
546		- <a href={record.invoiceAddress} download>
547		- 下载发票
548		- </a>
549		- )}
550		- </>,
551		- <>
552		- {record.status === 'FAIL' && record.paths.includes('RETRY') && (
553		- <ModalForm
554		- title="提示"
555		- trigger={
556		- <Button type="link" danger>
557		- 重试
558		- </Button>
559		- }
560		- autoFocusFirstInput
561		- modalProps={{
562		- destroyOnClose: true,
563		- }}
564		- submitTimeout={2000}
565		- onFinish={async () => {
566		- const res = await postServiceInvoiceInvoicing({
567		- data: {
568		- invoiceRecordIds: [record.id],
569		- },
570		- });
571		- if (res) {
572		- message.success(res.message);
573		- processedRecordRef?.current?.reload();
574		- }
575		- return true;
576		- }}
577		- >
578		- 确定重试订单信息吗？
579		- </ModalForm>
580		- )}
581		- </>,
582		- <>
583		- {record.paths.includes('INVOICING') && (
584		- <ManualInvoicingModal
585		- key={'ManualInvoicingModal'}
586		- record={record}
587		- ></ManualInvoicingModal>
588		- )}
589		- </>,
590		- ],
591		- },
592		- ];
593		- /**
594		- * 加载发票列表表格的各个列格式
595		- */
596		- const invoicecColumnsInit = () => {
597		- let columns = INVOICE_COLUMNS.map((item) => {
598		- let newItem = { ...item };
599		- let dataIndex = item.dataIndex;
600		- let dataType = item.valueType;
601		-
602		- newItem.render = (text, record) => {
603		- let textValue = record[dataIndex];
604		-
605		- if (dataType === 'dateRange' \|\| dataType === 'date') {
606		- textValue = formatDate(textValue);
607		- }
608		-
609		- if (dataType === 'dateTime') {
610		- textValue = formatDateTime(textValue);
611		- }
612		-
613		- if (dataType === 'money') {
614		- textValue = '￥' + textValue;
615		- }
616		-
617		- switch (dataIndex) {
618		- case 'invoiceStatus':
619		- return (
620		- <EllipsisDiv
621		- text={enumValueToLabel(
622		- getTableCellText(textValue),
623		- INVOCING_STATUS,
624		- )}
625		- />
626		- );
627		-
628		- case 'status':
629		- return (
630		- <EllipsisDiv
631		- text={enumValueToLabel(
632		- getTableCellText(textValue),
633		- INVOICE_STATUS,
634		- )}
635		- />
636		- );
637		-
638		- case 'payee':
639		- return (
640		- <EllipsisDiv
641		- text={enumValueToLabel(
642		- getTableCellText(textValue),
643		- PAYEE_OPTIONS,
644		- )}
645		- />
646		- );
647		-
648		- default:
649		- return <EllipsisDiv text={getTableCellText(textValue)} />;
650		- }
651		- };
652		-
653		- return newItem;
654		- });
655		-
656		- columns.push({
657		- title: '操作',
658		- valueType: 'option',
659		- key: 'option',
660		- fixed: 'right',
661		- width: 120,
662		- render: (text, record) => {
663		- let btns = [];
664		- if (record.path?.includes('writeOff')) {
665		- btns.push(
666		- <a
667		- key="editable"
668		- onClick={() => {
669		- setInvoiceVerificationVisible(true);
670		- setInvoiceId(record.invoiceId);
671		- }}
672		- >
673		- 核销
674		- </a>,
675		- );
676		- }
677		-
678		- if (record.path?.includes('queryInvoiceDetails')) {
679		- btns.push(
680		- <Button
681		- className="p-0"
682		- key="view"
683		- type="link"
684		- onClick={() => {
685		- setInvoiceVerificationVisible(true);
686		- setInvoiceId(record.invoiceId);
687		- }}
688		- >
689		- 查看
690		- </Button>,
691		- );
692		- }
693		-
694		- if (record.path?.includes('deleteInvoice')) {
695		- btns.push(
696		- <ButtonConfirm
697		- key="delete"
698		- className="p-0"
699		- title={
700		- '确认删除发票号码为[ ' + record.invoiceNumber + ' ]的发票吗？'
701		- }
702		- text="删除"
703		- onConfirm={async () => {
704		- let res = await postServiceInvoiceDeleteInvoice({
705		- data: { invoiceId: record.invoiceId },
706		- });
707		- if (res) {
708		- message.success(res.message);
709		- reloadInvoiceTable();
710		- }
711		- }}
712		- />,
713		- );
714		- }
715		- return btns;
716		- },
717		- });
718		-
719		- return columns;
720		- };
721		-
722		- const bankStatemetColumnsInit = () => {
723		- let columns = BANK_STATEMENT_COLUMNS.map((item) => {
724		- let newItem = { ...item };
725		- let dataIndex = item.dataIndex;
726		- let dataType = item.valueType;
727		-
728		- newItem.render = (text, record) => {
729		- let textValue = record[dataIndex];
730		-
731		- if (dataType === 'date') {
732		- textValue = formatDate(textValue);
733		- }
734		-
735		- if (dataType === 'dateTime') {
736		- textValue = formatDateTime(textValue);
737		- }
738		-
739		- if (dataType === 'money') {
740		- if (textValue === null \|\| textValue === undefined) {
741		- textValue = '';
742		- } else {
743		- textValue = '￥' + textValue;
744		- }
745		- }
746		-
747		- switch (dataIndex) {
748		- case 'invoiceStatus':
749		- return (
750		- <EllipsisDiv
751		- text={enumValueToLabel(
752		- getTableCellText(textValue),
753		- INVOCING_STATUS,
754		- )}
755		- />
756		- );
757		-
758		- case 'status':
759		- return (
760		- <EllipsisDiv
761		- text={enumValueToLabel(
762		- getTableCellText(textValue),
763		- INVOICE_STATUS,
764		- )}
765		- />
766		- );
767		-
768		- case 'payee':
769		- return (
770		- <EllipsisDiv
771		- text={enumValueToLabel(
772		- getTableCellText(textValue),
773		- PAYEE_OPTIONS,
774		- )}
775		- />
776		- );
777		-
778		- default:
779		- return <EllipsisDiv text={getTableCellText(textValue)} />;
780		- }
781		- };
782		-
783		- return newItem;
784		- });
785		-
786		- columns.push({
787		- title: '操作',
788		- valueType: 'option',
789		- key: 'option',
790		- fixed: 'right',
791		- width: 120,
792		- render: (text, record, _, action) => {
793		- let btns = [];
794		- if (record.path?.includes('editBankStatement')) {
795		- btns.push(
796		- <a
797		- key="editable"
798		- onClick={() => {
799		- action?.startEditable?.(record.id);
800		- }}
801		- >
802		- 编辑
803		- </a>,
804		- );
805		- }
806		-
807		- if (record.path?.includes('deleteBankStatement')) {
808		- btns.push(
809		- <ButtonConfirm
810		- key="delete"
811		- className="p-0"
812		- title={'是否删除该银行流水记录？'}
813		- text="删除"
814		- onConfirm={async () => {
815		- let res = await postServiceBankStatementDeleteBankStatement({
816		- data: { id: record.id },
817		- });
818		- if (res.result === RESPONSE_CODE.SUCCESS) {
819		- message.success(res.message);
820		- reloadBankStatementTable();
821		- }
822		- }}
823		- />,
824		- );
825		- }
826		- return btns;
827		- },
828		- });
829		-
830		- return columns;
831		- };
832		-
833		- const tabsItems = [
834		- {
835		- key: 1,
836		- label: '待处理',
837		- children: (
838		- <ProTable
839		- columns={waitDealRecordColumns}
840		- actionRef={waitDealrecordActionRef}
841		- cardBordered
842		- pagination={{
843		- showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
844		- pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
845		- }}
846		- rowSelection={{
847		- selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
848		- alwaysShowAlert: true,
849		- }}
850		- tableAlertOptionRender={({ selectedRowKeys, selectedRows }) => {
851		- console.log(selectedRows);
852		- console.log(selectedRowKeys);
853		- return (
854		- <Space size={16}>
855		- <InvoicingModal
856		- reloadRecordTable={reloadRecordTable}
857		- key="button"
858		- selectedRowKeys={selectedRowKeys}
859		- />
860		- </Space>
861		- );
862		- }}
863		- request={async (params) => {
864		- let res = await postServiceInvoiceQueryInvoiceRecordList({
865		- data: {
866		- ...params,
867		- statusIn: [
868		- 'WAITING_FOR_INVOICING',
869		- 'AUDITING',
870		- 'AUDITING_NOT_PASSED',
871		- 'CANCELED',
872		- ],
873		- needBuildDetails: true,
874		- needBuildSubOrders: true,
875		- },
876		- });
877		- return {
878		- data: res?.data?.data,
879		- total: res?.data?.total \|\| 0,
880		- };
881		- }}
882		- columnsState={{
883		- persistenceKey: 'pro-table-singe-demos',
884		- persistenceType: 'localStorage',
885		- defaultValue: {
886		- option: { fixed: 'right', disable: true },
887		- },
888		- onChange(value) {
889		- console.log('value: ', value);
890		- },
891		- }}
892		- rowKey="id"
893		- search={{
894		- labelWidth: 'auto',
895		- }}
896		- options={{
897		- setting: {
898		- listsHeight: 400,
899		- },
900		- }}
901		- form={{}}
902		- dateFormatter="string"
903		- headerTitle="待开票列表"
904		- scroll={{ x: 1400, y: 360 }}
905		- />
906		- ),
907		- },
908		- {
909		- key: 2,
910		- label: '开票记录',
911		- children: (
912		- <ProTable
913		- columns={processedRecordColumns}
914		- actionRef={processedRecordRef}
915		- cardBordered
916		- pagination={{
917		- showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
918		- pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
919		- }}
920		- editable={{
921		- type: 'multiple',
922		- onSave: async (rowKey, data) => {
923		- await postServiceBankStatementEditBankStatement({ data: data });
924		- },
925		- actionRender: (row, config, defaultDom) => [
926		- defaultDom.save,
927		- defaultDom.cancel,
928		- ],
929		- }}
930		- search={{
931		- labelWidth: 'auto',
932		- defaultCollapsed: false,
933		- optionRender: (searchConfig, formProps, dom) => [
934		- ...dom,
935		- <Button
936		- key="out"
937		- onClick={() => {
938		- const values = searchConfig?.form?.getFieldsValue();
939		- console.log(values);
940		- messageApi.open({
941		- type: 'loading',
942		- content: '正在导出文件...',
943		- });
944		- excelExport(
945		- '/api/service/invoice/exportInvoiceRecords',
946		- {
947		- ...values,
948		- statusIn: ['INVOICING', 'SUCCESS', 'FAIL'],
949		- },
950		- () => {
951		- messageApi.destroy();
952		- },
953		- );
954		- }}
955		- >
956		- 导出
957		- </Button>,
958		- ],
959		- }}
960		- request={async (params) => {
961		- let res = await postServiceInvoiceQueryInvoiceRecordList({
962		- data: {
963		- ...params,
964		- statusIn: ['INVOICING', 'SUCCESS', 'FAIL'],
965		- },
966		- });
967		- return {
968		- data: res?.data?.data,
969		- total: res?.data?.total \|\| 0,
970		- };
971		- }}
972		- columnsState={{
973		- persistenceKey: 'pro-table-singe-demos',
974		- persistenceType: 'localStorage',
975		- defaultValue: {
976		- option: { fixed: 'right', disable: true },
977		- },
978		- onChange(value) {
979		- console.log('value: ', value);
980		- },
981		- }}
982		- rowKey="id"
983		- options={{
984		- setting: {
985		- listsHeight: 400,
986		- },
987		- }}
988		- form={{}}
989		- dateFormatter="string"
990		- headerTitle="待开票列表"
991		- scroll={{ x: 1400, y: 360 }}
992		- toolBarRender={() => []}
993		- />
994		- ),
995		- },
996		- {
997		- key: 3,
998		- label: '发票管理',
999		- children: (
1000		- <ProTable
1001		- columns={invoicecColumnsInit()}
1002		- actionRef={invoiceActionRef}
1003		- cardBordered
1004		- pagination={{
1005		- pageSize: 10,
1006		- }}
1007		- request={async (params) => {
1008		- const res = await postServiceInvoiceQueryInvoice({
1009		- data: { ...params },
1010		- });
1011		- if (res) {
1012		- return {
1013		- data: res?.data?.data \|\| [],
1014		- total: res?.data?.total \|\| 0,
1015		- };
1016		- }
1017		- }}
1018		- columnsState={{
1019		- persistenceKey: 'pro-table-singe-demos',
1020		- persistenceType: 'localStorage',
1021		- defaultValue: {
1022		- option: { fixed: 'right', disable: true },
1023		- },
1024		- onChange(value) {
1025		- console.log('value: ', value);
1026		- },
1027		- }}
1028		- rowKey="id"
1029		- search={{
1030		- labelWidth: 'auto',
1031		- }}
1032		- options={{
1033		- setting: {
1034		- listsHeight: 400,
1035		- },
1036		- }}
1037		- form={{}}
1038		- dateFormatter="string"
1039		- headerTitle="发票列表"
1040		- scroll={{ x: 1400, y: 360 }}
1041		- toolBarRender={() => [
1042		- <AddInvoiceDrawerForm
1043		- onClose={() => {
1044		- invoiceActionRef.current?.reload();
1045		- bankActionRef.current?.reload();
1046		- }}
1047		- key="add"
1048		- ></AddInvoiceDrawerForm>,
1049		- ]}
1050		- />
1051		- ),
1052		- },
1053		- {
1054		- key: 4,
1055		- label: '银行流水',
1056		- children: (
1057		- <ProTable
1058		- columns={bankStatemetColumnsInit()}
1059		- actionRef={bankActionRef}
1060		- cardBordered
1061		- pagination={{
1062		- pageSize: 10,
1063		- }}
1064		- editable={{
1065		- type: 'multiple',
1066		- onSave: async (rowKey, data) => {
1067		- await postServiceBankStatementEditBankStatement({ data: data });
1068		- },
1069		- actionRender: (row, config, defaultDom) => [
1070		- defaultDom.save,
1071		- defaultDom.cancel,
1072		- ],
1073		- }}
1074		- request={async (params) => {
1075		- const res = await postServiceBankStatementQueryBankStatement({
1076		- data: { ...params },
1077		- });
1078		- if (res) {
1079		- return {
1080		- data: res?.data?.data \|\| [],
1081		- total: res?.data?.total \|\| 0,
1082		- };
1083		- }
1084		- }}
1085		- columnsState={{
1086		- persistenceKey: 'pro-table-singe-demos',
1087		- persistenceType: 'localStorage',
1088		- defaultValue: {
1089		- option: { fixed: 'right', disable: true },
1090		- },
1091		- onChange(value) {
1092		- console.log('value: ', value);
1093		- },
1094		- }}
1095		- rowKey="id"
1096		- search={{
1097		- labelWidth: 'auto',
1098		- }}
1099		- options={{
1100		- setting: {
1101		- listsHeight: 400,
1102		- },
1103		- }}
1104		- form={{}}
1105		- dateFormatter="string"
1106		- headerTitle="银行流水列表"
1107		- scroll={{ x: 1400, y: 360 }}
1108		- toolBarRender={() => [
1109		- <Button
1110		- key="button"
1111		- icon={<PlusOutlined />}
1112		- onClick={() => {
1113		- setBankImportModalVisible(true);
1114		- }}
1115		- type="primary"
1116		- >
1117		- 导入
1118		- </Button>,
1119		- ]}
1120		- />
1121		- ),
1122		- },
1123		- ];
1124		- return (
1125		- <div className="invoice-index">
1126		- <Tabs
1127		- defaultActiveKey="1"
1128		- items={tabsItems}
1129		- onChange={(value) => {
1130		- if (value === 1) {
1131		- invoiceActionRef.current?.reload();
1132		- } else {
1133		- bankActionRef.current?.reload();
1134		- }
1135		- }}
1136		- />
1137		-
1138		- {bankImportModalVisible ? (
1139		- <BankImportModal
1140		- setVisible={setBankImportModalVisible}
1141		- onClose={() => {
1142		- setBankImportModalVisible(false);
1143		- invoiceActionRef.current?.reload();
1144		- bankActionRef.current?.reload();
1145		- }}
1146		- ></BankImportModal>
1147		- ) : (
1148		- ''
1149		- )}
1150		-
1151		- {invoiceVerificationVisible ? (
1152		- <InvoiceVerificationModal
1153		- setVisible={setInvoiceVerificationVisible}
1154		- invoiceId={invoiceId}
1155		- onClose={() => {
1156		- invoiceActionRef.current?.reload();
1157		- bankActionRef.current?.reload();
1158		- }}
1159		- ></InvoiceVerificationModal>
1160		- ) : (
1161		- ''
1162		- )}
1163		- {invoiceRecordDetailVisible ? (
1164		- <InvoiceRecordDetailModal
1165		- key="detail"
1166		- id={invoiceRecord.id}
1167		- setVisible={setInvoiceRecordDetailVisible}
1168		- />
1169		- ) : (
1170		- ''
1171		- )}
1172		- {contextHolder}
1173		- </div>
1174		- );
1175		-};
1176		-
1177		-export default InvoicePage;

canrd-main / canrd-erp-front · Commits

GitLab

feat(invoice): optimize invoice components and enhance user experience