2021-03-23

king

2021-03-23 a8e94242166881639cecf3809e45ca527233ebd7

 src/mob/datasource/index.jsx

@@ -9,6 +9,8 @@
import VerifyCard from './verifycard'
import './index.scss'

const { confirm } = Modal

class DataSource extends Component {
  static propTpyes = {
    config: PropTypes.any,
@@ -16,11 +18,18 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    sourcelist: [],
    searches: [],
    visible: false,
    loading: false,
    source: null
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props

    this.setState({sourcelist: config.sourcelist || []})
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
@@ -50,19 +59,66 @@
    })
  }

  closeDataSource = () => {
  closeDataSource = (item) => {
    const { config } = this.props
    let sourcelist = fromJS(this.state.sourcelist).toJS()
    const _this = this

    sourcelist = sourcelist.filter(cell => cell.uuid !== item.uuid)

    confirm({
      title: '确定删除数据源吗？',
      content: '',
      onOk() {
        _this.setState({sourcelist})
        _this.props.updateConfig({...config, sourcelist: fromJS(sourcelist).toJS()})
      },
      onCancel() {}
    })
  }

  verifySubmit = () => {
    const { config } = this.props
    let sourcelist = fromJS(this.state.sourcelist).toJS()

    this.setState({loading: true})
    this.verifyRef.submitDataSource().then((res) => {
      let isadd = true
      sourcelist = sourcelist.map(item => {
        if (item.uuid === res.uuid) {
          isadd = false
          return res
        } else {
          return item
        }
      })

      if (isadd) {
        sourcelist.push(res)
      }
      
      this.setState({loading: false, visible: false, sourcelist})
      this.props.updateConfig({...config, sourcelist: fromJS(sourcelist).toJS()})
    }, () => {
      this.setState({loading: false})
    })
  }

  render () {
    const { sourcelist, visible, source, dict, searches } = this.state
    const { config } = this.props
    const { sourcelist, visible, source, dict, searches, loading } = this.state

    let addable = true
    if (config.components && config.components.length === 1 && config.components[0].type === 'login') {
      addable = false
    }

    return (
      <div className="mob-datasource">
        {sourcelist.map(item => (
          <span className="mob-input-group-wrapper" key={item.uuid}>
            <span className="mob-input-wrapper">
              <span className="mob-input-value">{item.label}</span>
              <span className="mob-input-value">{item.setting.name}</span>
              <span className="mob-input-group-addon">
                <Icon type="setting" onClick={() => this.editDataSource(item)} />
                <Icon type="close" onClick={() => this.closeDataSource(item)} />
@@ -70,23 +126,22 @@
            </span>
          </span>
        ))}
        <span className="mob-input-group-wrapper">
        {addable ? <span className="mob-input-group-wrapper">
          <span className="mob-input-wrapper">
            <span className="mob-input-insert" onClick={() => this.editDataSource()}>
              <Icon type="plus" />
            </span>
          </span>
        </span>
        </span> : null}
        <Modal
          wrapClassName="mob-datasource-verify-modal"
          wrapClassName="mob-datasource-verify-modal popview-modal"
          title={'数据源配置'}
          visible={visible}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['mob.submit']}
          cancelText={dict['mob.cancel']}
          onOk={this.verifySubmit}
          confirmLoading={loading}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >