kts-component-invoice-operate 3.2.243 → 3.2.244

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

@@ -0,0 +1,37 @@
+
+import Invoice from '../../../../../../..';
+import { Button, Popconfirm } from "kts-xui"
+import React from "react"
+
+/** 清空重填 */
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, []);
+
+    const confirm = React.useCallback(() => {
+        controller.run(async s => {
+            s.payListState.goodsList = [];
+            s.payListState.goodsMap = new Map();
+            s.payListState.selectedGoodIndex = [];
+        })
+    }, [controller])
+
+    const button = React.useMemo(() => {
+        if (model === 'readOnly') return <></>;
+        if (model === 'prefab') return <></>;
+        return (
+            <Popconfirm
+                title="将要清空所有项目信息，是否继续"
+                onConfirm={confirm}
+                okText="确定"
+                cancelText="取消"
+            >
+                <Button size='small' >清空重填</Button>
+            </Popconfirm>
+        )
+    }, [model, confirm])
+
+    return { button }
+}

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

@@ -0,0 +1,29 @@
+.kts-invoice-operate-goods-list-itemName-drag-container-u {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    top       : 0;
+    z-index   : 9999;
+  }
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-container-d {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    bottom    : 0;
+    z-index   : 9999;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import Invoice from '../../../../..';
+import { LineAttributeType } from '../../../../../InvoiceController'
+import classnames from 'classnames'
+import './index.less'
+
+export default function TableRow(props: any) {
+
+    const rowKey = props['data-row-key']
+
+
+
+
+    return <tr
+        {...props}
+        className={classnames(
+            props.className,
+        )}
+    />
+
+}

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

@@ -0,0 +1,39 @@
+.kts-invoice-operate-goods-table-virtual {
+
+  .ktsAntX-table-body {
+    height: 280px;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-header>table>thead>tr>th {
+    padding   : 0 10px;
+    height    : 32px;
+    background: #f4f4f4;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-body>table>tbody>tr>td {
+    padding: 0;
+    height : 32px;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body {
+    position: relative;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body>table {
+    position: absolute;
+    left    : 0;
+    top     : 0;
+  }
+
+  .ktsAntX-table .ktsAntX-table-tbody {
+    position: relative;
+  }
+
+  .ktsAntX-checkbox-wrapper .ktsAntX-checkbox-inner {
+    width        : 16px;
+    height       : 16px;
+    border       : 1px solid #d9d9d9;
+    border-radius: 2px;
+    top          : 1px;
+  }
+}

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

@@ -0,0 +1,109 @@
+
+import React from "react";
+import { TableManual, TableProps } from "kts-xui";
+import { Table } from 'kts-components-antd-x4-v4';
+import './index.less';
+
+export default function <T extends object = any>(props: TableProps<T>) {
+
+    const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
+
+    const tableBody = React.useMemo(() => {
+        if (!self) return;
+        return self.querySelector('.ktsAntX-table-body') as HTMLDivElement;
+    }, [self]);
+
+    /** 显示指针 */
+    const [pointer, setPointer] = React.useState(0);
+
+    /** 行高 */
+    const rowHeight = React.useMemo(() => {
+        if (!self) return 50;
+
+        const td = self.querySelector('.ktsAntX-table-tbody .ktsAntX-table-row');
+        if (!td) return 50;
+
+        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 || props.dataSource.length < 10)
+            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('.ktsAntX-table .ktsAntX-table-body>table') as HTMLDivElement;
+        if (!table) return;
+
+        table.style.top = `${pointer * rowHeight}px`;
+    }, [pointer, self, rowHeight]);
+
+    React.useEffect(() => {
+        if (!self) return;
+        const cont = self.querySelector('.kts-invoice-operate-goods-table-virtual .ktsAntX-table-body');
+        if (!cont) return;
+
+        cont.scrollTop = 0;
+    }, [props.dataSource?.length])
+
+    return (
+        <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
+            <TableManual
+                {...props}
+                dataSource={dataSource}
+                // 新版本Table会有输入框无法连续输入的问题，先兼容老版本
+                tableComponent={Table as any}
+            />
+        </span>
+    )
+}

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

@@ -1,11 +1,11 @@
 
 import React, { useEffect } from "react";
 import { decorator } from 'grey-react-box';
-import { Form } from 'kts-components-antd-x3';
+import { Form, message } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import Invoice from '../../..';
 import './index.less';
-import { Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
+import { Button, Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
 import moment from "moment";
 
 const { RangePicker } = DatePicker;
@@ -37,10 +37,24 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
     const readOnly = React.useMemo(() => model === 'readOnly', [model]);
 
     const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
+    //outcome-104 任务 https://wiki.dev.kingxunlian.com/pages/viewpage.action?pageId=180355189
+    //商品和服务税收分类合并编码为“3040502020200000000”时，视为停车费业务，针对停车费业务，蓝字发票增加以下判断：
+    // 单位必须为“平方米”；
+    // 项目名称必须为“车辆停放服务”；
+    // 车牌号必填，最多支持填写3个车牌号；除该场景车牌号必须为空；
+    // 租赁期起止格式必须为“yyyy-MM-dd HH:mm（租赁期起）”+“空格”+“yyyy-MM-dd HH:mm（租赁期止）。
+    const isParkFee = React.useCallback((taxClassificationCode?: string) => {
+        if (taxClassificationCode === '3040502020200000000') {
+            return true
+        } else {
+            return false;
+        }
+    }, [])
+
     const indexRef = React.useRef<any>([]);
     useEffect(() => {
         const dd = goodsList?.reduce((acc: any, cur: any) => {
-            if (cur.lineAttribute !==1) {
+            if (cur.lineAttribute !== 1) {
                 acc.push(cur.$index)
             }
             return acc
@@ -48,7 +62,7 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
         indexRef.current = dd;
     }, [goodsList, indexRef])
     // 注册 form
-   
+
     controller.useForm('realEstateInfo', form);
     const getList = () => {
         const decrease = indexRef.current.length > goodsList.length
@@ -70,9 +84,9 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
                 });
             }
         }
-        console.log('goodsList',goodsList)
-        return goodsList.filter(item=>item.lineAttribute !== 1).map((item, index) => {
+        return goodsList.filter(item => item.lineAttribute !== 1).map((item, index) => {
             if (item.lineAttribute !== 1) {
+                const isParkFeeItem = isParkFee(item.taxClassificationCode)
                 return <Row gutter={[17, 0]} >
                     <Col span={6} >
                         <Form.Item style={{ display: 'none' }}>
@@ -121,17 +135,31 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
                             )}
                         </Form.Item>
                     </Col>
-                    <Col span={6} >
-                        <Form.Item label='租赁期起止' >
-                            {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
-                                rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
-                            })(
-                                readOnly
-                                    ? <MyArrMoment />
-                                    : <RangePicker style={{ width: '100%' }} />
-                            )}
-                        </Form.Item>
-                    </Col>
+                    {!isParkFeeItem &&
+                        <Col span={6} >
+                            <Form.Item label='租赁期起止' >
+                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
+                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
+                                })(
+                                    readOnly
+                                        ? <MyArrMoment />
+                                        : <RangePicker style={{ width: '100%' }} />
+                                )}
+                            </Form.Item>
+                        </Col>}
+                    {isParkFeeItem &&
+                        <Col span={6} >
+                            <Form.Item label='租赁期起止' >
+                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
+                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
+                                })(
+                                    readOnly
+                                        ? <MyArrMomentTime />
+                                        : <RangePicker style={{ width: '100%' }} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
+                                )}
+                            </Form.Item>
+                        </Col>
+                    }
                     <Col span={6} >
                         <Form.Item label='跨地（市）标志' >
                             {getFieldDecorator(`realEstateDataDto[${index}].crossCitiesSign`, {
@@ -162,25 +190,56 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
                             )}
                         </Form.Item>
                     </Col>
-                    <Col span={6} >
-                        <Form.Item label='面积单位' >
-                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
-                                rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
-                            })(
-                                readOnly
-                                    ? <MyDiv />
-                                    : <Select placeholder='请选择' style={{ width: '100%' }} >
-                                        <Select.Option value="平方千米">平方千米</Select.Option>
-                                        <Select.Option value="平方米">平方米</Select.Option>
-                                        <Select.Option value="公顷">公顷</Select.Option>
-                                        <Select.Option value="亩">亩</Select.Option>
-                                        <Select.Option value="h㎡">h㎡</Select.Option>
-                                        <Select.Option value="k㎡">k㎡</Select.Option>
-                                        <Select.Option value="㎡">㎡</Select.Option>
-                                    </Select>
-                            )}
-                        </Form.Item>
-                    </Col>
+                    {!isParkFeeItem &&
+                        <Col span={6} >
+                            <Form.Item label='面积单位' >
+                                {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
+                                    rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
+                                })(
+                                    readOnly
+                                        ? <MyDiv />
+                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                            <Select.Option value="平方千米">平方千米</Select.Option>
+                                            <Select.Option value="平方米">平方米</Select.Option>
+                                            <Select.Option value="公顷">公顷</Select.Option>
+                                            <Select.Option value="亩">亩</Select.Option>
+                                            <Select.Option value="h㎡">h㎡</Select.Option>
+                                            <Select.Option value="k㎡">k㎡</Select.Option>
+                                            <Select.Option value="㎡">㎡</Select.Option>
+                                        </Select>
+                                )}
+                            </Form.Item>
+                        </Col>
+                    }
+                    {isParkFeeItem &&
+                        <Col span={6} >
+                            <Form.Item label='面积单位' >
+                                {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
+                                    rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
+                                })(
+                                    readOnly
+                                        ? <MyDiv />
+                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                            <Select.Option value="平方米">平方米</Select.Option>
+                                        </Select>
+                                )}
+                            </Form.Item>
+                        </Col>
+                    }
+                    {isParkFeeItem &&
+                        <LicensePlateNumber form={form} index={index} cd={item.cd} readOnly={readOnly} />
+                        // <Col span={6} >
+                        //     <Form.Item label='车牌号' >
+                        //         {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
+                        //             rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
+                        //         })(
+                        //             readOnly
+                        //                 ? <MyDiv />
+                        //                 : <LicensePlateNumber form={form}/>
+                        //         )}
+                        //     </Form.Item>
+                        // </Col>
+                    }
                 </Row>
             }
         })
