dc/src/pages/halberd/components/addTask/index.js

import React, { Component } from 'react'
import { Modal, Button, Input, message, Upload } from 'antd'
import { FormItem } from 'wptpc-design'
import { yc } from '@/conf/config'
const { TextArea } = Input
class Index extends Component {
  state = {
    data: null,
    style: null,
    params: null
  };

  constructor (props) {
    super(props)

    let params = null
    if (props.params) {
      params = props.params
      params.header = props.params.header || []
    }
    this.state = {
      params: {
        detail: [],
        header: [],
        needNew: 0,
        name: '',
        getTokenUrl: '',
        ...params
      }

    }

    if (typeof props.getValue === 'function') {
      props.getValue(this.onOk)
    }
  }

  // 设置 header 属性字段
  setHeader (index, value, key) {
    const { params } = this.state
    if (params.header[index]) {
      params.header[index][key] = value
    }
    this.setState({
      params: params
    })
  }

  // 新增属性字段
  addHeader = () => {
    const { params } = this.state

    this.setState({
      params: {
        ...params,
        header: [
          ...params.header,
          {
            key: '',
            value: ''
          }
        ]
      }
    })
  };

  // 删除属性字段
  delHeader= (index) =>
    this.setState((prevState) => ({
      params: {
        ...prevState.params,
        header: prevState.params.header.filter((_, i) => i !== index)
      }
    }));

  // 设置属性字段
  setDetail (i, v, k) {
    const { params } = this.state
    if (params.detail[i]) {
      params.detail[i][k] = v
    }
    this.setState({
      params: params
    })
  }

  // 新增属性字段
  addDetail = () => {
    const { params } = this.state

    this.setState({
      params: {
        ...params,
        detail: [
          ...params.detail,
          {
            url: ''
          }
        ]
      }
    })
  };

  // 删除属性字段
  delDetail = (index) =>
    this.setState((prevState) => ({
      params: {
        ...prevState.params,
        detail: prevState.params.detail.filter((_, i) => i !== index)
      }
    }));

  // 统一change
  onParamsChange = (k, v) => {
    const { params } = this.state
    const newParams = { ...params }
    this.setState(
      {
        params: { ...newParams, [k]: v }
      }
    )
  };

  onOk = (cb) => {
    if (!this.getCheck()) {
      return
    }
    const { params = {} } = this.state
    const { detail = [] } = params

    // 接口内容空值判断
    if (!detail.length) {
      message.warning('压测 接口内容 不能为空!')
      return
    }
    // 接口 url 空值判断
    if (!detail.every((value) => value.url)) {
      message.warning('压测 接口 url 不能为空!')
      return
    }
    if (typeof this.props.onOk === 'function') { this.props.onOk({ ...params }) }
    if (typeof cb === 'function') {
      // eslint-disable-next-line standard/no-callback-literal
      cb({ ...params })
    }
  };

