kts-component-invoice-operate 3.2.82 → 3.2.83

package/src/Invoice/ui/digtal/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/digtal/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/digtal/InvoiceHeader/index.less

@@ -1,58 +1,58 @@
-.kts-invoice-operate-invoice-digtal-header {
-  height    : 121px;
-  text-align: center;
-  position  : relative;
-
-
-  .digtal-header-title {
-    font-size  : 28px;
-    color      : #9F603D;
-    width      : 100%;
-    position   : absolute;
-    top        : 21px;
-    font-weight: 400;
-
-    &::after,
-    &::before {
-      content      : "";
-      position     : absolute;
-      width        : 330px;
-      border-bottom: 2px solid #9F613E;
-      left         : 50%;
-      bottom       : -4px;
-      transform    : translateX(-50%);
-    }
-
-    &::after {
-      bottom: -8px;
-    }
-  }
-
-  .digtal-header-tag {
-    position     : absolute;
-    top          : 47px;
-    left         : 157px;
-    padding      : 2px 8px;
-    border-radius: 4px;
-    border       : 1px solid #0074FF;
-    color        : #0074FF;
-    background   : rgba(0, 116, 255, 0.20);
-  }
-
-  .digtal-header-fields {
-    display       : flex;
-    flex-direction: column;
-    position      : absolute;
-    right         : 40px;
-    top           : 23px;
-
-    .digtal-header-field {
-      display    : flex;
-      font-weight: bold;
-
-      .digtal-header-field-title {
-        color: #9F613E;
-      }
-    }
-  }
+.kts-invoice-operate-invoice-digtal-header {
+  height    : 121px;
+  text-align: center;
+  position  : relative;
+
+
+  .digtal-header-title {
+    font-size  : 28px;
+    color      : #9F603D;
+    width      : 100%;
+    position   : absolute;
+    top        : 21px;
+    font-weight: 400;
+
+    &::after,
+    &::before {
+      content      : "";
+      position     : absolute;
+      width        : 330px;
+      border-bottom: 2px solid #9F613E;
+      left         : 50%;
+      bottom       : -4px;
+      transform    : translateX(-50%);
+    }
+
+    &::after {
+      bottom: -8px;
+    }
+  }
+
+  .digtal-header-tag {
+    position     : absolute;
+    top          : 47px;
+    left         : 157px;
+    padding      : 2px 8px;
+    border-radius: 4px;
+    border       : 1px solid #0074FF;
+    color        : #0074FF;
+    background   : rgba(0, 116, 255, 0.20);
+  }
+
+  .digtal-header-fields {
+    display       : flex;
+    flex-direction: column;
+    position      : absolute;
+    right         : 40px;
+    top           : 23px;
+
+    .digtal-header-field {
+      display    : flex;
+      font-weight: bold;
+
+      .digtal-header-field-title {
+        color: #9F613E;
+      }
+    }
+  }
 }

package/src/Invoice/ui/digtal/InvoiceHeader/index.tsx

@@ -1,77 +1,77 @@
-
-import React from "react";
-import { Form } from 'kts-components-antd-x3';
-import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
-import { decorator } from "grey-react-box";
-import Invoice from "../../../../Invoice";
-import './index.less'
-
-
-export interface IInvoiceHeader {
-    /** 标题 */
-    title?: string;
-
-    /** 标记文字 */
-    defaultTag?: string;
-
-    /** 默认 发票号码 */
-    defaultNo?: string;
-
-    /** 默认 开票日期 */
-    defaultInvoicingDate?: string;
-}
-
-export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Form.create())(props => {
-
-    const { form } = props;
-
-    /** 控制器 */
-    const controller = Invoice.useInvoiceController();
-
-    const title = React.useMemo(() => {
-        if (props.title) {
-            return props.title
-        }
-        return '电子发票(增值税专用发票)'
-    }, [props.title])
-
-    controller.useForm('invoiceHeader', form);
-
-    return (
-        <div className="kts-invoice-operate-invoice-digtal-header" >
-            <div className="digtal-header-title" >{title}</div>
-            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
-            <div className="digtal-header-fields" >
-                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
-                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
-            </div>
-        </div>
-    )
-})
-
-/** 字段 */
-class Field extends React.Component<{ title: string, value?: string }>{
-    render(): React.ReactNode {
-        const { title, value } = this.props;
-        if (value) {
-            return (
-                <div className="digtal-header-field" >
-                    <div className="digtal-header-field-title" >{title}</div>
-                    <div className="digtal-header-field-value" >{value}</div>
-                </div>
-            )
-        } else {
-            return <></>
-        }
-    }
-}
-
-class Tag extends React.Component<{ value?: string }>{
-    render(): React.ReactNode {
-        return (
-            this.props.value
-                ? <div className="digtal-header-tag" >{this.props.value}</div>
-                : <></>
-        )
-    }
-}
+
+import React from "react";
+import { Form } from 'kts-components-antd-x3';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import { decorator } from "grey-react-box";
+import Invoice from "../../../../Invoice";
+import './index.less'
+
+
+export interface IInvoiceHeader {
+    /** 标题 */
+    title?: string;
+
+    /** 标记文字 */
+    defaultTag?: string;
+
+    /** 默认 发票号码 */
+    defaultNo?: string;
+
+    /** 默认 开票日期 */
+    defaultInvoicingDate?: string;
+}
+
+export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Form.create())(props => {
+
+    const { form } = props;
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    const title = React.useMemo(() => {
+        if (props.title) {
+            return props.title
+        }
+        return '电子发票(增值税专用发票)'
+    }, [props.title])
+
+    controller.useForm('invoiceHeader', form);
+
+    return (
+        <div className="kts-invoice-operate-invoice-digtal-header" >
+            <div className="digtal-header-title" >{title}</div>
+            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
+            <div className="digtal-header-fields" >
+                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
+                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
+            </div>
+        </div>
+    )
+})
+
+/** 字段 */
+class Field extends React.Component<{ title: string, value?: string }>{
+    render(): React.ReactNode {
+        const { title, value } = this.props;
+        if (value) {
+            return (
+                <div className="digtal-header-field" >
+                    <div className="digtal-header-field-title" >{title}</div>
+                    <div className="digtal-header-field-value" >{value}</div>
+                </div>
+            )
+        } else {
+            return <></>
+        }
+    }
+}
+
+class Tag extends React.Component<{ value?: string }>{
+    render(): React.ReactNode {
+        return (
+            this.props.value
+                ? <div className="digtal-header-tag" >{this.props.value}</div>
+                : <></>
+        )
+    }
+}

