kts-component-invoice-operate 3.1.20 → 3.2.0

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

@@ -0,0 +1,43 @@
+/** 添加商品对照 */
+
+import React from 'react';
+import { Menu, message, Typography } from 'kts-components-antd-x3';
+import { IGood, LineAttributeType } from '../../../../../../../../InvoiceController';
+import Invoice from '../../../../../../../../';
+
+const { Text } = Typography;
+
+export default (goods: IGood) => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const productComparison = controller.useMemo(s => s.goodsListState.productComparison, []);
+
+    const onClick = React.useCallback(async () => {
+        await controller.saveEditGood();
+        await controller.wait();
+        await controller.run(async s => {
+            if (s.goodsListState.form) {
+                const err: any = s.goodsListState.form.getFieldsError();
+                for (let key in err) {
+                    if (!err[key]) continue;
+                    message.error(err[key][0]);
+                    return;
+                }
+            }
+            s.goodsListState.addComparisonIndex = goods.$index;
+        })
+    }, [controller, goods.$index]);
+
+    if (!(goods.lineAttribute !== LineAttributeType.折扣行)) {
+        return undefined;
+    }
+
+    return React.useMemo(() => {
+        if (productComparison.onComply) {
+            return <Menu.Item key="delItem" onClick={onClick}><Text strong>添加商品对照</Text></Menu.Item>
+        } else {
+            return <></>
+        }
+    }, [onClick, productComparison])
+};

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

@@ -0,0 +1,76 @@
+
+import React from 'react';
+import { Menu, message, Typography } from 'kts-components-antd-x3';
+import { IGood, LineAttributeType } from '../../../../../../../../../InvoiceController';
+import Invoice from '../../../../../../../../..';
+
+const { Text } = Typography;
+
+export default (goods: IGood) => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, [])
+
+    /** 是否能添加折扣行 */
+    const isAddDiscount = controller.useMemo(s => s.goodsListState.isAddDiscount, [])
+
+    /** 点击了 添加折扣行 按钮 */
+    const onClick = React.useCallback(async e => {
+        e.stopPropagation()
+        await controller.wait();
+        await controller.saveEditGood();
+        await controller.run(async s => {
+            if (s.goodsListState.form && s.goodsListState.editGood?.$index === goods?.$index) {
+                const err: any = s.goodsListState.form.getFieldsError();
+                for (let key in err) {
+                    if (!err[key]) continue;
+                    message.error(err[key][0]);
+                    return;
+                }
+            }
+            goods = s.goodsListState.goodsMap.get(goods.$index) as any;
+            if (goods.taxRate === 0 && s.goodsListState.endowCode.isTaxFreeTypeNeeded && !goods.taxFreeType) {
+                message.error({ content: '零税率需要设置免税类型，请在赋码中设置！', key: '零税率需要设置免税类型，请在赋码中设置！' });
+                return;
+            }
+            if (`${goods.lineAmountIncludeTax}` === '0') {
+                message.error({ content: '金额为0不能添加折扣行', key: '金额为0不能添加折扣行' });
+                return;
+            }
+            s.goodsListState.discountGoodIndex = [goods.$index];
+        })
+    }, [controller, goods.$index]);
+
+    if (goods.lineAttribute !== LineAttributeType.正常) {
+        return undefined
+    }
+
+    if (!(model !== 'prefab')) {
+        return undefined;
+    }
+
+    if (!(isAddDiscount !== false)) {
+        return undefined
+    }
+
+    if (goods.lineAttribute !== LineAttributeType.正常) {
+        return undefined
+    }
+
+    return {
+        key:'addDiscount',
+        title:'折扣',
+        onClick,
+    }
+
+    // return React.useMemo(() => {
+    //     if (goods.lineAttribute !== LineAttributeType.正常) {
+    //         return undefined
+    //     }
+
+    //     return (
+    //         <Menu.Item key="addDiscount" onClick={onClick}><Text strong>折扣</Text></Menu.Item>
+    //     );
+    // }, [onClick, goods.lineAttribute]);
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+// import { Menu, Typography } from 'kts-components-antd-x3';
+import { IGood, LineAttributeType } from '../../../../../../../../../InvoiceController';
+import Invoice from '../../../../../../../../..';
+
+// const { Text } = Typography;
+
+export default (goods: IGood) => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, [])
+
+    const isRemRow = controller.useMemo(s => s.goodsListState.isRemRow, [])
+
+    const onClick = React.useCallback(() => {
+        controller.delGood(goods.$index);
+    }, [controller, goods.$index]);
+
+    if (goods.lineAttribute === LineAttributeType.被折扣行) {
+        return undefined;
+    }
+
+    if(isRemRow === false) {
+        return undefined;
+    }
+
+    if (!(model !== 'prefab')) {
+        return undefined;
+    }
+
+    return {
+        key:'delItem',
+        title:'删除',
+        onClick,
+    }
+
+    // return React.useMemo(() => {
+    //     return <Menu.Item key="delItem" onClick={onClick}><Text strong type="danger">删除</Text></Menu.Item>
+    // }, [onClick])
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+// import { Button } from 'kts-components-antd-x3';
+import Invoice from '../../../../../../../../..';
+import { IGood } from '../../../../../../../../../InvoiceController';
+import { endowCode } from '../../../../autoFillFn';
+
+// const { Text } = Typography;
+
+export default (goods: IGood) => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const onClick = React.useCallback(async () => {
+        endowCode(controller, goods);
+    }, [controller, goods]);
+
+    return {
+        key: 'endowCode',
+        title: '赋码',
+        onClick,
+    }
+
+    // return React.useMemo(() => {
+    //     return (
+    //         <Menu.Item key="endowCode" onClick={onClick} ><Text strong>赋码</Text></Menu.Item>
+    //     );
+    // }, [goods.lineAttribute, onClick])
+
+    // return React.useMemo(() => {
+    //     return (
+    //         <Button key="endowCode" type="link" onClick={onClick} >赋码</Button>
+    //     );
+    // }, [goods.lineAttribute, onClick])
+};

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

