2020-01-06

king

2020-01-06 db18f67e6a9ec7be3446ebfb1592809b3c3dcb7d

2020-01-06

 src/templates/comtableconfig/actionform/index.jsx

@@ -454,6 +454,7 @@
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.verify = this.props.card.verify || null

          if (values.OpenType === 'excelIn' || values.OpenType === 'excelOut') {
            values.position = 'toolbar'

 src/templates/comtableconfig/index.jsx

@@ -17,6 +17,7 @@
import ColspanForm from '@/templates/tableshare/colspanform'
import GridBtnForm from '@/templates/tableshare/gridbtnform'
import EditCard from '@/templates/tableshare/editcard'
import VerifyCard from '@/templates/tableshare/verifycard'
import MenuForm from '@/templates/tableshare/menuform'
import SourceElement from '@/templates/tableshare/dragelement/source'
import zhCN from '@/locales/zh-CN/comtable.js'
@@ -1839,10 +1840,38 @@
   * @description 验证信息配置
   */
  profileAction = (element) => {
    // this.setState({
    //   profileVisible: true,
    //   card: element
    // })
    this.setState({
      profileVisible: true,
      card: element
    })
  }

  /**
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { card } = this.state
    let config = JSON.parse(JSON.stringify(this.state.config))
    let _verify = this.verifyRef.state.verify

    config.action = config.action.map(item => {
      if (item.uuid === card.uuid) {
        item.verify = _verify
      }

      return item
    })

    this.setState({
      profileVisible: false,
      config: config,
      card: '',
      actionloading: true
    }, () => {
      this.setState({
        actionloading: false
      })
    })
  }

  /**
@@ -3034,21 +3063,13 @@
          wrapClassName="common-table-fields-modal"
          title={'验证信息'}
          visible={this.state.profileVisible}
          width={'65vw'}
          width={'75vw'}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          cancelText={this.state.dict['header.close']}
          onOk={this.addFieldSubmit}
          onCancel={() => { // 取消添加
            this.setState({
              tableVisible: false,
              addType: ''
            })
          }}
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ profileVisible: false }) }}
          destroyOnClose
        >
          {this.state.addType && this.state.fields.length > 0 ?
            <EditCard data={this.state.fields} ref="searchcard" type={this.state.addType} dict={this.state.dict} /> : null
          }
          <VerifyCard card={this.state.card} wrappedComponentRef={(inst) => this.verifyRef = inst} dict={this.state.dict} />
        </Modal>
        {/* 设置全局配置及列表数据源 */}
        <Modal

 src/templates/comtableconfig/source.jsx

