antd#message JavaScript Examples

handleError = (error) => {
    console.log(error)
    if ("Network Error" === error.toString()) {
        message.error('网络异常');
        return false;
    }
    if (error.response !== undefined && error.response.status === 401) {
        window.location.href = '#/login';
        return false;
    }

    if (error.response !== undefined) {
        let data = error.response.data;
        message.error(`${data.message}`, 10);
        return false;
    }
    return true;
}

txResHandler = ({ status }) =>
  status.isFinalized
    ? message.success(`? Finalized. Block hash: ${status.asFinalized.toString()}`)
    : message.info(`Current transaction status: ${status.type}`)

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

// 员工详情的模态框
    onhandleUserInfo(title){
        // 员工详情需先判断是否选定员工了
        if(this.state.selectedRowKeys.length==1){
            // console.log(this.state.selectedRows);
            // 对其赋值
            var selectedRow = this.state.selectedRows;
            let data = Object.assign({},this.state.userInfo,{username:selectedRow[0].username,sex:selectedRow[0].sex,state:selectedRow[0].state,birthday:selectedRow[0].birthday,address:selectedRow[0].address})
            console.log(selectedRow[0])
            this.setState({                
                userInfo:data,
                title:title,
                visible:true,
                modifiable:false
            })
            // console.log(this.state.userInfo);

        }else if(this.state.selectedRowKeys.length>1){
            message.error("请只选择一个员工来查看")
        }else if(this.state.selectedRowKeys.length<1){
            message.error("请选择一个要查看的员工");
        }   
        
    }

editCategoryVisibility(visibility, categories) {
        fetch(window.ipAddress + "/v1/challenge/edit/categoryVisibility", {
            method: 'post',
            headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
            body: JSON.stringify({
                "visibility": visibility,
                "category": categories,
            })
        }).then((results) => {
            return results.json(); //return data in JSON (since its JSON data)
        }).then((data) => {
            //console.log(data)
            if (data.success === true) {
                message.success("The visibility of (" + categories.join(", ") + ") categories has been updated")
            }
            else {
                message.error({ content: "Oops. Unknown error" })
            }
            this.setState({ transferDisabled: false })
            this.fillTableData()


        }).catch((error) => {
            console.log(error)
            message.error({ content: "Oops. There was an issue connecting with the server" });
        })
    }

_fetchLoginByTicket = async ticket => new Promise((resolve) => {
  loginByTicket({ ticket }, (response) => {
    resolve(response.data)
  }, (response) => {
    const obj = parseQueryString(window.location.href)
    console.log(obj)
    if (obj.ticket || obj.mode) {
      message.info('登录过期或服务不可用')
    } else {
      hashHistory.replace('/login')
    }
  })
})

_getValidateMessage(errorType, validate) {
        let errorMessage = '';
        validate.map((validateItem) => {
            if (validateItem.type === errorType) {
                errorMessage = validateItem.message;
                return false;
            }
        });
        return errorMessage;
    }

success = (msg, dur = 3) => {
  message.success({
    content: msg,
    style: {
      style: {
        margin: "10px auto",
      },
    },
    duration: dur,
  });
}

customUpload = async info => {
  const { file } = info;

  // create formData instance
  const bodyFormData = new FormData();
  bodyFormData.append("file", file);
  const user = getUser();
  bodyFormData.append("user", user);

  uploadFile(bodyFormData)
    .then(res => {
      console.log(res);
      message.success(`${info.file.name} file uploaded successfully.`);
    })
    .catch(error => {
      console.log(error);
      message.error(`${info.file.name} file upload failed.`);
    });
}

componentDidMount() {
    this.setState({ loading: true });
    request(`/backup/getCaseDiff`, {
      method: 'GET',
      params: {
        caseId1: this.props.match.params.caseId1,
        caseId2: this.props.match.params.caseId2,
      },
    }).then(res => {
      this.setState({ loading: false });
      if (res.code === 200) {
        this.editorNode.setEditerData(res.data.content.root);
        this.setState({ info: res.data.backupinfo });
      } else {
        message.error(res.msg);
      }
    });
  }

function onLexError(editor, err) {
  console.debug(err);
  decorations = editor.deltaDecorations(
    decorations,
    err.map((e) => {
      return {
        range: new monaco.Range(e.line, e.column, e.line, e.column + e.length),
        options: {
          hoverMessage: [{ value: e.message }],
          inlineClassName: 'editor-error-line',
        },
      };
    }),
  );
}

