2019-12-21

king

2019-12-21 65e310e342effbb7d98bd5f97b3404a44e3c5233

 src/templates/comtableconfig/index.jsx

@@ -7,8 +7,10 @@
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd'
import moment from 'moment'
import DragElement from './dragelement'
import TabDragElement from './tabdragelement'
import SourceElement from './dragelement/source'
import Api from '@/api'
import TabForm from './tabform'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
@@ -42,6 +44,7 @@
    dict: CommonDict,        // 字典
    config: null,            // 页面配置
    visible: false,          // 搜索条件、按钮、显示列，模态框显示控制
    modalTitle: '',          // 模态框的标题
    tableVisible: false,     // 数据表字段模态框
    addType: '',             // 添加类型-搜索条件或显示列
    tableColumns: [],        // 表格显示列
@@ -53,6 +56,7 @@
    searchloading: false,    // 搜索条件加载中
    actionloading: false,    // 按钮加载中
    columnsloading: false,   // 显示列加载中
    tabloading: false,       // 标签页加载中
    menuloading: false,      // 菜单保存中
    menucloseloading: false, // 菜单关闭时，选择保存
    loading: false,          // 加载中，页面spin
@@ -107,6 +111,9 @@
        return item
      })
    }

    _config.tabs = _config.tabs || []
    _config.subtabs = _config.subtabs || []

    this.setState({
      originActions: _oriActions,
@@ -280,6 +287,8 @@
          this.handleAction(card)
        } else if (type === 'columns') {
          this.handleColumn(card)
        } else if (type === 'tabs' || type === 'subtabs') {
          this.handleTab(card)
        }
      })
    } else {
@@ -291,6 +300,7 @@
    this.setState({
      visible: true,
      formtemp: 'search',
      modalTitle: '编辑-搜索条件',
      card: card,
      formlist: [
        {
@@ -474,11 +484,12 @@
    })
  }

  handleAction = (card) => {
  handleAction = (card, type) => {
    let ableField = this.props.permFuncField.join(', ')
    this.setState({
      visible: true,
      formtemp: 'action',
      modalTitle: type === 'copy' ? '复制-按钮' : '编辑-按钮',
      card: card,
      formlist: [
        {
@@ -692,6 +703,7 @@
      this.setState({
        visible: true,
        formtemp: 'columns',
        modalTitle: '编辑-显示列',
        card: card,
        formlist: [
          {
@@ -900,10 +912,90 @@
    }
  }

  handleTab = (card) => {
    this.setState({
      visible: true,
      formtemp: 'tabs',
      modalTitle: '编辑-标签页',
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label || '',
          required: true
        },
        {
          type: 'select',
          key: 'type',
          label: this.state.dict['header.form.type'],
          initVal: card.type || '',
          required: true,
          options: [{
            value: 'SubTable',
            text: this.state.dict['header.menu.tab.subtable']
          }]
        },
        {
          type: 'select',
          key: 'linkId',
          label: '关联标签',
          initVal: card.linkId || '',
          required: true,
          options: [{
            value: 'table',
            text: 'table'
          }, {
            value: 'bar-chart',
            text: 'bar-chart'
          }, {
            value: 'pie-chart',
            text: 'pie-chart'
          }, {
            value: 'line-chart',
            text: 'line-chart'
          }]
        },
        {
          type: 'select',
          key: 'icon',
          label: this.state.dict['header.menu.icon'],
          initVal: card.icon || '',
          required: false,
          options: [{
            value: '',
            text: this.state.dict['header.form.empty']
          }, {
            value: 'table',
            text: 'table'
          }, {
            value: 'bar-chart',
            text: 'bar-chart'
          }, {
            value: 'pie-chart',
            text: 'pie-chart'
          }, {
            value: 'line-chart',
            text: 'line-chart'
          }]
        },
        {
          type: 'text',
          key: 'description',
          label: this.state.dict['header.form.description'],
          initVal: card.description || '',
          required: false
        }
      ]
    })
  }

  handleGridBtn = () => {
    this.setState({
      visible: true,
      formtemp: 'gridbtn'
      formtemp: 'gridbtn',
      modalTitle: '编辑-操作列',
    })
  }

@@ -1009,12 +1101,14 @@
          searchloading: true,
          actionloading: true,
          columnsloading: true,
          tabloading: true,
          visible: false
        }, () => {
          this.setState({
            searchloading: false,
            actionloading: false,
            columnsloading: false
            columnsloading: false,
            tabloading: false
          })
        })
      })
@@ -1576,13 +1670,20 @@
            return true
          }
        })

        let refreshtype = element.type + 'loading'

        if (/^tab/.test(refreshtype)) {
          refreshtype = 'tabloading'
        }

        _this.setState({
          config: _config,
          delActions: [..._this.state.delActions, element.card.uuid],
          [element.type + 'loading']: true
          [refreshtype]: true
        }, () => {
          _this.setState({
            [element.type + 'loading']: false
            [refreshtype]: false
          })
        })
      },
