2021-04-09

king

2021-04-09 92a9b175fda139d6608c53af62e4d8b7b1c926cf

 src/menu/datasource/verifycard/settingform/index.jsx

@@ -1,9 +1,10 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, InputNumber, Select } from 'antd'
import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, Select, InputNumber, Cascader } from 'antd'

import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import MenuUtils from '@/utils/utils-custom.js'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

@@ -13,37 +14,45 @@
    menu: PropTypes.any,          // 菜单配置信息
    config: PropTypes.object,     // 组件配置
    setting: PropTypes.object,    // 数据源配置
    modules: PropTypes.array,     // 可绑定的上级组件
    columns: PropTypes.array,     // 列设置
    scripts: PropTypes.array,     // 自定义脚本
  }

  state = {
    interType: this.props.setting.interType || 'system',
    supModule: '',
    modules: []
    laypage: this.props.setting.laypage || 'true',
    modules: [],
    usefulFields: [],
    useMSearch: this.props.setting.useMSearch || 'false',
    supModule: this.props.setting.supModule || []
  }

  UNSAFE_componentWillMount () {
    const { menu, setting, config } = this.props
    let supModule = setting.supModule || ''
    let modules = []
    const { menu, config } = this.props

    menu.components.forEach(item => {
      if (!item.switchable || !item.setting || !item.setting.name || item.uuid === config.uuid) return

      modules.push({
        value: item.uuid,
        text: item.setting.name
      })
    })

    if (supModule && supModule !== 'empty') {
      if (modules.filter(item => item.value === supModule).length === 0) {
        supModule = ''
      }
    let modules = MenuUtils.getSupModules(menu.components, config.uuid)
    if (!modules) {
      modules = []
    }

    this.setState({supModule, modules})
    modules.unshift({
      value: 'empty',
      label: '无'
    })

    let usefulFields = sessionStorage.getItem('permFuncField')
    if (usefulFields) {
      try {
        usefulFields = JSON.parse(usefulFields)
      } catch {
        usefulFields = []
      }
    } else {
      usefulFields = []
    }

    this.setState({modules, usefulFields})
  }

  handleConfirm = () => {
@@ -126,10 +135,14 @@
    }
  }

  changeSupModule = (val) => {
    this.setState({supModule: val})
  }

  render() {
    const { setting, menu, columns, config } = this.props
    const { setting, columns, config } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, supModule, modules } = this.state
    const { interType, modules, useMSearch, laypage, supModule, usefulFields } = this.state

    const formItemLayout = {
      labelCol: {
@@ -145,9 +158,9 @@
    let tooltip = null
    let rules = []

    if (menu.permFuncField && menu.permFuncField.length > 0) {
      tooltip = '开头可用字符：' + menu.permFuncField.join(', ')
      let str = '^(' + menu.permFuncField.join('|') + ')'
    if (usefulFields.length > 0) {
      tooltip = '开头可用字符：' + usefulFields.join(', ')
      let str = '^(' + usefulFields.join('|') + ')'
      let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')

      rules.push({
@@ -161,49 +174,6 @@
        <Form {...formItemLayout} className="model-setting-form">
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label="标题">
                {getFieldDecorator('title', {
                  initialValue: setting.title
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="用于组件间的区分。">
                  <Icon type="question-circle" />
                  组件名称
                </Tooltip>
              }>
                {getFieldDecorator('name', {
                  initialValue: setting.name,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '组件名称!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="栅格布局，每行等分24份。">
                  <Icon type="question-circle" />
                  宽度
                </Tooltip>
              }>
                {getFieldDecorator('span', {
                  initialValue: setting.span || 12,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '宽度!'
                    }
                  ]
                })(<InputNumber min={1} max={24} precision={0} />)}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="表名">
                {getFieldDecorator('tableName', {
                  initialValue: setting.tableName,
@@ -212,6 +182,10 @@
                      required: true,
                      message: this.props.dict['form.required.input'] + '表名!'
                    },
                    {
                      max: 50,
                      message: '表名最长为50个字符!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
@@ -234,6 +208,28 @@
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {interType === 'system' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'自定义脚本中的变量（除报错及可用字段外），需以此标识开头。'}>
                  <Icon type="question-circle" />
                  变量标识
                </Tooltip>
              }>
                {getFieldDecorator('varMark', {
                  initialValue: setting.varMark || '',
                  rules: [
                    {
                      pattern: /^[a-zA-Z_]*$/ig,
                      message: '请使用字母或_'
                    },
                    {
                      max: 3,
                      message: '最多三个字符。'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <Col span={8}>
              <Form.Item label={tooltip ?
                <Tooltip placement="topLeft" title={tooltip}>
@@ -288,18 +284,6 @@
                })(<CodeMirror />)}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="高度为空时，使用系统自适应设置。">
                  <Icon type="question-circle" />
                  高度
                </Tooltip>
              }>
                {getFieldDecorator('height', {
                  initialValue: setting.height || 400
                })(<InputNumber min={150} max={1500} precision={0} />)}
              </Form.Item>
            </Col>
            {interType === 'system' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
@@ -335,7 +319,7 @@
            {config.format === 'array' ? <Col span={8}>
              <Form.Item label="默认排序">
                {getFieldDecorator('order', {
                  initialValue: setting.order || '',
                  initialValue: setting.order || 'ID desc',
                  rules: [
                    {
                      required: true,
@@ -360,7 +344,7 @@
              <Form.Item label={
                <Tooltip placement="topLeft" title={'该组件如果受其他组件控制，请选项相应的组件，没有时选“无”。'}>
                  <Icon type="question-circle" />
                  上级模块
                  上级组件
                </Tooltip>
              }>
                {getFieldDecorator('supModule', {
@@ -368,22 +352,46 @@
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '上级模块!'
                      message: this.props.dict['form.required.select'] + '上级组件!'
                    }
                  ]
                })(
                  <Select>
                    <Select.Option key="empty" value="empty"> 无 </Select.Option>
                    {modules.map((option, i) =>
                      <Select.Option key={i} value={option.value}>
                        {option.text}
                      </Select.Option>
                    )}
                  </Select>
                  <Cascader options={modules} onChange={this.changeSupModule} expandTrigger="hover" placeholder="" />
                )}
              </Form.Item>
            </Col>
            {!config.pageable ? <Col span={8}>
            {config.pageable ? <Col span={8}>
              <Form.Item label="分页">
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'true'
                })(
                  <Radio.Group onChange={(e) => this.setState({laypage: e.target.value})}>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.pageable && laypage !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择分页时有效。">
                  <Icon type="question-circle" />
                  每页数量
                </Tooltip>
              }>
                {getFieldDecorator('pageSize', {
                  initialValue: setting.pageSize || 10,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '每页数量!'
                    }
                  ]
                })(<InputNumber min={1} max={500} precision={0} />)}
              </Form.Item>
            </Col> : null}
            {/* 1、不分页且不存在上级模块 */}
            {(!config.pageable || (config.pageable && laypage === 'false')) && (!supModule || supModule.length === 0 || supModule[0] === 'empty') ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时，是否与其他组件一同加载数据，注：仅在使用系统函数，且初始化加载数据时有效，分页请求时无效。'}>
                  <Icon type="question-circle" />
@@ -400,10 +408,32 @@
                )}
              </Form.Item>
            </Col> : null}
            {config.pageable ? <Col span={8}>
              <Form.Item label="分页">
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'false'
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'优先使用同级的搜索条件组件，同级搜索不存在时，依次向上选取，与当前组件的搜索条件一同用作数据过滤（当前组件的搜索条件优先）。'}>
                  <Icon type="question-circle" />
                  外部搜索
                </Tooltip>
              }>
                {getFieldDecorator('useMSearch', {
                  initialValue: setting.useMSearch || 'true'
                })(
                  <Radio.Group onChange={(e) => this.setState({useMSearch: e.target.value})}>
                    <Radio value="true">使用</Radio>
                    <Radio value="false">不使用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {useMSearch === 'true' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'外层搜索条件改变时，是否刷新当前组件数据。'}>
                  <Icon type="question-circle" />
                  同步刷新
                </Tooltip>
              }>
                {getFieldDecorator('syncRefresh', {
                  initialValue: setting.syncRefresh || 'true'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
@@ -412,23 +442,6 @@
                )}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'使用主搜索条件（存在时），主搜索条件与组件的搜索条件会一同用作数据过滤（组件的搜索条件优先）。'}>
                  <Icon type="question-circle" />
                  主搜索
                </Tooltip>
              }>
                {getFieldDecorator('useMSearch', {
                  initialValue: setting.useMSearch || 'false'
                })(
                  <Radio.Group>
                    <Radio value="true">使用</Radio>
                    <Radio value="false">不使用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="初始化数据">
                {getFieldDecorator('onload', {