2020-03-18

king

2020-03-18 bbe52230e61c5b911da9e22e6a11c332b52baf7c

 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>
    )
  }