2020-05-27

king

2020-05-27 b11ff823b4250f5267a2c296818380b21136b380

2020-05-27

 src/components/dragelement/index.jsx

File was deleted

 src/components/dragelement/index.scss

File was deleted

 src/components/header/dragelement/card.jsx

File was deleted

 src/components/header/dragelement/itemtypes.js

File was deleted

 src/components/header/index.jsx

@@ -31,7 +31,7 @@
import LoginForm from './loginform'
import './index.scss'

const EditMenu = asyncComponent(() => import('./editmenu'))
const EditMenu = asyncComponent(() => import('@/templates/headerconfig'))
const { confirm } = Modal
const { Search } = Input


 src/components/sidemenu/index.jsx

@@ -14,8 +14,8 @@
import Api from '@/api'
import './index.scss'

const EditSecMenu = asyncComponent(() => import('./editsecmenu'))
const EditThdMenu = asyncComponent(() => import('./editthdmenu'))
const EditSecMenu = asyncComponent(() => import('@/templates/menuconfig/editsecmenu'))
const EditThdMenu = asyncComponent(() => import('@/templates/menuconfig/editthdmenu'))
const { SubMenu } = Menu

class Sidemenu extends Component {

 src/components/sidemenu/menuform/index.scss

File was deleted

 src/templates/headerconfig/dragelement/card.jsx

 src/templates/headerconfig/dragelement/index.jsx

 src/templates/headerconfig/dragelement/index.scss

 src/templates/headerconfig/dragelement/itemtypes.js

 src/templates/headerconfig/index.jsx

File was renamed from src/components/header/editmenu/index.jsx
@@ -5,14 +5,21 @@
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin } from 'antd'
import moment from 'moment'
import TransferForm from '@/components/transferform'
import DragElement from '../dragelement'
import MenuForm from '../menuform'

import TransferForm from '@/templates/zshare/basetransferform'
import DragElement from './dragelement'
import MenuForm from './menuform'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Api from '@/api'
import './index.scss'

import card1 from '@/assets/img/card-bg2.jpg'
import card2 from '@/assets/img/card-bg5.jpg'
import card3 from '@/assets/img/card-bg8.jpg'
import card4 from '@/assets/img/card-bg7.jpg'
import card5 from '@/assets/img/card-bg6.jpg'

const { confirm } = Modal
let previewList = null
@@ -308,19 +315,19 @@
    return (
      <div className="header-edit-box">
        <div className="mask">
          <div className="tipcard card1">
          <div className="tipcard card1" style={{backgroundImage: card1}}>
            拖动一级菜单可调整顺序，顺序调整后，请点击确定按钮保存。
          </div>
          <div className="tipcard card2">
          <div className="tipcard card2" style={{backgroundImage: card2}}>
            鼠标经过菜单时会显示编辑图标，点击编辑可修改和删除菜单。
          </div>
          <div className="tipcard card3">
          <div className="tipcard card3" style={{backgroundImage: card3}}>
            点击解除冻结按钮，可还原已删除的一级菜单。
          </div>
          <div className="tipcard card4">
          <div className="tipcard card4" style={{backgroundImage: card4}}>
            点击添加图标，可新增一级菜单。
          </div>
          <div className="tipcard card5">
          <div className="tipcard card5" style={{backgroundImage: card5}}>
            <p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
            <div>
              <a target="blank" href="#/main" >新页面</a>

 src/templates/headerconfig/index.scss

File was renamed from src/components/header/editmenu/index.scss
@@ -19,7 +19,6 @@
      top: 20vh;
      width: 230px;
      min-height: 100px;
      background-image: url('../../../assets/img/card-bg2.jpg');
      color: #000000;
      font-style: oblique;
    }
@@ -28,7 +27,6 @@
      top: 20vh;
      width: 230px;
      min-height: 100px;
      background-image: url('../../../assets/img/card-bg5.jpg');
      color: #000000;
      padding: 20px 30px;
      font-style: oblique;
