2023-08-10

king

2023-08-10 ac1d52c46ff9019fcc93cf3d5e7ab17cf850824e

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

@@ -1,16 +1,16 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
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 { Form, Tabs, Row, Col, Input, Button, Popconfirm, notification, Modal, message, Cascader, Tooltip, InputNumber, Radio, Typography } from 'antd'
import { StopTwoTone, CheckCircleTwoTone, EditOutlined, SwapOutlined, DeleteOutlined, QuestionCircleOutlined } 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 MenuUtils from '@/utils/utils-custom.js'
import UniqueForm from './uniqueform'
import CustomScript from './customscript'
import MinView from '@/assets/img/minview.png'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

@@ -18,6 +18,7 @@
const { confirm } = Modal
const { Paragraph } = Typography
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
const FullScripts = asyncComponent(() => import('@/templates/zshare/verifycard/fullScripts'))

class VerifyTableCard extends Component {
  static propTpyes = {
@@ -26,10 +27,9 @@
  }

  state = {
    visible: false,
    scriptId: '',
    verify: {},
    fields: [],
    modules: [],
    fieldLabel: {},
    systemScripts: [],
    activeKey: 'basemsg',
@@ -177,27 +177,32 @@
  }

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

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

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

    let supId = ''
    if (setting && setting.supModule) {
      let pid = setting.supModule[setting.supModule.length - 1]
      if (pid && pid !== 'empty') {
        supId = pid
      } else {
        supId = ''
      }
    }
    
    let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, uuid, supId)

    this.setState({
      fields: fromJS(columns).toJS().filter(item => item.field !== setting.primaryKey),
      fieldLabel,
      modules: modules,
      verify: _verify
    }, () => {
      this.resetUniqueColumns()
@@ -232,7 +237,7 @@

    _sParam.open_key = Utils.encryptOpenKey(_sParam.secretkey, _sParam.timestamp) // 云端数据验证
    
    Api.getSystemConfig(_sParam).then(res => {
    Api.getCloudConfig(_sParam).then(res => {
      if (res.status) {
        let _scripts = res.data.map(item => {
          return {
@@ -493,7 +498,7 @@
  }

  render() {
    const { verify, scriptsColumns, uniqueColumns, activeKey, fields, visible } = this.state
    const { verify, scriptsColumns, uniqueColumns, activeKey, fields, modules } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -564,6 +569,16 @@
                    </Radio.Group>
                  </Form.Item>
                </Col> : null}
                <Col span={8}>
                  <Form.Item label={
                    <Tooltip placement="topLeft" title="执行成功后（或弹窗标签关闭时），需要同步刷新的组件。注：选择当前组件的上级组件无效，刷新上级组件请选择成功后“上级（行）”。">
                      <QuestionCircleOutlined className="mk-form-tip" />
                      刷新组件
                    </Tooltip>
                  }>
                    <Cascader options={modules} value={verify.syncComponent || []} expandTrigger="hover" allowClear placeholder="" onChange={(val) => this.onOptionChange(val, 'syncComponent')}/>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </TabPane>
@@ -582,17 +597,23 @@
              {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: ''})
            }}/>
            <FullScripts
              verify={verify}
              getScriptsFullForm={() => this.scriptsFullForm}
              getScriptsForm={() => this.scriptsForm}
              handleStatus={this.handleStatus}
              handleDelete={this.handleDelete}
            >
              <CustomScript
                type="fullscreen"
                btn={verify}
                usefulfields={fields}
                scripts={verify.scripts}
                systemScripts={this.state.systemScripts}
                scriptsChange={this.scriptsChange}
                wrappedComponentRef={(inst) => this.scriptsFullForm = inst}
              />
            </FullScripts>
            <CustomScript
              btn={verify}
              usefulfields={fields}
@@ -607,7 +628,7 @@
            <Form {...formItemLayout}>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> S </span>
                    <Button onClick={() => {this.showError('S')}} type="primary" size="small">
                      查看
@@ -615,14 +636,14 @@
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label={'停留时间'}>
                  <Form.Item label="停留时间">
                    <InputNumber defaultValue={verify.stime || 2} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'stime')}} />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> Y </span>
                    <Button onClick={() => {this.showError('Y')}} type="primary" size="small">
                      查看
@@ -632,7 +653,15 @@
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> -1 </span>
                    执行成功无提示。
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> N </span>
                    <Button onClick={() => {this.showError('N')}} type="primary" size="small">
                      查看
@@ -640,14 +669,14 @@
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label={'停留时间'}>
                  <Form.Item label="停留时间">
                    <InputNumber defaultValue={verify.ntime || 10} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'ntime')}} />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> F </span>
                    <Button onClick={() => {this.showError('F')}} type="primary" size="small">
                      查看
@@ -655,14 +684,14 @@
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label={'停留时间'}>
                  <Form.Item label="停留时间">
                    <InputNumber defaultValue={verify.ftime || 10} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'ftime')}} />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> E </span>
                    <Button onClick={() => {this.showError('E')}} type="primary" size="small">
                      查看
@@ -672,7 +701,7 @@
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                  <Form.Item label="提示编码">
                    <span className="errorval"> NM </span>
                    <Button onClick={() => {this.showError('NM')}} type="primary" size="small">
                      查看
@@ -682,96 +711,15 @@
              </Row>
              <Row gutter={24}>
                <Col offset={6} span={6}>
                  <Form.Item label={'提示编码'}>
                    <span className="errorval"> -1 </span>
                    不提示
                  <Form.Item label="提示编码">
                    <span className="errorval"> -2 </span>
                    执行失败无提示
                  </Form.Item>
                </Col>
              </Row>
            </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>
    )
  }