kts-component-invoice-operate 2.0.0 → 2.0.1

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

@@ -11,11 +11,9 @@ import Statistics from './ui/Statistics';
 import AddRowButton from './ui/AddRowButton';
 import TaxIncludedSwitch from './ui/TaxIncludedSwitch';
 import DescribeSwitch from './ui/DescribeSwitch';
+import Search from './ui/Search';
 import TableRow from './ui/TableRow';
-import AddDiscountRowButton from './ui/AddDiscountRowButton';
-import EndowCodeButton from './ui/EndowCodeButton';
-import DelRowButton from './ui/DelRowButton';
-import CommodityComparisonButton from './ui/CommodityComparisonButton';
+import BulkMenu from './ui/BulkMenu';
 
 import useColumns from './hook/useColumns';
 import useOnRow from './hook/useOnRow';
@@ -58,6 +56,12 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
 
   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 dataSourceSearch = React.useMemo(() => controller.getGoodsSearch(dataSource, searchValue), [dataSource, searchValue, controller])
+
   /** 表格行事件 */
   const onRow = useOnRow();
 
@@ -71,17 +75,15 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
 
   /** 注册 from 对象 */
   React.useEffect(() => {
-    controller.pipeline<WrappedFormUtils>(async (s, form) => {
-      s.goodsListState = { ...s.goodsListState, form };
-    })(props.form);
+    controller.pipeline<WrappedFormUtils>(async (s, form) => { s.goodsListState = { ...s.goodsListState, form } })(props.form);
   }, [controller, props.form]);
 
   // 跟新 货物
   React.useEffect(() => {
-    controller.pipeline(async (s) => {
+    controller.run(async (s) => {
       s.goodsListState.goodsMap = new Map();
       goodsList.forEach((e) => { s.goodsListState.goodsMap.set(e.$index, e); });
-    })();
+    });
   }, [controller, goodsList]);
 
   /** props 产品最大数 更新 */
@@ -106,17 +108,11 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
           {/* 添加行 */}
           <AddRowButton />
 
-          {/* 删除行 */}
-          <DelRowButton />
-
-          {/* 添加折扣行 */}
-          <AddDiscountRowButton />
-
-          {/* 批量赋码 */}
-          <EndowCodeButton />
+          {/* 批量菜单 */}
+          <BulkMenu />
 
-          {/* 执行商品对照 */}
-          <CommodityComparisonButton/>
+          {/* 搜索 */}
+          <Search />
         </div>
         <div className="kts-invoice-operate-goods-list-able-extend">
 
@@ -138,10 +134,10 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
           pagination={false}
           scroll={{ y: 540 }}
           components={{ body: { row: TableRow } }}
-          dataSource={controller.useMemo((s) => s.goodsListState.goodsList, [controller])}
+          dataSource={dataSourceSearch}
           columns={useColumns(props.form)}
           rowSelection={useRowSelection()}