@@ -227,7 +286,18 @@ class MyArrMoment extends React.Component<{ value?: moment.Moment[], style?: Rea
         )
     }
 }
-
+class MyArrMomentTime extends React.Component<{ value?: moment.Moment[], style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        const { value = [] } = this.props
+        return (
+            <div style={this.props.style}>
+                <span>{moment.isMoment(value[0]) && value[0].format('YYYY-MM-DD HH:mm')}</span>
+                <span style={{ color: '#9F603D', fontWeight: 600 }} > - </span>
+                <span>{moment.isMoment(value[1]) && value[1].format('YYYY-MM-DD HH:mm')}</span>
+            </div>
+        )
+    }
+}
 class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
     render(): React.ReactNode {
         return (
@@ -239,4 +309,143 @@ class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSPropert
         )
     }
 }
+interface PriceInputProps {
+    // value?: string[];
+    // style?: React.CSSProperties
+    // onChange?: (value: string[]) => void;
+    form: any,
+    index: number
+    cd?: number
+    readOnly: boolean
+}
+const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {
+
+    const { form, readOnly } = props;
+
+    const { getFieldDecorator } = form;
+    const licenceLimit = 3; // 最多支持填写3个车牌号
+    const formData: any[] = form.getFieldValue('realEstateDataDto');
+    const [value, setVal] = React.useState(new Array(props.cd || 1).fill(''));
+    const cd = React.useMemo(() => formData[props.index]?.cd, [formData[props.index]?.cd])
+    // useEffect(() => {
+    //     if (cd) {
+    //         const dd = value.concat(new Array(cd.length-1).fill(''))
+    //         setVal(dd);
+    //     }
+    // }, [cd])
+    const onAdd = () => {
+        if (value.length < licenceLimit) {
+            setVal([...value, '']);
+        }else{
+            message.warn('最多支持填写3个车牌号')
+        }
+    }
+    // 删除车牌号
+    const onDelete = () => {
+        if (value.length > 0) {
+            const dd = value.slice(0, -1)
+            setVal(dd);
+        }
+    }
+
+    return <>
+        {
+            value.length > 0 && value.map((item: string[], key: number) => {
+
+                return <Col span={6} ><Form.Item label='车牌号' key={key}>
+                    {getFieldDecorator(`realEstateDataDto[${props.index}].cphList[${key}]`, {
+                        rules: readOnly ? [] : [{ required: true, message: '请输入车牌号,最多20位' }]
+                    })(
+                        readOnly
+                            ? <MyDiv /> :
+                            <Input style={{ width: '100%' }} maxLength={20} autoComplete='off' placeholder="请输入车牌号" />
+                    )}
+                </Form.Item>
+                </Col>
+            })
+
+
+        }
+        {/* <Col span={6} style={{ display: 'none' }}><Form.Item label='长度' >
+            {getFieldDecorator(`realEstateDataDto[${props.index}].cd`, {
+
+            })(
+                <Select />
+            )}
+        </Form.Item>
+        </Col> */}
+        {!readOnly &&
+            <Col span={6} >
+                <Form.Item >
+                    <div style={{ color: 'white' }}>1</div>
+                    <a style={{ marginRight: 10 }} onClick={onAdd}>添加车牌号</a>
+                    {value.length > 1 && <a onClick={onDelete}>删除</a>}
+                </Form.Item>
+            </Col>
+        }
+    </>
+}
+
+
+// const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {
+
+//     const { form } = props;
+
+//     const { getFieldDecorator } = form;
+//     const licenceLimit = 3; // 最多支持填写3个车牌号
+//     // const { value = [] } = this.props;
+//     const [value, setVal] = React.useState(props.value || ['']);
+//     // const newArr = value.filter(e => !!e);
+//     const newArrLength = value.length;
+//     console.log(value, newArrLength)
+//     // 新增车牌号
+//     const onAdd = () => {
+//         if (newArrLength < licenceLimit) {
+//             setVal([...value, '']);
+//             props.onChange?.([...value, ''])
+//         }
+//     }
+//     // 删除车牌号
+//     const onDelete = () => {
+//         if (newArrLength > 0) {
+//             const dd = value.slice(0, -1)
+//             setVal(dd);
+//             props.onChange?.(dd)
+//         }
+//     }
+//     const onInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+//         console.log(e.target.value);
+//         const dd = value.map((item, i) => {
+//             if (i === index) {
+//                 return e.target.value
+//             }
+//             return item
+//         })
+//         setVal(dd);
+//         props.onChange?.(dd)
+
+
+//     }
+//     return (
+
+//         <>
+//             {newArrLength > 0 && value.map((item, index) => {
+//                 return
+//                 <Form.Item label='车牌号' >
+//                     {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
+//                         rules: [{ required: true, }]
+//                     })(
+//                         <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
+//                     )}
+//                 </Form.Item>
+//                 // <Col span={6} >
+//                 //     <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
+//                 // </Col>
+//             })}
+
+//             <Button type="link" onClick={onAdd}>添加车牌号</Button>
+//             {newArrLength > 1 && <Button type="link" onClick={onDelete}>删除</Button>}
+//         </>
 
+//     )
+// }

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

@@ -1,4 +1,4 @@
-.kts-invoice-operate-invoice-digtal-stakeholder {
+.kts-invoice-operate-invoice-digtal-stakeholder,.kts-invoice-operate-invoice-digtal-payinfo {
 
     display: flex;