content = (
    <div>
        <Alert style={{marginTop: 5, marginBottom: 10}} message={<FormattedMessage id="delay-message-information1"/>} type="info" showIcon/>
        <p><FormattedMessage id="delay-message-information2"/></p>
        <p><FormattedMessage id="delay-message-information3"/></p>
        <pre>
            {JSON.stringify({
                "level": 0,
                "topic": "target",
                "key": "key",
                "value": "value"
            }, null, 4)}
        </pre>
    </div>
)

handleError = (error) => {
    if ("Network Error" === error.toString()) {
        message.error('网络异常');
        return false;
    }
    if (error.response !== undefined && error.response.status === 401) {
        window.location.href = '#/login';
        return false;
    }
    if (error.response !== undefined) {
        message.error(error.response.data.message);
        return false;
    }
    return true;
}

componentDidMount() {
    axios.get('https://www.easy-mock.com/mock/5c2851e3d84c733cb500c3b9/yapi/versions').then(req => {
      if (req.status === 200) {
        this.setState({ newVersion: req.data.data[0] });
      } else {
        message.error('无法获取新版本信息！');
      }
    });
  }

// Notify user if offline now
window.addEventListener('sw.offline', () => {
  message.warning(formatMessage({ id: 'app.pwa.offline' }));
});

render() {
    const { currentUser, fetchingNotices, onNoticeVisibleChange } = this.props;
    const noticeData = this.getNoticeData();
    const unreadMsg = this.getUnreadData(noticeData);
    return (
      <NoticeIcon
        className={styles.action}
        count={currentUser && currentUser.unreadCount}
        onItemClick={item => {
          this.changeReadState(item);
        }}
        loading={fetchingNotices}
        clearText="清空"
        viewMoreText="查看更多"
        onClear={this.handleNoticeClear}
        onPopupVisibleChange={onNoticeVisibleChange}
        onViewMore={() => message.info('Click on view more')}
        clearClose
      >
        <NoticeIcon.Tab
          tabKey="notification"
          count={unreadMsg.notification}
          list={noticeData.notification}
          title="通知"
          emptyText="你已查看所有通知"
          showViewMore
        />
        <NoticeIcon.Tab
          tabKey="message"
          count={unreadMsg.message}
          list={noticeData.message}
          title="消息"
          emptyText="您已读完所有消息"
          showViewMore
        />
        <NoticeIcon.Tab
          tabKey="event"
          title="待办"
          emptyText="你已完成所有待办"
          count={unreadMsg.event}
          list={noticeData.event}
          showViewMore
        />
      </NoticeIcon>
    );
  }

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

UploadChallengesForm = (props) => {
    const [form] = Form.useForm();
    const [fileList, updateFileList] = useState([])
    const [editLoading, updateEditLoading] = useState(false)

    return (
        <Form
            form={form}
            onFinish={async (values) => {
                updateEditLoading(true)
                let fileData = await fileList[0].originFileObj.text()
                try {
                    JSON.parse(fileData)
                }
                catch (e) {
                    console.error(e)
                    message.error("Invalid json.")
                    updateEditLoading(false)
                    return false
                }

                await fetch(window.ipAddress + "/v1/challenge/upload", {
                    method: 'post',
                    headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
                    body: JSON.stringify({
                        "challenges": fileData
                    })
                }).then((results) => {
                    return results.json(); //return data in JSON (since its JSON data)
                }).then((data) => {
                    if (data.success === true) {
                        message.success({ content: "Uploaded challenges successfully" })
                        props.closeUploadChallenges()
                        props.handleRefresh()
                    }
                    else if (data.error === "failed-insert") {
                        message.warn("Some challenges already exist and were not inserted. Please delete the challenges to insert from the backup.", 3)
                        message.warn("The challenges are: [" + data.failedInsert.join(" ,") + "]", 5)
                    }
                    else {
                        message.error({ content: "Oops. Unknown error" })
                    }
                }).catch((error) => {
                    console.log(error)
                    message.error({ content: "Oops. There was an issue connecting with the server" });
                })

                updateEditLoading(false)
            }}
        >
            <Form.Item
                name="challenges"
            >

                <Dragger
                    fileList={fileList}
                    disabled={editLoading}
                    accept=".json"
                    maxCount={1}
                    onChange={(file) => {
                        updateFileList(file.fileList)
                    }}
                    beforeUpload={(file) => {
                        return false
                    }}>
                    <h4>Drag and drop a challenge backup file (.json) to upload challenge(s).</h4>
                </Dragger>
            </Form.Item>
            <span>Please note that hint purchases and solves are <b>not brought over</b> as this is equivalent to "creating a new challenge from a backup"</span>

            <Button icon={<UploadOutlined/>} type="primary" htmlType="submit" style={{ marginBottom: "1.5vh", marginTop: "3vh" }} loading={editLoading}>Upload Challenge(s)</Button>

        </Form>
    );
}

