import React, {Component} from 'react'
|
import { fromJS } from 'immutable'
|
import { Spin, notification, Button, Table, Modal, ConfigProvider, Typography } from 'antd'
|
import moment from 'moment'
|
import md5 from 'md5'
|
import enUS from 'antd/es/locale/en_US'
|
import zhCN from 'antd/es/locale/zh_CN'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { confirm } = Modal
|
const { Paragraph } = Typography
|
|
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
|
const Header = asyncComponent(() => import('@/mob/header'))
|
const MutilForm = asyncComponent(() => import('./mutilform'))
|
const SubMutilForm = asyncComponent(() => import('./submutilform'))
|
|
let base_url = ''
|
if (process.env.NODE_ENV === 'production') {
|
base_url = document.location.origin + '/' + window.GLOB.service
|
} else {
|
base_url = window.GLOB.location + '/' + window.GLOB.service
|
}
|
|
class AppManage extends Component {
|
state = {
|
loading: false,
|
applist: [],
|
columns: [
|
{ title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center' },
|
{ title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center' },
|
{
|
title: '操作',
|
key: 'action',
|
align: 'center',
|
render: (text, record) => (<Button type="link" onClick={() => this.deleteApp(record)} style={{color: '#ff4d4f'}}>删除</Button>),
|
},
|
],
|
subcolumns: [
|
{
|
title: '应用类型', dataIndex: 'typename', key: 'typename', align: 'center'
|
},
|
{
|
title: '语言', dataIndex: 'lang', key: 'lang', align: 'center',
|
render: (text, record) => text === 'en-US' ? '英文' : '中文'
|
},
|
{
|
title: '登录', dataIndex: 'login_types', key: 'login_types', align: 'center',
|
render: (text, record) => text === 'false' ? '不需要' : '需要'
|
},
|
{
|
title: '权限管理', dataIndex: 'role_type', key: 'role_type', align: 'center',
|
render: (text, record) => text === 'false' ? '不启用' : '启用'
|
},
|
{
|
title: '皮肤', dataIndex: 'css', key: 'css', align: 'center',
|
render: (text, record) => {
|
const style = {
|
bg_black_style_blue: '蓝黑色系',
|
bg_white_style_blue: '蓝白色系',
|
bg_black_style_red: '红黑色系',
|
bg_white_style_red: '红白色系',
|
bg_black_style_orange_red: '橙红黑色系',
|
bg_white_style_orange_red: '橙红白色系',
|
bg_black_style_orange: '橙黑色系',
|
bg_white_style_orange: '橙白色系',
|
bg_black_style_orange_yellow: '橙黄黑色系',
|
bg_white_style_orange_yellow: '橙黄白色系',
|
bg_black_style_yellow: '黄黑色系',
|
bg_white_style_yellow: '黄白色系',
|
bg_black_style_yellow_green: '黄绿黑色系',
|
bg_white_style_yellow_green: '黄绿白色系',
|
bg_black_style_green: '绿黑色系',
|
bg_white_style_green: '绿白色系',
|
bg_black_style_cyan: '青黑色系',
|
bg_white_style_cyan: '青白色系',
|
bg_black_style_blue_purple: '蓝紫黑色系',
|
bg_white_style_blue_purple: '蓝紫白色系',
|
bg_black_style_purple: '紫黑色系',
|
bg_white_style_purple: '紫白色系',
|
bg_black_style_magenta: '洋红黑色系',
|
bg_white_style_magenta: '洋红白色系',
|
bg_black_style_grass_green: '草绿黑色系',
|
bg_white_style_grass_green: '草绿白色系',
|
bg_black_style_deep_red: '深红黑色系',
|
bg_white_style_deep_red: '深红白色系'
|
}
|
|
return style[text] || '蓝黑色系'
|
}
|
},
|
{
|
title: '标题', dataIndex: 'title', key: 'title', align: 'center', width: '170px'
|
},
|
{
|
title: '图标', dataIndex: 'favicon', key: 'favicon', align: 'center', width: '120px',
|
render: (text, record) => (text ? <img style={{width: '32px', height: '32px'}} src={text} alt="" /> : null)
|
},
|
{
|
title: '操作',
|
key: 'action',
|
align: 'center',
|
width: '250px',
|
render: (text, record) => (
|
<div>
|
<Button type="link" onClick={() => this.deleteSubApp(record)} style={{color: '#ff4d4f'}}>删除</Button>
|
<Button type="link" onClick={() => this.jumpApp(record)}>编辑应用</Button>
|
<Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${base_url}${record.typename}/index.html#/index/${this.state.selectApp.kei_no}/${record.lang}` }}></Paragraph>
|
</div>
|
)
|
},
|
],
|
selectApp: null,
|
selectSubApp: null,
|
selectedRowKeys: [],
|
selectedSubRowKeys: [],
|
visible: false,
|
subVisible: false
|
}
|
|
UNSAFE_componentWillMount() {
|
document.body.className = ''
|
this.getAppList()
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
getAppList = () => {
|
let param = {
|
func: 's_get_kei'
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
let selectApp = null
|
let applist = result.data.map(item => {
|
item.sublist = item.data_detail || []
|
item.sublist = item.sublist.map(cell => {
|
cell.ID = cell.d_id
|
return cell
|
})
|
|
if (this.state.selectApp && this.state.selectApp.ID === item.ID) {
|
selectApp = item
|
}
|
|
return item
|
})
|
|
this.setState({
|
loading: false,
|
applist: applist,
|
selectApp
|
})
|
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
deleteApp = (record) => {
|
const _this = this
|
|
confirm({
|
content: '确定删除《' + record.remark + '》吗？',
|
onOk() {
|
return new Promise(resolve => {
|
let param = {
|
func: 's_kei_del',
|
ID: record.ID,
|
kei_no: record.kei_no
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '删除成功！',
|
duration: 5
|
})
|
|
_this.setState({
|
selectedRowKeys: [],
|
selectedSubRowKeys: [],
|
selectApp: null,
|
selectSubApp: null,
|
loading: true
|
})
|
_this.getAppList()
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
}, () => {
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
deleteSubApp = (record) => {
|
const { selectApp } = this.state
|
const _this = this
|
|
let param = {
|
func: 's_kei_addupt',
|
ID: selectApp.ID,
|
exec_type: 'y',
|
remark: selectApp.remark,
|
kei_no: selectApp.kei_no,
|
LText: ''
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
let sublist = fromJS(selectApp.sublist).toJS()
|
sublist = sublist.filter(item => item.ID !== record.ID)
|
|
// param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
|
param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
|
param.LText = param.LText.join(' union all ')
|
param.LText = Utils.formatOptions(param.LText)
|
|
confirm({
|
content: '确定删除该子应用吗？',
|
onOk() {
|
return new Promise(resolve => {
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '操作成功！',
|
duration: 5
|
})
|
|
_this.setState({
|
selectedSubRowKeys: [],
|
selectSubApp: null,
|
loading: true
|
})
|
_this.getAppList()
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
}, () => {
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
jumpApp = (item) => {
|
const { selectApp } = this.state
|
|
let route = 'mobdesign'
|
if (item.typename === 'pc') {
|
route = 'pcdesign'
|
}
|
|
window.open(window.location.href.replace(/#.+/ig, `#/${route}/${window.btoa(window.encodeURIComponent(JSON.stringify({...item, kei_no: selectApp.kei_no, remark: selectApp.remark, type: 'app'})))}`))
|
}
|
|
/**
|
*
|
*/
|
onSelectChange = selectedRowKeys => {
|
const { applist } = this.state
|
let selectApp = applist.filter(item => item.ID === selectedRowKeys[0])[0]
|
|
this.setState({ selectedRowKeys, selectApp })
|
}
|
|
/**
|
*
|
*/
|
onSubChange = selectedSubRowKeys => {
|
this.setState({ selectedSubRowKeys })
|
}
|
|
/**
|
* @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
|
*/
|
changeRow = (record) => {
|
this.setState({ selectedRowKeys: [record.ID], selectApp: record })
|
}
|
|
/**
|
* @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
|
*/
|
changeSubRow = (record) => {
|
this.setState({ selectedSubRowKeys: [record.ID], selectSubApp: record })
|
}
|
|
trigerApp = (type) => {
|
if (type === 'edit' && !this.state.selectApp) {
|
notification.warning({
|
top: 92,
|
message: '请选择需要编辑的应用！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
visible: type
|
})
|
}
|
|
trigerSubApp = (type) => {
|
if (type === 'edit' && !this.state.selectSubApp) {
|
notification.warning({
|
top: 92,
|
message: '请选择需要编辑的子应用！',
|
duration: 5
|
})
|
return
|
} else if (!this.state.selectApp) {
|
notification.warning({
|
top: 92,
|
message: '请选择应用！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
subVisible: type
|
})
|
}
|
|
|
submitCard = () => {
|
const { selectApp, visible } = this.state
|
|
this.mobcardRef.handleConfirm().then(res => {
|
this.setState({
|
confirmloading: true
|
})
|
|
let ID = ''
|
if (visible === 'edit') {
|
ID = selectApp.ID
|
} else {
|
ID = md5(window.GLOB.appkey + res.kei_no)
|
}
|
|
let param = {
|
func: 's_kei_addupt',
|
ID: ID,
|
exec_type: 'y',
|
remark: res.remark,
|
kei_no: res.kei_no,
|
LText: ''
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
if (visible === 'edit') {
|
// param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
|
param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
|
param.LText = param.LText.join(' union all ')
|
param.LText = Utils.formatOptions(param.LText)
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '操作成功！',
|
duration: 5
|
})
|
|
this.setState({
|
selectedRowKeys: [],
|
selectedSubRowKeys: [],
|
selectApp: null,
|
selectSubApp: null,
|
confirmloading: false,
|
visible: false,
|
loading: true
|
})
|
this.getAppList()
|
} else {
|
this.setState({
|
confirmloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}, () => {
|
this.setState({
|
confirmloading: false
|
})
|
})
|
})
|
}
|
|
submitSubCard = () => {
|
const { selectApp, subVisible, selectSubApp } = this.state
|
|
this.submobcardRef.handleConfirm().then(res => {
|
if (subVisible === 'plus' && selectApp.sublist.filter(item => item.typename === res.typename && item.lang === res.lang).length > 0) {
|
notification.warning({
|
top: 92,
|
message: '应用类型已存在！',
|
duration: 5
|
})
|
return
|
}
|
this.setState({
|
confirmloading: true
|
})
|
|
let param = {
|
func: 's_kei_addupt',
|
ID: selectApp.ID,
|
exec_type: 'y',
|
remark: selectApp.remark,
|
kei_no: selectApp.kei_no,
|
LText: ''
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
let sublist = fromJS(selectApp.sublist).toJS()
|
if (subVisible === 'plus') {
|
sublist.unshift({
|
ID: md5(window.GLOB.appkey + selectApp.kei_no + res.typename + res.lang),
|
...res
|
})
|
} else {
|
res.ID = selectSubApp.ID
|
sublist = sublist.map(item => {
|
if (item.ID !== res.ID) {
|
return item
|
} else {
|
return res
|
}
|
})
|
}
|
|
// param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
|
param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
|
param.LText = param.LText.join(' union all ')
|
param.LText = Utils.formatOptions(param.LText)
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '操作成功！',
|
duration: 5
|
})
|
|
this.setState({
|
selectedSubRowKeys: [],
|
selectSubApp: null,
|
confirmloading: false,
|
subVisible: false,
|
loading: true
|
})
|
this.getAppList()
|
} else {
|
this.setState({
|
confirmloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}, () => {
|
this.setState({
|
confirmloading: false
|
})
|
})
|
})
|
}
|
|
render () {
|
const { loading, visible, subVisible, columns, applist, selectedRowKeys, selectedSubRowKeys, subcolumns, selectApp, selectSubApp } = this.state
|
|
return (
|
<div className="mk-app-manage">
|
<ConfigProvider locale={_locale}>
|
<Header view="manage" />
|
{loading ?
|
<div className="loading-mask">
|
<div className="ant-spin-blur"></div>
|
<Spin />
|
</div> : null
|
}
|
<div className="app-table">
|
<div className="app-action">
|
<Button className="mk-green" onClick={() => this.trigerApp('plus')}>添加</Button>
|
<Button className="mk-purple" onClick={() => this.trigerApp('edit')}>修改</Button>
|
</div>
|
<Table
|
rowKey="ID"
|
columns={columns}
|
dataSource={applist}
|
pagination={false}
|
rowSelection={{ type: 'radio', selectedRowKeys, onChange: this.onSelectChange }}
|
onRow={(record) => ({ onClick: () => {this.changeRow(record)} })}
|
/>
|
</div>
|
<div className="app-table">
|
<div className="sub-app-title"><span>子应用</span></div>
|
<div className="app-action">
|
<Button className="mk-green" onClick={() => this.trigerSubApp('plus')}>添加</Button>
|
<Button className="mk-purple" onClick={() => this.trigerSubApp('edit')}>修改</Button>
|
</div>
|
<Table
|
rowKey="ID"
|
columns={subcolumns}
|
dataSource={selectApp ? selectApp.sublist : []}
|
pagination={false}
|
rowSelection={{ type: 'radio', selectedRowKeys: selectedSubRowKeys, onChange: this.onSubChange }}
|
onRow={(record) => ({ onClick: () => {this.changeSubRow(record)} })}
|
/>
|
</div>
|
<Modal
|
title={'编辑应用'}
|
width={'600px'}
|
maskClosable={false}
|
visible={!!visible}
|
onCancel={() => this.setState({visible: false})}
|
confirmLoading={this.state.confirmloading}
|
onOk={this.submitCard}
|
cancelText="取消"
|
okText="确定"
|
destroyOnClose
|
>
|
<MutilForm type={visible} card={visible === 'edit' ? selectApp : ''} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
|
</Modal>
|
<Modal
|
title={'编辑子应用'}
|
width={'750px'}
|
maskClosable={false}
|
visible={!!subVisible}
|
onCancel={() => this.setState({subVisible: false})}
|
confirmLoading={this.state.confirmloading}
|
onOk={this.submitSubCard}
|
cancelText="取消"
|
okText="确定"
|
destroyOnClose
|
>
|
<SubMutilForm type={subVisible} card={subVisible === 'edit' ? selectSubApp : ''} wrappedComponentRef={(inst) => this.submobcardRef = inst} inputSubmit={this.submitSubCard} />
|
</Modal>
|
</ConfigProvider>
|
</div>
|
)
|
}
|
}
|
|
export default AppManage
|