package/src/Invoice/ui/digtal/Sign/index.less

@@ -1,49 +1,49 @@
-.kts-invoice-operate-sign-digtal {
-    padding      : 20px 20px 0;
-    border-bottom: 2px solid #9F613E;
-    border-left  : 2px solid #9F613E;
-    border-right : 2px solid #9F613E;
-
-    .sign-digtal-label {
-        color      : #9F613E;
-        font-weight: bold;
-    }
-}
-
-.kts-invoice-operate-sign-digtal-readOnly {
-    .sign-digtal-readOnly-cont {
-        border-bottom: 2px solid #9F613E;
-        border-left  : 2px solid #9F613E;
-        border-right : 2px solid #9F613E;
-        display      : flex;
-
-        &>div:nth-child(even) {
-            flex          : 1;
-            display       : flex;
-            flex-direction: column;
-            padding       : 10px;
-            min-height    : 189px;
-        }
-
-        &>div:nth-child(odd) {
-            flex           : none;
-            text-align     : center;
-            color          : #9F613E;
-            display        : flex;
-            flex-direction : column;
-            justify-content: center;
-            justify-items  : center;
-            padding        : 0 4px;
-            border-right   : 2px solid #9F613E;
-        }
-    }
-
-    .digtal-readOnly-form {
-        padding-left: 30px;
-
-        .ktsAnt3x-form-item-label label {
-            color      : #9F613E;
-            font-weight: bold;
-        }
-    }
+.kts-invoice-operate-sign-digtal {
+    padding      : 20px 20px 0;
+    border-bottom: 2px solid #9F613E;
+    border-left  : 2px solid #9F613E;
+    border-right : 2px solid #9F613E;
+
+    .sign-digtal-label {
+        color      : #9F613E;
+        font-weight: bold;
+    }
+}
+
+.kts-invoice-operate-sign-digtal-readOnly {
+    .sign-digtal-readOnly-cont {
+        border-bottom: 2px solid #9F613E;
+        border-left  : 2px solid #9F613E;
+        border-right : 2px solid #9F613E;
+        display      : flex;
+
+        &>div:nth-child(even) {
+            flex          : 1;
+            display       : flex;
+            flex-direction: column;
+            padding       : 10px;
+            min-height    : 189px;
+        }
+
+        &>div:nth-child(odd) {
+            flex           : none;
+            text-align     : center;
+            color          : #9F613E;
+            display        : flex;
+            flex-direction : column;
+            justify-content: center;
+            justify-items  : center;
+            padding        : 0 4px;
+            border-right   : 2px solid #9F613E;
+        }
+    }
+
+    .digtal-readOnly-form {
+        padding-left: 30px;
+
+        .ktsAnt3x-form-item-label label {
+            color      : #9F613E;
+            font-weight: bold;
+        }
+    }
 }