2020-05-20

king

2020-05-20 4c775de9de07291b345fd5c975a87230ddedd5ca

2020-05-20

 src/assets/css/table.scss

@@ -1,4 +1,23 @@
.mingke-table {
  .ant-cascader-menu {
    min-width: 120px;
    height: 300px;
  }
  .ant-cascader-menu + .ant-cascader-menu {
    min-width: 130px;
    .ant-cascader-menu-item {
      padding: 0;
      div {
        padding: 5px 12px;
        .anticon {
          font-size: 18px;
        }
      }
    }
    .ant-cascader-menu-item:hover {
      background: unset;
    }
  }
  // dust-red
  .background.dust-red-1 {
    color: rgba(0, 0, 0, 0.85);

 src/assets/img/avatar.png

 src/components/sidemenu/index.jsx

@@ -325,7 +325,7 @@
            exitEdit={this.exitEdit}
          />
        }
        {this.props.editLevel === 'level3' && this.state.subMenulist ?
        {this.props.editLevel === 'level3' && this.state.subMenulist && this.state.editMenu ?
          <EditThdMenu
            menulist={this.state.editMenu.children}
            supMenuList={this.state.subMenulist}

 src/locales/zh-CN/model.js

@@ -232,7 +232,7 @@
  'header.form.easyCode': '助记码',
  'header.modal.form.edit': '表单-编辑',
  'model.searchCriteria': '搜索条件',
  'model.action': 'Button',
  'model.action': '按钮',
  'header.modal.action.copy': '按钮-复制',
  'header.modal.form.copy': '表单-复制',
  'header.modal.column.edit': '显示列-编辑',

 src/tabviews/zshare/actionList/index.jsx

@@ -2441,7 +2441,8 @@
   */
  handleCancel = () => {
    this.setState({
      visible: false
      visible: false,
      confirmLoading: false
    })
  }

@@ -2507,6 +2508,7 @@
      },
      onCancel() {
        _this.setState({
          loadingUuid: '',
          running: false
        })
      }

 src/tabviews/zshare/normalTable/index.jsx

@@ -98,6 +98,8 @@
          if (mark.signType === 'line') {
            lineMarks.push(mark)
            return false
          } else if (mark.signType === 'card') {
            return false
          }
          return true
        })

 src/templates/comtableconfig/index.jsx

@@ -14,15 +14,9 @@
import { getMainMenuForm } from '@/templates/zshare/formconfig'

import asyncComponent from '@/utils/asyncComponent'
import TableComponent from '@/templates/sharecomponent/tablecomponent'
import FieldsComponent from '@/templates/sharecomponent/fieldscomponent'
import ChartGroupComponent from '@/templates/sharecomponent/chartgroupcomponent'
import SearchComponent from '@/templates/sharecomponent/searchcomponent'
import ActionComponent from '@/templates/sharecomponent/actioncomponent'
import ColumnComponent from '@/templates/sharecomponent/columncomponent'
import TabsComponent from '@/templates/sharecomponent/tabscomponent'
import ChartComponent from '@/templates/sharecomponent/chartcomponent'
import CardComponent from '@/templates/sharecomponent/cardcomponent'

