211 lines
8.6 KiB
JavaScript
211 lines
8.6 KiB
JavaScript
import React from 'react';
|
||
import { Button, Icon, Checkbox } from 'antd';
|
||
import { WeaTools, WeaDialog, WeaSearchGroup, WeaTable } from 'ecCom';
|
||
|
||
import './style/';
|
||
|
||
class WeaPlugin extends React.Component {
|
||
state = { visible: this.props.visible || false, test: false, data: {}, isCheck: false };
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.getButtons = this.getButtons.bind(this);
|
||
this.getPlugins = this.getPlugins.bind(this);
|
||
this.getPluginStatus = this.getPluginStatus.bind(this);
|
||
this.onChange = this.onChange.bind(this);
|
||
this.onTest = this.onTest.bind(this);
|
||
this.onCancel = this.onCancel.bind(this);
|
||
this.onShow = this.onShow.bind(this);
|
||
}
|
||
|
||
componentWillMount() {
|
||
if (this.state.visible) {
|
||
this.getPlugins();
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { test, data = {}, isCheck = false } = this.state;
|
||
const { plugins = [], otherPlugins = [] } = data;
|
||
|
||
let columns = [
|
||
{ key: 'index', title: '序号', dataIndex: 'index', width: '10%' },
|
||
{ key: 'name', title: '名称', dataIndex: 'name', width: '20%' },
|
||
{ key: 'explain', title: '描述', dataIndex: 'explain', width: '35%' },
|
||
{ key: 'size', title: '大小', dataIndex: 'size', width: '10%' },
|
||
{
|
||
key: 'status',
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: '10%',
|
||
render: (text, record) => this.getPluginStatus(record.progid),
|
||
},
|
||
{
|
||
key: 'download',
|
||
title: '下载并安装',
|
||
dataIndex: 'download',
|
||
width: '15%',
|
||
render: (text, record) => <a href={record.url} target="_blank" style={{ color: '#00a9ff' }}>下载</a>,
|
||
},
|
||
];
|
||
|
||
let displayComp = (
|
||
<div className="wea-plugin-body">
|
||
<WeaSearchGroup title="控件安装" needTigger={true} showGroup={true}>
|
||
<WeaTable columns={columns} dataSource={plugins} pagination={false} />
|
||
</WeaSearchGroup>
|
||
<WeaSearchGroup title="安装其他工具" needTigger={true} showGroup={true}>
|
||
<WeaTable columns={columns} dataSource={otherPlugins} pagination={false} />
|
||
</WeaSearchGroup>
|
||
<div className="wea-plugin-chk-msg">
|
||
<Checkbox checked={isCheck} onChange={this.onChange}>每次进入系统时检测</Checkbox>
|
||
</div>
|
||
<div className="wea-plugin-tip-msg">
|
||
<span><Icon type="exclamation-circle" /><span style={{ marginLeft: '10px' }}>注意：安装完毕请重启计算机！</span></span>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
if (test) {
|
||
columns = [
|
||
{
|
||
key: 'index',
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
width: '10%',
|
||
render: (text, record) => parseInt(record.index) - 1,
|
||
},
|
||
{ key: 'name', title: '名称', dataIndex: 'name', width: '15%' },
|
||
{ key: 'clsid', title: '控件编号', dataIndex: 'clsid', width: '20%' },
|
||
{ key: 'clsname', title: '控件名称', dataIndex: 'clsname', width: '20%' },
|
||
{ key: 'version', title: '版本', dataIndex: 'version', width: '10%' },
|
||
{
|
||
key: 'status',
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: '10%',
|
||
render: (text, record) => this.getPluginStatus(record.progid),
|
||
},
|
||
{
|
||
key: 'download',
|
||
title: '检测',
|
||
dataIndex: 'download',
|
||
width: '15%',
|
||
render: (text, record) => <Button type="ghost" icon="search" onClick={() => this.onTest(record)}>检测</Button>,
|
||
},
|
||
];
|
||
|
||
displayComp = (
|
||
<div className="wea-plugin-body">
|
||
<WeaSearchGroup title="控件检测" needTigger={true} showGroup={true}>
|
||
<WeaTable columns={columns} dataSource={plugins.slice(1)} pagination={false} />
|
||
</WeaSearchGroup>
|
||
<WeaSearchGroup title="如果控件不能够正常运行怎么办？" needTigger={true} showGroup={true}>
|
||
<div className="wea-plugin-step">
|
||
<div className="wea-plugin-step-num">1</div>
|
||
<span>第一步：从 C:\WINDOWS\Downloaded Program Files 删除通过自动提示安装方式注册的控件，对应名称参见clsname列；</span>
|
||
</div>
|
||
<div className="wea-plugin-step">
|
||
<div className="wea-plugin-step-num">2</div>
|
||
<span>第二步：从“控制面板 -> 删除或添加程序”删除通过下载控件方式安装的控件；</span>
|
||
</div>
|
||
<div className="wea-plugin-step">
|
||
<div className="wea-plugin-step-num">3</div>
|
||
<span>第三步：删除用手工方式注册的控件：</span>
|
||
<div style={{ paddingLeft: '30px', color: '#666' }}>
|
||
<p>1、在命令行执行 regedit.exe；</p>
|
||
<p>2、在键 HKEY_CLASSES_ROOT\CLSID 下查找对应的 clsid，如Office 控件的注册项为 {'{23739A7E-5741-4D1C-88D5-D50B18F7C347}'}；</p>
|
||
<p>3、如果找到该注册项，表明控件已安装。安装的文件路径见 InprocServer32 项的值，在命令行执行“regsvr32 /u <带路径的文件名称>”即可删除；</p>
|
||
</div>
|
||
</div>
|
||
<div className="wea-plugin-step">
|
||
<div className="wea-plugin-step-num">4</div>
|
||
<span>第四步：点击<span style={{ color: '#00a9ff', cursor: 'pointer' }} onClick={() => this.setState({ test: false })}>重新下载</span>控件方式安装控件！</span>
|
||
</div>
|
||
</WeaSearchGroup>
|
||
<WeaSearchGroup title="为什么通过下载插件安装方式卸载控件会报错？" needTigger={true} showGroup={true}>
|
||
<div>
|
||
<span>卸载控件之前需要关闭所有 IE 窗口和使用控件的程序。</span>
|
||
</div>
|
||
</WeaSearchGroup>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<WeaDialog
|
||
visible={this.state.visible}
|
||
title="插件下载"
|
||
icon="wevicon-wea-plugin"
|
||
iconBgcolor="#a7adb5"
|
||
style={{ width: 810, height: 480 }}
|
||
zIndex={100}
|
||
hasScroll={true}
|
||
maskClosable={true}
|
||
buttons={this.getButtons()}
|
||
onCancel={this.onCancel}
|
||
>
|
||
{displayComp}
|
||
</WeaDialog>
|
||
);
|
||
}
|
||
|
||
getButtons() {
|
||
let buttons = [];
|
||
if (this.state.test) {
|
||
buttons.push(<Button type="primary" onClick={() => this.setState({ test: false })}>返回</Button>);
|
||
} else {
|
||
buttons.push(<Button type="primary" onClick={() => this.setState({ test: true })}>控件检测</Button>);
|
||
}
|
||
return buttons;
|
||
}
|
||
|
||
getPlugins() {
|
||
WeaTools.callApi('/api/portal/systemInfo/getPlugins', 'GET', {}).then((result) => {
|
||
const { data } = result;
|
||
this.setState({ data, isCheck: data.isCheck });
|
||
});
|
||
}
|
||
|
||
onChange(e) {
|
||
const checked = e.target.checked;
|
||
this.setState({ isCheck: checked });
|
||
|
||
WeaTools.callApi('/api/portal/systemInfo/setIsCheck', 'POST', { isCheck: checked ? '0' : '1' });
|
||
}
|
||
|
||
getPluginStatus(progid) {
|
||
let status = false;
|
||
try {
|
||
const obj = new ActiveXObject(progid);
|
||
if (obj) {
|
||
status = true;
|
||
}
|
||
} catch (e) {
|
||
}
|
||
|
||
return status ? <Icon type="check-circle" style={{ color: '#70d256', fontSize: '14px' }} /> : <Icon type="cross-circle" style={{ color: '#ff3f00', fontSize: '14px' }} />;
|
||
}
|
||
|
||
onTest(obj) {
|
||
const dialog = new window.top.Dialog();
|
||
dialog.currentWindow = window;
|
||
dialog.Width = 650;
|
||
dialog.Height = 400;
|
||
dialog.Title = `控件检测：${obj.name}`;
|
||
dialog.URL = obj.checkpageurl;
|
||
dialog.show();
|
||
}
|
||
|
||
onCancel() {
|
||
this.setState({ visible: false });
|
||
}
|
||
|
||
onShow() {
|
||
this.setState({ visible: true });
|
||
this.getPlugins();
|
||
}
|
||
}
|
||
|
||
export default WeaPlugin;
|