kts-components-document-access-point 1.4.4 → 1.4.7

package/src/DocumentsEdit/ui/EditProperty/index.tsx

@@ -1,291 +1,291 @@
-import React from 'react';
-import {
-    Button,
-    Drawer,
-    Space,
-    Form,
-    Input,
-    Radio,
-    Switch,
-    Select,
-    Popconfirm,
-    Divider,
-} from 'kts-components-antd-x4';
-import DocumentsEdit from '../../';
-import * as tools from '../../tools';
-// import { IDataSource } from '../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
-
-const { Option } = Select;
-const { TextArea } = Input;
-
-export default () => {
-
-    /** 控制器 */
-    const controller = DocumentsEdit.useDocumentsEditController();
-
-    /** 当前正在处理的属性 */
-    const current = controller.useMemo(s => s.propertyTableState.current, []);
-
-    /** 编辑中的字段 */
-    const editProperties = controller.useMemo(s => s.propertyTableState.editProperties, [])
-
-    // 是否改变了类型
-    const [isChangeType, setIsChangeType] = React.useState(false);
-
-    // 是否数组
-    const [isArray, setIsArray] = React.useState(false);
-
-    // 关闭弹窗
-    const onClose = React.useCallback(() => { controller.pipeline(async s => s.propertyTableState.editProperties = undefined)() }, [controller]);
-
-    const [form] = Form.useForm();
-
-    /** 点击了提交 */
-    const onSubmit = React.useCallback(async () => {
-        if (!editProperties) return;
-        try {
-            const values = await form.validateFields();
-            const properties: any = {
-                $name: values.$name,
-                title: values.title,
-                type: values.isArray ? 'array' : tools.getType(values.type),
-                format: values.isArray ? undefined : tools.getFormat(values.type),
-                // items: tools.getItems({ ...values, properties: editProperties.ref.properties, $name: editProperties.ref.$name }),
-                items: tools.getItems(values),
-                required: values.required,
-                description: values.description,
-                rules: values.isArray ? [{
-                    _index: 0,
-                    name: '数组容量校验(Min)',
-                    checkType: 'control',
-                    message: `数组长度不得小于${values.exclusiveMinItems ? "等于" : ""}${values.minItems}`,
-                    algorithm: 'array-0',
-                    minItems: values.minItems ? parseInt(values.minItems) : undefined,
-                    exclusiveMinItems: values.exclusiveMinItems,
-                }, {
-                    _index: 0,
-                    name: '数组容量校验(Max)',
-                    checkType: 'control',
-                    message: `数组长度不得大于${values.exclusiveMaxItems ? "等于" : ""}${values.maxItems}`,
-                    algorithm: 'array-1',
-                    maxItems: values.maxItems ? parseInt(values.maxItems) : undefined,
-                    exclusiveMaxItems: values.exclusiveMaxItems,
-                }
-                ] : undefined,
-            }
-            await controller.editProperties({ editProperties, properties, current });
-            onClose();
-        } catch (error) {
-        }
-    }, [controller, current, editProperties])
-
-    /** 删除 */
-    const onDel = React.useCallback(async () => {
-        if (!editProperties) return;
-        await controller.delProperties(editProperties);
-        onClose();
-    }, [current, controller, editProperties])
-
-    React.useEffect(() => {
-        if (!editProperties) return;
-        
-        const info = current?.items ? current?.items : current;
-
-        setIsArray(!!editProperties.ref.items);
-
-        form.setFieldsValue({
-            $name: editProperties.value.$name,
-            title: editProperties.value.alias,
-            isArray: !!editProperties.ref.items,
-            required: (info?.required ?? ([] as string[])).indexOf(editProperties.value.$name as any) >= 0,
-            description: editProperties.value.detailed,
-            type: tools.initType(editProperties.ref),
-        })
-
-        // 数组的设置
-        if (!!editProperties.ref.items && editProperties.ref.rules) {
-            const values = { ...editProperties.ref.rules[0], ...editProperties.ref.rules[1] };
-            form.setFieldsValue({
-                minItems: typeof values.minItems === 'number' ? `${values.minItems}` : undefined,
-                maxItems: typeof values.maxItems === 'number' ? `${values.maxItems}` : undefined,
-                exclusiveMinItems: values.exclusiveMinItems,
-                exclusiveMaxItems: values.exclusiveMaxItems,
-            })
-        } else {
-            form.setFieldsValue({
-                minItems: undefined,
-                maxItems: undefined,
-                exclusiveMinItems: undefined,
-                exclusiveMaxItems: undefined,
-            })
-        }
-
-        return () => {
-            setIsChangeType(false);
-        }
-    }, [editProperties, form, current]);
-
-    const submitButton = React.useMemo(() => {
-        if (isChangeType) {
-            return (
-                <Popconfirm
-                    title="您当前修改了“类型”，修改后系统将清空当前字段的所有校验规则，确定要修改？"
-                    onConfirm={onSubmit}
-                    onCancel={onClose}
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <Button type="primary" >确定</Button>
-                </Popconfirm>
-            )
-        } else {
-            return <Button onClick={onSubmit} type="primary" >确定</Button>
-        }
-    }, [isChangeType, onSubmit])
-
-    return (
-        <Drawer
-            title="编辑字段"
-            placement="right"
-            width={500}
-            onClose={onClose}
-            visible={!!editProperties}
-            destroyOnClose={true}
-            footer={
-                <Space>
-                    {submitButton}
-                    {editProperties?.value.$canDel && <Button onClick={onDel} type="primary" danger >删除</Button>}
-                    <Button onClick={onClose} >取消</Button>
-                </Space>
-            }
-        >
-            <Form
-                labelCol={{ span: 5 }}
-                wrapperCol={{ span: 19 }}
-                form={form}
-                layout="horizontal"
-            >
-                <Form.Item
-                    name="$name"
-                    label="字段名"
-                >
-                    <Myspan />
-                </Form.Item>
-                <Form.Item
-                    name="title"
-                    label="显示名称"
-                    rules={[
-                        { required: true, message: '请输入显示名称' },
-                        { max: 50, message: '只能输入50个字符' },
-                    ]}
-                >
-                    <Input placeholder="请输入显示名称" />
-                </Form.Item>
-                <Form.Item
-                    name="isArray"
-                    label="是否数组"
-                    initialValue={false}
-                >
-                    <Radio.Group onChange={e => { setIsArray(e.target.value) }} >
-                        <Radio value={false}>单值</Radio>
-                        <Radio value={true}>数组</Radio>
-                    </Radio.Group>
-                </Form.Item>
-
-                {
-                    isArray && <>
-                        <Divider />
-                        <Form.Item
-                            name="minItems"
-                            label="最少项"
-                            rules={[
-                                { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
-                                { max: 20, message: '支持不超过20位的正整数' },
-                            ]}
-                        >
-                            <Input placeholder="请输入最少项" />
-                        </Form.Item>
-                        <Form.Item
-                            name="maxItems"
-                            label="最多项"
-                            rules={[
-                                { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
-                                { max: 20, message: '支持不超过20位的正整数' },
-                            ]}
-                        >
-                            <Input placeholder="请输入最多项" />
-                        </Form.Item>
-                        <Form.Item
-                            name="exclusiveMinItems"
-                            label="排除最少项"
-                            valuePropName="checked"
-                        >
-                            <Switch />
-                        </Form.Item>
-                        <Form.Item
-                            name="exclusiveMaxItems"
-                            label="排除最多项"
-                            valuePropName="checked"
-                        >
-                            <Switch />
-                        </Form.Item>
-                        <Divider />
-                    </>
-                }
-
-                <Form.Item
-                    name="required"
-                    label="是否必填"
-                    valuePropName="checked"
-                >
-                    <Switch />
-                </Form.Item>
-                <Form.Item
-                    name="type"
-                    label="类型"
-                    initialValue="string"
-                    hasFeedback
-                    help={isChangeType ? "修改类型后，系统将自动清空该字段的校验规则。" : undefined}
-                    validateStatus={isChangeType ? "warning" : ''}
-                >
-                    <Select onChange={e => { setIsChangeType(e !== tools.getType(editProperties?.ref.type ?? '')) }} >
-                        <Option key="00" value="string">{tools.getTypeName('string')}</Option>
-                        <Option key="01" value="string|date">{tools.getTypeName('string|date')}</Option>
-                        <Option key="02" value="string|time">{tools.getTypeName('string|time')}</Option>
-                        <Option key="03" value="string|date-time">{tools.getTypeName('string|date-time')}</Option>
-                        <Option key="04" value="boolean">{tools.getTypeName('boolean')}</Option>
-                        <Option key="05" value="integer">{tools.getTypeName('integer')}</Option>
-                        <Option key="06" value="number">{tools.getTypeName('number')}</Option>
-                        <Option key="07" value="object">{tools.getTypeName('object')}</Option>
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="description"
-                    label="描述"
-                    rules={[
-                        { max: 50, message: '只能输入50个字符' }
-                    ]}
-                >
-                    <TextArea autoSize placeholder="请输入描述" />
-                </Form.Item>
-            </Form>
-        </Drawer>
-    );
-};
-
-class Myspan extends React.Component<{ value?: any }> {
-    render() { return <span>{this.props.value}</span> }
-}
-
-// function toItemsValue(values: any, editProperties: IDataSource) {
-//     if (editProperties.ref.items) {
-//         return {
-//             ...editProperties.ref.items,
-//             ...values,
-//         }
-//     } else {
-//         return {
-//             ...values,
-//         }
-//     }
+import React from 'react';
+import {
+    Button,
+    Drawer,
+    Space,
+    Form,
+    Input,
+    Radio,
+    Switch,
+    Select,
+    Popconfirm,
+    Divider,
+} from 'kts-components-antd-x4';
+import DocumentsEdit from '../../';
+import * as tools from '../../tools';
+// import { IDataSource } from '../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+export default () => {
+
+    /** 控制器 */
+    const controller = DocumentsEdit.useDocumentsEditController();
+
+    /** 当前正在处理的属性 */
+    const current = controller.useMemo(s => s.propertyTableState.current, []);
+
+    /** 编辑中的字段 */
+    const editProperties = controller.useMemo(s => s.propertyTableState.editProperties, [])
+
+    // 是否改变了类型
+    const [isChangeType, setIsChangeType] = React.useState(false);
+
+    // 是否数组
+    const [isArray, setIsArray] = React.useState(false);
+
+    // 关闭弹窗
+    const onClose = React.useCallback(() => { controller.pipeline(async s => s.propertyTableState.editProperties = undefined)() }, [controller]);
+
+    const [form] = Form.useForm();
+
+    /** 点击了提交 */
+    const onSubmit = React.useCallback(async () => {
+        if (!editProperties) return;
+        try {
+            const values = await form.validateFields();
+            const properties: any = {
+                $name: values.$name,
+                title: values.title,
+                type: values.isArray ? 'array' : tools.getType(values.type),
+                format: values.isArray ? undefined : tools.getFormat(values.type),
+                // items: tools.getItems({ ...values, properties: editProperties.ref.properties, $name: editProperties.ref.$name }),
+                items: tools.getItems(values),
+                required: values.required,
+                description: values.description,
+                rules: values.isArray ? [{
+                    _index: 0,
+                    name: '数组容量校验(Min)',
+                    checkType: 'control',
+                    message: `数组长度不得小于${values.exclusiveMinItems ? "等于" : ""}${values.minItems}`,
+                    algorithm: 'array-0',
+                    minItems: values.minItems ? parseInt(values.minItems) : undefined,
+                    exclusiveMinItems: values.exclusiveMinItems,
+                }, {
+                    _index: 0,
+                    name: '数组容量校验(Max)',
+                    checkType: 'control',
+                    message: `数组长度不得大于${values.exclusiveMaxItems ? "等于" : ""}${values.maxItems}`,
+                    algorithm: 'array-1',
+                    maxItems: values.maxItems ? parseInt(values.maxItems) : undefined,
+                    exclusiveMaxItems: values.exclusiveMaxItems,
+                }
+                ] : undefined,
+            }
+            await controller.editProperties({ editProperties, properties, current });
+            onClose();
+        } catch (error) {
+        }
+    }, [controller, current, editProperties])
+
+    /** 删除 */
+    const onDel = React.useCallback(async () => {
+        if (!editProperties) return;
+        await controller.delProperties(editProperties);
+        onClose();
+    }, [current, controller, editProperties])
+
+    React.useEffect(() => {
+        if (!editProperties) return;
+        
+        const info = current?.items ? current?.items : current;
+
+        setIsArray(!!editProperties.ref.items);
+
+        form.setFieldsValue({
+            $name: editProperties.value.$name,
+            title: editProperties.value.alias,
+            isArray: !!editProperties.ref.items,
+            required: (info?.required ?? ([] as string[])).indexOf(editProperties.value.$name as any) >= 0,
+            description: editProperties.value.detailed,
+            type: tools.initType(editProperties.ref),
+        })
+
+        // 数组的设置
+        if (!!editProperties.ref.items && editProperties.ref.rules) {
+            const values = { ...editProperties.ref.rules[0], ...editProperties.ref.rules[1] };
+            form.setFieldsValue({
+                minItems: typeof values.minItems === 'number' ? `${values.minItems}` : undefined,
+                maxItems: typeof values.maxItems === 'number' ? `${values.maxItems}` : undefined,
+                exclusiveMinItems: values.exclusiveMinItems,
+                exclusiveMaxItems: values.exclusiveMaxItems,
+            })
+        } else {
+            form.setFieldsValue({
+                minItems: undefined,
+                maxItems: undefined,
+                exclusiveMinItems: undefined,
+                exclusiveMaxItems: undefined,
+            })
+        }
+
+        return () => {
+            setIsChangeType(false);
+        }
+    }, [editProperties, form, current]);
+
+    const submitButton = React.useMemo(() => {
+        if (isChangeType) {
+            return (
+                <Popconfirm
+                    title="您当前修改了“类型”，修改后系统将清空当前字段的所有校验规则，确定要修改？"
+                    onConfirm={onSubmit}
+                    onCancel={onClose}
+                    okText="确定"
+                    cancelText="取消"
+                >
+                    <Button type="primary" >确定</Button>
+                </Popconfirm>
+            )
+        } else {
+            return <Button onClick={onSubmit} type="primary" >确定</Button>
+        }
+    }, [isChangeType, onSubmit])
+
+    return (
+        <Drawer
+            title="编辑字段"
+            placement="right"
+            width={500}
+            onClose={onClose}
+            visible={!!editProperties}
+            destroyOnClose={true}
+            footer={
+                <Space>
+                    {submitButton}
+                    {editProperties?.value.$canDel && <Button onClick={onDel} type="primary" danger >删除</Button>}
+                    <Button onClick={onClose} >取消</Button>
+                </Space>
+            }
+        >
+            <Form
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 19 }}
+                form={form}
+                layout="horizontal"
+            >
+                <Form.Item
+                    name="$name"
+                    label="字段名"
+                >
+                    <Myspan />
+                </Form.Item>
+                <Form.Item
+                    name="title"
+                    label="显示名称"
+                    rules={[
+                        { required: true, message: '请输入显示名称' },
+                        { max: 50, message: '只能输入50个字符' },
+                    ]}
+                >
+                    <Input placeholder="请输入显示名称" />
+                </Form.Item>
+                <Form.Item
+                    name="isArray"
+                    label="是否数组"
+                    initialValue={false}
+                >
+                    <Radio.Group onChange={e => { setIsArray(e.target.value) }} >
+                        <Radio value={false}>单值</Radio>
+                        <Radio value={true}>数组</Radio>
+                    </Radio.Group>
+                </Form.Item>
+
+                {
+                    isArray && <>
+                        <Divider />
+                        <Form.Item
+                            name="minItems"
+                            label="最少项"
+                            rules={[
+                                { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
+                                { max: 20, message: '支持不超过20位的正整数' },
+                            ]}
+                        >
+                            <Input placeholder="请输入最少项" />
+                        </Form.Item>
+                        <Form.Item
+                            name="maxItems"
+                            label="最多项"
+                            rules={[
+                                { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
+                                { max: 20, message: '支持不超过20位的正整数' },
+                            ]}
+                        >
+                            <Input placeholder="请输入最多项" />
+                        </Form.Item>
+                        <Form.Item
+                            name="exclusiveMinItems"
+                            label="排除最少项"
+                            valuePropName="checked"
+                        >
+                            <Switch />
+                        </Form.Item>
+                        <Form.Item
+                            name="exclusiveMaxItems"
+                            label="排除最多项"
+                            valuePropName="checked"
+                        >
+                            <Switch />
+                        </Form.Item>
+                        <Divider />
+                    </>
+                }
+
+                <Form.Item
+                    name="required"
+                    label="是否必填"
+                    valuePropName="checked"
+                >
+                    <Switch />
+                </Form.Item>
+                <Form.Item
+                    name="type"
+                    label="类型"
+                    initialValue="string"
+                    hasFeedback
+                    help={isChangeType ? "修改类型后，系统将自动清空该字段的校验规则。" : undefined}
+                    validateStatus={isChangeType ? "warning" : ''}
+                >
+                    <Select onChange={e => { setIsChangeType(e !== tools.getType(editProperties?.ref.type ?? '')) }} >
+                        <Option key="00" value="string">{tools.getTypeName('string')}</Option>
+                        <Option key="01" value="string|date">{tools.getTypeName('string|date')}</Option>
+                        <Option key="02" value="string|time">{tools.getTypeName('string|time')}</Option>
+                        <Option key="03" value="string|date-time">{tools.getTypeName('string|date-time')}</Option>
+                        <Option key="04" value="boolean">{tools.getTypeName('boolean')}</Option>
+                        <Option key="05" value="integer">{tools.getTypeName('integer')}</Option>
+                        <Option key="06" value="number">{tools.getTypeName('number')}</Option>
+                        <Option key="07" value="object">{tools.getTypeName('object')}</Option>
+                    </Select>
+                </Form.Item>
+                <Form.Item
+                    name="description"
+                    label="描述"
+                    rules={[
+                        { max: 50, message: '只能输入50个字符' }
+                    ]}
+                >
+                    <TextArea autoSize placeholder="请输入描述" />
+                </Form.Item>
+            </Form>
+        </Drawer>
+    );
+};
+
+class Myspan extends React.Component<{ value?: any }> {
+    render() { return <span>{this.props.value}</span> }
+}
+
+// function toItemsValue(values: any, editProperties: IDataSource) {
+//     if (editProperties.ref.items) {
+//         return {
+//             ...editProperties.ref.items,
+//             ...values,
+//         }
+//     } else {
+//         return {
+//             ...values,
+//         }
+//     }
 // }