kts-component-invoice-operate 3.2.178 → 3.2.180

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

@@ -1,246 +0,0 @@
-
-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 } 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.freightListState.editGood, []);
-
-  /** 禁用字段 */
-  const disableds = controller.useMemo((e) => e.stakeholder.disableds || [], []);
-
-  /** 运输工具种类列表 */
-  const vehicleTypeList = controller.useMemo((e) => e.freightListState.vehicleTypeList, []);
-
-  const area = controller.useMemo((e) => e.freightListState.area, []);
-  const addressFieldNames = controller.useMemo((e) => e.freightListState.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 columns = React.useMemo(() => {
-    return [
-      {
-        title: '序号',
-        key: 'sortNumber',
-        dataIndex: 'sortNumber',
-        width: 50,
-        render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
-      },
-      {
-        title: <TitleText required >运输工具种类</TitleText>,
-        key: 'type',
-        render: (_: string, record: IGood2) => {
-          if (editGood?.$index === record.$index && !disableds.includes('type') && !(model === 'prefab')) {
-            return (
-              <Form.Item>
-                {getFieldDecorator('type', {
-                  initialValue: editGood.type,
-                  rules: [
-                    { required: true, message: '请输入' },
-                  ],
-                })(
-                  <Select
-                    className="kts-invoice-operate-goods-list-table-tax-rate"
-                    showArrow={false}
-                    style={{ width: '100%' }}
-                    getPopupContainer={() => rootElement || document.body}
-                    onChange={async (value) => {
-                      await controller.wait()
-                      controller.setEditFreight({ type: 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.type)}</span>;
-          }
-        },
-      },
-      {
-        title: <TitleText required>运输工具牌号</TitleText>,
-        key: 'licensePlate',
-        width: 119,
-        render: (_: string, record: IGood2) => {
-          if (editGood?.$index === record.$index && !disableds.includes('licensePlate') && model !== 'prefab') {
-            return (
-              <Form.Item>
-                {getFieldDecorator('licensePlate', {
-                  initialValue: editGood.licensePlate,
-                  rules: [
-                    { required: true, message: '请输入' },
-                  ],
-                })(
-                  <MyInput
-                    maxLength={200}
-                    onChange={async () => {
-                      await controller.wait()
-                      await controller.setEditFreight({ licensePlate: form.getFieldsValue().licensePlate });
-                    }}
-                  />,
-                )}
-              </Form.Item>
-            );
-          } else {
-            return <span style={{ padding: '0 10px' }}>{record.licensePlate}</span>;
-          }
-        },
-      },
-      {
-        title: <TitleText required>起运地</TitleText>,
-        key: 'origin',
-        width: 150,
-        render: (_: string, record: IGood2) => {
-          if (editGood?.$index === record.$index && !disableds.includes('origin') && model !== 'prefab') {
-            return (
-              <Form.Item>
-                {getFieldDecorator('origin', {
-                  initialValue: editGood.origin,
-                  rules: [
-                    { required: true, message: '请输入' },
-                  ],
-                })(<Cascader
-                    style={{ width: '100%' }}
-                    options={area}
-                    fieldNames={addressFieldNames}
-                    onChange={async (value) => {
-                      await controller.setEditFreight({ origin: value });
-                    }}
-                  />)}
-              </Form.Item>
-            );
-          } else {
-            return <span style={{ padding: '0 10px' }}>{record.origin}</span>;
-          }
-        },
-      },
-      {
-        title: <TitleText required>到达地</TitleText>,
-        dataIndex: 'destination',
-        key: 'destination',
-        width: 149,
-        render: (_: string, record: IGood2) => {
-          if (editGood?.$index === record.$index && !disableds.includes('destination') && model !== 'prefab') {
-            return (
-              <Form.Item>
-                {getFieldDecorator('destination', {
-                  initialValue: editGood.destination,
-                  rules: [
-                    { required: true, message: '请输入' },
-                  ],
-                })(
-                  <Cascader
-                    options={area}
-                    fieldNames={addressFieldNames}
-                    style={{ width: '100%' }}
-                    onChange={async (value) => {
-                      await controller.setEditFreight({ destination: value });
-                    }}
-                  />
-                )}
-              </Form.Item>
-            );
-          } else {
-            return <span style={{ padding: '0 10px' }}>{record.destination}</span>;
-          }
-        },
-      },
-      {
-        title: <TitleText required>运输货物名称</TitleText>,
-        dataIndex: 'itemName',
-        key: 'itemName',
-        width: 149,
-        render: (_: string, record: IGood2) => {
-          if (editGood?.$index === record.$index && !disableds.includes('itemName') && model !== 'prefab') {
-            return (
-              <Form.Item>
-                {getFieldDecorator('itemName', {
-                  initialValue: editGood.itemName,
-                  rules: [
-                    { required: true, message: '请输入货物名称' },
-                  ],
-                })(
-                  <MyInput
-                    maxLength={200}
-                    onChange={async () => {
-                      await controller.wait()
-                      await controller.setEditFreight({ itemName: form.getFieldsValue().itemName });
-                    }}
-                  />,
-                )}
-              </Form.Item>
-            );
-          } else {
-            return <span style={{ padding: '0 10px' }}>{record.itemName}</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]);
-
-  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/FreightList/hook/useColumns/ui/TitleText/index.tsx

@@ -1,20 +0,0 @@
-
-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/FreightList/hook/useOnRow/index.tsx

@@ -1,37 +0,0 @@
-/**
- * 表格行事件
- */
-
-import React from 'react';
-import Invoice from '../../../../..';
-import IGood from '../../../../../InvoiceController/InvoiceControllerState/FreightListState/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.freightListState.editGood;
-
-      if (editGood) {
-        if (editGood.$index === record.$index) return;
-        await controller.saveEditFreight();
-        await controller.wait();
-        await controller.pipeline(async s => { s.freightListState.editGood || (await controller.setEditFreight(record)) })();
-      } else {
-        await controller.setEditFreight(record);
-      }
-    },
-    [controller, model],
-  );
-
-  return {
-    onClick,
-  };
-};

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

@@ -1,120 +0,0 @@
-
-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.freightListState.selectedGoodIndex, []);
-
-    /** 货物列表 */
-    const goodsList = controller.useMemo(s => s.freightListState.goodsList, []);
-
-    /** 组件模式 */
-    const model = controller.useMemo(s => s.model, []);
-
-    /** 搜索条件 */
-    // const searchValue = controller.useMemo(s => s.goodsListState.searchValue, []);
-
-    /** 是否显示选择框 */
-    const isShow = React.useMemo(() => {
-        if (model === 'readOnly') 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.freightListState.selectedGoodIndex.length <= 0) return false;
-        const seeGoodsIndex = s.freightListState.goodsList.map(e => e.$index);
-        const selectedGoodIndex = s.freightListState.selectedGoodIndex.filter(e => seeGoodsIndex.some(t => e === t));
-        return selectedGoodIndex.length === seeGoodsIndex.length
-    }, [])
-
-    const indeterminate = controller.useMemo(s => {
-        const seeGoodsIndex = s.freightListState.goodsList.map(e => e.$index);
-        const selectedGoodIndex = s.freightListState.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.freightListState.goodsList.map(e => e.$index)
-
-                s.freightListState.selectedGoodIndex = s.freightListState.selectedGoodIndex.filter(e => !seeGoodsIndex.some(t => e === t));
-            })()
-        } else {
-            await controller.pipeline(async s => {
-                const seeGoodsIndex = s.freightListState.goodsList.map(e => e.$index)
-
-                s.freightListState.selectedGoodIndex = [...s.freightListState.selectedGoodIndex, ...seeGoodsIndex];
-                s.freightListState.selectedGoodIndex = Array.from(new Set(s.freightListState.selectedGoodIndex));
-            })()
-        }
-        // await sortOut(true);
-    }, [controller, isAll])
-
-    const onSelect = React.useCallback(async (record, selected) => {
-        if (selected) {
-            await controller.pipeline(async s => {
-                s.freightListState.selectedGoodIndex = [...s.freightListState.selectedGoodIndex, record.$index];
-                s.freightListState = { ...s.freightListState };
-            })()
-        } else {
-            await controller.pipeline(async s => {
-                s.freightListState.selectedGoodIndex = s.freightListState.selectedGoodIndex.filter(e => e !== record.$index);
-                s.freightListState = { ...s.freightListState };
-            })()
-        }
-        // 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.freightListState.selectedGoodIndex.forEach($index => {
-                const goods = s.freightListState.goodsMap.get($index);
-                if (!goods) return;
-
-                // 数组位置
-                let t = s.freightListState.goodsList.indexOf(goods);
-                // goods.lineAttribute === LineAttributeType.折扣行 ? t : t++;
-                const i = s.goodsListState.goodsList[t].$index;
-                if (selected) {
-                    if (s.freightListState.selectedGoodIndex.indexOf(i) < 0) s.freightListState.selectedGoodIndex = [...s.freightListState.selectedGoodIndex, i];
-                } else {
-                    if (s.freightListState.selectedGoodIndex.indexOf(i) < 0) s.freightListState.selectedGoodIndex = s.freightListState.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/FreightList/hook/useWindowClick/index.tsx

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

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

@@ -1,74 +0,0 @@
-.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-goods-list-able {
-    display: flex;
-    padding: 10px;
-    border-bottom: 2px solid #9F613E;
-    gap: 10px;
-    align-items: center;
-    height: 48px;
-  }
-
-  .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/FreightList/index.tsx

@@ -1,129 +0,0 @@
-
-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 FreightList 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.freightListState.goodsList, []);
-
-  /** 货物列表 */
-  const dataSource = controller.useMemo(s => s.freightListState.goodsList, [])
-
-  /** 表格行事件 */
-  const onRow = useOnRow();
-
-  /** 批量删除 */
-  const delRowButton = useDelRowButton();
-
-
-  useWindowClick(controller); // 点击组件外部 保存正在编辑的货物
-
-  /** 注册 from 对象 */
-  React.useEffect(() => {
-    controller.pipeline<WrappedFormUtils>(async (s, form) => { s.freightListState = { ...s.freightListState, form } })(props.form);
-  }, [controller, props.form]);
-  React.useEffect(() => {
-    controller.run(async (s) => {
-      s.freightListState.addressFieldNames = props.fieldNames
-    });
-  }, [props.fieldNames])
-  React.useEffect(() => {
-    controller.run(async (s) => {
-      s.freightListState.vehicleTypeList = props.vehicleTypeList
-    });
-  }, [props.vehicleTypeList])
-  React.useEffect(() => {
-    controller.run(async (s) => {
-      s.freightListState.area = props.addressOptions
-    });
-  }, [props.addressOptions])
-  // 跟新 货物
-  React.useEffect(() => {
-    controller.run(async (s) => {
-      s.freightListState.goodsMap = new Map();
-      goodsList.forEach((e) => { s.freightListState.goodsMap.set(e.$index, e); });
-    });
-  }, [controller, goodsList]);
-
-  /** props 产品最大数 更新 */
-  React.useEffect(() => {
-    controller.pipeline(async s => { s.freightListState.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-goods-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>
-  );
-});