@@ -1613,6 +1714,12 @@
      }
      if (config.columns[0] && config.columns[0].origin) {
        config.columns = config.columns.filter(item => !item.origin)
      }
      if (config.tabs[0] && config.tabs[0].origin) {
        config.tabs = config.tabs.filter(item => !item.origin)
      }
      if (config.subtabs[0] && config.subtabs[0].origin) {
        config.subtabs = config.subtabs.filter(item => !item.origin)
      }

      let _LongParam = ''
@@ -1869,7 +1976,9 @@
    if (
      (config.search[0] && config.search[0].origin) ||
      (config.action[0] && config.action[0].origin) ||
      (config.columns[0] && config.columns[0].origin)
      (config.columns[0] && config.columns[0].origin) ||
      (config.tabs[0] && config.tabs[0].origin) ||
      (config.subtabs[0] && config.subtabs[0].origin)
    ) {
      isAdd = true
    }
@@ -2229,7 +2338,9 @@
    if (
      (config.search[0] && config.search[0].origin) ||
      (config.action[0] && config.action[0].origin) ||
      (config.columns[0] && config.columns[0].origin)
      (config.columns[0] && config.columns[0].origin) ||
      (config.tabs[0] && config.tabs[0].origin) ||
      (config.subtabs[0] && config.subtabs[0].origin)
    ) {
      isAdd = true
    }
@@ -2421,6 +2532,13 @@
                </div>
                <Button type="primary" block onClick={() => this.queryField('columns')}>{this.state.dict['header.menu.column.add']}</Button>
              </Panel>
              <Panel header={this.state.dict['header.menu.tab']} key="4">
                <div className="search-element">
                  {Source.tabItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
              </Panel>
            </Collapse>
          </div>
          <div className="setting">
@@ -2439,12 +2557,12 @@
                </Tooltip>
                {!this.state.searchloading ?
                  <DragElement
                    list={this.state.config.search}
                    type="search"
                    placeholder={this.state.dict['header.form.search.placeholder']}
                    list={this.state.config.search}
                    handleList={this.handleList}
                    handleMenu={this.handleSearch}
                    deleteMenu={this.deleteElement}
                    placeholder={this.state.dict['header.form.search.placeholder']}
                  /> : null
                }
              </div>
@@ -2454,13 +2572,13 @@
                </Tooltip>
                {!this.state.actionloading ?
                  <DragElement
                    list={this.state.config.action}
                    type="action"
                    placeholder={this.state.dict['header.form.action.placeholder']}
                    list={this.state.config.action}
                    handleList={this.handleList}
                    handleMenu={this.handleAction}
                    copyElement={this.handleAction}
                    copyElement={(val) => this.handleAction(val, 'copy')}
                    deleteMenu={this.deleteElement}
                    placeholder={this.state.dict['header.form.action.placeholder']}
                  /> : null
                }
              </div>
@@ -2471,16 +2589,33 @@
                <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showColumnName} onChange={this.onColumnNameChange} />
                {!this.state.columnsloading ?
                  <DragElement
                    type="columns"
                    list={this.state.config.columns}
                    setting={this.state.config.setting}
                    gridBtn={this.state.config.gridBtn}
                    type="columns"
                    placeholder={this.state.dict['header.form.column.placeholder']}
                    handleList={this.handleList}
                    handleMenu={this.handleColumn}
                    deleteMenu={this.deleteElement}
                    handleGridBtn={this.handleGridBtn}
                    showfield={this.state.showColumnName}
                    placeholder={this.state.dict['header.form.column.placeholder']}
                  /> : null
                }
              </div>
              <div className="tab-list">
                <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《标签页》中，选择对应类型的标签页拖至此处添加。">
                  <Icon type="question-circle" />
                </Tooltip>
                {/* {this.state.config.tabs.length > 0 ? <Icon type="setting" onClick={this.changeSetting} /> : null} */}
                {!this.state.tabloading ?
                  <TabDragElement
                    type="tabs"
                    list={this.state.config.tabs}
                    setting={this.state.config.setting}
                    handleList={this.handleList}
                    handleMenu={this.handleTab}
                    deleteMenu={this.deleteElement}
                    placeholder={this.state.dict['header.form.tab.placeholder']}
                  /> : null
                }
              </div>
@@ -2489,11 +2624,10 @@
        </DndProvider>
        {/* 编辑搜索条件、按钮、显示列 */}
        <Modal
          title={this.state.dict['header.edit']}
          title={this.state.modalTitle}
          visible={this.state.visible}
          width={700}
          onCancel={() => { this.setState({ visible: false }) }}
          // onOk={this.handleSubmit}
          footer={[
            this.state.formtemp === 'action' ?
            <Button key="delete" className="mk-btn mk-purple" onClick={this.creatFunc} loading={this.state.funcLoading}>{this.state.dict['header.menu.func.create']}</Button> : null,
@@ -2541,6 +2675,15 @@
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
          {this.state.formtemp === 'tabs' ?
            <TabForm
              type="tabs"
              dict={this.state.dict}
              card={this.state.card}
              formlist={this.state.formlist}
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
        </Modal>
        {/* 根据字段名添加显示列及搜索条件 */}
        <Modal