@@ -38,7 +36,6 @@
      top: 50vh;
      width: 230px;
      min-height: 140px;
      background-image: url('../../../assets/img/card-bg8.jpg');
      color: #000000;
      padding: 20px 30px;
      font-style: oblique;
@@ -48,7 +45,6 @@
      top: 50vh;
      width: 230px;
      min-height: 140px;
      background-image: url('../../../assets/img/card-bg7.jpg');
      color: #000000;
      padding: 20px 30px;
      font-style: oblique;
@@ -58,7 +54,6 @@
      top: 20vh;
      width: 130px;
      min-height: 240px;
      background-image: url('../../../assets/img/card-bg6.jpg');
      color: #000000;
      padding: 40px 15px 10px;
      p {

 src/templates/headerconfig/menuform/index.jsx

 src/templates/headerconfig/menuform/index.scss

copy from src/components/header/menuform/index.scss
copy to src/templates/headerconfig/menuform/index.scss

 src/templates/menuconfig/editsecmenu/index.jsx

File was renamed from src/components/sidemenu/editsecmenu/index.jsx
@@ -5,7 +5,7 @@
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Icon } from 'antd'
import moment from 'moment'
import TransferForm from '@/components/transferform'
import TransferForm from '@/templates/zshare/basetransferform'
import Utils from '@/utils/utils.js'
import DragElement from '../menuelement'
import MenuForm from '../menuform'

 src/templates/menuconfig/editsecmenu/index.scss

 src/templates/menuconfig/editthdmenu/index.jsx

File was renamed from src/components/sidemenu/editthdmenu/index.jsx
@@ -14,7 +14,7 @@

import Preview from './preview'
import MenuForm from './menuform'
import TransferForm from '@/components/transferform'
import TransferForm from '@/templates/zshare/basetransferform'
import Utils from '@/utils/utils.js'
import DragElement from '../menuelement'
import asyncLoadComponent from '@/utils/asyncLoadComponent'

 src/templates/menuconfig/editthdmenu/index.scss

 src/templates/menuconfig/editthdmenu/menuform/index.jsx

 src/templates/menuconfig/editthdmenu/menuform/index.scss

 src/templates/menuconfig/editthdmenu/preview/index.jsx

 src/templates/menuconfig/editthdmenu/preview/index.scss

 src/templates/menuconfig/menuelement/card.jsx

 src/templates/menuconfig/menuelement/index.jsx

 src/templates/menuconfig/menuelement/index.scss

 src/templates/menuconfig/menuelement/itemtypes.js

 src/templates/menuconfig/menuform/index.jsx

 src/templates/menuconfig/menuform/index.scss

 src/templates/zshare/adjustransferform/index.jsx

New file
@@ -0,0 +1,114 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Transfer, Icon } from 'antd'
import './index.scss'

class TransferForm extends Component {
  static propTypes = {
    columns: PropTypes.array,
    selected: PropTypes.array,
    dict: PropTypes.object, // 字典项
  }

