kts-component-invoice-operate 3.1.19 → 3.2.0

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

@@ -1,59 +1,59 @@
-import React from 'react';
-import { Input } from 'kts-components-antd-x3';
-import { Invoice } from '../../../';
-import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
-
-export default () => {
-
-  const renderExpand = React.useCallback((form: WrappedFormUtils<any>) => {
-    return (
-      <div style={{ textAlign: 'right' }} >
-        <label>收票邮箱:</label>
-        {form.getFieldDecorator('email', {
-        })(
-          <Input style={{ width: 200 }} size="small" />
-        )}
-      </div>
-    )
-  }, [])
-
-  // 配置 发票种类
-  const typeOption = React.useMemo(() => {
-    return [
-      {
-        title: '发票1',
-        value: [
-          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
-          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
-          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
-          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
-        ]
-      },
-      {
-        title: '发票2',
-        value: [
-          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [] } },
-          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [] } },
-          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [] } },
-          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [] } },
-        ]
-      },
-    ]
-  }, [])
-
-  // 选中的 种类索引
-  const [index, setIndex] = React.useState(1);
-
-  return (
-    <Invoice
-      invoiceHeader={
-        <Invoice.InvoiceHeader
-          renderExpand={renderExpand}
-          typeOptionIndex={index}
-          typeOption={typeOption}
-          onChangeTypeOption={e => { setIndex(e) }}
-        />}
-      buyer={<Invoice.Buyer formItem={typeOption[index].value} />}
-    />
-  );
-};
+import React from 'react';
+import { Input } from 'kts-components-antd-x3';
+import { Invoice } from '../../../..';
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+
+export default () => {
+
+  const renderExpand = React.useCallback((form: WrappedFormUtils<any>) => {
+    return (
+      <div style={{ textAlign: 'right' }} >
+        <label>收票邮箱:</label>
+        {form.getFieldDecorator('email', {
+        })(
+          <Input style={{ width: 200 }} size="small" />
+        )}
+      </div>
+    )
+  }, [])
+
+  // 配置 发票种类
+  const typeOption = React.useMemo(() => {
+    return [
+      {
+        title: '发票1',
+        value: [
+          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
+          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
+          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
+          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
+        ]
+      },
+      {
+        title: '发票2',
+        value: [
+          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [] } },
+          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [] } },
+          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [] } },
+          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [] } },
+        ]
+      },
+    ]
+  }, [])
+
+  // 选中的 种类索引
+  const [index, setIndex] = React.useState(1);
+
+  return (
+    <Invoice
+      invoiceHeader={
+        <Invoice.InvoiceHeader
+          renderExpand={renderExpand}
+          typeOptionIndex={index}
+          typeOption={typeOption}
+          onChangeTypeOption={e => { setIndex(e) }}
+        />}
+      buyer={<Invoice.Buyer formItem={typeOption[index].value} />}
+    />
+  );
+};

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import Invoice from '../../';
-
-const InvoiceHeader = Invoice.InvoiceHeader;
-
-export default () => {
-  return (
-    <Invoice
-      invoiceHeader={<InvoiceHeader isInvoiceNo={false} />} // 隐藏发票单据编号
-    />
-  );
-};
+import React from 'react';
+import Invoice from '../../';
+
+const InvoiceHeader = Invoice.InvoiceHeader;
+
+export default () => {
+  return (
+    <Invoice
+      invoiceHeader={<InvoiceHeader isInvoiceNo={false} />} // 隐藏发票单据编号
+    />
+  );
+};

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

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Button } from 'kts-components-antd-x3';
-import Invoice from '../../';
-
-const useInvoiceController = Invoice.useInvoiceController;
-
-export default () => {
-  return <Invoice invoiceHeader={<InvoiceHeader />} />;
-};
-
-const InvoiceHeader = () => {
-  const controller = useInvoiceController();
-
-  return (
-    <div>
-      新的表头
-      <Button type="link">
-        更新
-      </Button>
-    </div>
-  );
-};
+import React from 'react';
+import { Button } from 'kts-components-antd-x3';
+import Invoice from '../../';
+
+const useInvoiceController = Invoice.useInvoiceController;
+
+export default () => {
+  return <Invoice invoiceHeader={<InvoiceHeader />} />;
+};
+
+const InvoiceHeader = () => {
+  const controller = useInvoiceController();
+
+  return (
+    <div>
+      新的表头
+      <Button type="link">
+        更新
+      </Button>
+    </div>
+  );
+};

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

