2021-12-31

king

2021-12-31 5354b15c8d1d67f822c1009b95619d6575204223

2021-12-31

 src/mob/components/navbar/normal-navbar/index.jsx

@@ -2,16 +2,15 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusOutlined } from '@ant-design/icons'

import asyncIconComponent from '@/utils/asyncIconComponent'
import MkIcon from '@/components/mk-icon'
import MKEmitter from '@/utils/events.js'
import getWrapForm from './options'
import './index.scss'

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const MenuComponent = asyncIconComponent(() => import('./menusetting'))
const MenuComponent = asyncIconComponent(() => import('./menus'))
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))

class NormalNavbar extends Component {
@@ -118,26 +117,6 @@
    MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'shadow'], card.style)
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

  changeMenu = (menu) => {
    if (menu.property === 'link') {
      window.open(menu.link)
    } else {
      MKEmitter.emit('changeEditMenu', {
        MenuID: menu.property === 'linkmenu' ? menu.linkMenuId : menu.MenuID,
        copyMenuId: menu.property === 'menu' ? menu.copyMenuId : '',
        MenuNo: menu.MenuNo,
        MenuName: menu.name,
      })
    }
  }

  getWrapForms = () => {
    const { wrap } = this.state.card

@@ -155,10 +134,10 @@
    _style.height = card.wrap.height

    return (
      <div className="normal-navbar-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="normal-navbar-edit-box" style={_style} id={card.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <MenuComponent config={card} updateConfig={this.updateComponent} />
            <PlusOutlined className="plus" title="添加菜单" onClick={() => MKEmitter.emit('addmobmenu')}/>
            <NormalForm title="菜单栏设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
@@ -170,21 +149,7 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="menu">
          {card.menus.map(menu => {
            return (
              <div key={menu.MenuID} className="am-tab-bar-tab" onDoubleClick={() => this.changeMenu(menu)}>
                {menu.icon ? <div className="am-tab-bar-tab-icon">
                  <span className="am-badge am-tab-bar-tab-badge tab-badge">
                    <MkIcon type={menu.icon} />
                    {menu.tip ? <sup className="am-badge-text"></sup> : null}
                  </span>
                </div> : null}
                <p className="am-tab-bar-tab-title">{menu.name}</p>
              </div>
            )
          })}
        </div>
        <MenuComponent menus={card.menus} columns={card.columns} updateConfig={(menus) => this.updateComponent({...card, menus: menus})}/>
      </div>
    )
  }

 src/mob/components/navbar/normal-navbar/index.scss

@@ -24,6 +24,10 @@
      .anticon {
        font-size: 150%;
      }
      .am-tab-bar-tab-title:first-child {
        font-size: 14px;
        line-height: 40px;
      }
      .am-badge-text {
        position: absolute;
        top: -2px;
@@ -48,54 +52,6 @@
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }

  .card-item {
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 20px;
  }
  
  .card-item:hover {
    box-shadow: 0px 0px 2px #1890ff;
  }

  .model-menu-card-cell-list .card-detail-row > .anticon-plus {
    position: absolute;
    right: -30px;
    font-size: 16px;
  }
  .model-menu-action-list {
    line-height: 40px;
    .ant-row > .anticon-plus {
      position: absolute;
      right: -30px;
      font-size: 16px;
    }
  }
  .card-add-button {
    text-align: right;
    clear: left;
    .anticon-plus {
      font-size: 20px;
      color: #26C281;
      padding: 5px;
      margin-right: 10px;
    }
  }
  .ant-pagination {
    float: right;
    margin: 10px;
  }

  .model-menu-action-list {
    .page-card {
      line-height: 55px;
    }
  }
}
.normal-navbar-edit-box::after {

 src/mob/components/navbar/normal-navbar/menus/drags/card.jsx

New file
@@ -0,0 +1,64 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Popover } from 'antd'
import { EditOutlined, CloseOutlined } from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'

