import React, {Component} from 'react'
|
import { Spin, notification, Table, ConfigProvider, Typography, Row, Col, Tooltip } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
import enUS from 'antd/es/locale/en_US'
|
import zhCN from 'antd/es/locale/zh_CN'
|
|
import Api from '@/api'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { Paragraph } = Typography
|
|
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
|
const Header = asyncComponent(() => import('./header'))
|
|
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
|
}
|
|
const skinStyle = {
|
bg_black_style_blue: {name: '蓝色', color: '#1890ff'},
|
bg_black_style_red: {name: '红色', color: '#f5222d'},
|
bg_black_style_orange_red: {name: '橙红色', color: '#fa541c'},
|
bg_black_style_orange: {name: '橙色', color: '#fa8c16'},
|
bg_black_style_orange_yellow: {name: '橙黄色', color: '#faad14'},
|
bg_black_style_yellow: {name: '黄色', color: '#fadb14'},
|
bg_black_style_yellow_green: {name: '黄绿色', color: '#a0d911'},
|
bg_black_style_green: {name: '绿色', color: '#52c41a'},
|
bg_black_style_cyan: {name: '青色', color: '#13c2c2'},
|
bg_black_style_blue_purple: {name: '蓝紫色', color: '#2f54eb'},
|
bg_black_style_purple: {name: '紫色', color: '#722ed1'},
|
bg_black_style_magenta: {name: '洋红色', color: '#eb2f96'},
|
bg_black_style_grass_green: {name: '草绿色', color: '#aeb303'},
|
bg_black_style_deep_red: {name: '深红色', color: '#c32539'}
|
}
|
|
class AppCheck extends Component {
|
state = {
|
loading: false,
|
applist: [],
|
columns: [
|
{ title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center', width: '45%' },
|
{ title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center', width: '45%' },
|
],
|
selectApp: null
|
}
|
|
UNSAFE_componentWillMount() {
|
document.body.className = ''
|
this.getAppList()
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
getAppList = () => {
|
let param = {
|
func: 's_get_kei'
|
}
|
|
param.rduri = window.GLOB.mainSystemApi
|
|
this.setState({
|
loading: true
|
})
|
|
Api.getLocalConfig(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
|
|
if (cell.customize_param) {
|
let _param = {}
|
try {
|
_param = JSON.parse(window.decodeURIComponent(window.atob(cell.customize_param)))
|
} catch (e) {
|
_param = {}
|
}
|
cell.copyright = _param.copyright || ''
|
cell.logo = _param.logo || ''
|
}
|
|
return cell
|
})
|
|
if (this.state.selectApp && this.state.selectApp.ID === item.ID) {
|
selectApp = item
|
}
|
|
return item
|
})
|
|
if (!selectApp && applist[0]) {
|
selectApp = applist[0]
|
}
|
|
this.setState({
|
loading: false,
|
applist: applist,
|
selectApp
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
onSelectChange = selectedRowKeys => {
|
const { applist } = this.state
|
let selectApp = applist.filter(item => item.ID === selectedRowKeys[0])[0]
|
|
this.setState({ selectApp })
|
}
|
|
/**
|
* @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
|
*/
|
changeRow = (record) => {
|
this.setState({ selectApp: record })
|
}
|
|
render () {
|
const { loading, columns, applist, selectApp } = this.state
|
|
return (
|
<div className="mk-app-check">
|
<ConfigProvider locale={_locale}>
|
<Header view="manage" />
|
{loading ?
|
<div className="loading-mask">
|
<Spin size="large" />
|
</div> : null
|
}
|
<div className="view-wrap">
|
<div className="left-view">
|
<div className="app-table">
|
<Table
|
rowKey="ID"
|
columns={columns}
|
dataSource={applist}
|
pagination={false}
|
rowSelection={{ type: 'radio', selectedRowKeys: selectApp ? [selectApp.ID] : [], onChange: this.onSelectChange }}
|
onRow={(record) => ({ onClick: () => this.setState({ selectApp: record })})}
|
/>
|
</div>
|
</div>
|
<div className="right-view">
|
{selectApp ? <div className="app-title">{selectApp.remark}</div> : null}
|
{selectApp && selectApp.sublist.map((item, index) => {
|
let css = skinStyle[item.css] ? skinStyle[item.css].name : ''
|
let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8'
|
let binding = ''
|
if (item.user_binding) {
|
if (item.user_binding.indexOf('uname_pwd') > -1) {
|
binding = '用户名'
|
}
|
if (item.user_binding.indexOf('sms_vcode') > -1) {
|
binding = binding ? binding + '，手机号' : '手机号'
|
}
|
}
|
return (
|
<div className="sub-app" key={index} style={{borderColor: color}}>
|
<Row>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">应用类型:</div>
|
<div className="content" style={{fontSize: '18px', fontWeight: 600}}>{item.typename}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">语言:</div>
|
<div className="content" style={{textDecoration: 'underline'}}>{item.lang === 'en-US' ? '英文' : '中文'}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">权限管理:</div>
|
<div className="content">{item.role_type === 'false' ? '不启用' : '启用'}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">皮肤:</div>
|
<div className="content" style={{color: color}}>{css}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
{binding ? <div className="label">
|
<Tooltip placement="topLeft" title="微信公众号登录时，系统用户与微信用户的绑定方式。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
用户绑定:
|
</Tooltip>
|
</div> : null}
|
<div className="content">{binding}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">标题:</div>
|
<div className="content">{item.title || '无'}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">网站头像:</div>
|
<div className="content">{item.favicon ? <img style={{width: '18px', height: '18px'}} src={item.favicon} alt="" /> : '无'}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">版权:</div>
|
<div className="content">{item.copyright || '无'}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">LOGO:</div>
|
<div className="content">{item.logo ? <img style={{height: '18px'}} src={item.logo} alt="" /> : '无'}</div>
|
</div>
|
</Col>
|
</Row>
|
<div className="action">
|
<Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${base_url}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}` }}></Paragraph>
|
</div>
|
</div>
|
)
|
})}
|
</div>
|
</div>
|
</ConfigProvider>
|
</div>
|
)
|
}
|
}
|
|
export default AppCheck
|
