2023-05-20

king

2023-05-20 01a88094eaa183714ed7490ca7b85fee1e7bb064

 src/menu/components/table/edit-table/columns/tableIn/index.jsx

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

import Api from '@/api'
import Utils from '@/utils/utils.js'

import MKEmitter from '@/utils/events.js'
import UniqueForm from './uniqueform'
import CustomScript from './customscript'
import MinView from '@/assets/img/minview.png'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

@@ -20,11 +22,12 @@
class VerifyTableCard extends Component {
  static propTpyes = {
    columns: PropTypes.array,  // 显示列
    dict: PropTypes.object,    // 字典项
    card: PropTypes.object,
  }

  state = {
    visible: false,
    scriptId: '',
    verify: {},
    fields: [],
    fieldLabel: {},
@@ -47,7 +50,7 @@
      {
        title: '报错编码',
        dataIndex: 'errorCode',
        width: '12%',
        width: '10%',
        editable: true,
        inputType: 'select',
        options: [
@@ -60,13 +63,24 @@
      {
        title: '验证类型',
        dataIndex: 'verifyType',
        width: '12%',
        render: (text, record) => record.verifyType === 'logic' ? '逻辑验证' : '物理验证',
        width: '14%',
        render: (text, record) => {
          let names = {
            physical: '物理验证（全量验证）',
            logic: '逻辑验证（全量验证）',
            physical_temp: '物理验证（仅临时表）',
            logic_temp: '逻辑验证（仅临时表）',
          }

          return names[text] || '物理验证（全量验证）'
        },
        inputType: 'select',
        editable: true,
        options: [
          { value: 'physical', text: '物理验证' },
          { value: 'logic', text: '逻辑验证' }
          { value: 'physical', text: '物理验证（全量验证）' },
          { value: 'logic', text: '逻辑验证（全量验证）' },
          { value: 'physical_temp', text: '物理验证（仅临时表）' },
          { value: 'logic_temp', text: '逻辑验证（仅临时表）' }
        ]
      },
      {
@@ -79,14 +93,14 @@
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
              禁用
              <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
              启用
              <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" />
            </div>
          )
      },
@@ -99,12 +113,12 @@
        render: (text) => {
          let title = text.match(/^\s*\/\*.+\*\//)
          title = title && title[0] ? title[0] : ''
          text = title ? text.replace(title, '') : text
          let _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>
              {title ? <span style={{color: '#a50'}}>{title}<span style={{fontSize: '12px', marginLeft: '5px'}}>{_text.length}</span></span> : null}
              <Paragraph copyable={{ text: text }} ellipsis={{ rows: 4, expandable: true }}>{_text}</Paragraph>
            </div>
          )
        }
@@ -114,15 +128,13 @@
        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
        }
      },
      {
@@ -132,14 +144,14 @@
        render: (text, record) => record.status === 'false' ?
          (
            <div>
              {this.props.dict['model.status.forbidden']}
              <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
              禁用
              <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" />
            </div>
          ) :
          (
            <div>
              {this.props.dict['model.status.open']}
              <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
              启用
              <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" />
            </div>
          )
      },
@@ -149,17 +161,15 @@
        width: '20%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div>
            <span className="operation-btn" onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'scripts', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <span className="operation-btn" 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" onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><EditOutlined /></span>
            <span className="operation-btn" title="状态切换" onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span>
            <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              title="确定删除吗?"
              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>)
      }
