kts-component-invoice-operate 2.0.0 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -30,10 +30,13 @@
     "classnames": "^2.3.1",
     "grey-react-box": "^0.2.20",
     "kts-components-antd-x3": "^3.26.20-5",
+    "kts-components-antd-x4": "^4.0.3",
+    "kts-xui": "^1.0.30",
     "mathjs": "^9.4.2",
     "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 +47,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/IGood/index.ts

@@ -10,29 +10,26 @@ export default interface IGood {
   /** 发票ID */
   id?: string;
 
-  /** 商品编码(我方) */
+  /** 商品编码(对方-购买方) */
   itemCode?: string;
 
-  /** 货物名称(我方) */
+  /** 货物名称(对方-购买方) */
   itemName?: string;
 
-  /** 单位(我方) */
+  /** 单位(对方-购买方) */
   unit?: string;
 
-  /** 货物规格型号(我方) */
+  /** 货物规格型号(对方-购买方) */
   itemModelName?: string;
 
-  /** 商品编码(对方) */
-  itemCodeOther?: string;
+  /** 商品编码(我方-销售) */
+  itemCodeSelf?: string;
 
-  /** 货物名称(对方) */
-  itemNameOther?: string;
+  /** 货物名称(我方-销售) */
+  itemNameSelf?: string;
 
-  /** 单位(对方) */
-  unitOther?: string;
-
-  /** 货物规格型号(对方) */
-  itemModelNameOther?: string;
+  /** 货物规格型号(我方-销售) */
+  itemModelNameSelf?: string;
 
   /** 数量 */
   quantity?: number;

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

@@ -6,5 +6,5 @@ export default class ProductComparison {
     onComply?: (e: IGood[]) => Promise<IGood[]>
 
     /** 更新对照表 */
-    onUpdateComparisonTable?: (e: IGood, values:any) => Promise<void>
+    // onUpdateComparisonTable?: (e: IGood, values:any) => Promise<void>
 }

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/tools/itemName/index.ts

@@ -10,7 +10,6 @@ export interface ISN {
 
 /** 拆分全称加简称 */
 export const getSN = (value?: string): ISN | undefined => {
-    debugger;
     if (!value) return undefined;
     const arr = value.match(/\*[^*]+\*/);
     if (arr && arr[0]) {

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

@@ -1,179 +1,135 @@
 
-import { Row, Col, Input, Drawer, Form, Checkbox, Button } from "kts-components-antd-x3";
-import { FormComponentProps } from "kts-components-antd-x3/lib/form";
-import { decorator } from "grey-react-box";
+import React from "react";
+import { Row, Col, Input, Button } from "kts-components-antd-x3";
+import { Form, Drawer } from "kts-xui";
 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(
-    Form.create()
-)(
-    (props: FormComponentProps) => {
 
-        const { form } = props;
+export default function AddComparisonDrawer() {
 
-        const { getFieldDecorator } = form;
+    const [form] = Form.useForm();
 
-        /** 控制器 */
-        const controller = Invoice.useInvoiceController();
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
 
-        /** 正在 添加商品对照 的货物索引 */
-        const addComparisonIndex = controller.useMemo(s => s.goodsListState.addComparisonIndex, []);
+    /** 正在 添加商品对照 的货物索引 */
+    const addComparisonIndex = controller.useMemo(s => s.goodsListState.addComparisonIndex, []);
 
-        /** 货物字典 */
-        const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
+    /** 货物字典 */
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
 
-        /** 正在 对照 的货物 */
-        const good = React.useMemo(() => addComparisonIndex ? goodsMap.get(addComparisonIndex) : undefined, [addComparisonIndex])
+    /** 正在 对照 的货物 */
+    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 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 onSubmit = React.useCallback(() => {
+        controller.run(async s => {
+            if (!good) return
 
-                const { err, values } = await validateFields(form);
-                if (err) return;
+            try {
+                const values = await form.validateFields()
+                const shorthand = s.goodsListState.isMyShow ? getSN(good.itemNameSelf)?.shorthand : getSN(good.itemName)?.shorthand;
 
-                const shorthand = s.goodsListState.isMyShow ? getSN(good.itemName)?.shorthand : getSN(good.itemNameOther)?.shorthand;
                 good.itemCode = values.itemCode;
-                good.itemCodeOther = values.itemCodeOther;
+                good.itemCodeSelf = values.itemCodeSelf;
                 good.itemName = shorthand ? `*${shorthand}*${values.itemName}` : values.itemName;
-                good.itemNameOther = shorthand ? `*${shorthand}*${values.itemNameOther}` : values.itemNameOther;
+                good.itemNameSelf = shorthand ? `*${shorthand}*${values.itemNameSelf}` : values.itemNameSelf;
                 good.itemModelName = values.itemModelName;
-                good.itemModelNameOther = values.itemModelNameOther;
-                good.unit = values.unit;
-                good.unitOther = values.unitOther;
+                good.itemModelNameSelf = values.itemModelNameSelf;
+
                 s.goodsListState.addComparisonIndex = undefined;
-                s.goodsListState.goodsList = [...s.goodsListState.goodsList]
+                s.goodsListState.goodsList = [...s.goodsListState.goodsList];
+            } catch (error) {
 
-                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,
+                itemNameSelf: getSN(good.itemNameSelf)?.full,
             })
-        }, [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={!!good}
+            footer={
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }} >
+                    <Button type="primary" onClick={onSubmit} >提交</Button>
+                    <Button onClick={onClose} >取消</Button>
+                </div>
             }
-        }, [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 }} >
+        >
+            {
+                !!good &&
+                <Form layout="vertical" style={{ flex: 1 }} form={form} >
                     <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>
-                            )}
-
+                            <Form.Item
+                                name="itemCodeSelf"
+                                label="我方商品编码"
+                            >
+                                <Input />
+                            </Form.Item>
                         </Col>
                         <Col span={12} >
-                            {getFieldDecorator('itemNameOther', {
-                                rules: [{ required: true, message: "请输入对方商品名称" }]
-                            })(
-                                <Form.Item label="对方商品名称">
-                                    <Input />
-                                </Form.Item>
-                            )}
+                            <Form.Item
+                                name="itemCode"
+                                label="对方商品编码"
+                            >
+                                <Input />
+                            </Form.Item>
                         </Col>
                         <Col span={12} >
-                            <Form.Item label="我方规格型号">
+                            <Form.Item
+                                name="itemNameSelf"
+                                label="我方商品名称"
+                            >
                                 <Input />
                             </Form.Item>
                         </Col>
                         <Col span={12} >
-                            {getFieldDecorator('itemModelNameOther', {
-                                rules: [{ required: true, message: "请输入对方规格型号" }]
-                            })(
-                                <Form.Item label="对方规格型号">
-                                    <Input />
-                                </Form.Item>
-                            )}
+                            <Form.Item
+                                name="itemName"
+                                label="对方商品名称"
+                            >
+                                <Input />
+                            </Form.Item>
                         </Col>
                         <Col span={12} >
-                            {getFieldDecorator('unit', {
-                                rules: [{ required: true, message: "请输入对方规格型号" }]
-                            })(
-                                <Form.Item label="我方计量单位"  >
-                                    <Input />
-                                </Form.Item>
-                            )}
+                            <Form.Item name='itemModelNameSelf' 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>
-                            )}
+                            <Form.Item name="itemModelName" label="对方规格型号">
+                                <Input />
+                            </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;
-
-function validateFields(form: WrappedFormUtils<any>) {
-    return new Promise<{ err: any, values: any }>(resolve => {
-        form.validateFields((err, values) => {
-            resolve({ err, values })
-        })
-    })
-}
+            }
+        </Drawer>
+    )
+}
+
+// function validateFields(form: WrappedFormUtils<any>) {
+//     return new Promise<{ err: any, values: any }>(resolve => {
+//         form.validateFields((err, values) => {
+//             resolve({ err, values })
+//         })
+//     })
+// }

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