const Card = ({ id, card, moveCard, findCard, editCard, delCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'mobmenu', id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: 'mobmenu',
    canDrop: () => true,
    drop({ id: draggedId }) {
      if (!draggedId || draggedId === id) return

      const { index: originIndex } = findCard(draggedId)
      if (originIndex === -1) return

      const { index: overIndex } = findCard(id)
      moveCard(draggedId, overIndex)
    },
  })

  const doubleClickCard = () => {
    if (card.property === 'link') {
      window.open(card.link)
    } else {
      MKEmitter.emit('changeEditMenu', {
        MenuID: card.property === 'linkmenu' ? card.linkMenuId : card.MenuID,
        copyMenuId: card.property === 'menu' ? card.copyMenuId : '',
        MenuNo: card.MenuNo,
        MenuName: card.name
      })
    }
  }

  return (
    <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
      <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
        <EditOutlined className="edit" title="编辑" onClick={() => editCard(id)} />
        <CloseOutlined className="close" title="删除" onClick={() => delCard(id)} />
      </div>
    } trigger="hover">
      <div ref={node => drag(drop(node))} className="am-tab-bar-tab" style={{opacity: isDragging ? 0 : 1}} onDoubleClick={doubleClickCard}>
        {card.icon ? <div className="am-tab-bar-tab-icon">
          <span className="am-badge am-tab-bar-tab-badge tab-badge">
            <MkIcon type={card.icon} />
            {card.tip ? <sup className="am-badge-text"></sup> : null}
          </span>
        </div> : null}
        <p className="am-tab-bar-tab-title">{card.name}</p>
      </div>
    </Popover>
  )
}
export default Card

 src/mob/components/navbar/normal-navbar/menus/drags/index.jsx

New file
@@ -0,0 +1,56 @@
import React, { useState } from 'react'
import { is, fromJS } from 'immutable'
import update from 'immutability-helper'

import Card from './card'
// import './index.scss'

const Container = ({ list, handleList, handleMenu, deleteMenu }) => {
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    handleList(_cards)
  }

  if (!is(fromJS(cards), fromJS(list))) {
    setCards(list)
  }
  
  const findCard = id => {
    const card = cards.filter(c => c.MenuID === id)[0]
    return {
      card,
      index: cards.indexOf(card),
    }
  }

  const editCard = id => {
    const { card } = findCard(id)
    handleMenu(card)
  }

  const delCard = id => {
    const { card } = findCard(id)
    deleteMenu(card)
  }

  return (
    <div className="menu">
      {cards.map(card => {
        return (
          <Card
            id={card.MenuID}
            key={card.MenuID}
            card={card}
            moveCard={moveCard}
            editCard={editCard}
            delCard={delCard}
            findCard={findCard}
          />
        )
      })}
    </div>
  )
}
export default Container

 src/mob/components/navbar/normal-navbar/menus/drags/index.scss

 src/mob/components/navbar/normal-navbar/menus/index.jsx

New file
@@ -0,0 +1,196 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal } from 'antd'

import MKEmitter from '@/utils/events.js'
import Utils from '@/utils/utils.js'
import ElementForm from './menuform'
import DragElement from './drags'
// import './index.scss'

const { confirm } = Modal

class MenusComponent extends Component {
  static propTpyes = {
    menus: PropTypes.array,          // 菜单列表
    columns: PropTypes.array,        // 字段集
    updateConfig: PropTypes.func     // 菜单配置更新
  }

  state = {
    menus: [],
    columns: [],
    visible: false
  }

  /**
   * @description 初始化
   */
  UNSAFE_componentWillMount () {
    const { menus } = this.props

    this.setState({
      menus: fromJS(menus).toJS()
    })
  }

  componentDidMount () {
    MKEmitter.addListener('addmobmenu', this.addmobmenu)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('addmobmenu', this.addmobmenu)
  }