@@ -1,22 +1,22 @@
-
-import React from 'react';
-import { Button } from 'kts-components-antd-x3';
-import Invoice from '../../';
-
-const Buyer = Invoice.Buyer
-
-export default () => {
-
-  const controller = React.useMemo(() => new Invoice.InvoiceController, [])
-
-  const onClick = React.useCallback(async () => {
-    console.log('===> 当前组件状态', await controller.validateFields());
-  }, []);
-
-  return (
-    <div>
-      <Button onClick={onClick} style={{ marginBottom: 10 }}>获取数据</Button>
-      <Invoice controller={controller}/>
-    </div>
-  );
-};
+
+import React from 'react';
+import { Button } from 'kts-components-antd-x3';
+import Invoice from '../../';
+
+const Buyer = Invoice.Buyer
+
+export default () => {
+
+  const controller = React.useMemo(() => new Invoice.InvoiceController, [])
+
+  const onClick = React.useCallback(async () => {
+    console.log('===> 当前组件状态', await controller.validateFields());
+  }, []);
+
+  return (
+    <div>
+      <Button onClick={onClick} style={{ marginBottom: 10 }}>获取数据</Button>
+      <Invoice controller={controller}/>
+    </div>
+  );
+};

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

@@ -1,28 +1,28 @@
-import React from 'react';
-import { AutoComplete, Input, Icon } from 'kts-components-antd-x3';
-import { Invoice } from '../../../';
-
-export default () => {
-
-  const formRender = React.useMemo(() => {
-    return new Map([
-      ['sellerBank', () => {
-        return (
-          <AutoComplete
-            size="small"
-            style={{ width: '100%' }}
-            dataSource={['销售方开户行及账号1', '销售方开户行及账号2', '销售方开户行及账号3']}
-          >
-            <Input suffix={<Icon type="down" />} />
-          </AutoComplete>
-        )
-      }]
-    ])
-  }, [])
-
-  return (
-    <div>
-      <Invoice seller={<Invoice.Seller formRender={formRender} />} />
-    </div>
-  );
-};
+import React from 'react';
+import { AutoComplete, Input, Icon } from 'kts-components-antd-x3';
+import { Invoice } from '../../../..';
+
+export default () => {
+
+  const formRender = React.useMemo(() => {
+    return new Map([
+      ['sellerBank', () => {
+        return (
+          <AutoComplete
+            size="small"
+            style={{ width: '100%' }}
+            dataSource={['销售方开户行及账号1', '销售方开户行及账号2', '销售方开户行及账号3']}
+          >
+            <Input suffix={<Icon type="down" />} />
+          </AutoComplete>
+        )
+      }]
+    ])
+  }, [])
+
+  return (
+    <div>
+      <Invoice seller={<Invoice.Seller formRender={formRender} />} />
+    </div>
+  );
+};

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

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Invoice } from '../../../';
-
-const InvoiceController = Invoice.InvoiceController;
-
-export default () => {
-  const controller = React.useMemo(() => new MyInvoiceController(), []);
-  return (
-    <div>
-      <Invoice controller={controller} />
-    </div>
-  );
-};
-
-/**
- * 继承 InvoiceController 并重写需要重写的方法
- */
-class MyInvoiceController extends InvoiceController {
-  updateInvoiceNo = this.pipeline(async s => {
-    return '--';
-  })
-}
+import React from 'react';
+import { Invoice } from '../../../..';
+
+const InvoiceController = Invoice.InvoiceController;
+
+export default () => {
+  const controller = React.useMemo(() => new MyInvoiceController(), []);
+  return (
+    <div>
+      <Invoice controller={controller} />
+    </div>
+  );
+};
+
+/**
+ * 继承 InvoiceController 并重写需要重写的方法
+ */
+class MyInvoiceController extends InvoiceController {
+  updateInvoiceNo = this.pipeline(async s => {
+    return '--';
+  })
+}

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

@@ -1,19 +1,19 @@
-import React from 'react';
-import { Invoice } from '../../../';
-
-export default () => {
-  const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
-
-  React.useEffect(() => {
-    controller.pipeline(async (s) => {
-      s.goodsListState.unitList = ['个', '吨', '米'];
-      s.goodsListState.taxRateList = [1, 2, 3, 4, 5, 80];
-    })();
-  }, []);
-
-  return (
-    <div>
-      <Invoice controller={controller} />
-    </div>
-  );
-};
+import React from 'react';
+import { Invoice } from '../../../..';
+
+export default () => {
+  const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
+
+  React.useEffect(() => {
+    controller.pipeline(async (s) => {
+      s.goodsListState.unitList = ['个', '吨', '米'];
+      s.goodsListState.taxRateList = [1, 2, 3, 4, 5, 80];
+    })();
+  }, []);
+
+  return (
+    <div>
+      <Invoice controller={controller} />
+    </div>
+  );
+};

package/src/Invoice/index.less

