kts-component-invoice-operate 3.2.164 → 3.2.166

package/src/TaxClassificationCodeModal/_test/easiest/index.tsx

@@ -1,177 +1,184 @@
-import React from 'react';
-import { Button } from 'kts-xui';
-import { TaxClassificationModal } from '../../..';
-
-export default () => {
-
-  const [open, setOpen] = React.useState(false);
-
-  const [list, setList] = React.useState<any>([]);
-
-  const updateTreeData = (list: any, key: React.Key, children: any): any => {
-    const demo = list.map((node: any) => {
-      if (node.key === key) {
-        return {
-          ...node,
-          children,
-        };
-      }
-      if (node.children) {
-        return {
-          ...node,
-          children: updateTreeData(node.children, key, children),
-        };
-      }
-      return node;
-    });
-    setList(demo);
-  }
-
-  const onSearch = React.useCallback(async (value: any = null) => {
-    const arr = [
-      {
-        "id": "3a4eae5278cd428f975d4da278fd18eb",
-        "taxCategoryCode": "3000000000000000000",
-        "productName": "销售服务",
-        "shorthand": "销售服务",
-        "specification": null,
-        "createTime": "Tue Jun 20 14:56:46 CST 2023",
-        "status": 1,
-        "versionCode": "48.0",
-        "version": "32.0",
-        "startTime": "20190401",
-        "endTime": null,
-        "cargo": null,
-        "desc": null,
-        "taxRate": "13",
-        "keyword": "",
-        "summarizedItem": "Y",
-        "countCode": null,
-        "customsItem": null,
-        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
-      },
-      {
-        "id": "3a4eae5278cd428f975d4da278fd18eb",
-        "taxCategoryCode": "410000000000000000",
-        "productName": "手机服务",
-        "shorthand": "手机服务",
-        "specification": null,
-        "createTime": "Tue Jun 20 14:56:46 CST 2023",
-        "status": 1,
-        "versionCode": "48.0",
-        "version": "32.0",
-        "startTime": "20190401",
-        "endTime": null,
-        "cargo": null,
-        "desc": null,
-        "taxRate": "13",
-        "keyword": "",
-        "summarizedItem": "Y",
-        "countCode": null,
-        "customsItem": null,
-        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
-      }
-    ];
-    const list: any[] = arr.map((item: any)=> {
-      const data = {
-        ...item,
-        title: `${item.productName} ${item.taxCategoryCode}`,
-        key: item.taxCategoryCode,
-      }
-      if(value?.target?.value) {
-        data.isLeaf = true;
-      } else {
-        data.selectable = false
-      }
-      return data
-    });
-    setList(list);
-  }, []);
-
-  const onLoad = React.useCallback(async (value?: any) => {
-    const arr = [
-      {
-        "id": "3a4eae5278cd428f975d4da278fd18eb",
-        "taxCategoryCode": "00000100000000000000",
-        "productName": "子任务1",
-        "shorthand": "销售服务",
-        "specification": null,
-        "createTime": "Tue Jun 20 14:56:46 CST 2023",
-        "status": 1,
-        "versionCode": "48.0",
-        "version": "32.0",
-        "startTime": "20190401",
-        "endTime": null,
-        "cargo": null,
-        "desc": null,
-        "taxRate": "13",
-        "keyword": "",
-        "summarizedItem": "Y",
-        "countCode": null,
-        "customsItem": null,
-        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
-      },
-      {
-        "id": "3a4eae5278cd428f975d4da278fd18eb",
-        "taxCategoryCode": "000002000000000000",
-        "productName": "子任务2",
-        "shorthand": "手机服务",
-        "specification": null,
-        "createTime": "Tue Jun 20 14:56:46 CST 2023",
-        "status": 1,
-        "versionCode": "48.0",
-        "version": "32.0",
-        "startTime": "20190401",
-        "endTime": null,
-        "cargo": null,
-        "desc": null,
-        "taxRate": "13",
-        "keyword": "",
-        "summarizedItem": "Y",
-        "countCode": null,
-        "customsItem": null,
-        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
-      }
-    ];
-    const data: any[] = arr.map((item: any)=> {
-      return {
-        ...item,
-        title: `${item.productName} ${item.taxCategoryCode}`,
-        key: item.taxCategoryCode,
-        selectable: false
-      }
-    });
-
-    if(value?.key) {
-      setList((origin: any)=> {
-        updateTreeData(origin, value.key, data)
-      });
-    } else {
-      setList(data);
-    }
-    return [];
-  }, []);
-
-  const onClick = React.useCallback(async () => {
-    await onLoad();
-    setOpen(true);
-  }, []);
-
-  const onSelect = React.useCallback((key: any, info: any) => {
-    setOpen(false);
-  }, []);
-
-    return (
-        <>
-            <Button onClick={onClick} >打开</Button>
-            <TaxClassificationModal
-              list={list}
-              open={open}
-              onSelect={onSelect}
-              onCancel={()=> {setOpen(false)}}
-              onSearch={onSearch}
-              onLoad={onLoad}
-            />
-        </>
-    )
-};
+import React from 'react';
+import { Button } from 'kts-xui';
+import { TaxClassificationModal } from '../../..'; 
+
+export default () => {
+
+  const [open, setOpen] = React.useState(false);
+
+  const [list, setList] = React.useState<any>([]);
+
+  const [info, setInfo] = React.useState({});
+
+  const updateTreeData = (list: any, key: React.Key, children: any): any => { 
+    const demo = list.map((node: any) => {
+      if (node.key === key) {
+        return {
+          ...node,
+          children,
+        };
+      }
+      if (node.children) {
+        return {
+          ...node,
+          children: updateTreeData(node.children, key, children),
+        };
+      }
+      return node;
+    });
+    setList(demo);
+  }
+
+  const onSearch = React.useCallback(async (value: any = null) => { 
+    const arr = [
+      {
+        "id": "3a4eae5278cd428f975d4da278fd18eb",
+        "taxCategoryCode": "3000000000000000000",
+        "productName": "销售服务",
+        "shorthand": "销售服务",
+        "specification": null,
+        "createTime": "Tue Jun 20 14:56:46 CST 2023",
+        "status": 1,
+        "versionCode": "48.0",
+        "version": "32.0",
+        "startTime": "20190401",
+        "endTime": null,
+        "cargo": null,
+        "desc": null,
+        "taxRate": "13",
+        "keyword": "",
+        "summarizedItem": "Y",
+        "countCode": null,
+        "customsItem": null,
+        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
+      },
+      {
+        "id": "3a4eae5278cd428f975d4da278fd18db",
+        "taxCategoryCode": "410000000000000000",
+        "productName": "手机服务",
+        "shorthand": "手机服务",
+        "specification": null,
+        "createTime": "Tue Jun 20 14:56:46 CST 2023",
+        "status": 1,
+        "versionCode": "48.0",
+        "version": "32.0",
+        "startTime": "20190401",
+        "endTime": null,
+        "cargo": null,
+        "desc": null,
+        "taxRate": "13",
+        "keyword": "",
+        "summarizedItem": "Y",
+        "countCode": null,
+        "customsItem": null,
+        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
+      }
+    ];
+    const list: any[] = arr.map((item: any)=> {
+      const data = {
+        ...item,
+        title: `${item.productName} ${item.taxCategoryCode}`,
+        key: item.taxCategoryCode,
+      }
+      if(value?.target?.value) { 
+        data.isLeaf = true;
+      } else { 
+        data.selectable = false
+      }
+      return data
+    });
+    setList(list);
+  }, []);
+
+  const onLoad = React.useCallback(async (value?: any) => { 
+    const arr = [
+      {
+        "id": "3a4eae5278cd428f975d4da278fd18eb",
+        "taxCategoryCode": "00000100000000000000",
+        "productName": "子任务1",
+        "shorthand": "销售服务",
+        "specification": null,
+        "createTime": "Tue Jun 20 14:56:46 CST 2023",
+        "status": 1,
+        "versionCode": "48.0",
+        "version": "32.0",
+        "startTime": "20190401",
+        "endTime": null,
+        "cargo": null,
+        "desc": null,
+        "taxRate": "13",
+        "keyword": "",
+        "summarizedItem": "Y",
+        "countCode": null,
+        "customsItem": null,
+        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
+      },
+      {
+        "id": "3a4eae5278cd428f975d4da278fd18db",
+        "taxCategoryCode": "000002000000000001",
+        "productName": "子任务2",
+        "shorthand": "手机服务",
+        "specification": null,
+        "createTime": "Tue Jun 20 14:56:46 CST 2023",
+        "status": 1,
+        "versionCode": "48.0",
+        "version": "32.0",
+        "startTime": "20190401",
+        "endTime": null,
+        "cargo": null,
+        "desc": null,
+        "taxRate": "13",
+        "keyword": "",
+        "summarizedItem": "Y",
+        "countCode": null,
+        "customsItem": null,
+        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
+      }
+    ];
+    const data: any[] = arr.map((item: any)=> {
+      return {
+        ...item,
+        title: `${item.productName} ${item.taxCategoryCode}`,
+        key: item.taxCategoryCode,
+        selectable: false
+      }
+    }); 
+    if(value?.key) {
+      setList((origin: any)=> {
+        updateTreeData(origin, value.key, data)
+      });
+    } else {
+      setList(data);
+    }
+    return [];
+  }, []);
+
+  const onClick = React.useCallback(async () => {
+    await onLoad();
+    setOpen(true);
+  }, []);
+
+  const onSelect = React.useCallback((key: any, info: any) => {  
+    setInfo(info.node);
+    // setOpen(false);
+  }, []);
+  const onSubmit = React.useCallback((key: any, info: any) => {   
+    setOpen(false);
+  }, []);
+
+    return (
+        <>
+            <Button onClick={onClick} >打开</Button>
+            <TaxClassificationModal
+              list={list}
+              open={open} 
+              info={info}
+              onSubmit={onSubmit}
+              onSelect={onSelect}
+              onCancel={()=> {setOpen(false); setInfo({});}}
+              onSearch={onSearch}
+              onLoad={onLoad}
+            /> 
+        </>
+    )
+};