  state = {
    data: [],
    targetKeys: [],
    selectedKeys: []
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys })
  }

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] })
  }
  
  UNSAFE_componentWillMount() {
    let datas = new Map()
    this.props.columns.forEach(item => {
      if (item.field && item.Hide !== 'true') {
        datas.set(item.uuid, item)
      }
    })

    let selecteds = []

    this.props.selected.forEach(item => {
      if (datas.has(item)) {
        selecteds.push(item)
      }
    })

    this.setState({
      data: [...datas.values()].map(item => {
        return {
          key: item.uuid,
          title: item.label,
          field: item.field,
          description: ''
        }
      }),
      targetKeys: selecteds
    })
  }

  changeorder = (e, item, type) => {
    const { targetKeys } = this.state
    e.stopPropagation()

    let _index = 0
    let keys = targetKeys.filter((key, i) => {
      if (key === item.key) {
        _index = i
        return false
      } else {
        return true
      }
    })

    if ((_index === 0 && type === 'up') || (_index === targetKeys.length - 1 && type === 'down')) {
      return
    }

    if (type === 'up') {
      keys.splice(_index - 1, 0, item.key)
    } else {
      keys.splice(_index + 1, 0, item.key)
    }

    this.setState({
      targetKeys: keys
    })
  }

  getItem = (item) => {
    let content = item.title + '(' + item.field + ')'
    return <span title={content}>
      {content}
      <Icon type="arrow-up" onClick={(e) => {this.changeorder(e, item, 'up')}} />
      <Icon type="arrow-down" onClick={(e) => {this.changeorder(e, item, 'down')}} />
    </span>
  }

  render() {
    const { targetKeys, selectedKeys } = this.state

    return (
      <div className="common-table-columns-transfer">
        <Transfer
          dataSource={this.state.data}
          titles={[this.props.dict['header.form.column.source'], this.props.dict['header.form.column.target']]}
          targetKeys={targetKeys}
          locale={{itemUnit: this.props.dict['header.form.column.itemUnit'], itemsUnit: this.props.dict['header.form.column.itemsUnit']}}
          selectedKeys={selectedKeys}
          onChange={this.handleChange}
          onSelectChange={this.handleSelectChange}
          render={this.getItem}
        />
      </div>
    )
  }
}

export default TransferForm

 src/templates/zshare/adjustransferform/index.scss

New file
@@ -0,0 +1,29 @@
.common-table-columns-transfer {
  padding-left: 18px;
  .ant-transfer-list {
    width: 296px;
    i {
      display: none;
    }
  }
  .ant-transfer-operation + .ant-transfer-list {
    .ant-transfer-list-content-item {
      padding-right: 50px;
      position: relative;
      
      i {
        display: inline-block;
      }
      .anticon {
        position: absolute;
        right: 10px;
        color: #ff4d4f;
      }
      .anticon-arrow-up {
        position: absolute;
        right: 30px;
        color: #1890ff;
      }
    }
  }
}

 src/templates/zshare/basetransferform/index.jsx

New file
@@ -0,0 +1,48 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Transfer } from 'antd'

import zhCN from '@/locales/zh-CN/share.js'
import enUS from '@/locales/en-US/share.js'
import './index.scss'

class TransferForm extends Component {
  static propTypes = {
    menulist: PropTypes.array
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    targetKeys: [],
    selectedKeys: []
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys })
  }

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] })
  }

  render() {
    const { targetKeys, selectedKeys, dict } = this.state

    return (
      <div className="trawmenutransfer">
        <Transfer
          dataSource={this.props.menulist}
          titles={[dict['thawmenu.source'], dict['thawmenu.target']]}
          targetKeys={targetKeys}
          locale={{itemUnit: dict['thawmenu.itemUnit'], itemsUnit: dict['thawmenu.itemsUnit']}}
          selectedKeys={selectedKeys}
          onChange={this.handleChange}
          onSelectChange={this.handleSelectChange}
          render={item => item.title}
        />
      </div>
    )
  }
}

export default TransferForm

 src/templates/zshare/basetransferform/index.scss

New file
@@ -0,0 +1,5 @@
.trawmenutransfer {
  .ant-transfer-list {
    width: 210px;
  }
}

 src/templates/zshare/editcomponent/index.jsx

@@ -4,7 +4,7 @@

import Api from '@/api'
import PasteForm from '@/templates/zshare/pasteform'
import TransferForm from '@/components/transferform'
import TransferForm from '@/templates/zshare/basetransferform'
import './index.scss'

class editComponent extends Component {

 src/templates/zshare/transferform/index.jsx

@@ -37,7 +37,6 @@
    this.props.selected.forEach(item => {
      if (datas.has(item)) {
        selecteds.push(item)
        // datas.delete(item)
      }
    })