kts-components-document-access-point 1.4.3 → 1.4.6

package/src/DocumentsEdit/ui/EditRule/ui/RuleForm/fn/algorithmFormComponent/index.tsx

@@ -1,142 +1,142 @@
-
-import { IOperator } from "../../../../../../DocumentsEditController/DocumentsEditControllerState/RuleState";
-import IProperties from "../../../../../../DocumentsEditController/DocumentsEditControllerState/IProperties";
-import { DatePicker, Form, Input, Select, Switch, Tooltip } from "kts-components-antd-x4";
-import React from "react";
-import Icon from "@ant-design/icons";
-import { ReactComponent as IconSvg } from './icon.svg';
-import moment from "moment";
-
-/** 生成规则表单 */
-export default function algorithmFormComponent(operator: IOperator, ruleProperties?: IProperties, readOnly?: boolean) {
-    if (!ruleProperties) return <></>;
-
-    const info = ruleProperties.items ? ruleProperties.items : ruleProperties;
-
-    function renderFormItem(child: React.ReactChild) {
-        return (
-            <Form.Item key={`algorithmForm_${operator.name}`} {...operator}>
-                {child}
-            </Form.Item>
-        )
-    }
-
-    if (operator.enum) {
-        return renderFormItem(
-            <Select disabled={readOnly} >
-                {operator.enum.map((e, i) => {
-                    return (
-                        <Select.Option key={i} value={e.value}>{e.label}</Select.Option>
-                    )
-                })}
-            </Select>
-        )
-    }
-
-    switch (operator.type) {
-        case 'integer':
-            return renderFormItem(
-                <Input readOnly={readOnly} />
-            )
-
-        case 'number':
-            return renderFormItem(
-                <Input readOnly={readOnly} />
-            )
-
-        case 'string':
-            return renderFormItem(
-                <Input readOnly={readOnly} />
-            )
-
-        case 'string|date':
-            if (info.format === 'date-time') {
-                return renderFormItem(
-                    <MyDatePickerTime disabled={readOnly} />
-                )
-            } else {
-                return renderFormItem(
-                    <MyDatePicker disabled={readOnly} />
-                )
-            }
-
-        case 'array':
-            return (
-                <Form.Item
-                    key={`algorithmForm_${operator.name}`}
-                    {...operator}
-                    rules={[
-                        ...(operator.rules || []),
-                        {
-                            validator: async (rule, value: string) => {
-                                if (!value) return;
-                                if (value.indexOf('，') >= 0) throw new Error('请使用英文","');
-
-                                switch (info.type) {
-                                    case 'number':
-                                        if (value.split(',').some(e => !/((^[1-9]\d*$)|^[0]$)|(^[0-9]*\.[0-9]+$)/.test(`${e}`)))
-                                            throw new Error('只能输入数字');
-                                        break;
-                                    case 'integer':
-                                        if (value.split(',').some(e => !/(^[1-9]\d*$)|^[0]$/.test(`${e}`)))
-                                            throw new Error('只能输入整数');
-                                        break;
-                                    case 'string':
-                                        if (value.split(',').some(e => !e))
-                                            throw new Error('不能有空的项');
-                                        break;
-                                }
-                            }
-                        }
-                    ]}
-                >
-                    <MyArray readOnly={readOnly} />
-                </Form.Item>
-            )
-
-        case 'boolean':
-            return (
-                <Form.Item valuePropName="checked" key={`algorithmForm_${operator.name}`} {...operator}>
-                    <Switch disabled={readOnly} />
-                </Form.Item>
-            )
-    }
-    return <></>
-}
-
-const MyDatePickerTime = (props: { value?: any, disabled?: boolean, onChange?: (e: any) => void }) => {
-    const onChange = React.useCallback((e: moment.Moment | null) => {
-        props.onChange && props.onChange(e ? e.format('YYYY-MM-DDTHH:mm:ss') : undefined)
-    }, [props.onChange])
-    const value = React.useMemo(() => props.value ? moment(props.value) : undefined, [props.value])
-    return <DatePicker disabled={props.disabled} value={value} onChange={onChange} showTime />
-}
-
-const MyDatePicker = (props: { value?: any, disabled?: boolean, onChange?: (e: any) => void }) => {
-    const onChange = React.useCallback((e: moment.Moment | null) => {
-        props.onChange && props.onChange(e ? e.format('YYYY-MM-DD') : undefined)
-    }, [props.onChange])
-    const value = React.useMemo(() => props.value ? moment(props.value) : undefined, [props.value])
-    return <DatePicker disabled={props.disabled} value={value} onChange={onChange} />
-}
-
-const MyArray = (props: { readOnly?: boolean, value?: string[] | string, onChange?: (e: string) => void }) => {
-    const readOnly = !!props.readOnly;
-
-    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange && props.onChange(e.target.value);
-    }, [])
-
-    return (
-        <Input
-            value={props.value instanceof Array ? props.value.join(',') : props.value}
-            onChange={onChange}
-            readOnly={readOnly}
-            suffix={
-                <Tooltip title="若有多个值，请使用英文逗号“,”隔开。">
-                    <Icon component={IconSvg} style={{ color: 'rgba(0,0,0,.45)' }} />
-                </Tooltip>
-            }
-        />
-    )
-}
+
+import { IOperator } from "../../../../../../DocumentsEditController/DocumentsEditControllerState/RuleState";
+import IProperties from "../../../../../../DocumentsEditController/DocumentsEditControllerState/IProperties";
+import { DatePicker, Form, Input, Select, Switch, Tooltip } from "kts-components-antd-x4";
+import React from "react";
+import Icon from "@ant-design/icons";
+import { ReactComponent as IconSvg } from './icon.svg';
+import moment from "moment";
+
+/** 生成规则表单 */
+export default function algorithmFormComponent(operator: IOperator, ruleProperties?: IProperties, readOnly?: boolean) {
+    if (!ruleProperties) return <></>;
+
+    const info = ruleProperties.items ? ruleProperties.items : ruleProperties;
+
+    function renderFormItem(child: React.ReactChild) {
+        return (
+            <Form.Item key={`algorithmForm_${operator.name}`} {...operator}>
+                {child}
+            </Form.Item>
+        )
+    }
+
+    if (operator.enum) {
+        return renderFormItem(
+            <Select disabled={readOnly} >
+                {operator.enum.map((e, i) => {
+                    return (
+                        <Select.Option key={i} value={e.value}>{e.label}</Select.Option>
+                    )
+                })}
+            </Select>
+        )
+    }
+
+    switch (operator.type) {
+        case 'integer':
+            return renderFormItem(
+                <Input readOnly={readOnly} />
+            )
+
+        case 'number':
+            return renderFormItem(
+                <Input readOnly={readOnly} />
+            )
+
+        case 'string':
+            return renderFormItem(
+                <Input readOnly={readOnly} />
+            )
+
+        case 'string|date':
+            if (info.format === 'date-time') {
+                return renderFormItem(
+                    <MyDatePickerTime disabled={readOnly} />
+                )
+            } else {
+                return renderFormItem(
+                    <MyDatePicker disabled={readOnly} />
+                )
+            }
+
+        case 'array':
+            return (
+                <Form.Item
+                    key={`algorithmForm_${operator.name}`}
+                    {...operator}
+                    rules={[
+                        ...(operator.rules || []),
+                        {
+                            validator: async (rule, value: string) => {
+                                if (!value) return;
+                                if (value.indexOf('，') >= 0) throw new Error('请使用英文","');
+
+                                switch (info.type) {
+                                    case 'number':
+                                        if (value.split(',').some(e => !/((^[1-9]\d*$)|^[0]$)|(^[0-9]*\.[0-9]+$)/.test(`${e}`)))
+                                            throw new Error('只能输入数字');
+                                        break;
+                                    case 'integer':
+                                        if (value.split(',').some(e => !/(^[1-9]\d*$)|^[0]$/.test(`${e}`)))
+                                            throw new Error('只能输入整数');
+                                        break;
+                                    case 'string':
+                                        if (value.split(',').some(e => !e))
+                                            throw new Error('不能有空的项');
+                                        break;
+                                }
+                            }
+                        }
+                    ]}
+                >
+                    <MyArray readOnly={readOnly} />
+                </Form.Item>
+            )
+
+        case 'boolean':
+            return (
+                <Form.Item valuePropName="checked" key={`algorithmForm_${operator.name}`} {...operator}>
+                    <Switch disabled={readOnly} />
+                </Form.Item>
+            )
+    }
+    return <></>
+}
+
+const MyDatePickerTime = (props: { value?: any, disabled?: boolean, onChange?: (e: any) => void }) => {
+    const onChange = React.useCallback((e: moment.Moment | null) => {
+        props.onChange && props.onChange(e ? e.format('YYYY-MM-DDTHH:mm:ss') : undefined)
+    }, [props.onChange])
+    const value = React.useMemo(() => props.value ? moment(props.value) : undefined, [props.value])
+    return <DatePicker disabled={props.disabled} value={value} onChange={onChange} showTime />
+}
+
+const MyDatePicker = (props: { value?: any, disabled?: boolean, onChange?: (e: any) => void }) => {
+    const onChange = React.useCallback((e: moment.Moment | null) => {
+        props.onChange && props.onChange(e ? e.format('YYYY-MM-DD') : undefined)
+    }, [props.onChange])
+    const value = React.useMemo(() => props.value ? moment(props.value) : undefined, [props.value])
+    return <DatePicker disabled={props.disabled} value={value} onChange={onChange} />
+}
+
+const MyArray = (props: { readOnly?: boolean, value?: string[] | string, onChange?: (e: string) => void }) => {
+    const readOnly = !!props.readOnly;
+
+    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        props.onChange && props.onChange(e.target.value);
+    }, [])
+
+    return (
+        <Input
+            value={props.value instanceof Array ? props.value.join(',') : props.value}
+            onChange={onChange}
+            readOnly={readOnly}
+            suffix={
+                <Tooltip title="若有多个值，请使用英文逗号“,”隔开。">
+                    <Icon component={IconSvg} style={{ color: 'rgba(0,0,0,.45)' }} />
+                </Tooltip>
+            }
+        />
+    )
+}

