kts-component-invoice-operate 3.2.243 → 3.2.245

package/src/Invoice/ui/digtal/PayList/hook/useColumns/index.tsx

@@ -0,0 +1,168 @@
+
+import React from 'react';
+import { Form } from 'kts-components-antd-x3';
+import { Select, Input, Spin, InputProps, Cascader } from 'kts-xui';
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+import { IGood2,IGood3 } from '../../../../../InvoiceController';
+import Invoice from '../../../../..';
+import TitleText from './ui/TitleText';
+
+export default (form: WrappedFormUtils) => {
+  const { getFieldDecorator } = form;
+
+  const controller = Invoice.useInvoiceController();
+
+  const rootElement = controller.useMemo(s => s.rootElement, []);
+
+  /** 组件模式 */
+  const model = controller.useMemo(e => e.model, []);
+
+  /** 正在编辑的货物 */
+  const editGood = controller.useMemo((e) => e.payListState.editGood, []);
+
+  /** 禁用字段 */
+  const disableds = controller.useMemo((e) => e.stakeholder.disableds || [], []);
+
+  /** 运输工具种类列表 */
+  const vehicleTypeList = controller.useMemo((e) => e.payListState.vehicleTypeList, []);
+
+  const area = controller.useMemo((e) => e.payListState.area, []);
+  const addressFieldNames = controller.useMemo((e) => e.payListState.addressFieldNames, []);
+  const getVehicle = React.useCallback((value?: string) => {
+    if (vehicleTypeList && vehicleTypeList.length > 0) {
+      return vehicleTypeList.find(e => e.value === value)?.label || '';
+    }
+  }, [vehicleTypeList])
+  const splitArea = React.useCallback((value?: string) => {
+    if (value) {
+      const _array = value.split(',');
+      return _array;
+    } else {
+      return [];
+    }
+  }, []);
+  const [required,setRequired]=React.useState(false);
+
+  const onInputChange=React.useCallback((e:any)=>{
+    const value=e.target.value;
+    if(value){
+      setRequired(true);
+    }else{
+      setRequired(false);
+    }
+  },[]);
+  /** 表头 */
+  const columns = React.useMemo(() => {
+    return [
+      {
+        title: '序号',
+        key: 'sortNumber',
+        dataIndex: 'sortNumber',
+        width: 50,
+        render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
+      },
+      {
+        title: <TitleText  >支付渠道</TitleText>,
+        key: 'channel',
+        render: (_: string, record: IGood3) => {
+          if (editGood?.$index === record.$index && !disableds.includes('channel') && !(model === 'prefab')) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('channel', {
+                  initialValue: editGood.channel,
+                  rules: [
+                    { required: required, message: '请输入' },
+                  ],
+                })(
+                  <Select
+                    className="kts-invoice-operate-goods-list-table-tax-rate"
+                    allowClear={true}
+                    // showArrow={false}
+                    style={{ width: '100%' }}
+                    getPopupContainer={() => rootElement || document.body}
+                    onChange={async (value) => {
+                      await controller.wait()
+                      controller.setEditPay({ channel: value });
+                    }}
+                  >
+                    {(record.vehicleList || vehicleTypeList).map((e, i) => {
+                      return (
+                        <Select.Option key={i} value={e.value}>
+                          {e.label}
+                        </Select.Option>
+                      );
+                    })}
+                  </Select>,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{getVehicle(record.channel)}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText >交易单号</TitleText>,
+        key: 'number',
+        width: 119,
+        render: (_: string, record: IGood3) => {
+          if (editGood?.$index === record.$index && !disableds.includes('number') && model !== 'prefab') {
+            return (
+              <Form.Item>
+                {getFieldDecorator('number', {
+                  initialValue: editGood.number,
+                  rules: [
+                    { required: required, message: '请输入' },
+                  ],
+                })(
+                  <MyInput
+                    maxLength={40}
+                    onChange={async (e) => {
+                      // onInputChange(e);
+                      await controller.wait()
+                      await controller.setEditPay({ number: form.getFieldsValue().number });
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{record.number}</span>;
+          }
+        },
+      },
+    ]
+
+      // 只读
+      .filter(e => {
+        if (model === 'readOnly') {
+          return e.key !== 'operating';
+        } else {
+          return true;
+        }
+      })
+      .map((e) => {
+        return {
+          ...e,
+          ellipsis: true,
+        };
+      }) as any[];
+  }, [editGood, controller, model, getVehicle,required]);
+
+  return columns;
+};
+
+
+class MyInput extends React.Component<InputProps & { loading?: boolean }> {
+  render() {
+    if (this.props.loading) {
+      return (
+        <Spin size="small">
+          <Input {...this.props} autoComplete="off" />
+        </Spin>
+      )
+    } else {
+      return <Input {...this.props} autoComplete="off" />
+    }
+  }
+}

package/src/Invoice/ui/digtal/PayList/hook/useColumns/ui/TitleText/index.tsx

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import { Typography } from 'kts-components-antd-x3';
+import { ValidationRule } from 'kts-components-antd-x3/lib/form';
+
+const { Text } = Typography;
+
+export default (props: { children?: React.ReactNode, required?: boolean, rules?: ValidationRule[] }) => {
+
+    const { rules, children } = props;
+
+    const required = React.useMemo(() => rules?.some(e => !!e.required) || props.required, [rules, props.required]);
+
+    return (
+        <>
+            {required ? <Text type="danger">*</Text> : <></>}
+            {children}
+        </>
+    )
+};

package/src/Invoice/ui/digtal/PayList/hook/useOnRow/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * 表格行事件
+ */
+
+import React from 'react';
+import Invoice from '../../../../..';
+import IGood from '../../../../../InvoiceController/InvoiceControllerState/PayListState/IGood';
+
+export default () => {
+  /** 控制器 */
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const onClick = React.useCallback(
+    async (record: IGood) => {
+      // if (model === 'prefab') return;
+      if (model === 'readOnly') return;
+
+      const editGood = controller.state.payListState.editGood;
+
+      if (editGood) {
+        if (editGood.$index === record.$index) return;
+        await controller.saveEditPay();
+        await controller.wait();
+        await controller.pipeline(async s => { s.payListState.editGood || (await controller.setEditPay(record)) })();
+      } else {
+        await controller.setEditPay(record);
+      }
+    },
+    [controller, model],
+  );
+
+  return {
+    onClick,
+  };
+};

package/src/Invoice/ui/digtal/PayList/hook/useRowSelection/index.tsx

@@ -0,0 +1,120 @@
+
+import React from 'react';
+import { Checkbox } from 'kts-components-antd-x3';
+import Invoice from '../../../../..';
+
+export default () => {
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    /** 列表选中的货物索引列表 */
+    const selectedRowKeys = controller.useMemo(s => s.payListState.selectedGoodIndex, []);
+
+    /** 货物列表 */
+    const goodsList = controller.useMemo(s => s.payListState.goodsList, []);
+
+    /** 组件模式 */
+    const model = controller.useMemo(s => s.model, []);
+
+    /** 搜索条件 */
+    // const searchValue = controller.useMemo(s => s.goodsListState.searchValue, []);
+
+    /** 是否显示选择框 */
+    const isShow = React.useMemo(() => {
+        if (model === 'readOnly' || model === 'prefab') return false
+        return true;
+    }, [model])
+
+    /** 是否全选 */
+    // const isAll = controller.useMemo(s => s.goodsListState.goodsList.length > 0 && s.goodsListState.selectedGoodIndex.length === s.goodsListState.goodsList.length, [])
+    const isAll = controller.useMemo(s => {
+        if (s.payListState.selectedGoodIndex.length <= 0) return false;
+        const seeGoodsIndex = s.payListState.goodsList.map(e => e.$index);
+        const selectedGoodIndex = s.payListState.selectedGoodIndex.filter(e => seeGoodsIndex.some(t => e === t));
+        return selectedGoodIndex.length === seeGoodsIndex.length
+    }, [])
+
+    const indeterminate = controller.useMemo(s => {
+        const seeGoodsIndex = s.payListState.goodsList.map(e => e.$index);
+        const selectedGoodIndex = s.payListState.selectedGoodIndex.filter(e => seeGoodsIndex.some(t => e === t));
+        if (selectedGoodIndex.length === 0) return false;
+        return selectedGoodIndex.length < seeGoodsIndex.length
+    }, [])
+    /** 点击了全选 */
+    const onClickSelectAll = React.useCallback(async () => {
+        if (isAll) {
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = s.payListState.goodsList.map(e => e.$index)
+
+                s.payListState.selectedGoodIndex = s.payListState.selectedGoodIndex.filter(e => !seeGoodsIndex.some(t => e === t));
+            })()
+        } else {
+            await controller.pipeline(async s => {
+                const seeGoodsIndex = s.payListState.goodsList.map(e => e.$index)
+
+                s.payListState.selectedGoodIndex = [...s.payListState.selectedGoodIndex, ...seeGoodsIndex];
+                s.payListState.selectedGoodIndex = Array.from(new Set(s.payListState.selectedGoodIndex));
+            })()
+        }
+        // await sortOut(true);
+    }, [controller, isAll])
+
+    const onSelect = React.useCallback(async (record, selected) => {
+        if (selected) {
+            await controller.pipeline(async s => {
+                s.payListState.selectedGoodIndex = [...s.payListState.selectedGoodIndex, record.$index];
+                s.payListState = { ...s.payListState };
+            })()
+        } else {
+            await controller.pipeline(async s => {
+                s.payListState.selectedGoodIndex = s.payListState.selectedGoodIndex.filter(e => e !== record.$index);
+                s.payListState = { ...s.payListState };
+            })()
+        }
+        // await sortOut(selected);
+    }, [controller])
+
+    const columnTitle = React.useMemo(() => {
+        return (
+            <Checkbox
+                onChange={onClickSelectAll}
+                indeterminate={indeterminate}
+                checked={isAll}
+            ></Checkbox>
+        )
+    }, [goodsList, selectedRowKeys, onClickSelectAll, isAll, indeterminate])
+
+    /** 选择了商品后 调整 折扣行 和 被折扣行 */
+    const sortOut = React.useCallback(async (selected: boolean) => {
+        await controller.wait();
+        await controller.pipeline(async s => {
+            s.payListState.selectedGoodIndex.forEach($index => {
+                const goods = s.payListState.goodsMap.get($index);
+                if (!goods) return;
+
+                // 数组位置
+                let t = s.payListState.goodsList.indexOf(goods);
+                // goods.lineAttribute === LineAttributeType.折扣行 ? t : t++;
+                const i = s.goodsListState.goodsList[t].$index;
+                if (selected) {
+                    if (s.payListState.selectedGoodIndex.indexOf(i) < 0) s.payListState.selectedGoodIndex = [...s.payListState.selectedGoodIndex, i];
+                } else {
+                    if (s.payListState.selectedGoodIndex.indexOf(i) < 0) s.payListState.selectedGoodIndex = s.payListState.selectedGoodIndex.filter(e => e !== $index);
+                }
+            })
+        })()
+    }, [controller])
+
+    // React.useEffect(() => {
+    //     sortOut(true);
+    // }, [sortOut, goodsList])
+
+    if (isShow === false) return undefined;
+    return {
+        columnWidth: 45,
+        columnTitle,
+        onSelect,
+        selectedRowKeys,
+    }
+}

package/src/Invoice/ui/digtal/PayList/hook/useWindowClick/index.tsx

@@ -0,0 +1,19 @@
+
+
+import React from "react";
+import { InvoiceController } from "../../../../../..";
+
+/**
+ * 点击组件外部 保存正在编辑的支付
+ */
+export default function useWindowClick(controller: InvoiceController) {
+
+  React.useEffect(() => {
+    const click = () => { setTimeout(controller.saveEditPay) };
+
+    window.addEventListener('click', click);
+    return () => {
+      window.removeEventListener('click', click);
+    };
+  }, [controller]);
+}

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

@@ -0,0 +1,73 @@
+.kts-invoice-operate-freight{
+  // padding      : 20px;
+  border-bottom: 2px solid #9F613E;
+  border-left: 2px solid #9F613E;
+  border-right: 2px solid #9F613E;
+
+  .real-estate-info-digtal-label {
+    padding: 20px 20px 0;
+    color: #9F613E;
+    font-weight: bold;
+  }
+
+  .ktsAnt3x-row.ktsAnt3x-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.kts-invoice-operate-goods-list-digtal {
+
+  .goods-list-digtal-discount-tag {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    border: 1px solid;
+    padding: 0 5px;
+    border-radius: 4px;
+  }
+
+  .kts-invoice-operate-goods-list-table-tax-rate {
+    .ktsAnt3x-select-selection-selected-value {
+      float: right;
+    }
+  }
+
+  .kts-invoice-operate-freight-list-able {
+    display: flex;
+    padding: 10px;
+    border-bottom: 2px solid #9F613E;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .ktsAntX-table {
+
+    .ktsAntX-table-row.kts-invoice-operate-goods-be-discount .ktsAntX-table-cell {
+      color: #f00;
+    }
+
+    // .ktsAntX-table-row.kts-invoice-operate-goods-discount .ktsAntX-table-cell {
+    // background: #f5f5f5;
+    // }
+  }
+}
+
+.kts-invoice-operate-goods-list-table-digtal {
+
+  .ktsAnt3x-form-item-control.has-error {
+    border: 1px solid #f00;
+  }
+
+  .kts-invoice-operate-goods-list-table.kts-invoice-operate-prefab {
+    .ktsAnt3x-table-row {
+      color: rgba(0, 0, 0, 0.25);
+      background: #f5f5f5;
+    }
+  }
+
+  .kts-invoice-operate-goods-list-table-search-protrude {
+    background: #ff0;
+    color: #000;
+    font-weight: bold;
+  }
+}

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

@@ -0,0 +1,132 @@
+
+import React from 'react';
+import classnames from 'classnames';
+import { decorator } from 'grey-react-box';
+import { Form } from 'kts-components-antd-x3';
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import Invoice from '../../..';
+
+import TableVirtual from './ui/TableVirtual';
+import AddRowButton from './ui/AddRowButton';
+import TableRow from './ui/TableRow';
+
+import useColumns from './hook/useColumns';
+import useOnRow from './hook/useOnRow';
+import useWindowClick from './hook/useWindowClick';
+import useRowSelection from './hook/useRowSelection';
+
+import useDelRowButton from './ui/BulkMenu/hooks/useDelRowButton';
+
+import './index.less';
+
+export interface IGoodsListProps {
+
+  /** 产品最大数 */
+  goodMax?: number;
+
+  addressOptions?: any[];
+  /**
+   * 支付方式枚举
+   */
+  vehicleTypeList:any[];
+  /**
+   * 地址数据字段名
+   */
+  fieldNames?: any;
+
+}
+
+export default class PayList extends React.Component<IGoodsListProps> {
+  render() {
+    return <Main {...this.props} />
+  }
+}
+
+const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Form.create())((props) => {
+  const { form } = props;
+  /** 控制器 */
+  const controller = Invoice.useInvoiceController();
+
+  const goodsList = controller.useMemo(s => s.payListState.goodsList, []);
+
+  /** 货物列表 */
+  const dataSource = controller.useMemo(s => s.payListState.goodsList, [])
+
+  /** 表格行事件 */
+  const onRow = useOnRow();
+
+  /** 批量删除 */
+  const delRowButton = useDelRowButton();
+
+
+  useWindowClick(controller); // 点击组件外部 保存正在编辑的货物
+
+  /** 注册 from 对象 */
+  React.useEffect(() => {
+    controller.pipeline<WrappedFormUtils>(async (s, form) => { s.payListState = { ...s.payListState, form } })(props.form);
+  }, [controller, props.form]);
+  React.useEffect(() => {
+    controller.run(async (s) => {
+      s.payListState.addressFieldNames = props.fieldNames
+    });
+  }, [props.fieldNames])
+  React.useEffect(() => {
+    controller.run(async (s) => {
+      s.payListState.vehicleTypeList = props.vehicleTypeList
+    });
+  }, [props.vehicleTypeList])
+  // React.useEffect(() => {
+  //   controller.run(async (s) => {
+  //     s.payListState.area = props.addressOptions
+  //   });
+  // }, [props.addressOptions])
+  // 跟新 货物
+  React.useEffect(() => {
+    controller.run(async (s) => {
+      s.payListState.goodsMap = new Map();
+      goodsList.forEach((e) => { s.payListState.goodsMap.set(e.$index, e); });
+    });
+  }, [controller, goodsList]);
+
+  /** props 产品最大数 更新 */
+  React.useEffect(() => {
+    controller.pipeline(async s => { s.payListState.goodMax = props.goodMax })()
+  }, [controller, props.goodMax])
+  // 注册 form
+  //  controller.useForm('freightInfo', form);
+  return (
+    <div className="kts-invoice-operate-freight">
+      <div className='real-estate-info-digtal-label' >支付信息</div>
+      <div className="kts-invoice-operate-goods-list-digtal" onClick={(e) => { e.stopPropagation() }} >
+        <div className="kts-invoice-operate-freight-list-able">
+          {/* 添加行 */}
+          <AddRowButton />
+
+          {/* 批量删除 */}
+          {delRowButton.button}
+
+          <div style={{ flex: 1 }} />
+
+        </div>
+        <div className={classnames('kts-invoice-operate-goods-list-table-digtal')}>
+          <TableVirtual
+            size="small"
+            rowKey="$index"
+            pagination={false}
+            scroll={{ y: 280 }}
+            components={{ body: { row: TableRow } }}
+            dataSource={dataSource}
+            columns={useColumns(props.form)}
+            rowSelection={useRowSelection()}
+            onRow={record => ({
+              onClick: () => {
+                onRow.onClick(record);
+              },
+            })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/Invoice/ui/digtal/PayList/ui/AddRowButton/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Invoice from '../../../../..';
+import { Button, message } from 'kts-xui';
+import InvoiceController, { LineAttributeType } from '../../../../../InvoiceController';
+
+export default () => {
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const rootElement = controller.useMemo(s => s.rootElement, []);
+
+  /** 产品数据量 */
+  const goodsNum = controller.useMemo(s => s.payListState.goodsList.length, []);
+
+  /** 搜索条件 */
+  const isAddRow = controller.useMemo(s => s.payListState.isAddRow, []);
+
+  /** 产品最大数 */
+  const goodMax = controller.useMemo(s => s.payListState.goodMax, []);
+
+  /** 按钮是否禁用 */
+  const disabled = React.useMemo(() => {
+    return typeof goodMax === 'number' ? goodsNum >= goodMax : false
+  }, [goodMax, goodsNum])
+
+  const onClick = React.useCallback(async () => {
+    await addGood(controller);
+    await rollBottom(controller, rootElement);
+  }, [controller, rootElement]);
+
+  if (isAddRow === false) return <></>;
+  if (model === 'prefab') return <></>;
+  if (model === 'readOnly') return <></>;
+
+  return (
+    <Button size='small' type='primary' onClick={onClick} disabled={disabled}>
+      增行
+    </Button>
+  );
+};
+
+/** 添加一个空货物 */
+async function addGood(controller: InvoiceController) {
+  await controller.saveEditPay();
+  await controller.wait();
+  await controller.run(async (s) => {
+    if (s.payListState.editGood) {
+      // message.error({
+      //   content: '你正在编辑一个货物运输行',
+      //   key: '你正在编辑一个货物运输行',
+      // });
+      // return;
+      await controller.state.payListState.form?.validateFields(async (err: any, values: any) => {
+        if (err) {
+          const firstError: any = Object.values(err)[0];
+          message.error({
+            content: firstError.errors[0].message,
+            key: '你正在编辑一个货物',
+          });
+          return;
+        }
+      });
+    }
+    s.payListState.editGood = await controller.addPay({});
+  });
+}
+
+/** 货物列表，滚动到底部 */
+async function rollBottom(controller: InvoiceController, rootElement: HTMLDivElement | null | undefined) {
+  await controller.wait();
+  const cont = rootElement?.querySelector('.ktsAntX-table-body');
+  if (!cont) return;
+  cont.scrollTop = cont.scrollHeight;
+}

package/src/Invoice/ui/digtal/PayList/ui/BulkMenu/hooks/useDelRowButton/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Invoice from '../../../../../../..';
+import { Button, Menu } from 'kts-xui';
+
+export default () => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const isRemRow = controller.useMemo(s => s.payListState.isRemRow, []);
+
+  /** 是否禁用 */
+  const disabled = controller.useMemo((s) => {
+    if (s.payListState.selectedGoodIndex.length <= 0) return true;
+    return false;
+  }, []);
+
+  /** 点击了删除 */
+  const onClick = React.useCallback(async () => {
+    const selectedGoodIndex = controller.state.payListState.selectedGoodIndex.slice();
+    for (let i = 0; i < selectedGoodIndex.length; i++) {
+      await controller.delPay(selectedGoodIndex[i]);
+    }
+    await controller.run(async s => { s.payListState.selectedGoodIndex = [] });
+  }, [])
+
+  const menuItem = React.useMemo(() => {
+
+    if (model === 'prefab') return <></>;
+    if (model === 'readOnly') return <></>;
+
+    return (
+      <Menu.Item key="1" onClick={onClick} disabled={disabled}> 删除行 </Menu.Item>
+    )
+  }, [model, onClick, disabled])
+
+  const button = React.useMemo(() => {
+
+    if (isRemRow === false) return <></>;
+    if (model === 'prefab') return <></>;
+    if (model === 'readOnly') return <></>;
+
+    return (
+      <Button size='small' onClick={onClick} disabled={disabled} >删除</Button>
+    )
+  }, [model, onClick, disabled, isRemRow])
+
+  return { button, menuItem };
+};