2022-12-12

king

2022-12-12 6a50694b1ff7d566aa0b4acbe20f34a95bbab6af

 src/views/systemproc/proc/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import { Input, notification, Button, Form, Modal } from 'antd'
import { Input, notification, Button, Form, Modal, Empty } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import moment from 'moment'

import Utils from '@/utils/utils.js'
@@ -16,6 +17,9 @@
    content: '',
    loading: false,
    visible: false,
    searchable: false,
    inputing: false,
    procList: [],
    permFuncs: []
  }

@@ -23,7 +27,7 @@
    if (sessionStorage.getItem('permFuncField')) {
      this.setState({permFuncs: JSON.parse(sessionStorage.getItem('permFuncField'))})
    } else {
      Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
      Api.getCloudConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
        if (res.status) {
          let _permFuncs = []
  
@@ -108,17 +112,21 @@
      ]

      let error = ''

      if (!/create(\s+)proc/ig.test(value)) {
        error = '脚本中必须使用create proc'
      }
    
      chars.forEach(char => {
        if (!error && char.reg.test(value)) {
          error = char.key
          error = '不可使用' + char.key
        }
      })
  
      if (error) {
        notification.warning({
          top: 92,
          message: '不可使用' + error,
          message: error,
          duration: 5
        })
        return
@@ -299,26 +307,77 @@
    })
  }

  searchAll = (value) => {
    let param = {
      func: 's_proc_search',
      proc_name: value || ''
    }

    this.setState({loading: true})

    Api.genericInterface(param).then(res => {
      this.setState({loading: false})
      if (!res.status) {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
        return
      }

      this.setState({procList: res.data || []})
    })
  }

  changeProc = (name) => {
    const { loading } = this.state

    if (loading) {
      notification.warning({
        top: 92,
        message: '查询中请稍后。',
        duration: 5
      })
      return
    }
    
    this.setState({inputing: true, procName: name}, () => {
      this.setState({inputing: false})
      this.search(name)
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { loading, content, procName, visible, permFuncs } = this.state
    const { loading, content, procName, visible, permFuncs, searchable, procList, inputing } = this.state

    let _patten = permFuncs.length ? new RegExp('^(' + permFuncs.join('|') + ')[0-9a-zA-Z_]*$', 'g') : ''

    return (
      <div className="mk-proc-wrap">
        <div className="control-wrap">
          <div className="search-wrap">
            <Search placeholder="请输入存储过程名称" disabled={loading} enterButton="确定" onSearch={this.search}/>
          </div>
          <div className="action-wrap">
            <Button key="save" className="mk-btn mk-green" disabled={loading} onClick={() => this.save()}>保存</Button>
            <Button key="prev" className="mk-btn mk-primary" disabled={!procName || loading} onClick={this.prev}>上一版本</Button>
            <Button key="next" className="mk-btn mk-primary" disabled={!procName || loading} onClick={this.next}>下一版本</Button>
        <div className={'searh-list' + (searchable ? ' open' : '')}>
          <Search placeholder="存储过程名称查询" disabled={loading} onSearch={this.searchAll}/>
          <div className="proc-list">
            {procList.map((item, index) => (<div className="proc-item" onClick={() => this.changeProc(item.proc_name)} key={index}>{item.proc_name}</div>))}
            {procList.length === 0 ? <Empty /> : null}
          </div>
        </div>
        <div className="edit-wrap">
          <CodeMirror value={content} onChange={(val) => this.setState({content: val})}/>
        <div className="proc-wrap">
          <div className="control-wrap">
            <div className="search-wrap">
              {searchable ? <MenuUnfoldOutlined onClick={() => this.setState({searchable: !searchable})}/> : <MenuFoldOutlined onClick={() => this.setState({searchable: !searchable})}/>}
              {!inputing ? <Search placeholder="请输入存储过程名称" defaultValue={procName} disabled={loading} enterButton="确定" onSearch={this.search}/> : null}
            </div>
            <div className="action-wrap">
              <Button key="save" className="mk-btn mk-green" disabled={loading} onClick={() => this.save()}>保存</Button>
              <Button key="prev" className="mk-btn mk-primary" disabled={!procName || loading} onClick={this.prev}>上一版本</Button>
              <Button key="next" className="mk-btn mk-primary" disabled={!procName || loading} onClick={this.next}>下一版本</Button>
            </div>
          </div>
          <div className="edit-wrap">
            <CodeMirror value={content} onChange={(val) => this.setState({content: val})}/>
          </div>
        </div>
        <Modal
          title="新建"