@@ -1,12 +1,30 @@
-.kts-invoice-operate {
-  border: 1px solid #dcdcdc;
-  font-size: 12px;
-
-  &>* {
-    border-bottom: 1px solid #dcdcdc;
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
+.kts-invoice-operate {
+  border   : 1px solid #dcdcdc;
+  font-size: 12px;
+
+  &>* {
+    border-bottom: 1px solid #dcdcdc;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.kts-invoice-operate-digtal {
+
+  font-family: PingFang SC;
+  font-size  : 14px;
+
+  .kts-invoice-operate-digtal-cont {
+    border: 2px solid #9F613E;
+
+    &>* {
+      border-bottom: 2px solid #9F613E;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/src/Invoice/index.md

@@ -1,53 +1,53 @@
-# Invoice
-
-## 简单用法
-<code src="./_test/easiest/index.tsx"></code>
-
-## 设置为草稿，设置默认参数 扩展按钮
-<code src="./_test/draft/index.tsx" title="类似的操作,请查看API" ></code>
-
-## 设置购买方名称搜索 
-<code src="./_test/buyerNameSearch/index.tsx"></code>
-
-## 设置扣除额（差额征税）
-<code src="./_test/deduction/index.tsx"></code>
-
-## 设置单位列表、税率列表
-<code src="./_test/unit/index.tsx" ></code>
-
-## 发票头类型设置和购买方信息配置
-<code src="./_test/invoiceType/index.tsx" ></code>
-
-## 隐藏发票单据编号
-<code src="./_test/isInvoiceNo/index.tsx" title="通过InvoiceHeader.isInvoiceNo" ></code>
-
-## 替换发票头 UI
-<code src="./_test/replaceHead/index.tsx" title="其他UI的替换类型,请查看API" ></code>
-
-## 销售方 预设、自动补全、禁用
-<code src="./_test/seller/index.tsx"></code>
-
-## 点击按钮获取方法
-<code src="./_test/retrieveData/index.tsx" title="查看 Console" ></code>
-
-## 扩展货物操作按钮
-<code src="./_test/goodsMenuExpand/index.tsx" title="查看 Console" ></code>
-
-## 设置数据源 获取发票单据编号
-<code src="./_test/setDataSource/index.tsx" ></code>
-
-## 设置数据源 导入购买方
-<code src="./_test/importBuyer/index.tsx"></code>
-
-## 设置数据源 导入货物
-<code src="./_test/importGoods/index.tsx"></code>
-
-## 设置数据源 赋码 税收分类编码列表
-<code src="./_test/endowCode/index.tsx"></code>
-
-<API name="Invoice 发票组件 API" exports='["default"]' src="./index.tsx" ></API>
-<API name="InvoiceHeader 发票头 API" exports='["default"]' src="./ui/InvoiceHeader/index.tsx"></API>
-<API name="GoodsList 商品列表 API" exports='["default"]' src="./ui/GoodsList/index.tsx"></API>
-<API name="Buyer 购买方 API" exports='["default"]' src="./ui/Buyer/index.tsx"></API>
-<API name="Seller 销售方 API" exports='["default"]' src="./ui/Seller/index.tsx"></API>
-<API name="Sign 落款 API" exports='["default"]' src="./ui/Sign/index.tsx"></API>
+# 默认
+
+## 简单用法
+<code src="./_test/easiest/index.tsx"></code>
+
+## 设置为草稿，设置默认参数 扩展按钮
+<code src="./_test/draft/index.tsx" title="类似的操作,请查看API" ></code>
+
+## 设置购买方名称搜索 
+<code src="./_test/buyerNameSearch/index.tsx"></code>
+
+## 设置扣除额（差额征税）
+<code src="./_test/deduction/index.tsx"></code>
+
+## 设置单位列表、税率列表
+<code src="./_test/unit/index.tsx" ></code>
+
+## 发票头类型设置和购买方信息配置
+<code src="./_test/invoiceType/index.tsx" ></code>
+
+## 隐藏发票单据编号
+<code src="./_test/isInvoiceNo/index.tsx" title="通过InvoiceHeader.isInvoiceNo" ></code>
+
+## 替换发票头 UI
+<code src="./_test/replaceHead/index.tsx" title="其他UI的替换类型,请查看API" ></code>
+
+## 销售方 预设、自动补全、禁用
+<code src="./_test/seller/index.tsx"></code>
+
+## 点击按钮获取方法
+<code src="./_test/retrieveData/index.tsx" title="查看 Console" ></code>
+
+## 扩展货物操作按钮
+<code src="./_test/goodsMenuExpand/index.tsx" title="查看 Console" ></code>
+
+## 设置数据源 获取发票单据编号
+<code src="./_test/setDataSource/index.tsx" ></code>
+
+## 设置数据源 导入购买方
+<code src="./_test/importBuyer/index.tsx"></code>
+
+## 设置数据源 导入货物
+<code src="./_test/importGoods/index.tsx"></code>
+
+## 设置数据源 赋码 税收分类编码列表
+<code src="./_test/endowCode/index.tsx"></code>
+
+<API name="Invoice 发票组件 API" exports='["default"]' src="./index.tsx" ></API>
+<API name="InvoiceHeader 发票头 API" exports='["default"]' src="./ui/default/InvoiceHeader/index.tsx"></API>
+<API name="GoodsList 商品列表 API" exports='["default"]' src="./ui/default/GoodsList/index.tsx"></API>
+<API name="Buyer 购买方 API" exports='["default"]' src="./ui/default/Buyer/index.tsx"></API>
+<API name="Seller 销售方 API" exports='["default"]' src="./ui/default/Seller/index.tsx"></API>
+<API name="Sign 落款 API" exports='["default"]' src="./ui/default/Sign/index.tsx"></API>