import React, {Component} from 'react'
|
import { withRouter } from 'react-router-dom'
|
import { Spin, notification, Table, Typography, Row, Col, Tooltip, Button, Modal } from 'antd'
|
import { QuestionCircleOutlined, LinkOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import { langs } from '@/store/options.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { Paragraph } = Typography
|
const { confirm } = Modal
|
|
const Header = asyncComponent(() => import('./header'))
|
|
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: '#3860f4'},
|
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'},
|
bg_black_style_deep_blue: {name: '深蓝色', color: '#1d3661'}
|
}
|
|
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 = ''
|
if (sessionStorage.getItem('UserID')) {
|
this.getAppList()
|
return
|
}
|
}
|
|
componentDidMount() {
|
if (!sessionStorage.getItem('UserID')) {
|
this.props.history.replace('/login')
|
return
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
getAppList = () => {
|
let param = {
|
func: 's_get_kei'
|
}
|
|
if (window.GLOB.mainSystemApi) {
|
param.rduri = window.GLOB.mainSystemApi
|
}
|
|
this.setState({
|
loading: true
|
})
|
|
Api.genericInterface(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 || ''
|
cell.wxAppId = _param.wxAppId || ''
|
cell.wxAppName = _param.wxAppName || ''
|
cell.wxMerchId = _param.wxMerchId || ''
|
cell.wxMerchName = _param.wxMerchName || ''
|
}
|
|
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 })
|
}
|
|
updateLink = (item) => {
|
let link = `${window.GLOB.baseurl}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}`
|
|
let param = {
|
func: 's_miniapp_kei_linkurl_upt',
|
id: item.ID,
|
linkurl: link
|
}
|
|
if (window.GLOB.mainSystemApi) {
|
param.rduri = window.GLOB.mainSystemApi
|
}
|
|
confirm({
|
content: '确定更新应用链接地址吗？',
|
onOk() {
|
return new Promise(resolve => {
|
Api.genericInterface(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '操作成功！',
|
duration: 3
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
}, () => {
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
render () {
|
const { loading, columns, applist, selectApp } = this.state
|
|
if (!sessionStorage.getItem('UserID')) return null
|
|
return (
|
<div className="mk-app-check">
|
<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'}}>{langs[item.lang]}</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">
|
{item.wxAppName || item.wxMerchName ? <>
|
<div className="label">关联应用:</div>
|
<div className="content">{`${item.wxAppName}${item.wxAppName && item.wxMerchName ? ' / ' + item.wxMerchName : item.wxMerchName || ''}`}</div>
|
</> : null}
|
</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.app_name || ''}</div>
|
</div>
|
</Col>
|
<Col span={12}>
|
<div className="app-item">
|
<div className="label">LOGO:</div>
|
<div className="content">{item.app_icon ? <img style={{height: '18px'}} src={item.app_icon} alt="" /> : '无'}</div>
|
</div>
|
</Col>
|
</Row>
|
<div className="action">
|
<Button type="link" onClick={() => this.updateLink(item)}><LinkOutlined style={{color: 'orange'}}/></Button>
|
<Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${window.GLOB.baseurl}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}${item.wxAppId ? '/' + item.wxAppId : ''}` }}></Paragraph>
|
</div>
|
</div>
|
)
|
})}
|
</div>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default withRouter(AppCheck)
|
