kts-component-invoice-operate 3.2.30 → 3.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "3.2.30",
+  "version": "3.2.32",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/Invoice/_test/retrieveData/index.tsx

@@ -16,7 +16,7 @@ export default () => {
   return (
     <div>
       <Button onClick={onClick} style={{ marginBottom: 10 }}>获取数据</Button>
-      <Invoice controller={controller}/>
+      <Invoice invoiceType='digtal' controller={controller}/>
     </div>
   );
 };

package/src/Invoice/ui/default/GoodsList/hook/useColumns/index.tsx

@@ -80,13 +80,13 @@ export default (form: WrappedFormUtils) => {
   /** 表头 */
   const columns = React.useMemo(() => {
     return [
-      // {
-      //   title: ' ',
-      //   key: 'drag',
-      //   width: 40,
-      //   align: 'center',
-      //   render: (_: any, record: IGood) => <Drag record={record} />
-      // },
+      {
+        title: ' ',
+        key: 'drag',
+        width: 40,
+        align: 'center',
+        render: (_: any, record: IGood) => <Drag record={record} />
+      },
       {
         title: '序号',
         key: 'serialNo',

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Drag/index.less

@@ -1,3 +1,21 @@
 .kts-invoice-operate-goods-list-itemName-drag {
   cursor: all-scroll;
+
+
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-div {
+  z-index       : 999;
+  border        : 1px solid #E6E6E6;
+  width         : 400px;
+  height        : 32px;
+  display       : flex;
+  gap           : 10px;
+  align-items   : center;
+  position      : fixed;
+  padding       : 0 20px;
+  top           : 100px;
+  background    : #fff;
+  pointer-events: none;
+  opacity       : 0.4;
 }

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Drag/index.tsx

@@ -4,9 +4,10 @@ import Icon from '@ant-design/icons';
 import { ReactComponent as I001Svg } from './svg/I001.svg';
 import { Button } from "kts-components-antd-x3";
 import { IGood, Invoice } from '../../../../../../../..';
+import mounting from "../../../../../../../tools/mounting";
+import { LineAttributeType } from "../../../../../../../InvoiceController";
 import './index.less';
 
-
 export interface IDragProps {
     record: IGood
 }
@@ -19,18 +20,121 @@ export default function Drag(props: IDragProps) {
 
     const editGood = controller.useMemo(s => s.goodsListState.editGood, []);
 
-    const current = controller.useMemo(s => s.goodsListState.drag.current, []);
-
     const disabled = React.useMemo(() => !!editGood, [editGood]);
 
     const onMouseDown = React.useCallback(() => {
         if (!controller || !record) return;
         controller.run(async s => s.goodsListState.drag.current = record.$index);
-        window.addEventListener('mouseup', onMouseup);
 
+        const rowList = window.document.querySelectorAll<HTMLDivElement>('.kts-invoice-operate-goods-list');
+
+        const currentGood = controller.state.goodsListState.goodsList.filter(e => e.$index === record.$index)[0];
+        mounting(<DragDiv {...currentGood} />)
+
+        // 监听移动
+        rowList.forEach(e => { e.addEventListener('mouseover', onMouseover) });
+        function onMouseover(e: MouseEvent) {
+            controller.run(async s => {
+                const container = s.goodsListState.drag.container = getRow(e.target)?.dataset?.rowKey;
+                if (!container) return;
+
+                // 不可以插入自己
+                if (container === s.goodsListState.drag.current) {
+                    s.goodsListState.drag.container = undefined;
+                    return;
+                }
+
+                const currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current);
+                if (!currentGood) return;
+
+                const row = s.goodsListState.goodsMap.get(container);
+                if (!row) return;
+
+                // 折扣行 不可以插入 自己的被折扣行
+                if (currentGood.lineAttribute === LineAttributeType.折扣行) {
+                    const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
+                    const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
+                    if (currentIndex - 1 === containerIndex) {
+                        s.goodsListState.drag.container = undefined;
+                        return;
+                    }
+                }
+
+                // 被折扣行 不可以插入 自己的折扣行
+                if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
+                    const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
+                    const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
+                    if (currentIndex + 1 === containerIndex) {
+                        s.goodsListState.drag.container = undefined;
+                        return;
+                    }
+                }
+
+                // 折扣行 拖动的 相当于 自己的 被折扣行
+                if (row.lineAttribute === LineAttributeType.折扣行) {
+                    const t = s.goodsListState.goodsList.map(e => e.$index).indexOf(container) - 1;
+                    s.goodsListState.drag.container = s.goodsListState.goodsList[t].$index;
+                }
+            });
+
+
+            const getRow = (t: any): any => {
+                try {
+                    if (t.localName === 'tr') {
+                        return t;
+                    } else {
+                        return getRow(t.parentNode);
+                    }
+                } catch (error) {
+                    return undefined;
+                }
+            }
+        }
+
+        // 放开鼠标
+        window.addEventListener('mouseup', onMouseup);
         function onMouseup() {
+            insert();
             controller.run(async s => s.goodsListState.drag.current = undefined);
             window.removeEventListener('mouseup', onMouseup);
+            rowList.forEach(e => { e.removeEventListener('mouseover', onMouseover) });
+            // window.document.body.removeChild(rowDiv);
+        }
+
+        // 开始插入
+        function insert() {
+            mounting(<></>);
+            controller.run(async s => {
+                const { container, current } = s.goodsListState.drag;
+                if (!container || !current) return;
+                if (container !== current) {
+                    const goodsList = s.goodsListState.goodsList;
+                    const goodsMap = s.goodsListState.goodsMap;
+                    const currentGood = goodsList.filter(e => e.$index === current)[0];
+                    const currentIndex = goodsList.map(e => e.$index).indexOf(current);
+
+                    /** 需要移动的货品列表 */
+                    let moveGoods: string[] = [current];
+                    if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
+                        moveGoods = [current, goodsList[currentIndex + 1].$index];
+                    } else if (currentGood.lineAttribute === LineAttributeType.折扣行) {
+                        moveGoods = [goodsList[currentIndex - 1].$index, current];
+                    }
+
+                    (() => {
+                        const g = s.goodsListState.goodsList.filter(e => moveGoods.indexOf(e.$index) < 0);
+                        const t = g.map(e => e.$index).indexOf(container);
+                        const m = moveGoods.map(e => goodsMap.get(e)).filter(e => !!e) as IGood[];
+                        s.goodsListState.goodsList = (g.splice.apply(g, [t, 0, ...m]), g);
+                    })()
+
+                    s.goodsListState.goodsMap = new Map();
+                    s.goodsListState.goodsList.forEach(e => { s.goodsListState.goodsMap.set(e.$index, e) });
+                }
+
+                s.goodsListState.drag.container = undefined;
+                s.goodsListState.drag.current = undefined;
+            })
         }
     }, [controller, record])
 
@@ -46,4 +150,39 @@ export default function Drag(props: IDragProps) {
             <Icon component={I001Svg} />
         </Button>
     )
+}
+
+function DragDiv(props: IGood) {
+
+    const [x, setX] = React.useState(0);
+    const [y, setY] = React.useState(-110);
+
+    const div = React.useMemo(() => window.document.querySelector(`[data-row-key="${props.$index}"]`), [props.$index])
+
+    // 初始化位置
+    React.useEffect(() => {
+        if (!div) return;
+        const rect = div.getBoundingClientRect();
+        setX(rect.left + 135);
+        setY(rect.top);
+    }, [div])
+
+    // 移动事件
+    React.useEffect(() => {
+
+        function onMousemove(e: MouseEvent) { setY(e.clientY - 15) };
+
+        window.addEventListener('mousemove', onMousemove);
+        return () => {
+            window.removeEventListener('mousemove', onMousemove);
+        }
+    })
+
+    return (
+        <div className="kts-invoice-operate-goods-list-itemName-drag-div" style={{ top: y, left: x }} >
+            <span>{props.itemName}</span>
+            <span>{props.itemModelName}</span>
+            <span>{props.unit}</span>
+        </div>
+    )
 }

package/src/Invoice/ui/default/GoodsList/ui/TableRow/index.less

@@ -0,0 +1,14 @@
+.kts-invoice-operate-goods-list-itemName-drag-container {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    top       : 0;
+    z-index   : 9999;
+  }
+}

package/src/Invoice/ui/default/GoodsList/ui/TableRow/index.tsx

@@ -2,15 +2,24 @@ import React from "react";
 import Invoice from '../../../../..';
 import { LineAttributeType } from '../../../../../InvoiceController'
 import classnames from 'classnames'
+import './index.less';
 
 export default function TableRow(props: any) {
 
+    const rowKey = props['data-row-key']
+
     const controller = Invoice.useInvoiceController();
 
     const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
 
+    const current = controller.useMemo(s => s.goodsListState.drag.current, [])
+
+    const container = controller.useMemo(s => s.goodsListState.drag.container, [])
+
+    const good = React.useMemo(() => goodsMap?.get(rowKey), [rowKey, goodsMap])
+
     const discount = React.useMemo(() => {
-        const i = goodsMap.get(props['data-row-key']);
+        const i = good;
         if (!i) return undefined;
 
         if (i.lineAttribute === LineAttributeType.折扣行) {
@@ -20,9 +29,19 @@ export default function TableRow(props: any) {
         } else {
             return undefined;
         }
-    }, [props['data-row-key'], goodsMap])
+    }, [good, goodsMap])
 
     return (
-        <tr {...props} className={classnames(props.className, discount)} />
+        rowKey === current && current
+            ? (
+                <tr style={{ height: 32.67, borderBottom: '1px solid #E6E6E6', position: 'relative' }} >
+                    <div style={{ height: 1, width: '100%', background: '#E6E6E6', position: 'absolute', bottom: 0 }} />
+                </tr>
+            ) : (
+                <tr
+                    {...props}
+                    className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : undefined)}
+                />
+            )
     )
 }

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/index.tsx