@@ -291,7 +291,7 @@ const DrawerBody = (props: { defaultValue: IGood }) => {
         if (!good) return;
 
         good.itemName = setShorthand(good.itemName, values.shorthand);
-        good.itemNameOther = setShorthand(good.itemNameOther, values.shorthand);
+        good.itemNameSelf = setShorthand(good.itemNameSelf, values.shorthand);
         
         // const name = getItemName(good.itemName, values.shorthand);
         // good.itemName = getItemName(good.itemName, values.shorthand); // `*${values.shorthand}*${name}`;

package/src/Invoice/ui/GoodsList/hook/useColumns/autoFillFn/index.ts

@@ -452,12 +452,13 @@ export const onChangeItemName = async (controller: InvoiceController, form: Wrap
   controller.run(async s => {
     const value = form.getFieldsValue().itemName;
     const shorthand = getSN(value)?.shorthand ?? '';
+
     if (s.goodsListState.isMyShow) {
-      await controller.setEditGood({ itemName: value });
-      record.itemNameOther && await controller.setEditGood({ itemNameOther: setShorthand(record.itemNameOther, shorthand) });
-    } else {
-      await controller.setEditGood({ itemNameOther: value });
+      await controller.setEditGood({ itemNameSelf: value });
       record.itemName && await controller.setEditGood({ itemName: setShorthand(record.itemName, shorthand) });
+    } else {
+      await controller.setEditGood({ itemName: value });
+      record.itemNameSelf && await controller.setEditGood({ itemNameSelf: setShorthand(record.itemNameSelf, shorthand) });
     }
   })
 }

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, []);
 
