| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Tabs, Table, Popconfirm, Icon, notification, Modal, Typography, Spin } from 'antd' |
| | | import { Form, Tabs, Popconfirm, Icon, notification, Modal, Typography, Spin } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | loading: false, |
| | | initsql: '', // sql验证时变量声明及赋值 |
| | | usefulfields: '', |
| | | defaultsql: '', // 默认Sql |
| | | systemScripts: [{ |
| | | name: '默认sql', |
| | | value: '' |
| | | }], |
| | | defaultsql: '', // 默认Sql |
| | | systemScripts: [], |
| | | colColumns: [ |
| | | { |
| | | title: '名称', |
| | |
| | | dataIndex: 'field', |
| | | inputType: 'input', |
| | | editable: true, |
| | | unique: true, |
| | | width: '28%' |
| | | }, |
| | | { |
| | |
| | | { |
| | | title: 'SQL', |
| | | dataIndex: 'sql', |
| | | width: '65%', |
| | | render: (text) => ( |
| | | <Paragraph copyable ellipsis={{ rows: 4, expandable: true }}>{text}</Paragraph> |
| | | ) |
| | | width: '72%', |
| | | render: (text) => { |
| | | let title = text.match(/^\s*\/\*.+\*\//) |
| | | title = title && title[0] ? title[0] : '' |
| | | text = title ? text.replace(title, '') : text |
| | | |
| | | return ( |
| | | <div> |
| | | {title ? <span style={{color: '#a50'}}>{title}</span> : null} |
| | | <Paragraph copyable ellipsis={{ rows: 4, expandable: true }}>{text}</Paragraph> |
| | | </div> |
| | | ) |
| | | } |
| | | }, |
| | | { |
| | | title: '状态', |
| | | dataIndex: 'status', |
| | | width: '15%', |
| | | width: '13%', |
| | | render: (text, record) => record.status === 'false' ? |
| | | ( |
| | | <div> |
| | |
| | | { |
| | | title: '操作', |
| | | align: 'center', |
| | | width: '20%', |
| | | width: '15%', |
| | | dataIndex: 'operation', |
| | | render: (text, record) => |
| | | (<div> |
| | | (<div style={{textAlign: 'center'}}> |
| | | <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> |
| | | <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> |
| | | <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> |
| | | <span className="operation-btn" title={this.props.dict['model.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> |
| | | <Popconfirm |
| | | overlayClassName="popover-confirm" |
| | |
| | | let getcomponentmarks = (box, conf) => { |
| | | if (!conf.parentId && box.Template === 'CustomPage') { |
| | | box.components.forEach(item => { |
| | | if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { |
| | | if (item.type === 'group') { |
| | | item.components.forEach(cell => { |
| | | if (cell.uuid !== conf.uuid && cell.setting && cell.setting.varMark) { |
| | | Marks.push(cell.setting.varMark.toLowerCase()) |
| | | } |
| | | }) |
| | | } else if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { |
| | | Marks.push(item.setting.varMark.toLowerCase()) |
| | | } |
| | | }) |
| | | } else if (conf.parentId === box.parentId && conf.tabId === box.uuid) { |
| | | box.components.forEach(item => { |
| | | if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { |
| | | if (item.type === 'group') { |
| | | item.components.forEach(cell => { |
| | | if (cell.uuid !== conf.uuid && cell.setting && cell.setting.varMark) { |
| | | Marks.push(cell.setting.varMark.toLowerCase()) |
| | | } |
| | | }) |
| | | } else if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { |
| | | Marks.push(item.setting.varMark.toLowerCase()) |
| | | } |
| | | }) |
| | |
| | | |
| | | let _setting = fromJS(config.setting).toJS() |
| | | |
| | | if (_setting.varMark === undefined) { |
| | | _setting.varMark = this.getMark(Marks) |
| | | } |
| | | |
| | | this.setState({ |
| | | columns: fromJS(config.columns).toJS(), |
| | | setting: _setting, |
| | |
| | | }) |
| | | |
| | | this.getsysScript() |
| | | } |
| | | |
| | | getMark = (varMarks) => { |
| | | let m = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'] |
| | | let i = 0 |
| | | let n = 25 |
| | | |
| | | let name = '' |
| | | while (!name) { |
| | | name = `${m[n]}${m[i]}_` |
| | | if (varMarks.includes(name) && n > 0) { |
| | | i++ |
| | | if (i >= 26) { |
| | | n-- |
| | | i = 0 |
| | | } |
| | | name = '' |
| | | } |
| | | } |
| | | |
| | | return name |
| | | } |
| | | |
| | | getsysScript = () => { |
| | |
| | | res.data.forEach(item => { |
| | | let _item = { |
| | | name: item.funcname, |
| | | value: Utils.UnformatOptions(item.longparam) |
| | | value: window.decodeURIComponent(window.atob(item.longparam)) |
| | | } |
| | | |
| | | _scripts.push(_item) |
| | | }) |
| | | |
| | | this.setState({ |
| | | systemScripts: [...this.state.systemScripts, ..._scripts] |
| | | systemScripts: _scripts |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | |
| | | columnChange = (values) => { |
| | | const { columns } = this.state |
| | | |
| | | let fields = columns.map(item => item.field.toLowerCase()) |
| | | if (fields.includes(values.field.toLowerCase())) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | |
| | | this.setState({ columns: [...columns, values] }) |
| | |
| | | handleEdit = (record) => { |
| | | this.scriptsForm.edit(record) |
| | | |
| | | let node = document.getElementById('model-verify-card-box-tab').parentNode |
| | | let node = document.getElementById('model-data-source-wrap').parentNode |
| | | |
| | | if (node && node.scrollTop) { |
| | | let inter = Math.ceil(node.scrollTop / 10) |
| | |
| | | this.setState({ scripts }) |
| | | } |
| | | |
| | | handleUpDown = (record, direction) => { |
| | | let scripts = fromJS(this.state.scripts).toJS() |
| | | let index = 0 |
| | | |
| | | scripts = scripts.filter((item, i) => { |
| | | if (item.uuid === record.uuid) { |
| | | index = i |
| | | } |
| | | |
| | | return item.uuid !== record.uuid |
| | | }) |
| | | if ((index === 0 && direction === 'up') || (index === scripts.length && direction === 'down')) { |
| | | return |
| | | } |
| | | |
| | | if (direction === 'up') { |
| | | scripts.splice(index - 1, 0, record) |
| | | } else { |
| | | scripts.splice(index + 1, 0, record) |
| | | } |
| | | |
| | | this.setState({ scripts }) |
| | | } |
| | | |
| | | scriptsChange = (values) => { |
| | | let scripts = fromJS(this.state.scripts).toJS() |
| | | |
| | |
| | | return new Promise((resolve, reject) => { |
| | | this.sqlverify(resolve, reject, false, scripts) |
| | | }) |
| | | } |
| | | |
| | | changeScripts = (scripts) => { |
| | | this.setState({ scripts }) |
| | | } |
| | | |
| | | scriptSubmit = (values) => { |
| | |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | this.getdefaultSql() |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | this.getdefaultSql() |
| | | }, true) |
| | | }) |
| | | }, () => { |
| | |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | this.getdefaultSql() |
| | | } else if (activeKey === 'scripts') { |
| | | let _loading = false |
| | | if (this.scriptsForm && this.scriptsForm.state.editItem) { |
| | | _loading = true |
| | | } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') { |
| | | } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) { |
| | | _loading = true |
| | | } |
| | | |
| | |
| | | loading: false |
| | | }) |
| | | } |
| | | } |
| | | |
| | | getdefaultSql = () => { |
| | | const { columns, searches, setting } = this.state |
| | | let defaultsql = '' |
| | | let arr_field = columns.map(col => col.field).join(',') |
| | | |
| | | let _search = this.formatSearch(searches) |
| | | _search = Utils.joinMainSearchkey(_search) |
| | | |
| | | _search = _search.replace(/@\$@/ig, '') |
| | | _search = _search ? 'where ' + _search : '' |
| | | |
| | | if (setting.dataresource) { |
| | | let _dataresource = setting.dataresource |
| | | |
| | | if (/\s/.test(_dataresource)) { |
| | | _dataresource = '(' + _dataresource + ') tb' |
| | | } |
| | | |
| | | defaultsql = `select top @pageSize@ ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by @orderBy@) as rows from ${_dataresource} ${_search}) tmptable where rows > (@pageSize@ * (@pageIndex@ - 1)) order by tmptable.rows` |
| | | } |
| | | |
| | | this.setState({defaultsql}) |
| | | } |
| | | |
| | | /** |
| | | * @description 获取全部搜索条件 |
| | | * @param {Array} searches 搜索条件数组 |
| | | */ |
| | | formatSearch (searches) { |
| | | if (!searches || searches.length === 0) return [] |
| | | |
| | | let newsearches = [] |
| | | searches.forEach(search => { |
| | | if (!search.field) return |
| | | |
| | | let item = { |
| | | key: search.field, |
| | | match: search.match, |
| | | type: search.type, |
| | | label: search.label, |
| | | value: search.initval, |
| | | required: search.required === 'true' |
| | | } |
| | | if (item.type === 'group') { |
| | | let copy = fromJS(item).toJS() |
| | | copy.key = search.datefield |
| | | |
| | | item.value = search.initval && search.initval[0] ? search.initval[0] : '@$@' |
| | | item.match = '=' |
| | | |
| | | copy.type = 'daterange' |
| | | copy.match = 'between' |
| | | copy.value = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')] |
| | | |
| | | if (search.transfer === 'true') { |
| | | newsearches.push(item) |
| | | } |
| | | newsearches.push(copy) |
| | | return |
| | | } else if (item.type === 'date') { |
| | | item.value = moment().format('YYYY-MM-DD') |
| | | } else if (item.type === 'datemonth') { |
| | | item.value = moment().format('YYYY-MM') |
| | | } else if (item.type === 'dateweek') { |
| | | item.value = [moment().startOf('week').format('YYYY-MM-DD'), moment().endOf('week').format('YYYY-MM-DD')] |
| | | } else if (item.type === 'daterange') { |
| | | item.value = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')] |
| | | } else if (item.type === 'multiselect') { |
| | | item.value = ['@$@'] |
| | | } else { |
| | | item.value = '@$@' |
| | | } |
| | | newsearches.push(item) |
| | | }) |
| | | |
| | | return newsearches |
| | | } |
| | | |
| | | submitDataSource = () => { |
| | |
| | | let _loading = false |
| | | if (this.scriptsForm && this.scriptsForm.state.editItem) { |
| | | _loading = true |
| | | } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') { |
| | | } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) { |
| | | _loading = true |
| | | } |
| | | |
| | |
| | | |
| | | let param = { |
| | | func: 's_debug_sql', |
| | | exec_type: 'y', |
| | | LText: result.sql |
| | | } |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | param.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | Api.getLocalConfig(param).then(result => { |
| | | if (result.status) { |
| | |
| | | |
| | | render() { |
| | | const { menu, config } = this.props |
| | | const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches } = this.state |
| | | const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql } = this.state |
| | | |
| | | return ( |
| | | <div id="model-verify-card-box-tab"> |
| | | <div id="model-data-source-wrap"> |
| | | {loading && <Spin size="large" />} |
| | | <Tabs activeKey={activeKey} className="verify-card-box" onChange={this.changeTab}> |
| | | <Tabs activeKey={activeKey} className="data-source-card-box" onChange={this.changeTab}> |
| | | <TabPane tab="数据源" key="setting"> |
| | | <SettingForm |
| | | menu={menu} |
| | |
| | | <FieldsComponent |
| | | config={{...config, columns}} |
| | | type="fields" |
| | | tableFields={menu.tableFields} |
| | | updatefield={this.updatefields} |
| | | /> |
| | | <EditTable data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del']} type="datasourcefield" data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/> |
| | | </TabPane> |
| | | <TabPane tab={ |
| | | <span> |
| | |
| | | <CustomScriptsForm |
| | | setting={setting} |
| | | searches={searches} |
| | | defaultsql={defaultsql} |
| | | initsql={this.state.initsql} |
| | | dict={this.props.dict} |
| | | customScripts={scripts} |
| | |
| | | scriptSubmit={this.scriptSubmit} |
| | | wrappedComponentRef={(inst) => this.scriptsForm = inst} |
| | | /> |
| | | <Table |
| | | bordered |
| | | rowKey="uuid" |
| | | className="custom-table" |
| | | dataSource={scripts} |
| | | columns={scriptsColumns} |
| | | pagination={false} |
| | | /> |
| | | <EditTable actions={['move']} data={scripts} columns={scriptsColumns} onChange={this.changeScripts}/> |
| | | </TabPane> |
| | | </Tabs> |
| | | </div> |