add option custom option

Author: xlorne

mobile-ui/src/components/form/form.scss

@@ -10,13 +10,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-wrap: wrap;  /* 允许子元素换行 */
-  text-align: center;  /* 水平居中 */
+  flex-wrap: wrap; /* 允许子元素换行 */
+  text-align: center; /* 水平居中 */
   word-wrap: break-word; /* 超出容器时换行 */
   border: 0.5px solid $body-background-color;
   position: relative;
 
-  .delete-icon{
+  .delete-icon {
     margin-top: -5px;
     margin-right: -5px;
     position: absolute;
@@ -26,7 +26,7 @@
     height: 15px;
   }
 
-  a{
+  a {
     width: 100%;
     font-size: 12px;
   }
@@ -63,6 +63,25 @@
       display: flex;
       justify-content: space-between;
     }
+
+
+    .select-popup-content-custom-form {
+
+
+      .select-popup-content-custom-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 30px;
+
+        button{
+          width: 300px;
+          margin: 10px;
+        }
+      }
+
+    }
+
   }
 
   .select-popup-header {
@@ -107,6 +126,18 @@
   .select-popup-search {
     height: 30px;
     padding: 5px;
+    display: flex;
+    align-items: center;
+
+    .select-popup-search-bar {
+      flex: 9;
+      height: 30px;
+    }
+
+    .select-popup-search-button {
+      flex: 1;
+      height: 20px;
+    }
   }
 
 }

mobile-ui/src/components/form/select.tsx

@@ -1,8 +1,9 @@
 import React, {useEffect} from "react";
 import {FormItemProps, FormOption} from "@/components/form/types";
-import {CheckList, Form, Popup, SearchBar} from "antd-mobile";
-import {RightOutline} from "antd-mobile-icons";
+import {Button, CheckList, Form, Popup, SearchBar} from "antd-mobile";
+import {RightOutline, SetOutline} from "antd-mobile-icons";
 import formFieldInit from "@/components/form/common";
+import {FormAction} from "@/components/form/index";
 import "./form.scss";
 
 
@@ -14,7 +15,6 @@ const valueToForm = (value: string) => {
 }
 
 const formToValue = (value: string[]) => {
-    console.log('select', value);
     if (value && value.length > 0) {
         return value.join(",")
     }
@@ -34,6 +34,8 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
 
     const [selected, setSelected] = React.useState<string[]>(currentValue);
 
+    const [settingOptionVisible, setSettingOptionVisible] = React.useState(false);
+
     // 当前页面展示的选项的数据，会随着树级目录进入子数据，从而更新数据
     const [options, setOptions] = React.useState(props.options);
 
@@ -150,6 +152,23 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
         }
     }, [visible]);
 
