Skip to content

B
bkunyun
Commit f1b5424e authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 完成参数设置的参数校验

parent de23a8e5
Pipeline #185 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 240 additions and 223 deletions
      src/components/mui/MyInput.tsx
      View file @ f1b5424e
      ...@@ -8,59 +8,61 @@ ...@@ -8,59 +8,61 @@
      */ */
      import TextField, { TextFieldProps } from "@mui/material/TextField"; import TextField, { TextFieldProps } from "@mui/material/TextField";
      interface MyInputProps extends Omit<TextFieldProps, "value"> { interface MyInputProps extends Omit<TextFieldProps, "value"> {
      value: any; value: any;
      inputSx?: any; inputSx?: any;
      onChange?: any; onChange?: any;
      onFocus?: any; onFocus?: any;
      label?: string; label?: string;
      variant?: "standard" | "filled" | "outlined"; variant?: "standard" | "filled" | "outlined";
      id?: string; id?: string;
      size?: "small" | "medium"; size?: "small" | "medium";
      placeholder?: string; placeholder?: string;
      fullWidth?: boolean; // 宽度是否和容器一致 fullWidth?: boolean; // 宽度是否和容器一致
      InputProps?: any; // input加前后icon可以用这个 InputProps?: any; // input加前后icon可以用这个
      error?: boolean; error?: boolean;
      helperText?: string; helperText?: string;
      }; }
      const MyInput = (props: MyInputProps) => { const MyInput = (props: MyInputProps) => {
      const { const {
      inputSx = {}, inputSx = {},
      value, value,
      onChange, onChange,
      onFocus, onFocus,
      label, label,
      id, id,
      variant, variant,
      size = "small", size = "small",
      placeholder = "请输入", placeholder = "请输入",
      fullWidth = true, fullWidth = true,
      InputProps, InputProps,
      error = false, error = false,
      helperText, helperText,
      } = props; disabled,
      } = props;
      return ( return (
      <TextField <TextField
      {...props} {...props}
      error={error} error={error}
      helperText={helperText} helperText={helperText}
      sx={{ ...inputSx }} sx={{ ...inputSx }}
      id={id} id={id}
      label={label} label={label}
      variant={variant} variant={variant}
      onChange={onChange} onChange={onChange}
      onFocus={onFocus} onFocus={onFocus}
      size={size} size={size}
      placeholder={placeholder} placeholder={placeholder}
      fullWidth={fullWidth} fullWidth={fullWidth}
      InputProps={{ InputProps={{
      ...InputProps, ...InputProps,
      }} }}
      value={value} disabled={disabled}
      /> value={value}
      ); />
      );
      }; };
      export default MyInput; export default MyInput;
      src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
      View file @ f1b5424e
      ...@@ -255,6 +255,38 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -255,6 +255,38 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      if (parameter.id === parameterId) { if (parameter.id === parameterId) {
      console.log(e.target.checked); console.log(e.target.checked);
      parameter.hidden = !e.target.checked; parameter.hidden = !e.target.checked;
      const checkResult = getCustomTemplateParameterCheckResult(
      parameter,
      parameter.defaultValue
      );
      parameter.error = checkResult.error;
      parameter.helperText = checkResult.helperText;
      }
      });
      }
      setTemplateConfigInfo(result);
      },
      [templateConfigInfo, setTemplateConfigInfo]
      );
      const handleParameterChange = useCallback(
      (e: any, parameterId: string) => {
      console.log(e.target.value, taskId, parameterId);
      const result: ITask[] = _.cloneDeep(templateConfigInfo);
      console.log(result);
      const taskIndex = result.findIndex((item) => {
      return item.id === taskId;
      });
      if (taskIndex !== -1) {
      result[taskIndex].parameters.forEach((parameter) => {
      if (parameter.id === parameterId) {
      parameter.defaultValue = e.target.value;
      const checkResult = getCustomTemplateParameterCheckResult(
      parameter,
      e.target.value
      );
      parameter.error = checkResult.error;
      parameter.helperText = checkResult.helperText;
      } }
      }); });
      } }
      ...@@ -263,142 +295,151 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -263,142 +295,151 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      [templateConfigInfo, setTemplateConfigInfo] [templateConfigInfo, setTemplateConfigInfo]
      ); );
      const renderInput = useCallback((parameter: IParameter) => { const renderInput = useCallback(
      return ( (parameter: IParameter) => {
      <Tooltip title={parameter.description} placement="top"> return (
      <div> <Tooltip title={parameter.description} placement="top">
      {parameter.domType.toLowerCase() === "file" && ( <div>
      <MyInput {parameter.domType.toLowerCase() === "file" && (
      value={parameter.defaultValue || ""} <MyInput
      InputProps={{ value={parameter.defaultValue || ""}
      endAdornment: ( InputProps={{
      <img endAdornment: (
      onClick={() => handleOpenFileSelect(taskId, parameter.name)} <img
      src={fileSelectIcon} onClick={() =>
      alt="" handleOpenFileSelect(taskId, parameter.name)
      className={styles.fileSelectImg} }
      /> src={fileSelectIcon}
      ), alt=""
      }} className={styles.fileSelectImg}
      placeholder="请选择" />
      error={parameter.error || false} ),
      helperText={parameter.helperText} }}
      disabled={parameter.parameterGroup === "out"} placeholder="请选择"
      ></MyInput> error={parameter.error || false}
      )} helperText={parameter.helperText}
      {parameter.domType.toLowerCase() === "path" && ( disabled={parameter.parameterGroup === "out"}
      <MyInput ></MyInput>
      value={parameter.defaultValue || ""} )}
      InputProps={{ {parameter.domType.toLowerCase() === "path" && (
      endAdornment: ( <MyInput
      <img value={parameter.defaultValue || ""}
      onClick={() => handleOpenFileSelect(taskId, parameter.name)} InputProps={{
      src={fileSelectIcon} endAdornment: (
      alt="" <img
      className={styles.fileSelectImg} onClick={() =>
      /> handleOpenFileSelect(taskId, parameter.name)
      ), }
      }} src={fileSelectIcon}
      placeholder="请选择" alt=""
      error={parameter.error || false} className={styles.fileSelectImg}
      helperText={parameter.helperText} />
      disabled={parameter.parameterGroup === "out"} ),
      ></MyInput> }}
      )} placeholder="请选择"
      {parameter.domType.toLowerCase() === "dataset" && ( error={parameter.error || false}
      <MyInput helperText={parameter.helperText}
      value={parameter.defaultValue || ""} disabled={parameter.parameterGroup === "out"}
      InputProps={{ ></MyInput>
      endAdornment: ( )}
      <img {parameter.domType.toLowerCase() === "dataset" && (
      onClick={() => handleOpenFileSelect(taskId, parameter.name)} <MyInput
      src={fileSelectIcon} value={parameter.defaultValue || ""}
      alt="" InputProps={{
      className={styles.fileSelectImg} endAdornment: (
      /> <img
      ), onClick={() =>
      }} handleOpenFileSelect(taskId, parameter.name)
      placeholder="请选择" }
      error={parameter.error || false} src={fileSelectIcon}
      helperText={parameter.helperText} alt=""
      disabled={parameter.parameterGroup === "out"} className={styles.fileSelectImg}
      ></MyInput> />
      )} ),
      {parameter.domType.toLowerCase() === "input" && ( }}
      <MyInput placeholder="请选择"
      value={parameter.defaultValue || ""} error={parameter.error || false}
      onChange={(e: any) => helperText={parameter.helperText}
      handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
      } ></MyInput>
      placeholder="请输入" )}
      error={parameter.error || false} {parameter.domType.toLowerCase() === "input" && (
      helperText={parameter.helperText} <MyInput
      disabled={parameter.parameterGroup === "out"} value={parameter.defaultValue || ""}
      ></MyInput> onChange={(e: any) =>
      )} handleParameterChange(e, parameter.id || "")
      {parameter.domType.toLowerCase() === "select" && ( }
      <MySelect placeholder="请输入"
      value={parameter.defaultValue} error={parameter.error || false}
      onChange={(e: any) => helperText={parameter.helperText}
      handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
      } ></MyInput>
      error={parameter.error || false} )}
      helpertext={parameter.helperText} {parameter.domType.toLowerCase() === "select" && (
      options={optionsTransform(parameter?.choices || [], "label")} <MySelect
      disabled={parameter.parameterGroup === "out"} value={parameter.defaultValue}
      ></MySelect> onChange={(e: any) =>
      )} handleParameterChange(e, parameter.id || "")
      {parameter.domType.toLowerCase() === "multipleselect" && ( }
      <MySelect error={parameter.error || false}
      value={parameter.defaultValue} helpertext={parameter.helperText}
      onChange={(e: any) => options={optionsTransform(parameter?.choices || [], "label")}
      handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
      } ></MySelect>
      multiple={true} )}
      error={parameter.error || false} {parameter.domType.toLowerCase() === "multipleselect" && (
      helpertext={parameter.helperText} <MySelect
      options={optionsTransform(parameter.choices, "label")} value={parameter.defaultValue}
      disabled={parameter.parameterGroup === "out"} onChange={(e: any) =>
      ></MySelect> handleParameterChange(e, parameter.id || "")
      )} }
      {parameter.domType.toLowerCase() === "radio" && ( multiple={true}
      <MyRadio error={parameter.error || false}
      value={parameter.defaultValue} helpertext={parameter.helperText}
      onChange={(e: any) => options={optionsTransform(parameter.choices, "label")}
      handleParameterChange(e, parameter.id || "") disabled={parameter.parameterGroup === "out"}
      } ></MySelect>
      options={optionsTransform(parameter.choices, "label")} )}
      error={parameter.error || false} {parameter.domType.toLowerCase() === "radio" && (
      helperText={parameter.helperText} <MyRadio
      ></MyRadio> value={parameter.defaultValue}
      )} onChange={(e: any) =>
      {parameter.domType.toLowerCase() === "checkbox" && ( handleParameterChange(e, parameter.id || "")
      <MyCheckBox }
      value={parameter.defaultValue} options={optionsTransform(parameter.choices, "label")}
      onChange={(e: any) => error={parameter.error || false}
      handleParameterChange( helperText={parameter.helperText}
      { ></MyRadio>
      target: { )}
      value: e, {parameter.domType.toLowerCase() === "checkbox" && (
      <MyCheckBox
      value={parameter.defaultValue}
      onChange={(e: any) =>
      handleParameterChange(
      {
      target: {
      value: e,
      },
      }, },
      }, parameter.id || ""
      parameter.id || "" )
      ) }
      } options={optionsTransform(parameter.choices, "label")}
      options={optionsTransform(parameter.choices, "label")} error={parameter.error || false}
      error={parameter.error || false} helperText={parameter.helperText}
      helperText={parameter.helperText} ></MyCheckBox>
      ></MyCheckBox> )}
      )} {/* {parameter.description && (
      {/* {parameter.description && (
      <Tooltip title={parameter.description} placement="top"> <Tooltip title={parameter.description} placement="top">
      <img className={styles.parameterDesc} src={questionMark} alt="" /> <img className={styles.parameterDesc} src={questionMark} alt="" />
      </Tooltip> </Tooltip>
      )} */} )} */}
      </div> </div>
      </Tooltip> </Tooltip>
      ); );
      }, []); },
      [handleParameterChange]
      );
      // 输入参数 // 输入参数
      const inParameters: Array<IParameter> = useMemo(() => { const inParameters: Array<IParameter> = useMemo(() => {
      ...@@ -463,7 +504,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -463,7 +504,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      return ( return (
      <div <div
      className={styles.parameter} className={styles.parameter}
      key={parameter.id || "" + parameterIndex} key={`${parameter.id}${parameterIndex}`}
      > >
      <div className={styles.parameterTop}> <div className={styles.parameterTop}>
      <div className={styles.parameterLeft}> <div className={styles.parameterLeft}>
      ...@@ -509,44 +550,6 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -509,44 +550,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      setFileSelectOpen(true); setFileSelectOpen(true);
      }; };
      const handleParameterChange = useCallback(
      (e: any, parameterId: string) => {
      console.log(e.target.value, taskId, parameterId);
      const result: ITask[] = _.cloneDeep(templateConfigInfo);
      console.log(result);
      result.forEach((task) => {
      if (task.id === taskId) {
      let isCheck = true;
      task.parameters.forEach((parameter) => {
      if (parameter.id === parameterId) {
      parameter.defaultValue = e.target.value;
      const checkResult = getCustomTemplateParameterCheckResult(
      parameter,
      e.target.value
      );
      parameter.error = checkResult.error;
      parameter.helperText = checkResult.helperText;
      }
      if (
      getCustomTemplateParameterCheckResult(
      parameter,
      parameter.defaultValue
      ).error === true
      ) {
      isCheck = false;
      }
      });
      task.isCheck = isCheck;
      } else {
      return;
      }
      });
      setTemplateConfigInfo(result);
      // setParameter(e.target.value, taskId, parameterName);
      },
      [templateConfigInfo, setTemplateConfigInfo]
      );
      // 参数组tabs // 参数组tabs
      const paramsTabList = useMemo(() => { const paramsTabList = useMemo(() => {
      return [ return [
      ...@@ -631,7 +634,10 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -631,7 +634,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      <div className={styles.paramsList}> <div className={styles.paramsList}>
      {inParameters.map((parameter, index) => { {inParameters.map((parameter, index) => {
      return ( return (
      <div className={styles.inOutParameterBox} key={index}> <div
      className={styles.inOutParameterBox}
      key={`${parameter.id}${index}`}
      >
      <div className={styles.inOutParameterTop}> <div className={styles.inOutParameterTop}>
      <div className={styles.inOutParameterleft}> <div className={styles.inOutParameterleft}>
      <div <div
      ...@@ -666,9 +672,12 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -666,9 +672,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
      <div className={styles.inOutBox}> <div className={styles.inOutBox}>
      <div className={styles.paramsTitle}>输出</div> <div className={styles.paramsTitle}>输出</div>
      <div className={styles.paramsList}> <div className={styles.paramsList}>
      {inParameters.map((parameter, index) => { {outParameters.map((parameter, index) => {
      return ( return (
      <div className={styles.inOutParameterBox} key={index}> <div
      className={styles.inOutParameterBox}
      key={`${parameter.id}${index}`}
      >
      <div className={styles.inOutParameterTop}> <div className={styles.inOutParameterTop}>
      <div className={styles.inOutParameterleft}> <div className={styles.inOutParameterleft}>
      <div <div
      ......
      src/views/WorkFlowEdit/util.ts
      View file @ f1b5424e
      ...@@ -23,6 +23,12 @@ export const getCustomTemplateParameterCheckResult = ( ...@@ -23,6 +23,12 @@ export const getCustomTemplateParameterCheckResult = (
      } }
      } }
      } }
      if (error) {
      return {
      error,
      helperText,
      };
      }
      if (parameter.validators.length > 0) { if (parameter.validators.length > 0) {
      parameter.validators.forEach((validator) => { parameter.validators.forEach((validator) => {
      const reg = new RegExp(validator.regex); const reg = new RegExp(validator.regex);
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment