2020-03-18

king

2020-03-18 bbe52230e61c5b911da9e22e6a11c332b52baf7c

2020-03-18

 src/assets/img/rolemanage.jpg

 src/components/sidemenu/editthdmenu/index.jsx

@@ -766,68 +766,69 @@
          <Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{this.state.dict['header.confirm']}</Button>
          <Button onClick={() => {this.handleSubBtn('close')}}>{this.state.dict['header.close']}</Button>
        </div>
        {this.state.tabview === 'template' &&
        <div className="editboard">
          <div className="workplace">
            <Button className="top-btn" onClick={this.exittabview}>{this.state.dict['header.cancel']}</Button>
            {this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
              <TabPane tab="系统模板" key="1">
                <Row>
                  {this.state.sysTemplates.map((template, index) => {
                    if (template.hidden) return ''
        {this.state.tabview === 'template' ?
          <div className="editboard">
            <div className="workplace">
              <Button className="top-btn mk-yellow" onClick={this.exittabview}>{this.state.dict['header.cancel']}</Button>
              {this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
                <TabPane tab="系统模板" key="1">
                  <Row>
                    {this.state.sysTemplates.map((template, index) => {
                      if (template.hidden) return ''

                    return (
                      <Col key={`${index}`} span={8}>
                        <Card
                          title={template.title}>
                          <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                          <div className="card-operation">
                            <Button type="primary" onClick={() => {this.useTemplate(template, 'sys')}}>使用模板</Button>
                          </div>
                        </Card>
                      </Col>
                    )
                  })}
                </Row>
              </TabPane>
              <TabPane tab="已使用模板" key="2">
                <Row>
                  <Col span={8}>
                    <Search placeholder="请输入菜单名称" defaultValue={this.state.tempSearchKey} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
                  </Col>
                </Row>
                <Row>
                  {this.state.usedTemplates && this.state.usedTemplates.map((template, index) => {
                    if (template.title.toLowerCase().indexOf(this.state.tempSearchKey.toLowerCase()) >= 0) {
                      return (
                        <Col key={template.type + index} span={8}>
                        <Col key={`${index}`} span={8}>
                          <Card
                            title={template.title}>
                            <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                            <div className="card-operation">
                              <Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
                              <Button type="primary" onClick={() => {this.useTemplate(template, 'sys')}}>使用模板</Button>
                            </div>
                          </Card>
                        </Col>
                      )
                    } else {
                      return ''
                    }
                  })}
                </Row>
              </TabPane>
            </Tabs>}
          </div>
        </div>}
        {this.state.tabview === 'CommonTable' &&
                    })}
                  </Row>
                </TabPane>
                <TabPane tab="已使用模板" key="2">
                  <Row>
                    <Col span={8}>
                      <Search placeholder="请输入菜单名称" defaultValue={this.state.tempSearchKey} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
                    </Col>
                  </Row>
                  <Row>
                    {this.state.usedTemplates && this.state.usedTemplates.map((template, index) => {
                      if (template.title.toLowerCase().indexOf(this.state.tempSearchKey.toLowerCase()) >= 0) {
                        return (
                          <Col key={template.type + index} span={8}>
                            <Card
                              title={template.title}>
                              <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                              <div className="card-operation">
                                <Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
                              </div>
                            </Card>
                          </Col>
                        )
                      } else {
                        return ''
                      }
                    })}
                  </Row>
                </TabPane>
              </Tabs>}
            </div>
          </div> : null
        }
        {this.state.tabview === 'CommonTable' ?
          <ComTableConfig
            menu={this.state.editMenu}
            optionLibs={this.state.optionLibs}
            reloadmenu={() => {this.props.reload()}}
            handleView={this.handleView}
          />
          /> : null
        }
        {this.state.tabview === 'Modal' &&
        {this.state.tabview === 'Modal' ?
          <ModalConfig
            menu={this.state.editMenu}
            optionLibs={this.state.optionLibs}
@@ -840,9 +841,9 @@
            editAction={this.state.editAction}
            subConfig={this.state.subConfig}
            handleView={this.handleView}
          />
          /> : null
        }
        {this.state.tabview === 'SubTable' &&
        {this.state.tabview === 'SubTable' ?
          <SubTable
            menu={this.state.editMenu}
            optionLibs={this.state.optionLibs}
@@ -853,16 +854,16 @@
            btnTabConfig={this.state.btnTabConfig}
            config={this.state.subConfig}
            handleView={this.handleView}
          />
          /> : null
        }
        {this.state.tabview === 'FormTab' &&
        {this.state.tabview === 'FormTab' ?
          <FormTabConfig
            menu={this.state.editMenu}
            optionLibs={this.state.optionLibs}
            btnTab={this.state.btnTab}
            config={this.state.subConfig}
            handleView={this.handleView}
          />
          /> : null
        }
        {/* 图片预览 */}
        <Preview cancel={this.cancelPrePicture} preview={this.state.preview} template={this.state.pretemplate} confirm={this.useTemplate}/>

 src/tabviews/tabmanage/index.jsx

@@ -1,17 +1,20 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
// import { notification, Tabs, Icon, Switch } from 'antd'
import { Row, Col, Input, Button, Card, notification } from 'antd'
// import moment from 'moment'

// import Api from '@/api'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
// import options from '@/store/options.js'
// import { verupMainTable } from './config.js'
import subtableurl from '@/assets/img/subtable.jpg'

import './index.scss'

const { Search } = Input

class TabManage extends Component {
  static propTpyes = {
@@ -22,12 +25,50 @@

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    ContainerId: Utils.getuuid() // 菜单外层html Id
    ContainerId: Utils.getuuid(), // 菜单外层html Id
    searchKey: '',
    tabviews: null,
    cols: 8
  }


  UNSAFE_componentWillMount () {
    let docwidth = document.body.offsetWidth
    let cols = 8

    if (docwidth > 1500) {
      cols = 6
    } else if (docwidth > 1900) {
      cols = 4
    }
    
    this.setState({
      cols: cols
    })
  }

  componentDidMount () {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => {
      if (res.status) {
        this.setState({
          tabviews: res.UserTemp.map(temp => {
            return {
              uuid: temp.MenuID,
              value: temp.MenuID,
              text: temp.MenuName,
              type: temp.Template,
              MenuNo: temp.MenuNo
            }
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 10
        })
      }
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -44,11 +85,35 @@
  }

  render() {
    // const {  } = this.state
    const { cols, tabviews } = this.state

    return (
      <div className="tab-manage" id={this.state.ContainerId}>
        
        <Row>
          <Col className="tab-search" span={6}>
            <Search placeholder="请输入标签名称" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
          <Col className="tab-thaw" span={6} offset={12}>
            <Button type="primary">标签解冻</Button>
          </Col>
        </Row>
        <Row className="tab-list">
          {tabviews && tabviews.map((tab, index) => {
            return (
              <Col span={cols} key={index}>
                <Card
                  className="tab-card"
                  title={tab.text}
                >
                  <img onClick={() => {this.previewPicture()}} src={subtableurl} alt=""/>
                  <div className="card-operation">
                    <Button type="primary">使用模板</Button>
                  </div>
                </Card>
              </Col>
            )
          })}
        </Row>
      </div>
    )
  }

 src/tabviews/tabmanage/index.scss

@@ -1,3 +1,27 @@
.tab-manage {
  
  position: relative;
  padding: 16px 20px 80px;

  .tab-search {
    .ant-input-search {
      max-width: 300px;
    }
  }
  .tab-thaw {
    text-align: right;
  }
  .tab-list {
    padding-top: 20px;
    .ant-col {
      padding: 0 10px 20px;
    }
    .tab-card {
      .ant-card-body {
        padding: 0;
        img {
          max-width: 100%;
        }
      }
    }
  }
}

 src/utils/option.js

@@ -2,6 +2,7 @@
import enUS from '@/locales/en-US/share.js'
import nortable from '@/assets/img/normaltable.jpg'
import mainsubtable from '@/assets/img/mainsubtable.jpg'
import rolemanage from '@/assets/img/rolemanage.jpg'

const _dict =  sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

@@ -61,7 +62,7 @@
  {
    title: '角色权限分配',
    type: 'RolePermission',
    url: mainsubtable,
    url: rolemanage,
    isSystem: true,
    hidden: true
  }

 src/utils/utils.js

@@ -289,6 +289,12 @@
        newsearches[item.key] = item.value
      }
    })

    Object.keys(newsearches).forEach(key => {
      if (!newsearches[key]) {
        delete newsearches[key]
      }
    })
    
    return newsearches
  }