2024-11-07

king

2024-11-07 a02fc6a77fa1b35c6516b2d37108d80e260c6c85

 src/views/menudesign/homeform/index.jsx

@@ -1,38 +1,114 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Radio, Icon, Tooltip, InputNumber } from 'antd'
import { Form, Row, Col, Radio, Tooltip, InputNumber, notification } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import './index.scss'
import Api from '@/api'
// import './index.scss'

class CustomMenuForm extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    config: PropTypes.object,
    updateConfig: PropTypes.func
  }

  state = {}

  UNSAFE_componentWillMount () {
    if (sessionStorage.getItem('thdMenuList') && sessionStorage.getItem('fstMenuList')) {

    } else {
      this.getMenus()
    }
  }

  getMenus = () => {
    Api.getCloudConfig({func: 's_get_pc_menus', systemType: window.GLOB.sysType, debug: 'Y'}).then(result => {
      if (result.status) {
        let thdMenuList = []
        let menulist = result.fst_menu.map(fst => {
          let fstItem = {
            MenuID: fst.MenuID,
            MenuName: fst.MenuName,
            value: fst.MenuID,
            label: fst.MenuName,
            isLeaf: false,
            children: []
          }
    
          if (fst.snd_menu) {
            fstItem.children = fst.snd_menu.map(snd => {
              let sndItem = {
                ParentId: fst.MenuID,
                MenuID: snd.MenuID,
                MenuName: snd.MenuName,
                value: snd.MenuID,
                label: snd.MenuName,
                children: []
              }
    
              if (snd.trd_menu) {
                sndItem.children = snd.trd_menu.map(trd => {
                  let trdItem = {
                    FstId: fst.MenuID,
                    ParentId: snd.MenuID,
                    MenuID: trd.MenuID,
                    MenuName: trd.MenuName,
                    MenuNo: trd.MenuNo,
                    EasyCode: trd.EasyCode,
                    value: trd.MenuID,
                    label: trd.MenuName,
                    type: 'CustomPage',
                    disabled: false
                  }

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

                    }
                  }

                  thdMenuList.push(trdItem)

                  return trdItem
                })
              }
              return sndItem
            })
          }
          return fstItem
        })

        sessionStorage.setItem('fstMenuList', JSON.stringify(menulist))
        sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
      } else {
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  // 一二级菜单切换
  selectChange = (key, value) => {
    const { config } = this.props

    if (key === 'cacheUseful') {
      this.props.updateConfig({...config, cacheUseful: value})
    } else if (key === 'diffUser') {
      this.props.updateConfig({...config, diffUser: value})
    } else if (key === 'timeUnit') {
      this.props.updateConfig({...config, timeUnit: value})
    if (key === 'cacheTime' || key === 'localCacheTime') {
      if (typeof(value) !== 'number') {
        value = ''
      }
    }
  }

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

  render() {
    const { dict, config } = this.props
    const { config } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -46,13 +122,57 @@
    }

    return (
      <Form {...formItemLayout} className="custom-menu-form">
      <Form {...formItemLayout}>
        <Row>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="首页不进行权限控制。">
                <QuestionCircleOutlined className="mk-form-tip" />
                权限验证
              </Tooltip>
            }>
              <Radio.Group value={'false'} disabled={true}>
                <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('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="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <Icon type="question-circle" />
                缓存数据
                <QuestionCircleOutlined className="mk-form-tip" />
                后端缓存
              </Tooltip>
            }>
              {getFieldDecorator('cacheUseful', {
@@ -66,30 +186,14 @@
            </Form.Item>
          </Col>
          {config.cacheUseful === 'true' ? <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不同用户，查询信息是否存在差异。">
                <Icon type="question-circle" />
                区分用户
              </Tooltip>
            }>
              {getFieldDecorator('diffUser', {
                initialValue: config.diffUser || 'true'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('diffUser', e.target.value)}}>
                  <Radio value="true">是</Radio>
                  <Radio value="false">否</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {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>
@@ -101,14 +205,31 @@
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + '时长!'
                    message: '请输入时长!'
                  }
                ]
              })(
                <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('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>
        </Row>
      </Form>
    )