2020-12-24

king

2020-12-24 8aef701cff785fbc13da30067cd41b6214e56b11

2020-12-24

 src/menu/components/card/cardcellcomponent/index.jsx

@@ -65,16 +65,11 @@
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { cards } = this.props
    if (this.props.side !== nextProps.side) {
      this.setState({
        elements: fromJS(nextProps.elements).toJS()
      })
    } else if (nextProps.elements.length === 0 && this.state.elements.length > 0) {
      this.setState({
        elements: []
      })
    } else if (cards.subtype === 'normaltable' && this.state.elements.length > nextProps.elements.length) { // 表格中按钮移出
    } else if (!is(fromJS(this.props.elements), fromJS(nextProps.elements)) && nextProps.elements.length !== this.state.elements.length) {
      this.setState({
        elements: fromJS(nextProps.elements).toJS()
      })

 src/menu/components/card/data-card/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Modal, Pagination } from 'antd'
import { Icon, Popover, Modal, Pagination, notification } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -16,6 +16,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
const CardComponent = asyncComponent(() => import('../cardcomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))

@@ -320,6 +321,47 @@
    this.props.updateConfig(card)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      let done = false
      if (item.$parentId) {
        card.subcards.forEach(col => {
          if (item.$parentId === col.uuid) {
            if (item.$side !== 'back') {
              col.elements = col.elements ? [...col.elements, item] : [item]
            } else {
              col.backElements = col.backElements ? [...col.backElements, item] : [item]
            }
            done = true
          }
        })
      }

      if (!done) {
        card.action = card.action ? [...card.action, item] : [item]
      }

      card.btnlog = logs

      this.setState({ card })
      notification.success({
        top: 92,
        message: '恢复成功！',
        duration: 2
      })
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { card } = this.state

@@ -344,6 +386,7 @@
            <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>

 src/menu/components/card/prop-card/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Modal } from 'antd'
import { Icon, Popover, Modal, notification } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -16,6 +16,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting'))
const CardComponent = asyncComponent(() => import('../cardcomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

const { confirm } = Modal
@@ -256,6 +257,51 @@
    this.props.updateConfig(card)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      let done = false
      if (item.$parentId) {
        card.subcards.forEach(col => {
          if (item.$parentId === col.uuid) {
            if (item.$side !== 'back') {
              col.elements = col.elements ? [...col.elements, item] : [item]
            } else {
              col.backElements = col.backElements ? [...col.backElements, item] : [item]
            }
            done = true
          }
        })
      }

      card.btnlog = logs

      this.setState({ card })
      if (!done) {
        notification.warning({
          top: 92,
          message: '附属卡片已删除！',
          duration: 2
        })
      } else {
        notification.success({
          top: 92,
          message: '恢复成功！',
          duration: 2
        })
      }
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { menu } = this.props
    const { card } = this.state
@@ -280,6 +326,7 @@
            <Icon className="plus" title="添加卡片" onClick={this.addCard} type="plus" />
            {menu ? <WrapComponent config={card} MenuType={menu.MenuType} updateConfig={this.updateComponent} /> : null}
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
            {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null}

 src/menu/components/card/table-card/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Modal, Pagination } from 'antd'
import { Icon, Popover, Modal, Pagination, notification } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -16,6 +16,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting'))
const CardComponent = asyncComponent(() => import('./cardcomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

const { confirm } = Modal
@@ -259,6 +260,51 @@
    MKEmitter.emit('addSearch', card.uuid, newcard)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      let done = false
      if (item.$parentId) {
        card.subcards.forEach(col => {
          if (item.$parentId === col.uuid) {
            if (item.$side !== 'back') {
              col.elements = col.elements ? [...col.elements, item] : [item]
            } else {
              col.backElements = col.backElements ? [...col.backElements, item] : [item]
            }
            done = true
          }
        })
      }

      card.btnlog = logs

      this.setState({ card })
      if (!done) {
        notification.warning({
          top: 92,
          message: '附属卡片已删除！',
          duration: 2
        })
      } else {
        notification.success({
          top: 92,
          message: '恢复成功！',
          duration: 2
        })
      }
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { menu } = this.props
    const { card } = this.state
@@ -272,6 +318,7 @@
            <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
            {menu ? <WrapComponent config={card} MenuType={menu.MenuType} updateConfig={this.updateComponent} /> : null}
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
          </div>

 src/menu/components/chart/antv-bar/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Icon, Popover, notification } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'

@@ -18,6 +18,7 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))

@@ -823,6 +824,30 @@
    this.props.updateConfig(_card)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      card.action = card.action ? [...card.action, item] : [item]
      card.btnlog = logs

      this.setState({ card })
      notification.success({
        top: 92,
        message: '恢复成功！',
        duration: 2
      })
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { card } = this.state

@@ -835,6 +860,7 @@
            <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
            <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>

 src/menu/components/chart/antv-pie/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Icon, Popover, notification } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'

@@ -17,6 +17,7 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

class antvBarLineChart extends Component {
@@ -395,6 +396,30 @@
    this.props.updateConfig(_card)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      card.action = card.action ? [...card.action, item] : [item]
      card.btnlog = logs