@@ -0,0 +1,13 @@
+.ktsAnt3x-btn.kts-invoice-operate-goods-list-columns-row-menu:focus,
+.ktsAnt3x-btn.kts-invoice-operate-goods-list-columns-row-menu:hover,
+.ktsAnt3x-btn.kts-invoice-operate-goods-list-columns-row-menu {
+    font-size: 16px;
+    color: #000;
+    text-align: center;
+    padding: 0;
+}
+.ktsAnt3x-btn.kts-invoice-operate-goods-list-columns-row-menu:hover,
+.ktsAnt3x-btn.kts-invoice-operate-goods-list-columns-row-menu.ktsAnt3x-dropdown-open{
+    background: #ebebeb;
+    border-radius: 9999px;
+}

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Button, Menu, Dropdown, Icon, Typography } from 'kts-components-antd-x3';
+import Invoice from '../../../../../../..';
+import { IGood } from '../../../../../../../InvoiceController';
+import { ReactComponent as SpotSvg } from './spot.svg';
+
+import useDelItem from './hook/useDelItem';
+import useAddDiscount from './hook/useAddDiscount';
+import useEndowCode from './hook/useEndowCode';
+// import useAddComparison from './hook/useAddComparison';
+
+import './index.less';
+
+const { Text } = Typography;
+
+export default (props: { goods: IGood }) => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, [])
+
+  /** 是否能添加折扣行 */
+  const isAddDiscount = controller.useMemo(s => s.goodsListState.isAddDiscount, [])
+
+  const goodsMenuExpand = controller.useMemo(s => s.goodsListState.goodsMenuExpand, []);
+
+  const delItem = useDelItem(props.goods);
+  const addDiscount = useAddDiscount(props.goods);
+  const endowCode = useEndowCode(props.goods);
+  // const addComparison = useAddComparison(props.goods);
+
+  const itemList = React.useMemo(() => {
+    const arr: any[] = [];
+
+    endowCode && arr.push(endowCode);           // 赋码
+    addDiscount && arr.push(addDiscount);       // 添加折扣行
+    delItem && arr.push(delItem);               // 删除
+
+    // addComparison && arr.push(addComparison);   // 添加商品对照
+
+    if (!goodsMenuExpand || goodsMenuExpand.length === 0) return arr;
+
+    arr.unshift(<Menu.Divider key="divider-1" />);
+
+    for (let i = goodsMenuExpand.length - 1; i >= 0; i--) {
+      const fn = goodsMenuExpand[i];
+      arr.unshift(fn(props.goods.$index, controller));
+    }
+
+    return arr;
+  }, [controller, endowCode, addDiscount, delItem, goodsMenuExpand, props.goods, model, isAddDiscount])
+
+  const overlay = React.useMemo(() => {
+    if (itemList.length <= 2) {
+      return undefined
+    }
+
+    return (
+      <Menu>
+        {itemList.slice(2).map(e => {
+          return <Menu.Item key={e.key} onClick={e.onClick} ><Text strong>{e.title}</Text></Menu.Item>
+        })}
+      </Menu>
+    )
+  }, [itemList])
+
+  const buttonList = React.useMemo(() => {
+    return (
+      <div style={{ flex: 1, textAlign: 'left', display: 'flex', gap: 10 }} >
+        {
+          itemList.slice(0, 2).map(e => {
+            return (
+              <Button key={e.key} type='link' onClick={e.onClick} style={{ padding: 0 }} >
+                {e.title}
+              </Button>
+            )
+          })
+        }
+      </div>
+    )
+  }, [itemList])
+
+  if (itemList.length === 0) { return (<></>) }
+
+  return (
+    <span style={{ padding: '0 0 0 10px', display: 'flex' }}>
+      {buttonList}
+      {
+        overlay &&
+        <Dropdown overlay={overlay} trigger={['click']}>
+          <Button className="kts-invoice-operate-goods-list-columns-row-menu ant-btn-icon-only" type="link">
+            <Icon component={SpotSvg} />
+          </Button>
+        </Dropdown>
+      }
+    </span>
+  );
+};

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/spot.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1574652728953" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4119" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M512 512m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" p-id="4120"></path><path d="M512 96.64m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" p-id="4121"></path><path d="M512 927.36m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" p-id="4122"></path></svg>

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from 'kts-components-antd-x3';
+import Invoice from '../../../../../../';
+import { IGood } from '../../../../../../InvoiceController';
+
+export default (props: { goods: IGood }) => {
+  const controller = Invoice.useInvoiceController();
+
+  const onClick = React.useCallback(() => {
+    controller.saveEditGood();
+  }, [controller]);
+
+  return <Button type="link" icon="save" onClick={onClick} />;
+};

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

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import { Typography } from 'kts-components-antd-x3';
+import { ValidationRule } from 'kts-components-antd-x3/lib/form';
+
+const { Text } = Typography;
+
+export default (props: { children?: React.ReactNode, required?: boolean, rules?: ValidationRule[] }) => {
+
+    const { rules, children } = props;
+
+    const required = React.useMemo(() => rules?.some(e => !!e.required) || props.required, [rules, props.required]);
+
+    return (
+        <>
+            {required ? <Text type="danger">*</Text> : <></>}
+            {children}
+        </>
+    )
+};

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

