kts-component-invoice-operate 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -34,6 +34,7 @@
     "next": "^11.0.1",
     "nzh": "^1.0.4",
     "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "styled-components": "^5.3.0",
     "uuid": "^8.3.2"
   },
@@ -44,6 +45,7 @@
     "dumi": "^1.0.14",
     "father-build": "^1.17.2",
     "gh-pages": "^3.0.0",
+    "invariant": "^2.2.4",
     "kts-components": "^1.2.18",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.1",

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

@@ -40,6 +40,9 @@ export default class GoodsListState {
   /** 税率列表 */
   taxRateList: number[] = [0, 3, 5, 6, 9, 13];
 
+  /** 搜索条件 */
+  searchValue = '';
+
   /** 货物列表 */
   goodsList: IGood[] = [];
 

package/src/Invoice/InvoiceController/fns/getGoodsSearch.ts

@@ -0,0 +1,17 @@
+
+import IGood from "../InvoiceControllerState/GoodsListState/IGood";
+
+export default function getGoodsSearch(goodsList: IGood[], search: string) {
+    if (!search) return goodsList;
+    return goodsList.filter(e => {
+        if ((e.itemName?.indexOf(search) ?? -1) >= 0) {
+            return true;
+        } else if ((e.itemModelName?.indexOf(search) ?? -1) >= 0) {
+            return true
+        } else if (`${e.lineAmountIncludeTax}`.indexOf(search) >= 0) {
+            return true
+        } else {
+            return false;
+        }
+    })
+}

package/src/Invoice/InvoiceController/index.ts

@@ -9,6 +9,7 @@ import delGood from './fns/delGood';
 import addGoodDiscount from './fns/addGoodDiscount';
 import addGood from './fns/addGood';
 import saveEditGood from './fns/saveEditGood';
+import getGoodsSearch from './fns/getGoodsSearch';
 
 export { default as InvoiceControllerState } from './InvoiceControllerState';
 export { default as IGood } from './InvoiceControllerState/GoodsListState/IGood';
@@ -54,4 +55,7 @@ export default class InvoiceController extends InvoiceControllerForm {
 
   /** 税收分类编码列表  */
   getTaxCategoryCodeList?: () => Promise<any>;
+
+  /** 获取筛选后的列表 */
+  getGoodsSearch = getGoodsSearch
 }

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

@@ -1,172 +1,168 @@
 
+import React from "react";
 import { Row, Col, Input, Drawer, Form, Checkbox, Button } from "kts-components-antd-x3";
+import { WrappedFormUtils } from "kts-components-antd-x3/lib/form/Form";
 import { FormComponentProps } from "kts-components-antd-x3/lib/form";
 import { decorator } from "grey-react-box";
 import { Invoice } from "../../../";
 import { getSN } from "../../tools/itemName";
-import React from "react";
-import { WrappedFormUtils } from "kts-components-antd-x3/lib/form/Form";
 
-const AddComparisonDrawer = decorator(
+const AddComparisonDrawer = decorator<{}, FormComponentProps>(
     Form.create()
-)(
-    (props: FormComponentProps) => {
-
-        const { form } = props;
-
-        const { getFieldDecorator } = form;
-
-        /** 控制器 */
-        const controller = Invoice.useInvoiceController();
-
-        /** 正在 添加商品对照 的货物索引 */
-        const addComparisonIndex = controller.useMemo(s => s.goodsListState.addComparisonIndex, []);
-
-        /** 货物字典 */
-        const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
-
-        /** 正在 对照 的货物 */
-        const good = React.useMemo(() => addComparisonIndex ? goodsMap.get(addComparisonIndex) : undefined, [addComparisonIndex])
-
-        /** 关闭对照 */
-        const onClose = React.useCallback(controller.pipeline<any>(async s => {
-            s.goodsListState.addComparisonIndex = undefined
-        }), [controller])
-
-        /** 提交数据 */
-        const onSubmit = React.useCallback(() => {
-            controller.run(async s => {
-                if (!good) return
-
-                const { err, values } = await validateFields(form);
-                if (err) return;
-
-                const shorthand = s.goodsListState.isMyShow ? getSN(good.itemName)?.shorthand : getSN(good.itemNameOther)?.shorthand;
-                good.itemCode = values.itemCode;
-                good.itemCodeOther = values.itemCodeOther;
-                good.itemName = shorthand ? `*${shorthand}*${values.itemName}` : values.itemName;
-                good.itemNameOther = shorthand ? `*${shorthand}*${values.itemNameOther}` : values.itemNameOther;
-                good.itemModelName = values.itemModelName;
-                good.itemModelNameOther = values.itemModelNameOther;
-                good.unit = values.unit;
-                good.unitOther = values.unitOther;
-                s.goodsListState.addComparisonIndex = undefined;
-                s.goodsListState.goodsList = [...s.goodsListState.goodsList]
-
-                if (s.goodsListState?.productComparison?.onUpdateComparisonTable && values.isUpdate) {
-                    debugger
-                    await s.goodsListState.productComparison.onUpdateComparisonTable(good, values);
-                }
-            })
-        }, [form, good])
-
-        React.useEffect(() => {
-            form.resetFields();
-            if (good) {
-                form.setFieldsValue({
-                    ...good,
-                    itemName: getSN(good.itemName)?.full,
-                    itemNameOther: getSN(good.itemNameOther)?.full,
-                })
+)(props => {
+
+    const { form } = props;
+
+    const { getFieldDecorator } = form;
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    /** 正在 添加商品对照 的货物索引 */
+    const addComparisonIndex = controller.useMemo(s => s.goodsListState.addComparisonIndex, []);
+
+    /** 货物字典 */
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
+
+    /** 正在 对照 的货物 */
+    const good = React.useMemo(() => addComparisonIndex ? goodsMap.get(addComparisonIndex) : undefined, [addComparisonIndex]);
+
+    /** 关闭对照 */
+    const onClose = React.useCallback(controller.pipeline<any>(async s => { s.goodsListState.addComparisonIndex = undefined }), [controller]);
+
+    /** 提交数据 */
+    const onSubmit = React.useCallback(() => {
+        controller.run(async s => {
+            if (!good) return
+
+            const { err, values } = await validateFields(form);
+            if (err) return;
+
+            const shorthand = s.goodsListState.isMyShow ? getSN(good.itemName)?.shorthand : getSN(good.itemNameOther)?.shorthand;
+            good.itemCode = values.itemCode;
+            good.itemCodeOther = values.itemCodeOther;
+            good.itemName = shorthand ? `*${shorthand}*${values.itemName}` : values.itemName;
+            good.itemNameOther = shorthand ? `*${shorthand}*${values.itemNameOther}` : values.itemNameOther;
+            good.itemModelName = values.itemModelName;
+            good.itemModelNameOther = values.itemModelNameOther;
+            good.unit = values.unit;
+            good.unitOther = values.unitOther;
+            s.goodsListState.addComparisonIndex = undefined;
+            s.goodsListState.goodsList = [...s.goodsListState.goodsList]
+
+            if (s.goodsListState?.productComparison?.onUpdateComparisonTable && values.isUpdate) {
+                debugger
+                await s.goodsListState.productComparison.onUpdateComparisonTable(good, values);
             }
-        }, [good])
-
-        return (
-            <Drawer
-                width={500}
-                onClose={onClose}
-                placement="right"
-                title="添加商品对照"
-                visible={!!addComparisonIndex}
-                drawerStyle={{ display: 'flex', flexDirection: 'column' }}
-                bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column' }}
-            >
-                <Form layout="vertical" style={{ flex: 1 }} >
-                    <Row gutter={[8, 8]} >
-                        <Col span={12}>
-                            {getFieldDecorator('itemCode', {})(
-                                <Form.Item label="我方商品编码" >
-                                    <Input />
-                                </Form.Item>
-                            )}
-
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('itemCodeOther', {})(
-                                <Form.Item label="对方商品编码" >
-                                    <Input />
-                                </Form.Item>
-                            )}
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('itemName', {
-                                rules: [{ required: true, message: "请输入我方商品名称" }]
-                            })(
-                                <Form.Item label="我方商品名称" >
-                                    <Input />
-                                </Form.Item>
-                            )}
-
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('itemNameOther', {
-                                rules: [{ required: true, message: "请输入对方商品名称" }]
-                            })(
-                                <Form.Item label="对方商品名称">
-                                    <Input />
-                                </Form.Item>
-                            )}
-                        </Col>
-                        <Col span={12} >
-                            <Form.Item label="我方规格型号">
+        })
+    }, [form, good])
+
+    React.useEffect(() => {
+        form.resetFields();
+        if (good) {
+            form.setFieldsValue({
+                ...good,
+                itemName: getSN(good.itemName)?.full,
+                itemNameOther: getSN(good.itemNameOther)?.full,
+            })
+        }
+    }, [good])
+
+    return (
+        <Drawer
+            width={500}
+            onClose={onClose}
+            placement="right"
+            title="添加商品对照"
+            visible={!!addComparisonIndex}
+            drawerStyle={{ display: 'flex', flexDirection: 'column' }}
+            bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+        >
+            <Form layout="vertical" style={{ flex: 1 }} >
+                <Row gutter={[8, 8]} >
+                    <Col span={12}>
+                        {getFieldDecorator('itemCode', {})(
+                            <Form.Item label="我方商品编码" >
+                                <Input />
+                            </Form.Item>
+                        )}
+
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('itemCodeOther', {})(
+                            <Form.Item label="对方商品编码" >
+                                <Input />
+                            </Form.Item>
+                        )}
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('itemName', {
+                            rules: [{ required: true, message: "请输入我方商品名称" }]
+                        })(
+                            <Form.Item label="我方商品名称" >
+                                <Input />
+                            </Form.Item>
+                        )}
+
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('itemNameOther', {
+                            rules: [{ required: true, message: "请输入对方商品名称" }]
+                        })(
+                            <Form.Item label="对方商品名称">
+                                <Input />
+                            </Form.Item>
+                        )}
+                    </Col>
+                    <Col span={12} >
+                        <Form.Item label="我方规格型号">
+                            <Input />
+                        </Form.Item>
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('itemModelNameOther', {
+                            rules: [{ required: true, message: "请输入对方规格型号" }]
+                        })(
+                            <Form.Item label="对方规格型号">
+                                <Input />
+                            </Form.Item>
+                        )}
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('unit', {
+                            rules: [{ required: true, message: "请输入对方规格型号" }]
+                        })(
+                            <Form.Item label="我方计量单位"  >
+                                <Input />
+                            </Form.Item>
+                        )}
+                    </Col>
+                    <Col span={12} >
+                        {getFieldDecorator('unitOther', {
+                            rules: [{ required: true, message: "请输入对方计量单位" }]
+                        })(
+                            <Form.Item label="对方计量单位"  >
                                 <Input />
                             </Form.Item>
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('itemModelNameOther', {
-                                rules: [{ required: true, message: "请输入对方规格型号" }]
-                            })(
-                                <Form.Item label="对方规格型号">
-                                    <Input />
-                                </Form.Item>
-                            )}
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('unit', {
-                                rules: [{ required: true, message: "请输入对方规格型号" }]
-                            })(
-                                <Form.Item label="我方计量单位"  >
-                                    <Input />
-                                </Form.Item>
-                            )}
-                        </Col>
-                        <Col span={12} >
-                            {getFieldDecorator('unitOther', {
-                                rules: [{ required: true, message: "请输入对方计量单位" }]
-                            })(
-                                <Form.Item label="对方计量单位"  >
-                                    <Input />
-                                </Form.Item>
-                            )}
-                        </Col>
-                        <Col span={24} >
-                            {getFieldDecorator('isUpdate', {
-                            })(
-                                <Form.Item >
-                                    <Checkbox>更新到商品对照表中</Checkbox>
-                                </Form.Item>
-                            )}
-                        </Col>
-                    </Row>
-                </Form>
-                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }} >
-                    <Button type="primary" onClick={onSubmit} >提交</Button>
-                    <Button onClick={onClose} >取消</Button>
-                </div>
-            </Drawer>
-        )
-    }
-)
+                        )}
+                    </Col>
+                    <Col span={24} >
+                        {getFieldDecorator('isUpdate', {
+                        })(
+                            <Form.Item >
+                                <Checkbox>更新到商品对照表中</Checkbox>
+                            </Form.Item>
+                        )}
+                    </Col>
+                </Row>
+            </Form>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }} >
+                <Button type="primary" onClick={onSubmit} >提交</Button>
+                <Button onClick={onClose} >取消</Button>
+            </div>
+        </Drawer>
+    )
+})
 
 export default AddComparisonDrawer;
 

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,7 +12,7 @@ import {
   onChangeLineAmountIncludeTax,
   onChangeLineAmountExcludeTax,
   onChangeTaxRate,
-  onSaveEditGood,
+  // onSaveEditGood,
   endowCode,
   onChangeItemName,
 } from './autoFillFn';
