2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

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

@@ -1,7 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd'
import { Form, Tabs, Row, Col, Input, Button, Popconfirm, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd'
import { EditOutlined, QuestionCircleOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'
import moment from 'moment'

import Api from '@/api'
@@ -10,11 +11,13 @@
import UniqueForm from './uniqueform'
import ColumnForm from './columnform'
import CustomScript from './customscript'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { TabPane } = Tabs
const { confirm } = Modal
const { Paragraph } = Typography
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))

class VerifyCard extends Component {
  static propTpyes = {
@@ -31,26 +34,48 @@
      {
        title: this.props.dict['model.form.field'],
        dataIndex: 'Column',
        width: '16%',
        width: '14%',
        inputType: 'input',
        unique: true,
        editable: true
      },
      {
        title: this.props.dict['model.name'],
        dataIndex: 'Text',
        width: '15%',
        width: '14%',
        inputType: 'input',
        editable: true
      },
      {
        title: this.props.dict['model.form.type'],
        dataIndex: 'type',
        width: '12%',
        editable: true
        width: '15%',
        editable: true,
        inputType: 'select',
        options: [
          { value: 'Nvarchar(10)', text: 'Nvarchar(10)' },
          { value: 'Nvarchar(20)', text: 'Nvarchar(20)' },
          { value: 'Nvarchar(50)', text: 'Nvarchar(50)' },
          { value: 'Nvarchar(100)', text: 'Nvarchar(100)' },
          { value: 'Nvarchar(256)', text: 'Nvarchar(256)' },
          { 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,2)', text: 'Decimal(18,2)' },
          { value: 'Decimal(18,4)', text: 'Decimal(18,4)' },
          { value: 'Decimal(18,6)', text: 'Decimal(18,6)' },
          { value: 'date', text: 'date' }
        ]
      },
      {
        title: this.props.dict['model.required'],
        dataIndex: 'required',
        width: '10%',
        editable: true,
        inputType: 'switch',
        render: (text, record) => record.required === 'true' ? this.props.dict['model.true'] : this.props.dict['model.false']
      },
      {
@@ -58,120 +83,119 @@
        dataIndex: 'import',
        width: '10%',
        editable: true,
        inputType: 'switch',
        render: (text, record) => record.import !== 'false' ? this.props.dict['model.true'] : this.props.dict['model.false']
      },
      {
        title: '最小值',
        dataIndex: 'min',
        width: '10%',
        required: false,
        inputType: 'number',
        unlimit: true,
        editable: true
      },
      {
        title: '最大值',
        dataIndex: 'max',
        width: '10%',
        required: false,
        inputType: 'number',
        unlimit: true,
        editable: true
      },
      {
        title: '操作',
        align: 'center',
        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['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
                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>
              </Popconfirm>
            </div>
          )
      }
    ],
    uniqueColumns: [
      {
        title: '字段名',
        title: '列名',
        dataIndex: 'fieldlabel',
        width: '20%'
      },
      {
        title: '字段',
        dataIndex: 'field',
        width: '35%'
        width: '25%',
        editable: true,
        inputType: 'multiStr',
        options: []
      },
      {
        title: '报错编码',
        dataIndex: 'errorCode',
        width: '12%'
        width: '12%',
        editable: true,
        inputType: 'select',
        options: [
          { value: 'E', text: 'E' },
          { value: 'N', text: 'N' },
          { value: 'F', text: 'F' },
          { value: 'NM', text: 'NM' }
        ]
      },
      {
        title: '验证类型',
        dataIndex: 'verifyType',
        width: '13%',
        render: (text, record) => record.verifyType === 'logic' ? '逻辑验证' : '物理验证'
        width: '12%',
        render: (text, record) => record.verifyType === 'logic' ? '逻辑验证' : '物理验证',
        inputType: 'select',
        editable: true,
        options: [
          { value: 'physical', text: '物理验证' },
          { value: 'logic', text: '逻辑验证' }
        ]
      },
      {
        title: '状态',
        title: '是否启用',
        dataIndex: 'status',
        width: '15%',
        width: '12%',
        editable: true,
        required: false,
        inputType: 'switch',
        render: (text, record) => record.status === 'false' ?
          (
            <div>
            <div style={{color: '#ff4d4f'}}>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
              <StopOutlined style={{marginLeft: '5px'}} />
            </div>
          ) :
          (
            <div>
            <div style={{color: '#26C281'}}>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
              <CheckCircleOutlined style={{marginLeft: '5px'}}/>
            </div>
          )
      },
      {
        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, 'unique')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'unique', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <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
              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>
            </Popconfirm>
          </div>)
      }
    ],
    scriptsColumns: [
      {
        title: 'SQL',
        dataIndex: 'sql',
        width: '60%',
        render: (text) => (
          <Paragraph copyable ellipsis={{ rows: 5, expandable: true }}>{text}</Paragraph>
        )
        render: (text) => {
          let title = text.match(/^\s*\/\*.+\*\//)
          title = title && title[0] ? title[0] : ''
          text = title ? text.replace(title, '') : text

          return (
            <div>
              {title ? <span style={{color: '#a50'}}>{title}</span> : null}
              <Paragraph copyable ellipsis={{ rows: 4, expandable: true }}>{text}</Paragraph>
            </div>
          )
        }
      },
      {
        title: '执行位置',
        dataIndex: 'position',
        width: '10%',
        render: (text, record) => {
          let _text = ''
          if (record.position === 'front') {
            _text = 'sql前'
          } else if (record.position === 'init') {
            _text = '初始化'
          if (record.position === 'init') {
            return <span style={{color: 'orange'}}>初始化</span>
          } else if (record.position === 'front') {
            return <span style={{color: '#26C281'}}>sql前</span>
          } else {
            _text = 'sql后'
            return <span style={{color: '#1890ff'}}>sql后</span>
          }
          return _text
        }
      },
      {
@@ -180,35 +204,33 @@
        width: '10%',
        render: (text, record) => record.status === 'false' ?
          (
            <div>
            <div style={{color: '#ff4d4f'}}>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
              <StopOutlined style={{marginLeft: '5px'}} />
            </div>
          ) :
          (
            <div>
            <div style={{color: '#26C281'}}>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
              <CheckCircleOutlined style={{marginLeft: '5px'}}/>
            </div>
          )
      },
      {
        title: '操作',
        align: 'center',
        width: '20%',
        width: '140px',
        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['header.form.up']} onClick={() => this.handleUpDown(record, 'scripts', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <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>
          (<div style={{textAlign: 'center'}}>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><EditOutlined /></span>
            <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span>
            <Popconfirm
              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>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
            </Popconfirm>
          </div>)
      }
@@ -216,58 +238,25 @@
  }

  UNSAFE_componentWillMount() {
    const { columns, card } = this.props
    const { card } = this.props
    let _verify = fromJS(card.verify || {range: 1}).toJS()
    let _columns = _verify.columns || []

    // 同步显示列
    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
        }
    // 旧数据兼容
    _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 = ''
      }

        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
      })
    }
      return col
    })

    this.setState({
      verify: {
@@ -279,6 +268,8 @@
        scripts: _verify.scripts || [],
        uniques: _verify.uniques || []
      }
    }, () => {
      this.resetUniqueColumns()
    })
  }

