kts-component-invoice-operate 3.2.3 → 3.2.5

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

@@ -1,132 +0,0 @@
-
-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

@@ -1,66 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,43 +0,0 @@
-.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

@@ -1,109 +0,0 @@
-
-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>
-    )
-}