  addmobmenu = () => {
    let _menu = {
      name: '菜单',
      property: 'menu'
    }

    this.setState({editMenu: _menu, visible: true})
  }

  /**
   * @description 顺序调整
   */
  handleList = (list) => {
    this.setState({menus: list}, () => {
      this.props.updateConfig(list)
    })
  }

  /**
   * @description 元素编辑
   */
  handleElement = (menu) => {
    this.setState({
      visible: true,
      editMenu: menu
    })
  }

  /**
   * @description 取消保存，如果元素为新添元素，则从序列中删除
   */
  editModalCancel = () => {
    this.setState({
      editMenu: null,
      visible: false
    })
  }

  /**
   * @description 元素修改后提交保存
   */
  handleSubmit = () => {
    const { menus, editMenu } = this.state

    this.menuFormRef.handleConfirm().then(res => {
      let _menus = fromJS(menus).toJS()

      if (editMenu.MenuID) {
        res.MenuID = editMenu.MenuID

        _menus = _menus.map(item => {
          if (item.MenuID === res.MenuID) return res
          return item
        })
      } else {
        res.MenuID = Utils.getuuid()

        _menus.push(res)
      }

      if (editMenu.MenuID && editMenu.property === 'menu' && res.property !== 'menu') {
        const _this = this
        confirm({
          content: '菜单将被重置，确定修改吗？',
          onOk() {
            _menus = _menus.map(item => {
              if (item.MenuID === res.MenuID) {
                item.MenuID = Utils.getuuid()
              }
              return item
            })
            _this.setState({menus: _menus, editMenu: null, visible: false}, () => {
              _this.props.updateConfig(_menus)
            })
          },
          onCancel() {}
        })
      } else {
        this.setState({menus: _menus, editMenu: null, visible: false}, () => {
          this.props.updateConfig(_menus)
        })
      }
    })
  }

  /**
   * @description 按钮删除
   */
  deleteElement = (card) => {
    const { menus } = this.state
    let _this = this

    confirm({
      content: `确定删除《${card.name}》吗？`,
      onOk() {
        let _menus = menus.filter(item => item.MenuID !== card.MenuID)

        _this.setState({
          menus: _menus
        }, () => {
          _this.props.updateConfig(_menus)
        })
      },
      onCancel() {}
    })
  }

  render() {
    const { columns } = this.props
    const { menus, visible, editMenu } = this.state

    return (
      <>
        <DragElement
          list={menus}
          handleList={this.handleList}
          handleMenu={this.handleElement}
          deleteMenu={this.deleteElement}
        />
        <Modal
          title={editMenu && !editMenu.MenuID ? '添加菜单' : '编辑菜单'}
          visible={visible}
          width={800}
          maskClosable={false}
          onCancel={this.editModalCancel}
          onOk={this.handleSubmit}
          destroyOnClose
        >
          <ElementForm
            menu={editMenu}
            cols={columns}
            inputSubmit={this.handleSubmit}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />
        </Modal>
      </>
    )
  }
}

export default MenusComponent

 src/mob/components/navbar/normal-navbar/menus/index.scss

 src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx

File was renamed from src/mob/components/navbar/normal-navbar/menusetting/menuform/index.jsx
@@ -216,7 +216,7 @@
          </Col> : null}
          {property === 'menu' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="复制菜单仅在当前菜单不存在时有效。">
              <Tooltip placement="topLeft" title="复制菜单仅在菜单创建时有效。">
                <QuestionCircleOutlined className="mk-form-tip" />
                复制菜单
              </Tooltip>

 src/mob/components/navbar/normal-navbar/menus/menuform/index.scss

 src/mob/components/navbar/normal-navbar/menusetting/index.jsx

File was deleted

 src/mob/components/navbar/normal-navbar/menusetting/index.scss

File was deleted

 src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx

File was deleted

 src/mob/components/navbar/normal-navbar/menusetting/menutable/index.scss

File was deleted