DownloadTables = ({ tables }) => {
  const [tableName, setTableName] = useState('');
  const { info, error } = message;

  const [loading, setLoading] = useState(false);

  const handleSelectTable = (table) => {
    setTableName(table);
    info(table);
  };

  async function handleDownload() {
    setLoading(true);
    try {
      const response = await api.post('/recoverFile/', {
        selectedTable: tableName,
        token: localStorage.getItem('token')
      });

      if (response.status === 201) {
        window.location.href = `http://localhost:5000/downloadFile/${tableName}`;
      }

      info(`Baixando table ${tableName}`);
    } catch (err) {
      error('Algo deu errado');
    }
    setLoading(false);
  }

  return (
    <Container>
      <h1>
        TABELAS DISPONÍVEIS
      </h1>
      {loading && <Spin size="large" />}
      <section>
        <ul>
          {tables.map((table) => (
            <li onClick={() => handleSelectTable(table)} key={table}>
              {table}
            </li>
          ))}
        </ul>
      </section>

      <button type="button" onClick={handleDownload}>
        BAIXAR
        {' '}
        <br />
        {' '}
        SHAPEFILE
      </button>
    </Container>
  );
}

click = () => {
  if (!screenfull.isEnabled) {
    message.warning("you browser can not work");
    return false;
  }
  screenfull.toggle();
}

