2020-11-25

king

2020-11-25 42fae277ae5ebe794fc070bf38482a919eb661fc

 src/templates/sharecomponent/chartgroupcomponent/index.jsx

@@ -14,16 +14,14 @@

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

    let _type = 'editChart'
    if (!item) {
      _type = 'addChart'
@@ -88,14 +88,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)
    })
  }

@@ -158,8 +210,6 @@

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

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

  /**
   * @description 组件销毁，清除state更新
   */
@@ -206,7 +260,7 @@
    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}
        {chartlist.length > 1 ? <Icon type={config.expand ? 'up' : 'down'} title="展开/合并" onClick={this.onChartChange} /> : null}
        {chartlist.length > 1 ? <DragChartView
          activeKey={chartview}
          list={chartlist}
@@ -220,7 +274,7 @@
        <Modal
          title={modaltype === 'addChart' ? '图表-添加' : '图标-编辑'}
          visible={modaltype === 'addChart' || modaltype === 'editChart'}
          width={750}
          width={800}
          maskClosable={false}
          onOk={this.submitChart}
          onCancel={this.editModalCancel}