canrd-main / canrd-erp-front · Commits

Commit c81dc397b8378674943b2ab334bfc4e92e196b28

Authored by 曾国涛
1 parent fb32b634
build: skipped

feat: 开票功能开发

Inline Side-by-side
Showing 4 changed files with 846 additions and 0 deletions
src/pages/Invoice/components/Invoice.tsx 0 → 100644
  View file @c81dc39
  1 +import { postServiceInvoiceGetInvoiceRecord } from '@/services';
  2 +import { useEffect, useState } from 'react';
  3 +import styled from 'styled-components';
  4 +const InvoiceTmpDiv = styled.div`
  5 + font-size: 12px;
  6 + width: 1120px;
  7 + .title {
  8 + font-size: 26px;
  9 + color: #b16363;
  10 + text-align: center;
  11 + line-height: 56px;
  12 + padding-top: 0;
  13 + }
  14 + .extra {
  15 + color: #b15b16;
  16 + .content {
  17 + color: #181818;
  18 + }
  19 + }
  20 + .height84 {
  21 + height: 110px;
  22 + }
  23 + .row {
  24 + border: 2px solid #b16363;
  25 + border-bottom: none;
  26 + color: #b15b16;
  27 + .content {
  28 + color: #181818;
  29 + }
  30 + }
  31 + .last-row {
  32 + .content {
  33 + color: #181818;
  34 + }
  35 + color: #b15b16;
  36 + border-top: 2px solid #b16363;
  37 + }
  38 + .label {
  39 + width: 78px;
  40 + display: inline-block;
  41 + text-align-last: justify;
  42 + text-align: justify;
  43 + }
  44 + .longLabel {
  45 + width: 178px;
  46 + display: inline-block;
  47 + text-align-last: justify;
  48 + text-align: justify;
  49 + }
  50 + .title-label {
  51 + width: 52px;
  52 + }
  53 +`;
  54 +const Row = styled.div`
  55 + .col_1 {
  56 + width: 2.65%;
  57 + borderleft: none;
  58 + }
  59 + .col_4 {
  60 + width: 3.75%;
  61 + }
  62 + .col_9 {
  63 + width: 7.4%;
  64 + }
  65 + .col_2 {
  66 + width: 8.33%;
  67 + }
  68 + .col_3 {
  69 + width: 12.5%;
  70 + }
  71 + .col_5 {
  72 + width: 20.83%;
  73 + }
  74 + .col_6 {
  75 + width: 42.5%;
  76 + }
  77 + .col_7 {
  78 + width: 29.16%;
  79 + }
  80 + .col_8 {
  81 + width: 33.33%;
  82 + }
  83 + .col_14 {
  84 + width: 58.33%;
  85 + }
  86 + .col_15 {
  87 + width: 42.5%;
  88 + }
  89 + .col_17 {
  90 + width: 70.83%;
  91 + }
  92 + .col_18 {
  93 + width: 100%;
  94 + }
  95 + .col_24 {
  96 + width: 100%;
  97 + }
  98 +`;
  99 +const Col = styled.span`
  100 + display: inline-block;
  101 + padding: 8px;
  102 + box-sizing: border-box;
  103 + vertical-align: middle;
  104 + border-left: 2px solid #b16363;
  105 + height: 100%;
  106 + &.no-border {
  107 + border-left: none;
  108 + }
  109 + .text-center {
  110 + text-align: center;
  111 + border-left: none;
  112 + border-right: none;
  113 + }
  114 + &.transparent-border {
  115 + border-left: 2px solid rgba(0, 0, 0, 0);
  116 + }
  117 + &.invoice-number {
  118 + border-left: none;
  119 + color: #b16363;
  120 + padding: 0 0 0 800px;
  121 + font-size: 14px;
  122 + }
  123 +`;
  124 +const UnderLine = styled.div`
  125 + border: 2px solid #b16363;
  126 + width: 325px;
  127 + height: 8px;
  128 + margin: -1% 0 2% 35%;
  129 + border-left: none;
  130 + border-right: none;
  131 +`;
  132 +const InvoiceInfo = styled.span`
  133 + color: black;
  134 +`;
  135 +const TitleDescription = styled.div`
  136 + margin-top: 4.2%;
  137 +`;
  138 +const ProjectContainer = styled.div`
  139 + width: 100%;
  140 + height: 160px;
  141 + border-top: 2px solid #b16363;
  142 + border-right: 2px solid #b16363;
  143 + border-left: 2px solid #b16363;
  144 + overflow: auto;
  145 + .single-project {
  146 + width: 100%;
  147 + height: 30px;
  148 + }
  149 +`;
  150 +export default ({ recordId }) => {
  151 + const [data, setData] = useState<any>({});
  152 + useEffect(() => {
  153 + const getData = async () => {
  154 + let ret = await postServiceInvoiceGetInvoiceRecord({
  155 + query: {
  156 + id: recordId,
  157 + },
  158 + });
  159 + setData(ret.data);
  160 + };
  161 + getData();
  162 + }, []);
  163 + return (
  164 + <div>
  165 + <InvoiceTmpDiv>
  166 + <Row>
  167 + <Col className="col_18 invoice-number">
  168 + 发票号码：<InvoiceInfo>{data.invoiceNumber}</InvoiceInfo>
  169 + </Col>
  170 + <Col className="title col_18 no-border">
  171 + 电子发票（增值税专用发票）
  172 + </Col>
  173 + <UnderLine className="UnderLine">
  174 + <div></div>
  175 + </UnderLine>
  176 + </Row>
  177 + <Row className="row height84">
  178 + <Col className="col_1 no-border">购买方信息</Col>
  179 + <Col className="col_15">
  180 + <TitleDescription>
  181 + <span className="label">名称</span>：
  182 + <span className="content">{data.partyAName}</span>
  183 + </TitleDescription>
  184 + <TitleDescription>
  185 + <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
  186 + <span className="content">{data.partyATaxid}</span>
  187 + </TitleDescription>
  188 + </Col>
  189 + <Col className="col_1">销售方信息</Col>
  190 + <Col className="col_6">
  191 + <TitleDescription>
  192 + <span className="label">名称</span>：
  193 + <span className="content">{data.partyBName}</span>
  194 + </TitleDescription>
  195 + <TitleDescription>
  196 + <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
  197 + <span className="content">{data.partyBTaxid}</span>
  198 + </TitleDescription>
  199 + </Col>
  200 + </Row>
  201 + <Row className="row">
  202 + <Col className="col_7 no-border">
  203 + <div className="text-center">项目名称</div>
  204 + </Col>
  205 + <Col className="col_5">
  206 + <div className="text-center">规格型号</div>
  207 + </Col>
  208 + <Col className="">
  209 + <div className="text-center">单位</div>
  210 + </Col>
  211 + <Col className="">
  212 + <div className="text-center">数量</div>
  213 + </Col>
  214 + <Col className="col_2">
  215 + <div className="text-center">单价</div>
  216 + </Col>
  217 + <Col className="col_3">
  218 + <div className="text-center">金额</div>
  219 + </Col>
  220 + <Col className="">
  221 + <div className="text-center">税率/征收率</div>
  222 + </Col>
  223 + <Col className="col_2">
  224 + <div className="text-center">税额</div>
  225 + </Col>
  226 + </Row>
  227 + <Row>
  228 + <ProjectContainer>
  229 + {data &&
  230 + data.invoiceDetails?.map((item) => {
  231 + const {
  232 + taxPrice,
  233 + totalPrice,
  234 + specification,
  235 + projectName,
  236 + quantity,
  237 + price,
  238 + taxRate,
  239 + unit,
  240 + } = item;
  241 + return (
  242 + <div className="single-project" key={item.id}>
  243 + <Col
  244 + className="col_7 transparent-border"
  245 + key={'projectName'}
  246 + >
  247 + <div className="text-center">{projectName}</div>
  248 + </Col>
  249 + <Col
  250 + className="col_5 transparent-border"
  251 + key={'specification'}
  252 + >
  253 + <div className="text-center">{specification}</div>
  254 + </Col>
  255 + <Col className="col_4 transparent-border" key={'unit'}>
  256 + <div className="text-center">{unit}</div>
  257 + </Col>
  258 + <Col className="col_4 transparent-border" key={'quantity'}>
  259 + <div className="text-center">{quantity}</div>
  260 + </Col>
  261 + <Col className="col_2 transparent-border" key={'price'}>
  262 + <div className="text-center">{price}</div>
  263 + </Col>
  264 + <Col
  265 + className="col_3 transparent-border"
  266 + key={'totalPrice'}
  267 + >
  268 + <div className="text-center">{totalPrice}</div>
  269 + </Col>
  270 + <Col className="col_9 transparent-border" key={'taxRate'}>
  271 + <div className="text-center">{taxRate}</div>
  272 + </Col>
  273 + <Col className="col_2 transparent-border" key={'taxPrice'}>
  274 + <div className="text-center">{taxPrice}</div>
  275 + </Col>
  276 + </div>
  277 + );
  278 + })}
  279 + </ProjectContainer>
  280 + </Row>
  281 + <Row className="row">
  282 + <Col className="col_15 no-border">
  283 + 价税合计（大写）
  284 + <InvoiceInfo>{data.totalPriceText}</InvoiceInfo>
  285 + </Col>
  286 + <Col className="no-border">
  287 + （小写）<InvoiceInfo>￥{data.totalPrice}</InvoiceInfo>
  288 + </Col>
  289 + </Row>
  290 + <Row className="row height84">
  291 + <Col className="col_1 no-border">备注</Col>
  292 + <Col className="col_7">
  293 + <InvoiceInfo>{data.comment}</InvoiceInfo>
  294 + </Col>
  295 + </Row>
  296 + <Row className="last-row">
  297 + <Col className="col_6 no-border">
  298 + 开票人：<InvoiceInfo>{data.invoicingPerson}</InvoiceInfo>
  299 + </Col>
  300 + </Row>
  301 + </InvoiceTmpDiv>
  302 + </div>
  303 + );
  304 +};
