2020-11-18

king

2020-11-18 d3272e82652361e5e9bd045925222ef042b6731f

 src/menu/datasource/verifycard/index.jsx

@@ -18,6 +18,7 @@
const { Paragraph } = Typography

const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))

class VerifyCard extends Component {
  static propTpyes = {
@@ -41,34 +42,51 @@
      {
        title: '名称',
        dataIndex: 'label',
        width: '25%'
        inputType: 'input',
        editable: true,
        width: '28%'
      },
      {
        title: '字段',
        dataIndex: 'field',
        width: '25%'
        inputType: 'input',
        editable: true,
        width: '28%'
      },
      {
        title: '数据类型',
        dataIndex: 'datatype',
        inputType: 'select',
        options: [
          { value: 'Nvarchar(50)', text: 'Nvarchar(50)' },
          { value: 'Nvarchar(100)', text: 'Nvarchar(100)' },
          { value: 'Nvarchar(512)', text: 'Nvarchar(512)' },
          { value: 'Nvarchar(1024)', text: 'Nvarchar(1024)' },
          { value: 'Nvarchar(2048)', text: 'Nvarchar(2048)' },
          { value: 'Nvarchar(max)', text: 'Nvarchar(max)' },
          { value: 'Int', text: 'Int' },
          { value: 'Decimal(18,0)', text: 'Decimal(18,0)' },
          { value: 'Decimal(18,1)', text: 'Decimal(18,1)' },
          { value: 'Decimal(18,2)', text: 'Decimal(18,2)' },
          { value: 'Decimal(18,3)', text: 'Decimal(18,3)' },
          { value: 'Decimal(18,4)', text: 'Decimal(18,4)' },
          { value: 'Decimal(18,5)', text: 'Decimal(18,5)' },
          { value: 'Decimal(18,6)', text: 'Decimal(18,6)' },
          { value: 'Decimal(18,7)', text: 'Decimal(18,7)' },
          { value: 'Decimal(18,8)', text: 'Decimal(18,8)' },
          { value: 'Decimal(18,9)', text: 'Decimal(18,9)' },
          { value: 'Decimal(18,10)', text: 'Decimal(18,10)' },
          { value: 'Decimal(18,11)', text: 'Decimal(18,11)' },
          { value: 'Decimal(18,12)', text: 'Decimal(18,12)' },
          { value: 'Decimal(18,13)', text: 'Decimal(18,13)' },
          { value: 'Decimal(18,14)', text: 'Decimal(18,14)' },
          { value: 'Decimal(18,15)', text: 'Decimal(18,15)' },
          { value: 'Decimal(18,16)', text: 'Decimal(18,16)' },
          { value: 'Decimal(18,17)', text: 'Decimal(18,17)' },
          { value: 'Decimal(18,18)', text: 'Decimal(18,18)' },
        ],
        editable: true,
        width: '25%',
      },
      {
        title: '操作',
        align: 'center',
        width: '25%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'columns')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.deleteColumn(record)
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
            </Popconfirm>
          </div>)
      }
    ],
    scriptsColumns: [
@@ -105,7 +123,7 @@
        dataIndex: 'operation',
        render: (text, record) =>
          (<div>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
            <span className="operation-btn" title={this.props.dict['model.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span>
@@ -122,15 +140,77 @@
  }

  UNSAFE_componentWillMount() {
    const { config } = this.props
    const { config, mainSearch, menu } = this.props

    let search = config.search || []

    if (config.setting.useMSearch === 'true') { // 使用主搜索条件
      search = [...search, ...mainSearch]
    }

    let Marks = []
    let getcomponentmarks = (box, conf) => {
      if (!conf.parentId && box.Template === 'CustomPage') {
        box.components.forEach(item => {
          if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) {
            Marks.push(item.setting.varMark.toLowerCase())
          }
        })
      } else if (conf.parentId === box.parentId && conf.tabId === box.uuid) {
        box.components.forEach(item => {
          if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) {
            Marks.push(item.setting.varMark.toLowerCase())
          }
        })
      } else {
        box.components.forEach(item => {
          if (item.type !== 'tabs') return
  
          item.subtabs.forEach(tab => {
            getcomponentmarks(tab, conf)
          })
        })
      }
    }

    getcomponentmarks(menu, config)

    let _setting = fromJS(config.setting).toJS()

    // if (_setting.varMark === undefined) {
    //   _setting.varMark = this.getMark(Marks)
    // }

    this.setState({
      columns: fromJS(config.columns).toJS(),
      setting: fromJS(config.setting).toJS(),
      scripts: fromJS(config.scripts).toJS()
      setting: _setting,
      scripts: fromJS(config.scripts).toJS(),
      searches: search,
      varMarks: Marks
    })

    this.getsysScript()
  }

  getMark = (varMarks) => {
    let m = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
    let i = 0
    let n = 25

    let name = ''
    while (!name) {
      name = `${m[n]}${m[i]}_`
      if (varMarks.includes(name) && n > 0) {
        i++
        if (i >= 26) {
          n--
          i = 0
        }
        name = ''
      }
    }

    return name
  }

  getsysScript = () => {
@@ -177,40 +257,21 @@
  }

  columnChange = (values) => {
    let columns = fromJS(this.state.columns).toJS()
    const { columns } = this.state

    if (values.uuid) {
      columns = columns.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      values.uuid = Utils.getuuid()
      columns.push(values)
    }
    values.uuid = Utils.getuuid()

    this.setState({ columns })
  }

  deleteColumn = (record) => {
    this.setState({ columns: this.state.columns.filter(item => item.uuid !== record.uuid) })
    this.setState({ columns: [...columns, values] })
  }

  deleteScript = (record) => {
    this.setState({ scripts: this.state.scripts.filter(item => item.uuid !== record.uuid) })
  }

  handleEdit = (record, type) => {
    if (type === 'scripts') {
      this.scriptsForm.edit(record)
    } else if (type === 'columns') {
      this.contrastForm.edit(record)
    }

    let node = document.getElementById('model-verify-card-box-tab').parentNode
  handleEdit = (record) => {
    this.scriptsForm.edit(record)
    
    let node = document.getElementById('model-data-source-wrap').parentNode

    if (node && node.scrollTop) {
      let inter = Math.ceil(node.scrollTop / 10)
@@ -305,12 +366,32 @@
  }

  changeTab = (val) => {
    const { activeKey } = this.state
    const { config, mainSearch } = this.props
    const { activeKey, varMarks } = this.state

    this.setState({loading: true})
    if (activeKey === 'setting') {
      this.settingForm.handleConfirm().then(res => {
        let search = config.search || []

        if (res.useMSearch === 'true') { // 使用主搜索条件
          search = [...search, ...mainSearch]
        }

        if (res.varMark && varMarks.includes(res.varMark.toLowerCase())) {
          notification.warning({
            top: 92,
            message: '变量标识不可重复！',
            duration: 5
          })
          this.setState({
            loading: false
          })
          return
        }

        this.setState({
          searches: search,
          setting: res
        }, () => {
          this.sqlverify(() => { // 验证成功
@@ -320,6 +401,7 @@
            })
          }, () => {             // 验证失败
            this.setState({
              activeKey: val,
              loading: false
            })
          }, true)
@@ -336,7 +418,7 @@
      let _loading = false
      if (this.scriptsForm && this.scriptsForm.state.editItem) {
        _loading = true
      } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
      } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') {
        _loading = true
      }

@@ -356,27 +438,34 @@
        activeKey: val,
        loading: false
      })

      // this.sqlverify(() => { // 验证成功
      //   this.setState({
      //     activeKey: val,
      //     loading: false
      //   })
      // }, () => {             // 验证失败
      //   this.setState({
      //     loading: false
      //   })
      // }, true)
    }
  }

  submitDataSource = () => {
    const { activeKey, setting, columns, scripts } = this.state
    const { config, mainSearch } = this.props
    const { activeKey, setting, columns, scripts, varMarks } = this.state

    return new Promise((resolve, reject) => {
      if (activeKey === 'setting') {
        this.settingForm.handleConfirm().then(res => {
          let search = config.search || []

          if (res.useMSearch === 'true') { // 使用主搜索条件
            search = [...search, ...mainSearch]
          }

          if (res.varMark && varMarks.includes(res.varMark.toLowerCase())) {
            notification.warning({
              top: 92,
              message: '变量标识不可重复！',
              duration: 5
            })
            reject()
            return
          }

          this.setState({
            searches: search,
            setting: res
          }, () => {
            this.sqlverify(() => { resolve({setting: res, columns, scripts }) }, reject, false)
@@ -390,7 +479,7 @@
        let _loading = false
        if (this.scriptsForm && this.scriptsForm.state.editItem) {
          _loading = true
        } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
        } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') {
          _loading = true
        }

@@ -410,8 +499,7 @@
  }

  sqlverify = (resolve, reject, change = false, testScripts) => {
    const { config } = this.props
    const { columns, setting, scripts } = this.state
    const { columns, setting, scripts, searches } = this.state

    let _scripts = scripts.filter(item => item.status !== 'false')

@@ -429,9 +517,21 @@
    }

    if ((setting.interType === 'system' && setting.execute !== 'false') || _scripts.length > 0) {
      let result = SettingUtils.getDebugSql(setting, _scripts, columns, searches)

      if (result.error) {
        notification.warning({
          top: 92,
          message: result.error,
          duration: 5
        })
        reject()
        return
      }

      let param = {
        func: 's_debug_sql',
        LText: SettingUtils.getDebugSql(setting, _scripts, columns, config.search)
        LText: result.sql
      }
      param.LText = Utils.formatOptions(param.LText)
      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
@@ -469,10 +569,10 @@

  render() {
    const { menu, config } = this.props
    const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading } = this.state
    const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches } = this.state

    return (
      <div id="model-verify-card-box-tab">
      <div id="model-data-source-wrap">
        {loading && <Spin size="large" />}
        <Tabs activeKey={activeKey} className="verify-card-box" onChange={this.changeTab}>
          <TabPane tab="数据源" key="setting">
@@ -487,30 +587,24 @@
            />
          </TabPane>
          <TabPane tab="字段集" key="columns">
            <ColForm
              dict={this.props.dict}
              columnChange={this.columnChange}
              wrappedComponentRef={(inst) => this.contrastForm = inst}
            />
            <ColForm dict={this.props.dict} columnChange={this.columnChange}/>
            <FieldsComponent
              config={{...config, columns}}
              type="fields"
              tableFields={menu.tableFields}
              updatefield={this.updatefields}
            />
            <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              dataSource={columns}
              columns={colColumns}
              pagination={false}
            />
            <EditTable data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/>
          </TabPane>
          <TabPane tab="自定义脚本" key="scripts">
          <TabPane tab={
            <span>
              自定义脚本
              {scripts.length ? <span className="count-tip">{scripts.length}</span> : null}
            </span>
          } key="scripts">
            <CustomScriptsForm
              setting={setting}
              searches={config.search}
              searches={searches}
              initsql={this.state.initsql}
              dict={this.props.dict}
              customScripts={scripts}