| | |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Tabs, Popconfirm, notification, Modal, Typography, Spin, message, Button } from 'antd' |
| | | import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined, CopyOutlined, BorderOutlined } from '@ant-design/icons' |
| | | import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined, CopyOutlined, BorderOutlined, SnippetsOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | import ColForm from './columnform' |
| | | import CustomScriptsForm from './customscript' |
| | | import SettingForm from './settingform' |
| | | import PasteForm from '@/templates/zshare/pasteform' |
| | | import SettingUtils from './utils' |
| | | import MinView from '@/assets/img/minview.png' |
| | | import './index.scss' |
| | |
| | | defaultSearch: '', |
| | | systemScripts: [], |
| | | visible: false, |
| | | pvisible: false, |
| | | reload: false, |
| | | script: null, |
| | | scriptValue: '', |
| | | colColumns: [ |
| | |
| | | }) |
| | | } |
| | | |
| | | copyDatasource = () => { |
| | | const { config } = this.props |
| | | const { columns, scripts } = this.state |
| | | |
| | | if (columns.length === 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请添加字段集!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.settingForm.handleConfirm().then(res => { |
| | | delete res.supModule |
| | | res.name = config.name |
| | | |
| | | let source = { |
| | | key: 'interface', |
| | | type: 'line', |
| | | data: {setting: res, columns, scripts, pageable: false, format: 'array', name: res.name, status: 'false', type: 'interface', uuid: '' } |
| | | } |
| | | |
| | | try { |
| | | source = window.btoa(window.encodeURIComponent(JSON.stringify(source))) |
| | | } catch (e) { |
| | | console.warn('Stringify Failure') |
| | | source = '' |
| | | } |
| | | |
| | | if (source) { |
| | | let oInput = document.createElement('input') |
| | | oInput.value = source |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | document.body.removeChild(oInput) |
| | | message.success('复制成功。') |
| | | } |
| | | }) |
| | | } |
| | | |
| | | pasteSubmit = () => { |
| | | const { setting } = this.state |
| | | |
| | | this.pasteFormRef.handleConfirm().then(res => { |
| | | if (res.key !== 'interface') { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '配置类型错误!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else if (res.type !== 'line') { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请粘贴单项数据源!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | if (setting.supModule) { |
| | | res.data.setting.supModule = setting.supModule |
| | | } |
| | | |
| | | this.setState({ |
| | | scripts: res.data.scripts.map(col => { |
| | | col.uuid = Utils.getuuid() |
| | | return col |
| | | }), |
| | | columns: res.data.columns.map(col => { |
| | | col.uuid = Utils.getuuid() |
| | | return col |
| | | }), |
| | | setting: res.data.setting, |
| | | reload: true, |
| | | pvisible: false |
| | | }, () => { |
| | | this.setState({reload: false}) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | copyColumns = () => { |
| | | const { columns } = this.state |
| | | let m = [] |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql, visible, script, scriptValue } = this.state |
| | | const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql, visible, pvisible, reload, script, scriptValue } = this.state |
| | | |
| | | return ( |
| | | <div className="model-data-source-wrap"> |
| | | {config.name ? <div className="mk-com-name">{config.name} - 数据源</div> : null} |
| | | {loading && <Spin size="large" />} |
| | | <Tabs activeKey={activeKey} className="data-source-card-box" onChange={this.changeTab}> |
| | | <TabPane tab="数据源" key="setting"> |
| | | <SettingForm |
| | | <TabPane tab={ |
| | | <span> |
| | | 数据源 |
| | | {config.type !== 'interface' ? <CopyOutlined title="复制数据源" className="mk-copy-datasource" onClick={this.copyDatasource}/> : null} |
| | | {config.type !== 'interface' ? <SnippetsOutlined title="导入数据源" className="mk-paste-datasource" onClick={() => this.setState({pvisible: true})}/> : null} |
| | | </span> |
| | | } key="setting"> |
| | | {!reload ? <SettingForm |
| | | dict={this.props.dict} |
| | | config={config} |
| | | columns={columns} |
| | | setting={setting} |
| | | scripts={scripts} |
| | | wrappedComponentRef={(inst) => this.settingForm = inst} |
| | | /> |
| | | /> : null} |
| | | </TabPane> |
| | | <TabPane tab={ |
| | | <span> |
| | | 字段集 |
| | | {columns.length ? <span className="count-tip">{columns.length}</span> : null} |
| | | <CopyOutlined title="以逗号拼接形式复制字段" className="mk-copy-fields" onClick={this.copyColumns}/> |
| | | </span> |
| | | } key="columns"> |
| | |
| | | </div> |
| | | <CodeMirror value={scriptValue} onChange={(val) => {this.setState({scriptValue: val})}}></CodeMirror> |
| | | </Modal> |
| | | <Modal |
| | | title="粘贴" |
| | | visible={pvisible} |
| | | width={600} |
| | | maskClosable={false} |
| | | onOk={this.pasteSubmit} |
| | | onCancel={() => {this.setState({pvisible: false})}} |
| | | destroyOnClose |
| | | > |
| | | <PasteForm wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/> |
| | | </Modal> |
| | | </div> |
| | | ) |
| | | } |