package/src/TaxClassificationCodeModal/index.less

@@ -0,0 +1,5 @@
+.taxdetailsbox{
+    display: flex;
+    justify-content:flex-start;
+    flex-direction: row;
+  }

package/src/TaxClassificationCodeModal/index.md

@@ -1,6 +1,6 @@
-# TaxClassificationCodeModal
-
-## 简单用法
-<code src="./_test/easiest/index.tsx" ></code>
-
-<API name="API" exports='["default"]' src="./index.tsx" ></API>
+# TaxClassificationCodeModal
+
+## 简单用法
+<code src="./_test/easiest/index.tsx" ></code>
+
+<API name="API" exports='["default"]' src="./index.tsx" ></API>

package/src/TaxClassificationCodeModal/index.tsx

@@ -1,74 +1,141 @@
-
-import React from "react";
-import { Drawer, Input, Tree, Form } from "kts-xui";
-import { Icon } from "kts-components-antd-x3";
-import {IFormValues} from "@/InvoiceTypeModal";
-
-export interface TaxClassificationProps {
-
-    /** 是否开启 */
-    open?: boolean;
-
-    /** 数据 */
-    list?: any[];
-
-    /** 点击了取消 */
-    onCancel?: () => void;
-
-    /** 点击了选择 */
-    onSelect?: (key: any, info: any) => void;
-
-    /** 点击了加载 */
-    onLoad: (value: any) => Promise<any[]>;
-
-    /** 点击了搜索 */
-    onSearch?: (value?: any) => void;
-}
-
-export default function TaxClassificationModal(props: TaxClassificationProps) {
-    const [form] = Form.useForm<IFormValues>();
-
-  const searchTax = React.useCallback(async (value?: any) => {
-    if(!value?.target?.value) {
-      form.resetFields();
-    }
-    props.onSearch && props.onSearch(value);
-  }, [props.onSearch, form]);
-
-    React.useEffect(() => {
-      if (!props.open) {
-        setTimeout(()=> {
-          form.resetFields();
-        }, 500)
-      }
-    }, [form, props.open])
-
-    return (
-      <Drawer
-        title="商品和服务税收分类编码"
-        placement="right"
-        open={props.open}
-        width={503}
-        onClose={props.onCancel}
-      >
-        <Form
-          form={form}
-        >
-          <Form.Item name='search'>
-            <Input
-              placeholder="请输入税收分类编码、税收分类名称进行检索"
-              onChange={searchTax}
-            />
-          </Form.Item>
-          <Form.Item name='tree'>
-            <Tree
-              onSelect={props.onSelect}
-              loadData={props.onLoad}
-              treeData={props.list}
-              switcherIcon={<Icon type="down" />}
-            />
-          </Form.Item>
-        </Form>
-      </Drawer>
-    )
-}
+
+import React from "react";
+import { Drawer, Input, Tree, Form, Button, Card, FormReadOnly } from "kts-xui";
+import { Icon } from "kts-components-antd-x3";
+import {IFormValues} from "@/InvoiceTypeModal";
+import './index.less'; 
+export interface TaxClassificationProps {
+
+    /** 是否开启 */
+    open?: boolean;
+
+    /** 数据 */
+    list?: any[];
+
+    /** 点击了取消 */
+    onCancel?: () => void;
+
+    /** 点击了选择 */
+    onSelect?: (key: any, info: any) => void;
+
+    /** 点击了提交 */
+    onSubmit?: (key: any, info: any) => void;
+
+    /** 点击了加载 */
+    onLoad: (value: any) => Promise<any[]>;
+
+    /** 点击了搜索 */
+    onSearch?: (value?: any) => void; 
+
+    info?: any;
+}
+
+export default function TaxClassificationModal(props: TaxClassificationProps) {
+    const [form] = Form.useForm<IFormValues>();
+
+  const searchTax = React.useCallback(async (value?: any) => {
+    if(!value?.target?.value) {
+      form.resetFields();
+    }
+    props.onSearch && props.onSearch(value);
+    }, [props.onSearch, form]);
+
+    React.useEffect(() => {
+      if (!props.open) {
+        setTimeout(()=> {
+          form.resetFields();
+        }, 500)
+      }
+    }, [form, props.open]);
+
+    // const [childrenDrawer, setChildrenDrawer] = React.useState(false);
+
+    const showChildrenDrawer = (key: any, info: any) => {
+      if(props.onSelect){ 
+        props.onSelect(key, info);
+      }
+      // setChildrenDrawer(true);
+    };
+    const onChildrenDrawerClose = () => {
+      // setChildrenDrawer(false);
+      if(props.onCancel){
+        props.onCancel();
+      }
+    };
+
+    const layout = {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+    };
+
+    const sureTaxCodeSubmit = () => {
+      if(props.onCancel){
+        props.onCancel();
+      }
+      onChildrenDrawerClose();
+      if(props.onSubmit){
+        props.onSubmit(props.info?.key, props.info)
+      }
+    } 
+    return (
+      <Drawer
+        title="商品和服务税收分类编码"
+        placement="right"
+        open={props.open}
+        width={703}
+        onClose={props.onCancel} 
+        footer={
+          <div
+              style={{
+                  textAlign: 'right',
+              }}
+          >
+              <Button onClick={onChildrenDrawerClose} style={{ marginRight: 8 }}>
+                  取消
+              </Button>
+              <Button onClick={sureTaxCodeSubmit} type="primary">
+                  确定
+              </Button>
+          </div>
+      }
+      >
+        <div className="taxdetailsbox">
+          <Form
+            style={{width: 330}}
+            form={form}
+          >
+            <Form.Item name='search'>
+              <Input
+                placeholder="请输入税收分类编码、税收分类名称进行检索"
+                onChange={searchTax}
+              />
+            </Form.Item>
+            <Form.Item name='tree'>
+              <Tree
+                onSelect={(key: any, info: any)=>{showChildrenDrawer(key, info)}}
+                loadData={props.onLoad}
+                treeData={props.list}
+                switcherIcon={<Icon type="down" />}
+              />
+            </Form.Item>
+          </Form>  
+          <Card style={{width: 360}}>  
+            <Form key={props?.info?.key} {...layout} initialValues={props.info} >
+              <Form.Item initialValue={props.info?.taxCategoryCode} name={"taxCategoryCode"} label="编码">
+                  <FormReadOnly />
+                </Form.Item>
+                <Form.Item name={"productName"} label="货物和劳务名称" rules={[{ type: 'email' }]}>
+                  <FormReadOnly />
+                </Form.Item>
+                <Form.Item name={"shorthand"} label="简称" rules={[{ type: 'number', min: 0, max: 99 }]}>
+                  <FormReadOnly />
+                </Form.Item> 
+                <Form.Item name={"desc"} label="说明">
+                  <FormReadOnly />
+                </Form.Item> 
+              </Form> 
+          </Card>
+        </div> 
+      </Drawer>
+    )
+}

package/src/index.ts

@@ -1,12 +1,12 @@
-
-import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
-
-export { default as Invoice } from './Invoice';
-export { default as InvoiceController } from './Invoice/InvoiceController';
-export type { default as IGood } from './Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood';
-
-export { default as InvoiceTypeModal } from './InvoiceTypeModal';
-export type { IInvoiceTypeModalProps } from './InvoiceTypeModal';
-
-export { default as TaxClassificationModal } from './TaxClassificationCodeModal';
-export type { TaxClassificationProps } from './TaxClassificationCodeModal';
+
+import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
+
+export { default as Invoice } from './Invoice';
+export { default as InvoiceController } from './Invoice/InvoiceController';
+export type { default as IGood } from './Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood';
+
+export { default as InvoiceTypeModal } from './InvoiceTypeModal';
+export type { IInvoiceTypeModalProps } from './InvoiceTypeModal';
+
+export { default as TaxClassificationModal } from './TaxClassificationCodeModal';
+export type { TaxClassificationProps } from './TaxClassificationCodeModal';