@@ -103,7 +103,8 @@
        pageTemplate: '',
        url: '',
        icon: 'plus',
        class: 'green'
        class: 'green',
        verify: null
      }, {
        origin: true,
        uuid: Utils.getuuid(),
@@ -125,7 +126,8 @@
        pageTemplate: '',
        url: '',
        icon: 'form',
        class: 'purple'
        class: 'purple',
        verify: null
      }, {
        origin: true,
        uuid: Utils.getuuid(),
@@ -147,7 +149,8 @@
        pageTemplate: '',
        url: '',
        icon: 'delete',
        class: 'red'
        class: 'red',
        verify: null
      }
    ],
    columns: [

 src/templates/modalconfig/dragelement/index.jsx

@@ -110,7 +110,7 @@
  let _cols = 24 / (setting.cols || 2)
  
  return (
    <div ref={drop} className="ant-row">
    <div ref={drop} className="ant-row modal-fields-row">
      {cards.map(card => (
        <Col key={card.uuid} span={_cols}>
          <Card

 src/templates/modalconfig/dragelement/index.scss

@@ -12,4 +12,7 @@
  line-height: 65px;
  text-align: center;
  color: #bcbcbc;
}
.modal-fields-row {
  padding-bottom: 35px;
}

 src/templates/subtableconfig/actionform/index.jsx

@@ -287,37 +287,6 @@
    }
  }

  // showError = () => {
  //   const { errorType } = this.state

  //   if (errorType === 'S') {
  //     notification.success({
  //       top: 92,
  //       message: '执行成功！',
  //       duration: 2
  //     })
  //   } else if (errorType === 'F') {
  //     notification.error({
  //       className: 'notification-custom-error',
  //       top: 92,
  //       message: '执行失败！',
  //       duration: 15
  //     })
  //   } else if (errorType === 'N') {
  //     notification.error({
  //       top: 92,
  //       message: '执行失败！',
  //       duration: 15
  //     })
  //   } else if (errorType === 'E') {
  //     Modal.error({
  //       title: '执行失败！'
  //     })
  //   } else if (errorType === 'NM') {
  //     message.error('执行失败！')
  //   }
  // }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
@@ -455,6 +424,7 @@
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.verify = this.props.card.verify || null

          if (values.OpenType === 'excelIn' || values.OpenType === 'excelOut') {
            values.position = 'toolbar'

 src/templates/subtableconfig/index.jsx

@@ -15,6 +15,7 @@
import ColspanForm from '@/templates/tableshare/colspanform'
import GridBtnForm from '@/templates/tableshare/gridbtnform'
import EditCard from '@/templates/tableshare/editcard'
import VerifyCard from '@/templates/tableshare/verifycard'
import MenuForm from '@/templates/tableshare/menuform'
import SourceElement from '@/templates/tableshare/dragelement/source'
import zhCN from '@/locales/zh-CN/comtable.js'
@@ -65,7 +66,8 @@
    delActions: [],          // 删除按钮列表
    funcLoading: false,      // 存储过程创建中
    showColumnName: false,   // 显示列字段名控制
    tabviews: []             // 所有标签页
    tabviews: [],            // 所有标签页
    profileVisible: false    // 验证信息模态框
  }

  /**
@@ -678,42 +680,6 @@
            text: this.state.dict['header.form.refresh.subgrid']
          }]
        },
        // {
        //   type: 'select',
        //   key: 'errorTip',
        //   label: this.state.dict['header.form.messageTip'],
        //   initVal: card.errorTip || 'E',
        //   tooltip: '该选项为提示效果展示，选择提示类型后，可点击按钮查看，自定义函数中设置 ErrCode 为（S、-1、E、N、F、NM）时，会以对应方式展示提示信息。',
        //   tooltipClass: 'middle',
        //   required: false,
        //   options: [{
        //     value: 'S',
        //     text: 'S(提醒框-0)'
        //   }, {
        //     value: '-1',
        //     text: '-1(不提示)'
        //   }, {
        //     value: 'N',
        //     text: 'N(提醒框-1)'
        //   }, {
        //     value: 'F',
        //     text: 'F(提醒框-2)'
        //   }, {
        //     value: 'E',
        //     text: 'E(确认框)'
        //   }, {
        //     value: 'NM',
        //     text: 'NM(顶部提示)'
        //   }]
        // },
        // {
        //   type: 'number',
        //   key: 'errorTime',
        //   label: this.state.dict['header.form.errorTime'],
        //   initVal: card.errorTime || 15,
        //   tooltip: '执行结果中设置 ErrCode 为 N 或 F 时有效',
        //   required: false
        // },
        {
          type: 'select',
          key: 'icon',
@@ -1649,6 +1615,44 @@
    })
  }

  /**
   * @description 验证信息配置
   */
  profileAction = (element) => {
    this.setState({
      profileVisible: true,
      card: element
    })
  }

  /**
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { card } = this.state
    let config = JSON.parse(JSON.stringify(this.state.config))
    let _verify = this.verifyRef.state.verify

    config.action = config.action.map(item => {
      if (item.uuid === card.uuid) {
        item.verify = _verify
      }

      return item
    })

    this.setState({
      profileVisible: false,
      config: config,
      card: '',
      actionloading: true
    }, () => {
      this.setState({
        actionloading: false
      })
    })
  }

  // changeTemplate = () => {
  //   this.props.handleConfig('template')
  // }
@@ -2507,6 +2511,7 @@
                    handleMenu={this.handleAction}
                    copyElement={(val) => this.handleAction(val, 'copy')}
                    deleteMenu={this.deleteElement}
                    profileMenu={this.profileAction}
                    placeholder={this.state.dict['header.form.action.placeholder']}
                  /> : null
                }
@@ -2613,6 +2618,19 @@
            <Empty />
          }
        </Modal>
        {/* 按钮使用系统存储过程时，验证信息模态框 */}
        <Modal
          wrapClassName="common-table-fields-modal"
          title={'验证信息'}
          visible={this.state.profileVisible}
          width={'75vw'}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ profileVisible: false }) }}
          destroyOnClose
        >
          <VerifyCard card={this.state.card} wrappedComponentRef={(inst) => this.verifyRef = inst} dict={this.state.dict} />
        </Modal>
        {/* 设置全局配置及列表数据源 */}
        <Modal
          title={this.state.dict['header.edit']}

 src/templates/subtableconfig/source.jsx

