| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Tabs, Popconfirm, notification, Modal, Typography, Spin, message, Button } from 'antd' |
| | | import { Form, Tabs, Popconfirm, notification, Modal, Typography, Spin, message, Button, Input } from 'antd' |
| | | import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined, CopyOutlined, BorderOutlined, SnippetsOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | import md5 from 'md5' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | |
| | | const { TabPane } = Tabs |
| | | const { Paragraph } = Typography |
| | | const { Search } = Input |
| | | |
| | | const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) |
| | | const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) |
| | |
| | | |
| | | state = { |
| | | columns: [], |
| | | debugId: '', |
| | | subColumns: [], |
| | | activeKey: 'setting', |
| | | loading: false, |
| | | searchKey: '', |
| | | initsql: '', // sql验证时变量声明及赋值 |
| | | usefulfields: '', |
| | | defaultsql: '', // 默认Sql |
| | |
| | | inputType: 'input', |
| | | editable: true, |
| | | unique: true, |
| | | strict: true, |
| | | copy: true, |
| | | rules: [{ |
| | | pattern: /^[\u4E00-\u9FA50-9a-zA-Z_]*$/ig, |
| | |
| | | |
| | | _search = _search.replace(/@\$@/ig, '') |
| | | _search = _search ? 'where ' + _search : '' |
| | | let columns = config.columns ? fromJS(config.columns).toJS() : [] |
| | | let subColumns = config.subColumns ? fromJS(config.subColumns).toJS() : [] |
| | | |
| | | columns.reverse() |
| | | subColumns.reverse() |
| | | |
| | | this.setState({ |
| | | scripts, |
| | | columns: config.columns ? fromJS(config.columns).toJS() : [], |
| | | columns: columns, |
| | | subColumns: subColumns, |
| | | setting: _setting, |
| | | median: _setting, |
| | | searches: search, |
| | | defaultSearch: _search |
| | | defaultSearch: _search, |
| | | searchKey: '', |
| | | debugId: _setting.debugId || '' |
| | | }) |
| | | |
| | | this.getsysScript() |
| | |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | |
| | | this.setState({ columns: [...columns, values] }) |
| | | this.setState({ columns: [values, ...columns] }) |
| | | } |
| | | |
| | | subColumnChange = (values, resolve) => { |
| | | const { subColumns } = this.state |
| | | |
| | | let fields = subColumns.map(item => item.field.toLowerCase()) |
| | | if (fields.includes(values.field.toLowerCase())) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | resolve() |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | |
| | | this.setState({ subColumns: [values, ...subColumns] }) |
| | | } |
| | | |
| | | deleteScript = (record) => { |
| | |
| | | loading: false |
| | | }) |
| | | this.getdefaultSql() |
| | | } else if (activeKey === 'subcolumns') { |
| | | if (this.subdatasource && this.subdatasource.state.editingKey) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段未保存,请保存后切换!', |
| | | duration: 5 |
| | | }) |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | } else if (activeKey === 'scripts') { |
| | | let _loading = false |
| | | if (this.scriptsForm && this.scriptsForm.state.editItem) { |
| | |
| | | |
| | | submitDataSource = () => { |
| | | const { config, mainSearch } = this.props |
| | | const { activeKey, setting, columns, scripts } = this.state |
| | | const { activeKey, setting, columns, subColumns, scripts } = this.state |
| | | |
| | | if (config.subtype === 'dualdatacard') { |
| | | let arr = columns.map(col => col.field.toLowerCase()) |
| | | let _arr = [] |
| | | subColumns.forEach(col => { |
| | | if (arr.includes(col.field.toLowerCase())) { |
| | | _arr.push(col.field) |
| | | } |
| | | }) |
| | | |
| | | if (_arr.length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '子表中字段' + _arr.join('、') + '与主表字段重复!', |
| | | duration: 5 |
| | | }) |
| | | return Promise.reject() |
| | | } |
| | | } |
| | | |
| | | return new Promise((resolve, reject) => { |
| | | if (activeKey === 'setting') { |
| | |
| | | defaultSearch: _search, |
| | | setting: res |
| | | }, () => { |
| | | this.sqlverify(() => { resolve({setting: res, columns, scripts }) }, reject, false) |
| | | this.sqlverify(() => { resolve({setting: res, columns, subColumns, scripts }) }, reject, false) |
| | | }) |
| | | }, () => { |
| | | reject() |
| | |
| | | reject() |
| | | return |
| | | } |
| | | this.sqlverify(() => { resolve({setting, columns, scripts }) }, reject, false) |
| | | this.sqlverify(() => { resolve({setting, columns, subColumns, scripts }) }, reject, false) |
| | | } else if (activeKey === 'subcolumns') { |
| | | if (this.subdatasource && this.subdatasource.state.editingKey) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段未保存,请保存后提交!', |
| | | duration: 5 |
| | | }) |
| | | reject() |
| | | return |
| | | } |
| | | this.sqlverify(() => { resolve({setting, columns, subColumns, scripts }) }, reject, false) |
| | | } else if (activeKey === 'scripts') { |
| | | let _loading = false |
| | | if (this.scriptsForm && this.scriptsForm.state.editItem) { |
| | |
| | | return |
| | | } |
| | | |
| | | this.sqlverify(() => { resolve({setting, columns, scripts }) }, reject, false) |
| | | this.sqlverify(() => { resolve({setting, columns, subColumns, scripts }) }, reject, false) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | sqlverify = (resolve, reject, change = false, testScripts) => { |
| | | const { columns, setting, scripts, searches, defaultSearch } = this.state |
| | | const { config } = this.props |
| | | const { columns, setting, scripts, searches, defaultSearch, debugId } = this.state |
| | | |
| | | let _scripts = scripts.filter(item => item.status !== 'false') |
| | | |
| | |
| | | |
| | | if ((setting.interType === 'system' && setting.execute !== 'false') || _scripts.length > 0) { |
| | | let timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | let r = SettingUtils.getDebugSql(setting, _scripts, columns, searches, defaultSearch, timestamp) |
| | | let r = SettingUtils.getDebugSql(setting, _scripts, columns, searches, defaultSearch, config.type, '2023-04-20 15:29:37') |
| | | |
| | | let _debugId = md5(r.sql) |
| | | |
| | | if (debugId === _debugId) { |
| | | resolve() |
| | | return |
| | | } |
| | | |
| | | if (r.errors) { |
| | | notification.warning({ |
| | |
| | | if (sumParam) { |
| | | Api.genericInterface(sumParam).then(res => { |
| | | if (res.status) { |
| | | resolve() |
| | | this.setState({debugId: _debugId}, () => { |
| | | resolve() |
| | | }) |
| | | } else { |
| | | reject() |
| | | Modal.error({ |
| | |
| | | } |
| | | }) |
| | | } else { |
| | | resolve() |
| | | this.setState({debugId: _debugId}, () => { |
| | | resolve() |
| | | }) |
| | | } |
| | | } else { |
| | | reject() |
| | |
| | | }) |
| | | } |
| | | |
| | | updateSubfields = (columns) => { |
| | | this.setState({ |
| | | subColumns: columns |
| | | }) |
| | | } |
| | | |
| | | copyDatasource = () => { |
| | | const { config } = this.props |
| | | const { columns, scripts } = this.state |
| | | |
| | | if (columns.length === 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请添加字段集!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | const { columns, subColumns, scripts } = this.state |
| | | |
| | | this.settingForm.handleConfirm().then(res => { |
| | | delete res.supModule |
| | |
| | | let source = { |
| | | key: 'interface', |
| | | type: 'line', |
| | | data: {setting: res, columns, scripts, pageable: false, format: 'array', name: res.name, status: 'false', type: 'interface', uuid: '' } |
| | | data: {setting: res, columns, subColumns, scripts, pageable: false, format: 'array', name: res.name, status: 'false', type: 'interface', uuid: '' } |
| | | } |
| | | |
| | | try { |
| | |
| | | } |
| | | |
| | | if (config.subtype !== 'basetable') { |
| | | let subColumns = [] |
| | | |
| | | if (config.subtype === 'dualdatacard' && res.data.subColumns) { |
| | | subColumns = res.data.subColumns.map(col => { |
| | | col.uuid = Utils.getuuid() |
| | | return col |
| | | }) |
| | | } |
| | | |
| | | this.setState({ |
| | | scripts: res.data.scripts.map(col => { |
| | | col.uuid = Utils.getuuid() |
| | |
| | | col.uuid = Utils.getuuid() |
| | | return col |
| | | }), |
| | | subColumns: subColumns, |
| | | setting: res.data.setting, |
| | | median: res.data.setting, |
| | | reload: true, |
| | |
| | | let n = [] |
| | | |
| | | columns.forEach(col => { |
| | | m.push(`${col.field}(${col.label})`) |
| | | m.push(`${col.field} ${col.datatype}`) |
| | | n.push(col.field) |
| | | }) |
| | | |
| | | let oInput = document.createElement('input') |
| | | oInput.value = `/*${m.join(',')}*/ |
| | | ${n.join(',')}` |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | document.body.removeChild(oInput) |
| | | |
| | | message.success('复制成功。') |
| | | } |
| | | |
| | | copySubColumns = () => { |
| | | const { subColumns } = this.state |
| | | let m = [] |
| | | let n = [] |
| | | |
| | | subColumns.forEach(col => { |
| | | m.push(`${col.field} ${col.datatype}`) |
| | | n.push(col.field) |
| | | }) |
| | | |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { columns, median, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql, visible, pvisible, reload, script, scriptValue } = this.state |
| | | const { columns, subColumns, median, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql, visible, pvisible, reload, script, scriptValue, searchKey } = this.state |
| | | |
| | | return ( |
| | | <div className="model-data-source-wrap"> |
| | |
| | | <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 |
| | | config={config} |
| | | columns={columns} |
| | | subColumns={subColumns} |
| | | setting={setting} |
| | | scripts={scripts} |
| | | updateStatus={(res) => this.setState({median: {...res}})} |
| | |
| | | <span> |
| | | 字段集 |
| | | {columns.length ? <span className="count-tip">{columns.length}</span> : null} |
| | | <CopyOutlined title="以逗号拼接形式复制字段" className="mk-copy-fields" onClick={this.copyColumns}/> |
| | | </span> |
| | | } key="columns"> |
| | | <ColForm columnChange={this.columnChange}/> |
| | | <FieldsComponent |
| | | config={{...config, columns}} |
| | | config={{columns}} |
| | | type="fields" |
| | | updatefield={this.updatefields} |
| | | /> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del', 'clear']} type="datasourcefield" wrappedComponentRef={(inst) => this.datasource = inst} data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del', 'clear']} searchKey={searchKey} type="datasourcefield" wrappedComponentRef={(inst) => this.datasource = inst} data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/> |
| | | </TabPane> : null} |
| | | {config.subtype === 'dualdatacard' ? <TabPane tab={ |
| | | <span> |
| | | 子表字段集 |
| | | {subColumns.length ? <span className="count-tip">{subColumns.length}</span> : null} |
| | | </span> |
| | | } key="subcolumns"> |
| | | <ColForm columnChange={this.subColumnChange}/> |
| | | <FieldsComponent |
| | | config={{columns: subColumns}} |
| | | type="fields" |
| | | updatefield={this.updateSubfields} |
| | | /> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del', 'clear']} searchKey={searchKey} type="datasourcefield" wrappedComponentRef={(inst) => this.subdatasource = inst} data={subColumns} columns={colColumns} onChange={(subColumns) => this.setState({subColumns})}/> |
| | | </TabPane> : null} |
| | | <TabPane tab={ |
| | | <span> |
| | | 自定义脚本 |
| | | {scripts.length ? <span className="count-tip">{scripts.length}</span> : null} |
| | | {config.type !== 'interface' && activeKey === 'setting' ? <CopyOutlined title="复制数据源" className="mk-copy-datasource" onClick={(e) => {e.stopPropagation();this.copyDatasource()}}/> : null} |
| | | {config.type !== 'interface' && activeKey === 'setting' ? <SnippetsOutlined title="导入数据源" className="mk-paste-datasource" onClick={(e) => {e.stopPropagation();this.setState({pvisible: true})}}/> : null} |
| | | {activeKey === 'columns' ? <CopyOutlined title="以逗号拼接形式复制字段" className="mk-copy-fields" onClick={(e) => {e.stopPropagation();this.copyColumns()}}/> : null} |
| | | {activeKey === 'subcolumns' ? <CopyOutlined title="以逗号拼接形式复制字段" className="mk-copy-fields" onClick={(e) => {e.stopPropagation();this.copySubColumns()}}/> : null} |
| | | {activeKey === 'subcolumns' || activeKey === 'columns' ? <span onClick={(e) => {e.stopPropagation()}}><Search className="mk-search-fields" defaultValue={searchKey} allowClear onSearch={(val, e) => {e.stopPropagation();this.setState({searchKey: val})}} /></span> : null} |
| | | </span> |
| | | } key="scripts" disabled={median.interType !== 'system'} id="mk-scripts-tabpane"> |
| | | {scripts.length ? <BorderOutlined className="full-scripts" onClick={() => { |
| | |
| | | this.setState({visible: true, script: null, scriptValue: ''}) |
| | | }}/> : null} |
| | | <CustomScriptsForm |
| | | type={config.type} |
| | | setting={setting} |
| | | searches={searches} |
| | | defaultsql={defaultsql} |