import MenuForm from '@/templates/zshare/menuform'
import EditComponent from '@/templates/zshare/editcomponent'
@@ -34,6 +28,12 @@
const { confirm } = Modal
const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS
const SettingComponent = asyncComponent(() => import('@/templates/sharecomponent/settingcomponent'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
const ChartGroupComponent = asyncComponent(() => import('@/templates/sharecomponent/chartgroupcomponent'))
const ChartComponent = asyncComponent(() => import('@/templates/sharecomponent/chartcomponent'))
const CardComponent = asyncComponent(() => import('@/templates/sharecomponent/cardcomponent'))
const TabsComponent = asyncComponent(() => import('@/templates/sharecomponent/tabscomponent'))

class ComTableConfig extends Component {
  static propTpyes = {
@@ -550,6 +550,10 @@
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
        param.secretkey = Utils.encrypt(param.LText, param.timestamp)

        if (openEdition) { // 版本管理
          param.open_edition = openEdition
        }

        // 有按钮或标签删除时，先进行删除操作
        // 删除成功后，保存页面配置
        new Promise(resolve => {
@@ -654,10 +658,6 @@
          if (resp === false) return
          let localParam = fromJS(param).toJS()

          if (openEdition) {
            param.open_edition = openEdition
          }

          Api.getSystemConfig(param).then(response => {
            if (response.status) {
              let _FMenu = originMenu.fstMenuList.filter(fstM => fstM.MenuID === res.fstMenuId)[0]
@@ -690,6 +690,8 @@
              delete localParam.PageParam
              delete localParam.Template
              delete localParam.Sort
              delete localParam.EasyCode
              delete localParam.open_edition

              Api.getLocalConfig(localParam)
            } else {
@@ -1268,7 +1270,6 @@
                <TableComponent
                  config={config}
                  containerId="main-basedata"
                  selectedTables={config.tables || []}
                  updatetable={this.updatetable}
                />
              </Panel>

 src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx

@@ -15,6 +15,7 @@

  state = {
    formlist: null,
    oriformlist: null,
    columns: null,
    actions: []
  }
@@ -22,37 +23,49 @@
  UNSAFE_componentWillMount () {
    const { card } = this.props

    let columns = this.props.formlist.filter(item => item.key === 'field')[0].options
    let columns = []
    let actions = []
    if (card.actions) {
      actions = this.props.formlist.filter(item => item.key === 'actions')[0].options
    }

    let formlist = this.props.formlist.filter(item => !item.forbid)
    formlist.forEach(item => {
      if (item.key === 'field') {
        columns = JSON.parse(JSON.stringify(item.options))
      } else if (item.key === 'actions') {
        actions = JSON.parse(JSON.stringify(item.options))
      }
    })

    this.setState({
      columns: columns,
      actions: actions,
      formlist: this.props.formlist.map(item => {
      oriformlist: formlist,
      formlist: formlist.map(item => {
        if (item.key === 'content' && card.datatype === 'dynamic') {
          item.hidden = true
        } else if (item.key === 'field' && card.datatype === 'static') {
          item.hidden = true
        } else if (item.key === 'field' && card.elemType === 'avatar') {
          item.options = columns.filter(option => option.type === card.type)
        } else if (item.key === 'widthType' && card.elemType === 'avatar' && card.type === 'picture') {
          item.hidden = false
        } else if (item.key === 'size' && card.elemType === 'avatar' && card.type === 'icon') {
          item.hidden = false
        } else if (item.key === 'width' && card.elemType === 'avatar' && card.type === 'picture') {
          item.hidden = false
        }

        return item
      })
    })
  }

  componentDidMount () {

  }

  typeChange = (key, value) => {
    const { card } = this.props
    const { columns, oriformlist } = this.state

    if (key === 'datatype') {
      this.setState({
        formlist: this.props.formlist.map(item => {
        formlist: oriformlist.map(item => {
          item.hidden = false

          if (item.key === 'content' && value === 'dynamic') {
            item.hidden = true
          } else if (item.key === 'field' && value === 'static') {
@@ -62,9 +75,41 @@
          return item
        })
      })
      // if (this.props.form.getFieldValue('fieldlength') !== undefined) {
      //   this.props.form.setFieldsValue({fieldlength: fieldlength})
      // }
    } else if (key === 'type') {
      this.setState({
        formlist: oriformlist.map(item => {
          if (item.key === 'field') {
            item.options = columns.filter(option => option.type === value)
          } else if (item.key === 'widthType') {
            item.hidden = value !== 'picture'
          } else if (item.key === 'width') {
            item.hidden = value !== 'picture'
            item.max = card.widthType === 'ratio' ? 100 : 500
          } else if (item.key === 'size') {
            item.hidden = value !== 'icon'
          }

          return item
        })
      }, () => {
        if (this.props.form.getFieldValue('field') !== undefined) {
          this.props.form.setFieldsValue({field: ''})
        }
      })
    } else if (key === 'widthType') {
      this.setState({
        formlist: oriformlist.map(item => {
          if (item.key === 'width') {
            item.max = value === 'ratio' ? 100 : 500
          }

          return item
        })
      }, () => {
        if (this.props.form.getFieldValue('width') !== undefined) {
          this.props.form.setFieldsValue({width: 32})
        }
      })
    }
  }

@@ -124,8 +169,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(item.unlimit ? <InputNumber /> :
                  <InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
              })(<InputNumber min={item.min} max={item.max} precision={0} />)}
            </Form.Item>
          </Col>
        )
@@ -219,13 +263,21 @@
          if (this.props.card.uuid) {
            values.uuid = this.props.card.uuid
          }
          values.elemType = this.props.card.elemType

          if (values.field && !values.content) {
            values.content = columns.filter(col => col.value === values.field)[0].text
          if (['detail', 'header'].includes(values.elemType)) {
            if (values.field && !values.content) {
              values.content = columns.filter(col => col.value === values.field)[0].text
            }
          }
          if (values.actions) {
          if (['bottom', 'header'].includes(values.elemType) && values.actions) {
            values.actions = values.actions.map(item => actions.filter(action => action.value === item)[0])
          }
          if (['avatar'].includes(values.elemType)) {
            if (values.type === 'icon') {
              values.icon = columns.filter(col => col.value === values.field)[0].icon
            }
          }

          resolve(values)
        } else {

 src/templates/sharecomponent/cardcomponent/chartcompile/index.jsx

File was deleted

 src/templates/sharecomponent/cardcomponent/chartcompile/index.scss

File was deleted

 src/templates/sharecomponent/cardcomponent/dragdetail/index.jsx

@@ -32,7 +32,8 @@

  let marginLeft = 0
  if (cardObj.subelement.includes('avatar')) {
    marginLeft = 48
    marginLeft = cardObj.avatar.width || cardObj.avatar.size || 32
    marginLeft += 16
  }

  return (

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -10,6 +10,7 @@

import DragDetail from './dragdetail'
import CardDetailForm from './carddetailform'
import avatar from '@/assets/img/avatar.png'
import './index.scss'

const { confirm } = Modal
@@ -62,7 +63,8 @@
    const { config } = this.props
    if (!_cell) {
      _cell = {
        datatype: 'dynamic'
        datatype: 'dynamic',
        elemType: 'detail'
      }
    }

@@ -97,9 +99,12 @@
        text: col.label
      }
    })
    let _actions = config.action.filter(item => item.position === 'grid')
    let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))

    let actionIds = []
    _actions = _actions.map(item => {
      actionIds.push(item.uuid)

      return {
        value: item.uuid,
        icon: item.icon,
@@ -112,7 +117,6 @@
      _cell.field = ''
    }
    if (_cell.actions.length > 0) {
      let actionIds = _actions.map(item => item.value)
      _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
    }

@@ -120,6 +124,74 @@
      cardcell: _cell,
      modaltype: 'header',
      formlist: getCardDetailForm(_cell, _columns, 'header', _actions)
    })
  }

  editBottom = () => {
    const { config, card } = this.props

    let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))

    let actionIds = []
    _actions = _actions.map(item => {
      actionIds.push(item.uuid)

      return {
        value: item.uuid,
        icon: item.icon,
        text: item.label
      }
    })

    let _cell = fromJS(card.bottom).toJS()

    if (_cell.actions.length > 0) {
      _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
    }

    this.setState({
      cardcell: _cell,
      modaltype: 'bottom',
      formlist: getCardDetailForm(_cell, [], 'bottom', _actions)
    })
  }

  editAvatar = () => {
    const { config, card } = this.props

    let _columns = []
    config.columns.forEach(col => {
      if (['picture'].includes(col.type)) {
        _columns.push({
          type: 'picture',
          uuid: col.uuid,
          value: col.field,
          text: col.label
        })
      } else if (['text', 'number'].includes(col.type) && col.marks) {
        let mark = col.marks.filter(_mark => _mark.signType === 'icon' && _mark.icon)[0]
        if (mark) {
          _columns.push({
            type: 'icon',
            uuid: col.uuid,
            value: col.field,
            text: col.label,
            icon: mark.icon
          })
        }
      }
    })

    let _cell = fromJS(card.avatar).toJS()
    if (_columns.filter(col => col.value === _cell.field && col.type === _cell.type).length === 0) {
      _cell.field = ''
      _cell.content = ''
    }

    this.setState({
      cardcell: _cell,
      modaltype: 'avatar',
      formlist: getCardDetailForm(_cell, _columns, 'avatar')
    })
  }

@@ -146,18 +218,26 @@
        })
        this.plotChange({details: _details})
      } else if (modaltype === 'header') {
        let _header = fromJS(this.props.card.header).toJS()
        _header.content = res.content
        _header.datatype = res.datatype
        _header.field = res.field
        _header.actions = res.actions
  
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({header: _header})
        this.plotChange({header: res})
      } else if (modaltype === 'bottom') {
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({bottom: res})
      } else if (modaltype === 'avatar') {
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({avatar: res})
      }
    })
  }
