kts-component-invoice-operate 1.1.8 → 1.2.2

package/package.json

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

package/src/Invoice/InvoiceController/InvoiceControllerState/BuyerState/index.tsx

@@ -16,6 +16,27 @@ export interface IFormItem {
   options: GetFieldDecoratorOptions;
 }
 
+export interface IBuyerInfo {
+  /** 购买方名称 */
+  buyerName?: string;
+
+  /** 购买方纳税人识别号 */
+  buyerNo?: string;
+
+  /** 购买方地址及电话 */
+  buyerAddress?: string;
+
+  /** 购买方开户行及账号 */
+  buyerBank?: string;
+}
+
+/** 自动填充 */
+export interface IAutoContainer {
+
+  /** 购买方变化 */
+  onBuyNameChange: (e?: string) => Promise<{ recent: IBuyerInfo[], list: IBuyerInfo[] }>;
+}
+
 export default class BuyerState {
 
   /** 表头 */
@@ -61,4 +82,7 @@ export default class BuyerState {
 
   /** 顶部扩展 */
   topExpand?: React.ReactNode;
+
+  /** 自动填充 */
+  autoContainer?: IAutoContainer;
 }

package/src/Invoice/_test/buyerNameSearch/index.tsx

@@ -0,0 +1,37 @@
+import { thomsonCrossSectionDependencies } from 'mathjs';
+import React from 'react';
+import { Invoice } from '../../../';
+
+export default () => {
+
+  const controller = React.useMemo(() => new MyController(), [])
+
+  return (
+    <Invoice controller={controller} />
+  );
+};
+
+class MyController extends Invoice.InvoiceController {
+  constructor() {
+    super()
+    this.state.buyerState.autoContainer = {
+      onBuyNameChange: async (e?: string) => {
+        await this.wait(2000);
+        return {
+          recent: [
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+          ],
+          list: [
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+            { buyerName: '中科讯联科技北京网络有限公司', buyerAddress: '918273829182918291' },
+          ],
+        }
+      }
+    }
+  }
+}

package/src/Invoice/_test/endowCode/index.tsx

@@ -65,21 +65,6 @@ class MyController1 extends Invoice.InvoiceController {
     console.log('===> 准备赋码的货物索引列表', s.goodsListState.endowCode.endowcodeGoodIndex);
 
     s.goodsListState.endowCode.getTaxCategoryCodeTree = async (value) => {
-      // console.log('===>搜索条件', value);
-      // return [
-      //   { label: '3040201990000000000/aaa/bbb', id: '3040201990000000000', pid: '0', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000001/aaa/bbb', id: '3040201990000000001', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000002/aaa/bbb', id: '3040201990000000002', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000003/aaa/bbb', id: '3040201990000000003', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000004/aaa/bbb', id: '3040201990000000004', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000005/aaa/bbb', id: '3040201990000000005', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000006/aaa/bbb', id: '3040201990000000006', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000007/aaa/bbb', id: '3040201990000000007', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000008/aaa/bbb', id: '3040201990000000008', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000009/aaa/bbb', id: '3040201990000000009', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000010/aaa/bbb', id: '3040201990000000010', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      //   { label: '3040201990000000011/aaa/bbb', id: '3040201990000000011', pid: '3040201990000000000', taxRate: 3, shorthand: 'aaa' },
-      // ]
       return moke.map(e => {
         return {
           label: `${e.taxCategoryCode}-${e.shorthand}`,

package/src/Invoice/index.md

@@ -6,6 +6,9 @@
 ## 设置为草稿，设置默认参数 扩展按钮
 <code src="./_test/draft/index.tsx" title="类似的操作,请查看API" ></code>
 
+## 设置购买方名称搜索 
+<code src="./_test/buyerNameSearch/index.tsx"></code>
+
 ## 设置扣除额（差额征税）
 <code src="./_test/deduction/index.tsx"></code>
 

package/src/Invoice/index.tsx

@@ -75,7 +75,7 @@ const Main = (props: IInvoiceProps) => {
 
   const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);
 
-  const [key, setKey] = React.useState(0)
+  const [key, setKey] = React.useState(0);
 
   React.useEffect(() => {
     setKey(key + 1);
@@ -84,11 +84,11 @@ const Main = (props: IInvoiceProps) => {
   return (
     <InvoiceContext.Provider key={key} value={controller}>
       <div className="kts-invoice-operate">
-        {props.invoiceHeader || <InvoiceHeader /> /** 发票头 */}
-        {props.buyer || <Buyer /> /** 购买方 */}
-        {props.goodsList || <GoodsList /> /** 货物列表 */}
-        {props.seller || <Seller /> /** 销售方 */}
-        {props.sign || <Sign /> /** 落款 */}
+        {props.invoiceHeader || <InvoiceHeader /> /**    发票头 */}
+        {props.buyer || <Buyer /> /**                    购买方 */}
+        {props.goodsList || <GoodsList /> /**            货物列表 */}
+        {props.seller || <Seller /> /**                  销售方 */}
+        {props.sign || <Sign /> /**                      落款 */}
         {props.footExpand}
       </div>
 

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

@@ -2,8 +2,8 @@
   display: flex;
 
   .kts-invoice-operate-buyer-message {
-    flex: 1;
-    display: flex;
+    flex    : 1;
+    display : flex;
     position: relative;
 
     .ktsAnt3x-descriptions-item-label {
@@ -18,37 +18,37 @@
       }
 
       .ktsAnt3x-descriptions-item-label {
-        padding: 0 10px;
-        font-size: 12px;
+        padding         : 0 10px;
+        font-size       : 12px;
         background-color: #fff;
-        line-height: 30px;
+        line-height     : 30px;
       }
 
       .ktsAnt3x-descriptions-item-content {
         padding: 0;
 
         .ktsAnt3x-input {
-          box-shadow: none;
-          border-color: #fff;
+          box-shadow   : none;
+          border-color : #fff;
           border-radius: 0;
-          padding: 0 10px;
-          font-size: 12px;
-          line-height: 30px;
-          width: 100%;
-          height: 100%;
+          padding      : 0 10px;
+          font-size    : 12px;
+          line-height  : 30px;
+          width        : 100%;
+          height       : 100%;
         }
 
         .ktsAnt3x-input:hover {
-          border: 1 solid;
-          border-color: #40a9ff;
+          border            : 1 solid;
+          border-color      : #40a9ff;
           border-right-width: 1px !important;
         }
 
         .has-error .ktsAnt3x-input,
         .has-error .ktsAnt3x-input:hover {
           background-color: #fff;
-          border: 1 solid;
-          border-color: #f5222d;
+          border          : 1 solid;
+          border-color    : #f5222d;
         }
       }
 
@@ -61,7 +61,7 @@
       }
 
       .ktsAnt3x-form-item-children {
-        height: 30px;
+        height : 30px;
         display: block;
 
         .ktsAnt3x-btn {
@@ -71,39 +71,140 @@
 
       .ktsAnt3x-form-explain {
         position: absolute;
-        left: 5px;
-        top: 6px;
-        z-index: 10;
+        left    : 5px;
+        top     : 6px;
+        z-index : 10;
       }
     }
 
     .kts-invoice-operate-buyer-message-Import {
       position: absolute;
-      right: 0px;
-      top: 0px;
-      z-index: 10;
+      right   : 0px;
+      top     : 0px;
+      z-index : 10;
     }
   }
 
   .kts-invoice-operate-buyer-password {
     border-left: 1px solid #dcdcdc;
-    display: flex;
-    flex: none;
-    width: 458px;
+    display    : flex;
+    flex       : none;
+    width      : 458px;
   }
 
   .kts-invoice-operate-buyer-title {
-    flex: none;
-    width: 30px;
-    height: 100%;
-    text-align: center;
+    flex        : none;
+    width       : 30px;
+    height      : 100%;
+    text-align  : center;
     border-right: 1px solid #dcdcdc;
-    display: table;
-    padding: 0 5px;
+    display     : table;
+    padding     : 0 5px;
 
     label {
-      display: table-cell;
+      display       : table-cell;
       vertical-align: middle;
     }
   }
 }
+
+.ktsAnt3x-popover.kts-invoice-operate-buyer-name-popover {
+  padding-top: 0;
+
+  .ktsAnt3x-popover-inner-content {
+    padding       : 6px 0;
+    display       : flex;
+    flex-direction: column;
+    max-height    : 400px;
+    overflow-y    : auto;
+    overflow-x    : hidden;
+  }
+
+  .ktsAnt3x-popover-arrow {
+    display: none;
+  }
+
+  .kts-invoice-operate-buyer-name-content {
+    width: 567px;
+
+
+    .kts-invoice-operate-buyer-name-content-block {
+      padding: 14px 0;
+
+      label {
+        display  : block;
+        font-size: 12px;
+        color    : #666666;
+      }
+    }
+
+    .kts-invoice-operate-buyer-name-content-recently-issued {
+      padding: 0;
+      margin : 0;
+
+      li {
+        list-style   : none;
+        width        : 50%;
+        float        : left;
+        margin-bottom: 20px;
+      }
+
+      &::after {
+        content   : ".";
+        display   : block;
+        height    : 0;
+        clear     : left;
+        visibility: hidden;
+      }
+    }
+
+    .kts-invoice-operate-buyer-name-content-select-company {
+      padding    : 0;
+      margin     : 0;
+      font-size  : 12px;
+      padding    : 10px;
+      font-weight: bold;
+      color      : #000000;
+      cursor     : pointer;
+      transition : background .4s;
+
+      &:hover {
+        background: #e6e6e6e6;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      li {
+        list-style: none;
+        width     : 50%;
+        float     : left;
+      }
+
+      &::after {
+        content   : ".";
+        display   : block;
+        height    : 0;
+        clear     : left;
+        visibility: hidden;
+      }
+    }
+  }
+
+  .kts-invoice-operate-buyer-name-content-tag {
+    line-height  : 1;
+    padding      : 4px 12px;
+    background   : #F3F3F3;
+    border-radius: 9999px;
+    font-size    : 12px;
+    font-weight  : bold;
+    color        : #000;
+    cursor       : pointer;
+    transition   : background .4s;
+
+    &:hover {
+      background: #e6e6e6e6;
+    }
+  }
+}

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

@@ -3,6 +3,7 @@ import { Descriptions, Form, Typography, Input } from 'kts-components-antd-x3';
 import { decorator } from 'grey-react-box';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import ImportBuyerButton from './ui/ImportBuyerButton';
+import BuyerNameInput from './ui/BuyerNameInput';
 import Invoice from '../../';
 import { IFormItem } from '../../InvoiceController/InvoiceControllerState/BuyerState';
 import './index.less';
@@ -28,20 +29,23 @@ const Main = decorator<IBuyerProps, IBuyerProps & FormComponentProps>(
   const controller = Invoice.useInvoiceController();
 
   /** 组件模式 */
-  const model = controller.useMemo(s => s.model, [])
+  const model = controller.useMemo(s => s.model, []);
+
+  /** 自动填充 */
+  const autoContainer = controller.useMemo(s => s.buyerState.autoContainer, []);
 
   const formItem = React.useMemo(() => {
     if (props.formItem) {
       return props.formItem;
     } else {
       return [
-        { id: 'buyerName', label: '购买方名称', node: <Input size="small" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
-        { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
-        { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
-        { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
+        { id: 'buyerName', label: '购买方名称', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
+        { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
+        { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
+        { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
       ]
     }
-  }, [props.formItem, model])
+  }, [props.formItem, model]);
 
   /** 注册 form */
   controller.useForm('buyer', form);
@@ -85,7 +89,11 @@ const Main = decorator<IBuyerProps, IBuyerProps & FormComponentProps>(
                 return (
                   <Descriptions.Item key={i} label={getlabel(item)}>
                     <Form.Item>
-                      {getFieldDecorator(item.id, item.options)(item.node)}
+                      {getFieldDecorator(item.id, item.options)(
+                        autoContainer
+                          ? item.id === 'buyerName' ? <BuyerNameInput /> : item.node
+                          : item.node
+                      )}
                     </Form.Item>
                   </Descriptions.Item>
                 )
@@ -103,3 +111,4 @@ const Main = decorator<IBuyerProps, IBuyerProps & FormComponentProps>(
     </Form>
   );
 });
+

package/src/Invoice/ui/Buyer/ui/BuyerNameInput/index.tsx

@@ -0,0 +1,159 @@
+
+import React from 'react';
+import { Popover, Input, Divider, Spin } from 'kts-components-antd-x3';
+import Invoice from '../../../../';
+import { IBuyerInfo } from '../../../../InvoiceController/InvoiceControllerState/BuyerState';
+
+export interface IBuyerNameInputProps {
+  value?: string;
+  onChange?: (e: string) => void;
+}
+
+export default (props: IBuyerNameInputProps) => {
+
+  /** 控制器 */
+  const controller = Invoice.useInvoiceController();
+
+  /** 组件模式 */
+  const model = controller.useMemo(s => s.model, []);
+
+  /** 是否显示 */
+  const [visible, setVisible] = React.useState(false);
+
+  /** 自动填充 */
+  const autoContainer = controller.useMemo(s => s.buyerState.autoContainer, []);
+
+  /** 自动填充数据 */
+  const { dataSource, onBuyNameChange, loading } = useDataSource();
+
+  /** 悬浮内容 */
+  const content = React.useMemo(() => {
+    return (
+      <div className='kts-invoice-operate-buyer-name-content'>
+        {
+          loading
+            ? (
+              <div style={{ textAlign: 'center' }} >
+                <Spin />
+              </div>
+            )
+            : (
+              <>
+                <div className='kts-invoice-operate-buyer-name-content-block' style={{ padding: '14px 10px' }} >
+                  <label style={{ marginBottom: 10 }} >最近开具</label>
+                  <ul className='kts-invoice-operate-buyer-name-content-recently-issued' >
+                    {dataSource.recent.map((e, i) => <li key={i} onClick={() => { onClickItem(e) }} style={{ marginBottom: interval(i, dataSource.recent.length) }} ><MyTag>{e.buyerName}</MyTag></li>)}
+                  </ul>
+                </div>
+                <Divider style={{ margin: "0 6px" }} />
+                <div className='kts-invoice-operate-buyer-name-content-block' style={{ padding: '14px 10px 4px' }} >
+                  <label style={{ padding: '0 10px' }} >选择公司</label>
+                  {
+                    dataSource.list.map((e, i) => {
+                      return (
+                        <ul key={i} onClick={() => { onClickItem(e) }} className='kts-invoice-operate-buyer-name-content-select-company' >
+                          <li>{e.buyerName}</li>
+                          <li>{e.buyerAddress}</li>
+                        </ul>
+                      )
+                    })
+                  }
+                </div>
+              </>
+            )
+        }
+      </div>
+    )
+  }, [dataSource, loading])
+
+  /** 点击了选择项 */
+  const onClickItem = React.useCallback(async (e: IBuyerInfo) => {
+    controller.formList.get('buyer')?.setFieldsValue(e);
+    setVisible(false);
+  }, [controller]);
+
+  /** 输入框数据改变 */
+  const onChangeInput = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    props.onChange && props.onChange(e.target.value);
+    onBuyNameChange(e.target.value);
+  }, [dataSource])
+
+  React.useEffect(()=>{
+    visible && onBuyNameChange(props.value)
+  }, [visible, props.value])
+
+  if (model === 'prefab' || !autoContainer) {
+    return (
+      <Input
+        size="small"
+        autoComplete="off"
+        value={props.value}
+        readOnly={model === 'prefab'}
+        onChange={e => { props.onChange && props.onChange(e.target.value) }}
+      />
+    )
+  }
+
+  return (
+    <Popover
+      onVisibleChange={setVisible}
+      overlayClassName='kts-invoice-operate-buyer-name-popover'
+      placement="bottomLeft"
+      trigger="click"
+      visible={visible}
+      content={content}
+    >
+      <Input
+        size="small"
+        autoComplete="off"
+        value={props.value}
+        onChange={onChangeInput}
+      />
+    </Popover>
+  );
+};
+
+
+/** 获取自动填充数据 */
+function useDataSource() {
+  /** 控制器 */
+  const controller = Invoice.useInvoiceController();
+
+  const [loading, setLoading] = React.useState(false);
+
+  const [dataSource, setDataSource] = React.useState<{ recent: IBuyerInfo[], list: IBuyerInfo[] }>({ recent: [], list: [] })
+
+  const autoContainer = controller.useMemo(s => s.buyerState.autoContainer, []);
+
+  const onBuyNameChange = React.useCallback(async (e?: string | undefined) => {
+    if (!autoContainer) return;
+    setLoading(true);
+    setDataSource(await autoContainer.onBuyNameChange(e));
+    setLoading(false);
+  }, [autoContainer])
+
+  return {
+    /** 购买方变化 */
+    onBuyNameChange,
+
+    /** 获取自动填充数据 */
+    dataSource,
+
+    /** 加载中 */
+    loading,
+  }
+}
+
+function MyTag(props: any) {
+  return (
+    <span className='kts-invoice-operate-buyer-name-content-tag' >{props.children}</span>
+  )
+}
+
+function interval(i: number, t: number) {
+  if (t % 2 === 0) {
+    return i > t - 3 ? 0 : 20;
+  } else {
+    return i > t - 2 ? 0 : 20;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Descriptions, Input, Form, AutoComplete, Icon } from 'kts-components-antd-x3';
+import { Descriptions, Input, Form } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import { decorator } from 'grey-react-box';
 import Invoice from '../../';