+    const selectOptionFormEditAction = React.useRef<FormAction>(null);
+
+
+    const handlerOptionFormFinish = ()=>{
+        if (props.onSelectOptionFormFinish && selectOptionFormEditAction.current && formAction) {
+            props.onSelectOptionFormFinish(
+                formAction,
+                selectOptionFormEditAction.current,
+                reloadOptions,
+                () => {
+                    setSettingOptionVisible(false);
+                    setVisible(false);
+                }
+            );
+        }
+    }
+
     return (
         <Form.Item
             name={props.name}
@@ -192,21 +211,37 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
                     >取消</a>
                     <a
                         onClick={() => {
-                            formAction?.setFieldValue(props.name, formToValue(selected));
-                            props.onChange && props.onChange(selected, formAction);
-                            setVisible(false);
+                            if(props.selectOptionFormEditable){
+                                handlerOptionFormFinish();
+                            }else {
+                                formAction?.setFieldValue(props.name, formToValue(selected));
+                                props.onChange && props.onChange(selected, formAction);
+                                setVisible(false);
+                            }
                         }}
                     >确定</a>
                 </div>
-                <div className={"select-popup-search"}>
-                    <SearchBar
-                        placeholder='输入查询选项'
-                        value={searchText}
-                        onChange={v => {
-                            setSearchText(v);
-                        }}
-                    />
-                </div>
+                {!settingOptionVisible && (
+                    <div className={"select-popup-search"}>
+                        <SearchBar
+                            className={"select-popup-search-bar"}
+                            placeholder='输入查询选项'
+                            value={searchText}
+                            onChange={v => {
+                                setSearchText(v);
+                            }}
+                        />
+                        {props.selectOptionFormEditable && (
+                            <SetOutline
+                                className={"select-popup-search-button"}
+                                onClick={() => {
+                                    setSettingOptionVisible(!settingOptionVisible);
+                                }}
+                            />
+                        )}
+                    </div>
+                )}
+
                 {paths.length > 0 && (
                     <div className={"select-popup-navbar"}>
                         {paths.map((item, index) => {
@@ -227,41 +262,67 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
                 )}
 
                 <div className={"select-popup-content"}>
-                    <CheckList
-                        className={"select-popup-content-list"}
-                        value={selected}
-                        onChange={(value) => {
-                            const currentValue = value as string[];
-                            setSelected(currentValue);
-                            // 单选时，选中即关闭弹框
-                            if (!props.selectMultiple) {
-                                formAction?.setFieldValue(props.name, formToValue(currentValue));
-                                props.onChange && props.onChange(formToValue(currentValue), formAction);
 
-                                setVisible(false);
-                            }
-                        }}
-                        multiple={props.selectMultiple}
-                    >
-                        {options
-                            && options
-                                .filter(item => {
-                                    if (searchText) {
-                                        if (item.value.toUpperCase().includes(searchText.toUpperCase())) {
-                                            return true;
-                                        }
-                                        if (item.label.toUpperCase().includes(searchText.toUpperCase())) {
-                                            return true;
+                    {settingOptionVisible && (
+                        <div className={"select-popup-content-custom-form"}>
+                            {props.selectOptionFormEditView && (
+                                <props.selectOptionFormEditView formAction={selectOptionFormEditAction}/>
+                            )}
+                            <div className={"select-popup-content-custom-footer"}>
+                                <Button
+                                    size={'middle'}
+                                    color={'primary'}
+                                    onClick={() => {
+                                        handlerOptionFormFinish();
+                                    }}
+                                >添加选项</Button>
+                                <Button
+                                    size={'middle'}
+                                    onClick={() => {
+                                        setSettingOptionVisible(false);
+                                    }}>取消添加</Button>
+                            </div>
+
+                        </div>
+                    )}
+
+                    {!settingOptionVisible && (
+                        <CheckList
+                            className={"select-popup-content-list"}
+                            value={selected}
+                            onChange={(value) => {
+                                const currentValue = value as string[];
+                                setSelected(currentValue);
+                                // 单选时，选中即关闭弹框
+                                if (!props.selectMultiple) {
+                                    formAction?.setFieldValue(props.name, formToValue(currentValue));
+                                    props.onChange && props.onChange(formToValue(currentValue), formAction);
+
+                                    setVisible(false);
+                                }
+                            }}
+                            multiple={props.selectMultiple}
+                        >
+                            {options
+                                && options
+                                    .filter(item => {
+                                        if (searchText) {
+                                            if (item.value.toUpperCase().includes(searchText.toUpperCase())) {
+                                                return true;
+                                            }
+                                            if (item.label.toUpperCase().includes(searchText.toUpperCase())) {
+                                                return true;
+                                            }
+                                            return false;
                                         }
-                                        return false;
-                                    }
-                                    return true;
-                                }).map((item) => {
-                                    return (
-                                        <CheckboxItem {...item}/>
-                                    )
-                                })}
-                    </CheckList>
+                                        return true;
+                                    }).map((item) => {
+                                        return (
+                                            <CheckboxItem {...item}/>
+                                        )
+                                    })}
+                        </CheckList>
+                    )}
                 </div>
             </Popup>
         </Form.Item>

mobile-ui/src/components/form/types.tsx

@@ -1,6 +1,7 @@
 import {NamePath} from "antd-mobile/es/components/form";
 import {FormValidateContent} from "@/components/form/validate";
 import {FormAction} from "@/components/form";
+import React from "react";
 
 // Form表单选项类型
 export interface FormOption {
@@ -24,6 +25,11 @@ export interface FormField {
     props: FormItemProps;
 }
 
+// 自定义Select组件选项维护视图
+export interface SelectOptionFormEditProps {
+    formAction?: React.Ref<FormAction>;
+}
+
 // Form表单字段属性
 export interface FormItemProps {
     // 是否隐藏字段
@@ -62,6 +68,16 @@ export interface FormItemProps {
     textAreaMaxLength?: number,
     // select组件是否支持多选
     selectMultiple?: boolean,
+    //select组件添加的视图是否开启编辑
+    selectOptionFormEditable?: boolean,
+    // select组件添加的视图
+    selectOptionFormEditView?: React.ComponentType<SelectOptionFormEditProps>,
+    // Select组件添加数据事件
+    onSelectOptionFormFinish?: (formAction: FormAction,
+                                selectOptionFormEditFormAction: FormAction,
+                                reloadOption?: () => void,
+                                close?: () => void) => void;
+
     // 文件上传接受的文件类型，默认为 image/*
     uploaderAccept?: string,
     // 文件上传最大数量
@@ -108,6 +124,7 @@ export interface FormItemProps {
     selectorColumn?: number,
     // Captcha组件切换验证码事件
     onCaptchaChange?: (value: string) => void;
+
 }
 
 

mobile-ui/src/components/list/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {ErrorBlock, InfiniteScroll, PullToRefresh as AntPullToRefresh} from "antd-mobile";
 import {PullStatus} from "antd-mobile/es/components/pull-to-refresh";
 import "./index.scss";
@@ -148,6 +148,10 @@ const PullToRefreshList: React.FC<PullToRefreshListProps> = (props) => {
         }
     }
 
+    useEffect(() => {
+        refresh();
+    }, []);
+
     return (
         <div
             style={props.style}

mobile-ui/src/pages/person/education/custom.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {SelectOptionFormEditProps} from "@/components/form/types";
+import Form from "@/components/form";
+import FormInput from "@/components/form/input";
+
+const CustomFormEditOption:React.FC<SelectOptionFormEditProps> = (props)=>{
+    return (
+        <Form
+            actionRef={props.formAction}
+        >
+            <FormInput
+                name={"type"}
+                label={"学科类别"}
+                placeholder={"请输入学科类别"}
+            />
+        </Form>
+    )
+}
+
+export default CustomFormEditOption;