2020-09-14

king

2020-09-14 76427d51a079a5fd1f45bf7188249e7a4647ae05

 src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx

@@ -1,6 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber, Radio, Typography } from 'antd'
import { fromJS } from 'immutable'
import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -25,42 +26,50 @@
  state = {
    verify: {},
    systemScripts: [],
    activeKey: 'basemsg',
    excelColumns: [
      {
        title: 'Column',
        title: this.props.dict['model.form.field'],
        dataIndex: 'Column',
        width: '16%',
        editable: true
      },
      {
        title: 'Text',
        title: this.props.dict['model.name'],
        dataIndex: 'Text',
        width: '19%',
        width: '15%',
        editable: true
      },
      {
        title: '类型',
        title: this.props.dict['model.form.type'],
        dataIndex: 'type',
        width: '12%',
        editable: true
      },
      {
        title: '是否必填',
        title: this.props.dict['model.required'],
        dataIndex: 'required',
        width: '12%',
        width: '10%',
        editable: true,
        render: (text, record) => record.required === 'true' ? '是' : '否'
        render: (text, record) => record.required === 'true' ? this.props.dict['model.true'] : this.props.dict['model.false']
      },
      {
        title: this.props.dict['model.import'],
        dataIndex: 'import',
        width: '10%',
        editable: true,
        render: (text, record) => record.import !== 'false' ? this.props.dict['model.true'] : this.props.dict['model.false']
      },
      {
        title: '最小值',
        dataIndex: 'min',
        width: '12%',
        width: '10%',
        editable: true
      },
      {
        title: '最大值',
        dataIndex: 'max',
        width: '12%',
        width: '10%',
        editable: true
      },
      {
@@ -74,9 +83,8 @@
              <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'columns', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
              <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'columns', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
              <Popconfirm
                title={this.props.dict['header.form.query.delete']}
                okText={this.props.dict['model.confirm']}
                cancelText={this.props.dict['header.cancel']}
                overlayClassName="popover-confirm"
                title={this.props.dict['model.query.delete']}
                onConfirm={() => this.handleDelete(record, 'columns')
              }>
                <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
@@ -109,13 +117,13 @@
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['header.form.status.forbidden']}
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['header.form.status.open']}
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
          )
@@ -132,9 +140,8 @@
            <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'unique', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'unique')} style={{color: '#8E44AD'}}><Icon type="swap" /></span>
            <Popconfirm
              title={this.props.dict['header.form.query.delete']}
              okText={this.props.dict['model.confirm']}
              cancelText={this.props.dict['header.cancel']}
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.handleDelete(record, 'unique')
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
@@ -174,13 +181,13 @@
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['header.form.status.forbidden']}
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['header.form.status.open']}
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
          )
