2024-11-07

king

2024-11-07 a02fc6a77fa1b35c6516b2d37108d80e260c6c85

 src/views/menudesign/menuform/index.jsx

@@ -4,10 +4,13 @@
import { QuestionCircleOutlined } from '@ant-design/icons'

import Api from '@/api'
import options from '@/store/options.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { TextArea } = Input

const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))

class CustomMenuForm extends Component {
  static propTpyes = {
@@ -26,11 +29,15 @@
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props

    if (sessionStorage.getItem('thdMenuList') && sessionStorage.getItem('fstMenuList')) {
      this.setMenus()
    } else {
      this.getMenus()
    }

    window.GLOB.process = config.process === 'true'
  }

  setMenus = () => {
@@ -43,6 +50,7 @@
    thdMenuList = JSON.parse(thdMenuList)

    let thdMenu = null
    let firstId = ''

    thdMenuList.forEach(trd => {
      if (MenuId === trd.MenuID) {
@@ -58,17 +66,21 @@
          smenulist = item.children
        }
      })

      firstId = thdMenu.FstId || ''
    }

    this.props.updateConfig({...config, fstMenuId: thdMenu ? thdMenu.FstId : ''})
    if (firstId !== config.fstMenuId) {
      this.props.updateConfig({...config, fstMenuId: firstId})
    }

    this.setState({
      fstMenuId: thdMenu ? thdMenu.FstId : '',
      fstMenuId: firstId,
      menulist,
      smenulist
    }, () => {
      this.props.form.setFieldsValue({
        fstMenuId: thdMenu ? thdMenu.FstId : '',
        fstMenuId: firstId,
        parentId: thdMenu ? thdMenu.ParentId : ''
      })
    })
@@ -77,7 +89,7 @@
  getMenus = () => {
    const { MenuId, config } = this.props

    Api.getSystemConfig({func: 's_get_pc_menus', systemType: options.sysType, debug: 'Y'}).then(result => {
    Api.getCloudConfig({func: 's_get_pc_menus', systemType: window.GLOB.sysType, debug: 'Y'}).then(result => {
      if (result.status) {
        let thdMenu = null
        let thdMenuList = []
@@ -113,14 +125,14 @@
                    EasyCode: trd.EasyCode,
                    value: trd.MenuID,
                    label: trd.MenuName,
                    type: 'CommonTable',
                    type: 'CustomPage',
                    disabled: false
                  }

                  if (trd.PageParam) {
                    try {
                      trd.PageParam = JSON.parse(trd.PageParam)
                      trdItem.type = trd.PageParam.Template || 'CommonTable'
                      trdItem.type = trd.PageParam.Template || 'CustomPage'
                    } catch (e) {

                    }
@@ -142,24 +154,29 @@
        })

        let smenulist = []
        let firstId = ''
        if (thdMenu) {
          menulist.forEach(item => {
            if (item.MenuID === thdMenu.FstId) {
              smenulist = item.children
            }
          })
          firstId = thdMenu.FstId || ''
        }
        sessionStorage.setItem('fstMenuList', JSON.stringify(menulist))
        sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
        this.props.updateConfig({...config, fstMenuId: thdMenu ? thdMenu.FstId : ''})

        if (firstId !== config.fstMenuId) {
          this.props.updateConfig({...config, fstMenuId: firstId})
        }

        this.setState({
          fstMenuId: thdMenu ? thdMenu.FstId : '',
          fstMenuId: firstId,
          menulist,
          smenulist
        }, () => {
          this.props.form.setFieldsValue({
            fstMenuId: thdMenu ? thdMenu.FstId : '',
            fstMenuId: firstId,
            parentId: thdMenu ? thdMenu.ParentId : ''
          })
        })
@@ -173,7 +190,6 @@
    })
  }

  // 一二级菜单切换
  selectChange = (key, value) => {
    const { config } = this.props
    const { menulist } = this.state
@@ -193,45 +209,16 @@
        this.props.form.setFieldsValue({parentId: _id})
        this.props.updateConfig({...config, fstMenuId: value, parentId: _id})
      })
    } else if (key === 'parentId') {
      this.props.updateConfig({...config, parentId: value})
    } else if (key === 'cacheUseful') {
      this.props.updateConfig({...config, cacheUseful: value})
    } else if (key === 'timeUnit') {
      this.props.updateConfig({...config, timeUnit: value})
    } else if (key === 'OpenType') {
      this.props.updateConfig({...config, OpenType: value})
    } else if (key === 'hidden') {
      this.props.updateConfig({...config, hidden: value})
    } else if (key === 'permission') {
      this.props.updateConfig({...config, permission: value})
    } else {
      if (key === 'cacheTime' || key === 'minWidth' || key === 'localCacheTime') {
        if (typeof(value) !== 'number') {
          value = ''
        }
      } else if (key === 'process') {
        window.GLOB.process = value === 'true'
      }
      this.props.updateConfig({...config, [key]: value})
    }
  }

  // 菜单名称
  changeName = (e) => {
    this.props.updateConfig({...this.props.config, MenuName: e.target.value})
  }

  // 菜单参数
  changeNo = (e) => {
    this.props.updateConfig({...this.props.config, MenuNo: e.target.value})
  }

  // 助记码
  changeEasyCode = (e) => {
    this.props.updateConfig({...this.props.config, easyCode: e.target.value})
  }

  changeRemark = (e) => {
    this.props.updateConfig({...this.props.config, Remark: e.target.value})
  }

  changeCacheDay = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
    }
    this.props.updateConfig({...this.props.config, cacheTime: val})
  }

  render() {
@@ -304,7 +291,7 @@
                    message: '请输入菜单名称!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)}
              })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('MenuName', e.target.value)}}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
