2020-09-09

king

2020-09-09 2a347c8d91d6962f4302f0553c55a3b9f743baa5

 src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Tabs, Table, Popconfirm, Icon, notification, Modal, Typography, Spin } from 'antd'
import { Form, Tabs, Table, Popconfirm, Icon, notification, Modal, Spin } from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -9,13 +9,12 @@

import asyncComponent from '@/utils/asyncComponent'
import ColForm from './columnform'
import CustomScriptsForm from './customscript'
import CustomScript from '@/templates/zshare/customscript'
import SettingForm from './settingform'
import SettingUtils from './utils'
import './index.scss'

const { TabPane } = Tabs
const { Paragraph } = Typography

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

@@ -33,13 +32,8 @@
    columns: [],
    activeKey: 'setting',
    loading: false,
    initsql: '',          // sql验证时变量声明及赋值
    usefulfields: '',
    defaultsql: '',         // 默认Sql
    systemScripts: [{
      name: '默认sql',
      value: ''
    }],
    colColumns: [
      {
        title: '名称',
@@ -63,59 +57,11 @@
        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>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} 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: [
      {
        title: 'SQL',
        dataIndex: 'sql',
        width: '60%',
        render: (text) => (
          <Paragraph copyable ellipsis={{ rows: 5, expandable: true }}>{text}</Paragraph>
        )
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: '20%',
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
          )
      },
      {
        title: '操作',
        align: 'center',
        width: '20%',
        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" 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>
            <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.deleteScript(record)
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
            </Popconfirm>
@@ -127,59 +73,10 @@
  UNSAFE_componentWillMount() {
    const { config } = this.props

    let _setting = fromJS(config.setting).toJS()
    if (_setting.interType === 'inner' && !_setting.innerFunc) {
      _setting.interType = 'system'
    }

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

    this.getsysScript()
  }

  getsysScript = () => {
    let _scriptSql = `Select distinct func+Remark as funcname,longparam, s.Sort from  s_custom_script s inner join (select OpenID from sapp where ID=@Appkey@) p on s.openid = case when s.appkey='' then s.openid else p.OpenID end order by s.Sort`

    _scriptSql = Utils.formatOptions(_scriptSql)

    let _sParam = {
      func: 'sPC_Get_SelectedList',
      LText: _scriptSql,
      obj_name: 'data',
      arr_field: 'funcname,longparam'
    }
    
    _sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    _sParam.secretkey = Utils.encrypt(_sParam.LText, _sParam.timestamp)
    _sParam.open_key = Utils.encryptOpenKey(_sParam.secretkey, _sParam.timestamp) // 云端数据验证
    
    Api.getSystemConfig(_sParam).then(res => {
      if (res.status) {
        let _scripts = []

        res.data.forEach(item => {
          let _item = {
            name: item.funcname,
            value: Utils.UnformatOptions(item.longparam)
          }

          _scripts.push(_item)
        })

        this.setState({
          systemScripts: [...this.state.systemScripts, ..._scripts]
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
    })
  }

@@ -206,18 +103,10 @@
    this.setState({ columns: this.state.columns.filter(item => item.uuid !== record.uuid) })
  }

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

  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
    let node = document.getElementById('model-setting-form-body').parentNode

    if (node && node.scrollTop) {
      let inter = Math.ceil(node.scrollTop / 10)
@@ -233,88 +122,9 @@
    }
  }

  handleStatus = (record) => {
    let scripts = fromJS(this.state.scripts).toJS()
    record.status = record.status === 'false' ? 'true' : 'false'

    scripts = scripts.map(item => {
      if (item.uuid === record.uuid) {
        return record
      } else {
        return item
      }
    })

    this.setState({ scripts })
  }

  handleUpDown = (record, direction) => {
    let scripts = fromJS(this.state.scripts).toJS()
    let index = 0

    scripts = scripts.filter((item, i) => {
      if (item.uuid === record.uuid) {
        index = i
      }

      return item.uuid !== record.uuid
    })
    if ((index === 0 && direction === 'up') || (index === scripts.length && direction === 'down')) {
      return
    }

    if (direction === 'up') {
      scripts.splice(index - 1, 0, record)
    } else {
      scripts.splice(index + 1, 0, record)
    }

    this.setState({ scripts })
  }

  scriptsChange = (values) => {
    let scripts = fromJS(this.state.scripts).toJS()

    if (values.uuid) {
      scripts = scripts.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      scripts.push(values)
    }

    return new Promise((resolve, reject) => {
      this.sqlverify(resolve, reject, false, scripts)
    })
  }

  scriptSubmit = (values) => {
    let scripts = fromJS(this.state.scripts).toJS()

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

    this.setState({ scripts })
  }

  changeTab = (val) => {
    const { activeKey, setting } = this.state

    this.setState({loading: true})
    if (activeKey === 'setting') {
      this.settingForm.handleConfirm().then(res => {
        if (res.interType !== 'system' && val === 'scripts') {
@@ -323,7 +133,6 @@
            message: '使用系统接口时，才可以设置自定义脚本！',
            duration: 5
          })
          this.setState({loading: false})
          return
        }

@@ -331,6 +140,8 @@
          setting: res
        }, () => {
          if (res.interType === 'system') { // 系统接口，sql验证
            this.setState({loading: true})

            this.sqlverify(() => { // 验证成功
              this.setState({
                activeKey: val,
@@ -343,13 +154,10 @@
            }, activeKey)
          } else {
            this.setState({
              activeKey: val,
              loading: false
              activeKey: val
            })
          }
        })
      }, () => {
        this.setState({loading: false})
      })
    } else if (activeKey === 'columns') {
      if (setting.interType !== 'system' && val === 'scripts') {
@@ -358,26 +166,12 @@
          message: '使用系统接口时，才可以设置自定义脚本！',
          duration: 5
        })
        this.setState({loading: false})
        return
      } else if (setting.interType !== 'system') {
        this.setState({
          activeKey: val,
          loading: false
        })
        return
      }

      this.sqlverify(() => { // 验证成功
        this.setState({
          activeKey: val,
          loading: false
        })
      }, () => {             // 验证失败
        this.setState({
          loading: false
        })
      }, activeKey)
      this.setState({
        activeKey: val
      })
    } else if (activeKey === 'scripts') {
      let _loading = false
      if (this.scriptsForm && this.scriptsForm.state.editItem) {
@@ -392,12 +186,10 @@
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          duration: 5
        })
        this.setState({
          loading: false
        })
        return
      }

      this.setState({loading: true})
      this.sqlverify(() => { // 验证成功
        this.setState({
          activeKey: val,
@@ -453,6 +245,12 @@
  sqlverify = (resolve, reject, type, testScripts) => {
    const { searches } = this.props
    const { columns, setting, scripts } = this.state

    if (setting.interType !== 'system') { // 不使用系统接口时，不需要sql验证
      resolve()
      return
    }

    let _scripts = []

    if (testScripts) {
@@ -461,7 +259,7 @@
      _scripts = scripts.filter(item => item.status !== 'false')
    }

    if (type === 'submit' && setting.interType === 'system' && setting.execute === 'false' && _scripts.length === 0) {
    if (type === 'submit' && setting.execute === 'false' && _scripts.length === 0) {
      notification.warning({
        top: 92,
        message: '不执行默认sql时，请添加自定义脚本！',
@@ -472,11 +270,11 @@
    }

    // 不使用默认sql切换
    if (type === 'setting' && setting.interType === 'system' && setting.execute === 'false') {
    if (type === 'setting' && setting.execute === 'false') {
      resolve()
    } else if (type === 'scripts' && _scripts.length === 0) {
      resolve()
    } else if (setting.interType === 'system' && (setting.execute !== 'false' || _scripts.length > 0)) {
    } else if (setting.execute !== 'false' || _scripts.length > 0) {
      let param = {
        func: 's_debug_sql',
        LText: SettingUtils.getDebugSql(setting, _scripts, columns, searches)
@@ -506,6 +304,18 @@
    })
  }

  // 自定义脚本修改
  scriptsChange = (scripts) => {
    return new Promise((resolve, reject) => {
      this.sqlverify(resolve, reject, 'verify', scripts)
    })
  }

  // 自定义脚本更新
  scriptsUpdate = (scripts) => {
    this.setState({scripts})
  }

  /**
   * @description 组件销毁，清除state更新
   */
@@ -516,10 +326,10 @@
  }

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

    return (
      <div id="model-verify-card-box-tab">
      <div className="model-verify-card-box-tab" id="model-setting-form-body">
        {loading && <Spin size="large" />}
        <Tabs activeKey={activeKey} className="verify-card-box" onChange={this.changeTab}>
          <TabPane tab="数据源" key="setting">
@@ -555,24 +365,15 @@
            />
          </TabPane>
          <TabPane tab="自定义脚本" key="scripts">
            <CustomScriptsForm
              setting={setting}
              searches={this.props.searches}
              initsql={this.state.initsql}
            <CustomScript
              dict={this.props.dict}
              customScripts={scripts}
              systemScripts={this.state.systemScripts}
              setting={setting}
              scripts={scripts}
              defaultSql={this.state.defaultsql}
              searches={this.props.searches}
              scriptsChange={this.scriptsChange}
              scriptSubmit={this.scriptSubmit}
              scriptsUpdate={this.scriptsUpdate}
              wrappedComponentRef={(inst) => this.scriptsForm = inst}
            />
            <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              dataSource={scripts}
              columns={scriptsColumns}
              pagination={false}
            />
          </TabPane>
        </Tabs>