  render () {
    const {
      params = {}
    } = this.state
    const { onCancel, showModal, update } = this.props

    const detail = params.detail || []
    const header = params.header || []
    const settingProps = []

    const uploadProps = {
      showUploadList: false,
      name: 'file',
      action: `${yc}/schedule/task/import`,
      onChange: (info) => {
        if (info.file.status === 'done') {
          if (info.file.response.code !== 0) {
            return message.error(info.file.response.msg)
          }
          if (info.file.response.data.length > 0) {
            const { params } = this.state
            params.detail = info.file.response.data.map((url) => ({ url }))
            this.setState({
              params: params
            })
            message.success(`${info.file.name} 文件上传成功`)
          }
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败`)
        }
      }
    }
    if (update) {
      settingProps.push({
        label: '需要新压测数据',
        extra: '如果你不明白这个选项是什么，请不要修改~',
        extraInline: true,
        key: 'needNew',
        type: 'switch',
        checkedChildren: '是',
        unCheckedChildren: '否'
      })
    }
    this.formSetting = [
      ...settingProps,
      {
        label: '任务名',
        key: 'name',
        placeholder: '请输入压测任务名',
        isRequired: true,
        type: 'input'
      },
      {
        label: '登录 URL',
        key: 'getTokenUrl',
        placeholder: '请输入用户登录的 URL',
        isRequired: true,
        type: 'input'
      },
      {
        label: '自定义 header',
        key: 'header',
        isRequired: false,
        render: () => {
          return (
            <div>
              {header.map((d, i) => (
                <div
                  key={i}
                  style={{
                    display: 'flex',
                    height: '40px',
                    alignItems: 'center',
                    flexWrap: 'wrap'
                  }}
                >
                  <Input
                    value={d.key}
                    style={{ width: 220, marginRight: 10 }}
                    placeholder="键"
                    isRequired
                    onChange={(e) =>
                      this.setHeader(i, e.target.value, 'key')
                    }
                  />
                  <Input
                    value={d.value}
                    style={{ width: 220, marginRight: 10 }}
                    placeholder="值"
                    isRequired
                    onChange={(e) =>
                      this.setHeader(i, e.target.value, 'value')
                    }
                  />
                  <Button
                    type="dashed"
                    icon="minus"
                    style={{ marginRight: '2px' }}
                    onClick={() => this.delHeader(i)}
                  />
                  {i === header.length - 1 ? (
                    <>
                      <Button
                        type="dashed"
                        icon="plus"
                        onClick={() => this.addHeader()}
                      />
                    </>
                  ) : (
                    <>
                      <Button
                        type="dashed"
                        icon="plus"
                        style={{
                          opacity: '0'
                        }}
                      />
                    </>
                  )}
                </div>
              ))}
              {!header.length && (
                <Button
                  type="dashed"
                  icon="plus"
                  onClick={() => this.addHeader()}
                />
              )}
            </div>
          )
        }
      },
      {
        label: '压测接口',
        key: 'detail',
        isRequired: true,
        render: () => {
          return (
            <div>
              <div>
                <Button key="back" style={{ marginRight: 10 }}>
                  <a href={`${yc}/schedule/task/export`}>下载</a>
                </Button>
                <Upload {...uploadProps}>
                  <Button>导入</Button>
                </Upload>
              </div>
              {detail.map((d, i) => (
                <div
                  key={i}
                  style={{
                    display: 'flex',
                    // height: '70px',
                    margin: '5px 0',
                    alignItems: 'center',
                    flexWrap: 'wrap'
                  }}
                >
                  <TextArea
                    value={d.url}
                    style={{ width: 450 }}
                    autoSize={true}
                    placeholder="请输入压测的 URL"
                    isRequired
                    onChange={(e) =>
                      this.setDetail(i, e.target.value, 'url')
                    }
                  />
                  &nbsp;&nbsp;
                  {update && <span style={{ width: 130 }}>接口占比：{d.rate}&nbsp;&nbsp;</span>}
                  <Button
                    type="dashed"
                    icon="minus"
                    style={{ marginRight: '2px' }}
                    onClick={() => this.delDetail(i)}
                  />
                  {i === detail.length - 1 ? (
                    <>
                      <Button
                        type="dashed"
                        icon="plus"
                        onClick={() => this.addDetail()}
                      />
                    </>
                  ) : (
                    <>
                      <Button
                        type="dashed"
                        icon="plus"
                        style={{
                          opacity: '0'
                        }}
                      />
                    </>
                  )}
                </div>
              ))}
              {!detail.length && (
                <Button
                  type="dashed"
                  icon="plus"
                  onClick={() => this.addDetail()}
                />
              )}
            </div>
          )
        }
      }
    ]
    return (
      <Modal
        title={update ? '查看压测任务' : '添加压测任务'}
        visible={showModal}
        width={1100}
        onOk={this.onOk}
        okText={update ? '更新' : '确认'}
        onCancel={onCancel}
      >
        <FormItem
          getCheck={(cb) => {
            this.getCheck = cb
          }}
          onChange={this.onParamsChange}
          formSetting={this.formSetting}
          params={params}
        />
      </Modal>
    )
  }
}
export default Index