kts-component-invoice-operate 1.2.22 → 2.0.1

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { Form, AutoComplete, Select, Typography, Button, Input, Spin } from 'kts-components-antd-x3';
 import { InputProps } from 'kts-components-antd-x3/lib/input';
 import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
-import Invoice from '../../../../';
 import { IGood } from '../../../../InvoiceController';
+import Invoice from '../../../../';
 import RowMenu from './ui/RowMenu';
 import {
   onChangeQuantity,
@@ -12,8 +12,9 @@ import {
   onChangeLineAmountIncludeTax,
   onChangeLineAmountExcludeTax,
   onChangeTaxRate,
-  onSaveEditGood,
+  // onSaveEditGood,
   endowCode,
+  onChangeItemName,
 } from './autoFillFn';
 
 const { Text } = Typography;
@@ -26,9 +27,15 @@ 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, []);
 
+  /** 搜索条件 */
+  const searchValue = controller.useMemo((e) => e.goodsListState.searchValue, []);
+
   /** 税率列表 */
   const taxRateList = controller.useMemo((e) => e.goodsListState.taxRateList, []);
 
@@ -50,21 +57,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 +96,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 +108,59 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <span style={{ padding: '0 10px' }}>{value}</span>;
+            return (
+              <MyItemNameDiv
+                valueT={formatSearch(record.itemName, searchValue)}
+                valueF={record.itemNameOther}
+                isMyShow={isMyShow}
+              />
+            )
+            // return (
+            //   <span style={{ padding: '0 10px' }}>{formatSearch(value, searchValue)}</span>
+            // );
           }
         },
       },
       {
         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={formatSearch(record.itemModelName, searchValue)} 
+                valueF={formatSearch(record.itemModelNameOther, searchValue)} 
+                isMyShow={isMyShow} 
+              />
+            )
+            // return <span style={{ padding: '0 10px' }}>{formatSearch(value, searchValue)}</span>;
           }
         },
       },
       {
         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 +170,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} />;
           }
         },
       },
@@ -323,7 +359,7 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <span style={{ padding: '0 10px' }}>{parseFloat(value).toFixed(2)}</span>;
+            return <span style={{ padding: '0 10px' }}>{formatSearch(parseFloat(value).toFixed(2), searchValue)}</span>;
           }
         },
       },
@@ -444,13 +480,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 +491,7 @@ export default (form: WrappedFormUtils) => {
           ellipsis: true,
         };
       }) as any[];
-  }, [isTaxIncluded, editGood, controller, changeField, deduction]);
+  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow, searchValue]);
 
   React.useEffect(() => {
     if (!changeField) return;
@@ -499,3 +531,39 @@ class MyDiv extends React.Component<{ value?: any }> {
     return <span style={{ padding: '0 10px' }}>{this.props.value}</span>;
   }
 }
+
+class MyItemNameDiv extends React.Component<{ valueT?: React.ReactNode, valueF?: React.ReactNode, 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>
+        )
+      }
+    }
+  }
+}
+/** 格式搜索结果 */
+function formatSearch(value?: string, search?: string) {
+  if (!value || !search) return value;
+
+  const __html = value.split(new RegExp(search, 'g')).join(`<span class="kts-invoice-operate-goods-list-table-search-protrude" >${search}</span>`);
+  return <span dangerouslySetInnerHTML={{ __html }} />
+}

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/hook/useRowSelection/index.tsx

@@ -15,20 +15,46 @@ export default () => {
     /** 货物列表 */
     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 => 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).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).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(() => {
+    const onClickSelectAll = React.useCallback(async () => {
         if (isAll) {
-            controller.pipeline(async s => {
-                s.goodsListState.selectedGoodIndex = [];
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue).map(e => e.$index)
+
+                s.goodsListState.selectedGoodIndex = s.goodsListState.selectedGoodIndex.filter(e=>!seeGoodsIndex.some(t => e === t));
             })()
         } else {
-            controller.pipeline(async s => {
-                s.goodsListState.selectedGoodIndex = s.goodsListState.goodsList.map(e => e.$index);
+            // controller.pipeline(async s => {
+            //     s.goodsListState.selectedGoodIndex = s.goodsListState.goodsList.map(e => e.$index);
+            // })()
+
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = controller.getGoodsSearch(s.goodsListState.goodsList, s.goodsListState.searchValue).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) => {
@@ -50,11 +76,11 @@ export default () => {
         return (
             <Checkbox
                 onChange={onClickSelectAll}
-                indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < goodsList.length}
+                indeterminate={indeterminate}
                 checked={isAll}
             ></Checkbox>
         )
-    }, [goodsList, selectedRowKeys, onClickSelectAll, isAll])
+    }, [goodsList, selectedRowKeys, onClickSelectAll, isAll, indeterminate])
 
     /** 选择了商品后 调整 折扣行 和 被折扣行 */
     const sortOut = React.useCallback(async (selected: boolean) => {

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

@@ -7,46 +7,45 @@
   }
 
   .kts-invoice-operate-goods-list-able {
-    display: flex;
-    padding: 10px;
+    display      : flex;
+    padding      : 10px;
     border-bottom: 1px solid #dcdcdc;
   }
 
   .kts-invoice-operate-goods-list-able-list {
-    flex: 1;
+    flex         : 1;
+    display      : flex;
+    gap          : 10px;
+    padding-right: 10px;
 
     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;
+      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 +54,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 +62,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 +80,8 @@
 
   .ktsAnt3x-form-explain {
     position: absolute;
-    right: 6px;
-    top: 6px;
+    right   : 6px;
+    top     : 6px;
   }
 
   table {
@@ -98,7 +97,7 @@
 
     .ktsAnt3x-form-item {
       padding: 0;
-      margin: 0;
+      margin : 0;
 
       .ktsAnt3x-form-item-control {
         line-height: inherit;
@@ -108,22 +107,28 @@
     .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;
     }
   }
 }
+
+.kts-invoice-operate-goods-list-table-search-protrude {
+  background : #ff0;
+  color      : #000;
+  font-weight: bold;
+}

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

@@ -10,10 +10,10 @@ 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 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 BulkMenu from './ui/BulkMenu';
 
 import useColumns from './hook/useColumns';
 import useOnRow from './hook/useOnRow';
@@ -56,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();
 
@@ -69,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 产品最大数 更新 */
@@ -104,20 +108,20 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
           {/* 添加行 */}
           <AddRowButton />
 
-          {/* 删除行 */}
-          <DelRowButton />
+          {/* 批量菜单 */}
+          <BulkMenu />
 
-          {/* 添加折扣行 */}
-          <AddDiscountRowButton />
-
-          {/* 批量赋码 */}
-          <EndowCodeButton />
+          {/* 搜索 */}
+          <Search />
         </div>
         <div className="kts-invoice-operate-goods-list-able-extend">
 
           {/* 扩展部分 */}
           {props.menuExpansion}
 
+          {/* 使用哪方商品描述 */}
+          <DescribeSwitch />
+
           {/* 是否含税开关 */}
           <TaxIncludedSwitch />
         </div>
@@ -130,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();