kts-component-invoice-operate 3.1.19 → 3.2.0

package/src/Invoice/ui/{GoodsList → default/GoodsList}/ui/TableVirtual.o/index.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import { Table } from 'kts-components-antd-x3';
-import { TableProps } from 'kts-components-antd-x3/lib/table/interface';
-import './index.less';
-
-export default function <T = any>(props: TableProps<T>) {
-  const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
-
-  const tableBody = React.useMemo(() => {
-    if (!self) return;
-    return self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body') as HTMLDivElement;
-  }, [self]);
-
-  /** 显示指针 */
-  const [pointer, setPointer] = React.useState(0);
-
-  /** 行高 */
-  const rowHeight = React.useMemo(() => {
-    if (!self) return 33;
-
-    const td = self.querySelector('.ktsAnt3x-table-tbody td');
-    if (!td) return 33;
-
-    return td.clientHeight;
-  }, [self, props.dataSource]);
-
-  /** 间隔容器 */
-  const placeholder = React.useMemo(() => {
-    if (!self || !tableBody) return;
-    let placeholder = tableBody.querySelector(
-      '.table-virtual-placeholder',
-    ) as HTMLDivElement;
-    if (!placeholder) {
-      placeholder = document.createElement('div');
-      placeholder.className = 'table-virtual-placeholder';
-      tableBody.appendChild(placeholder);
-    }
-    return placeholder;
-  }, [self, tableBody]);
-
-  // 设置占位dom的搞
-  const placeholderHeight = React.useMemo(() => {
-    if (!self || !rowHeight || !props.dataSource || !placeholder) return;
-    const placeholderHeight = rowHeight * props.dataSource.length;
-    placeholder.style.height = `${placeholderHeight}px`;
-    return placeholderHeight;
-  }, [self, rowHeight, props.dataSource, placeholder]);
-
-  /** 可以容纳的行数 */
-  const rowSize = React.useMemo(() => {
-    if (!tableBody! || !rowHeight) return 0;
-    return Math.ceil(tableBody.clientHeight / rowHeight);
-  }, [tableBody, rowHeight, placeholderHeight]);
-
-  // 计算渲染的行
-  const dataSource = React.useMemo(() => {
-    if (!props.dataSource) return [];
-    if (props.dataSource.length < 10) return props.dataSource;
-
-    if (!rowSize) return [props.dataSource[0]];
-    return props.dataSource?.slice(pointer, pointer + 2 * rowSize);
-  }, [props.dataSource, pointer, rowSize]);
-
-  // 监听滚动
-  React.useEffect(() => {
-    if (!self || !placeholder || !props.dataSource || !rowHeight || !tableBody)
-      return;
-
-    const onScroll = () => {
-      if (!props.dataSource || !tableBody) return;
-      setPointer(Math.floor((props.dataSource.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
-    };
-    onScroll();
-
-    tableBody.addEventListener('scroll', onScroll);
-    return () => {
-      tableBody.removeEventListener('scroll', onScroll);
-    };
-  }, [self, placeholder, props.dataSource, rowHeight, rowSize]);
-
-  // 移动列表
-  React.useEffect(() => {
-    if (!self) return;
-
-    const table = self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body table') as HTMLDivElement;
-    if (!table) return;
-
-    table.style.top = `${pointer * rowHeight}px`;
-  }, [pointer, self, rowHeight]);
-
-  return (
-    <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
-      <Table {...props} dataSource={dataSource} />
-    </span>
-  );
-}
+import React from 'react';
+import { Table } from 'kts-components-antd-x3';
+import { TableProps } from 'kts-components-antd-x3/lib/table/interface';
+import './index.less';
+
+export default function <T = any>(props: TableProps<T>) {
+  const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
+
+  const tableBody = React.useMemo(() => {
+    if (!self) return;
+    return self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body') as HTMLDivElement;
+  }, [self]);
+
+  /** 显示指针 */
+  const [pointer, setPointer] = React.useState(0);
+
+  /** 行高 */
+  const rowHeight = React.useMemo(() => {
+    if (!self) return 33;
+
+    const td = self.querySelector('.ktsAnt3x-table-tbody td');
+    if (!td) return 33;
+
+    return td.clientHeight;
+  }, [self, props.dataSource]);
+
+  /** 间隔容器 */
+  const placeholder = React.useMemo(() => {
+    if (!self || !tableBody) return;
+    let placeholder = tableBody.querySelector(
+      '.table-virtual-placeholder',
+    ) as HTMLDivElement;
+    if (!placeholder) {
+      placeholder = document.createElement('div');
+      placeholder.className = 'table-virtual-placeholder';
+      tableBody.appendChild(placeholder);
+    }
+    return placeholder;
+  }, [self, tableBody]);
+
+  // 设置占位dom的搞
+  const placeholderHeight = React.useMemo(() => {
+    if (!self || !rowHeight || !props.dataSource || !placeholder) return;
+    const placeholderHeight = rowHeight * props.dataSource.length;
+    placeholder.style.height = `${placeholderHeight}px`;
+    return placeholderHeight;
+  }, [self, rowHeight, props.dataSource, placeholder]);
+
+  /** 可以容纳的行数 */
+  const rowSize = React.useMemo(() => {
+    if (!tableBody! || !rowHeight) return 0;
+    return Math.ceil(tableBody.clientHeight / rowHeight);
+  }, [tableBody, rowHeight, placeholderHeight]);
+
+  // 计算渲染的行
+  const dataSource = React.useMemo(() => {
+    if (!props.dataSource) return [];
+    if (props.dataSource.length < 10) return props.dataSource;
+
+    if (!rowSize) return [props.dataSource[0]];
+    return props.dataSource?.slice(pointer, pointer + 2 * rowSize);
+  }, [props.dataSource, pointer, rowSize]);
+
+  // 监听滚动
+  React.useEffect(() => {
+    if (!self || !placeholder || !props.dataSource || !rowHeight || !tableBody)
+      return;
+
+    const onScroll = () => {
+      if (!props.dataSource || !tableBody) return;
+      setPointer(Math.floor((props.dataSource.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
+    };
+    onScroll();
+
+    tableBody.addEventListener('scroll', onScroll);
+    return () => {
+      tableBody.removeEventListener('scroll', onScroll);
+    };
+  }, [self, placeholder, props.dataSource, rowHeight, rowSize]);
+
+  // 移动列表
+  React.useEffect(() => {
+    if (!self) return;
+
+    const table = self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body table') as HTMLDivElement;
+    if (!table) return;
+
+    table.style.top = `${pointer * rowHeight}px`;
+  }, [pointer, self, rowHeight]);
+
+  return (
+    <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
+      <Table {...props} dataSource={dataSource} />
+    </span>
+  );
+}

package/src/Invoice/ui/{GoodsList → default/GoodsList}/ui/TaxIncludedSwitch/index.tsx

@@ -1,31 +1,31 @@
-
-import React from 'react';
-import { Switch } from 'kts-xui';
-import Invoice from '../../../../';
-
-export default () => {
-
-    const controller = Invoice.useInvoiceController();
-
-    /** 是否含税 */
-    const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
-
-    /** 是否可以切换(含税/不含税)状态 */
-    const isSwitchTax = controller.useMemo(e => e.goodsListState.isSwitchTax, []);
-
-    const onChange = React.useCallback(e => {
-        controller.pipeline(async s => { s.goodsListState = { ...s.goodsListState, isTaxIncluded: e } })();
-    }, [])
-
-    return (
-        <span>
-            <label style={{ marginRight: 2 }}>含税:</label>
-            <Switch
-                disabled={isSwitchTax === false}
-                checked={isTaxIncluded}
-                defaultChecked
-                onChange={onChange}
-            />
-        </span>
-    )
+
+import React from 'react';
+import { Switch } from 'kts-xui';
+import Invoice from '../../../../..';
+
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    /** 是否含税 */
+    const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
+
+    /** 是否可以切换(含税/不含税)状态 */
+    const isSwitchTax = controller.useMemo(e => e.goodsListState.isSwitchTax, []);
+
+    const onChange = React.useCallback(e => {
+        controller.pipeline(async s => { s.goodsListState = { ...s.goodsListState, isTaxIncluded: e } })();
+    }, [])
+
+    return (
+        <span>
+            <label style={{ marginRight: 2 }}>含税:</label>
+            <Switch
+                disabled={isSwitchTax === false}
+                checked={isTaxIncluded}
+                defaultChecked
+                onChange={onChange}
+            />
+        </span>
+    )
 }

package/src/Invoice/ui/{ImportBuyerDrawer → default/ImportBuyerDrawer}/index.tsx

@@ -1,75 +1,75 @@
-import React from 'react';
-import { Drawer, Table } from 'kts-components-antd-x3';
-import Invoice from '../../';
-
-export default () => {
-  const controller = Invoice.useInvoiceController();
-
-  const visible = controller.useMemo((s) => s.buyerState.isVisibleDrawer, []);
-
-  const topExpand = controller.useMemo((s) => s.buyerState.topExpand, []);
-
-  // controller.pipeline(async s=>s.goodsListState.isTaxIncluded = true)()
-
-  const onClose = React.useCallback(() => {
-    controller.pipeline(async (s) => {
-      s.buyerState.isVisibleDrawer = false;
-    })();
-  }, [controller]);
-
-  return (
-    <Drawer
-      title="购方列表"
-      placement="right"
-      // closable={false}
-      destroyOnClose={true}
-      width={983}
-      onClose={onClose}
-      visible={visible}
-    >
-      {topExpand}
-      <DrawerBody />
-    </Drawer>
-  );
-};
-
-const DrawerBody = () => {
-  const controller = Invoice.useInvoiceController();
-
-  const columns = controller.useMemo((e) => e.buyerState.columns, []);
-
-  const dataSource = controller.useMemo((e) => e.buyerState.dataSource, []);
-  
-  const pagination = controller.useMemo((e) => e.buyerState.pagination, []);
-
-  React.useEffect(() => {
-    controller.getBuyerList &&
-      controller.getBuyerList({ pagination: { current: 1 } });
-  }, [controller]);
-
-  return (
-    <Table
-      bordered
-      size="small"
-      columns={columns}
-      dataSource={dataSource}
-      pagination={pagination}
-      onChange={(pagination) => {
-        controller.getBuyerList && controller.getBuyerList({ pagination });
-      }}
-      onRow={(record) => {
-        return {
-          onClick: async () => {
-            const re = await controller.state.buyerState.onRowClick(record);
-            if (re) {
-              controller.formList.get('buyer')?.setFieldsValue(re);
-              controller.pipeline(async (s) => {
-                s.buyerState.isVisibleDrawer = false;
-              })();
-            }
-          },
-        };
-      }}
-    />
-  );
-};
+import React from 'react';
+import { Drawer, Table } from 'kts-components-antd-x3';
+import Invoice from '../../..';
+
+export default () => {
+  const controller = Invoice.useInvoiceController();
+
+  const visible = controller.useMemo((s) => s.buyerState.isVisibleDrawer, []);
+
+  const topExpand = controller.useMemo((s) => s.buyerState.topExpand, []);
+
+  // controller.pipeline(async s=>s.goodsListState.isTaxIncluded = true)()
+
+  const onClose = React.useCallback(() => {
+    controller.pipeline(async (s) => {
+      s.buyerState.isVisibleDrawer = false;
+    })();
+  }, [controller]);
+
+  return (
+    <Drawer
+      title="购方列表"
+      placement="right"
+      // closable={false}
+      destroyOnClose={true}
+      width={983}
+      onClose={onClose}
+      visible={visible}
+    >
+      {topExpand}
+      <DrawerBody />
+    </Drawer>
+  );
+};
+
+const DrawerBody = () => {
+  const controller = Invoice.useInvoiceController();
+
+  const columns = controller.useMemo((e) => e.buyerState.columns, []);
+
+  const dataSource = controller.useMemo((e) => e.buyerState.dataSource, []);
+  
+  const pagination = controller.useMemo((e) => e.buyerState.pagination, []);
+
+  React.useEffect(() => {
+    controller.getBuyerList &&
+      controller.getBuyerList({ pagination: { current: 1 } });
+  }, [controller]);
+
+  return (
+    <Table
+      bordered
+      size="small"
+      columns={columns}
+      dataSource={dataSource}
+      pagination={pagination}
+      onChange={(pagination) => {
+        controller.getBuyerList && controller.getBuyerList({ pagination });
+      }}
+      onRow={(record) => {
+        return {
+          onClick: async () => {
+            const re = await controller.state.buyerState.onRowClick(record);
+            if (re) {
+              controller.formList.get('buyer')?.setFieldsValue(re);
+              controller.pipeline(async (s) => {
+                s.buyerState.isVisibleDrawer = false;
+              })();
+            }
+          },
+        };
+      }}
+    />
+  );
+};