render() {
    const { getFieldDecorator } = this.props.form
    const { id, visiable } = this.state
    return (
      <Modal
        title={id ? '编辑维护组' : '添加维护组'}
        visible={visiable}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        maskClosable={false}
      >
        <Form {...formItemLayout} layout="horizontal">
          <Form.Item label="维护时间段" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_start', {
                rules: [{ type: 'object', required: true, message: 'Please select time!' }],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_end', {
                rules: [
                  { type: 'object', required: true, message: 'Please select time!' },
                ],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="维护月" required>
            {getFieldDecorator('month', {
              rules: [
                { type: 'array', required: true, message: 'Please select month' },
              ]
            })(<Select mode="multiple">
              { new Array(12).fill(1).map((item, index) => (<Option value={index + 1}>{index + 1}</Option>))}
            </Select>)}
          </Form.Item>
          <Form.Item label="维护日期" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_start', {
                rules: [{ required: true, message: 'Please input day!' }],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_end', {
                rules: [
                  { required: true, message: 'Please input day!' },
                  { validator: this.dayEndValid },
                ],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="有效期">
            {getFieldDecorator('valid', {
              rules: [
                { required: true, message: '请填写有效期' },
              ],
            })(<DatePicker
              style={{ width: '100%' }}
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              format="YYYY-MM-DD HH:mm:ss"
              placeholder={['请填写有效期']}
            />)}
          </Form.Item>
          <Form.Item label="机器列表">
            {getFieldDecorator('hosts', {
              rules: [
                { required: true, message: '请输入成员' },
              ],
            })(<Input.TextArea autoSize={{ minRows: 2 }} />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

updateTheme = primaryColor => {
  // Don't compile less in production!
  // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
  if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION !== 'site') {
    return;
  }
  // Determine if the component is remounted
  if (!primaryColor) {
    return;
  }
  const hideMessage = message.loading('正在编译主题！', 0);
  function buildIt() {
    if (!window.less) {
      return;
    }
    setTimeout(() => {
      window.less
        .modifyVars({
          '@primary-color': primaryColor,
        })
        .then(() => {
          hideMessage();
        })
        .catch(() => {
          message.error('Failed to update theme');
          hideMessage();
        });
    }, 200);
  }
  if (!lessNodesAppended) {
    // insert less.js and color.less
    const lessStyleNode = document.createElement('link');
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    lessStyleNode.setAttribute('href', '/color.less');
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
    lessNodesAppended = true;
  } else {
    buildIt();
  }
}

export default function ViewSchemaModal(props) {
    const {messages, visible, modalCloseHandler, formSchema, popupContainer} = props;
    return (
        <Modal
            visible={visible}
            title={messages[getMessageId('xformSchemaModalTitle')]}
            width={600}
            wrapClassName="app-xform-builder-view-schema-modal"
            onCancel={() => {
                modalCloseHandler()
            }}
            footer={([
                <CopyToClipboard
                    text={JSON.stringify(formSchema, undefined, 4)}
                    onCopy={() => {
                        message.success(messages[getMessageId('xformSchemaModalCopySuccessTip')]);
                    }}
                >
                    <Button
                        type="default"
                    >
                        {messages[getMessageId('xformSchemaModalCopy')]}
                    </Button>
                </CopyToClipboard>,
                <Button
                    type="default"
                    onClick={() => {
                        modalCloseHandler();
                    }}
                >
                    {messages[getMessageId('xformSchemaModalCancel')]}
                </Button>
            ])}
            getContainer={popupContainer}
        >
            <TextArea
                rows={10}
                readOnly
                value={JSON.stringify(formSchema, undefined, 4)}
            />
        </Modal>
    );
}

function UserProfile({ loading, data, location }) {
  let editProfile = false;
  if (location) {
    const { state } = location;
    if (state) {
      editProfile = state.editProfile;
      message.warning('Update your profile to continue');
    }
  }
  const Tracks = [
    {
      icon: <i className="far fa-check-circle"></i>,
      title: 'Frontend Development',
    },
    {
      icon: <i className="far fa-check-circle"></i>,
      title: 'Backend Development',
    },
    {
      icon: <i className="far fa-check-circle"></i>,
      title: 'Mobile Development',
    },
    {
      icon: <i className="far fa-check-circle"></i>,
      title: 'Desktop Development',
    },
    {
      icon: <i className="far fa-check-circle"></i>,
      title: 'Ui/UX',
    },
  ];
  console.log(Tracks);

  const SocialMedia = [
    {
      icon: <i className="fab fa-twitter"></i>,
      title: 'Twitter',
    },
    {
      icon: <i className="fab fa-dribbble"></i>,
      title: 'Dribble',
    },
    {
      icon: <i className="fab fa-behance"></i>,
      title: 'Behance',
    },
    {
      icon: <i className="fab fa-linkedin-in"></i>,
      title: 'LinkedIn',
    },
    {
      icon: <i className="fab fa-github"></i>,
      title: 'Github',
    },
  ];

  return (
    <UserProfileStyled>
      <UserCard data={data} mode="mentee" editProfile={editProfile} />
      <div className="public__info__grid">
        {/* <InfoCardBig header="Tracks Completed" data={Tracks} /> */}
        <InfoCardBig header="Social Media" data={SocialMedia} />
      </div>
    </UserProfileStyled>
  );
}

ComponentsModel = {
  namespace: 'components',
  state: {
    personalList: [],
    publicList: [],
    orginzationList: [],
    filePath: '',
  },
  effects: {
    *getPersonalComponents(_, { call, put }) {
      const response = yield call(getPersonalComponents);
      if (response && response.code == 200) {
        let payload = response.data;
        yield put({
          type: 'savePersonalComponents',
          payload,
        });
      } else {
        message.error(response.msg);
      }
    },
    *getPublicComponents(_, { call, put }) {
      const response = yield call(getPublicComponents);
      if (response && response.code == 200) {
        let payload = response.data;
        yield put({
          type: 'savePublicComponents',
          payload,
        });
      } else {
        message.error(response.msg);
      }
    },
    *getOrginzationComponents(_, { call, put }) {
      const response = yield call(getOrginzationComponents);
      if (response && response.code == 200) {
        let payload = response.data;
        yield put({
          type: 'saveOrginzationComponents',
          payload,
        });
      } else {
        message.error(response.msg);
      }
    },
    *uploadFile({ payload }, { call, put }) {
      const response = yield call(uploadFiles, payload);
      if (response && response.code == 200) {
        let payload = response.data.filename;
        yield put({
          type: 'saveFileImg',
          payload,
        });
        return payload;
      } else {
        message.error(response.msg);
      }
    },
  },
  reducers: {
    savePersonalComponents(state, { payload }) {
      return { ...state, personalList: payload };
    },
    savePublicComponents(state, { payload }) {
      return { ...state, publicList: payload };
    },
    saveOrginzationComponents(state, { payload }) {
      return { ...state, orginzationList: payload };
    },
    saveFileImg(state, { payload }) {
      return { ...state, filePath: payload };
    },
  },
}

// 确认新建
  saveEditerData(values) {
    let requirementId = values.requirementId;
    let params = {
      productLineId: Number(this.props.productId),
      creator: getCookies('username'),
      caseType: 0,
      caseContent: initData,
      title: values.case,
      channel: 1,
      bizId: values.bizId ? values.bizId.join(',') : '-1',
      id: this.state.operate != 'add' ? this.props.data.id : '',
      requirementId,
      description: values.description,
    };

    // 判断是否上传了用例集文件
    let caseFile = this.state.caseFile;

    let url = `${this.props.doneApiPrefix}/case/create`;
    if (caseFile) {
      if (/(?:xmind)$/i.test(caseFile.name)) {
        url = `${this.props.doneApiPrefix}/file/import`;
      } else if (/(?:xls|xlsx)$/i.test(caseFile.name)) {
        url = `${this.props.doneApiPrefix}/file/importExcel`;
      } 
    
      params = new FormData();
      params.append('file', caseFile);
      params.append('creator', getCookies('username'));
      params.append('title', values.case);
      params.append('productLineId', Number(this.props.productId));
      params.append('requirementId', requirementId);

      params.append('description', values.description);
      params.append('channel', 1);
      params.append('bizId', values.bizId ? values.bizId.join(',') : '-1');
    }
    request(url, { method: 'POST', body: params }).then(res => {
      if (res.code == 200) {
        message.success(
          this.state.operate == 'add'
            ? '新建测试用例集成功'
            : '复制测试用例集成功',
        );
        if (this.state.operate === 'add') {
          let urls = `${this.props.baseUrl}/caseManager/${this.props.productId}/${res.data}/undefined/0`;
          router.push(urls);
        }

        this.props.onClose(false);
        this.props.onUpdate && this.props.onUpdate();
      } else {
        message.error(res.msg);
      }
    });
  }

function ModalEdit(props) {
  const { visible, onOk } = props;
  const { id, sub_path, title, is_rewrite, proxy_addr } = props.resource;
  const [form] = Form.useForm();

  useEffect(() => {
    if (!visible) {
      return;
    }
    form.resetFields();
  }, [visible]);

  return (
    <Modal
      width={700}
      visible={props.visible}
      title={'编辑'}
      onOk={() => {
        form.submit();
      }}
      onCancel={() => props.showModalEdit({ visible: false })}
    >
      <Form
        form={form}
        labelCol={{ span: 3 }}
        onFinish={(fields) => {
          createItem({
            id: id,
            ...fields,
            is_rewrite: fields.is_rewrite ? 1 : 0,
          }).then((r) => {
            if (r.code !== 0) {
              message.error('更新失败:' + r.msg);
              return;
            }
            if (props.onOk) props.onOk();
            message.success('更新成功');
            props.showModalEdit(false);
            return;
          });
        }}
      >
        <Form.Item
          label={'名称'}
          name={'title'}
          rules={[{ required: true, message: '请输入名称' }]}
          initialValue={title}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'子路径'}
          name={'sub_path'}
          rules={[{ required: true, message: '请输入子路径' }]}
          initialValue={sub_path}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'代理路径'}
          name={'proxy_addr'}
          rules={[{ required: true, message: '请输入代理路径' }]}
          initialValue={proxy_addr}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'是否重写'}
          name={'is_rewrite'}
          valuePropName="checked"
          rules={[{ required: true, message: '选择是否重写' }]}
          initialValue={is_rewrite === 1}
        >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Form.Item>
      </Form>
    </Modal>
  );
}

async delete(id) {
        await request.delete('/clusters/' + id);
        message.success('success');
        await this.loadTableData(this.state.queryParams);
    }