kts-component-invoice-operate 3.1.19 → 3.2.0

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

@@ -0,0 +1,132 @@
+
+import React from 'react';
+import { Form } from 'kts-components-antd-x3';
+import { decorator } from 'grey-react-box';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+import { Switch, Button, Input } from 'kts-xui';
+import TableVirtual from './ui/TableVirtual';
+import TableRow from './ui/TableRow';
+import AddRowButton from './ui/AddRowButton';
+import useColumns from './hook/useColumns';
+import useOnRow from './hook/useOnRow';
+import useDeduction from './hook/useDeduction';
+import useWindowClick from './hook/useWindowClick';
+import useRowSelection from './hook/useRowSelection';
+import Invoice from '../../..';
+
+import './index.less';
+
+export interface IGoodsListProps {
+
+    /** 扩展部分 */
+    menuExpansion?: React.ReactNode;
+
+    /** 产品最大数 */
+    goodMax?: number;
+
+    /** 扣除额 */
+    deduction?: number;
+
+    /** 是否能添加折扣行 */
+    isAddDiscount?: boolean;
+
+    /** 是否可以切换(含税/不含税)状态 */
+    isSwitchTax?: boolean;
+}
+
+/**
+ * 货物列表
+ */
+export default class GoodsList extends React.Component<IGoodsListProps>{
+    render() {
+        return <Main {...this.props} />
+    }
+}
+
+const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Form.create())(props => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
+
+    const isprefab = controller.useMemo(s => s.model === 'prefab', []);
+
+    const dataSource = controller.useMemo(s => s.goodsListState.goodsList, [])
+
+    const searchValue = controller.useMemo(s => s.goodsListState.searchValue, [])
+
+    const isTaxIncluded = controller.useMemo(s => s.goodsListState.isTaxIncluded, [])
+
+    const dataSourceSearch = React.useMemo(() => controller.getGoodsSearch(dataSource, searchValue, isTaxIncluded), [dataSource, searchValue, controller, isTaxIncluded])
+
+    const onRow = useOnRow();
+
+    useDeduction(controller, props.deduction);
+    useWindowClick(controller);
+
+    /** 清空自动赋码缓存 */
+    React.useEffect(() => {
+        controller.run(async s => { s.goodsListState.endowCode.cache = {} });
+    }, [controller])
+
+    /** 注册 from 对象 */
+    React.useEffect(() => {
+        controller.pipeline<WrappedFormUtils>(async (s, form) => { s.goodsListState = { ...s.goodsListState, form } })(props.form);
+    }, [controller, props.form]);
+
+    // 跟新 货物
+    React.useEffect(() => {
+        controller.run(async (s) => {
+            s.goodsListState.goodsMap = new Map();
+            goodsList.forEach((e) => { s.goodsListState.goodsMap.set(e.$index, e); });
+        });
+    }, [controller, goodsList]);
+
+    /** props 产品最大数 更新 */
+    React.useEffect(() => {
+        controller.pipeline(async s => { s.goodsListState.goodMax = props.goodMax })()
+    }, [controller, props.goodMax])
+
+    /** props 是否能添加折扣行 更新 */
+    React.useEffect(() => {
+        controller.pipeline(async s => { s.goodsListState.isAddDiscount = props.isAddDiscount })()
+    }, [controller, props.goodMax])
+
+    /** props 是否可以切换(含税/不含税)状态 更新 */
+    React.useEffect(() => {
+        controller.pipeline(async s => { s.goodsListState.isSwitchTax = props.isSwitchTax })()
+    }, [controller, props.isSwitchTax])
+
+    return (
+        <>
+            <div className='kts-invoice-operate-goods-list-menu' >
+                <AddRowButton />
+                <Button size='small'>删除</Button>
+                <Button size='small'>增加折扣</Button>
+                <Switch title='含税' />
+                <Input placeholder='请输入项目名称、规格型号、金额（含税）搜索' style={{ width: 400 }} />
+                <div style={{ flex: 1 }} />
+                <Button size='small' >重选发票类型</Button>
+                <Button size='small'>清空重填</Button>
+            </div>
+            <div className='kts-invoice-operate-goods-list-table' >
+                <TableVirtual
+                    size="small"
+                    rowKey="$index"
+                    scroll={{ y: 280 }}
+                    pagination={false}
+                    dataSource={dataSourceSearch}
+                    components={{ body: { row: TableRow } }}
+                    rowSelection={useRowSelection()}
+                    columns={useColumns(props.form)}
+                    onRow={record => ({
+                        onClick: () => {
+                            onRow.onClick(record);
+                        },
+                    })}
+                />
+            </div>
+        </>
+    )
+})