@@ -167,26 +177,26 @@
  }

  UNSAFE_componentWillMount() {
    const { columns, cols, card, setting } = this.props
    const { columns, card, setting } = this.props
    let _verify = fromJS(card).toJS()
    _verify.sheet = _verify.sheet || setting.tableName

    let fieldLabel = {}
    let _columns = []
    let _fields = {}
    // let _columns = []
    // let _fields = {}

    columns.forEach(col => {
      fieldLabel[col.field] = col.label
      _fields[col.field] = col
      // _fields[col.field] = col
    })
    cols.forEach(col => {
      if (!col.field || col.type === 'index' || !_fields[col.field]) return
    // cols.forEach(col => {
    //   if (!col.field || col.type === 'index' || !_fields[col.field]) return
      
      _columns.push(_fields[col.field])
    })
    //   _columns.push(_fields[col.field])
    // })

    this.setState({
      fields: _columns,
      fields: fromJS(columns).toJS().filter(item => item.field !== setting.primaryKey),
      fieldLabel,
      verify: _verify
    }, () => {
@@ -195,6 +205,17 @@
  }

  componentDidMount () {
    this.getsysScript()
  }

  getsysScript = () => {
    if (sessionStorage.getItem('mk_sys_scripts')) {
      this.setState({
        systemScripts: JSON.parse(sessionStorage.getItem('mk_sys_scripts'))
      })
      return
    }
    
    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)
@@ -213,13 +234,17 @@
    
    Api.getSystemConfig(_sParam).then(res => {
      if (res.status) {
        let _scripts = res.data.map(item => {
          return {
            name: item.funcname,
            value: window.decodeURIComponent(window.atob(item.longparam))
          }
        })

        sessionStorage.setItem('mk_sys_scripts', JSON.stringify(_scripts))

        this.setState({
          systemScripts: res.data.map(item => {
            return {
              name: item.funcname,
              value: window.decodeURIComponent(window.atob(item.longparam))
            }
          })
          systemScripts: _scripts
        })
      } else {
        notification.warning({
@@ -298,6 +323,8 @@
      verify.scripts.push(values)
    }

    MKEmitter.emit('editLineId', values.uuid)

    this.setState({
      verify: verify
    })
@@ -356,51 +383,6 @@
          return item
        }
      })
    }

    this.setState({
      verify: verify
    })
  }

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

    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({
@@ -511,7 +493,7 @@
  }

  render() {
    const { verify, scriptsColumns, uniqueColumns, activeKey, fields } = this.state
    const { verify, scriptsColumns, uniqueColumns, activeKey, fields, visible } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -526,12 +508,12 @@

    return (
      <div id="verify-excel-box-tab">
        <Tabs activeKey={activeKey} className="verify-card-box" onChange={this.tabchange}>
        <Tabs activeKey={activeKey} className="tablein-verify-card-box" onChange={this.tabchange}>
          <TabPane tab="基础验证" key="basemsg">
            <Form {...formItemLayout}>
              <Row gutter={24}>
                <Col span={8}>
                  <Form.Item required label={this.props.dict['model.form.tablename']}>
                  <Form.Item required label="表名">
                    <Input value={verify.sheet} placeholder="" autoComplete="off" onChange={(e) => this.onOptionChange(e.target.value, 'sheet')}/>
                  </Form.Item>
                </Col>
@@ -591,7 +573,7 @@
              {verify.uniques.length ? <span className="count-tip">{verify.uniques.length}</span> : null}
            </span>
          } key="unique">
            <UniqueForm fields={fields} dict={this.props.dict} uniqueChange={this.uniqueChange}/>
            <UniqueForm fields={fields} uniqueChange={this.uniqueChange}/>
            <EditTable actions={['edit', 'move', 'del']} data={verify.uniques} columns={uniqueColumns} onChange={this.changeUniques}/>
          </TabPane>
          <TabPane disabled={verify.intertype !== 'system'} tab={
@@ -600,8 +582,18 @@
              {verify.scripts.length ? <span className="count-tip">{verify.scripts.length}</span> : null}
            </span>
          } key="scripts">
            <BorderOutlined className="full-scripts" onClick={() => {
              if (this.scriptsForm && (this.scriptsForm.state.editItem || (this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))))) {
                notification.warning({
                  top: 92,
                  message: '请保存自定义脚本！',
                  duration: 5
                })
                return
              }
              this.setState({visible: true, scriptId: ''})
            }}/>
            <CustomScript
              dict={this.props.dict}
              btn={verify}
              usefulfields={fields}
              scripts={verify.scripts}
@@ -609,14 +601,7 @@
              scriptsChange={this.scriptsChange}
              wrappedComponentRef={(inst) => this.scriptsForm = inst}
            />
            <Table
              bordered
              rowKey="uuid"
              className="custom-table"
              dataSource={verify.scripts}
              columns={scriptsColumns}
              pagination={false}
            />
            <EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/>
          </TabPane>
          <TabPane tab="信息提示" key="tip">
            <Form {...formItemLayout}>
@@ -706,6 +691,87 @@
            </Form>
          </TabPane>
        </Tabs>
        <Modal
          wrapClassName="model-custom-scripts-modal"
          title="自定义脚本"
          visible={visible}
          width={'95vw'}
          maskClosable={false}
          destroyOnClose
        >
          <img className="unfull-scripts" src={MinView} onClick={() => this.setState({visible: false, scriptId: ''})} alt=""/>
          <div className="script-table-wrap">
            {verify.scripts.map(item => {
              let title = item.sql.match(/^\s*\/\*.+\*\//)
              title = title && title[0] ? title[0] : ''
              let _text = title ? item.sql.replace(title, '') : item.sql

              let position = null
              if (item.position === 'init') {
                position = <span style={{color: 'orange'}}>初始化</span>
              } else if (item.position === 'front') {
                position = <span style={{color: '#26C281'}}>sql前</span>
              } else {
                position = <span style={{color: '#1890ff'}}>sql后</span>
              }

              if (item.status === 'false') {
                return (
                  <div className="script-item" key={item.uuid}>
                    <div style={{cursor: 'not-allowed'}}>
                      {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null}
                      <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph>
                      <div>{position}
                        <span style={{color: '#ff4d4f', marginLeft: '20px'}}>
                          禁用
                          <StopOutlined style={{marginLeft: '5px'}} />
                        </span>
                      </div>
                    </div>
                    <div style={{height: '24px'}}></div>
                  </div>
                )
              } else {
                return (
                  <div className={'script-item ' + (this.state.scriptId === item.uuid ? 'active' : '') } key={item.uuid}>
                    <div style={{cursor: 'pointer'}} onClick={() => {
                      this.scriptsFullForm.edit(item)
                      this.setState({scriptId: item.uuid})
                    }}>
                      {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null}
                      <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph>
                      <div>{position}
                        <span style={{color: '#26C281', marginLeft: '20px'}}>
                          启用
                          <CheckCircleOutlined style={{marginLeft: '5px'}}/>
                        </span>
                      </div>
                    </div>
                    <div style={{textAlign: 'right'}}>
                      <span className="operation-btn" onClick={() => this.handleStatus(item, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span>
                      <Popconfirm
                        overlayClassName="popover-confirm"
                        title="确定删除吗?"
                        onConfirm={() => this.handleDelete(item, 'scripts')
                      }>
                        <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
                      </Popconfirm>
                    </div>
                  </div>
                )
              }
            })}
          </div>
          <CustomScript
            type="fullscreen"
            btn={verify}
            usefulfields={fields}
            scripts={verify.scripts}
            systemScripts={this.state.systemScripts}
            scriptsChange={this.scriptsChange}
            wrappedComponentRef={(inst) => this.scriptsFullForm = inst}
          />
        </Modal>
      </div>
    )
  }