-          onRow={(record) => ({
+          onRow={record => ({
             onClick: () => {
               onRow.onClick(record);
             },

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

@@ -11,13 +11,16 @@ export default () => {
   /** 产品数据量 */
   const goodsNum = controller.useMemo(s => s.goodsListState.goodsList.length, []);
 
+  /** 搜索条件 */
+  const searchValue = controller.useMemo(s => s.goodsListState.searchValue, []);
+
   /** 产品最大数 */
   const goodMax = controller.useMemo(s => s.goodsListState.goodMax, []);
 
   /** 按钮是否禁用 */
   const disabled = React.useMemo(() => {
-    return typeof goodMax === 'number' ? goodsNum >= goodMax : false;
-  }, [goodMax, goodsNum])
+    return typeof goodMax === 'number' ? goodsNum >= goodMax : !!searchValue;
+  }, [goodMax, goodsNum, searchValue])
 
   const onClick = React.useCallback(async () => {
     await controller.saveEditGood();

package/src/Invoice/ui/GoodsList/ui/{AddDiscountRowButton → BulkMenu/hooks/useAddDiscountRowButton}/index.tsx

@@ -7,20 +7,20 @@
  */
 
 import React from 'react';
-import { Button, Drawer, Form, message, Input, Typography } from 'kts-components-antd-x3';
+import { Button, Drawer, Form, message, Input, Typography, Menu } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import { all, create } from 'mathjs';
 import { decorator } from 'grey-react-box';
-import Invoice from '../../../../';
-import lazyFn from '../../../../tools/lazyFn';
-import LineAttributeType from '../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
-import evaluate from '../../../../../Invoice/tools/evaluate';
+import Invoice from '../../../../../../';
+import lazyFn from '../../../../../../tools/lazyFn';
+import LineAttributeType from '../../../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
+import evaluate from '../../../../../../../Invoice/tools/evaluate';
 import './index.less';
 
 const { Text } = Typography;
 const { chain } = create(all, { number: 'BigNumber', precision: 20 }) as any;
 
-export default decorator<{}, FormComponentProps>(Form.create())((props) => {
+export default () => {
   /** 控制器 */
   const controller = Invoice.useInvoiceController();
 
@@ -86,15 +86,16 @@ export default decorator<{}, FormComponentProps>(Form.create())((props) => {
     })();
   }, [controller]);
 
-  if (model === 'prefab') return <></>;
+  const menuItem = React.useMemo(() => {
+    return model === 'prefab' ? <></> : isAddDiscount !== false ? (
+      <Menu.Item key="0" onClick={onClick} disabled={disabled}>
+        添加折扣行
+      </Menu.Item>
+    ) : undefined
+  }, [isAddDiscount, disabled, onClick])
 
-  return (
-    <>
-      {
-        isAddDiscount !== false &&
-        <Button icon="plus-circle" disabled={disabled} onClick={onClick}>
-          添加折扣行
-        </Button>}
+  const drawer = React.useMemo(() => {
+    return (
       <Drawer
         className="kts-invoice-operate-goods-list-add-discount-row"
         width={540}
@@ -106,9 +107,11 @@ export default decorator<{}, FormComponentProps>(Form.create())((props) => {
       >
         <DrawerBody />
       </Drawer>
-    </>
-  );
-});
+    )
+  }, [visible, onClose])
+
+  return { menuItem, drawer }
+};
 
 const DrawerBody = decorator<{}, FormComponentProps>(Form.create())((props) => {
   const { form } = props;

package/src/Invoice/ui/GoodsList/ui/{CommodityComparisonButton → BulkMenu/hooks/useCommodityComparisonButton}/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, message } from 'kts-components-antd-x3';
-import coolingFn from '../../../../tools/coolingFn'
-import { getSN, setShorthand } from '../../../../tools/itemName'
-import { Invoice, IGood } from '../../../../../';
+import { Menu, message } from 'kts-components-antd-x3';
+import coolingFn from '../../../../../../tools/coolingFn'
+import { getSN, setShorthand } from '../../../../../../tools/itemName'
+import { Invoice, IGood } from '../../../../../../../';
 
 export default () => {
 
@@ -63,12 +63,18 @@ export default () => {
     })
   }, [])
 
-  // 没用 执行商品对照 的方法 不显示按钮
-  if (!onComply) return <></>;
 
-  return (
-    <Button icon='swap' disabled={disabled} onClick={onClick} >
-      执行商品对照
-    </Button>
-  );
+  const menuItem = React.useMemo(() => {
+
+    // 没用 执行商品对照 的方法 不显示按钮
+    if (!onComply) return <></>;
+
+    return (
+      <Menu.Item key="3" disabled={disabled} onClick={onClick} >
+        执行商品对照
+      </Menu.Item>
+    );
+  }, [])
+
+  return { menuItem }
 };

package/src/Invoice/ui/GoodsList/ui/{DelRowButton → BulkMenu/hooks/useDelRowButton}/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import Invoice from '../../../../';
-import LineAttributeType from '../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
-import { Button } from 'kts-components-antd-x3';
+import Invoice from '../../../../../../';
+import LineAttributeType from '../../../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
+import { Menu } from 'kts-components-antd-x3';
 
 export default () => {
+
   const controller = Invoice.useInvoiceController();
 
   const model = controller.useMemo(s => s.model, []);
@@ -41,9 +42,16 @@ export default () => {
     })();
   }, [controller]);
 
-  if (model === 'prefab') return <></>;
+  const menuItem = React.useMemo(() => {
+
+    if (model === 'prefab') return <></>;
+
+    return (
+      <Menu.Item key="1" onClick={onClick} disabled={disabled}>
+        删除行
+      </Menu.Item>
+    )
+  }, [model, onClick, disabled])
 
-  return (
-    <Button icon="delete" onClick={onClick} disabled={disabled}>删除行</Button>
-  );
+  return { menuItem };
 };

package/src/Invoice/ui/GoodsList/ui/{EndowCodeButton → BulkMenu/hooks/useEndowCodeButton}/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import Invoice from '../../../../';
-import { Button, message } from 'kts-components-antd-x3';
-import coolingFn from '../../../../tools/coolingFn'
-// import { LineAttributeType } from '../../../../InvoiceController';
+import Invoice from '../../../../../../';
+import { message ,Menu} from 'kts-components-antd-x3';
+import coolingFn from '../../../../../../tools/coolingFn';
 
 export default () => {
   const controller = Invoice.useInvoiceController();
@@ -34,9 +33,14 @@ export default () => {
     })();
   }, [controller]);
 
-  return (
-    <Button icon="file-add" disabled={disabled} onClick={onClick}>
-      批量赋码
-    </Button>
-  );
+  const menuItem = React.useMemo(() => {
+
+    return (
+      <Menu.Item key="2" onClick={onClick} disabled={disabled}>
+        批量赋码
+      </Menu.Item>
+    )
+  }, [onClick, disabled])
+
+  return { menuItem };
 };

package/src/Invoice/ui/GoodsList/ui/BulkMenu/index.tsx