      this.setState({ card })
      notification.success({
        top: 92,
        message: '恢复成功！',
        duration: 2
      })
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { card } = this.state

@@ -406,6 +431,7 @@
            <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
            <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>

 src/menu/components/share/logcomponent/index.jsx

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

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

const { confirm } = Modal

class DataSource extends Component {
  static propTpyes = {
    btnlog: PropTypes.array,
    handlelog: PropTypes.func
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    data: [],
    columns: [
      {
        title: '按钮名称',
        dataIndex: 'label',
        width: '40%'
      },
      {
        title: '按钮类型',
        dataIndex: 'OpenType',
        width: '40%'
      },
      {
        title: '操作',
        align: 'center',
        width: '20%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div style={{textAlign: 'center'}}>
            <Popconfirm
              overlayClassName="popover-confirm"
              title="确定恢复记录吗？"
              onConfirm={() => this.revert(record)}
            >
              <span title="恢复" style={{color: '#26C281', fontSize: '16px', marginRight: '5px', cursor: 'pointer', padding: '5px'}}><Icon type="redo" /></span>
            </Popconfirm>
            <Popconfirm
              overlayClassName="popover-confirm"
              title="确定清除记录吗？"
              onConfirm={() => this.handleDelete(record)}
            >
              <span title="清除" style={{color: '#ff4d4f', fontSize: '16px', cursor: 'pointer', padding: '5px'}}><Icon type="close" /></span>
            </Popconfirm>
          </div>)
      }
    ],
  }

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

  trigger = () => {
    this.setState({
      visible: true,
      data: fromJS(this.props.btnlog).toJS()
    })
  }

  revert = (item) => {
    const data = this.state.data.filter(d => d.uuid !== item.uuid)

    this.setState({data})
    this.props.handlelog('revert', data, item)
  }

  handleDelete = (item) => {
    if (item) {
      const data = this.state.data.filter(d => d.uuid !== item.uuid)
  
      this.setState({data})
      this.props.handlelog('delete', data, null)
    } else {
      const _this = this

      confirm({
        content: '确定清空记录吗？',
        onOk() {
          _this.setState({data: []})
          _this.props.handlelog('delete', [], null)
        },
        onCancel() {}
      })
    }
  }

  render () {
    const { visible, dict, data, columns } = this.state

    return (
      <div className="btn-log-wrap">
        <Icon type="rollback" onClick={this.trigger} />
        <Modal
          wrapClassName="popview-modal"
          title="历史记录"
          visible={visible}
          width={700}
          maskClosable={false}
          onCancel={() => { this.setState({ visible: false }) }}
          footer={[
            <Button key="close" onClick={() => { this.setState({ visible: false }) }}>{dict['model.close']}</Button>
          ]}
          destroyOnClose
        >
          <Button disabled={data.length === 0} style={{float: 'right', marginBottom: '5px', position: 'relative', zIndex: 1}} onClick={() => this.handleDelete()} type="primary">清空</Button>
          <Table bordered rowKey="uuid" dataSource={data} columns={columns} pagination={false}/>
        </Modal>
      </div>
    )
  }
}

export default DataSource

 src/menu/components/share/logcomponent/index.scss

New file
@@ -0,0 +1,21 @@
.btn-log-wrap {
  display: inline-block;

  >.anticon-rollback {
    color: purple;
  }
  .operation {
    text-align: center;
    .revert {
      color: #26C281;
      margin-right: 10px;
      cursor: pointer;
      padding: 5px;
    }
    .close {
      color: #ff4d4f;
      cursor: pointer;
      padding: 5px;
    }
  }
}

 src/menu/components/table/normal-table/columns/index.jsx

@@ -197,7 +197,6 @@
    if (!is(fromJS(this.state.columns), fromJS(nextProps.config.cols))) {
      let _columns = fromJS(nextProps.config.cols).toJS()
      this.setState({columns: _columns})
      
      let lastcol = _columns.slice(-1)[0]
      if (lastcol && lastcol.focus) {
        this.editColumn(lastcol)

 src/menu/components/table/normal-table/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Modal } from 'antd'
import { Icon, Popover, Modal, notification } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -18,6 +18,7 @@
const SearchComponent = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const ColumnComponent = asyncComponent(() => import('./columns'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))

@@ -281,6 +282,44 @@
    this.props.updateConfig(card)
  }

  handleLog = (type, logs, item) => {
    let card = fromJS(this.state.card).toJS()

    if (type === 'revert') {
      let done = false
      if (item.$parentId) {
        card.cols.forEach(col => {
          if (col.type !== 'action') return
          if (item.$parentId === col.uuid) {
            col.elements = col.elements ? [...col.elements, item] : [item]
            done = true
          }
        })
      }

      if (!done) {
        card.action = card.action ? [...card.action, item] : [item]
      }

      card.btnlog = logs

      this.setState({ card })
      notification.success({
        top: 92,
        message: '恢复成功！',
        duration: 2
      })
    } else {
      card.btnlog = logs
      this.setState({ card })
      notification.success({
        top: 92,
        message: '清除成功！',
        duration: 2
      })
    }
  }

  render() {
    const { card } = this.state

@@ -294,6 +333,7 @@
            <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>