@@ -0,0 +1,39 @@
+/**
+ * 表格行事件
+ */
+
+import React from 'react';
+import Invoice from '../../../../..';
+import IGood from '../../../../../InvoiceController/InvoiceControllerState/GoodsListState/IGood';
+import { LineAttributeType } from '../../../../../InvoiceController';
+
+export default () => {
+  /** 控制器 */
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const onClick = React.useCallback(
+    async (record: IGood) => {
+      if (model === 'prefab') return;
+      if (model === 'readOnly') return;
+
+      const editGood = controller.state.goodsListState.editGood;
+      if (record.lineAttribute !== LineAttributeType.正常) return;
+
+      if (editGood) {
+        if (editGood.$index === record.$index) return;
+        await controller.saveEditGood();
+        await controller.wait();
+        await controller.pipeline(async s => { s.goodsListState.editGood || (await controller.setEditGood(record)) })();
+      } else {
+        await controller.setEditGood(record);
+      }
+    },
+    [controller, model],
+  );
+
+  return {
+    onClick,
+  };
+};

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

@@ -0,0 +1,112 @@
+
+import React from 'react';
+import { Checkbox } from 'kts-components-antd-x3';
+import { LineAttributeType } from '../../../../../InvoiceController';
+import Invoice from '../../../../..';
+
+export default () => {
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    /** 列表选中的货物索引列表 */
+    const selectedRowKeys = controller.useMemo(s => s.goodsListState.selectedGoodIndex, []);
+
+    /** 货物列表 */
+    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
+
+    /** 搜索条件 */
+    const searchValue = controller.useMemo(s => s.goodsListState.searchValue, []);
+
+    /** 是否全选 */
+    // const isAll = controller.useMemo(s => s.goodsListState.goodsList.length > 0 && s.goodsListState.selectedGoodIndex.length === s.goodsListState.goodsList.length, [])
+    const isAll = controller.useMemo(s => {
+        if (s.goodsListState.selectedGoodIndex.length <= 0) return false;
+        const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue, s.goodsListState.isTaxIncluded).map(e => e.$index);
+        const selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e => seeGoodsIndex.some(t => e === t));
+        return selectedGoodIndex.length === seeGoodsIndex.length
+    }, [])
+
+    const indeterminate = controller.useMemo(s => {
+        const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue, s.goodsListState.isTaxIncluded).map(e => e.$index);
+        const selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e => seeGoodsIndex.some(t => e === t));
+        if (selectedGoodIndex.length === 0) return false;
+        return selectedGoodIndex.length < seeGoodsIndex.length
+    }, [])
+
+    /** 点击了全选 */
+    const onClickSelectAll = React.useCallback(async () => {
+        if (isAll) {
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue, s.goodsListState.isTaxIncluded).map(e => e.$index)
+
+                s.goodsListState.selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e=>!seeGoodsIndex.some(t => e === t));
+            })()
+        } else {
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue, s.goodsListState.isTaxIncluded).map(e => e.$index)
+
+                s.goodsListState.selectedGoodIndex = [...s.goodsListState.selectedGoodIndex, ...seeGoodsIndex];
+                s.goodsListState.selectedGoodIndex = Array.from(new Set(s.goodsListState.selectedGoodIndex));
+            })()
+        }
+        await sortOut(true);
+    }, [controller, isAll])
+
+    const onSelect = React.useCallback(async (record, selected) => {
+        if (selected) {
+            await controller.pipeline(async s => {
+                s.goodsListState.selectedGoodIndex = [...s.goodsListState.selectedGoodIndex, record.$index];
+                s.goodsListState = { ...s.goodsListState };
+            })()
+        } else {
+            await controller.pipeline(async s => {
+                s.goodsListState.selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e => e !== record.$index);
+                s.goodsListState = { ...s.goodsListState };
+            })()
+        }
+        await sortOut(selected);
+    }, [controller])
+
+    const columnTitle = React.useMemo(() => {
+        return (
+            <Checkbox
+                onChange={onClickSelectAll}
+                indeterminate={indeterminate}
+                checked={isAll}
+            ></Checkbox>
+        )
+    }, [goodsList, selectedRowKeys, onClickSelectAll, isAll, indeterminate])
+
+    /** 选择了商品后 调整 折扣行 和 被折扣行 */
+    const sortOut = React.useCallback(async (selected: boolean) => {
+        await controller.wait();
+        await controller.pipeline(async s => {
+            s.goodsListState.selectedGoodIndex.forEach($index => {
+                const goods = s.goodsListState.goodsMap.get($index);
+                if (!goods || goods.lineAttribute === LineAttributeType.正常) return;
+
+                // 数组位置
+                let t = s.goodsListState.goodsList.indexOf(goods);
+                goods.lineAttribute === LineAttributeType.折扣行 ? t : t++;
+                const i = s.goodsListState.goodsList[t].$index;
+                if (selected) {
+                    if (s.goodsListState.selectedGoodIndex.indexOf(i) < 0) s.goodsListState.selectedGoodIndex = [...s.goodsListState.selectedGoodIndex, i];
+                } else {
+                    if (s.goodsListState.selectedGoodIndex.indexOf(i) < 0) s.goodsListState.selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e => e !== $index);
+                }
+            })
+        })()
+    }, [controller])
+
+    React.useEffect(() => {
+        sortOut(true);
+    }, [sortOut, goodsList])
+
+    return {
+        columnWidth: 45,
+        columnTitle,
+        onSelect,
+        selectedRowKeys,
+    }
+}

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