@@ -195,15 +275,19 @@
    const { card } = this.props
    const { dict, modaltype, cardcell } = this.state
    let _width = '100%'
    if (card.actions.length > 0) {
      _width = Math.floor((100 / card.actions.length) * 10000) / 10000 + '%'
    if (card.bottom && card.bottom.actions.length > 0) {
      _width = Math.floor((100 / card.bottom.actions.length) * 10000) / 10000 + '%'
    }

    let outclass = card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : ''
    if (card.background && card.background[1]) {
      outclass += ' background ' + card.background[1]
    }
    console.log(card)
    return (
      <div className="line-card-edit-box">
      <div className="line-card-edit-box mingke-table">
        {card.title ? <p className="chart-title">{card.title}</p> : null}
        <div
          className={'ant-card ant-card-bordered chart-card' + (card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : '')}
          className={'ant-card ant-card-bordered chart-card ' + outclass}
          style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
        >
          {card.subelement.includes('header') ?
@@ -211,9 +295,9 @@
              <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
              <div className="ant-card-head-wrapper">
                <div className="ant-card-head-title">{card.header.content}</div>
                <div className="ant-card-extra">
                  <span>Action</span>
                </div>
                {card.header.actions && card.header.actions.length > 0 ? <div className="ant-card-extra">
                  <span>{card.header.actions.length === 1 ? card.header.actions[0].text : 'Action'}</span>
                </div> : null}
              </div>
            </div> : null
          }
@@ -223,8 +307,9 @@
              {card.subelement.includes('avatar') ?
                <div className="ant-card-meta-avatar">
                  <Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} />
                  <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: 32, height: 32}}>
                    <img src={card.avatar.content || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'} alt=""/>
                  <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: card.avatar.width || card.avatar.size || 32}}>
                    {card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null}
                    {card.avatar.type === 'icon' ? <Icon className="avatar-icon" style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null}
                  </span>
                </div> : null
              }
@@ -236,12 +321,13 @@
              />
            </div>
          </div> : null}
          {card.subelement.includes('actions') ?
          {card.subelement.includes('bottom') ?
            <ul className="ant-card-actions">
              <Icon className="edit" title="Edit" type="edit" onClick={this.editAction} />
              {card.actions.map((item, i) => (<li key={i} style={{width: _width}}>
              <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} />
              {card.bottom.actions.map((item, i) => (<li key={i} style={{width: _width}}>
                <span>
                  <Icon type={item.icon || 'dash'}/>
                  {['icon', 'all'].includes(card.bottom.show) ? <Icon type={item.icon || 'dash'}/> : null}
                  {['text', 'all'].includes(card.bottom.show) ? item.text : null}
                </span>
              </li>))}
            </ul> : null

 src/templates/sharecomponent/cardcomponent/index.scss

@@ -27,6 +27,10 @@

    .ant-card-meta {
      position: relative;

      .avatar-icon {
        color: rgba(0, 0, 0, 0.45);
      }
      >.anticon-plus {
        color: #26C281;
        position: absolute;
@@ -64,7 +68,6 @@

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
@@ -134,4 +137,24 @@
      }
    }
  }
  .ant-card.chart-card.background {
    .ant-card-meta-title {
      color: unset;
    }
    .ant-card-meta-description {
      color: unset;
    }
    .ant-card-head {
      color: unset;
      .ant-card-head-title {
        color: unset;
      }
    }
    .ant-card-actions {
      background: transparent;
      li {
        color: unset;
      }
    }
  }
}

 src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx

@@ -121,7 +121,7 @@
    {
      uuid: 'card3',
      url: card3,
      subelement: ['content', 'avatar', 'header', 'actions']
      subelement: ['content', 'avatar', 'header', 'bottom']
    }
  ]
}
@@ -157,8 +157,11 @@
        _selectlegend = _legends[0]
      }
    } else if (_type === 'card') {
      _legends = syslegends[_type]
      _selectlegend = _legends.filter(item => item.uuid === card.cardType)[0]
      _legends = syslegends.card

      if (card.subelement) {
        _selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
      }

      if (!_selectlegend) {
        _selectlegend = _legends[0]
@@ -177,6 +180,8 @@
          item.hidden = false
        } else if (item.key === 'over' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'bgfield') {
          item.hidden = _type !== 'card'
        }
        return item
      })
