2023-11-03

king

2023-11-03 c4143d291e70b3ccff023a5a3e09f49889f5daa0

 src/views/tabledesign/menuform/index.jsx

@@ -1,69 +1,243 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select } from 'antd'
import { Form, Row, Col, Input, Select, notification, Switch, Radio } from 'antd'

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

const { TextArea } = Input

class MainSearch extends Component {
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))

class CustomMenuForm extends Component {
  static propTpyes = {
    menu: PropTypes.object,      // 菜单信息
    inputSubmit: PropTypes.func  // 回车提交
    config: PropTypes.object,
    MenuId: PropTypes.string,
    MenuName: PropTypes.string,
    MenuNo: PropTypes.string,
    parentId: PropTypes.string,
    updateConfig: PropTypes.func
  }

  state = {
    supMenuList: []
    fstMenuId: '',
    menulist: [],
    smenulist: []
  }

  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 = () => {
    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
        }
      })
    }

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

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

  changeMenu = (val) => {
    const { menu } = this.state
  getMenus = () => {
    const { MenuId, config } = this.props

    let submenu = menu.fstMenuList.filter(item => item.MenuID === val)[0]
    Api.getCloudConfig({func: 's_get_pc_menus', systemType: window.GLOB.sysType, debug: 'Y'}).then(result => {
      if (result.status) {
        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 (submenu) {
                  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 fstItem
        })

        let smenulist = []
        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: thdMenu ? thdMenu.FstId : '',
          menulist,
          smenulist
        }, () => {
          this.props.form.setFieldsValue({
            fstMenuId: thdMenu ? thdMenu.FstId : '',
            parentId: thdMenu ? thdMenu.ParentId : ''
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

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

    if (key === 'fstMenuId') {
      let smenulist = []
      menulist.forEach(item => {
        if (item.MenuID === value) {
          smenulist = item.children
        }
      })

      this.setState({
        supMenuList: submenu.children
        smenulist
      }, () => {
        this.props.form.setFieldsValue({ParentID: submenu.children[0] ? submenu.children[0].MenuID : ''})
        let _id = smenulist[0] ? smenulist[0].MenuID : ''
        this.props.form.setFieldsValue({parentId: _id})
        this.props.updateConfig({...config, fstMenuId: value, parentId: _id})
      })
    } else {
      this.setState({
        supMenuList: []
      }, () => {
        this.props.form.setFieldsValue({ParentID: ''})
      })
      if (key === 'process') {
        window.GLOB.process = value === 'true'
      }

      this.props.updateConfig({...config, [key]: value})
    }
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  // 菜单名称
  changeName = (e) => {
    this.props.updateConfig({...this.props.config, MenuName: e.target.value})
  }

  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    
    this.props.inputSubmit && this.props.inputSubmit()
  // 菜单参数
  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() {
    const { MenuName, MenuNo, config } = this.props
    const { menulist, smenulist } = this.state
    const { getFieldDecorator } = this.props.form
    const { menu } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -76,100 +250,148 @@
    }

    return (
      <Form {...formItemLayout} style={{paddingRight: '20px'}} onKeyDown={this.onEnterSubmit}>
        <Row gutter={24}>
          <Col span={22}>
            <Form.Item label={'一级菜单'}>
      <Form {...formItemLayout} className="custom-menu-form">
        <Row>
          <Col span={24}>
            <Form.Item label="一级菜单">
              {getFieldDecorator('fstMenuId', {
                initialValue: menu.fstMenuId,
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请选择上级菜单!'
                    message: '请选择一级菜单!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={this.changeMenu}
                >
                  {menu.fstMenuList.map(option =>
                    <Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
                <Select onChange={(value) => {this.selectChange('fstMenuId', value)}}>
                  {menulist.map(option =>
                    <Select.Option key={option.MenuID} value={option.MenuID}>
                      {option.MenuName}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={22}>
            <Form.Item label={'二级菜单'}>
              {getFieldDecorator('ParentID', {
                initialValue: menu.ParentId,
          <Col span={24}>
            <Form.Item label="二级菜单">
              {getFieldDecorator('parentId', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请选择上级菜单!'
                    message: '请选择二级菜单!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {menu.supMenuList.map(option =>
                    <Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
                <Select onChange={(value) => {this.selectChange('parentId', value)}}>
                  {smenulist.map(option =>
                    <Select.Option key={option.MenuID} value={option.MenuID}>
                      {option.MenuName}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={22}>
            <Form.Item label={'菜单名称'}>
          <Col span={24}>
            <Form.Item label="菜单名称">
              {getFieldDecorator('MenuName', {
                initialValue: menu.MenuName || '',
                initialValue: MenuName,
                rules: [
                  {
                    required: true,
                    message: '请输入菜单名称!'
                  }
                ]
              })(<Input placeholder="" autoFocus autoComplete="off" />)}
              })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)}
            </Form.Item>
          </Col>
          <Col span={22}>
            <Form.Item label={'菜单参数'}>
          <Col span={24}>
            <Form.Item label="菜单参数">
              {getFieldDecorator('MenuNo', {
                initialValue: menu.MenuNo || '',
                initialValue: MenuNo,
                rules: [
                  {
                    required: true,
                    message: '请输入菜单参数!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
              })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)}
            </Form.Item>
          </Col>
          {menu.Template === 'NewPage' ? <Col span={22}>
            <Form.Item label={'链接地址'}>
              {getFieldDecorator('url', {
                initialValue: menu.url || '',
          <Col span={24}>
            <Form.Item label="打开方式">
              {getFieldDecorator('OpenType', {
                initialValue: config.OpenType || 'newtab',
                rules: [
                  {
                    required: true,
                    message: '请输入页面地址!'
                  },
                  {
                    max: 1024,
                    message: '地址最长为1024个字符!'
                    message: '请选择打开方式!'
                  }
                ]
              })(<TextArea rows={2} />)}
              })(
                <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> : null}
          </Col>
          <Col span={24}>
            <Form.Item label="工作流">
              {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={'隐藏菜单'}>
              <Switch checkedChildren={'是'} checked={config.hidden === 'true'} unCheckedChildren={'否'} onChange={(value) => {
                this.selectChange('hidden', value + '')
              }} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="助记码">
              {getFieldDecorator('easyCode', {
                initialValue: config.easyCode
              })(<Input placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>)}
            </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>
          <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>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)
export default Form.create()(CustomMenuForm)