@@ -102,7 +102,8 @@
        errorTime: 15,
        OpenType: 'pop',
        icon: 'plus',
        class: 'green'
        class: 'green',
        verify: null
      }, {
        origin: true,
        uuid: Utils.getuuid(),
@@ -122,7 +123,8 @@
        errorTime: 15,
        OpenType: 'pop',
        icon: 'form',
        class: 'purple'
        class: 'purple',
        verify: null
      }, {
        origin: true,
        uuid: Utils.getuuid(),
@@ -142,7 +144,8 @@
        errorTime: 15,
        OpenType: 'prompt',
        icon: 'delete',
        class: 'red'
        class: 'red',
        verify: null
      }
    ],
    columns: [

 src/templates/tableshare/dragelement/index.jsx

@@ -115,6 +115,7 @@
        newcard.callbackFunc = ''
        newcard.pageTemplate = ''
        newcard.url = ''
        newcard.verify = null

        if (item.subType === 'excelIn' || item.subType === 'excelOut') {
          // 导入和导出excel，按钮名称直接为导入、导出

 src/templates/tableshare/verifycard/index.jsx

New file
@@ -0,0 +1,323 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Tabs, Row, Col, Radio, Input, Button, Select, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
import Utils from '@/utils/utils.js'
import './index.scss'

const { TabPane } = Tabs
const { TextArea } = Input

class VerifyCard extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    card: PropTypes.object
  }

  state = {
    verify: {}
  }

  UNSAFE_componentWillMount() {
    let _verify = this.props.card.verify || {}

    this.setState({
      verify: {
        invalid: _verify.invalid || 'false',
        unique: _verify.unique || 'false',
        accountdate: _verify.accountdate || 'false',
        customverifys: _verify.customverifys || []
      }
    })
  }

  handleConfirm = () => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.uuid = Utils.getuuid()
        verify.customverifys.push(values)

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

  onOptionChange = (e, key) => {
    const { verify } = this.state
    let value = e.target.value

    this.setState({
      verify: {...verify, [key]: value}
    })
  }

  handleDelete = (uuid) => {
    const { verify } = this.state
    verify.customverifys = verify.customverifys.filter(item => item.uuid !== uuid)

    this.setState({ verify: verify })
  }

  showError = (errorType) => {
    if (errorType === 'S') {
      notification.success({
        top: 92,
        message: '执行成功！',
        duration: 2
      })
    } else if (errorType === 'F') {
      notification.error({
        className: 'notification-custom-error',
        top: 92,
        message: '执行失败！',
        duration: 15
      })
    } else if (errorType === 'N') {
      notification.error({
        top: 92,
        message: '执行失败！',
        duration: 15
      })
    } else if (errorType === 'E') {
      Modal.error({
        title: '执行失败！'
      })
    } else if (errorType === 'NM') {
      message.error('执行失败！')
    }
  }

  timeChange = (val, type) => {
    const { verify } = this.state
    console.log(val)
    console.log(type)
    this.setState({
      verify: {...verify, [type]: val}
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { verify } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    let columns = [
      {
        title: 'SQL',
        dataIndex: 'sql',
        width: '50%'
      },
      {
        title: 'ErrorMessage',
        dataIndex: 'errmsg',
        width: '25%'
      },
      {
        title: 'ErrorCode',
        dataIndex: 'errorCode',
        width: '10%'
      },
      {
        title: '操作',
        align: 'center',
        width: '15%',
        dataIndex: 'operation',
        render: (text, record) =>
          (
            <Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record.uuid)}>
              <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
            </Popconfirm>
          )
      }
    ]

    return (
      <Tabs defaultActiveKey="1" className="verify-card-box" onChange={this.tabchange}>
        <TabPane tab="基础验证" key="1">
          <Form {...formItemLayout}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item label={'失效验证'}>
                  <Radio.Group value={verify.invalid} onChange={(e) => {this.onOptionChange(e, 'invalid')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={'唯一性验证'}>
                  <Radio.Group value={verify.unique} onChange={(e) => {this.onOptionChange(e, 'unique')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={'账期验证'}>
                  <Radio.Group value={verify.accountdate} onChange={(e) => {this.onOptionChange(e, 'accountdate')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </TabPane>
        <TabPane tab="自定义验证" key="2">
          <Form {...formItemLayout} className="custom-verify-form" id="verifycard1">
            <Row gutter={24}>
              <Col span={10} className="sql">
                <Form.Item label={'sql'}>
                  {getFieldDecorator('sql', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.input'] + 'sql!'
                      }
                    ]
                  })(<TextArea rows={3} />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label={'报错信息'}>
                  {getFieldDecorator('errmsg', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.input'] + '报错信息!'
                      }
                    ]
                  })(<Input placeholder="" autoComplete="off" />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label={'报错编码'}>
                  {getFieldDecorator('errorCode', {
                    initialValue: 'E',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.select'] + '报错编码!'
                      }
                    ]
                  })(
                    <Select
                      getPopupContainer={() => document.getElementById('verifycard1')}
                    >
                      <Select.Option value="E"> E </Select.Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={2} className="add">
                <Button onClick={this.handleConfirm} type="primary" className="add-row">
                  添加
                </Button>
              </Col>
            </Row>
          </Form>
          <Table
            bordered
            rowKey="uuid"
            className="custom-table"
            dataSource={verify.customverifys}
            columns={columns}
            pagination={false}
          />
        </TabPane>
        <TabPane tab="信息提示" key="3">
          <Form {...formItemLayout}>
            <Row gutter={24}>
              <Col offset={6} span={6}>
                <Form.Item label={'提示编码'}>
                  <span className="errorval"> S </span>
                  <Button onClick={() => {this.showError('S')}} type="primary" size="small">
                    查看
                  </Button>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={'停留时间'}>
                  <InputNumber defaultValue={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={'提示编码'}>
                  <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">
                    查看
                  </Button>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={'停留时间'}>
                  <InputNumber defaultValue={15} 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={'提示编码'}>
                  <span className="errorval"> F </span>
                  <Button onClick={() => {this.showError('F')}} type="primary" size="small">
                    查看
                  </Button>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label={'停留时间'}>
                  <InputNumber defaultValue={15} 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={'提示编码'}>
                  <span className="errorval"> E </span>
                  <Button onClick={() => {this.showError('E')}} type="primary" size="small">
                    查看
                  </Button>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col offset={6} span={6}>
                <Form.Item label={'提示编码'}>
                  <span className="errorval"> NM </span>
                  <Button onClick={() => {this.showError('NM')}} type="primary" size="small">
                    查看
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </TabPane>
      </Tabs>
    )
  }
}

export default Form.create()(VerifyCard)

 src/templates/tableshare/verifycard/index.scss

New file
@@ -0,0 +1,29 @@
.verify-card-box {
  .ant-tabs-nav-scroll {
    text-align: center;
  }
  .ant-tabs-content {
    min-height: 40vh;
  }
  .custom-verify-form {
    .sql {
      .ant-col-sm-8 {
        width: 25%;
      }
      .ant-col-sm-16 {
        width: 75%;
        padding-top: 4px;
      }
    }
    .add {
      padding-top: 4px;
    }
  }
  .custom-table .ant-empty {
    margin: 20px 8px!important;
  }
  .errorval {
    display: inline-block;
    width: 30px;
  }
}