kts-component-invoice-operate 3.1.20 → 3.2.0

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

@@ -0,0 +1,623 @@
+import React from 'react';
+import { Form } from 'kts-components-antd-x3';
+import { AutoComplete, Select, Button, Input, Spin, Tooltip, InputProps } from 'kts-xui';
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
+import { getItemNameWithShorthand } from '../../../../../tools/itemName';
+import { IGood, LineAttributeType } from '../../../../../InvoiceController';
+import Invoice from '../../../../..';
+import TitleText from './ui/TitleText';
+import ItemNameInput from './ui/ItemNameInput';
+import {
+  onChangeQuantity,
+  onChangePriceIncludeTax,
+  onChangePriceExcludeTax,
+  onChangeLineAmountIncludeTax,
+  onChangeLineAmountExcludeTax,
+  onChangeTaxRate,
+  onChangeItemName,
+} from './autoFillFn';
+
+export default (form: WrappedFormUtils) => {
+  const { getFieldDecorator, getFieldValue } = form;
+
+  const controller = Invoice.useInvoiceController();
+
+  /** 是否含税 */
+  const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
+
+  /** 组件模式 */
+  const model = controller.useMemo(e => e.model, []);
+
+  /** 是否显示我方 */
+  const isMyShow = controller.useMemo(e => e.goodsListState.isMyShow, []);
+
+  /** 正在编辑的货物 */
+  const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
+
+  /** 搜索条件 */
+  const searchValue = controller.useMemo((e) => e.goodsListState.searchValue, []);
+
+  /** 税率列表 */
+  const taxRateList = controller.useMemo((e) => e.goodsListState.taxRateList, []);
+
+  /** 单位列表 */
+  const unitList = controller.useMemo((e) => e.goodsListState.unitList, []);
+
+  /** 商品表格补充配置 */
+  const columnsReplenish = controller.useMemo((e) => e.goodsListState.columnsReplenish, []);
+
+  /** 扣除额 */
+  const deduction = controller.useMemo((e) => e.goodsListState.deduction, []);
+
+  /** 计算中启动字段 */
+  const changeField = controller.useMemo((e) => e.calculatingField, []);
+
+  /** 计算中启动字段 */
+  const setChangeField = React.useCallback((value: string) => controller.run(async s => { s.calculatingField = value }), []);
+
+  const onNumberValueChange = React.useCallback((e) => {
+    const value = e?.target?.value;
+    if (value) {
+      return value.replace(/[^0-9-\.]/g, '');
+    }
+  }, [])
+
+  /** 获取补充校验规则 */
+  const getReplenishRules = React.useCallback((id: string) => {
+    return columnsReplenish[id] ? columnsReplenish[id].rules || [] : []
+  }, [columnsReplenish])
+
+  /** 金额整数位限制,不传默认9位 */
+  const priceIntegerDigit = controller.useMemo((e) => e.priceIntegerDigit || 9, []);
+
+  /** 表头 */
+  const columns = React.useMemo(() => {
+    return [
+      {
+        title: '序号',
+        key: 'serialNo',
+        dataIndex: 'serialNo',
+        width: 50,
+        render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
+      },
+      {
+        title: <TitleText required >项目名称</TitleText>,
+        key: 'itemName',
+        render: (_: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                <div style={{ display: 'flex' }} >
+                  {getFieldDecorator('itemName', {
+                    initialValue: isMyShow ? record.itemNameSelf : record.itemName,
+                    rules: [
+                      ...getReplenishRules('itemName'),
+                      {
+                        validator: async (_, __, callback) => {
+                          await controller.wait();
+                          const value = controller.state.goodsListState.editGood;
+                          if (!value?.itemName && !value?.itemNameSelf) {
+                            callback('项目名称不能为空');
+                          } else {
+                            return;
+                          }
+                        }
+                      }
+                    ]
+                  })(
+                    <ItemNameInput
+                      shorthand={editGood.shorthand}
+                      onChange={() => {
+                        onChangeItemName(controller, form, record);
+                      }}
+                    />
+                  )}
+                  <div className="kts-invoice-operate-goods-list-able-list-itemName-import">
+                    {controller.getGoodsList && model !== 'readOnly' && (
+                      <Tooltip title="点击从商品管理中添加商品信息">
+                        <Button
+                          onClick={controller.pipeline(async s => { s.goodsListState.importGoods.isVisibleDrawer = true })}
+                          type="link"
+                          icon="plus-circle"
+                        />
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+              </Form.Item>
+            );
+          } else {
+            return (
+              <span>
+                {record.lineAttribute === LineAttributeType.折扣行 ? <span className='goods-list-digtal-discount-tag'>折扣</span> : <></>}
+                <MyItemNameDiv
+                  valueT={formatSearch(getItemNameWithShorthand({ shorthand: record.shorthand, full: record.itemNameSelf || '' }), searchValue)}
+                  valueF={formatSearch(getItemNameWithShorthand({ shorthand: record.shorthand, full: record.itemName || '' }), searchValue)}
+                  isMyShow={isMyShow}
+                />
+              </span>
+            )
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['itemModelName']?.rules} >规格型号</TitleText>,
+        key: 'itemModelName',
+        width: 119,
+        render: (_: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('itemModelName', {
+                  initialValue: isMyShow ? editGood.itemModelNameSelf : editGood.itemModelName,
+                  rules: getReplenishRules('itemModelName'),
+                })(
+                  <MyInput
+                    onChange={async () => {
+                      await controller.wait()
+                      const key = isMyShow ? 'itemModelNameSelf' : 'itemModelName';
+                      const value = {} as any;
+                      value[key] = form.getFieldsValue().itemModelName;
+                      controller.setEditGood(value);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return (
+              <MyItemNameDiv
+                valueT={formatSearch(record.itemModelNameSelf, searchValue)}
+                valueF={formatSearch(record.itemModelName, searchValue)}
+                isMyShow={isMyShow}
+              />
+            )
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['unit']?.rules} >单位</TitleText>,
+        key: 'unit',
+        width: 70,
+        render: (_: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('unit', {
+                  initialValue: editGood.unit,
+                  rules: getReplenishRules('unit'),
+                })(
+                  <AutoComplete
+                    style={{ width: '100%' }}
+                    dataSource={unitList}
+                    onChange={async () => {
+                      await controller.wait()
+                      // const key = isMyShow ? 'unit' : 'unitOther';
+                      // const value = {} as any;
+                      // value[key] = form.getFieldsValue().unit;
+                      controller.setEditGood({ unit: form.getFieldsValue().unit });
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{record.unit}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['quantity']?.rules} >数量</TitleText>,
+        dataIndex: 'quantity',
+        key: 'quantity',
+        align: 'right',
+        width: 149,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('quantity', {
+                  initialValue: editGood.quantity,
+                  getValueFromEvent: onNumberValueChange,
+                  rules: [
+                    ...getReplenishRules('quantity'),
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '数量必须为数字' },
+                    {
+                      validator: async (_, value, callback) => {
+                        await controller.wait();
+                        const isvalue = !!value || value === 0;
+                        const isPrice = !!getFieldValue(isTaxIncluded ? 'priceIncludeTax' : 'priceExcludeTax') || getFieldValue(isTaxIncluded ? 'priceIncludeTax' : 'priceExcludeTax') === 0;
+                        if (isvalue || isPrice === isvalue) return;
+                        callback('请输入数量');
+                      }
+                    }
+                  ],
+                })(
+                  <MyInput
+                    style={{ textAlign: 'right' }}
+                    maxLength={16}
+                    loading={isCipher(changeField, "quantity")}
+                    onChange={async () => {
+                      setChangeField('quantity');
+                      await onChangeQuantity(controller, form, record);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{value}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['priceIncludeTax']?.rules} >单价(含税)</TitleText>,
+        dataIndex: 'priceIncludeTax',
+        key: 'priceIncludeTax',
+        align: 'right',
+        width: 149,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('priceIncludeTax', {
+                  initialValue: editGood.priceIncludeTax,
+                  getValueFromEvent: onNumberValueChange,
+                  rules: [
+                    ...getReplenishRules('priceIncludeTax'),
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '单价必须为数字' },
+                    {
+                      validator: async (_, value, callback) => {
+                        await controller.wait();
+                        const isQuantity = !!getFieldValue('quantity') || getFieldValue('quantity') === 0;
+                        const isvalue = !!value || value === 0;
+                        if (isvalue || isQuantity === isvalue) return;
+                        callback('请输入单价');
+                      }
+                    }
+                  ],
+                })(
+                  <MyInput
+                    style={{ textAlign: 'right' }}
+                    maxLength={16}
+                    loading={isCipher(changeField, 'priceIncludeTax')}
+                    onChange={() => {
+                      setChangeField('priceIncludeTax');
+                      onChangePriceIncludeTax(controller, form, record);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{value}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['priceExcludeTax']?.rules} >单价(不含税)</TitleText>,
+        dataIndex: 'priceExcludeTax',
+        key: 'priceExcludeTax',
+        align: 'right',
+        width: 149,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('priceExcludeTax', {
+                  initialValue: editGood.priceExcludeTax,
+                  getValueFromEvent: onNumberValueChange,
+                  rules: [
+                    ...getReplenishRules('priceExcludeTax'),
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '单价必须为数字' },
+                    {
+                      validator: async (_, value, callback) => {
+                        await controller.wait();
+                        const isQuantity = !!getFieldValue('quantity') || getFieldValue('quantity') === 0;
+                        const isvalue = !!value || value === 0;
+                        if (isvalue || isQuantity === isvalue) return;
+                        callback('请输入单价');
+                      }
+                    }
+                  ],
+                })(
+                  <MyInput
+                    style={{ textAlign: 'right' }}
+                    maxLength={16}
+                    loading={isCipher(changeField, 'priceExcludeTax')}
+                    onChange={() => {
+                      setChangeField('priceExcludeTax');
+                      onChangePriceExcludeTax(controller, form, record);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{value}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText required >金额(含税)</TitleText>,
+        dataIndex: 'lineAmountIncludeTax',
+        key: 'lineAmountIncludeTax',
+        width: 119,
+        align: 'right',
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('lineAmountIncludeTax', {
+                  initialValue: editGood.lineAmountIncludeTax,
+                  getValueFromEvent: onNumberValueChange,
+                  rules: [
+                    ...getReplenishRules('lineAmountIncludeTax'),
+                    { required: true, message: '金额不能为空' },
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '金额必须为数字' },
+                    {
+                      validator: async (_, value, callback) => {
+                        if (`${value}`.split('.')[0].length > priceIntegerDigit) {
+                          callback(`金额整数部分不能大于${priceIntegerDigit}位，小数点后最多2位`);
+                        }
+                      }
+                    },
+                    {
+                      validator: async (_, value, callback) => {
+                        if (deduction && parseFloat(value) <= deduction) {
+                          callback('扣除额不能大于等于价税合计');
+                        }
+                      }
+                    },
+                  ],
+                })(
+                  <MyInput
+                    style={{ textAlign: 'right' }}
+                    loading={isCipher(changeField, 'lineAmountIncludeTax')}
+                    onChange={() => {
+                      setChangeField('lineAmountIncludeTax');
+                      onChangeLineAmountIncludeTax(controller, form, record);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{formatSearch(parseFloat(value).toFixed(2), searchValue)}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText required >金额(不含税)</TitleText>,
+        dataIndex: 'lineAmountExcludeTax',
+        key: 'lineAmountExcludeTax',
+        align: 'right',
+        width: 119,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('lineAmountExcludeTax', {
+                  initialValue: editGood.lineAmountExcludeTax,
+                  getValueFromEvent: onNumberValueChange,
+                  rules: [
+                    ...getReplenishRules('lineAmountExcludeTax'),
+                    { required: true, message: '金额不能为空' },
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: '金额必须为数字' },
+                    {
+                      validator: async (_, value: string, callback) => {
+                        if (`${value}`.split('.')[0].length > priceIntegerDigit) {
+                          callback(`金额整数部分不能大于${priceIntegerDigit}位，小数点后最多2位`);
+                        }
+                      }
+                    },
+                  ],
+                })(
+                  <MyInput
+                    style={{ textAlign: 'right' }}
+                    loading={isCipher(changeField, 'lineAmountExcludeTax')}
+                    onChange={() => {
+                      setChangeField('lineAmountExcludeTax');
+                      onChangeLineAmountExcludeTax(controller, form, record);
+                    }}
+                  />,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{formatSearch(parseFloat(value).toFixed(2), searchValue)}</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText required >税率%</TitleText>,
+        dataIndex: 'taxRate',
+        key: 'taxRate',
+        align: 'right',
+        width: 70,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('taxRate', {
+                  initialValue: editGood.taxRate,
+                  rules: [
+                    ...getReplenishRules('taxRate'),
+                    { required: true, message: ' ' },
+                    { pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: ' ' },
+                  ],
+                })(
+                  <Select
+                    className="kts-invoice-operate-goods-list-table-tax-rate"
+                    // dropdownMenuStyle={{ textAlign: "right" }}
+                    showArrow={false}
+                    style={{ width: '100%' }}
+                    onChange={() => {
+                      setChangeField('taxRate');
+                      onChangeTaxRate(controller, form, record);
+                    }}
+                  >
+                    {taxRateList.map((e, i) => {
+                      return (
+                        <Select.Option key={i} value={e}>
+                          {e}%
+                        </Select.Option>
+                      );
+                    })}
+                  </Select>,
+                )}
+              </Form.Item>
+            );
+          } else {
+            return <span style={{ padding: '0 10px' }}>{value}%</span>;
+          }
+        },
+      },
+      {
+        title: <TitleText rules={columnsReplenish['taxAmount']?.rules} >税额</TitleText>,
+        dataIndex: 'taxAmount',
+        key: 'taxAmount',
+        align: 'right',
+        width: 119,
+        render: (value: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return getFieldDecorator('taxAmount', {
+              initialValue: editGood.taxAmount,
+              rules: getReplenishRules('taxAmount'),
+            })(<MyDiv loading={isCipher(changeField, 'taxAmount')} />);
+          } else {
+            return <span style={{ padding: '0 10px' }}>{parseFloat(value).toFixed(2)}</span>;
+          }
+        },
+      },
+      // {
+      //   title: '操作',
+      //   key: 'operating',
+      //   align: 'right',
+      //   width: 130,
+      //   fixed: 'right',
+      //   render: (_value: string, record: IGood) => <RowMenu key={record.lineAttribute} goods={record} />,
+      // },
+    ]
+      // 含税不含税
+      .filter((e) => {
+        if (isTaxIncluded) {
+          return !(e.key === 'priceExcludeTax' || e.key === 'lineAmountExcludeTax');
+        } else {
+          return !(e.key === 'priceIncludeTax' || e.key === 'lineAmountIncludeTax');
+        }
+      })
+      // 只读
+      .filter(e => {
+        if (model === 'readOnly') {
+          return e.key !== 'operating';
+        } else {
+          return true;
+        }
+      })
+      .map((e) => {
+        return {
+          ...e,
+          ellipsis: true,
+        };
+      }) as any[];
+  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow, searchValue, model, columnsReplenish]);
+
+  // React.useEffect(() => {
+  //   clearTimeout(t)
+  //   const t = setTimeout(() => { setChangeField('') }, 1000);
+  //   return () => { clearTimeout(t) }
+  // }, [changeField]);
+
+  return columns;
+};
+
+/** 字段 */
+function isCipher(name?: string, field?: string) {
+  if (!name || !field) return false;
+  return name !== field;
+}
+
+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" />
+    }
+  }
+}
+
+class MyDiv extends React.Component<{ value?: any, loading?: boolean }> {
+
+  render() {
+    if (this.props.loading) {
+      return (
+        <Spin size="small">
+          <span style={{ padding: '0 10px' }}>{this.props.value}</span>
+        </Spin>
+      )
+    } else {
+      return <span style={{ padding: '0 10px' }}>{this.props.value}</span>
+    }
+  }
+}
+
+class MyItemNameDiv extends React.Component<{ valueT?: React.ReactNode, valueF?: React.ReactNode, isMyShow: boolean }> {
+  render(): React.ReactNode {
+
+    const { isMyShow, valueT, valueF } = this.props;
+
+    if (isMyShow) {
+      if (valueT) {
+        return (
+          <Tooltip title={valueT}>
+            <span style={{ padding: '0 10px', color: '#0074ff' }}>{valueT}</span>
+          </Tooltip>
+        )
+      } else {
+        return (
+          <Tooltip title={valueF}>
+            <span style={{ padding: '0 10px' }}>{valueF}</span>
+          </Tooltip>
+        )
+      }
+    } else {
+      if (valueF) {
+        return (
+          <Tooltip title={valueF}>
+            <span style={{ padding: '0 10px' }}>{valueF}</span>
+          </Tooltip>
+        )
+      } else {
+        return (
+          <Tooltip title={valueT}>
+            <span style={{ padding: '0 10px', color: '#0074ff' }}>{valueT}</span>
+          </Tooltip>
+        )
+      }
+    }
+  }
+}
+
+/** 格式搜索结果 */
+function formatSearch(value?: string, search?: string) {
+  if (!value || !search) return value;
+
+  const __html = ucoding(value).split(new RegExp(ucoding(search), 'g')).map(e => dcoding(e)).join(`<span class="kts-invoice-operate-goods-list-table-search-protrude" >${search}</span>`);
+  return <span dangerouslySetInnerHTML={{ __html }} />
+}
+
+/** 编码 */
+function ucoding(v: string): string {
+  return v.split('').map(e => `U${e.charCodeAt(0)}E`).join('');
+}
+
+/** 解码 */
+function dcoding(v: string): string {
+  return v.split('U').map(e => e ? String.fromCharCode(parseInt(e.replace('E', ''))) : '').join('');
+}

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/ItemNameInput/index.less

@@ -0,0 +1,10 @@
+.kts-invoice-operate-goods-list-itemName-input {
+  display     : flex;
+  flex        : 1;
+  padding-left: 0;
+  height      : 31px;
+}
+
+.has-error .kts-invoice-operate-goods-list-itemName-input{
+  border: 1px solid #f5222d;
+}

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/ItemNameInput/index.tsx

@@ -0,0 +1,19 @@
+
+import { Input } from 'kts-xui';
+import React, { ChangeEvent } from 'react';
+import './index.less';
+
+export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLInputElement>) => void, value?: string, shorthand?: string }) {
+
+    const onChange = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        const event = { ...e };
+        props.onChange && props.onChange(event);
+    }, [])
+
+    return (
+        <div className='kts-invoice-operate-goods-list-itemName-input'>
+            {props.shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{props.shorthand}*</span>}
+            <Input style={{ height: '100%' }} value={props.value} onChange={onChange} />
+        </div>
+    )
+}

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowEditButton/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, message } from 'kts-components-antd-x3';
+import Invoice from '../../../../../../';
+import { IGood } from '../../../../../../InvoiceController';
+import LineAttributeType from '../../../../../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
+
+export default (props: { goods: IGood }) => {
+  const { goods } = props;
+
+  const controller = Invoice.useInvoiceController();
+
+  const editGood = controller.useMemo((s) => s.goodsListState.editGood, []);
+
+  const onClick = React.useCallback(() => {
+    if (editGood) {
+      message.error({
+        content: '你正在编辑一个货物',
+        key: '你正在编辑一个货物',
+      });
+      return;
+    }
+    controller.setEditGood(goods);
+  }, [controller, goods, editGood]);
+
+  if (goods.lineAttribute !== LineAttributeType.正常) {
+    return <></>;
+  } else {
+    return <Button type="link" icon="edit" onClick={onClick} />;
+  }
+};