@@ -33,6 +33,9 @@ export default (form: WrappedFormUtils) => {
   /** 正在编辑的货物 */
   const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
 
+  /** 搜索条件 */
+  const searchValue = controller.useMemo((e) => e.goodsListState.searchValue, []);
+
   /** 税率列表 */
   const taxRateList = controller.useMemo((e) => e.goodsListState.taxRateList, []);
 
@@ -105,7 +108,16 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <MyItemNameDiv valueT={record.itemName} valueF={record.itemNameOther} isMyShow={isMyShow} />
+            return (
+              <MyItemNameDiv
+                valueT={formatSearch(record.itemName, searchValue)}
+                valueF={record.itemNameOther}
+                isMyShow={isMyShow}
+              />
+            )
+            // return (
+            //   <span style={{ padding: '0 10px' }}>{formatSearch(value, searchValue)}</span>
+            // );
           }
         },
       },
@@ -133,7 +145,14 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <MyItemNameDiv valueT={record.itemModelName} valueF={record.itemModelNameOther} isMyShow={isMyShow} />
+            return (
+              <MyItemNameDiv 
+                valueT={formatSearch(record.itemModelName, searchValue)} 
+                valueF={formatSearch(record.itemModelNameOther, searchValue)} 
+                isMyShow={isMyShow} 
+              />
+            )
+            // return <span style={{ padding: '0 10px' }}>{formatSearch(value, searchValue)}</span>;
           }
         },
       },