@@ -0,0 +1,43 @@
+
+import React from "react";
+import { Button, Dropdown, Menu } from "kts-components-antd-x3";
+
+import useDelRowButton from "./hooks/useDelRowButton";
+import useAddDiscountRowButton from "./hooks/useAddDiscountRowButton";
+import useEndowCodeButton from "./hooks/useEndowCodeButton";
+import useCommodityComparisonButton from "./hooks/useCommodityComparisonButton";
+
+export default function BulkMenu() {
+
+    /** 删除行 */
+    const delRowButton = useDelRowButton();
+
+    /** 添加折扣行 */
+    const addDiscountRowButton = useAddDiscountRowButton();
+
+    /** 批量赋码 */
+    const endowCodeButton = useEndowCodeButton();
+
+    /** 执行商品对照 */
+    const commodityComparisonButton = useCommodityComparisonButton();
+
+    const menu = (
+        <Menu>
+            {delRowButton.menuItem}
+            {addDiscountRowButton.menuItem}
+            {endowCodeButton.menuItem}
+            {commodityComparisonButton.menuItem}
+        </Menu>
+    );
+
+    return (
+        <>
+            <Dropdown overlay={menu}>
+                <Button>
+                    批量操作行
+                </Button>
+            </Dropdown>
+            {addDiscountRowButton.drawer}
+        </>
+    )
+}

package/src/Invoice/ui/GoodsList/ui/Search/icon/magnifier.svg

@@ -0,0 +1 @@
+<svg t="1656901778998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9253" width="200" height="200"><path d="M985.781333 918.594133 820.773333 765.5264c27.3728-32.973867 49.6544-69.5776 66.436267-109.258667 22.933333-54.218667 34.561067-111.7952 34.561067-171.1296 0-59.333333-11.627733-116.910933-34.561067-171.1296-22.142933-52.354133-53.837867-99.365333-94.200533-139.729067S705.633067 102.222933 653.28 80.08c-54.218667-22.933333-111.7952-34.561067-171.1296-34.561067S365.240533 57.147733 311.021867 80.08c-52.354133 22.142933-99.365333 53.8368-139.729067 94.200533s-72.0576 87.374933-94.200533 139.729067c-22.932267 54.218667-34.56 111.7952-34.56 171.1296 0 59.3344 11.627733 116.910933 34.56 171.1296 22.144 52.354133 53.837867 99.365333 94.200533 139.729067s87.374933 72.0576 139.729067 94.200533c54.218667 22.932267 111.7952 34.56 171.1296 34.56s116.910933-11.627733 171.1296-34.56c45.352533-19.181867 86.686933-45.543467 123.172267-78.487467L942.256 965.514667c6.16 5.714133 13.966933 8.539733 21.755733 8.539733 8.593067 0 17.163733-3.441067 23.467733-10.237867C999.4976 950.8608 998.738133 930.612267 985.781333 918.594133zM482.151467 860.7584c-207.117867 0-375.620267-168.5024-375.620267-375.620267 0-207.1168 168.5024-375.6192 375.620267-375.6192S857.770667 278.021333 857.770667 485.138133C857.770667 692.256 689.268267 860.7584 482.151467 860.7584z" p-id="9254"></path></svg>

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

@@ -0,0 +1,10 @@
+.kts-invoice-operate-goods-list-able-list {
+  .kts-invoice-operate-goods-list-search {
+    width: 330px;
+
+    input {
+      border-radius: 999px;
+      border-color : #b8b8b8;
+    }
+  }
+}

package/src/Invoice/ui/GoodsList/ui/Search/index.tsx

@@ -0,0 +1,47 @@
+
+import React from "react";
+import { Icon, Input, message } from "kts-components-antd-x3";
+import { ReactComponent as MagnifierSvg } from './icon/magnifier.svg';
+import Invoice from '../../../../';
+import './index.less';
+
+export default function Search() {
+
+    const controller = Invoice.useInvoiceController();
+
+    const [value, setValue] = React.useState('');
+
+    const readOnly = controller.useMemo(s => !!s.goodsListState.editGood, [])
+
+    const onClick = React.useCallback(async () => {
+        await controller.saveEditGood();
+        await controller.wait();
+        if (controller.state.goodsListState.editGood) {
+            message.error({
+                content: '你正在编辑一个货物',
+                key: '你正在编辑一个货物',
+            });
+            return;
+        }
+    }, [])
+
+    React.useEffect(() => {
+        controller.run(async s => {
+            s.goodsListState.searchValue = value;
+        })
+    }, [value, controller])
+
+    return (
+        <Input
+            size="small"
+            readOnly={readOnly}
+            value={value}
+            className="kts-invoice-operate-goods-list-search"
+            placeholder="请您输入货物名称、规格型号、金额(含税)搜索"
+            prefix={<Icon component={MagnifierSvg} style={{ color: "#b8b8b8" }} />}
+            onChange={e => { setValue(e.target.value); }}
+            onClick={onClick}
+        />
+    )
+}
+