2022-08-25

king

2022-08-25 04dc8530bf6241573fe788e0e74a5cf4d9a8e0b3

 src/views/tabledesign/menuform/index.jsx

@@ -1,69 +1,190 @@
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, Radio, Tooltip, 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 MainSearch extends Component {
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 () {
    this.setState({
      supMenuList: this.props.menu.supMenuList
    })
    const { MenuId, config } = this.props
    Api.getSystemConfig({func: 's_get_pc_menus', systemType: options.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: []
  }

  changeMenu = (val) => {
    const { menu } = this.state
          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: []
              }

    let submenu = menu.fstMenuList.filter(item => item.MenuID === val)[0]
              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: trd.MenuID === MenuId
                    disabled: false
                  }

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

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

                    }
                  }

                  thdMenuList.push(trdItem)

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

        let smenulist = []
        menulist.forEach(item => {
          if (thdMenu && (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({
        supMenuList: submenu.children
          fstMenuId: thdMenu ? thdMenu.FstId : '',
          menulist,
          smenulist
      }, () => {
        this.props.form.setFieldsValue({ParentID: submenu.children[0] ? submenu.children[0].MenuID : ''})
          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: []
        smenulist
      }, () => {
        this.props.form.setFieldsValue({ParentID: ''})
        let _id = smenulist[0] ? smenulist[0].MenuID : ''
        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 === '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})
    }
  }

  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
  // 菜单参数
  changeNo = (e) => {
    this.props.updateConfig({...this.props.config, MenuNo: e.target.value})
  }
    
    this.props.inputSubmit && this.props.inputSubmit()
  // 助记码
  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 +197,142 @@
    }

    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} />)}
              })(
                <Radio.Group onChange={(e) => {this.selectChange('OpenType', e.target.value)}}>
                  <Radio value="newtab">标签页</Radio>
                  <Radio value="newpage">新页面</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          </Col>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="跳过权限验证时，页面中组件及按钮不在进行权限控制。">
                <QuestionCircleOutlined className="mk-form-tip" />
                权限验证
              </Tooltip>
            }>
              {getFieldDecorator('permission', {
                initialValue: config.permission || 'true'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('permission', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </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}>
            <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('Remark', {
                initialValue: config.Remark || '',
                rules: [
                  {
                    max: 512,
                    message: '备注最多512个字符！'
                  }
                ]
              })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )
  }
}

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