... ...
src/pages/Invoice/components/InvoiceDetailTable.tsx 0 → 100644
  View file @c81dc39
  1 +import type { ProColumns } from '@ant-design/pro-components';
  2 +import {
  3 + EditableProTable,
  4 + ProCard,
  5 + ProFormField,
  6 +} from '@ant-design/pro-components';
  7 +import { Button } from 'antd';
  8 +import { useEffect, useState } from 'react';
  9 +
  10 +export default ({ details, updateDetails, readOnly }) => {
  11 + const [editableKeys, setEditableRowKeys] = useState([]);
  12 +
  13 + useEffect(() => {
  14 + updateDetails(details);
  15 + }, []);
  16 +
  17 + useEffect(() => {
  18 + setEditableRowKeys(details?.map((item) => item.tid));
  19 + }, [details]);
  20 + const columns: ProColumns[] = [
  21 + {
  22 + title: '项目名称',
  23 + readonly: readOnly,
  24 + dataIndex: 'projectName',
  25 + valueType: 'text',
  26 + width: '30%',
  27 + },
  28 + {
  29 + title: '规格型号',
  30 + readonly: readOnly,
  31 + dataIndex: 'specification',
  32 + valueType: 'text',
  33 + width: '30%',
  34 + },
  35 + {
  36 + title: '单位',
  37 + readonly: readOnly,
  38 + dataIndex: 'unit',
  39 + valueType: 'text',
  40 + width: '30%',
  41 + },
  42 + {
  43 + title: '数量',
  44 + readonly: readOnly,
  45 + dataIndex: 'quantity',
  46 + valueType: 'digit',
  47 + width: '30%',
  48 + },
  49 + {
  50 + title: '单价',
  51 + readonly: readOnly,
  52 + dataIndex: 'price',
  53 + valueType: 'digit',
  54 + width: '30%',
  55 + },
  56 + {
  57 + title: '金额',
  58 + readonly: readOnly,
  59 + dataIndex: 'taxPrice',
  60 + valueType: 'digit',
  61 + width: '30%',
  62 + },
  63 + {
  64 + title: '税率/征收率',
  65 + readonly: readOnly,
  66 + dataIndex: 'taxRate',
  67 + valueType: () => ({
  68 + type: 'percent',
  69 + }),
  70 + width: '30%',
  71 + },
  72 + {
  73 + title: '税额',
  74 + readonly: readOnly,
  75 + dataIndex: 'taxPrice',
  76 + valueType: 'digit',
  77 + width: '30%',
  78 + },
  79 + {
  80 + title: '操作',
  81 + valueType: 'option',
  82 + width: 250,
  83 + render: () => {
  84 + return null;
  85 + },
  86 + },
  87 + ];
  88 +
  89 + return (
  90 + <>
  91 + <EditableProTable
  92 + headerTitle="可编辑表格"
  93 + columns={columns}
  94 + rowKey="tid"
  95 + scroll={{
  96 + x: 960,
  97 + }}
  98 + value={details}
  99 + onChange={updateDetails}
  100 + recordCreatorProps={
  101 + readOnly
  102 + ? false
  103 + : {
  104 + newRecordType: 'dataSource',
  105 + record: () => ({
  106 + tid: Date.now(),
  107 + }),
  108 + }
  109 + }
  110 + toolBarRender={() => {
  111 + return [
  112 + <Button
  113 + type="primary"
  114 + key="save"
  115 + onClick={() => {
  116 + // dataSource 就是当前数据，可以调用 api 将其保存
  117 + console.log(details);
  118 + }}
  119 + >
  120 + 保存数据
  121 + </Button>,
  122 + ];
  123 + }}
  124 + editable={{
  125 + type: 'multiple',
  126 + editableKeys,
  127 + actionRender: (row, config, defaultDoms) => {
  128 + return [defaultDoms.delete];
  129 + },
  130 +
  131 + onValuesChange: (record, recordList) => {
  132 + updateDetails(recordList);
  133 + },
  134 + onChange: setEditableRowKeys,
  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 +};
... ...
src/pages/Invoice/components/InvoiceModal.tsx 0 → 100644
  View file @c81dc39
  1 +import Invoice from '@/pages/Invoice/components/Invoice';
  2 +import { ModalForm } from '@ant-design/pro-components';
  3 +import { Form, message } from 'antd';
  4 +import { useEffect } from 'react';
  5 +
  6 +const waitTime = (time: number = 100) => {
  7 + return new Promise((resolve) => {
  8 + setTimeout(() => {
  9 + resolve(true);
  10 + }, time);
  11 + });
  12 +};
  13 +
  14 +export default ({ recordId }) => {
  15 + const [form] = Form.useForm();
  16 + useEffect(() => {
  17 + console.log('recordId', recordId);
  18 + }, []);
  19 + return (
  20 + <ModalForm
  21 + title="预览发票"
  22 + trigger={<a type="primary">预览</a>}
  23 + width={1200}
  24 + form={form}
  25 + autoFocusFirstInput
  26 + modalProps={{
  27 + destroyOnClose: true,
  28 + onCancel: () => console.log('run'),
  29 + }}
  30 + submitTimeout={2000}
  31 + onFinish={async (values) => {
  32 + await waitTime(2000);
  33 + console.log(values.name);
  34 + message.success('提交成功');
  35 + return true;
  36 + }}
  37 + >
  38 + <hr />
  39 + <Invoice recordId={recordId} />
  40 + </ModalForm>
  41 + );
  42 +};
... ...
src/pages/Invoice/components/InvoiceRecordDetailModal.tsx 0 → 100644
  View file @c81dc39
  1 +import { RESPONSE_CODE } from '@/constants/enum';
  2 +import InvoiceDetailTable from '@/pages/Invoice/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 + ProForm,
  14 + ProFormInstance,
  15 + ProFormSelect,
  16 + ProFormText,
  17 + ProFormTextArea,
  18 +} from '@ant-design/pro-components';
  19 +import { Button, Form, Space, message } from 'antd';
  20 +import { useEffect, useRef, useState } from 'react';
  21 +
  22 +export default ({ id }) => {
  23 + const [readOnly, setReadOnly] = useState(true);
  24 + const [visible, setVisible] = useState(false);
  25 + const [initialValues, setInitialValues] = useState({});
  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 + const getPayees = async () => {
  34 + let res = await postServiceConstGetPayeeEnum();
  35 + setPayees(res.data);
  36 + let payeeNameOptions = res.data.map((item) => {
  37 + return {
  38 + label: item.payeeName,
  39 + value: item.payeeName,
  40 + };
  41 + });
  42 + setPayeeNameOptions(payeeNameOptions);
  43 + };
  44 + getPayees();
  45 + }, []);
  46 + useEffect(() => {
  47 + const initRecord = async (id) => {
  48 + let ret = await postServiceInvoiceGetInvoiceRecord({
  49 + query: {
  50 + id: id,
  51 + },
  52 + });
  53 + const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
  54 + (item, index) => ({
  55 + ...item, // 保留原有属性
  56 + tid: index + 1, // 添加tid属性，这里以T开头，后面跟索引+1，仅作示例，实际可根据需求生成tid
  57 + }),
  58 + );
  59 + setDetailTableData(updatedInvoiceDetails);
  60 + setInitialValues(ret.data);
  61 + };
  62 + if (!visible) {
  63 + initRecord(id);
  64 + }
  65 + }, [visible]);
  66 +
  67 + const updateDetails = (values) => {
  68 + setDetailTableData(values);
  69 + };
  70 + return (
  71 + <>
  72 + <Space>
  73 + <a
  74 + type="primary"
  75 + onClick={() => {
  76 + setVisible(true);
  77 + }}
  78 + >
  79 + 详情
  80 + </a>
  81 + {visible && (
  82 + <ModalForm
  83 + open
  84 + onOpenChange={setVisible}
  85 + title="新建表单"
  86 + formRef={formRef}
  87 + initialValues={initialValues}
  88 + submitter={{
  89 + render: () => {
  90 + return [
  91 + <Button
  92 + type={readOnly ? 'primary' : 'default'}
  93 + key="ok"
  94 + onClick={() => {
  95 + setReadOnly(!readOnly);
  96 + }}
  97 + >
  98 + {readOnly ? '编辑' : '取消编辑'}
  99 + </Button>,
  100 + <>
  101 + {!readOnly && (
  102 + <Button
  103 + type="primary"
  104 + key="submit"
  105 + onClick={async () => {
  106 + const result = await postServiceInvoiceModifyRecord({
  107 + data: {
  108 + ...form.getFieldsValue(),
  109 + invoiceDetails: [...detailTableData],
  110 + },
  111 + });
  112 + if (result.result === RESPONSE_CODE.SUCCESS) {
  113 + message.success('提交成功');
  114 + }
  115 + setVisible(false);
  116 + return true;
  117 + }}
  118 + >
  119 + 提交
  120 + </Button>
  121 + )}
  122 + </>,
  123 + /*<Button
  124 + type={'default'}
  125 + key="ok"
  126 + onClick={() => {
  127 + setVisible(false)
  128 + }}
  129 + >
  130 + 取消
  131 + </Button>,*/
  132 + ];
  133 + },
  134 + }}
  135 + width={1200}
  136 + form={form}
  137 + autoFocusFirstInput
  138 + modalProps={{
  139 + destroyOnClose: true,
  140 + }}
  141 + submitTimeout={2000}
  142 + onFinish={async (values) => {
  143 + const result = await postServiceInvoiceModifyRecord({
  144 + data: {
  145 + ...values,
  146 + invoiceDetails: {
  147 + ...detailTableData,
  148 + },
  149 + },
  150 + });
  151 + if (result.result === RESPONSE_CODE.SUCCESS) {
  152 + message.success('提交成功');
  153 + }
  154 + setVisible(false);
  155 + return true;
  156 + }}
  157 + >
  158 + 基础信息
  159 + <hr />
  160 + <ProForm.Group>
  161 + <ProFormText
  162 + readonly
  163 + name="id"
  164 + label="订单批号"
  165 + tooltip="最长为 24 位"
  166 + placeholder="请输入名称"
  167 + />
  168 +
  169 + <ProFormText
  170 + readonly
  171 + width="md"
  172 + name="createByName"
  173 + label="销售代表"
  174 + placeholder="请输入名称"
  175 + />
  176 + <ProFormText
  177 + readonly
  178 + width="md"
  179 + name="createTime"
  180 + label="申请时间"
  181 + placeholder="请输入名称"
  182 + />
  183 + <ProFormSelect
  184 + name="type"
  185 + label="发票类型"
  186 + readonly={readOnly}
  187 + request={async () => {
  188 + let invoiceTypeRet = await postServiceConstInvoiceType();
  189 + return enumToSelect(invoiceTypeRet.data);
  190 + }}
  191 + placeholder="Please select a country"
  192 + rules={[
  193 + { required: true, message: 'Please select your country!' },
  194 + ]}
  195 + />
  196 + <ProFormSelect
  197 + name="invoicingType"
  198 + readonly={readOnly}
  199 + label="开具类型"
  200 + request={async () => {
  201 + let invoicingTypeRet = await postServiceConstInvoicingType();
  202 + let options = enumToSelect(invoicingTypeRet.data);
  203 + return options;
  204 + }}
  205 + placeholder="Please select a country"
  206 + rules={[
  207 + { required: true, message: 'Please select your country!' },
  208 + ]}
  209 + />
  210 + <ProFormText
  211 + readonly
  212 + width="md"
  213 + name="subOrderIdsText"
  214 + label="订单号"
  215 + initialValue={initialValues?.subOrderIds
  216 + ?.map((item: any) => {
  217 + return item;
  218 + })
  219 + .join(',')}
  220 + placeholder="请输入名称"
  221 + />
  222 + </ProForm.Group>
  223 + 购方信息
  224 + <hr />
  225 + <ProForm.Group>
  226 + <ProFormText
  227 + readonly={readOnly}
  228 + width="md"
  229 + name="partyAName"
  230 + label="购方名称"
  231 + placeholder="请输入名称"
  232 + />
  233 + <ProFormText
  234 + readonly={readOnly}
  235 + width="md"
  236 + name="partyATaxid"
  237 + label="购方税号"
  238 + placeholder="请输入名称"
  239 + />
  240 + <ProFormText
  241 + readonly={readOnly}
  242 + width="md"
  243 + label="开户银行"
  244 + name={'partyAOpenBank'}
  245 + placeholder="请输入名称"
  246 + />
  247 + <ProFormText
  248 + readonly={readOnly}
  249 + width="md"
  250 + name="partyABankAccount"
  251 + label="银行账号"
  252 + placeholder="请输入名称"
  253 + />
  254 + <ProFormText
  255 + readonly={readOnly}
  256 + width="md"
  257 + name="partyAAddress"
  258 + label="购方地址"
  259 + placeholder="请输入名称"
  260 + />
  261 + <ProFormText
  262 + readonly={readOnly}
  263 + width="md"
  264 + name="partyAPhoneNumber"
  265 + label="电话"
  266 + placeholder="请输入名称"
  267 + />
  268 + </ProForm.Group>
  269 + 销方信息
  270 + <hr />
  271 + <ProForm.Group>
  272 + <ProFormSelect
  273 + readonly={readOnly}
  274 + width="md"
  275 + name="partyBName"
  276 + options={payeeNameOptions}
  277 + onChange={(value: any) => {
  278 + let payee = payees.find((item: any) => {
  279 + return item.payeeName === value;
  280 + });
  281 + console.log(JSON.stringify(payee));
  282 + form.setFieldsValue({
  283 + partyBTaxid: payee.taxId,
  284 + partyBBankAccount: payee.bankAccount,
  285 + partyBOpenBank: payee.openBank,
  286 + partyBAddress: payee.address,
  287 + partyBPhoneNumber: payee.phoneNumber,
  288 + });
  289 + }}
  290 + label="销方名称"
  291 + placeholder="请输入名称"
  292 + />
  293 +
  294 + <ProFormText
  295 + readonly
  296 + width="md"
  297 + name="partyBTaxid"
  298 + label="销方税号"
  299 + placeholder="请输入名称"
  300 + />
  301 + <ProFormText
  302 + readonly
  303 + width="md"
  304 + name="partyBOpenBank"
  305 + label="开户银行"
  306 + placeholder="请输入名称"
  307 + />
  308 + <ProFormText
  309 + readonly
  310 + width="md"
  311 + name="partyBBankAccount"
  312 + label="银行账号"
  313 + placeholder="请输入名称"
  314 + />
  315 + <ProFormText
  316 + readonly
  317 + width="md"
  318 + name="partyBAddress"
  319 + label="销方地址"
  320 + placeholder="请输入名称"
  321 + />
  322 + <ProFormText
  323 + readonly
  324 + width="md"
  325 + name="partyBPhoneNumber"
  326 + label="电话"
  327 + placeholder="请输入名称"
  328 + />
  329 + </ProForm.Group>
  330 + 订单信息
  331 + <hr />
  332 + <InvoiceDetailTable
  333 + details={detailTableData}
  334 + updateDetails={updateDetails}
  335 + readOnly={readOnly}
  336 + />
  337 + <ProFormTextArea
  338 + readonly={readOnly}
  339 + name="comment"
  340 + label="备注"
  341 + placeholder="请输入备注"
  342 + />
  343 + </ModalForm>
  344 + )}
  345 + </Space>
  346 + </>
  347 + );
  348 +};
... ...