kts-component-invoice-operate 1.2.22 → 2.0.0

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

@@ -14,6 +14,7 @@ import {
   onChangeTaxRate,
   onSaveEditGood,
   endowCode,
+  onChangeItemName,
 } from './autoFillFn';
 
 const { Text } = Typography;
@@ -26,6 +27,9 @@ export default (form: WrappedFormUtils) => {
   /** 是否含税 */
   const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
 
+  /** 是否显示我方 */
+  const isMyShow = controller.useMemo(e => e.goodsListState.isMyShow, []);
+
   /** 正在编辑的货物 */
   const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
 
@@ -50,21 +54,30 @@ export default (form: WrappedFormUtils) => {
             <Text type="danger">*</Text>货物名称
           </>
         ),
-        dataIndex: 'itemName',
         key: 'itemName',
-        render: (value: string, record: IGood) => {
+        render: (_: string, record: IGood) => {
           if (editGood?.$index === record.$index) {
             return (
               <Form.Item>
                 <div style={{ display: 'flex' }} >
                   {getFieldDecorator('itemName', {
-                    initialValue: editGood.itemName,
-                    rules: [{ required: true, message: '货物名称不能为空' }],
+                    initialValue: isMyShow ? record.itemName : record.itemNameOther,
+                    rules: [{
+                      validator: async (_, __, callback) => {
+                        await controller.wait();
+                        const value = controller.state.goodsListState.editGood;
+                        if (!value?.itemName && !value?.itemNameOther) {
+                          callback('货物名称不能为空');
+                        } else {
+                          return;
+                        }
+                      }
+                    }]
                   })(
                     <MyInput
                       style={{ flex: 1 }}
                       onChange={() => {
-                        onSaveEditGood(controller, form, record, 'itemName');
+                        onChangeItemName(controller, form, record);
                       }}
                     />,
                   )}
@@ -80,11 +93,9 @@ export default (form: WrappedFormUtils) => {
                     )}
                     {controller.getGoodsList && (
                       <Button
-                        onClick={() => {
-                          controller.pipeline(async (s) => {
-                            s.goodsListState.importGoods.isVisibleDrawer = true;
-                          })();
-                        }}
+                        onClick={controller.pipeline(async (s) => {
+                          s.goodsListState.importGoods.isVisibleDrawer = true;
+                        })}
                         type="link"
                         icon="plus-circle"
                       />
@@ -94,41 +105,43 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <span style={{ padding: '0 10px' }}>{value}</span>;
+            return <MyItemNameDiv valueT={record.itemName} valueF={record.itemNameOther} isMyShow={isMyShow} />
           }
         },
       },
       {
         title: '货物规格型号',
-        dataIndex: 'itemModelName',
         key: 'itemModelName',
         width: 119,
-        render: (value: string, record: IGood) => {
+        render: (_: string, record: IGood) => {
           if (editGood?.$index === record.$index) {
             return (
               <Form.Item>
                 {getFieldDecorator('itemModelName', {
-                  initialValue: editGood.itemModelName,
+                  initialValue: isMyShow ? editGood.itemModelName : editGood.itemModelNameOther,
                 })(
                   <MyInput
-                    onChange={() => {
-                      onSaveEditGood(controller, form, record, 'itemModelName');
+                    onChange={async () => {
+                      await controller.wait()
+                      const key = isMyShow ? 'itemModelName' : 'itemModelNameOther';
+                      const value = {} as any;
+                      value[key] = form.getFieldsValue().itemModelName;
+                      controller.setEditGood(value);
                     }}
                   />,
                 )}
               </Form.Item>
             );
           } else {
-            return <span style={{ padding: '0 10px' }}>{value}</span>;
+            return <MyItemNameDiv valueT={record.itemModelName} valueF={record.itemModelNameOther} isMyShow={isMyShow} />
           }
         },
       },
       {
         title: '单位',
-        dataIndex: 'unit',
         key: 'unit',
         width: 70,
-        render: (value: string, record: IGood) => {
+        render: (_: string, record: IGood) => {
           if (editGood?.$index === record.$index) {
             return (
               <Form.Item>
@@ -138,15 +151,19 @@ export default (form: WrappedFormUtils) => {
                   <AutoComplete
                     style={{ width: '100%' }}
                     dataSource={unitList}
-                    onChange={() => {
-                      onSaveEditGood(controller, form, record, 'unit');
+                    onChange={async () => {
+                      await controller.wait()
+                      const key = isMyShow ? 'unit' : 'unitOther';
+                      const value = {} as any;
+                      value[key] = form.getFieldsValue().unit;
+                      controller.setEditGood(value);
                     }}
                   />,
                 )}
               </Form.Item>
             );
           } else {
-            return <span style={{ padding: '0 10px' }}>{value}</span>;
+            return <MyItemNameDiv valueT={record.unit} valueF={record.unitOther} isMyShow={isMyShow} />;
           }
         },
       },
@@ -444,13 +461,9 @@ export default (form: WrappedFormUtils) => {
     ]
       .filter((e) => {
         if (isTaxIncluded) {
-          return !(
-            e.key === 'priceExcludeTax' || e.key === 'lineAmountExcludeTax'
-          );
+          return !(e.key === 'priceExcludeTax' || e.key === 'lineAmountExcludeTax');
         } else {
-          return !(
-            e.key === 'priceIncludeTax' || e.key === 'lineAmountIncludeTax'
-          );
+          return !(e.key === 'priceIncludeTax' || e.key === 'lineAmountIncludeTax');
         }
       })
       .map((e) => {
@@ -459,7 +472,7 @@ export default (form: WrappedFormUtils) => {
           ellipsis: true,
         };
       }) as any[];
-  }, [isTaxIncluded, editGood, controller, changeField, deduction]);
+  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow]);
 
   React.useEffect(() => {
     if (!changeField) return;
@@ -499,3 +512,32 @@ class MyDiv extends React.Component<{ value?: any }> {
     return <span style={{ padding: '0 10px' }}>{this.props.value}</span>;
   }
 }
+
+class MyItemNameDiv extends React.Component<{ valueT?: string, valueF?: string, isMyShow: boolean }> {
+  render(): React.ReactNode {
+
+    const { isMyShow, valueT, valueF } = this.props;
+
+    if (isMyShow) {
+      if (valueT) {
+        return (
+          <span style={{ padding: '0 10px', color: '#0074ff' }}>{valueT}</span>
+        )
+      } else {
+        return (
+          <span style={{ padding: '0 10px' }}>{valueF}</span>
+        )
+      }
+    } else {
+      if (valueF) {
+        return (
+          <span style={{ padding: '0 10px' }}>{valueF}</span>
+        )
+      } else {
+        return (
+          <span style={{ padding: '0 10px', color: '#0074ff' }}>{valueT}</span>
+        )
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+/** 添加商品对照 */
+
+import React from 'react';
+import { Menu, message, Typography } from 'kts-components-antd-x3';
+import { IGood } 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]);
+
+    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/GoodsList/hook/useColumns/ui/RowMenu/index.tsx

@@ -5,6 +5,7 @@ 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';
 import Invoice from '../../../../../../';
 
@@ -22,13 +23,15 @@ 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 itemList = React.useMemo(() => {
     const arr: any[] = [];
     
     model !=='prefab' && isAddDiscount !== false && addDiscount && arr.push(addDiscount);  // 添加折扣行
-    endowCode && arr.push(endowCode);                           // 赋码
-    model !=='prefab' && delItem && arr.push(delItem);          // 删除
+    arr.push(addComparison);                                                               // 添加商品对照
+    endowCode && arr.push(endowCode);                                                      // 赋码
+    model !=='prefab' && delItem && arr.push(delItem);                                     // 删除
 
     if (!goodsMenuExpand || goodsMenuExpand.length === 0) return arr;
 

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

@@ -7,8 +7,8 @@
   }
 
   .kts-invoice-operate-goods-list-able {
-    display: flex;
-    padding: 10px;
+    display      : flex;
+    padding      : 10px;
     border-bottom: 1px solid #dcdcdc;
   }
 
@@ -16,37 +16,34 @@
     flex: 1;
 
     button {
-      padding-left: 10px;
+      padding-left : 10px;
       padding-right: 10px;
       border-radius: 12px;
-      color: #0074ff;
-      border: 1px solid #0074ff;
-      margin: 0 10px;
-      height: 24px;
-      line-height: 22px;
-      cursor: pointer;
-      font-size: 12px;
+      color        : #0074ff;
+      border       : 1px solid #0074ff;
+      margin       : 0 10px;
+      height       : 24px;
+      line-height  : 22px;
+      cursor       : pointer;
+      font-size    : 12px;
     }
 
     button[disabled] {
-      color: rgba(0, 0, 0, 0.25);
+      color : rgba(0, 0, 0, 0.25);
       border: 1px solid;
     }
   }
 
   .kts-invoice-operate-goods-list-able-extend {
-    flex: none;
+    flex   : none;
     display: flex;
-
-    label {
-      margin-right: 5px;
-    }
+    gap    : 5px;
   }
 }
 
-.kts-invoice-operate-goods-list-table.kts-invoice-operate-prefab{
-  .ktsAnt3x-table-row{
-    color: rgba(0, 0, 0, 0.25);
+.kts-invoice-operate-goods-list-table.kts-invoice-operate-prefab {
+  .ktsAnt3x-table-row {
+    color     : rgba(0, 0, 0, 0.25);
     background: #f5f5f5;
   }
 }
@@ -55,7 +52,7 @@
   border-bottom: 1px solid #dcdcdc;
 
   .kts-invoice-operate-goods-discount {
-    color: rgba(0, 0, 0, 0.25);
+    color     : rgba(0, 0, 0, 0.25);
     background: #f5f5f5;
   }
 
@@ -63,15 +60,15 @@
     display: flex;
 
     .ktsAnt3x-btn {
-      display: block;
-      line-height: 0;
-      width: auto;
+      display      : block;
+      line-height  : 0;
+      width        : auto;
       padding-right: 5px;
     }
   }
 
   .ktsAnt3x-form-item-children {
-    height: 30px;
+    height : 30px;
     display: block;
   }
 
@@ -81,8 +78,8 @@
 
   .ktsAnt3x-form-explain {
     position: absolute;
-    right: 6px;
-    top: 6px;
+    right   : 6px;
+    top     : 6px;
   }
 
   table {
@@ -98,7 +95,7 @@
 
     .ktsAnt3x-form-item {
       padding: 0;
-      margin: 0;
+      margin : 0;
 
       .ktsAnt3x-form-item-control {
         line-height: inherit;
@@ -108,22 +105,22 @@
     .has-error .ktsAnt3x-select-selection,
     .has-error .ktsAnt3x-input,
     .has-error .ktsAnt3x-input:hover {
-      border-right-width: 1px !important;
-      border-top-width: 1px;
-      border-left-width: 1px;
+      border-right-width : 1px !important;
+      border-top-width   : 1px;
+      border-left-width  : 1px;
       border-bottom-width: 1px;
     }
 
     .ktsAnt3x-select-selection--single,
     .ktsAnt3x-select-auto-complete.ktsAnt3x-select .ktsAnt3x-input:hover,
     .ktsAnt3x-input {
-      height: 30px;
-      border-radius: 0;
-      border-right-width: 0 !important;
-      border-top-width: 0;
-      border-left-width: 0;
+      height             : 30px;
+      border-radius      : 0;
+      border-right-width : 0 !important;
+      border-top-width   : 0;
+      border-left-width  : 0;
       border-bottom-width: 0;
-      box-shadow: none;
+      box-shadow         : none;
     }
   }
-}
+}

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

@@ -10,10 +10,12 @@ import TableVirtual from './ui/TableVirtual';
 import Statistics from './ui/Statistics';
 import AddRowButton from './ui/AddRowButton';
 import TaxIncludedSwitch from './ui/TaxIncludedSwitch';
+import DescribeSwitch from './ui/DescribeSwitch';
 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 useColumns from './hook/useColumns';
 import useOnRow from './hook/useOnRow';
@@ -112,12 +114,18 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
 
           {/* 批量赋码 */}
           <EndowCodeButton />
+
+          {/* 执行商品对照 */}
+          <CommodityComparisonButton/>
         </div>
         <div className="kts-invoice-operate-goods-list-able-extend">
 
           {/* 扩展部分 */}
           {props.menuExpansion}
 
+          {/* 使用哪方商品描述 */}
+          <DescribeSwitch />
+
           {/* 是否含税开关 */}
           <TaxIncludedSwitch />
         </div>

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

@@ -0,0 +1,74 @@
+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 '../../../../../';
+
+export default () => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const { onComply } = controller.useMemo(s => s.goodsListState.productComparison, [])
+
+  /** 是否禁用 */
+  const disabled = controller.useMemo((s) => {
+    if (s.goodsListState.selectedGoodIndex.length <= 0) return true;
+  }, []);
+
+  /** 点击了 */
+  const onClick = React.useCallback(async () => {
+    await controller.saveEditGood();
+    await controller.wait();
+    await controller.run(async s => {
+
+      // 不能给正在编辑的货物对照
+      if (s.goodsListState.editGood && s.goodsListState.selectedGoodIndex.indexOf(s.goodsListState.editGood.$index) >= 0) {
+        coolingFn('不能给正在编辑的货物执行商品对照', 3000, () => { message.error('不能给正在编辑的货物执行商品对照') });
+        return;
+      }
+
+      if (!s.goodsListState?.productComparison?.onComply) return;
+
+      const goods = s.goodsListState.selectedGoodIndex.map(e => {
+        const t = s.goodsListState.goodsMap.get(e);
+        if (!t) return undefined;
+
+        return {
+          ...t,
+          itemName: getSN(t.itemName)?.full,
+          itemNameOther: getSN(t.itemNameOther)?.full,
+        } as IGood
+      }).filter(e => !!e) as IGood[]
+
+
+      // 比对后的商品
+      const newGoods = await s.goodsListState.productComparison.onComply(goods);
+
+      newGoods.filter(e => {
+        const vt = s.goodsListState.goodsMap.get(e.$index);
+        if (!vt) return undefined;
+
+        vt.itemName = e.itemName ? setShorthand(e.itemName, getSN(vt.itemName)?.shorthand) : vt.itemName;
+        vt.itemNameOther = e.itemNameOther ? setShorthand(e.itemNameOther, getSN(vt.itemNameOther)?.shorthand) : vt.itemNameOther;
+
+        vt.unit = e.unit ? e.unit : vt.unit;
+        vt.unitOther = e.unitOther ? e.unitOther : vt.unitOther;
+
+        vt.itemModelName = e.itemModelName ? e.itemModelName : vt.itemModelName;
+        vt.itemModelNameOther = e.itemModelNameOther ? e.itemModelNameOther : vt.itemModelNameOther;
+
+        vt.itemCode = e.itemCode ? e.itemCode : vt.itemCode;
+        vt.itemCodeOther = e.itemCodeOther ? e.itemCodeOther : vt.itemCodeOther;
+      })
+    })
+  }, [])
+
+  // 没用 执行商品对照 的方法 不显示按钮
+  if (!onComply) return <></>;
+
+  return (
+    <Button icon='swap' disabled={disabled} onClick={onClick} >
+      执行商品对照
+    </Button>
+  );
+};

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

@@ -0,0 +1,37 @@
+
+import React from 'react';
+import { Switch, Icon, Tooltip } from 'kts-components-antd-x3';
+import Invoice from '../../../../';
+
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const productComparison = controller.useMemo(s => s.goodsListState.productComparison, [])
+
+    const isMyShow = controller.useMemo(s => s.goodsListState.isMyShow, []);
+
+    const onChange = React.useCallback(e => {
+        controller.run(async s => s.goodsListState.isMyShow = !s.goodsListState.isMyShow)
+    }, [])
+
+    if (!productComparison.onComply) return <></>;
+
+    return (
+        <span>
+            <label style={{ marginRight: 2 }} >
+                <Tooltip title="蓝色代表我方商品描述，黑色代表对方的商品描述。">
+                    <Icon style={{ marginRight: 3 }} type="info-circle" />
+                </Tooltip>
+                使用哪方商品描述:
+            </label>
+            <Switch
+                checked={isMyShow}
+                checkedChildren="我方"
+                unCheckedChildren="对方"
+                defaultChecked
+                onChange={onChange}
+            />
+        </span>
+    )
+}

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

@@ -14,12 +14,12 @@ export default () => {
     const isSwitchTax = controller.useMemo(e => e.goodsListState.isSwitchTax, []);
 
     const onChange = React.useCallback(e => {
-        controller.pipeline(async s => { s.goodsListState = { ...s.goodsListState, isTaxIncluded: e } })()
+        controller.pipeline(async s => { s.goodsListState = { ...s.goodsListState, isTaxIncluded: e } })();
     }, [])
 
     return (
         <span>
-            <label>含税:</label>
+            <label style={{ marginRight: 2 }}>含税:</label>
             <Switch
                 disabled={isSwitchTax === false}
                 checked={isTaxIncluded}