2023-04-02

king

2023-04-02 24bfb39e86c7a265803486bc4b546ea2bfaef4a5

 src/views/menudesign/menuform/index.jsx

@@ -1,20 +1,21 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, notification, Radio, Icon, Tooltip, InputNumber } from 'antd'
import { Form, Row, Col, Input, Select, notification, Radio, Tooltip, InputNumber, Switch } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

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

const { TextArea } = Input

class CustomMenuForm extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    config: PropTypes.object,
    MenuId: PropTypes.string,
    MenuName: PropTypes.string,
    MenuNo: PropTypes.string,
    parentId: PropTypes.string,
    initMenuList: PropTypes.func,
    updateConfig: PropTypes.func
  }

@@ -25,48 +26,141 @@
  }

  UNSAFE_componentWillMount () {
    const { parentId } = this.props
    let param = {
      func: 's_Get_FSMenusForOpen',
      SndMenuID: parentId,
      TYPE: 20,
      TypeCharOne: 'PC'
    if (sessionStorage.getItem('thdMenuList') && sessionStorage.getItem('fstMenuList')) {
      this.setMenus()
    } else {
      this.getMenus()
    }
  }

  setMenus = () => {
    const { MenuId, config } = this.props

    let menulist = sessionStorage.getItem('fstMenuList')
    let thdMenuList = sessionStorage.getItem('thdMenuList')

    menulist = JSON.parse(menulist)
    thdMenuList = JSON.parse(thdMenuList)

    let thdMenu = null

    thdMenuList.forEach(trd => {
      if (MenuId === trd.MenuID) {
        thdMenu = trd
      }
    })

    let smenulist = []

    if (thdMenu) {
      menulist.forEach(item => {
        if (item.MenuID === thdMenu.FstId) {
          smenulist = item.children
        }
      })
    }

    Api.getSystemConfig(param).then(result => {
    this.props.updateConfig({...config, fstMenuId: thdMenu ? thdMenu.FstId : ''})

    this.setState({
      fstMenuId: thdMenu ? thdMenu.FstId : '',
      menulist,
      smenulist
    }, () => {
      this.props.form.setFieldsValue({
        fstMenuId: thdMenu ? thdMenu.FstId : '',
        parentId: thdMenu ? thdMenu.ParentId : ''
      })
    })
  }

  getMenus = () => {
    const { MenuId, config } = this.props

    Api.getSystemConfig({func: 's_get_pc_menus', systemType: options.sysType, debug: 'Y'}).then(result => {
      if (result.status) {
        let menulist = result.data.map(smenu => {
          let _smenu = {
            value: smenu.FstID,
            text: smenu.FstName,
            options: smenu.SndData.map(menu => {
              return {
                value: menu.SndID,
                text: menu.SndName,
        let thdMenu = null
        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: 'CommonTable',
                    disabled: false
                  }

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

                    }
                  }

                  if (MenuId === trd.MenuID) {
                    thdMenu = trdItem
                  }

                  thdMenuList.push(trdItem)

                  return trdItem
                })
              }
              return sndItem
            })
          }

          return _smenu
          return fstItem
        })

        let smenulist = []
        menulist.forEach(item => {
          if (item.value === result.FstIDSeleted) {
            smenulist = item.options
          }
        })

        this.props.initMenuList({fstMenuList: fromJS(menulist).toJS(), fstMenuId: result.FstIDSeleted})
        if (thdMenu) {
          menulist.forEach(item => {
            if (item.MenuID === thdMenu.FstId) {
              smenulist = item.children
            }
          })
        }
        sessionStorage.setItem('fstMenuList', JSON.stringify(menulist))
        sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
        this.props.updateConfig({...config, fstMenuId: thdMenu ? thdMenu.FstId : ''})

        this.setState({
          fstMenuId: result.FstIDSeleted,
          fstMenuId: thdMenu ? thdMenu.FstId : '',
          menulist,
          smenulist
        }, () => {
          this.props.form.setFieldsValue({
            fstMenuId: result.FstIDSeleted,
            parentId: parentId
            fstMenuId: thdMenu ? thdMenu.FstId : '',
            parentId: thdMenu ? thdMenu.ParentId : ''
          })
        })
      } else {
@@ -79,13 +173,6 @@
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { config } = this.props
    if (!config && nextProps.config) {
      this.props.form.setFieldsValue({easyCode: nextProps.config.easyCode})
    }
  }

  // 一二级菜单切换
  selectChange = (key, value) => {
    const { config } = this.props
@@ -94,15 +181,15 @@
    if (key === 'fstMenuId') {
      let smenulist = []
      menulist.forEach(item => {
        if (item.value === value) {
          smenulist = item.options
        if (item.MenuID === value) {
          smenulist = item.children
        }
      })

      this.setState({
        smenulist
      }, () => {
        let _id = smenulist[0] ? smenulist[0].value : ''
        let _id = smenulist[0] ? smenulist[0].MenuID : ''
        this.props.form.setFieldsValue({parentId: _id})
        this.props.updateConfig({...config, fstMenuId: value, parentId: _id})
      })
@@ -110,10 +197,16 @@
      this.props.updateConfig({...config, parentId: value})
    } else 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})
    } 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 === 'cacheLocal') {
      this.props.updateConfig({...config, cacheLocal: value})
    }
  }