@@ -317,41 +304,20 @@
                    message: '请输入菜单参数!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)}
              })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('MenuNo', e.target.value)}}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="打开方式">
              {getFieldDecorator('OpenType', {
                initialValue: config.OpenType || 'newtab',
                rules: [
                  {
                    required: true,
                    message: '请选择打开方式!'
                  }
                ]
                rules: [{ required: true, message: '请选择打开方式!' }]
              })(
                <Radio.Group onChange={(e) => {this.selectChange('OpenType', e.target.value)}}>
                  <Radio value="newtab">标签页</Radio>
                  <Radio value="newpage">新页面</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <QuestionCircleOutlined className="mk-form-tip" />
                缓存数据
              </Tooltip>
            }>
              {getFieldDecorator('cacheUseful', {
                initialValue: config.cacheUseful || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('cacheUseful', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
                <Select onChange={(value) => {this.selectChange('OpenType', value)}}>
                  <Select.Option value="newtab">标签页</Select.Option>
                  <Select.Option value="newpage">新页面（标签页）</Select.Option>
                  <Select.Option value="view">新页面（全屏）</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
@@ -372,14 +338,80 @@
              )}
            </Form.Item>
          </Col>
          {config.permission !== 'false' ? <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="是否检验后端sql的权限，使用后端sql脚本时有效。">
                <QuestionCircleOutlined className="mk-form-tip" />
                sql验证
              </Tooltip>
            }>
              {getFieldDecorator('sqlperm', {
                initialValue: config.sqlperm || 'true'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('sqlperm', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="数据会缓存到用户本地，方便页面快速呈现。">
                <QuestionCircleOutlined className="mk-form-tip" />
                本地缓存
              </Tooltip>
            }>
              {getFieldDecorator('cacheLocal', {
                initialValue: config.cacheLocal || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('cacheLocal', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {config.cacheLocal === 'true' ? <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="设置本地缓存时长后，在缓存期限内不向后台请求数据，时长最大为5天（即7200分钟）。注：时长为空时缓存数据只用于页面快速呈现，不影响接口请求。">
                <QuestionCircleOutlined className="mk-form-tip" />
                时长(分)
              </Tooltip>
            }>
              {getFieldDecorator('localCacheTime', {
                initialValue: config.localCacheTime
              })(
                <InputNumber min={1} max={7200} precision={0} onChange={(val) => {this.selectChange('localCacheTime', val)}}/>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <QuestionCircleOutlined className="mk-form-tip" />
                后端缓存
              </Tooltip>
            }>
              {getFieldDecorator('cacheUseful', {
                initialValue: config.cacheUseful || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('cacheUseful', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {config.cacheUseful === 'true' ? <Col span={24}>
            <Form.Item label="单位">
              {getFieldDecorator('timeUnit', {
                initialValue: config.timeUnit || 'day'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('timeUnit', e.target.value)}}>
                <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.selectChange('timeUnit', e.target.value)}}>
                  <Radio value="day">天</Radio>
                  <Radio value="hour">小时</Radio>
                  <Radio value="minute">分钟</Radio>
                </Radio.Group>
              )}
            </Form.Item>
@@ -395,15 +427,63 @@
                  }
                ]
              })(
                <InputNumber min={1} max={config.timeUnit !== 'hour' ? 7 : 23} precision={0} onChange={this.changeCacheDay}/>
                <InputNumber min={1} max={config.timeUnit === 'day' ? 7 : (config.timeUnit === 'hour' ? 23 : 59)} precision={0} onChange={(val) => {this.selectChange('cacheTime', val)}}/>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="开启后可在按钮及数据源设置流程参数。">
                <QuestionCircleOutlined className="mk-form-tip" />
                工作流
              </Tooltip>
            }>
              {getFieldDecorator('process', {
                initialValue: config.process || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('process', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="数据加载时的遮罩是否显示。">
                <QuestionCircleOutlined className="mk-form-tip" />
                加载遮罩
              </Tooltip>
            }>
              {getFieldDecorator('mask', {
                initialValue: config.mask || 'true'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('mask', e.target.value)}}>
                  <Radio value="true">显示</Radio>
                  <Radio value="false">隐藏</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="如果页面内容在窗口中无法完全展示，可设置最小宽度，实现页面的横向滚动。">
                <QuestionCircleOutlined className="mk-form-tip" />
                最小宽度
              </Tooltip>
            }>
              {getFieldDecorator('minWidth', {
                initialValue: config.minWidth
              })(
                <InputNumber min={0} precision={0} onChange={(val) => {this.selectChange('minWidth', val)}}/>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="助记码">
              {getFieldDecorator('easyCode', {
                initialValue: config.easyCode
              })(<Input placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>)}
              })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('easyCode', e.target.value)}}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
@@ -413,7 +493,7 @@
              }} />
            </Form.Item>
          </Col>
          <Col span={24}>
          <Col span={24} className="red-font">
            <Form.Item label="备注">
              {getFieldDecorator('Remark', {
                initialValue: config.Remark || '',
@@ -423,7 +503,17 @@
                    message: '备注最多512个字符！'
                  }
                ]
              })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
              })(<TextArea rows={2} placeholder={''} onChange={(e) => {this.selectChange('Remark', e.target.value)}}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item style={{marginBottom: '0px'}} label="菜单颜色">
              <ColorSketch allowClear={true} value={config.menuColor || ''} onChange={(val) => {this.selectChange('menuColor', val)}} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item style={{marginBottom: '0px'}} label="系统色">
              <SysColorSketch onChange={(val) => {this.selectChange('menuColor', val)}} />
            </Form.Item>
          </Col>
        </Row>