kts-component-invoice-operate 2.0.21 → 3.0.0

package/package.json

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

package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood/index.ts

@@ -4,6 +4,9 @@ export default interface IGood {
   /** 数据索引 */
   $index: number;
 
+  /** 序号 */
+  serialNo?: number;
+
   /** 折扣组 uuid */
   discountGroup?: string;
 

package/src/Invoice/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import InvoiceController from './InvoiceController';
 import InvoiceHeader from './ui/InvoiceHeader';
 import GoodsList from './ui/GoodsList';
+import useToGenerateId from './ui/GoodsList/hook/useToGenerateId';
 import Seller from './ui/Seller';
 import Sign from './ui/Sign';
 import Buyer from './ui/Buyer';
@@ -63,9 +64,7 @@ export default class Invoice extends React.PureComponent<IInvoiceProps> {
   static idGenerator = idGenerator;
 
   /** 获取控制器钩子 */
-  static useInvoiceController = () => {
-    return React.useContext(InvoiceContext);
-  };
+  static useInvoiceController = () => { return React.useContext(InvoiceContext) };
 
   render() {
     return <Main {...this.props}></Main>;
@@ -78,12 +77,15 @@ const Main = (props: IInvoiceProps) => {
 
   const [key, setKey] = React.useState(0);
 
-  React.useEffect(() => {
-    setKey(key + 1);
-  }, [controller])
+  useToGenerateId(controller);
+
+  React.useEffect(() => { setKey(key + 1) }, [controller]);
+
+  React.useEffect(() => { }, [])
 
   return (
     <InvoiceContext.Provider key={key} value={controller}>
+
       <div className="kts-invoice-operate">
         {props.invoiceHeader || <InvoiceHeader /> /**    发票头 */}
         {props.buyer || <Buyer /> /**                    购买方 */}
@@ -93,17 +95,12 @@ const Main = (props: IInvoiceProps) => {
         {props.footExpand}
       </div>
 
-      {/* 导入购买方的抽屉 */}
-      <ImportBuyerDrawer />
-
-      {/* 导入货品的抽屉 */}
-      <ImportGoodsDrawer />
-
-      {/* 给货品赋码的抽屉 */}
-      <EndowCodeDrawer />
-
-      {/* 添加商品对照的抽屉 */}
-      <AddComparisonDrawer />
+      <ImportBuyerDrawer />{/*        导入购买方的抽屉 */}
+      <ImportGoodsDrawer />{/*        导入货品的抽屉 */}
+      <EndowCodeDrawer />{/*          给货品赋码的抽屉 */}
+      <AddComparisonDrawer />{/*      添加商品对照的抽屉 */}
     </InvoiceContext.Provider>
   );
-};
+};
+
+

package/src/Invoice/tools/idGenerator/index.ts

@@ -1,2 +1,2 @@
-let id = 1;
+let id = new Date().getTime();
 export default () => ++id;

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

@@ -39,7 +39,7 @@ export default function AddComparisonDrawer() {
                     good.itemName = shorthand ? `*${shorthand}*${values.itemName}` : values.itemName;
                     good.itemNameSelf = shorthand ? `*${shorthand}*${values.itemNameSelf}` : values.itemNameSelf;
 
-                    if (good.lineAttribute === LineAttributeType.正常) {
+                    if (good.lineAttribute !== LineAttributeType.折扣行) {
                         good.itemModelName = values.itemModelName;
                         good.itemModelNameSelf = values.itemModelNameSelf;
                     }

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

@@ -13,7 +13,7 @@ import {
   onChangeLineAmountExcludeTax,
   onChangeTaxRate,
   // onSaveEditGood,
-  endowCode,
+  // endowCode,
   onChangeItemName,
 } from './autoFillFn';
 
@@ -51,10 +51,17 @@ export default (form: WrappedFormUtils) => {
   /** 表头 */
   const columns = React.useMemo(() => {
     return [
+      {
+        title: '序号',
+        key: 'serialNo',
+        dataIndex: 'serialNo',
+        width: 50,
+        render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
+      },
       {
         title: (
           <>
-            <Text type="danger">*</Text>货物名称
+            <Text type="danger">*</Text>项目名称
           </>
         ),
         key: 'itemName',
@@ -85,23 +92,14 @@ export default (form: WrappedFormUtils) => {
                     />,
                   )}
                   <div className="kts-invoice-operate-goods-list-able-list-itemName-import">
-                    {!editGood.itemName?.match(/\*[^*]+\*/) && (
-                      <Button
-                        onClick={() => {
-                          endowCode(controller, record);
-                        }}
-                        type="link"
-                        icon="file-add"
-                      />
-                    )}
                     {controller.getGoodsList && (
-                      <Button
-                        onClick={controller.pipeline(async (s) => {
-                          s.goodsListState.importGoods.isVisibleDrawer = true;
-                        })}
-                        type="link"
-                        icon="plus-circle"
-                      />
+                      <Tooltip title="点击从商品管理中添加商品信息">
+                        <Button
+                          onClick={controller.pipeline(async s => { s.goodsListState.importGoods.isVisibleDrawer = true })}
+                          type="link"
+                          icon="plus-circle"
+                        />
+                      </Tooltip>
                     )}
                   </div>
                 </div>
@@ -181,7 +179,7 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return record.unit;
+            return <span style={{ padding: '0 10px' }}>{record.unit}</span>;
           }
         },
       },
@@ -409,7 +407,7 @@ export default (form: WrappedFormUtils) => {
       {
         title: (
           <>
-            <Text type="danger">*</Text>税率
+            <Text type="danger">*</Text>税率%
           </>
         ),
         dataIndex: 'taxRate',
@@ -471,10 +469,9 @@ export default (form: WrappedFormUtils) => {
       },
       {
         title: '操作',
-        dataIndex: 'operating',
         key: 'operating',
-        width: 120,
-        align: 'center',
+        align: 'right',
+        width: 110,
         render: (_value: string, record: IGood) => <RowMenu key={record.lineAttribute} goods={record} />,
       },
     ]
@@ -495,12 +492,8 @@ export default (form: WrappedFormUtils) => {
 
   React.useEffect(() => {
     if (!changeField) return;
-    const t = setTimeout(() => {
-      setChangeField('');
-    }, 1000);
-    return () => {
-      clearTimeout(t)
-    }
+    const t = setTimeout(() => { setChangeField('') }, 1000);
+    return () => { clearTimeout(t) }
   }, [changeField]);
 
   return columns;

package/src/Invoice/ui/GoodsList/hook/useColumns/ui/RowMenu/hook/{useAddComparison → _useAddComparison}/index.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Menu, message, Typography } from 'kts-components-antd-x3';
-import { IGood } from '../../../../../../../../InvoiceController';
+import { IGood, LineAttributeType } from '../../../../../../../../InvoiceController';
 import Invoice from '../../../../../../../../';
 
 const { Text } = Typography;
@@ -29,6 +29,10 @@ export default (goods: IGood) => {
         })
     }, [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>

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

@@ -10,11 +10,16 @@ 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 () => {
         await controller.saveEditGood();
         await controller.wait();
-        await controller.pipeline(async s => {
+        await controller.run(async s => {
             if (s.goodsListState.form) {
                 const err: any = s.goodsListState.form.getFieldsError();
                 for (let key in err) {
@@ -33,20 +38,38 @@ export default (goods: IGood) => {
                 return;
             }
             s.goodsListState.discountGoodIndex = [goods.$index];
-        })();
+        })
     }, [controller, goods.$index]);
 
     if (goods.lineAttribute !== LineAttributeType.正常) {
         return undefined
     }
 
-    return React.useMemo(() => {
-        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]);
+    //     return (
+    //         <Menu.Item key="addDiscount" onClick={onClick}><Text strong>折扣</Text></Menu.Item>
+    //     );
+    // }, [onClick, goods.lineAttribute]);
 };

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

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

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

@@ -14,15 +14,21 @@ export default (goods: IGood) => {
         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])
+    // return React.useMemo(() => {
+    //     return (
+    //         <Button key="endowCode" type="link" onClick={onClick} >赋码</Button>
+    //     );
+    // }, [goods.lineAttribute, onClick])
 };

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

@@ -1,13 +1,17 @@
 import React from 'react';
-import { Button, Menu, Dropdown, Icon } from 'kts-components-antd-x3';
+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 useAddComparison from './hook/useAddComparison';
+
 import './index.less';
-import Invoice from '../../../../../../';
+
+const { Text } = Typography;
 
 export default (props: { goods: IGood }) => {
 
@@ -23,15 +27,16 @@ export default (props: { goods: IGood }) => {
   const delItem = useDelItem(props.goods);
   const addDiscount = useAddDiscount(props.goods);
   const endowCode = useEndowCode(props.goods);
-  const addComparison = useAddComparison(props.goods);
+  // const addComparison = useAddComparison(props.goods);
 
   const itemList = React.useMemo(() => {
     const arr: any[] = [];
 
-    model !== 'prefab' && isAddDiscount !== false && addDiscount && arr.push(addDiscount);  // 添加折扣行
-    arr.push(addComparison);                                                                // 添加商品对照
-    // endowCode && arr.push(endowCode);                                                    // 赋码
-    model !== 'prefab' && delItem && arr.push(delItem);                                     // 删除
+    endowCode && arr.push(endowCode);           // 赋码
+    addDiscount && arr.push(addDiscount);       // 添加折扣行
+    delItem && arr.push(delItem);               // 删除
+
+    // addComparison && arr.push(addComparison);   // 添加商品对照
 
     if (!goodsMenuExpand || goodsMenuExpand.length === 0) return arr;
 
@@ -45,20 +50,49 @@ export default (props: { goods: IGood }) => {
     return arr;
   }, [controller, endowCode, addDiscount, delItem, goodsMenuExpand, props.goods, model, isAddDiscount])
 
-  if (itemList.length === 0) {
+  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>
-      {endowCode}
-      <Dropdown overlay={<Menu>{itemList}</Menu>} trigger={['click']}>
-        <Button className="kts-invoice-operate-goods-list-columns-row-menu ant-btn-icon-only" type="link">
-          <Icon component={SpotSvg} />
-        </Button>
-      </Dropdown>
+    <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/GoodsList/hook/useToGenerateId/index.ts

@@ -0,0 +1,13 @@
+
+import React from 'react'
+import InvoiceController from '../../../../InvoiceController'
+
+/** 更新 商品序号 */
+export default function useToGenerateId(controller: InvoiceController) {
+
+    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
+
+    React.useEffect(() => {
+        goodsList.forEach((e, i) => { e.serialNo = i + 1 });
+    }, [goodsList])
+}

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

@@ -13,7 +13,7 @@ import TaxIncludedSwitch from './ui/TaxIncludedSwitch';
 import DescribeSwitch from './ui/DescribeSwitch';
 import Search from './ui/Search';
 import TableRow from './ui/TableRow';
-import BulkMenu from './ui/BulkMenu';
+// import BulkMenu from './ui/BulkMenu';
 
 import useColumns from './hook/useColumns';
 import useOnRow from './hook/useOnRow';
@@ -25,6 +25,8 @@ import Invoice from '../../';
 import './index.less';
 
 import useEndowCodeButton from './ui/BulkMenu/hooks/useEndowCodeButton';
+import useDelRowButton from './ui/BulkMenu/hooks/useDelRowButton';
+import useAddDiscountRowButton from './ui/BulkMenu/hooks/useAddDiscountRowButton';
 
 export interface IGoodsListProps {
   /** 扩展部分 */
@@ -75,6 +77,12 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
   /** 批量赋码 */
   const endowCodeButton = useEndowCodeButton();
 
+  /** 批量删除 */
+  const delRowButton = useDelRowButton();
+
+  /** 添加折扣行 */
+  const addDiscountRowButton = useAddDiscountRowButton();
+
   /** 清空自动赋码缓存 */
   React.useEffect(() => {
     controller.run(async s => { s.goodsListState.endowCode.cache = {} });
@@ -116,10 +124,16 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
           <AddRowButton />
 
           {/* 批量菜单 */}
-          <BulkMenu />
+          {/* <BulkMenu /> */}
 
           {/* 批量赋码 */}
-          {endowCodeButton.buuton}
+          {endowCodeButton.button}
+
+          {/* 批量删除 */}
+          {delRowButton.button}
+
+          {/* 添加折扣行 */}
+          {addDiscountRowButton.drawer}
 
           {/* 搜索 */}
           <Search />

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

@@ -41,7 +41,7 @@ export default () => {
   if (model === 'prefab') return <></>;
 
   return (
-    <Button icon="plus-circle" onClick={onClick} disabled={disabled}>
+    <Button onClick={onClick} disabled={disabled}>
       添加行
     </Button>
   );

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

@@ -194,23 +194,12 @@ const DrawerBody = decorator<{}, FormComponentProps>(Form.create())((props) => {
           {getFieldDecorator('discount', {
             rules: [
               { required: true, message: '请输入折扣金额' },
-              {
-                pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/,
-                message: '请输入数字',
-              },
+              { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '请输入数字' },
               {
                 validator: (_, value: string, callback) => {
-                  if (!value) {
-                    callback();
-                    return;
-                  }
-                  if (!value.match(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/)?.length) {
-                    callback();
-                    return;
-                  }
-                  if (parseFloat(value) > 100 || parseFloat(value) < 0) {
-                    callback('请输入大于0小于100的数字');
-                  }
+                  if (!value) { callback(); return; }
+                  if (!value.match(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/)?.length) { callback(); return; }
+                  if (parseFloat(value) > 100 || parseFloat(value) < 0) { callback('请输入大于0小于100的数字'); }
                   callback();
                 },
               },
@@ -227,26 +216,12 @@ const DrawerBody = decorator<{}, FormComponentProps>(Form.create())((props) => {
           {getFieldDecorator('discolineAmountunt', {
             rules: [
               { required: true, message: '请输入折扣金额' },
-              {
-                pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/,
-                message: '请输入数字',
-              },
+              { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '请输入数字' },
               {
                 validator: (_, value: string, callback) => {
-                  if (!value) {
-                    callback();
-                    return;
-                  }
-                  if (!value.match(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/)?.length) {
-                    callback();
-                    return;
-                  }
-                  if (
-                    parseFloat(value) > lineAmountSum ||
-                    parseFloat(value) < 0
-                  ) {
-                    callback('请输入大于0小于金额合计的数字');
-                  }
+                  if (!value) { callback(); return; }
+                  if (!value.match(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/)?.length) { callback(); return; }
+                  if (parseFloat(value) > lineAmountSum || parseFloat(value) < 0) { callback('请输入大于0小于金额合计的数字'); }
                   callback();
                 },
               },
@@ -261,12 +236,8 @@ const DrawerBody = decorator<{}, FormComponentProps>(Form.create())((props) => {
         </Form.Item>
       </div>
       <div className="add-discount-row-footer">
-        <Button block style={{ marginBottom: 12 }} onClick={onClose}>
-          取消
-        </Button>
-        <Button type="primary" block onClick={onClickSave}>
-          保存
-        </Button>
+        <Button block style={{ marginBottom: 12 }} onClick={onClose}>取消</Button>
+        <Button type="primary" block onClick={onClickSave}>保存</Button>
       </div>
     </>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Invoice from '../../../../../../';
 import LineAttributeType from '../../../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
-import { Menu } from 'kts-components-antd-x3';
+import { Button, Menu } from 'kts-components-antd-x3';
 
 export default () => {
 
@@ -53,5 +53,14 @@ export default () => {
     )
   }, [model, onClick, disabled])
 
-  return { menuItem };
+  const button = React.useMemo(() => {
+
+    if (model === 'prefab') return <></>;
+
+    return (
+      <Button onClick={onClick} disabled={disabled} >批量删除</Button>
+    )
+  }, [model, onClick, disabled])
+
+  return { button, menuItem };
 };

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

@@ -42,7 +42,7 @@ export default () => {
     )
   }, [onClick, disabled])
 
-  const buuton = React.useMemo(() => {
+  const button = React.useMemo(() => {
     return (
       <Button onClick={onClick} disabled={disabled}>
         批量赋码
@@ -50,5 +50,5 @@ export default () => {
     )
   }, [onClick, disabled])
 
-  return { menuItem, buuton };
+  return { menuItem, button };
 };