@@ -197,9 +204,8 @@
            <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'scripts', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><Icon type="swap" /></span>
            <Popconfirm
              title={this.props.dict['header.form.query.delete']}
              okText={this.props.dict['model.confirm']}
              cancelText={this.props.dict['header.cancel']}
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.handleDelete(record, 'scripts')
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
@@ -210,24 +216,58 @@
  }

  UNSAFE_componentWillMount() {
    let _verify = this.props.card.verify || {}
    _verify = JSON.parse(JSON.stringify(_verify))

    const { columns, card } = this.props
    let _verify = fromJS(card.verify || {range: 1}).toJS()
    let _columns = _verify.columns || []
    _columns = _columns.map(col => {
      col.required = col.required || 'true'
      col.type = col.type || 'Nvarchar(50)'
      
      if (/^Nvarchar/ig.test(col.type)) {
        col.limit = col.type.match(/\d+/)[0]
      } else if (/^Decimal/ig.test(col.type)) {
        col.limit = col.type.match(/\d+/ig)[1]
      } else {
        col.limit = ''
      }

      return col
    })
    // 同步显示列
    if (_columns.length === 0) {
      columns.forEach(col => {
        if (!col.field) return
        let _type = 'Nvarchar(50)'
        let _limit = '50'
        if (col.type === 'number' && !col.decimal) {
          _type = 'Int'
          _limit = ''
        } else if (col.type === 'number') {
          _type = 'Decimal(18,' + col.decimal + ')'
          _limit = col.decimal
        }

        let _cell = {
          uuid: col.uuid,
          Column: col.field,
          Text: col.label,
          type: _type,
          limit: _limit,
          import: 'true',
          required: 'true'
        }

        if (_type !== 'Nvarchar(50)') {
          _cell.min = 0
          _cell.max = 999999
        }

        _columns.push(_cell)
      })
    } else {
      // 旧数据兼容
      _columns = _columns.map(col => {
        col.required = col.required || 'true'
        col.type = col.type || 'Nvarchar(50)'
        
        if (/^Nvarchar/ig.test(col.type)) {
          col.limit = col.type.match(/\d+/)[0]
        } else if (/^Decimal/ig.test(col.type)) {
          col.limit = col.type.match(/\d+/ig)[1]
        } else {
          col.limit = ''
        }
  
        return col
      })
    }

    this.setState({
      verify: {
@@ -254,10 +294,10 @@
      arr_field: 'funcname,longparam'
    }
    
    _sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    _sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    _sParam.secretkey = Utils.encrypt(_sParam.LText, _sParam.timestamp)

    _sParam.open_key = Utils.encrypt(_sParam.secretkey, _sParam.timestamp, true) // 云端数据验证
    _sParam.open_key = Utils.encryptOpenKey(_sParam.secretkey, _sParam.timestamp) // 云端数据验证
    
    Api.getSystemConfig(_sParam).then(res => {
      if (res.status) {
@@ -265,7 +305,7 @@
          systemScripts: res.data.map(item => {
            return {
              name: item.funcname,
              value: Utils.formatOptions(item.longparam, true)
              value: Utils.UnformatOptions(item.longparam)
            }
          })
        })
@@ -291,7 +331,7 @@
      if (col.field && !_cols.includes(col.field)) {
        let _type = 'Nvarchar(50)'
        let _limit = '50'
        if (col.type === 'number' && col.decimal === 0) {
        if (col.type === 'number' && !col.decimal) {
          _type = 'Int'
          _limit = ''
        } else if (col.type === 'number') {
@@ -305,6 +345,7 @@
          Text: col.label,
          type: _type,
          limit: _limit,
          import: 'true',
          required: 'true'
        }

@@ -322,6 +363,24 @@
        ...verify,
        columns: _columns
      }
    })
  }

  clearField = () => {
    const { verify } = this.state
    const _this = this

    confirm({
      content: `确定清空Excel列吗？`,
      onOk() {
        _this.setState({
          verify: {
            ...verify,
            columns: []
          }
        })
      },
      onCancel() {}
    })
  }

@@ -556,21 +615,23 @@
          let _loading = false
          if (this.columnForm && this.columnForm.state.editItem) {
            _loading = true
            this.setState({activeKey: 'excelcolumn'})
          } else if (this.scriptsForm && this.scriptsForm.state.editItem) {
            _loading = true
            this.setState({activeKey: 'scripts'})
          } else if (this.uniqueForm && this.uniqueForm.state.editItem) {
            _loading = true
            this.setState({activeKey: 'unique'})
          }

          if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
            _loading = true
            this.setState({activeKey: 'scripts'})
          }

          if (_loading) {
            confirm({
              content: `存在未保存项，确定提交吗？`,
              okText: this.props.dict['model.confirm'],
              cancelText: this.props.dict['header.cancel'],
              onOk() {
                resolve(_verify)
              },
@@ -640,10 +701,24 @@
    })
  }

  tabchange = (val) => {
    const { activeKey } = this.state

    if (activeKey === 'basemsg') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.setState({activeKey: val})
        }
      })
    } else {
      this.setState({activeKey: val})
    }
  }

  render() {
    const { card } = this.props
    const { getFieldDecorator } = this.props.form
    const { verify, excelColumns, scriptsColumns, uniqueColumns } = this.state
    const { verify, excelColumns, scriptsColumns, uniqueColumns, activeKey } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -657,8 +732,8 @@

    return (
      <div id="verify-excel-box-tab">
        <Tabs defaultActiveKey="1" className="verify-card-box" onChange={this.tabchange}>
          <TabPane tab="基础验证" key="1">
        <Tabs activeKey={activeKey} className="verify-card-box" onChange={this.tabchange}>
          <TabPane tab="基础验证" key="basemsg">
            <Form {...formItemLayout}>
              <Row gutter={24}>
                <Col span={8}>
@@ -675,13 +750,18 @@
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label={'忽略行'}>
                  <Form.Item label={
                    <Tooltip placement="bottomLeft" title="忽略首行时，会校验excel中表头名称与excel列设置是否一致。">
                      <Icon type="question-circle" style={{color: '#c49f47', marginRight: '5px'}}/>
                      忽略行
                    </Tooltip>
                  }>
                    {getFieldDecorator('range', {
                      initialValue: verify.range || 0
                    })(<InputNumber min={0} max={100} precision={0} />)}
                  </Form.Item>
                </Col>
                {card.intertype === 'inner' && !card.innerFunc ? <Col span={8}>
                {card.intertype === 'system' ? <Col span={8}>
                  <Form.Item label={'默认sql'}>
                    <Radio.Group value={verify.default} onChange={this.onOptionChange}>
                      <Radio value="true">执行</Radio>
@@ -692,7 +772,12 @@
              </Row>
            </Form>
          </TabPane>
          <TabPane tab="Excel列设置" key="2x">
          <TabPane tab={
            <span>
              Excel列设置
              {verify.columns.length ? <span className="count-tip">{verify.columns.length}</span> : null}
            </span>
          } key="excelcolumn">
            <ColumnForm
              dict={this.props.dict}
              columns={verify.columns}
@@ -700,18 +785,26 @@
              wrappedComponentRef={(inst) => this.columnForm = inst}
            />
            <Button className="excel-col-add mk-green" title="添加显示列字段" onClick={this.columnFieldInput}>
              快捷添加
              同步显示列
            </Button>
            <Button className="excel-col-add mk-red" title="清空Excel列" onClick={this.clearField}>
              清空Excel列
            </Button>
            <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              className="custom-table excel-custom-table"
              dataSource={verify.columns}
              columns={excelColumns}
              pagination={false}
            />
          </TabPane>
          {card.intertype === 'inner' && !card.innerFunc ? <TabPane tab="唯一性验证" key="3">
          {card.intertype === 'system' ? <TabPane tab={
            <span>
              唯一性验证
              {verify.uniques.length ? <span className="count-tip">{verify.uniques.length}</span> : null}
            </span>
          } key="unique">
            <UniqueForm
              fields={verify.columns}
              dict={this.props.dict}
@@ -727,7 +820,12 @@
              pagination={false}
            />
          </TabPane> : null}
          {card.intertype === 'inner' && !card.innerFunc ? <TabPane tab="自定义脚本" key="6">
          {card.intertype === 'system' ? <TabPane tab={
            <span>
              自定义脚本
              {verify.scripts.length ? <span className="count-tip">{verify.scripts.length}</span> : null}
            </span>
          } key="scripts">
            <CustomScript
              dict={this.props.dict}
              btn={this.props.card}
@@ -746,7 +844,7 @@
              pagination={false}
            />
          </TabPane> : null}
          <TabPane tab="信息提示" key="7">
          <TabPane tab="信息提示" key="tip">
            <Form {...formItemLayout}>
              <Row gutter={24}>
                <Col offset={6} span={6}>