@@ -19,6 +19,7 @@ import {
   onChangeTaxRate,
   onChangeItemName,
 } from './autoFillFn';
+import Drag from './ui/Drag';
 
 export default (form: WrappedFormUtils) => {
   const { getFieldDecorator, getFieldValue } = form;
@@ -76,6 +77,13 @@ export default (form: WrappedFormUtils) => {
   /** 表头 */
   const columns = React.useMemo(() => {
     return [
+      {
+        title: ' ',
+        key: 'drag',
+        width: 40,
+        align: 'center',
+        render: (_: any, record: IGood) => <Drag record={record} />
+      },
       {
         title: '序号',
         key: 'serialNo',

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/Drag/index.less

@@ -0,0 +1,21 @@
+.kts-invoice-operate-goods-list-itemName-drag {
+  cursor: all-scroll;
+
+
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-div {
+  z-index       : 999;
+  border        : 1px solid #E6E6E6;
+  width         : 400px;
+  height        : 50px;
+  display       : flex;
+  gap           : 10px;
+  align-items   : center;
+  position      : fixed;
+  padding       : 0 20px;
+  top           : 100px;
+  background    : #fff;
+  pointer-events: none;
+  opacity       : 0.4;
+}

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/Drag/index.tsx

@@ -0,0 +1,187 @@
+
+import React from "react";
+import Icon from '@ant-design/icons';
+import { ReactComponent as I001Svg } from './svg/I001.svg';
+import { Button } from "kts-components-antd-x3";
+import { IGood, Invoice } from '../../../../../../../..';
+import mounting from "../../../../../../../tools/mounting";
+import { LineAttributeType } from "../../../../../../../InvoiceController";
+import './index.less';
+
+export interface IDragProps {
+    record: IGood
+}
+
+export default function Drag(props: IDragProps) {
+
+    const { record } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const editGood = controller.useMemo(s => s.goodsListState.editGood, []);
+
+    const disabled = React.useMemo(() => !!editGood, [editGood]);
+
+    const onMouseDown = React.useCallback(() => {
+        if (!controller || !record) return;
+        controller.run(async s => s.goodsListState.drag.current = record.$index);
+
+        const rowList = window.document.querySelectorAll<HTMLDivElement>('.kts-invoice-operate-goods-list-digtal');
+
+        const currentGood = controller.state.goodsListState.goodsList.filter(e => e.$index === record.$index)[0];
+        mounting(<DragDiv {...currentGood} />)
+
+        // 监听移动
+        rowList.forEach(e => { e.addEventListener('mouseover', onMouseover) });
+        function onMouseover(e: MouseEvent) {
+            controller.run(async s => {
+                const container = s.goodsListState.drag.container = getRow(e.target)?.dataset?.rowKey;
+                if (!container) return;
+
+                // 不可以插入自己
+                if (container === s.goodsListState.drag.current) {
+                    s.goodsListState.drag.container = undefined;
+                    return;
+                }
+
+                const currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current);
+                if (!currentGood) return;
+
+                const row = s.goodsListState.goodsMap.get(container);
+                if (!row) return;
+
+                // 折扣行 不可以插入 自己的被折扣行
+                if (currentGood.lineAttribute === LineAttributeType.折扣行) {
+                    const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
+                    const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
+                    if (currentIndex - 1 === containerIndex) {
+                        s.goodsListState.drag.container = undefined;
+                        return;
+                    }
+                }
+
+                // 被折扣行 不可以插入 自己的折扣行
+                if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
+                    const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
+                    const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
+                    if (currentIndex + 1 === containerIndex) {
+                        s.goodsListState.drag.container = undefined;
+                        return;
+                    }
+                }
+
+                // 折扣行 拖动的 相当于 自己的 被折扣行
+                if (row.lineAttribute === LineAttributeType.折扣行) {
+                    const t = s.goodsListState.goodsList.map(e => e.$index).indexOf(container) - 1;
+                    s.goodsListState.drag.container = s.goodsListState.goodsList[t].$index;
+                }
+            });
+
+            const getRow = (t: any): any => {
+                try {
+                    if (t.localName === 'tr') {
+                        return t;
+                    } else {
+                        return getRow(t.parentNode);
+                    }
+                } catch (error) {
+                    return undefined
+                }
+            }
+        }
+
+        // 放开鼠标
+        window.addEventListener('mouseup', onMouseup);
+        function onMouseup() {
+            insert();
+            controller.run(async s => s.goodsListState.drag.current = undefined);
+            window.removeEventListener('mouseup', onMouseup);
+            rowList.forEach(e => { e.removeEventListener('mouseover', onMouseover) });
+            // window.document.body.removeChild(rowDiv);
+        }
+
+        // 开始插入
+        function insert() {
+            mounting(<></>);
+            controller.run(async s => {
+                const { container, current } = s.goodsListState.drag;
+                if (!container || !current) return;
+                if (container !== current) {
+                    const goodsList = s.goodsListState.goodsList;
+                    const goodsMap = s.goodsListState.goodsMap;
+                    const currentGood = goodsList.filter(e => e.$index === current)[0];
+                    const currentIndex = goodsList.map(e => e.$index).indexOf(current);
+
+                    /** 需要移动的货品列表 */
+                    let moveGoods: string[] = [current];
+                    if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
+                        moveGoods = [current, goodsList[currentIndex + 1].$index];
+                    } else if (currentGood.lineAttribute === LineAttributeType.折扣行) {
+                        moveGoods = [goodsList[currentIndex - 1].$index, current];
+                    }
+
+                    (() => {
+                        const g = s.goodsListState.goodsList.filter(e => moveGoods.indexOf(e.$index) < 0);
+                        const t = g.map(e => e.$index).indexOf(container);
+                        const m = moveGoods.map(e => goodsMap.get(e)).filter(e => !!e) as IGood[];
+                        s.goodsListState.goodsList = (g.splice.apply(g, [t, 0, ...m]), g);
+                    })()
+
+                    s.goodsListState.goodsMap = new Map();
+                    s.goodsListState.goodsList.forEach(e => { s.goodsListState.goodsMap.set(e.$index, e) });
+                }
+
+                s.goodsListState.drag.container = undefined;
+                s.goodsListState.drag.current = undefined;
+            })
+        }
+    }, [controller, record])
+
+    return (
+        <Button
+            type='link'
+            style={{ padding: 0 }}
+            disabled={disabled}
+            onMouseDown={onMouseDown}
+            onClick={e => { e.stopPropagation() }}
+            className={"kts-invoice-operate-goods-list-itemName-drag"}
+        >
+            <Icon component={I001Svg} />
+        </Button>
+    )
+}
+
+function DragDiv(props: IGood) {
+
+    const [x, setX] = React.useState(0);
+    const [y, setY] = React.useState(-110);
+
+    const div = React.useMemo(() => window.document.querySelector(`[data-row-key="${props.$index}"]`), [props.$index])
+
+    // 初始化位置
+    React.useEffect(() => {
+        if (!div) return;
+        const rect = div.getBoundingClientRect();
+        setX(rect.left + 135);
+        setY(rect.top);
+    }, [div])
+
+    // 移动事件
+    React.useEffect(() => {
+
+        function onMousemove(e: MouseEvent) { setY(e.clientY - 25) };
+
+        window.addEventListener('mousemove', onMousemove);
+        return () => {
+            window.removeEventListener('mousemove', onMousemove);
+        }
+    })
+
+    return (
+        <div className="kts-invoice-operate-goods-list-itemName-drag-div" style={{ top: y, left: x }} >
+            <span>{props.itemName}</span>
+            <span>{props.itemModelName}</span>
+            <span>{props.unit}</span>
+        </div>
+    )
+}

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/Drag/svg/I001.svg

@@ -0,0 +1 @@
+<svg t="1694426134787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4024" width="200" height="200"><path d="M304.87387614-5.81530905h123.75785957v123.75785958H304.87387614V-5.81530905z m281.27727647 0h123.75785836v123.75785958h-123.75785836V-5.81530905zM304.87387614 286.75034075h123.75785957v123.75785835H304.87387614V286.75034075z m281.27727647 0h123.75785836v123.75785835h-123.75785836V286.75034075zM304.87387614 579.21242666h123.75785957v123.75785957H304.87387614v-123.75785957z m281.27727647 0h123.75785836v123.75785957h-123.75785836v-123.75785957zM304.87387614 871.82985838h123.75785957v123.75785837H304.87387614v-123.75785837z m281.27727647 0h123.75785836v123.75785837h-123.75785836v-123.75785837z" p-id="4025"></path></svg>

package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.less

@@ -0,0 +1,14 @@
+.kts-invoice-operate-goods-list-itemName-drag-container {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    top       : 0;
+    z-index   : 9999;
+  }
+}

package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.tsx

@@ -2,15 +2,22 @@ import React from "react";
 import Invoice from '../../../../..';
 import { LineAttributeType } from '../../../../../InvoiceController'
 import classnames from 'classnames'
+import './index.less'
 
 export default function TableRow(props: any) {
 
+    const rowKey = props['data-row-key']
+
     const controller = Invoice.useInvoiceController();
 
     const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
 
+    const current = controller.useMemo(s => s.goodsListState.drag.current, [])
+
+    const container = controller.useMemo(s => s.goodsListState.drag.container, [])
+
     const discount = React.useMemo(() => {
-        const i = goodsMap.get(props['data-row-key']);
+        const i = goodsMap.get(rowKey);
         if (!i) return undefined;
 
         if (i.lineAttribute === LineAttributeType.折扣行) {
@@ -20,9 +27,15 @@ export default function TableRow(props: any) {
         } else {
             return undefined;
         }
-    }, [props['data-row-key'], goodsMap])
+    }, [rowKey, goodsMap])
+
 
-    return (
-        <tr {...props} className={classnames(props.className, discount)} />
-    )
+    return rowKey === current && current
+        ? (
+            <tr style={{ height: 50, position: 'relative' }} >
+                <div style={{ height: 0.5, width: '100%', background: '#E6E6E6', position: 'absolute', bottom: 0 }} />
+            </tr>
+        ) : (
+            <tr {...props} className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : '')} />
+        )
 }

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

