import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Row, Col, Input, Button, Card, notification } from 'antd'
|
// import moment from 'moment'
|
|
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 = {
|
MenuNo: PropTypes.string, // 菜单参数
|
MenuName: PropTypes.string, // 菜单参数
|
MenuID: PropTypes.string // 菜单Id
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
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) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
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>
|
)
|
}
|
}
|
|
export default TabManage
|
