kts-components-document-access-point 1.4.12 → 2.0.0

package/src/DocumentsList/ui/PageHeader/SendHeader.tsx

@@ -1,14 +1,20 @@
 import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { Radio, Button, Dropdown, PageHeaderFoot } from 'kts-xui';
 import { Menu } from 'kts-components-antd-x4';
-import { AdvancedSearch, KtsForm } from 'kts-components';
+import { KtsForm } from 'kts-components';
 import { LifeCycleTypes } from '@formily/antd';
 import Main from '../..';
 import ModalComfirm from '../ModalComfirm'
 import { DocumentsService } from "../../..";
 import _ from 'lodash';
 import { useHistory } from 'react-router-dom';
+import { Search as SearchXui, searchFormat, searchUnFormat, ISearchItemProps } from 'kts-xui';
+import { Select as SearchSelect, DatePicker } from 'kts-xui';
+import { Select } from 'antd';
 const { SubMenu } = Menu;
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
 export default () => {
     const history = useHistory();
     const controller = Main.useController();
@@ -18,8 +24,99 @@ export default () => {
     const params = controller.useMemo(s => s.params, [])
     const visible = controller.useMemo(s => s.visible, []);
     const [profileEnum, setProfile] = useState([]);
-    const [schema, setSchema] = useState({});
-    const ktsRef = useRef(null);
+
+    // 动态生成 formItems
+    const formItems: ISearchItemProps[] = useMemo(() => {
+        const items: ISearchItemProps[] = [];
+
+        // 配置名称
+        items.push({
+            name: "configName",
+            label: "配置名称",
+            children: <SearchXui.Input />,
+        });
+
+        // 发送对象 (仅在 type === 2 时显示)
+        if (type === 2) {
+            items.push({
+                name: "attributionList",
+                label: "发送对象",
+                children: <SearchXui.Input />,
+            });
+        }
+
+        // 单据大类
+        items.push({
+            name: "type",
+            label: "单据大类",
+            children: (
+                <SearchSelect className="underline" allowClear={true}>
+                    {billEnum.map((item: any) => (
+                        <Option key={item.value} value={item.value}>
+                            {item.label}
+                        </Option>
+                    ))}
+                </SearchSelect>
+            ),
+        });
+
+        // 单据子类
+        items.push({
+            name: "profile",
+            label: "单据子类",
+            children: (
+                <SearchSelect className="underline" allowClear={true}>
+                    {profileEnum.map((item: any) => (
+                        <Option key={item.value} value={item.value}>
+                            {item.name}
+                        </Option>
+                    ))}
+                </SearchSelect>
+            ),
+        });
+
+        // 收发角色
+        items.push({
+            name: "attribution",
+            label: "收发角色",
+            children: (
+                <SearchSelect className="underline" allowClear={true} mode="multiple">
+                    <Option value="1">发送方</Option>
+                    <Option value="0">接收方</Option>
+                </SearchSelect>
+            ),
+        });
+
+        // 创建时间
+        items.push({
+            name: "createTime",
+            label: "创建时间",
+            children: (
+                <RangePicker
+                    style={{ width: "100%" }}
+                    format="YYYY-MM-DD"
+                    placeholder={["开始时间", "结束时间"]}
+                    className="underline-datepicker"
+                />
+            ),
+        });
+
+        // 更新时间
+        items.push({
+            name: "sendTime",
+            label: "更新时间",
+            children: (
+                <RangePicker
+                    style={{ width: "100%" }}
+                    format="YYYY-MM-DD"
+                    placeholder={["开始时间", "结束时间"]}
+                    className="underline-datepicker"
+                />
+            ),
+        });
+
+        return items;
+    }, [billEnum, type, profileEnum]);
     useEffect(() => {
         (async () => {
             const res = await DocumentsService.instance.service?.call({ url: '/schema/config/getDefaultTypeList', data: {}, type: 'get' }) as any;
@@ -33,6 +130,27 @@ export default () => {
             }
         })()
     }, []);
+
+    // 处理单据子类的动态更新
+    useEffect(() => {
+        const selectedType = params.type;
+        if (selectedType) {
+            const target: any = billEnum.find((item: any) => item.value === selectedType);
+            if (target && target.profileList) {
+                const list = target.profileList.map((item: any) => {
+                    return {
+                        label: item.name,
+                        value: item.value
+                    }
+                })
+                setProfile(list);
+            } else {
+                setProfile([])
+            }
+        } else {
+            setProfile([])
+        }
+    }, [billEnum, params.type]);
     const onSearchFormSubmit = React.useCallback((value) => {
         value = {
             ...value,
@@ -43,6 +161,49 @@ export default () => {
         })()
     }, [controller])
 
+    // 创建搜索组件
+    const { search, setSearchValues } = SearchXui.useCreate({
+        labelCol: 9,
+        onSubmit: (e) => {
+            const processedValues = {
+                ...e,
+                beginCreateTime: e.createTime && e.createTime[0] ? e.createTime[0].format('YYYY-MM-DD 00:00:00') : undefined,
+                endCreateTime: e.createTime && e.createTime[1] ? e.createTime[1].format('YYYY-MM-DD 23:59:59') : undefined,
+                beginSendTime: e.sendTime && e.sendTime[0] ? e.sendTime[0].format('YYYY-MM-DD 00:00:00') : undefined,
+                endSendTime: e.sendTime && e.sendTime[1] ? e.sendTime[1].format('YYYY-MM-DD 23:59:59') : undefined,
+            };
+            // 移除原始的日期字段
+            delete processedValues.createTime;
+            delete processedValues.sendTime;
+            onSearchFormSubmit(processedValues);
+        },
+        values: React.useMemo(() => {
+            // 转换搜索值格式
+            const convertedValues = { ...params } as any;
+            const paramsAny = params as any;
+            if (paramsAny.beginCreateTime && paramsAny.endCreateTime) {
+                convertedValues.createTime = [paramsAny.beginCreateTime, paramsAny.endCreateTime];
+            }
+            if (paramsAny.beginSendTime && paramsAny.endSendTime) {
+                convertedValues.sendTime = [paramsAny.beginSendTime, paramsAny.endSendTime];
+            }
+            return searchUnFormat(convertedValues, formItems);
+        }, [params, formItems]),
+        formItems,
+    });
+
+    useEffect(() => {
+        const convertedValues = { ...params } as any;
+        const paramsAny = params as any;
+        if (paramsAny.beginCreateTime && paramsAny.endCreateTime) {
+            convertedValues.createTime = [paramsAny.beginCreateTime, paramsAny.endCreateTime];
+        }
+        if (paramsAny.beginSendTime && paramsAny.endSendTime) {
+            convertedValues.sendTime = [paramsAny.beginSendTime, paramsAny.endSendTime];
+        }
+        setSearchValues(searchUnFormat(convertedValues, formItems));
+    }, [formItems, params, setSearchValues]);
+
     const switchType = React.useCallback((e) => {
         controller.pipeline(async s => {
             s.type = e.target.value;
@@ -59,60 +220,6 @@ export default () => {
             s.visible = true;
         })()
     }, [controller]);
-    useEffect(() => {
-        let obj: any = {
-            type: "object",
-            properties: {
-                configName: {
-                    type: "string",
-                    title: "配置名称",
-                },
-                attributionList: {
-                    type: "string",
-                    title: "发送对象",
-                    visible: type === 2 ? true : false
-                },
-                type: {
-                    type: "string",
-                    title: "单据大类",
-                    enum: billEnum,
-                },
-                profile: {
-                    type: "string",
-                    title: "单据子类",
-                    enum: profileEnum,
-                    visible: false
-                },
-                attribution: {
-                    type: "radio",
-                    title: "收发角色",
-                    enum: [{
-                        "label": "发送方",
-                        "value": '1'
-                    }, {
-                        "label": "接收方",
-                        "value": '0'
-                    }],
-                    'x-props': {
-                        mode: "multiple"
-                    }
-                },
-                '[beginCreateTime,endCreateTime]': {
-                    key: "[beginCreateTime,endCreateTime",
-                    name: "[beginCreateTime,endCreateTime",
-                    type: "daterange",
-                    title: "创建时间",
-                },
-                '[beginSendTime,endSendTime]': {
-                    key: "[beginSendTime,endSendTime",
-                    name: "[beginSendTime,endSendTime",
-                    type: "daterange",
-                    title: "更新时间",
-                },
-            }
-        }
-        setSchema(obj);
-    }, [billEnum, type, profileEnum])
     const onCreateType = useCallback((category, record?) => {
         history.push({ pathname: `/rule`, search: `?type=config&profile=${record && record.value || ''}&billtype=${category}` })
     }, [])
@@ -125,58 +232,12 @@ export default () => {
                         <Radio.Button value={2}>发布记录</Radio.Button>
                     </Radio.Group>
                 </div>
-                <AdvancedSearch
-                    width={480}
-                    height={44}
-                    compact={true}
-                    defaultKey="configName"
-                    placeholder="输入配置名称"
-                    searchFormSubmit={onSearchFormSubmit}
-                >
-                    <KtsForm
-                        ref={ktsRef}
-                        labelCol={9}
-                        wrapperCol={15}
-                        labelAlign='left'
-                        compact={true}
-                        schema={schema}
-                        defaultValue={_.pick(params, ['configName', 'type', 'profile', 'attributionList', 'attribution', '[beginCreateTime,endCreateTime]', '[beginSendTime,endSendTime]'])}
-                        effects={($: any, actions: any) => {
-                            $(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'type',).subscribe((fieldState: any) => {
-                                if (fieldState.value) {
-                                    const target: any = billEnum.find((item: any) => item.value === fieldState.value);
-                                    if (target && target.profileList) {
-                                        actions.setFieldState('profile', (state: any) => {
-                                            state.visible = true;
-                                        });
-                                        const list = target.profileList.map((item: any) => {
-                                            return {
-                                                label: item.name,
-                                                value: item.value
-                                            }
-                                        })
-                                        setProfile(list);
-                                    } else {
-                                        actions.setFieldState('profile', (state: any) => {
-                                            state.visible = false;
-                                        });
-                                        setProfile([])
-                                    }
-                                } else {
-                                    actions.setFieldState('profile', (state: any) => {
-                                        state.visible = false;
-                                    });
-                                    setProfile([])
-                                }
-                            });
-                        }}
-                    >
-                    </KtsForm>
-                </AdvancedSearch>
-                
+                <div style={{ flex: 1 }}>
+                    {search}
+                </div>
             </div>
         );
-    }, [type,schema]);
+    }, [type, search]);
     const menu = useMemo(() => {
         return (
             <Menu>