@@ -340,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>;
           }
         },
       },
@@ -472,7 +491,7 @@ export default (form: WrappedFormUtils) => {
           ellipsis: true,
         };
       }) as any[];
-  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow]);
+  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow, searchValue]);
 
   React.useEffect(() => {
     if (!changeField) return;
@@ -513,7 +532,7 @@ class MyDiv extends React.Component<{ value?: any }> {
   }
 }
 
-class MyItemNameDiv extends React.Component<{ valueT?: string, valueF?: string, isMyShow: boolean }> {
+class MyItemNameDiv extends React.Component<{ valueT?: React.ReactNode, valueF?: React.ReactNode, isMyShow: boolean }> {
   render(): React.ReactNode {
 
     const { isMyShow, valueT, valueF } = this.props;
@@ -540,4 +559,11 @@ class MyItemNameDiv extends React.Component<{ valueT?: string, valueF?: string,
       }
     }
   }
-}
+}
+/** 格式搜索结果 */
+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/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

@@ -13,7 +13,10 @@
   }
 
   .kts-invoice-operate-goods-list-able-list {
-    flex: 1;
+    flex         : 1;
+    display      : flex;
+    gap          : 10px;
+    padding-right: 10px;
 
     button {
       padding-left : 10px;
@@ -21,7 +24,6 @@
       border-radius: 12px;
       color        : #0074ff;
       border       : 1px solid #0074ff;
-      margin       : 0 10px;
       height       : 24px;
       line-height  : 22px;
       cursor       : pointer;
@@ -123,4 +125,10 @@
       box-shadow         : none;
     }
   }
+}
+
+.kts-invoice-operate-goods-list-table-search-protrude {
+  background : #ff0;
+  color      : #000;
+  font-weight: bold;
 }