2022-10-17

king

2022-10-17 e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5

 src/templates/sharecomponent/chartgroupcomponent/index.jsx

@@ -1,11 +1,10 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal } from 'antd'
import { Modal } from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getChartViewForm } from '@/templates/zshare/formconfig'

import ChartForm from './chartform'
@@ -14,16 +13,13 @@

const { confirm } = Modal

// **悲观者往往正确，乐观者往往成功
class ChartGroupComponent extends Component {
  static propTpyes = {
    config: PropTypes.object,         // 菜单配置信息
    sysRoles: PropTypes.array,        // 角色列表，黑名单使用
    updatechartgroup: PropTypes.func  // 图表更新
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    chartlist: null,      // 图表集
    card: null,           // 编辑中元素
    formlist: null,       // 表单信息
@@ -78,6 +74,8 @@
   * @description 添加或修改图表
   */
  handleChart = (item) => {
    const { config } = this.props

    let _type = 'editChart'
    if (!item) {
      _type = 'addChart'
@@ -88,14 +86,66 @@
        chartType: 'line',
        icon: 'line-chart',
        Hide: 'false',
        blacklist: []
        blacklist: [],
        barSize: 35
      }
    }

    let _columns = [{
      uuid: 'x',
      value: '',
      text: '空',
      background: ''
    }]
    config.columns.forEach(col => {
      if (!['text', 'number'].includes(col.type)) return
      if (!col.marks) return

      let _marks = col.marks.filter(_mark => _mark.signType === 'card')

      if (_marks.length === 0) return

      _columns.push({
        uuid: col.uuid,
        value: col.field,
        text: col.label,
        background: _marks[0].color ? _marks[0].color[1] : ''
      })
    })

    if (item.chartType === 'card') { // 检验已添加背景是否修改
      if (item.bgfield) {
        let _column = _columns.filter(col => col.value === item.bgfield)[0]
        if (_column) {
          item.background = _column.background
        } else {
          item.bgfield = ''
          item.background = ''
        }
      } else {
        item.background = ''
      }
    }

    let actions = config.action.filter(item => item.OpenType === 'excelOut' || (item.OpenType === 'excelIn' && item.Ot === 'notRequired'))
    actions = actions.map(cell => ({value: cell.uuid, text: cell.label}))

    if (item.actions && item.actions.length > 0) {
      let keys = actions.map(cell => cell.value)
      item.actions = item.actions.filter(cell => keys.includes(cell))
    }

    let extraActions = config.action.filter(item => ['pop', 'prompt', 'exec'].includes(item.OpenType) && item.Ot === 'notRequired')
    extraActions = extraActions.map(cell => ({value: cell.uuid, text: cell.label}))

    if (item.extraAction && extraActions.filter(cell => cell.value === item.extraAction).length === 0) {
      item.extraAction = ''
    }

    this.setState({
      card: item,
      modaltype: _type,
      formlist: getChartViewForm(item, this.props.sysRoles)
      formlist: getChartViewForm(item, _columns, actions, extraActions)
    })
  }

@@ -153,13 +203,10 @@
   */
  deletechart = (plot) => {
    const { config } = this.props
    const { dict } = this.state
    let _this = this

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + ` ${plot.title} ？`,
      okText: dict['model.confirm'],
      cancelText: dict['header.cancel'],
      content: `确定删除 ${plot.title} ？`,
      onOk() {
        let _chartlist = fromJS(_this.state.chartlist).toJS()
        let _chartview = _this.state.chartview
@@ -190,6 +237,10 @@
    this.props.updatechartgroup(config, id)
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
@@ -199,14 +250,15 @@
    }
  }

  // 已弃用，不在开放添加通道
  render() {
    const { config } = this.props
    const { dict, chartlist, modaltype, card, chartview } = this.state
    const { chartlist, modaltype, card, chartview } = this.state

    return (
      <div className="model-table-chartview-list">
        <Icon type="plus" onClick={() => this.handleChart()} />
        {chartlist.length > 1 ? <Icon type={config.expand ? 'up' : 'down'} onClick={this.onChartChange} /> : null}
        {/* <PlusOutlined onClick={() => this.handleChart()} /> */}
        {chartlist.length > 1 ? (config.expand ? <UpOutlined onClick={this.onChartChange} /> : <DownOutlined onClick={this.onChartChange} />) : null}
        {chartlist.length > 1 ? <DragChartView
          activeKey={chartview}
          list={chartlist}
@@ -220,14 +272,13 @@
        <Modal
          title={modaltype === 'addChart' ? '图表-添加' : '图标-编辑'}
          visible={modaltype === 'addChart' || modaltype === 'editChart'}
          width={750}
          width={800}
          maskClosable={false}
          onOk={this.submitChart}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <ChartForm
            dict={dict}
            card={card}
            formlist={this.state.formlist}
            inputSubmit={this.submitChart}