| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Tabs, Row, Col, Button, notification, Modal, message, InputNumber, Spin, Typography, Popconfirm } from 'antd' |
| | | import { Form, Tabs, Row, Col, Button, Input, notification, Modal, message, InputNumber, Spin, Typography, Popconfirm } from 'antd' |
| | | import { EditOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | import md5 from 'md5' |
| | | |
| | | import Api from '@/api' |
| | |
| | | |
| | | const { TabPane } = Tabs |
| | | const { confirm } = Modal |
| | | const { Search } = Input |
| | | const { Paragraph } = Typography |
| | | const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) |
| | | |
| | |
| | | verify: {}, |
| | | debugId: '', |
| | | activeKey: 'setting', |
| | | searchKey: '', |
| | | excelColumns: [ |
| | | { |
| | | title: '字段', |
| | |
| | | inputType: 'input', |
| | | editable: true, |
| | | unique: true, |
| | | searchable: true, |
| | | copy: true, |
| | | width: '16%' |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'Text', |
| | | inputType: 'input', |
| | | editable: true, |
| | | searchable: true, |
| | | unique: true, |
| | | width: '16%' |
| | | }, |
| | |
| | | inputType: 'select', |
| | | editable: true, |
| | | required: false, |
| | | keyCol: true, |
| | | width: '12%', |
| | | render: (text) => { |
| | | if (text === 'image') { |
| | |
| | | {value: 'number', text: '数值'}, |
| | | {value: 'image', text: '图片'} |
| | | ] |
| | | }, |
| | | { |
| | | title: '取绝对值', |
| | | dataIndex: 'abs', |
| | | inputType: 'radio', |
| | | editable: true, |
| | | required: false, |
| | | width: '12%', |
| | | render: (text) => { |
| | | if (text === 'true') { |
| | | return '是' |
| | | } else { |
| | | return '否' |
| | | } |
| | | }, |
| | | options: [ |
| | | {value: 'true', text: '是'}, |
| | | {value: 'false', text: '否'} |
| | | ] |
| | | }, |
| | | { |
| | | title: '小数位', |
| | | dataIndex: 'decimal', |
| | | inputType: 'number', |
| | | min: 0, |
| | | max: 18, |
| | | editable: true, |
| | | required: false, |
| | | width: '12%' |
| | | }, |
| | | { |
| | | title: '导出', |
| | |
| | | {value: 'false', text: '否'} |
| | | ] |
| | | }, |
| | | { |
| | | title: '取绝对值', |
| | | dataIndex: 'abs', |
| | | inputType: 'radio', |
| | | editable: true, |
| | | required: false, |
| | | keyVals: ['number'], |
| | | width: '12%', |
| | | render: (text, record) => { |
| | | if (record.type !== 'number') return '' |
| | | |
| | | if (text === 'true') { |
| | | return '是' |
| | | } else { |
| | | return '否' |
| | | } |
| | | }, |
| | | options: [ |
| | | {value: 'true', text: '是'}, |
| | | {value: 'false', text: '否'} |
| | | ] |
| | | }, |
| | | { |
| | | title: '小数位', |
| | | dataIndex: 'decimal', |
| | | inputType: 'number', |
| | | min: 0, |
| | | max: 18, |
| | | editable: true, |
| | | required: false, |
| | | keyVals: ['number'], |
| | | width: '12%', |
| | | render: (text, record) => record.type === 'number' ? text : '' |
| | | } |
| | | ], |
| | | scriptsColumns: [ |
| | | { |
| | |
| | | } else { |
| | | col.type = 'text' |
| | | } |
| | | } |
| | | |
| | | if (col.type !== 'number') { |
| | | col.decimal = '' |
| | | col.abs = 'false' |
| | | } else { |
| | | col.abs = col.abs || 'false' |
| | | } |
| | | |
| | | return col |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | searchKey: '', |
| | | verify: _verify, |
| | | searches: searches, |
| | | activeKey: card.intertype === 'system' && _verify.dataType === 'custom' ? 'setting' : 'columns' |
| | |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | const { card, config } = this.props |
| | | const { activeKey, verify } = this.state |
| | | |
| | | // 表单提交时检查输入值是否正确 |
| | |
| | | }) |
| | | |
| | | return |
| | | } |
| | | |
| | | if (card.intertype === 'system' && verify.dataType !== 'custom' && verify.columns.length > 0 && config.$c_ds && config.setting.interType === 'system' && config.columns && config.columns.length > 0) { |
| | | let cols = [] |
| | | let columns = config.columns.map(c => c.field) |
| | | |
| | | if (config.subtype === 'dualdatacard' && config.subColumns) { |
| | | config.subColumns.forEach(item => { |
| | | columns.push(item.field) |
| | | }) |
| | | } |
| | | |
| | | verify.columns.forEach(col => { |
| | | if (col.output === 'false' || col.Column === '$Index') return |
| | | if (!columns.includes(col.Column)) { |
| | | cols.push(col.Column) |
| | | } |
| | | }) |
| | | if (cols.length) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: `导出列(${cols.join('、')})在字段集中不存在!`, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | if (activeKey === 'setting') { |
| | |
| | | const { verify } = this.state |
| | | |
| | | let columns = fromJS(verify.columns).toJS() |
| | | let fields = columns.map(item => item.Column) |
| | | let _names = {} |
| | | let fields = columns.map(item => { |
| | | let key = item.Column.toLowerCase() |
| | | _names[key] = item.Text |
| | | |
| | | return key |
| | | }) |
| | | let names = {$up: false} |
| | | |
| | | config.columns.forEach(item => { |
| | | if (fields.includes(item.field) || !item.field) return |
| | | fields.push(item.field) |
| | | if (!item.field) return |
| | | let key = item.field.toLowerCase() |
| | | if (fields.includes(key)) { |
| | | if (_names[key] !== item.label) { |
| | | names.$up = true |
| | | names[key] = item.label |
| | | } |
| | | return |
| | | } |
| | | |
| | | let cell = { |
| | | Column: item.field, |
| | |
| | | |
| | | if (config.subtype === 'dualdatacard') { |
| | | config.subColumns.forEach(item => { |
| | | if (fields.includes(item.field) || !item.field) return |
| | | fields.push(item.field) |
| | | if (!item.field) return |
| | | let key = item.field.toLowerCase() |
| | | if (fields.includes(key)) { |
| | | if (_names[key] !== item.label) { |
| | | names.$up = true |
| | | names[key] = item.label |
| | | } |
| | | return |
| | | } |
| | | |
| | | let cell = { |
| | | Column: item.field, |
| | |
| | | }) |
| | | } |
| | | |
| | | this.setState({ |
| | | verify: {...verify, columns: columns} |
| | | }) |
| | | if (names.$up) { |
| | | const that = this |
| | | |
| | | confirm({ |
| | | content: '部分字段名称与显示列不一致,是否更新?', |
| | | okText: '更新', |
| | | cancelText: '不更新', |
| | | onOk() { |
| | | columns = columns.map(item => { |
| | | let key = item.Column.toLowerCase() |
| | | |
| | | if (names[key]) { |
| | | item.Text = names[key] |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | |
| | | that.setState({ |
| | | verify: {...verify, columns: columns} |
| | | }) |
| | | }, |
| | | onCancel() { |
| | | that.setState({ |
| | | verify: {...verify, columns: columns} |
| | | }) |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | verify: {...verify, columns: columns} |
| | | }) |
| | | } |
| | | } |
| | | |
| | | clearField = () => { |
| | |
| | | const { card } = this.props |
| | | const { activeKey, verify } = this.state |
| | | |
| | | if (card.intertype !== 'system' || verify.dataType !== 'custom') { |
| | | if (activeKey === 'setting') { |
| | | this.settingForm.handleConfirm().then(res => { |
| | | if (card.intertype !== 'system' || verify.dataType !== 'custom') { |
| | | this.setState({activeKey: val, verify: {...verify, ...res}}) |
| | | } else { |
| | | this.setState({ |
| | | verify: {...verify, ...res} |
| | | }, () => { |
| | | this.setState({loading: true}) |
| | | this.sqlverify(() => { // 验证成功 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, verify.scripts) |
| | | }) |
| | | } |
| | | }) |
| | | } else if (card.intertype !== 'system' || verify.dataType !== 'custom') { |
| | | this.setState({activeKey: val}) |
| | | return |
| | | } else if (activeKey === 'setting') { |
| | | this.settingForm.handleConfirm().then(res => { |
| | | this.setState({ |
| | | verify: {...verify, ...res} |
| | | }, () => { |
| | | this.setState({loading: true}) |
| | | this.sqlverify(() => { // 验证成功 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, verify.scripts) |
| | | }) |
| | | }) |
| | | } else if (activeKey === 'columns') { |
| | | if (this.columnRef && this.columnRef.state.editingKey) { |
| | | notification.warning({ |
| | |
| | | return |
| | | } |
| | | |
| | | let timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | let sql = SettingUtils.getDebugSql(verify, scripts, (verify.useSearch === 'true' ? searches : []), Utils, '2023-04-20 15:29:37') |
| | | let sql = SettingUtils.getDebugSql(verify, scripts, (verify.useSearch === 'true' ? searches : [])) |
| | | |
| | | let _debugId = md5(sql) |
| | | |
| | |
| | | return |
| | | } |
| | | |
| | | let param = { |
| | | func: 's_debug_sql', |
| | | exec_type: 'y', |
| | | LText: sql |
| | | } |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = timestamp |
| | | param.secretkey = Utils.encrypt('', timestamp) |
| | | |
| | | Api.genericInterface(param).then(result => { |
| | | if (result.status) { |
| | | Api.sDebug(sql).then(result => { |
| | | if (result.status || result.ErrCode === '-2') { |
| | | this.setState({debugId: _debugId}) |
| | | _resolve() |
| | | } else { |
| | |
| | | |
| | | render() { |
| | | const { card } = this.props |
| | | const { verify, excelColumns, scriptsColumns, activeKey, loading, searches } = this.state |
| | | const { verify, excelColumns, scriptsColumns, activeKey, loading, searches, searchKey } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | } key="columns"> |
| | | <ColumnForm columnChange={this.columnChange}/> |
| | | <Button className="excel-col-add mk-green" title="添加显示列字段" onClick={this.columnFieldInput}> |
| | | 同步显示列 |
| | | 同步字段集 |
| | | </Button> |
| | | <Button className="excel-col-add mk-red" title="清空Excel列" onClick={this.clearField}> |
| | | 清空Excel列 |
| | | </Button> |
| | | <div style={{color: '#959595', fontSize: '13px', paddingLeft: '10px'}}>如需导出序号,请使用字段 $Index;数值类型导出时可进行数据处理(取绝对值、保留小数位);红色标题导出时列头文字为红色。</div> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del']} type="excelcolumn" wrappedComponentRef={(inst) => this.columnRef = inst} data={verify.columns} columns={excelColumns} onChange={this.changeColumns}/> |
| | | <div style={{color: '#959595', fontSize: '13px', paddingLeft: '10px'}}>如需导出序号,请使用字段 $Index;数值类型导出时可取绝对值以及设置小数位;导出为否时,不使用行信息;红色标题导出时列头文字为红色。</div> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del']} type="excelcolumn" searchKey={searchKey} wrappedComponentRef={(inst) => this.columnRef = inst} data={verify.columns} columns={excelColumns} onChange={this.changeColumns}/> |
| | | </TabPane> |
| | | {card.intertype === 'system' ? <TabPane tab={ |
| | | <span> |
| | |
| | | /> |
| | | <EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/> |
| | | </TabPane> : null} |
| | | <TabPane tab="信息提示" key="message"> |
| | | <TabPane tab={ |
| | | <span> |
| | | 信息提示 |
| | | {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="message"> |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={24}> |
| | | <Col offset={6} span={6}> |