@@ -0,0 +1,23 @@
+
+/**
+ * 点击组件外部 保存正在编辑的货物
+ */
+
+import React from "react";
+import { InvoiceController } from "../../../../../..";
+
+/**
+ * 点击组件外部 保存正在编辑的货物
+ */
+export default function useWindowClick(controller: InvoiceController) {
+
+  /** 点击组件外部 保存正在编辑的货物 */
+  React.useEffect(() => {
+    const click = () => { setTimeout(controller.saveEditGood) };
+
+    window.addEventListener('click', click);
+    return () => {
+      window.removeEventListener('click', click);
+    };
+  }, [controller]);
+}

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

@@ -0,0 +1,57 @@
+.kts-invoice-operate-goods-list-digtal {
+
+  .goods-list-digtal-discount-tag {
+    display      : inline-block;
+    height       : 20px;
+    line-height  : 20px;
+    border       : 1px solid;
+    padding      : 0 5px;
+    border-radius: 4px;
+  }
+
+  .kts-invoice-operate-goods-list-table-tax-rate {
+    .ktsAnt3x-select-selection-selected-value {
+      float: right;
+    }
+  }
+
+  .kts-invoice-operate-goods-list-able {
+    display      : flex;
+    padding      : 10px;
+    border-bottom: 2px solid #9F613E;
+    gap          : 10px;
+    align-items  : center;
+    height       : 48px;
+  }
+
+  .ktsAntX-table {
+
+    .ktsAntX-table-row.kts-invoice-operate-goods-be-discount .ktsAntX-table-cell {
+      color: #f00;
+    }
+
+    // .ktsAntX-table-row.kts-invoice-operate-goods-discount .ktsAntX-table-cell {
+    // background: #f5f5f5;
+    // }
+  }
+}
+
+.kts-invoice-operate-goods-list-table-digtal {
+
+  .ktsAnt3x-form-item-control.has-error {
+    border: 1px solid #f00;
+  }
+
+  .kts-invoice-operate-goods-list-table.kts-invoice-operate-prefab {
+    .ktsAnt3x-table-row {
+      color     : rgba(0, 0, 0, 0.25);
+      background: #f5f5f5;
+    }
+  }
+
+  .kts-invoice-operate-goods-list-table-search-protrude {
+    background : #ff0;
+    color      : #000;
+    font-weight: bold;
+  }
+}