kts-component-invoice-operate 3.2.155 → 3.2.157

package/src/Invoice/ui/digtal/StakeFarmerholder/index.tsx

@@ -0,0 +1,398 @@
+
+import React from 'react';
+import Icon from '@ant-design/icons';
+import { decorator } from "grey-react-box";
+import { Form } from "kts-components-antd-x3";
+import { AutoComplete, Button, Checkbox, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
+import { CheckboxChangeEvent } from 'kts-components-antd-x4/lib/checkbox';
+import { FormComponentProps } from "kts-components-antd-x3/lib/form";
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
+import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
+import { ReactComponent as PlusSvg } from './svg/plus.svg'
+import InvoiceController from "../../../InvoiceController";
+import Invoice from "../../..";
+import './index.less';
+import classNames from 'classnames';
+
+const RULES = {
+    companyName: (label: string) => [
+        { required: true, message: `${label}必填` },
+        { max: 100, message: `${label}内容超长` }
+    ],
+    taxId: (label: string) => [
+        { max: 20, message: `${label}内容超长` },
+        { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
+    ],
+    buyerTelPhone: (label: string) => [
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+    ],
+    sellerTelPhone: (label: string) => [
+        { required: true, message: `${label}必填` },
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+    ],
+    bankName: (label: string) => [
+        { max: 100, message: `${label}内容超长` }
+    ],
+    bankAccount: (label: string) => [
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^([0-9a-zA-Z-\s])*$/g, message: `${label}仅能数字、字母、-、空格` }
+    ]
+}
+
+const formatCompanyName = (e: any) => {
+    const value = e?.target?.value;
+    if (value) {
+        return value.replace('(', '（').replace(')', '）').replace(' ', '');
+    }
+}
+
+export interface IStakeholder {
+
+    /** 是否显示导入按钮 */
+    isShowImportButton?: boolean;
+
+    /** 点击了 */
+    onClickImportButton?: (e: InvoiceController) => void
+
+    /** 查看当前可用授信额度 */
+    lineCredit?: React.ReactNode;
+
+    /** 票种类型 */
+    isVatNormal?: boolean;
+
+    /** 是否可以选择自然人 */
+    isNaturalPerson?: boolean;
+
+    /** 是否展开 */
+    isExpand?: boolean;
+}
+
+/** 农产品干系人 */
+export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
+
+    const { form, isShowImportButton, onClickImportButton, isVatNormal = false } = props;
+
+    const [isExpand, setExpand] = React.useState(typeof props.isExpand === 'boolean' ? props.isExpand : true);
+
+    const { getFieldDecorator } = form;
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, []);
+
+    const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);
+
+    const rulesMap = controller.useMemo(s => s.stakeholder.rulesMap || {}, []);
+
+    const readOnly = React.useMemo(() => {
+        if (model === 'readOnly') return true;
+        if (model === 'prefab') return true;
+        return false;
+    }, [model]);
+
+    const onExpand = React.useCallback(() => { setExpand(e => !e) }, []);
+
+    const isReadOnly = React.useCallback(field => readOnly || disableds.indexOf(field) >= 0, [disableds, readOnly]);
+
+    const getRules = React.useCallback((field, defaultRules) => {
+        if (isReadOnly(field)) return [];
+        return rulesMap[field] || defaultRules;
+    }, [rulesMap, isReadOnly, isReadOnly]);
+
+    controller.useForm('stakeholder', form);
+
+    // props.isExpand 变化的时候更新
+    React.useEffect(() => {
+        setExpand(typeof props.isExpand === 'boolean' ? props.isExpand : true);
+    }, [props.isExpand])
+
+    return (
+        <div className={classNames("kts-invoice-operate-invoice-digtal-stakeholder", { readOnly: readOnly })} >
+            <div>
+                {'销售方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <div>
+                <div style={{ marginTop: 20 }} className='natural-person-flag' >
+                    {
+                        props.isNaturalPerson === true &&
+                        <Form.Item colon={false}>
+                            {getFieldDecorator('naturalPersonFlag', {
+                            })(
+                                <NaturalPersonFlag readOnly={isReadOnly('naturalPersonFlag')} />
+                            )}
+                        </Form.Item>
+                    }
+                </div>
+                <Form className="digtal-stakeholder-form" >
+                    <Row gutter={[16, 0]}>
+                        <Col span={24} >
+                            <Form.Item label='名称' colon={false}>
+                                {getFieldDecorator('supplierName', {
+                                    rules: getRules('supplierName', RULES.companyName('销售方名称')),
+                                    getValueFromEvent: formatCompanyName
+                                })(<MyInput readOnly={isReadOnly('supplierName')} placeholder="请输入名称" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={24} >
+                            <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
+                                {getFieldDecorator('supplierTaxId', {
+                                    rules: getRules('supplierTaxId', [{ required: true, message: '销售方纳税人识别号必填' }, ...RULES.taxId('销售方纳税人识别号')])
+                                })(<MyInput readOnly={isReadOnly('supplierTaxId')} placeholder="请输入统一社会信用代码/纳税人识别号" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={12} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='销售方地址' colon={false}>
+                                {getFieldDecorator('sellerAddress', {
+                                    rules: getRules('sellerAddress', [{ max: 300, message: '销售方地址内容超长' }])
+                                })(<MyInput readOnly={isReadOnly('sellerAddress')} placeholder="请输入销售方地址" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={12} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='电话' colon={false} className='telephone' >
+                                {getFieldDecorator('sellerPhone', {
+                                    rules: getRules('sellerPhone', RULES.sellerTelPhone('销售方电话'))
+                                })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入电话" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={12} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='销售方开户银行' colon={false}>
+                                {getFieldDecorator('sellerBank', {
+                                    rules: getRules('sellerBank', RULES.bankName('销售方开户银行'))
+                                })(<MyInput readOnly={isReadOnly('sellerBank')} placeholder="请输入销售方开户银行" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={12} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='银行账号' colon={false}>
+                                {getFieldDecorator('sellerAccount', {
+                                    rules: getRules('sellerAccount', RULES.bankAccount('销售方银行账号'))
+                                })(<MyInput readOnly={isReadOnly('sellerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </div>
+            <div>
+                {'购买方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <div>
+                {
+                    !readOnly && props.lineCredit &&
+                    <div style={{ marginTop: 20 }} >
+                        <Tooltip trigger="click" title={props.lineCredit} >
+                            <Button type="link" style={{ padding: `0px 8px` }} >查看当前可用授信额度</Button>
+                        </Tooltip>
+                    </div>
+                }
+
+                <Form className="digtal-stakeholder-form" >
+                    <Row gutter={[16, 0]}>
+                        <Col span={24} >
+                            <Form.Item label='名称' colon={false}>
+                                {getFieldDecorator('buyerName', {
+                                    rules: getRules('buyerName', RULES.companyName('购买方名称')),
+                                })(
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerName'
+                                        readOnly={isReadOnly('buyerName')}
+                                        placeholder="请输入名称"
+                                        autoComplete="off"
+                                        suffix={
+                                            isShowImportButton === true &&
+                                            <Button
+                                                type='link'
+                                                style={{ padding: 0, width: 20, height: '100%' }}
+                                                icon={<Icon component={PlusSvg} />}
+                                                onClick={() => { onClickImportButton && onClickImportButton(controller) }}
+                                            />
+                                        }
+                                    />
+                                )}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={24} >
+                            <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
+                                {getFieldDecorator('buyerTaxId', {
+                                    rules: getRules('buyerTaxId', [{ required: !isVatNormal, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
+                                })(
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerTaxId'
+                                        readOnly={isReadOnly('buyerTaxId')}
+                                        placeholder="请输入统一社会信用代码/纳税人识别号"
+                                        autoComplete="off"
+                                    />
+                                )}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={14} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='购买方地址' colon={false}>
+                                {getFieldDecorator('buyerAddress', {
+                                    rules: getRules('buyerAddress', [{ max: 100, message: '购买方地址内容超长' }])
+                                })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入购买方地址" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={10} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='电话' colon={false} className='telephone'>
+                                {getFieldDecorator('buyerPhone', {
+                                    rules: getRules('buyerPhone', RULES.buyerTelPhone('购买方电话'))
+                                })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入电话" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={14} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='购买方开户银行' colon={false}>
+                                {getFieldDecorator('buyerBank', {
+                                    rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
+                                })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入购买方开户银行" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={10} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='银行账号' colon={false}>
+                                {getFieldDecorator('buyerAccount', {
+                                    rules: getRules('buyerAccount', RULES.bankAccount('购买方银行账号'))
+                                })(<MyInput readOnly={isReadOnly('buyerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </div>
+
+        </div>
+    )
+})
+
+function NaturalPersonFlag(props: {
+    // NATURAL("自然人"),  COMPANY("非自然人");
+    value?: 'COMPANY' | 'NATURAL',
+    onChange?: (e: 'COMPANY' | 'NATURAL') => void
+    readOnly?: boolean;
+}) {
+
+    const [value, setValue] = React.useState(props.value || 'COMPANY');
+
+    const onChange = React.useCallback((e: CheckboxChangeEvent) => {
+        if (props.readOnly) return;
+        setValue(e.target.checked ? 'NATURAL' : 'COMPANY');
+        props.onChange && props.onChange(e.target.checked ? 'NATURAL' : 'COMPANY');
+    }, [props.onChange, props.readOnly])
+
+    React.useEffect(() => {
+        setValue(props.value || 'COMPANY')
+    }, [props.value])
+
+    return (
+        <Checkbox
+            disabled={props.readOnly}
+            checked={value === 'NATURAL'}
+            onChange={onChange}
+        >
+            是否开票给自然人
+        </Checkbox>
+    )
+}
+
+function BuyerNameInput(props: InputProps & { fieldName: string; myform: WrappedFormUtils<any> }) {
+
+    const { fieldName, myform: form } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const rootElement = controller.useMemo(s => s.rootElement, []);
+
+    const autoComplete = controller.useMemo(s => s.autoComplete, [])
+
+    const [options, setOptions] = React.useState<any[]>([])
+
+    const onChangeAutoComplete = React.useCallback(value => {
+        const record = options.filter(e => e[fieldName] === value)[0] as any;
+        if (!record || !form) return;
+
+        form.setFieldsValue(record);
+        setOptions([])
+    }, [options, fieldName, form])
+
+    const onSearch = React.useCallback(async (searchText: string) => {
+        await Discontinue.start();
+        try {
+            if (fieldName === 'buyerName') {
+                if (autoComplete.onBuyerNameSearch) {
+                    setOptions(await autoComplete.onBuyerNameSearch(searchText));
+                }
+            } else if (fieldName === 'buyerTaxId') {
+                if (autoComplete.onBuyerTaxIdSearch) {
+                    setOptions(await autoComplete.onBuyerTaxIdSearch(searchText));
+                }
+            }
+
+        } catch (error) {
+            setOptions([]);
+            throw error;
+        }
+    }, [autoComplete.onBuyerNameSearch, fieldName])
+
+    if (props.readOnly) return <span className='digtal-stakeholder-form-text'>{props.value}</span>;
+
+    return (
+        <AutoComplete
+            onSearch={onSearch}
+            options={options.map(e => ({ value: e[fieldName] }))}
+            onChange={onChangeAutoComplete}
+            value={props.value}
+            getPopupContainer={() => rootElement || document.body}
+            style={{ width: '100%' }}
+        >
+            <Input {...props} style={{ width: '100%', ...props.style }} />
+        </AutoComplete>
+    )
+}
+
+class MyInput extends React.Component<InputProps> {
+    render() {
+        const props = this.props;
+        if (props.readOnly) {
+            return <span className='digtal-stakeholder-form-text'>{props.value}</span>
+        } else {
+            return <Input {...props} />
+        }
+    }
+}
+
+class Discontinue {
+
+    private static timer: any;
+
+    static start = (interval = 200) => new Promise<void>(resolve => {
+        clearTimeout(Discontinue.timer);
+        Discontinue.timer = setTimeout(resolve, interval);
+    })
+}
+

package/src/Invoice/ui/digtal/StakeFarmerholder/svg/arrowDown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+  <path d="M2.94338 4.42663C3.03458 4.42662 3.12571 4.46481 3.19459 4.54096L5.99164 7.6327L8.78868 4.54096C8.92463 4.39067 9.14733 4.38824 9.28606 4.53554C9.4248 4.68285 9.42705 4.92408 9.29107 5.07437L6.24283 8.44378C6.17667 8.5169 6.08613 8.55811 5.99164 8.55811C5.89714 8.55811 5.80659 8.5169 5.74044 8.44378L2.69221 5.07437C2.55623 4.92408 2.55849 4.68285 2.69722 4.53554C2.76567 4.46287 2.85455 4.42665 2.94338 4.42663Z"/>
+</svg>

package/src/Invoice/ui/digtal/StakeFarmerholder/svg/arrowUp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
+  <path d="M9.55662 8.57337C9.46542 8.57338 9.37429 8.53519 9.30541 8.45904L6.50836 5.3673L3.71132 8.45904C3.57537 8.60933 3.35267 8.61176 3.21394 8.46446C3.0752 8.31715 3.07295 8.07592 3.20893 7.92563L6.25717 4.55622C6.32333 4.4831 6.41387 4.44189 6.50836 4.44189C6.60286 4.44189 6.69341 4.4831 6.75956 4.55622L9.80779 7.92563C9.94377 8.07592 9.94151 8.31715 9.80278 8.46446C9.73433 8.53713 9.64545 8.57335 9.55662 8.57337Z"/>
+</svg>

package/src/Invoice/ui/digtal/StakeFarmerholder/svg/plus.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
+  <g clip-path="url(#clip0_715_360)">
+    <path d="M8 14.5312C4.11687 14.5312 0.96875 11.3831 0.96875 7.5C0.96875 3.61687 4.11687 0.46875 8 0.46875C11.8831 0.46875 15.0312 3.61687 15.0312 7.5C15.0312 11.3831 11.8831 14.5312 8 14.5312ZM8 13.5938C11.3656 13.5938 14.0938 10.8656 14.0938 7.5C14.0938 4.13438 11.3656 1.40625 8 1.40625C4.63438 1.40625 1.90625 4.13438 1.90625 7.5C1.90625 10.8656 4.63438 13.5938 8 13.5938Z"/>
+    <path d="M4.25 7.96875C4.12568 7.96875 4.00645 7.91936 3.91854 7.83146C3.83064 7.74355 3.78125 7.62432 3.78125 7.5C3.78125 7.37568 3.83064 7.25645 3.91854 7.16854C4.00645 7.08064 4.12568 7.03125 4.25 7.03125H11.75C11.8743 7.03125 11.9935 7.08064 12.0815 7.16854C12.1694 7.25645 12.2188 7.37568 12.2188 7.5C12.2188 7.62432 12.1694 7.74355 12.0815 7.83146C11.9935 7.91936 11.8743 7.96875 11.75 7.96875H4.25Z"/>
+    <path d="M7.53125 3.75C7.53125 3.62568 7.58064 3.50645 7.66854 3.41854C7.75645 3.33064 7.87568 3.28125 8 3.28125C8.12432 3.28125 8.24355 3.33064 8.33146 3.41854C8.41936 3.50645 8.46875 3.62568 8.46875 3.75V11.25C8.46875 11.3743 8.41936 11.4935 8.33146 11.5815C8.24355 11.6694 8.12432 11.7188 8 11.7188C7.87568 11.7188 7.75645 11.6694 7.66854 11.5815C7.58064 11.4935 7.53125 11.3743 7.53125 11.25V3.75Z"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_715_360">
+      <rect width="15" height="15" transform="translate(0.5)"/>
+    </clipPath>
+  </defs>
+</svg>

package/docs-dist/static/I001.4ff48f20.svg

@@ -1 +0,0 @@
-<svg t="1719031046892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5456" width="200" height="200"><path d="M879.9725037 997.08776297H146.45475555c-67.23508148 0-122.2125037-54.97742222-122.2125037-122.21250372V141.23614815c0-67.23508148 54.97742222-122.2125037 122.2125037-122.2125037h733.63911112c67.23508148 0 122.2125037 54.97742222 122.2125037 122.2125037V874.87525925c0 67.11371852-54.97742222 122.2125037-122.33386667 122.21250372zM146.45475555 80.06921482c-36.65161482 0-61.16693333 24.39395555-61.16693333 61.16693333V874.87525925c0 36.65161482 24.39395555 61.16693333 61.16693333 61.16693334h733.63911112c36.65161482 0 61.16693333-24.39395555 61.16693333-61.16693334V141.23614815c0-36.65161482-24.39395555-61.16693333-61.16693333-61.16693333H146.45475555z m0 0" p-id="5457"></path><path d="M757.76 538.57848889h-489.09274075c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346667s12.25765925-30.58346667 30.58346666-30.58346667h489.09274075c18.32580741 0 30.58346667 12.25765925 30.58346667 30.58346667s-12.25765925 30.58346667-30.58346667 30.58346667z m0 0" p-id="5458"></path><path d="M513.21362963 783.12485925c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346666v-489.09274074c0-18.32580741 12.25765925-30.58346667 30.58346666-30.58346667s30.58346667 12.25765925 30.58346667 30.58346667v489.09274074c0 18.32580741-12.25765925 30.58346667-30.58346667 30.58346666z m0 0" p-id="5459"></path></svg>

package/docs-dist/static/I002.38b94da1.svg

@@ -1 +0,0 @@
-<svg t="1719031078613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5605" width="200" height="200"><path d="M879.9725037 997.08776297H146.45475555c-67.23508148 0-122.2125037-54.97742222-122.2125037-122.21250372V141.23614815c0-67.23508148 54.97742222-122.2125037 122.2125037-122.2125037h733.63911112c67.23508148 0 122.2125037 54.97742222 122.2125037 122.2125037V874.87525925c0 67.11371852-54.97742222 122.2125037-122.33386667 122.21250372zM146.45475555 80.06921482c-36.65161482 0-61.16693333 24.39395555-61.16693333 61.16693333V874.87525925c0 36.65161482 24.39395555 61.16693333 61.16693333 61.16693334h733.63911112c36.65161482 0 61.16693333-24.39395555 61.16693333-61.16693334V141.23614815c0-36.65161482-24.39395555-61.16693333-61.16693333-61.16693333H146.45475555z m0 0" p-id="5606"></path><path d="M757.76 538.57848889h-489.09274075c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346667s12.25765925-30.58346667 30.58346666-30.58346667h489.09274075c18.32580741 0 30.58346667 12.25765925 30.58346667 30.58346667s-12.25765925 30.58346667-30.58346667 30.58346667z m0 0" p-id="5607"></path></svg>