import React, {Component} from 'react'
|
import { is, fromJS } from 'immutable'
|
import PropTypes from 'prop-types'
|
import { Card, Spin, Icon, Row, Col, Modal, notification } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/mob.js'
|
import enUS from '@/locales/en-US/mob.js'
|
import asyncComponent from '@/utils/asyncSpinComponent'
|
import './index.scss'
|
|
const { confirm } = Modal
|
const MutilForm = asyncComponent(() => import('./mutilform'))
|
|
class CardChart extends Component {
|
static propTpyes = {
|
jumpMenu: PropTypes.func // 页面跳转
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
loading: true,
|
visible: false,
|
confirmloading: false,
|
data: [],
|
card: null
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
UNSAFE_componentWillMount() {
|
this.getMobCards()
|
}
|
|
getMobCards = () => {
|
let param = {
|
func: 's_get_kei'
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
this.setState({
|
loading: false,
|
data: result.data.map(item => {
|
return {
|
uuid: item.ID,
|
keiNo: item.kei_no,
|
name: item.remark,
|
type: item.typename
|
}
|
})
|
})
|
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
editCard = (card) => {
|
this.setState({
|
card: card || null,
|
visible: true
|
})
|
}
|
|
deleteCard = (card) => {
|
let _this = this
|
|
confirm({
|
title: '确定删除《' + card.name + '》吗？',
|
content: '',
|
onOk() {
|
return new Promise(resolve => {
|
let param = {
|
func: 's_kei_del',
|
ID: card.uuid,
|
kei_no: card.keiNo
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '删除成功！',
|
duration: 5
|
})
|
|
_this.getMobCards()
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
submitCard = () => {
|
const { card } = this.state
|
|
this.mobcardRef.handleConfirm().then(res => {
|
this.setState({
|
confirmloading: true
|
})
|
|
let param = {
|
func: 's_kei_addupt',
|
ID: card ? card.uuid : Utils.getuuid(),
|
TypeName: res.type,
|
remark: res.name,
|
kei_no: res.keiNo
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: card ? '修改成功！' : '添加成功！',
|
duration: 5
|
})
|
|
this.setState({
|
confirmloading: false,
|
visible: false,
|
loading: true
|
})
|
this.getMobCards()
|
} else {
|
this.setState({
|
confirmloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}, () => {
|
this.setState({
|
confirmloading: false
|
})
|
})
|
})
|
}
|
|
render() {
|
const { data, loading, card, dict } = this.state
|
|
return (
|
<div className="mob-card-row-box">
|
{loading ?
|
<div className="loading-mask">
|
<div className="ant-spin-blur"></div>
|
<Spin />
|
</div> : null
|
}
|
<Row gutter={24}>
|
{data && data.length > 0 &&
|
data.map(item => (
|
<Col key={item.uuid} span={6}>
|
<Card
|
size="small"
|
className="chart-card"
|
actions={[
|
<Icon title="edit" onClick={() => this.editCard(item)} type="edit" />,
|
<Icon title="delete" onClick={() => this.deleteCard(item)} type="close" />,
|
<Icon title="detail" onClick={() => this.props.jumpMenu(item)} type="arrow-right" />
|
]}
|
>
|
<div className="mk-mob-card-title">
|
{item.name}
|
</div>
|
<div className="mk-mob-card-type">
|
{item.type === 'mob' ? '移动端' : 'PC端'}
|
</div>
|
</Card>
|
</Col>
|
))
|
}
|
|
<Col span={6} key="insert">
|
<div className="chart-card insert" onClick={() => this.editCard()}>
|
<Icon type="plus" />
|
</div>
|
</Col>
|
</Row>
|
<Modal
|
className="mob-card-modal"
|
title={card ? '编辑应用' : '新建应用'}
|
width={'600px'}
|
maskClosable={false}
|
visible={this.state.visible}
|
onCancel={() => this.setState({visible: false})}
|
confirmLoading={this.state.confirmloading}
|
onOk={this.submitCard}
|
destroyOnClose
|
>
|
<MutilForm card={card} dict={dict} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default CardChart
|