@@ -61,12 +64,12 @@ export default (form: WrappedFormUtils) => {
               <Form.Item>
                 <div style={{ display: 'flex' }} >
                   {getFieldDecorator('itemName', {
-                    initialValue: isMyShow ? record.itemName : record.itemNameOther,
+                    initialValue: isMyShow ? record.itemNameSelf : record.itemName,
                     rules: [{
                       validator: async (_, __, callback) => {
                         await controller.wait();
                         const value = controller.state.goodsListState.editGood;
-                        if (!value?.itemName && !value?.itemNameOther) {
+                        if (!value?.itemName && !value?.itemNameSelf) {
                           callback('货物名称不能为空');
                         } else {
                           return;
@@ -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.itemNameSelf, searchValue)}
+                valueF={formatSearch(record.itemName, searchValue)}
+                isMyShow={isMyShow}
+              />
+            )
+            // return (
+            //   <span style={{ padding: '0 10px' }}>{formatSearch(value, searchValue)}</span>
+            // );
           }
         },
       },
@@ -118,12 +130,12 @@ export default (form: WrappedFormUtils) => {
             return (
               <Form.Item>
                 {getFieldDecorator('itemModelName', {
-                  initialValue: isMyShow ? editGood.itemModelName : editGood.itemModelNameOther,
+                  initialValue: isMyShow ? editGood.itemModelNameSelf : editGood.itemModelName,
                 })(
                   <MyInput
                     onChange={async () => {
                       await controller.wait()
-                      const key = isMyShow ? 'itemModelName' : 'itemModelNameOther';
+                      const key = isMyShow ? 'itemModelNameSelf' : 'itemModelName';
                       const value = {} as any;
                       value[key] = form.getFieldsValue().itemModelName;
                       controller.setEditGood(value);
@@ -133,7 +145,13 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <MyItemNameDiv valueT={record.itemModelName} valueF={record.itemModelNameOther} isMyShow={isMyShow} />
+            return (
+              <MyItemNameDiv
+                valueT={formatSearch(record.itemModelNameSelf, searchValue)}
+                valueF={formatSearch(record.itemModelName, searchValue)}
+                isMyShow={isMyShow}
+              />
+            )
           }
         },
       },
@@ -163,7 +181,7 @@ export default (form: WrappedFormUtils) => {
               </Form.Item>
             );
           } else {
-            return <MyItemNameDiv valueT={record.unit} valueF={record.unitOther} isMyShow={isMyShow} />;
+            return record.unit;
           }
         },
       },
@@ -340,7 +358,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>;
           }
         },
       },
@@ -415,6 +433,7 @@ export default (form: WrappedFormUtils) => {
                     showArrow={false}
                     style={{ width: '100%' }}
                     onChange={() => {
+                      setChangeField('taxRate');
                       onChangeTaxRate(controller, form, record);
                     }}
                   >
@@ -444,7 +463,7 @@ export default (form: WrappedFormUtils) => {
           if (editGood?.$index === record.$index) {
             return getFieldDecorator('taxAmount', {
               initialValue: editGood.taxAmount,
-            })(<MyDiv />);
+            })(<MyDiv loading={isCipher(changeField, 'taxAmount')} />);
           } else {
             return <span style={{ padding: '0 10px' }}>{parseFloat(value).toFixed(2)}</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;
@@ -507,13 +526,22 @@ class MyInput extends React.Component<InputProps & { loading?: boolean }> {
   }
 }
 
-class MyDiv extends React.Component<{ value?: any }> {
+class MyDiv extends React.Component<{ value?: any, loading?: boolean }> {
+
   render() {
-    return <span style={{ padding: '0 10px' }}>{this.props.value}</span>;
+    if (this.props.loading) {
+      return (
+        <Spin size="small">
+          <span style={{ padding: '0 10px' }}>{this.props.value}</span>
+        </Spin>
+      )
+    } else {
+      return <span style={{ padding: '0 10px' }}>{this.props.value}</span>
+    }
   }
 }
 
-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 +568,22 @@ class MyItemNameDiv extends React.Component<{ valueT?: string, valueF?: string,
       }
     }
   }
+}
+
+/** 格式搜索结果 */
+function formatSearch(value?: string, search?: string) {
+  if (!value || !search) return value;
+
+  const __html = ucoding(value).split(new RegExp(ucoding(search), 'g')).map(e => dcoding(e)).join(`<span class="kts-invoice-operate-goods-list-table-search-protrude" >${search}</span>`);
+  return <span dangerouslySetInnerHTML={{ __html }} />
+}
+
+/** 编码 */
+function ucoding(v: string): string {
+  return v.split('').map(e => `U${e.charCodeAt(0)}E`).join('');
+}
+
+/** 解码 */
+function dcoding(v: string): string {
+  return v.split('U').map(e => e ? String.fromCharCode(parseInt(e.replace('E', ''))) : '').join('');
 }