@@ -1,9 +1,10 @@
 
-import React, { ChangeEvent } from 'react';
+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, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
+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';
@@ -112,6 +113,15 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
             <div>
                 <Form className="digtal-stakeholder-form" >
                     <Row gutter={[16, 0]}>
+                        <Col span={24} >
+                            <Form.Item label='购买方信息' colon={false}>
+                                {getFieldDecorator('naturalPersonFlag', {
+                                })(
+                                    <NaturalPersonFlag readOnly={isReadOnly('naturalPersonFlag')} />
+                                )}
+                            </Form.Item>
+                        </Col>
+
                         <Col span={24} >
                             <Form.Item label='名称' colon={false}>
                                 {getFieldDecorator('buyerName', {
@@ -274,6 +284,34 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     )
 })
 
+function NaturalPersonFlag(props: {
+    value?: 0 | 1,
+    onChange?: (e: 0 | 1) => void
+    readOnly?: boolean;
+}) {
+
+    const [value, setValue] = React.useState(props.value || 0);
+
+    const onChange = React.useCallback((e: CheckboxChangeEvent) => {
+        if (props.readOnly) return;
+        setValue(e.target.checked ? 1 : 0);
+        props.onChange && props.onChange(e.target.checked ? 1 : 0);
+    }, [props.onChange, props.readOnly])
+
+    React.useEffect(() => {
+        setValue(props.value || 0)
+    }, [props.value])
+
+    return (
+        <Checkbox
+            disabled={props.readOnly}
+            checked={value === 1}
+            onChange={onChange}
+        >
+            是否开票给自然人
+        </Checkbox>
+    )
+}
 
 function BuyerNameInput(props: InputProps & { fieldName: string; myform: WrappedFormUtils<any> }) {
 
@@ -337,7 +375,6 @@ class MyInput extends React.Component<InputProps>{
     }
 }
 
-
 class Discontinue {
 
     private static timer: any;
@@ -347,3 +384,4 @@ class Discontinue {
         Discontinue.timer = setTimeout(resolve, interval);
     })
 }
+