@@ -132,6 +225,10 @@
    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 = ''
@@ -140,7 +237,7 @@
  }

  render() {
    const { dict, MenuName, MenuNo, config } = this.props
    const { MenuName, MenuNo, config } = this.props
    const { menulist, smenulist } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
@@ -158,20 +255,20 @@
      <Form {...formItemLayout} className="custom-menu-form">
        <Row>
          <Col span={24}>
            <Form.Item label={dict['mob.menu.first'] + dict['mob.menu']}>
            <Form.Item label="一级菜单">
              {getFieldDecorator('fstMenuId', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.select'] + dict['mob.menu.first'] + dict['mob.menu'] + '!'
                    message: '请选择一级菜单!'
                  }
                ]
              })(
                <Select onChange={(value) => {this.selectChange('fstMenuId', value)}}>
                  {menulist.map(option =>
                    <Select.Option key={option.value} value={option.value}>
                      {option.text}
                    <Select.Option key={option.MenuID} value={option.MenuID}>
                      {option.MenuName}
                    </Select.Option>
                  )}
                </Select>
@@ -179,20 +276,20 @@
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={dict['mob.menu.second'] + dict['mob.menu']}>
            <Form.Item label="二级菜单">
              {getFieldDecorator('parentId', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.select'] + dict['mob.menu.second'] + dict['mob.menu'] + '!'
                    message: '请选择二级菜单!'
                  }
                ]
              })(
                <Select onChange={(value) => {this.selectChange('parentId', value)}}>
                  {smenulist.map(option =>
                    <Select.Option key={option.value} value={option.value}>
                      {option.text}
                    <Select.Option key={option.MenuID} value={option.MenuID}>
                      {option.MenuName}
                    </Select.Option>
                  )}
                </Select>
@@ -200,36 +297,71 @@
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={dict['mob.menu'] + dict['mob.name']}>
            <Form.Item label="菜单名称">
              {getFieldDecorator('MenuName', {
                initialValue: MenuName,
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.name'] + '!'
                    message: '请输入菜单名称!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label={dict['mob.menu'] + dict['mob.param']}>
            <Form.Item label="菜单参数">
              {getFieldDecorator('MenuNo', {
                initialValue: MenuNo,
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.param'] + '!'
                    message: '请输入菜单参数!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="打开方式">
              {getFieldDecorator('OpenType', {
                initialValue: config.OpenType || 'newtab',
                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('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>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <Icon type="question-circle" />
                缓存数据
                <QuestionCircleOutlined className="mk-form-tip" />
                后端缓存
              </Tooltip>
            }>
              {getFieldDecorator('cacheUseful', {
@@ -242,23 +374,23 @@
              )}
            </Form.Item>
          </Col>
          {config.cacheUseful === 'true' ? <Col span={24}>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不同用户，查询信息是否存在差异。">
                <Icon type="question-circle" />
                区分用户
              <Tooltip placement="topLeft" title="跳过权限验证时，页面中组件及按钮不在进行权限控制。">
                <QuestionCircleOutlined className="mk-form-tip" />
                权限验证
              </Tooltip>
            }>
              {getFieldDecorator('diffUser', {
                initialValue: config.diffUser || 'true'
              {getFieldDecorator('permission', {
                initialValue: config.permission || 'true'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('diffUser', e.target.value)}}>
                  <Radio value="true">是</Radio>
                  <Radio value="false">否</Radio>
                <Radio.Group onChange={(e) => {this.selectChange('permission', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          </Col>
          {config.cacheUseful === 'true' ? <Col span={24}>
            <Form.Item label="单位">
              {getFieldDecorator('timeUnit', {
@@ -278,7 +410,7 @@
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + '时长!'
                    message: '请输入时长!'
                  }
                ]
              })(
@@ -287,12 +419,32 @@
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label={dict['mob.menu.easycode']}>
            <Form.Item label="助记码">
              {getFieldDecorator('easyCode', {
                initialValue: config.easyCode
              })(<Input placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="隐藏菜单">
              <Switch checkedChildren={'是'} checked={config.hidden === 'true'} unCheckedChildren={'否'} onChange={(value) => {
                this.selectChange('hidden', value + '')
              }} />
            </Form.Item>
          </Col>
          <Col span={24} className="red-font">
            <Form.Item label="备注">
              {getFieldDecorator('Remark', {
                initialValue: config.Remark || '',
                rules: [
                  {
                    max: 512,
                    message: '备注最多512个字符！'
                  }
                ]
              })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )