kts-component-invoice-operate 3.1.19 → 3.2.0

package/src/Invoice/ui/digtal/Stakeholder/index.less

@@ -0,0 +1,57 @@
+.kts-invoice-operate-invoice-digtal-stakeholder {
+
+    display: flex;
+
+    .digtal-stakeholder-expand-button{
+        cursor: pointer;
+    }
+
+    &>div {
+        border-right: 2px solid #9F613E;
+
+        &:nth-child(even) {
+            flex           : 1;
+            display        : flex;
+            flex-direction : column;
+            justify-content: end;
+        }
+
+        &:nth-child(odd) {
+            flex           : none;
+            text-align     : center;
+            color          : #9F613E;
+            display        : flex;
+            flex-direction : column;
+            justify-content: center;
+            justify-items  : center;
+            padding        : 0 4px;
+        }
+
+        &:last-child {
+            border-right: none;
+        }
+    }
+
+    .digtal-stakeholder-form {
+
+        padding: 20px 10px;
+
+        .ktsAnt3x-row.ktsAnt3x-form-item {
+            display      : flex;
+            margin-bottom: 0;
+
+            .ktsAnt3x-form-item-label {
+                flex       : none;
+                font-weight: 500;
+
+                label {
+                    color: #9F603D;
+                }
+            }
+
+            .ktsAnt3x-form-item-control-wrapper {
+                flex: 1;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,237 @@
+
+import React from "react";
+import Icon from '@ant-design/icons';
+import { decorator } from "grey-react-box";
+import { Form } from "kts-components-antd-x3";
+import { Button, Col, Input, InputProps, Row } from 'kts-xui'
+import { FormComponentProps } from "kts-components-antd-x3/lib/form";
+import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
+import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
+import Invoice from "../../../../Invoice";
+import './index.less';
+
+const RULES = {
+    companyName: (label: string) => [
+        { required: true, message: `${label}必填` },
+        { max: 300, message: `${label}内容超长` },
+        { pattern: /^([A-Za-z（）\u4e00-\u9fa5])*$/g, message: `${label}仅能中文、英文、括号` }
+    ],
+    taxId: (label: string) => [
+        { max: 26, message: `${label}内容超长` },
+        { pattern: /^([A-Z0-9])*$/g, message: `${label}仅能数字、英文大写` }
+    ],
+    bankName: (label: string) => [
+        { max: 120, message: `${label}内容超长` },
+        { pattern: /^([\u4e00-\u9fa5])*$/g, message: `${label}仅能中文` }
+    ],
+    bankAccount: (label: string) => [
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^([0-9])*$/g, message: `${label}仅能数字` }
+    ]
+}
+
+const formatCompanyName = (e: any) => {
+    const value = e?.target?.value;
+    if (value) {
+        return value.replace('(', '（').replace(')', '）').replace(' ', '');
+    }
+}
+
+export interface IStakeholder {
+}
+
+/** 干系人 */
+export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
+
+    const { form } = props;
+
+    const [isExpand, setExpand] = React.useState(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(() => model === 'readOnly', [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);
+
+    return (
+        <div className="kts-invoice-operate-invoice-digtal-stakeholder" >
+            <div>
+                {'购买方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <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('购买方名称')),
+                                    getValueFromEvent: formatCompanyName
+                                })(<MyInput readOnly={isReadOnly('buyerName')} placeholder="请输入" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={24} >
+                            <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
+                                {getFieldDecorator('buyerTaxId', {
+                                    rules: getRules('buyerTaxId', [{ required: true, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
+                                })(<MyInput readOnly={isReadOnly('buyerTaxId')} placeholder="请输入" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                        {
+                            !readOnly && isExpand && (
+                                <>
+                                    <Col span={15} >
+                                        <Form.Item label='购买方地址' colon={false}>
+                                            {getFieldDecorator('buyerAddress', {
+                                                rules: getRules('buyerAddress', [{ max: 300, message: '购买方地址内容超长' }])
+                                            })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入" autoComplete="off" />)}
+                                        </Form.Item>
+                                    </Col>
+
+                                    <Col span={9} >
+                                        <Form.Item label='电话' colon={false}>
+                                            {getFieldDecorator('buyerPhone', {
+                                                rules: getRules('buyerPhone', [{ max: 60, message: '购买方电话内容超长' }])
+                                            })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入" autoComplete="off" />)}
+                                        </Form.Item>
+                                    </Col>
+
+                                    <Col span={12} >
+                                        <Form.Item label='购买方开户银行' colon={false}>
+                                            {getFieldDecorator('buyerBank', {
+                                                rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
+                                            })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入" autoComplete="off" />)}
+                                        </Form.Item>
+                                    </Col>
+
+                                    <Col span={12} >
+                                        <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>
+                {'销售方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <div>
+                {
+                    !readOnly &&
+                    <div style={{ marginTop: 20 }} >
+                        <Button type="link" >查看当前可用授信额度</Button>
+                    </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>
+                        {
+                            !readOnly && isExpand && (
+                                <>
+                                    <Col span={15} >
+                                        <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={9} >
+                                        <Form.Item label='电话' colon={false}>
+                                            {getFieldDecorator('sellerPhone', {
+                                                rules: getRules('sellerPhone', [
+                                                    { required: true, message: '销售方电话必填' },
+                                                    { max: 60, message: '销售方电话内容超长' }
+                                                ])
+                                            })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入" autoComplete="off" />)}
+                                        </Form.Item>
+                                    </Col>
+
+                                    <Col span={12} >
+                                        <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} >
+                                        <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>
+    )
+})
+
+class MyInput extends React.Component<InputProps>{
+    render() {
+        const props = this.props;
+        if (props.readOnly) {
+            return <span>{props.value}</span>
+        } else {
+            return <Input {...props} />
+        }
+    }
+}

package/src/Invoice/ui/digtal/Stakeholder/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/Stakeholder/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/InvoiceTypeModal/_test/easiest/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InvoiceTypeModal } from '../../..';
+import { Button } from 'kts-xui';
+
+export default () => {
+
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <>
+            <Button onClick={() => { setOpen(true) }} >打开</Button>
+            <InvoiceTypeModal
+                open={open}
+                disableds={['business']}
+                onOk={e => console.log(e)}
+                onCancel={() => { setOpen(false) }}
+                defaultBusiness='1'
+                defaultInvoiceType='1'
+                businessOptions={[
+                    { label: '成品油', value: '1' }
+                ]}
+                invoiceTypeOptions={[
+                    { label: '类型1', value: '1' },
+                    { label: '类型2', value: '2' },
+                    { label: '类型3', value: '3' },
+                    { label: '类型4', value: '4' },
+                    { label: '类型5', value: '5' },
+                ]}
+            />
+        </>
+    )
+};

package/src/InvoiceTypeModal/index.less

@@ -0,0 +1,8 @@
+.goods-list-digtal-reselect-invoice-typeModal-radio {
+  width  : 100%;
+  display: flex !important; 
+
+  &>label {
+    flex: 1;
+  }
+}

package/src/InvoiceTypeModal/index.md

@@ -0,0 +1,6 @@
+# InvoiceTypeModal
+
+## 简单用法
+<code src="./_test/easiest/index.tsx" ></code>
+
+<API name="API" exports='["default"]' src="./index.tsx" ></API>

package/src/InvoiceTypeModal/index.tsx

@@ -0,0 +1,123 @@
+
+import React from "react";
+import { Col, Form, Modal, Radio, Row, Select } from "kts-xui";
+import { DefaultOptionType } from "kts-components-antd-x4/lib/select";
+import './index.less';
+
+export interface IFormValues {
+
+    /** 开票种类 */
+    billingType: 'digital' | 'taxation';
+
+    /** 特定业务 */
+    business: any;
+
+    /** 选择票类 */
+    invoiceType: any;
+}
+
+export interface IInvoiceTypeModalProps {
+
+    /** 窗口标题 */
+    modalTitle?: string;
+
+    /** 是否开启 */
+    open?: boolean;
+
+    /** 点击了确认 */
+    onOk?: (values: IFormValues) => void;
+
+    /** 点击了取消 */
+    onCancel?: () => void;
+
+    /** 禁用列表 */
+    disableds?: ('billingType' | 'invoiceType' | 'business')[];
+
+    /** 选择票类 选项 */
+    invoiceTypeOptions?: DefaultOptionType[];
+
+    /** 特定业务 选项 */
+    businessOptions?: DefaultOptionType[];
+
+    /** 票类默认值 */
+    defaultInvoiceType?: any;
+
+    /** 特定业务默认值 */
+    defaultBusiness?: any;
+
+    /** 开票种类 默认值 */
+    defaultBillingType?: 'digital' | 'taxation';
+}
+
+export default function InvoiceTypeModal(props: IInvoiceTypeModalProps) {
+
+    const { disableds = [] } = props;
+
+    const [form] = Form.useForm<IFormValues>();
+
+    const onConfirm = React.useCallback(async () => {
+        const values = await form.validateFields();
+        props.onOk && props.onOk(values);
+    }, [props.onOk])
+
+    React.useEffect(() => {
+        if (props.open) {
+            form.resetFields();
+            form.setFieldsValue({
+                billingType: props.defaultBillingType || 'digital',
+                invoiceType: props.defaultInvoiceType,
+                business: props.defaultBusiness,
+            })
+        }
+    }, [props.open, props.defaultBillingType, props.defaultBusiness, props.defaultInvoiceType, form])
+
+    return (
+        <Modal
+            title={props.modalTitle || "选择开具信息"}
+            open={props.open}
+            onOk={onConfirm}
+            onCancel={props.onCancel}
+            okText='确定'
+            cancelText='取消'
+        >
+            <Form form={form} layout="vertical" style={{ paddingTop: 20 }} >
+                <Row gutter={[16, 16]}>
+                    <Col span={24} >
+                        <Form.Item name='billingType' >
+                            <Radio.Group
+                                size='large'
+                                className="goods-list-digtal-reselect-invoice-typeModal-radio"
+                                optionType="button"
+                                disabled={disableds.indexOf('billingType') >= 0}
+                                options={[
+                                    { label: '数电发票', value: 'digital' },
+                                    { label: '税控发票', value: 'taxation' },
+                                ]}
+                            />
+                        </Form.Item>
+                    </Col>
+
+                    <Col span={12} >
+                        <Form.Item name='invoiceType' label="选择票类" >
+                            <Select
+                                size='large'
+                                disabled={disableds.indexOf('invoiceType') >= 0}
+                                options={props.invoiceTypeOptions}
+                            />
+                        </Form.Item>
+                    </Col>
+
+                    <Col span={12} >
+                        <Form.Item name='business' label="特定业务">
+                            <Select
+                                size='large'
+                                disabled={disableds.indexOf('business') >= 0}
+                                options={props.businessOptions}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Modal>
+    )
+}

package/src/index.ts

@@ -1,6 +1,9 @@
-
-import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
-
-export { default as Invoice } from './Invoice';
-export { default as InvoiceController } from './Invoice/InvoiceController';
-export type { default as IGood } from './Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood';
+
+import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
+
+export { default as Invoice } from './Invoice';
+export { default as InvoiceController } from './Invoice/InvoiceController';
+export type { default as IGood } from './Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood';
+
+export { default as InvoiceTypeModal } from './InvoiceTypeModal';
+export type { IInvoiceTypeModalProps } from './InvoiceTypeModal';

package/tsconfig.json

@@ -1,31 +1,31 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": "./",
-    "strict": true,
-    "paths": {
-      "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
-      "kts-component-invoice-operate": ["src/*"]
-    },
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "exclude": [
-    "node_modules",
-    "lib",
-    "es",
-    "dist",
-    "typings",
-    "**/__test__",
-    "test",
-    "docs",
-    "tests"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "kts-component-invoice-operate": ["src/*"]
+    },
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "node_modules",
+    "lib",
+    "es",
+    "dist",
+    "typings",
+    "**/__test__",
+    "test",
+    "docs",
+    "tests"
+  ]
+}

package/typings.d.ts

@@ -1,3 +1,3 @@
-declare module '*.css';
-declare module '*.less';
-declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.svg';