import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Row, Col, Input, Button, Card, notification, Modal, Empty, Spin } 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 TransferForm from './transferform'
|
import MutilForm from './mutilform'
|
import subtableurl from '@/assets/img/subtable.jpg'
|
|
import './index.scss'
|
|
const { Search } = Input
|
const { confirm } = Modal
|
|
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,
|
loading: true,
|
modaltype: '',
|
editTab: null,
|
submitloading: false,
|
cols: 8,
|
thawVisible: false,
|
thawmenulist: null
|
|
}
|
|
getTabs = () => {
|
Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => {
|
if (res.status) {
|
this.setState({
|
loading: false,
|
tabviews: res.UserTemp.map(temp => {
|
return {
|
uuid: temp.MenuID,
|
value: temp.MenuID,
|
MenuName: temp.MenuName,
|
type: temp.Template,
|
MenuNo: temp.MenuNo,
|
Remark: temp.Remark
|
}
|
})
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
UNSAFE_componentWillMount () {
|
let docwidth = document.body.offsetWidth
|
let cols = 8
|
|
if (docwidth > 1800) {
|
cols = 6
|
}
|
|
this.setState({
|
cols: cols
|
})
|
}
|
|
componentDidMount () {
|
this.getTabs()
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
handleTab = (tab, type) => {
|
let _this = this
|
|
if (type === 'delete') {
|
confirm({
|
title: "确定删除该标签吗？",
|
onOk() {
|
return new Promise(resolve => {
|
let _param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: tab.uuid
|
}
|
|
Api.getSystemConfig(_param).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
} else {
|
notification.success({
|
top: 92,
|
message: '执行成功',
|
duration: 2
|
})
|
_this.setState({
|
loading: true,
|
tabviews: null
|
}, () => {
|
_this.getTabs()
|
})
|
}
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
} else {
|
this.setState({
|
editTab: tab,
|
modaltype: type
|
})
|
}
|
}
|
|
handleSubmit = () => {
|
const { editTab, modaltype } = this.state
|
|
this.tabFormRef.handleConfirm().then(res => {
|
|
let _tab = {...editTab, ...res}
|
|
this.setState({submitloading: true})
|
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: _tab.uuid
|
}).then(res => {
|
|
if (!res.status) {
|
this.setState({
|
submitloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
return
|
}
|
|
let param = {
|
func: 'sPC_Tab_AddUpt',
|
MenuID: _tab.uuid,
|
MenuNo: _tab.MenuNo,
|
Template: _tab.type,
|
MenuName: _tab.MenuName,
|
Remark: _tab.Remark,
|
PageParam: JSON.stringify({Template: _tab.type}),
|
Sort: 0
|
}
|
|
let _oriActions = []
|
|
let btnParam = {
|
func: 'sPC_Button_AddUpt',
|
Type: 40,
|
ParentID: _tab.uuid,
|
MenuNo: _tab.MenuNo,
|
Template: _tab.type,
|
PageParam: '',
|
LongParam: '',
|
LText: ''
|
}
|
|
if (modaltype === 'edit') {
|
param.LongParam = res.LongParam
|
} else {
|
let _LongParam = ''
|
let _menuId = Utils.getuuid()
|
|
// 解析配置
|
if (res.LongParam) {
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
}
|
|
if (_LongParam) {
|
try {
|
_LongParam.uuid = _menuId
|
_LongParam.tabName = _tab.MenuName
|
_LongParam.tabNo = _tab.MenuNo
|
_LongParam.Remark = _tab.Remark
|
|
let _linkchange = {}
|
btnParam.LText = []
|
|
_LongParam.action = _LongParam.action.map((item, index) => {
|
let uuid = Utils.getuuid()
|
|
if (item.OpenType === 'pop') {
|
_oriActions.push({
|
prebtn: JSON.parse(JSON.stringify(item)),
|
curuuid: uuid,
|
Template: 'Modal'
|
})
|
} else if (item.OpenType === 'popview') {
|
_linkchange[item.linkTab] = Utils.getuuid()
|
|
item.linkTab = _linkchange[item.linkTab]
|
}
|
|
item.uuid = uuid
|
|
btnParam.LText.push(`select '${item.uuid}' as menuid, '${item.label}' as menuname, '${(index + 1) * 10}' as Sort`)
|
|
return item
|
})
|
|
if (_LongParam.funcs && _LongParam.funcs.length > 0) {
|
_LongParam.funcs = _LongParam.funcs.map(item => {
|
if (item.type === 'tab') {
|
item.linkTab = _linkchange[item.linkTab]
|
item.menuNo = ''
|
item.subfuncs = []
|
}
|
|
return item
|
})
|
}
|
|
btnParam.LText = btnParam.LText.join(' union all ')
|
btnParam.LText = Utils.formatOptions(btnParam.LText)
|
btnParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp)
|
|
_LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_LongParam)))
|
} catch {
|
console.warn('Stringify Failure')
|
_LongParam = ''
|
}
|
}
|
|
param.MenuID = _menuId
|
param.LongParam = _LongParam
|
|
btnParam.ParentID = _menuId
|
}
|
|
new Promise(resolve => {
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
resolve(true)
|
} else {
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
resolve(false)
|
}
|
})
|
}).then(result => {
|
if (!result) return result
|
if (modaltype === 'edit') return true
|
if (!btnParam.LText) return true
|
|
return Api.getSystemConfig(btnParam)
|
}).then(result => {
|
if (!result) return result
|
if (modaltype === 'edit') return true
|
if (!btnParam.LText) return true
|
|
if (result.status) {
|
return true
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
return false
|
}
|
}).then(result => {
|
if (!result) return result
|
if (modaltype === 'edit') return true
|
if (_oriActions.length === 0) return true
|
|
let deffers = _oriActions.map(item => {
|
return new Promise(resolve => {
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: item.prebtn.uuid
|
}).then(response => {
|
if (!response.status) {
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
resolve(false)
|
} else if (response.status && response.LongParam) {
|
let _param = {
|
func: 'sPC_ButtonParam_AddUpt',
|
ParentID: _tab.uuid,
|
MenuID: item.curuuid,
|
MenuNo: _tab.MenuNo,
|
Template: item.Template,
|
MenuName: item.prebtn.label,
|
PageParam: JSON.stringify({Template: item.Template}),
|
LongParam: response.LongParam
|
}
|
Api.getSystemConfig(_param).then(resp => {
|
if (!resp.status) {
|
notification.warning({
|
top: 92,
|
message: resp.message,
|
duration: 5
|
})
|
resolve(false)
|
} else {
|
resolve(true)
|
}
|
})
|
} else {
|
resolve(true)
|
}
|
})
|
})
|
})
|
|
return Promise.all(deffers)
|
}).then(result => {
|
if (!result) {
|
this.setState({
|
submitloading: false
|
})
|
return
|
}
|
|
let isSuccess = true
|
|
if (typeof(result) === 'object') {
|
result.forEach(resul => {
|
if (!resul) {
|
isSuccess = false
|
}
|
})
|
}
|
|
if (isSuccess) {
|
notification.success({
|
top: 92,
|
message: '执行成功',
|
duration: 2
|
})
|
}
|
|
this.setState({
|
loading: true,
|
submitloading: false,
|
modaltype: '',
|
tabviews: null
|
}, () => {
|
this.getTabs()
|
})
|
})
|
})
|
})
|
}
|
|
triggerDraw = () => {
|
this.setState({
|
thawVisible: true
|
})
|
|
Api.getSystemConfig({
|
func: 'sPC_Get_FrozenMenu',
|
TYPE: 50
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
thawmenulist: res.data.map(menu => {
|
return {
|
key: menu.MenuID,
|
title: menu.MenuName
|
}
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
thawMenuSubmit = () => {
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择要解除冻结的标签！',
|
duration: 5
|
})
|
} else {
|
this.setState({
|
submitloading: true
|
})
|
let defers = this.refs.trawmenu.state.targetKeys.map(item => {
|
return new Promise((resolve) => {
|
Api.getSystemConfig({
|
func: 'sPC_MainMenu_ReDel',
|
MenuID: item
|
}).then(res => {
|
if (res.status) {
|
resolve('')
|
} else {
|
resolve(res.message)
|
}
|
})
|
})
|
})
|
Promise.all(defers).then(res => {
|
let msg = res.filter(Boolean)[0]
|
if (msg) {
|
notification.error({
|
top: 92,
|
message: msg,
|
duration: 10
|
})
|
this.setState({
|
submitloading: false
|
})
|
} else {
|
notification.success({
|
top: 92,
|
message: '执行成功',
|
duration: 2
|
})
|
this.setState({
|
submitloading: false,
|
thawVisible: false,
|
thawmenulist: null,
|
tabviews: null
|
}, () => {
|
this.getTabs()
|
})
|
}
|
})
|
}
|
}
|
|
render() {
|
const { cols, tabviews, modaltype, editTab, searchKey, loading } = this.state
|
|
let _tabviews = []
|
if (tabviews) {
|
_tabviews = tabviews.filter(tab => tab.MenuName.toLowerCase().indexOf(searchKey.toLowerCase()) >= 0)
|
}
|
|
return (
|
<div className="tab-manage" id={this.state.ContainerId}>
|
{loading && <Spin size="large" />}
|
<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" onClick={this.triggerDraw}>标签解冻</Button>
|
</Col>
|
</Row>
|
{_tabviews.length > 0 ? <Row className="tab-list">
|
{_tabviews.map((tab, index) => {
|
return (
|
<Col span={cols} key={index}>
|
<Card
|
className="tab-card"
|
title={tab.MenuName}
|
>
|
<img onClick={() => {this.previewPicture()}} src={subtableurl} alt=""/>
|
<div className="tab-operation">
|
<Button type="primary" onClick={() => this.handleTab(tab, 'edit')}>编辑</Button>
|
<Button className="mk-green" onClick={() => this.handleTab(tab, 'copy')}>复制</Button>
|
<Button type="danger" onClick={() => this.handleTab(tab, 'delete')}>删除</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
})}
|
</Row> : null}
|
{tabviews && _tabviews.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{/* 标签修改或复制 */}
|
<Modal
|
title={modaltype === 'edit' ? '标签编辑' : '标签复制'}
|
visible={!!modaltype}
|
width={600}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
confirmLoading={this.state.submitloading}
|
onCancel={() => {this.setState({modaltype: '', editTab: null})}}
|
destroyOnClose
|
>
|
<MutilForm
|
dict={this.state.dict}
|
tab={editTab}
|
inputSubmit={this.handleSubmit}
|
wrappedComponentRef={(inst) => this.tabFormRef = inst}
|
/>
|
</Modal>
|
{/* 解冻标签模态框 */}
|
<Modal
|
title="标签解除冻结"
|
visible={this.state.thawVisible}
|
width={600}
|
onOk={this.thawMenuSubmit}
|
confirmLoading={this.state.submitloading}
|
onCancel={() => {this.setState({thawVisible: false, thawmenulist: null})}}
|
destroyOnClose
|
>
|
{!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawmenulist && <TransferForm ref="trawmenu" menulist={this.state.thawmenulist}/>}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default TabManage
|