@@ -305,7 +296,7 @@
          systemScripts: res.data.map(item => {
            return {
              name: item.funcname,
              value: Utils.UnformatOptions(item.longparam)
              value: window.decodeURIComponent(window.atob(item.longparam))
            }
          })
        })
@@ -317,6 +308,27 @@
        })
      }
    })
  }

  resetUniqueColumns = () => {
    const { uniqueColumns, verify } = this.state

    this.setState({uniqueColumns: uniqueColumns.map(col => {
      if (col.dataIndex === 'field') {
        col.options = verify.columns.map(c => {
          return {
            field: c.Column,
            label: c.Text
          }
        })
        col.options.unshift({
          field: 'BID',
          label: 'BID'
        })
      }

      return col
    })})
  }

  columnFieldInput = () => {
@@ -363,6 +375,8 @@
        ...verify,
        columns: _columns
      }
    }, () => {
      this.resetUniqueColumns()
    })
  }

@@ -378,6 +392,8 @@
            ...verify,
            columns: []
          }
        }, () => {
          _this.resetUniqueColumns()
        })
      },
      onCancel() {}
@@ -387,43 +403,101 @@
  columnChange = (values) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))

    if (values.uuid) {
      verify.columns = verify.columns.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
    let fields = verify.columns.map(item => item.Column)
    if (fields.includes(values.Column)) {
      notification.warning({
        top: 92,
        message: values.Column + '字段已存在！',
        duration: 5
      })
    } else {
      values.uuid = Utils.getuuid()
      verify.columns.push(values)
      return
    }

    values.uuid = Utils.getuuid()
    verify.columns.push(values)

    this.setState({
      verify: verify
    }, () => {
      this.resetUniqueColumns()
    })
  }

  changeColumns = (columns) => {
    const { verify } = this.state

    if (columns[0] && (columns[0].type === 'image' || columns[0].type === 'text')) {
      columns = columns.map(col => {
        let _cell = {
          uuid: Utils.getuuid(),
          Column: col.Column,
          Text: col.Text,
          type: 'Nvarchar(50)',
          limit: '50',
          import: 'true',
          required: 'true'
        }

        return _cell
      })
    }

    columns = columns.map(col => {
      if (/^Nvarchar/ig.test(col.type)) {
        col.limit = col.type.match(/\d+/) ? col.type.match(/\d+/)[0] : '20000'
      } else if (/^Decimal/ig.test(col.type)) {
        col.limit = col.type.match(/\d+/ig)[1]
        col.required = 'true'
      } else if (/^int/ig.test(col.type)) {
        col.required = 'true'
      } else {
        col.limit = ''
      }

      return col
    })

    this.setState({verify: {...verify, columns}}, () => {
      this.resetUniqueColumns()
    })
  }

  uniqueChange = (values) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))

    if (values.uuid) {
      verify.uniques = verify.uniques.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      values.uuid = Utils.getuuid()
      verify.uniques.push(values)
    }
    values.status = 'true'
    values.uuid = Utils.getuuid()
    verify.uniques.push(values)

    this.setState({
      verify: verify
    })
  }

  changeUniques = (uniques) => {
    const { verify } = this.state

    let change = {}
    verify.columns.forEach(col => {
      change[col.Column] = col.Text
    })
    
    uniques = uniques.map(item => {
      item.status = item.status || 'true'

      if (Array.isArray(item.field)) {
        item.fieldlabel = item.field.map(field => {
          return change[field] || ''
        })

        item.fieldlabel = item.fieldlabel.join(',')
        item.field = item.field.join(',')
      }

      return item
    })

    this.setState({verify: {...verify, uniques}})
  }

  scriptsChange = (values) => {
@@ -462,12 +536,8 @@
  }

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

    let node = document.getElementById('verify-excel-box-tab').parentNode