package/src/Invoice/ui/digtal/GoodsList.o/ui/AddRowButton/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Invoice from '../../../../..';
+import { Button, message } from 'kts-xui';
+import InvoiceController, { LineAttributeType } from '../../../../../InvoiceController';
+
+export default () => {
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const rootElement = controller.useMemo(s => s.rootElement, []);
+
+  /** 产品数据量 */
+  const goodsNum = controller.useMemo(s => s.goodsListState.goodsList.length, []);
+
+  /** 搜索条件 */
+  const searchValue = controller.useMemo(s => s.goodsListState.searchValue, []);
+
+  /** 搜索条件 */
+  const isAddRow = controller.useMemo(s => s.goodsListState.isAddRow, []);
+
+  /** 产品最大数 */
+  const goodMax = controller.useMemo(s => s.goodsListState.goodMax, []);
+
+  /** 按钮是否禁用 */
+  const disabled = React.useMemo(() => typeof goodMax === 'number' ? goodsNum >= goodMax : !!searchValue, [goodMax, goodsNum, searchValue])
+
+  const onClick = React.useCallback(async () => {
+    await addGood(controller);
+    await rollBottom(controller, rootElement);
+  }, [controller, rootElement]);
+
+  if (isAddRow === false) return <></>;
+  if (model === 'prefab') return <></>;
+  if (model === 'readOnly') return <></>;
+
+  return (
+    <Button onClick={onClick} disabled={disabled} size='small'>
+      添加行
+    </Button>
+  );
+};
+
+/** 添加一个空货物 */
+async function addGood(controller: InvoiceController) {
+  await controller.saveEditGood();
+  await controller.wait();
+  await controller.run(async (s) => {
+    if (s.goodsListState.editGood) {
+      message.error({
+        content: '你正在编辑一个货物',
+        key: '你正在编辑一个货物',
+      });
+      return;
+    }
+    s.goodsListState.editGood = await controller.addGood({ taxRate: s.goodsListState.defaultRate, lineAttribute: LineAttributeType.正常 });
+  });
+}
+
+/** 货物列表，滚动到底部 */
+async function rollBottom(controller: InvoiceController, rootElement: HTMLDivElement | null | undefined) {
+  await controller.wait();
+  const cont = rootElement?.querySelector('.ktsAntX-table-body');
+  if (!cont) return;
+  cont.scrollTop = cont.scrollHeight;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import Invoice from '../../../../..';
+import { LineAttributeType } from '../../../../../InvoiceController'
+import classnames from 'classnames'
+
+export default function TableRow(props: any) {
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
+
+    const discount = React.useMemo(() => {
+        const i = goodsMap.get(props['data-row-key']);
+        if (!i) return undefined;
+
+        if (i.lineAttribute === LineAttributeType.折扣行) {
+            return 'kts-invoice-operate-goods-be-discount'
+        } else if (i.lineAttribute === LineAttributeType.被折扣行) {
+            return 'kts-invoice-operate-goods-discount'
+        } else {
+            return undefined;
+        }
+    }, [props['data-row-key'], goodsMap])
+
+    return (
+        <tr {...props} className={classnames(props.className, discount)} />
+    )
+}

package/src/Invoice/ui/digtal/GoodsList.o/ui/TableVirtual/index.less

@@ -0,0 +1,43 @@
+.kts-invoice-operate-goods-table-virtual-digtal {
+
+  .ktsAntX-table-body {
+    height: 280px;
+  }
+
+  .ktsAntX-table .ktsAntX-table-thead>tr>th {
+    color: #9F603D;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-header>table>thead>tr>th {
+    padding   : 0 10px;
+    height    : 32px;
+    background: #f4f4f4;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-body>table>tbody>tr>td {
+    padding: 0;
+    height : 32px;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body {
+    position: relative;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body>table {
+    position: absolute;
+    left    : 0;
+    top     : 0;
+  }
+
+  .ktsAntX-table .ktsAntX-table-tbody {
+    position: relative;
+  }
+
+  .ktsAntX-checkbox-wrapper .ktsAntX-checkbox-inner {
+    width        : 16px;
+    height       : 16px;
+    border       : 1px solid #d9d9d9;
+    border-radius: 2px;
+    top          : 1px;
+  }
+}

package/src/Invoice/ui/digtal/GoodsList.o/ui/TableVirtual/index.tsx

@@ -0,0 +1,109 @@
+
+import React from "react";
+import { TableManual, TableProps } from "kts-xui";
+import { Table } from 'kts-components-antd-x4-v4';
+import './index.less';
+
+export default function <T extends object = any>(props: TableProps<T>) {
+
+    const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
+
+    const tableBody = React.useMemo(() => {
+        if (!self) return;
+        return self.querySelector('.ktsAntX-table-body') as HTMLDivElement;
+    }, [self]);
+
+    /** 显示指针 */
+    const [pointer, setPointer] = React.useState(0);
+
+    /** 行高 */
+    const rowHeight = React.useMemo(() => {
+        if (!self) return 33;
+
+        const td = self.querySelector('.ktsAntX-table-tbody .ktsAntX-table-row');
+        if (!td) return 33;
+
+        return td.clientHeight;
+    }, [self, props.dataSource]);
+
+    /** 间隔容器 */
+    const placeholder = React.useMemo(() => {
+        if (!self || !tableBody) return;
+        let placeholder = tableBody.querySelector('.table-virtual-placeholder') as HTMLDivElement;
+        if (!placeholder) {
+            placeholder = document.createElement('div');
+            placeholder.className = 'table-virtual-placeholder';
+            tableBody.appendChild(placeholder);
+        }
+        return placeholder;
+    }, [self, tableBody]);
+
+    // 设置占位dom的搞
+    const placeholderHeight = React.useMemo(() => {
+        if (!self || !rowHeight || !props.dataSource || !placeholder) return;
+        const placeholderHeight = rowHeight * props.dataSource.length;
+        placeholder.style.height = `${placeholderHeight}px`;
+        return placeholderHeight;
+    }, [self, rowHeight, props.dataSource, placeholder]);
+
+    /** 可以容纳的行数 */
+    const rowSize = React.useMemo(() => {
+        if (!tableBody! || !rowHeight) return 0;
+        return Math.ceil(tableBody.clientHeight / rowHeight);
+    }, [tableBody, rowHeight, placeholderHeight]);
+
+    // 计算渲染的行
+    const dataSource = React.useMemo(() => {
+        if (!props.dataSource) return [];
+        if (props.dataSource.length < 10) return props.dataSource;
+
+        if (!rowSize) return [props.dataSource[0]];
+        return props.dataSource?.slice(pointer, pointer + 2 * rowSize);
+    }, [props.dataSource, pointer, rowSize]);
+
+    // 监听滚动
+    React.useEffect(() => {
+        if (!self || !placeholder || !props.dataSource || !rowHeight || !tableBody)
+            return;
+
+        const onScroll = () => {
+            if (!props.dataSource || !tableBody) return;
+            setPointer(Math.floor((props.dataSource.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
+        };
+        onScroll();
+
+        tableBody.addEventListener('scroll', onScroll);
+        return () => {
+            tableBody.removeEventListener('scroll', onScroll);
+        };
+    }, [self, placeholder, props.dataSource, rowHeight, rowSize]);
+
+    // 移动列表
+    React.useEffect(() => {
+        if (!self) return;
+
+        const table = self.querySelector('.ktsAntX-table .ktsAntX-table-body>table') as HTMLDivElement;
+        if (!table) return;
+
+        table.style.top = `${pointer * rowHeight}px`;
+    }, [pointer, self, rowHeight]);
+
+    React.useEffect(() => {
+        if (!self) return;
+        const cont = self.querySelector('.kts-invoice-operate-goods-table-virtual .ktsAntX-table-body');
+        if (!cont) return;
+
+        cont.scrollTop = 0;
+    }, [props.dataSource?.length])
+
+    return (
+        <span className="kts-invoice-operate-goods-table-virtual-digtal" ref={(e) => { setSelf(e) }} >
+            <TableManual
+                {...props}
+                dataSource={dataSource}
+                // 新版本Table会有输入框无法连续输入的问题，先兼容老版本
+                tableComponent={Table as any}
+            />
+        </span>
+    )
+}

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

@@ -0,0 +1,58 @@
+.kts-invoice-operate-invoice-digtal-header {
+  height    : 121px;
+  text-align: center;
+  position  : relative;
+
+
+  .digtal-header-title {
+    font-size  : 28px;
+    color      : #9F603D;
+    width      : 100%;
+    position   : absolute;
+    top        : 21px;
+    font-weight: 400;
+
+    &::after,
+    &::before {
+      content      : "";
+      position     : absolute;
+      width        : 330px;
+      border-bottom: 2px solid #9F613E;
+      left         : 50%;
+      bottom       : -4px;
+      transform    : translateX(-50%);
+    }
+
+    &::after {
+      bottom: -8px;
+    }
+  }
+
+  .digtal-header-tag {
+    position     : absolute;
+    top          : 47px;
+    left         : 157px;
+    padding      : 2px 8px;
+    border-radius: 4px;
+    border       : 1px solid #0074FF;
+    color        : #0074FF;
+    background   : rgba(0, 116, 255, 0.20);
+  }
+
+  .digtal-header-fields {
+    display       : flex;
+    flex-direction: column;
+    position      : absolute;
+    right         : 40px;
+    top           : 23px;
+
+    .digtal-header-field {
+      display    : flex;
+      font-weight: bold;
+
+      .digtal-header-field-title {
+        color: #9F613E;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+
+import React from "react";
+import { Form } from 'kts-components-antd-x3';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import { decorator } from "grey-react-box";
+import Invoice from "../../../../Invoice";
+import './index.less'
+
+
+export interface IInvoiceHeader {
+    /** 标题 */
+    title?: string;
+
+    /** 标记文字 */
+    defaultTag?: string;
+
+    /** 默认 发票号码 */
+    defaultNo?: string;
+
+    /** 默认 开票日期 */
+    defaultInvoicingDate?: string;
+}
+
+export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Form.create())(props => {
+
+    const { form } = props;
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    const title = React.useMemo(() => {
+        if (props.title) {
+            return props.title
+        }
+        return '电子发票(增值税专用发票)'
+    }, [props.title])
+
+    controller.useForm('invoiceHeader', form);
+
+    return (
+        <div className="kts-invoice-operate-invoice-digtal-header" >
+            <div className="digtal-header-title" >{title}</div>
+            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
+            <div className="digtal-header-fields" >
+                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
+                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
+            </div>
+        </div>
+    )
+})
+
+/** 字段 */
+class Field extends React.Component<{ title: string, value?: string }>{
+    render(): React.ReactNode {
+        const { title, value } = this.props;
+        if (value) {
+            return (
+                <div className="digtal-header-field" >
+                    <div className="digtal-header-field-title" >{title}</div>
+                    <div className="digtal-header-field-value" >{value}</div>
+                </div>
+            )
+        } else {
+            return <></>
+        }
+    }
+}
+
+class Tag extends React.Component<{ value?: string }>{
+    render(): React.ReactNode {
+        return (
+            this.props.value
+                ? <div className="digtal-header-tag" >{this.props.value}</div>
+                : <></>
+        )
+    }
+}

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

@@ -0,0 +1,49 @@
+.kts-invoice-operate-sign-digtal {
+    padding      : 20px 20px 0;
+    border-bottom: 2px solid #9F613E;
+    border-left  : 2px solid #9F613E;
+    border-right : 2px solid #9F613E;
+
+    .sign-digtal-label {
+        color      : #9F613E;
+        font-weight: bold;
+    }
+}
+
+.kts-invoice-operate-sign-digtal-readOnly {
+    .sign-digtal-readOnly-cont {
+        border-bottom: 2px solid #9F613E;
+        border-left  : 2px solid #9F613E;
+        border-right : 2px solid #9F613E;
+        display      : flex;
+
+        &>div:nth-child(even) {
+            flex          : 1;
+            display       : flex;
+            flex-direction: column;
+            padding       : 10px;
+            min-height    : 189px;
+        }
+
+        &>div:nth-child(odd) {
+            flex           : none;
+            text-align     : center;
+            color          : #9F613E;
+            display        : flex;
+            flex-direction : column;
+            justify-content: center;
+            justify-items  : center;
+            padding        : 0 4px;
+            border-right   : 2px solid #9F613E;
+        }
+    }
+
+    .digtal-readOnly-form {
+        padding-left: 30px;
+
+        .ktsAnt3x-form-item-label label {
+            color      : #9F613E;
+            font-weight: bold;
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+
+import React from 'react';
+import { Input } from 'kts-xui';
+import { Form } from 'kts-components-antd-x3';
+import { decorator } from 'grey-react-box';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import Invoice from '../../..';
+import './index.less';
+
+export interface IBuyerProps {
+
+    /** 默认备注 */
+    defaultRemark?: string;
+
+    /** 默认开票人 */
+    defaultIssuer?: string;
+}
+
+export default decorator<IBuyerProps, IBuyerProps & FormComponentProps>(Form.create())((props) => {
+
+    const { form } = props;
+
+    const { getFieldDecorator } = form;
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, []);
+
+    const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);
+
+    const readOnly = React.useMemo(() => model === 'readOnly', [model]);
+
+    const isReadOnly = React.useCallback(field => disableds.indexOf(field) >= 0, [disableds])
+
+    // 注册 form
+    controller.useForm('sign', form);
+
+    if (readOnly) {
+        return (
+            <div className="kts-invoice-operate-sign-digtal-readOnly">
+                <div className='sign-digtal-readOnly-cont' >
+                    <div>
+                        <span>备</span>
+                        <span>注</span>
+                    </div>
+                    <div>
+                        {getFieldDecorator('remark', {
+                            initialValue: props.defaultRemark
+                        })(<MyDiv />)}
+                    </div>
+                </div>
+                <Form layout='inline' className='digtal-readOnly-form' >
+                    <Form.Item label='开票人' >
+                        {getFieldDecorator('issuer', {
+                            initialValue: props.defaultRemark
+                        })(<MyDiv />)}
+                    </Form.Item>
+                </Form>
+            </div>
+        );
+    } else {
+        return (
+            <div className="kts-invoice-operate-sign-digtal">
+                <div className='sign-digtal-label' >备注信息</div>
+                <Form>
+                    <Form.Item label="备注" >
+                        {getFieldDecorator('remark', {
+                            initialValue: props.defaultRemark
+                        })(<Input.TextArea readOnly={isReadOnly('remark')} autoSize placeholder='请输入' />)}
+                    </Form.Item>
+
+                    <Form.Item label="开票人" >
+                        {getFieldDecorator('issuer', {
+                            initialValue: props.defaultIssuer
+                        })(<Input readOnly={isReadOnly('issuer')} style={{ width: 313 }} placeholder='请输入' />)}
+                    </Form.Item>
+                </Form>
+            </div>
+        );
+    }
+});
+
+class MyDiv extends React.Component<{ value?: string }> {
+    render(): React.ReactNode {
+        return (
+            <div>{this.props.value}</div>
+        )
+    }
+}