2022-04-26

king

2022-04-26 5046d0d13dc6a8563b8e54e31913bc44cfa1072f

 src/templates/zshare/customscript/index.jsx

@@ -1,16 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Icon, Button, notification, Select, Table, Popconfirm, Typography } from 'antd'
import { Form, Row, Col, Button, notification, Select, Popconfirm, Typography } from 'antd'
import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'
import moment from 'moment'

import Utils from '@/utils/utils.js'
// import SettingUtils from '../utils.jsx'
import Api from '@/api'
import CodeMirror from '@/templates/zshare/codemirror'
import asyncComponent from '@/utils/asyncComponent'
import MKEmitter from '@/utils/events.js'
import './index.scss'

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

class CustomForm extends Component {
  static propTpyes = {
@@ -18,6 +21,7 @@
    setting: PropTypes.object,      // 设置
    scripts: PropTypes.array,       // 自定义脚本列表
    searches: PropTypes.array,      // 搜索条件
    urlFields: PropTypes.any,       // url变量
    defaultSql: PropTypes.string,   // 默认sql
    scriptsChange: PropTypes.func,  // 自定义脚本切换时验证
    scriptsUpdate: PropTypes.func   // 表单
@@ -32,46 +36,53 @@
      {
        title: 'SQL',
        dataIndex: 'sql',
        width: '70%',
        render: (text) => (
          <Paragraph copyable ellipsis={{ rows: 5, expandable: true }}>{text}</Paragraph>
        )
        width: '73%',
        render: (text) => {
          let title = text.match(/^\s*\/\*.+\*\//)
          title = title && title[0] ? title[0] : ''
          let _text = title ? text.replace(title, '') : text

          return (
            <div>
              {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>
          )
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: '10%',
        width: '12%',
        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: '15%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div>
            <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, '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)} 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)} style={{color: '#1890ff'}}><EditOutlined /></span>
            <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span>
            <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.handleDelete(record)
            }>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
            </Popconfirm>
          </div>)
      }
@@ -79,14 +90,13 @@
  }

  UNSAFE_componentWillMount() {
    const { searches, scripts } = this.props
    const { searches, scripts, urlFields } = this.props

    let _usefulFields = []
    searches.forEach(item => {
      if (!item.field) return
      if (item.type === 'group') {
        if (item.transfer === 'true') {
          _usefulFields.push(item.field)
        }
        _usefulFields.push(item.field)
        _usefulFields.push(item.datefield)
        _usefulFields.push(item.datefield + '1')
      } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) {
@@ -98,6 +108,10 @@
        _usefulFields.push(item.field)
      }
    })

    if (urlFields) {
      _usefulFields.push(...urlFields)
    }

    this.setState({
      usefulFields: _usefulFields.join(', '),
@@ -130,7 +144,7 @@
        let _scripts = res.data.map(item => {
          let _item = {
            name: item.funcname,
            value: Utils.UnformatOptions(item.longparam)
            value: window.decodeURIComponent(window.atob(item.longparam))
          }
          return _item
        })
@@ -147,8 +161,6 @@
      }
    })
  }

  

  handleCancel = () => {
    this.setState({
@@ -249,6 +261,8 @@
        editItem: null
      })

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

      this.props.scriptsUpdate(_scripts)
      this.props.form.setFieldsValue({
        sql: ''
@@ -259,6 +273,7 @@
  }

  selectScript = (value, option) => {
    if (!value || !option) return
    let _sql = this.props.form.getFieldValue('sql')
    if (_sql) {
      _sql = _sql + ` 
@@ -306,27 +321,7 @@
    }
  }

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

  changeScripts = (scripts) => {
    this.setState({scripts})
    this.props.scriptsUpdate(scripts)
  }
@@ -371,8 +366,8 @@
    }

    return (
      <div>
        <Form {...formItemLayout} className="modal-menu-setting-script">
      <div className="modal-menu-setting-script">
        <Form {...formItemLayout}>
          <Row gutter={24}>
            {setting.tableName ? <Col span={8}>
              <Form.Item label={'表名'} style={{whiteSpace: 'nowrap', margin: 0}}>
@@ -386,17 +381,21 @@
            </Col>
            <Col span={24} className="sqlfield">
              <Form.Item label={'可用字段'}>
                id, bid, loginuid, sessionuid, userid, appkey, time_id, orderBy{setting.laypage === 'true' ? ', pageSize, pageIndex': ''}{usefulFields ? ', ' + usefulFields : ''}
                id, bid, loginuid, sessionuid, userid, username, fullname, RoleID, mk_departmentcode, mk_organization, login_city, appkey, time_id, orderBy{setting.laypage === 'true' ? ', pageSize, pageIndex': ''}{usefulFields ? ', ' + usefulFields : ''}
              </Form.Item>
            </Col>
            <Col span={10} className="quick-add">
              <Form.Item label={'快捷添加'} style={{marginBottom: 0}}>
                <Select
                  allowClear
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={this.selectScript}
                >
                  <Select.Option key="default" value={defaultSql}>默认sql</Select.Option>
                  <Select.Option key="debugger" value={`z_debug: select @ErrorCode='E',@retmsg='测试断点' goto aaa`}>
                    测试断点
                  </Select.Option>
                  {systemScripts.map((option, i) =>
                    <Select.Option style={{whiteSpace: 'normal'}} key={i} value={option.value}>{option.name}</Select.Option>
                  )}
@@ -420,14 +419,7 @@
            </Col>
          </Row>
        </Form>
        <Table
          bordered
          rowKey="uuid"
          className="custom-table"
          dataSource={scripts}
          columns={scriptsColumns}
          pagination={false}
        />
        <EditTable data={scripts} actions={['move']} columns={scriptsColumns} onChange={this.changeScripts}/>
      </div>
    )
  }