package/src/DocumentsEdit/ui/EditRule/ui/RuleForm/index.tsx

@@ -1,155 +1,155 @@
-import React from 'react';
-import {
-    Form,
-    Input,
-    Radio,
-    Select,
-} from 'kts-components-antd-x4';
-import DocumentsEdit from '../../../../';
-import algorithmFormComponent from './fn/algorithmFormComponent';
-import { IDataSource } from '../../../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
-
-export default (props: { index: number }) => {
-
-    const [form] = Form.useForm();
-
-    const controller = DocumentsEdit.useDocumentsEditController();
-
-    /** 只读模式 */
-    const readOnly = controller.useMemo(s => s.readOnly, []);
-
-    /** 可以用的算法 */
-    const algorithm = controller.useMemo(s => s.ruleState.algorithm, [])
-
-    /** 正在编辑规则的字段 */
-    const ruleProperties = controller.useMemo(s => s.ruleState.ruleProperties, [])
-
-    /** 算子字典 */
-    const operatorMap = controller.useMemo(s => s.ruleState.operatorMap, [])
-
-    const rules = controller.useMemo(s => {
-        const ref = s.ruleState.ruleProperties?.ref;
-        if (!ref) return [];
-        if (ref.items) {
-            return ref.items.rules ? ref.items.rules : []
-        } else {
-            return ref.rules ? ref.rules : [];
-        }
-    }, [])
-
-    /** 正在编辑的规则 */
-    const rule = React.useMemo(() => {
-        return rules[props.index];
-    }, [rules, props.index])
-
-    /** 选中的算法 */
-    const [selectedAlgorithm, setSelectedAlgorithm] = React.useState<string | undefined>(rule.algorithm)
-
-    const onChangeForm = React.useCallback(async (_: any, values: any) => {
-        setSelectedAlgorithm(values.algorithm);
-    }, [controller, form])
-
-    /** 规则表单 */
-    const algorithmForm = React.useMemo(() => {
-
-        const a = algorithm.filter(e => e.name === selectedAlgorithm)[0];
-        if (!a) return;
-
-        return a.operator.map(e => algorithmFormComponent(operatorMap[e], ruleProperties?.ref, readOnly));
-    }, [algorithm, operatorMap, selectedAlgorithm, ruleProperties, readOnly])
-
-    React.useEffect(() => {
-        controller.pipeline(async s => { s.ruleState.formList.push(form) })();
-        return () => {
-            controller.pipeline(async s => {
-                s.ruleState.formList.splice(s.ruleState.formList.indexOf(form), 1);
-            })()
-        }
-    }, [form, controller])
-
-    React.useEffect(() => {
-        const v: any = {};
-        for (let key in rule) {
-            if (typeof rule[key] === 'number') {
-                v[key] = `${rule[key]}`;
-            } else if (rule[key] instanceof Array) {
-                v[key] = rule[key].join(',');
-            } else {
-                v[key] = rule[key];
-            }
-        }
-        form.setFieldsValue(v);
-    }, [form, rule])
-
-    return (
-        <Form
-            form={form}
-            layout="horizontal"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            onValuesChange={onChangeForm}
-        >
-            <Form.Item hidden name="_index" initialValue={rule?._index} key={rule?._index} />
-            <Form.Item
-                name="name"
-                label="校验规则名称"
-                rules={[
-                    { required: true, message: "请输入校验规则名称" },
-                    { max: 20, message: '只能输入20个字符' },
-                ]}
-            >
-                <Input readOnly={readOnly} />
-            </Form.Item>
-
-            <Form.Item
-                name="message"
-                label="校验不通过提示"
-                rules={[
-                    { required: true, message: "请输入校验不通过提示" },
-                    { max: 50, message: '只能输入50个字符' },
-                ]}
-            >
-                <Input readOnly={readOnly} />
-            </Form.Item>
-
-            <Form.Item
-                name="checkType"
-                label="阻断流程性质"
-                initialValue="control"
-            >
-                <Radio.Group disabled={readOnly} >
-                    <Radio value="control">控制性</Radio>
-                    <Radio value="notice">提示性</Radio>
-                </Radio.Group>
-            </Form.Item>
-
-            <Form.Item
-                name="algorithm"
-                label="规则算法"
-            >
-                <Select allowClear disabled={readOnly}>
-                    {algorithm.filter(e => e.type === getPropertiesType(ruleProperties)).map((e, i) => {
-                        return (
-                            <Select.Option key={e.name} value={e.name}>{e.label}</Select.Option>
-                        )
-                    })}
-                </Select>
-            </Form.Item>
-
-            {algorithmForm}
-        </Form>
-    );
-};
-
-/** 获取字段对应的规则数据 */
-function getPropertiesType(ruleProperties?: IDataSource) {
-    if (!ruleProperties) return '';
-
-    const pr = ruleProperties.ref.items || ruleProperties.ref;
-
-    if (pr.type === 'string' && pr.format) {
-        return `string|${pr.format}`;
-    }
-
-    return pr.type;
+import React from 'react';
+import {
+    Form,
+    Input,
+    Radio,
+    Select,
+} from 'kts-components-antd-x4';
+import DocumentsEdit from '../../../../';
+import algorithmFormComponent from './fn/algorithmFormComponent';
+import { IDataSource } from '../../../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
+
+export default (props: { index: number }) => {
+
+    const [form] = Form.useForm();
+
+    const controller = DocumentsEdit.useDocumentsEditController();
+
+    /** 只读模式 */
+    const readOnly = controller.useMemo(s => s.readOnly, []);
+
+    /** 可以用的算法 */
+    const algorithm = controller.useMemo(s => s.ruleState.algorithm, [])
+
+    /** 正在编辑规则的字段 */
+    const ruleProperties = controller.useMemo(s => s.ruleState.ruleProperties, [])
+
+    /** 算子字典 */
+    const operatorMap = controller.useMemo(s => s.ruleState.operatorMap, [])
+
+    const rules = controller.useMemo(s => {
+        const ref = s.ruleState.ruleProperties?.ref;
+        if (!ref) return [];
+        if (ref.items) {
+            return ref.items.rules ? ref.items.rules : []
+        } else {
+            return ref.rules ? ref.rules : [];
+        }
+    }, [])
+
+    /** 正在编辑的规则 */
+    const rule = React.useMemo(() => {
+        return rules[props.index];
+    }, [rules, props.index])
+
+    /** 选中的算法 */
+    const [selectedAlgorithm, setSelectedAlgorithm] = React.useState<string | undefined>(rule.algorithm)
+
+    const onChangeForm = React.useCallback(async (_: any, values: any) => {
+        setSelectedAlgorithm(values.algorithm);
+    }, [controller, form])
+
+    /** 规则表单 */
+    const algorithmForm = React.useMemo(() => {
+
+        const a = algorithm.filter(e => e.name === selectedAlgorithm)[0];
+        if (!a) return;
+
+        return a.operator.map(e => algorithmFormComponent(operatorMap[e], ruleProperties?.ref, readOnly));
+    }, [algorithm, operatorMap, selectedAlgorithm, ruleProperties, readOnly])
+
+    React.useEffect(() => {
+        controller.pipeline(async s => { s.ruleState.formList.push(form) })();
+        return () => {
+            controller.pipeline(async s => {
+                s.ruleState.formList.splice(s.ruleState.formList.indexOf(form), 1);
+            })()
+        }
+    }, [form, controller])
+
+    React.useEffect(() => {
+        const v: any = {};
+        for (let key in rule) {
+            if (typeof rule[key] === 'number') {
+                v[key] = `${rule[key]}`;
+            } else if (rule[key] instanceof Array) {
+                v[key] = rule[key].join(',');
+            } else {
+                v[key] = rule[key];
+            }
+        }
+        form.setFieldsValue(v);
+    }, [form, rule])
+
+    return (
+        <Form
+            form={form}
+            layout="horizontal"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            onValuesChange={onChangeForm}
+        >
+            <Form.Item hidden name="_index" initialValue={rule?._index} key={rule?._index} />
+            <Form.Item
+                name="name"
+                label="校验规则名称"
+                rules={[
+                    { required: true, message: "请输入校验规则名称" },
+                    { max: 20, message: '只能输入20个字符' },
+                ]}
+            >
+                <Input readOnly={readOnly} />
+            </Form.Item>
+
+            <Form.Item
+                name="message"
+                label="校验不通过提示"
+                rules={[
+                    { required: true, message: "请输入校验不通过提示" },
+                    { max: 50, message: '只能输入50个字符' },
+                ]}
+            >
+                <Input readOnly={readOnly} />
+            </Form.Item>
+
+            <Form.Item
+                name="checkType"
+                label="阻断流程性质"
+                initialValue="control"
+            >
+                <Radio.Group disabled={readOnly} >
+                    <Radio value="control">控制性</Radio>
+                    <Radio value="notice">提示性</Radio>
+                </Radio.Group>
+            </Form.Item>
+
+            <Form.Item
+                name="algorithm"
+                label="规则算法"
+            >
+                <Select allowClear disabled={readOnly}>
+                    {algorithm.filter(e => e.type === getPropertiesType(ruleProperties)).map((e, i) => {
+                        return (
+                            <Select.Option key={e.name} value={e.name}>{e.label}</Select.Option>
+                        )
+                    })}
+                </Select>
+            </Form.Item>
+
+            {algorithmForm}
+        </Form>
+    );
+};
+
+/** 获取字段对应的规则数据 */
+function getPropertiesType(ruleProperties?: IDataSource) {
+    if (!ruleProperties) return '';
+
+    const pr = ruleProperties.ref.items || ruleProperties.ref;
+
+    if (pr.type === 'string' && pr.format) {
+        return `string|${pr.format}`;
+    }
+
+    return pr.type;
 }

package/src/DocumentsEdit/ui/PropertyTable/hooks/useTableProps/index.less

@@ -1,5 +1,5 @@
-.kts-documents-edit-property-table-button-list{
-    .ktsAntX-btn-link{
-        padding: 4px !important;
-    }
+.kts-documents-edit-property-table-button-list{
+    .ktsAntX-btn-link{
+        padding: 4px !important;
+    }
 }