@@ -223,6 +228,8 @@
            item.hidden = false
          } else if (item.key === 'over' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'bgfield') {
            item.hidden = value !== 'card'
          }
          return item
        })
@@ -421,16 +428,29 @@

            if (!result.details) {
              result.details = [
                {bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {bold: 'false', uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
                {elemType: 'detail', bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {elemType: 'detail',bold: 'false', uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
              ]
              result.actions = [{icon: 'edit'}, {icon: 'plus'}]
              result.bottom = {
                elemType: 'bottom',
                show: 'icon',
                actions: []
              }
              result.header = {
                elemType: 'header',
                content: 'Card title',
                datatype: 'static',
                actions: []
              }
              result.avatar = {content: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', datatype: 'static', width: 32, height: 32}
              result.avatar = {
                elemType: 'avatar',
                content: '',
                type: 'picture',
                field: '',
                size: 14,
                widthType: 'absolute',
                width: 32
              }
            }
          }

@@ -457,7 +477,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="chart-edit-form" id="chartwinter">
      <Form {...formItemLayout} className="chart-edit-form mingke-table" id="chartwinter">
        <Row gutter={24}>{this.getFields()}</Row>
        {legends ? <Row gutter={24} className="chart-model-image">
          {legends.map(item => <Col span={6} key={item.uuid}>

 src/templates/sharecomponent/chartgroupcomponent/index.jsx

@@ -77,6 +77,8 @@
   * @description 添加或修改图表
   */
  handleChart = (item) => {
    const { config } = this.props

    let _type = 'editChart'
    if (!item) {
      _type = 'addChart'
@@ -91,10 +93,19 @@
      }
    }

    let _columns = config.columns.filter(col => ['text', 'number'].includes(col.type) && col.marks && col.marks.filter(_mark => _mark.signType === 'card').length > 0)
    _columns = _columns.map(col => {
      return {
        uuid: col.uuid,
        value: col.field,
        text: col.label
      }
    })

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


 src/templates/sharecomponent/columncomponent/markcolumn/index.jsx

@@ -87,6 +87,9 @@
            _outerclass = 'font ' + record.color[1]
          } else if (record.signType === 'background') {
            _outerclass = 'background ' + record.color[1]
          } else if (record.signType === 'card') {
            _outerclass = 'background ' + record.color[1]
            content = '效果在卡片中可见'
          } else if (record.signType === 'icon') {
            if (record.position === 'front') {
              content = <div><Icon className={'font ' + record.color[1]} type={record.icon} /> {content} </div>

 src/templates/sharecomponent/columncomponent/markcolumn/index.scss

@@ -1,4 +1,9 @@
#mark-column-box-modal {
  .ant-form-item-label .anticon-question-circle {
    color: #c49f47;
    position: relative;
    left: -3px;
  }
  table tr td {
    word-wrap: break-word;
    word-break: break-word;

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx

@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader } from 'antd'
import './index.scss'
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader, Tooltip } from 'antd'

import { minkeColorSystem } from '@/utils/option.js'
import './index.scss'

class UniqueForm extends Component {
  static propTpyes = {
@@ -18,216 +19,7 @@
    originField: this.props.card,
    signType: 'background',
    selectIcon: '',
    options: [
      {
        value: 'DustRed',
        label: '薄暮',
        children: [
          { value: 'dust-red-1', label: 'dust-red-1' },
          { value: 'dust-red-2', label: 'dust-red-2' },
          { value: 'dust-red-3', label: 'dust-red-3' },
          { value: 'dust-red-4', label: 'dust-red-4' },
          { value: 'dust-red-5', label: 'dust-red-5' },
          { value: 'dust-red-6', label: 'dust-red-6' },
          { value: 'dust-red-7', label: 'dust-red-7' },
          { value: 'dust-red-8', label: 'dust-red-8' },
          { value: 'dust-red-9', label: 'dust-red-9' },
          { value: 'dust-red-10', label: 'dust-red-10' }
        ]
      },
      {
        value: 'Volcano',
        label: '火山',
        children: [
          { value: 'volcano-1', label: 'volcano-1' },
          { value: 'volcano-2', label: 'volcano-2' },
          { value: 'volcano-3', label: 'volcano-3' },
          { value: 'volcano-4', label: 'volcano-4' },
          { value: 'volcano-5', label: 'volcano-5' },
          { value: 'volcano-6', label: 'volcano-6' },
          { value: 'volcano-7', label: 'volcano-7' },
          { value: 'volcano-8', label: 'volcano-8' },
          { value: 'volcano-9', label: 'volcano-9' },
          { value: 'volcano-10', label: 'volcano-10' }
        ],
      },
      {
        value: 'SunsetOrange',
        label: '日暮',
        children: [
          { value: 'orange-1', label: 'orange-1' },
          { value: 'orange-2', label: 'orange-2' },
          { value: 'orange-3', label: 'orange-3' },
          { value: 'orange-4', label: 'orange-4' },
          { value: 'orange-5', label: 'orange-5' },
          { value: 'orange-6', label: 'orange-6' },
          { value: 'orange-7', label: 'orange-7' },
          { value: 'orange-8', label: 'orange-8' },
          { value: 'orange-9', label: 'orange-9' },
          { value: 'orange-10', label: 'orange-10' }
        ]
      },
      {
        value: 'CalendulaGold',
        label: '金盏花',
        children: [
          { value: 'gold-1', label: 'gold-1' },
          { value: 'gold-2', label: 'gold-2' },
          { value: 'gold-3', label: 'gold-3' },
          { value: 'gold-4', label: 'gold-4' },
          { value: 'gold-5', label: 'gold-5' },
          { value: 'gold-6', label: 'gold-6' },
          { value: 'gold-7', label: 'gold-7' },
          { value: 'gold-8', label: 'gold-8' },
          { value: 'gold-9', label: 'gold-9' },
          { value: 'gold-10', label: 'gold-10' }
        ]
      },
      {
        value: 'SunriseYellow',
        label: '日出',
        children: [
          { value: 'yellow-1', label: 'yellow-1' },
          { value: 'yellow-2', label: 'yellow-2' },
          { value: 'yellow-3', label: 'yellow-3' },
          { value: 'yellow-4', label: 'yellow-4' },
          { value: 'yellow-5', label: 'yellow-5' },
          { value: 'yellow-6', label: 'yellow-6' },
          { value: 'yellow-7', label: 'yellow-7' },
          { value: 'yellow-8', label: 'yellow-8' },
          { value: 'yellow-9', label: 'yellow-9' },
          { value: 'yellow-10', label: 'yellow-10' }
        ]
      },
      {
        value: 'Lime',
        label: '青柠',
        children: [
          { value: 'lime-1', label: 'lime-1' },
          { value: 'lime-2', label: 'lime-2' },
          { value: 'lime-3', label: 'lime-3' },
          { value: 'lime-4', label: 'lime-4' },
          { value: 'lime-5', label: 'lime-5' },
          { value: 'lime-6', label: 'lime-6' },
          { value: 'lime-7', label: 'lime-7' },
          { value: 'lime-8', label: 'lime-8' },
          { value: 'lime-9', label: 'lime-9' },
          { value: 'lime-10', label: 'lime-10' }
        ]
      },
      {
        value: 'PolarGreen',
        label: '极光绿',
        children: [
          { value: 'green-1', label: 'green-1' },
          { value: 'green-2', label: 'green-2' },
          { value: 'green-3', label: 'green-3' },
          { value: 'green-4', label: 'green-4' },
          { value: 'green-5', label: 'green-5' },
          { value: 'green-6', label: 'green-6' },
          { value: 'green-7', label: 'green-7' },
          { value: 'green-8', label: 'green-8' },
          { value: 'green-9', label: 'green-9' },
          { value: 'green-10', label: 'green-10' }
        ]
      },
      {
        value: 'Cyan',
        label: '明青',
        children: [
          { value: 'cyan-1', label: 'cyan-1' },
          { value: 'cyan-2', label: 'cyan-2' },
          { value: 'cyan-3', label: 'cyan-3' },
          { value: 'cyan-4', label: 'cyan-4' },
          { value: 'cyan-5', label: 'cyan-5' },
          { value: 'cyan-6', label: 'cyan-6' },
          { value: 'cyan-7', label: 'cyan-7' },
          { value: 'cyan-8', label: 'cyan-8' },
          { value: 'cyan-9', label: 'cyan-9' },
          { value: 'cyan-10', label: 'cyan-10' }
        ]
      },
      {
        value: 'DaybreakBlue',
        label: '拂晓蓝',
        children: [
          { value: 'blue-1', label: 'blue-1' },
          { value: 'blue-2', label: 'blue-2' },
          { value: 'blue-3', label: 'blue-3' },
          { value: 'blue-4', label: 'blue-4' },
          { value: 'blue-5', label: 'blue-5' },
          { value: 'blue-6', label: 'blue-6' },
          { value: 'blue-7', label: 'blue-7' },
          { value: 'blue-8', label: 'blue-8' },
          { value: 'blue-9', label: 'blue-9' },
          { value: 'blue-10', label: 'blue-10' }
        ]
      },
      {
        value: 'GeekBlue',
        label: '极客蓝',
        children: [
          { value: 'geekblue-1', label: 'geekblue-1' },
          { value: 'geekblue-2', label: 'geekblue-2' },
          { value: 'geekblue-3', label: 'geekblue-3' },
          { value: 'geekblue-4', label: 'geekblue-4' },
          { value: 'geekblue-5', label: 'geekblue-5' },
          { value: 'geekblue-6', label: 'geekblue-6' },
          { value: 'geekblue-7', label: 'geekblue-7' },
          { value: 'geekblue-8', label: 'geekblue-8' },
          { value: 'geekblue-9', label: 'geekblue-9' },
          { value: 'geekblue-10', label: 'geekblue-10' }
        ]
      },
      {
        value: 'GoldenPurple',
        label: '酱紫',
        children: [
          { value: 'purple-1', label: 'purple-1' },
          { value: 'purple-2', label: 'purple-2' },
          { value: 'purple-3', label: 'purple-3' },
          { value: 'purple-4', label: 'purple-4' },
          { value: 'purple-5', label: 'purple-5' },
          { value: 'purple-6', label: 'purple-6' },
          { value: 'purple-7', label: 'purple-7' },
          { value: 'purple-8', label: 'purple-8' },
          { value: 'purple-9', label: 'purple-9' },
          { value: 'purple-10', label: 'purple-10' }
        ]
      },
      {
        value: 'Magenta',
        label: '法式洋红',
        children: [
          { value: 'magenta-1', label: 'magenta-1' },
          { value: 'magenta-2', label: 'magenta-2' },
          { value: 'magenta-3', label: 'magenta-3' },
          { value: 'magenta-4', label: 'magenta-4' },
          { value: 'magenta-5', label: 'magenta-5' },
          { value: 'magenta-6', label: 'magenta-6' },
          { value: 'magenta-7', label: 'magenta-7' },
          { value: 'magenta-8', label: 'magenta-8' },
          { value: 'magenta-9', label: 'magenta-9' },
          { value: 'magenta-10', label: 'magenta-10' }
        ]
      },
      {
        value: 'Gray',
        label: '中性色',
        children: [
          { value: 'gray-1', label: 'gray-1' },
          { value: 'gray-2', label: 'gray-2' },
          { value: 'gray-3', label: 'gray-3' },
          { value: 'gray-4', label: 'gray-4' },
          { value: 'gray-5', label: 'gray-5' },
          { value: 'gray-6', label: 'gray-6' },
          { value: 'gray-7', label: 'gray-7' },
          { value: 'gray-8', label: 'gray-8' },
          { value: 'gray-9', label: 'gray-9' },
          { value: 'gray-10', label: 'gray-10' }
        ]
      }
    ]
    options: minkeColorSystem
  }

  UNSAFE_componentWillMount() {
@@ -458,7 +250,12 @@
            </Form.Item>
          </Col> : null}
          <Col span={6}>
            <Form.Item label={'标记方式'}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="卡片类型，在卡片图表中起效">
                <Icon type="question-circle" />
                {'标记'}
              </Tooltip>
            }>
              {getFieldDecorator('signType', {
                initialValue: 'background',
                rules: [
@@ -473,6 +270,7 @@
                  <Select.Option value="background">单元格（背景）</Select.Option>
                  <Select.Option value="line">行</Select.Option>
                  <Select.Option value="icon">图标</Select.Option>
                  <Select.Option value="card">卡片</Select.Option>
                </Select>
              )}
            </Form.Item>

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.scss

@@ -1,26 +1,7 @@
#model-mark-form-box {
  .ant-select-dropdown-menu-item {
    .anticon {
      font-size: 16px;
    }
  }
  .ant-cascader-menu {
    min-width: 120px;
    height: 300px;
  }
  .ant-cascader-menu + .ant-cascader-menu {
    min-width: 130px;
    .ant-cascader-menu-item {
      padding: 0;
      div {
        padding: 5px 12px;
        .anticon {
          font-size: 18px;
        }
      }
    }
    .ant-cascader-menu-item:hover {
      background: unset;
      font-size: 18px;
    }
  }
}

 src/templates/sharecomponent/tablecomponent/index.jsx

@@ -217,7 +217,7 @@
   */
  deleteTable = (table) => {
    const { config } = this.props
    const {selectedTables, tableFields} = this.state
    const { selectedTables, tableFields } = this.state

    let _tables = selectedTables.filter(item => item.TbName !== table.TbName)
    let _fields = tableFields.filter(item => item.tableName !== table.TbName)

 src/templates/sharecomponent/tabscomponent/tabdragelement/index.jsx

@@ -94,7 +94,7 @@
              <Icon className="edit close" type="close" onClick={() => deleteMenu(card)} />
            </div>
          } key={`${index}`}>
            《{card.label}》标签内容
            《{card.label}》标签
          </TabPane>
        ))}
      </Tabs>

 src/templates/subtableconfig/index.jsx

@@ -14,13 +14,9 @@
import { getSubMenuForm } from '@/templates/zshare/formconfig'

import asyncComponent from '@/utils/asyncComponent'
import TableComponent from '@/templates/sharecomponent/tablecomponent'
import FieldsComponent from '@/templates/sharecomponent/fieldscomponent'
import ChartGroupComponent from '@/templates/sharecomponent/chartgroupcomponent'
import SearchComponent from '@/templates/sharecomponent/searchcomponent'
import ActionComponent from '@/templates/sharecomponent/actioncomponent'
import ColumnComponent from '@/templates/sharecomponent/columncomponent'
import ChartComponent from '@/templates/sharecomponent/chartcomponent'

import MenuForm from '@/templates/zshare/menuform'
import EditComponent from '@/templates/zshare/editcomponent'
@@ -31,7 +27,13 @@
const { Panel } = Collapse
const { confirm } = Modal
const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS

const SettingComponent = asyncComponent(() => import('@/templates/sharecomponent/settingcomponent'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
const ChartGroupComponent = asyncComponent(() => import('@/templates/sharecomponent/chartgroupcomponent'))
const ChartComponent = asyncComponent(() => import('@/templates/sharecomponent/chartcomponent'))
// const CardComponent = asyncComponent(() => import('@/templates/sharecomponent/cardcomponent'))

class SubTableConfig extends Component {
  static propTpyes = {
@@ -1017,7 +1019,6 @@
                <TableComponent
                  config={config}
                  containerId="subtable-basedata"
                  selectedTables={config.tables || []}
                  updatetable={this.updatetable}
                />
              </Panel>

 src/templates/zshare/formconfig.jsx

@@ -1217,7 +1217,7 @@
 * @param {object} card       // 搜索条件对象
 * @param {Array}  roleList   // 角色列表-黑名单
 */
export function getChartViewForm (card, roleList = []) {
export function getChartViewForm (card, roleList = [], _columns) {
  let _charts = [{
    value: 'line',
    text: '折线图'
@@ -1332,6 +1332,16 @@
        value: 'roll',
        text: '滚动'
      }]
    },
    {
      type: 'select',
      key: 'bgfield',
      label: '背景控制',
      initVal: card.bgfield || '',
      required: false,
      readonly: false,
      hidden: true,
      options: _columns
    },
    {
      type: 'multiselect',
@@ -2092,6 +2102,7 @@
      label: '数据类型',
      initVal: card.datatype || 'dynamic',
      required: true,
      forbid: !['detail', 'header'].includes(_type),
      options: [{
        value: 'dynamic',
        text: '动态'
@@ -2101,11 +2112,27 @@
      }]
    },
    {
      type: 'radio',
      key: 'type',
      label: '类型',
      initVal: card.type || 'picture',
      required: true,
      forbid: !['avatar'].includes(_type),
      options: [{
        value: 'picture',
        text: '图片'
      }, {
        value: 'icon',
        text: '图标'
      }]
    },
    {
      type: 'text',
      key: 'content',
      label: '内容',
      initVal: card.content || '',
      required: true
      required: true,
      forbid: !['detail', 'header'].includes(_type),
    },
    {
      type: 'select',
@@ -2113,6 +2140,7 @@
      label: '字段',
      initVal: card.field || '',
      required: true,
      forbid: !['detail', 'header', 'avatar'].includes(_type),
      options: _columns
    },
    {
@@ -2121,7 +2149,7 @@
      label: '加粗',
      initVal: card.bold || 'false',
      required: true,
      forbid: _type !== 'detail',
      forbid: !['detail'].includes(_type),
      options: [{
        value: 'true',
        text: '是'
@@ -2136,7 +2164,7 @@
      label: '宽度',
      initVal: card.width || '',
      required: false,
      forbid: _type !== 'detail',
      forbid: !['detail'].includes(_type),
      options: [{
        value: '',
        text: '100%'
@@ -2150,13 +2178,51 @@
    },
    {
      type: 'radio',
      key: 'widthType',
      label: '宽度设置',
      initVal: card.widthType || 'absolute',
      required: false,
      forbid: !['avatar'].includes(_type),
      hidden: true,
      options: [{
        value: 'ratio',
        text: '比例'
      }, {
        value: 'absolute',
        text: '绝对值'
      }]
    },
    {
      type: 'number',
      key: 'width',
      label: '宽度值',
      initVal: card.width || 32,
      min: 1,
      max: card.widthType === 'ratio' ? 100 : 500,
      required: false,
      hidden: true,
      forbid: !['avatar'].includes(_type)
    },
    {
      type: 'number',
      key: 'size',
      label: '字体大小',
      initVal: card.size || 14,
      min: 12,
      max: 500,
      required: false,
      hidden: true,
      forbid: !['avatar'].includes(_type)
    },
    {
      type: 'radio',
      key: 'align',
      label: '对齐',
      initVal: card.align || '',
      initVal: card.align || 'left',
      required: false,
      forbid: _type !== 'detail',
      forbid: !['detail'].includes(_type),
      options: [{
        value: '',
        value: 'left',
        text: '左'
      }, {
        value: 'align-center',
@@ -2167,13 +2233,31 @@
      }]
    },
    {
      type: 'radio',
      key: 'show',
      label: '显示',
      initVal: card.show || '',
      required: false,
      forbid: !['bottom'].includes(_type),
      options: [{
        value: 'icon',
        text: '图标'
      }, {
        value: 'text',
        text: '文字'
      }, {
        value: 'all',
        text: '全部'
      }]
    },
    {
      type: 'multiselect',
      key: 'actions',
      label: '按钮组',
      tooltip: '',
      initVal: card.actions || [],
      initVal: card.actions ? card.actions.map(cell => cell.value) : [],
      required: false,
      forbid: _type !== 'header',
      forbid: !['header', 'bottom'].includes(_type),
      options: _actions
    },
  ]

 src/utils/option.js

@@ -293,4 +293,215 @@
  text: '白底紫框'
}]

export const minkeColorSystem = [
  {
    value: 'DustRed',
    label: '薄暮',
    children: [
      { value: 'dust-red-1', label: 'dust-red-1' },
      { value: 'dust-red-2', label: 'dust-red-2' },
      { value: 'dust-red-3', label: 'dust-red-3' },
      { value: 'dust-red-4', label: 'dust-red-4' },
      { value: 'dust-red-5', label: 'dust-red-5' },
      { value: 'dust-red-6', label: 'dust-red-6' },
      { value: 'dust-red-7', label: 'dust-red-7' },
      { value: 'dust-red-8', label: 'dust-red-8' },
      { value: 'dust-red-9', label: 'dust-red-9' },
      { value: 'dust-red-10', label: 'dust-red-10' }
    ]
  },
  {
    value: 'Volcano',
    label: '火山',
    children: [
      { value: 'volcano-1', label: 'volcano-1' },
      { value: 'volcano-2', label: 'volcano-2' },
      { value: 'volcano-3', label: 'volcano-3' },
      { value: 'volcano-4', label: 'volcano-4' },
      { value: 'volcano-5', label: 'volcano-5' },
      { value: 'volcano-6', label: 'volcano-6' },
      { value: 'volcano-7', label: 'volcano-7' },
      { value: 'volcano-8', label: 'volcano-8' },
      { value: 'volcano-9', label: 'volcano-9' },
      { value: 'volcano-10', label: 'volcano-10' }
    ],
  },
  {
    value: 'SunsetOrange',
    label: '日暮',
    children: [
      { value: 'orange-1', label: 'orange-1' },
      { value: 'orange-2', label: 'orange-2' },
      { value: 'orange-3', label: 'orange-3' },
      { value: 'orange-4', label: 'orange-4' },
      { value: 'orange-5', label: 'orange-5' },
      { value: 'orange-6', label: 'orange-6' },
      { value: 'orange-7', label: 'orange-7' },
      { value: 'orange-8', label: 'orange-8' },
      { value: 'orange-9', label: 'orange-9' },
      { value: 'orange-10', label: 'orange-10' }
    ]
  },
  {
    value: 'CalendulaGold',
    label: '金盏花',
    children: [
      { value: 'gold-1', label: 'gold-1' },
      { value: 'gold-2', label: 'gold-2' },
      { value: 'gold-3', label: 'gold-3' },
      { value: 'gold-4', label: 'gold-4' },
      { value: 'gold-5', label: 'gold-5' },
      { value: 'gold-6', label: 'gold-6' },
      { value: 'gold-7', label: 'gold-7' },
      { value: 'gold-8', label: 'gold-8' },
      { value: 'gold-9', label: 'gold-9' },
      { value: 'gold-10', label: 'gold-10' }
    ]
  },
  {
    value: 'SunriseYellow',
    label: '日出',
    children: [
      { value: 'yellow-1', label: 'yellow-1' },
      { value: 'yellow-2', label: 'yellow-2' },
      { value: 'yellow-3', label: 'yellow-3' },
      { value: 'yellow-4', label: 'yellow-4' },
      { value: 'yellow-5', label: 'yellow-5' },
      { value: 'yellow-6', label: 'yellow-6' },
      { value: 'yellow-7', label: 'yellow-7' },
      { value: 'yellow-8', label: 'yellow-8' },
      { value: 'yellow-9', label: 'yellow-9' },
      { value: 'yellow-10', label: 'yellow-10' }
    ]
  },
  {
    value: 'Lime',
    label: '青柠',
    children: [
      { value: 'lime-1', label: 'lime-1' },
      { value: 'lime-2', label: 'lime-2' },
      { value: 'lime-3', label: 'lime-3' },
      { value: 'lime-4', label: 'lime-4' },
      { value: 'lime-5', label: 'lime-5' },
      { value: 'lime-6', label: 'lime-6' },
      { value: 'lime-7', label: 'lime-7' },
      { value: 'lime-8', label: 'lime-8' },
      { value: 'lime-9', label: 'lime-9' },
      { value: 'lime-10', label: 'lime-10' }
    ]
  },
  {
    value: 'PolarGreen',
    label: '极光绿',
    children: [
      { value: 'green-1', label: 'green-1' },
      { value: 'green-2', label: 'green-2' },
      { value: 'green-3', label: 'green-3' },
      { value: 'green-4', label: 'green-4' },
      { value: 'green-5', label: 'green-5' },
      { value: 'green-6', label: 'green-6' },
      { value: 'green-7', label: 'green-7' },
      { value: 'green-8', label: 'green-8' },
      { value: 'green-9', label: 'green-9' },
      { value: 'green-10', label: 'green-10' }
    ]
  },
  {
    value: 'Cyan',
    label: '明青',
    children: [
      { value: 'cyan-1', label: 'cyan-1' },
      { value: 'cyan-2', label: 'cyan-2' },
      { value: 'cyan-3', label: 'cyan-3' },
      { value: 'cyan-4', label: 'cyan-4' },
      { value: 'cyan-5', label: 'cyan-5' },
      { value: 'cyan-6', label: 'cyan-6' },
      { value: 'cyan-7', label: 'cyan-7' },
      { value: 'cyan-8', label: 'cyan-8' },
      { value: 'cyan-9', label: 'cyan-9' },
      { value: 'cyan-10', label: 'cyan-10' }
    ]
  },
  {
    value: 'DaybreakBlue',
    label: '拂晓蓝',
    children: [
      { value: 'blue-1', label: 'blue-1' },
      { value: 'blue-2', label: 'blue-2' },
      { value: 'blue-3', label: 'blue-3' },
      { value: 'blue-4', label: 'blue-4' },
      { value: 'blue-5', label: 'blue-5' },
      { value: 'blue-6', label: 'blue-6' },
      { value: 'blue-7', label: 'blue-7' },
      { value: 'blue-8', label: 'blue-8' },
      { value: 'blue-9', label: 'blue-9' },
      { value: 'blue-10', label: 'blue-10' }
    ]
  },
  {
    value: 'GeekBlue',
    label: '极客蓝',
    children: [
      { value: 'geekblue-1', label: 'geekblue-1' },
      { value: 'geekblue-2', label: 'geekblue-2' },
      { value: 'geekblue-3', label: 'geekblue-3' },
      { value: 'geekblue-4', label: 'geekblue-4' },
      { value: 'geekblue-5', label: 'geekblue-5' },
      { value: 'geekblue-6', label: 'geekblue-6' },
      { value: 'geekblue-7', label: 'geekblue-7' },
      { value: 'geekblue-8', label: 'geekblue-8' },
      { value: 'geekblue-9', label: 'geekblue-9' },
      { value: 'geekblue-10', label: 'geekblue-10' }
    ]
  },
  {
    value: 'GoldenPurple',
    label: '酱紫',
    children: [
      { value: 'purple-1', label: 'purple-1' },
      { value: 'purple-2', label: 'purple-2' },
      { value: 'purple-3', label: 'purple-3' },
      { value: 'purple-4', label: 'purple-4' },
      { value: 'purple-5', label: 'purple-5' },
      { value: 'purple-6', label: 'purple-6' },
      { value: 'purple-7', label: 'purple-7' },
      { value: 'purple-8', label: 'purple-8' },
      { value: 'purple-9', label: 'purple-9' },
      { value: 'purple-10', label: 'purple-10' }
    ]
  },
  {
    value: 'Magenta',
    label: '法式洋红',
    children: [
      { value: 'magenta-1', label: 'magenta-1' },
      { value: 'magenta-2', label: 'magenta-2' },
      { value: 'magenta-3', label: 'magenta-3' },
      { value: 'magenta-4', label: 'magenta-4' },
      { value: 'magenta-5', label: 'magenta-5' },
      { value: 'magenta-6', label: 'magenta-6' },
      { value: 'magenta-7', label: 'magenta-7' },
      { value: 'magenta-8', label: 'magenta-8' },
      { value: 'magenta-9', label: 'magenta-9' },
      { value: 'magenta-10', label: 'magenta-10' }
    ]
  },
  {
    value: 'Gray',
    label: '中性色',
    children: [
      { value: 'gray-1', label: 'gray-1' },
      { value: 'gray-2', label: 'gray-2' },
      { value: 'gray-3', label: 'gray-3' },
      { value: 'gray-4', label: 'gray-4' },
      { value: 'gray-5', label: 'gray-5' },
      { value: 'gray-6', label: 'gray-6' },
      { value: 'gray-7', label: 'gray-7' },
      { value: 'gray-8', label: 'gray-8' },
      { value: 'gray-9', label: 'gray-9' },
      { value: 'gray-10', label: 'gray-10' }
    ]
  }
]

export const queryTableSql = 'select TbName,Remark from (select TbName,Remark from sDataDictb where appkey= @appkey@ and Deleted=0 union select a.TbName,Remark from (select TbName,Remark from sDataDictb where appkey= \'\' and Deleted=0 ) a left join (select TbName from sDataDictb where appkey= @appkey@ and Deleted=0 ) b on a.TbName=b.TbName where b.TbName is null ) t'