@@ -513,68 +583,6 @@
    })
  }

  handleUpDown = (record, type, direction) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))
    let index = 0

    if (type === 'columns') {
      verify.columns = verify.columns.filter((item, i) => {
        if (item.uuid === record.uuid) {
          index = i
        }

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

      if (direction === 'up') {
        verify.columns.splice(index - 1, 0, record)
      } else {
        verify.columns.splice(index + 1, 0, record)
      }
    } else if (type === 'unique') {
      verify.uniques = verify.uniques.filter((item, i) => {
        if (item.uuid === record.uuid) {
          index = i
        }

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

      if (direction === 'up') {
        verify.uniques.splice(index - 1, 0, record)
      } else {
        verify.uniques.splice(index + 1, 0, record)
      }
    } else if (type === 'scripts') {
      verify.scripts = verify.scripts.filter((item, i) => {
        if (item.uuid === record.uuid) {
          index = i
        }

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

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

    this.setState({
      verify: verify
    })
  }

  handleConfirm = () => {
    const { verify } = this.state
    // 表单提交时检查输入值是否正确
@@ -613,18 +621,10 @@
          }

          let _loading = false
          if (this.columnForm && this.columnForm.state.editItem) {
            _loading = true
            this.setState({activeKey: 'excelcolumn'})
          } else if (this.scriptsForm && this.scriptsForm.state.editItem) {
          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')) {
          } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
            _loading = true
            this.setState({activeKey: 'scripts'})
          }
@@ -752,7 +752,7 @@
                <Col span={8}>
                  <Form.Item label={
                    <Tooltip placement="bottomLeft" title="忽略首行时，会校验excel中表头名称与excel列设置是否一致。">
                      <Icon type="question-circle" style={{color: '#c49f47', marginRight: '5px'}}/>
                      <QuestionCircleOutlined className="mk-form-tip" />
                      忽略行
                    </Tooltip>
                  }>
@@ -778,26 +778,15 @@
              {verify.columns.length ? <span className="count-tip">{verify.columns.length}</span> : null}
            </span>
          } key="excelcolumn">
            <ColumnForm
              dict={this.props.dict}
              columns={verify.columns}
              columnChange={this.columnChange}
              wrappedComponentRef={(inst) => this.columnForm = inst}
            />
            <ColumnForm dict={this.props.dict} columnChange={this.columnChange}/>
            <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 excel-custom-table"
              dataSource={verify.columns}
              columns={excelColumns}
              pagination={false}
            />
            <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>注：数值类型（int 或 decimal），内容为必填；最大值和最小值在类型为数值时有效。</Col>
            <EditTable actions={['edit', 'move', 'copy', 'del']} type="excelcolumn" data={verify.columns} columns={excelColumns} onChange={this.changeColumns}/>
          </TabPane>
          {card.intertype === 'system' ? <TabPane tab={
            <span>
@@ -805,20 +794,8 @@
              {verify.uniques.length ? <span className="count-tip">{verify.uniques.length}</span> : null}
            </span>
          } key="unique">
            <UniqueForm
              fields={verify.columns}
              dict={this.props.dict}
              uniqueChange={this.uniqueChange}
              wrappedComponentRef={(inst) => this.uniqueForm = inst}
            />
            <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              dataSource={verify.uniques}
              columns={uniqueColumns}
              pagination={false}
            />
            <UniqueForm fields={verify.columns} dict={this.props.dict} uniqueChange={this.uniqueChange}/>
            <EditTable actions={['edit', 'move', 'del']} data={verify.uniques} columns={uniqueColumns} onChange={this.changeUniques}/>
          </TabPane> : null}
          {card.intertype === 'system' ? <TabPane tab={
            <span>
@@ -835,14 +812,15 @@
              scriptsChange={this.scriptsChange}
              wrappedComponentRef={(inst) => this.scriptsForm = inst}
            />
            <Table
            <EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/>
            {/* <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              dataSource={verify.scripts}
              columns={scriptsColumns}
              pagination={false}
            />
            /> */}
          </TabPane> : null}
          <TabPane tab="信息提示" key="tip">
            <Form {...formItemLayout}>