| | |
| | | type: 'radio', |
| | | key: 'eval', |
| | | label: '解析', |
| | | initVal: card.eval || 'true', |
| | | initVal: card.eval || 'false', |
| | | tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。', |
| | | required: false, |
| | | options: [{ |
| | |
| | | type: 'radio', |
| | | key: 'eval', |
| | | label: '解析', |
| | | initVal: card.eval || 'true', |
| | | initVal: card.eval || 'false', |
| | | tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。', |
| | | required: false, |
| | | options: [ |
| | |
| | | type: 'radio', |
| | | key: 'eval', |
| | | label: '解析', |
| | | initVal: card.eval || 'true', |
| | | initVal: card.eval || 'false', |
| | | tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。', |
| | | required: false, |
| | | options: [ |
| | |
| | | type: 'radio', |
| | | key: 'eval', |
| | | label: '解析', |
| | | initVal: card.eval || 'true', |
| | | initVal: card.eval || 'false', |
| | | tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。', |
| | | required: false, |
| | | options: [ |
| | |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | res.columns.reverse() |
| | | } |
| | | |
| | | let maxScript = 0 |
| | |
| | | |
| | | if (config.subtype !== 'dualdatacard') { |
| | | delete res.subColumns |
| | | } else { |
| | | res.subColumns.reverse() |
| | | } |
| | | |
| | | this.setState({loading: false, visible: false}) |
| | |
| | | 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' |
| | | |
| | |
| | | |
| | | const { TabPane } = Tabs |
| | | const { Paragraph } = Typography |
| | | const { Search } = Input |
| | | |
| | | const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) |
| | | const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) |
| | |
| | | subColumns: [], |
| | | activeKey: 'setting', |
| | | loading: false, |
| | | searchKey: '', |
| | | initsql: '', // sql验证时变量声明及赋值 |
| | | usefulfields: '', |
| | | defaultsql: '', // 默认Sql |
| | |
| | | |
| | | _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() : [], |
| | | subColumns: config.subColumns ? fromJS(config.subColumns).toJS() : [], |
| | | columns: columns, |
| | | subColumns: subColumns, |
| | | setting: _setting, |
| | | median: _setting, |
| | | searches: search, |
| | | defaultSearch: _search |
| | | defaultSearch: _search, |
| | | searchKey: '' |
| | | }) |
| | | |
| | | this.getsysScript() |
| | |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | |
| | | this.setState({ columns: [...columns, values] }) |
| | | this.setState({ columns: [values, ...columns] }) |
| | | } |
| | | |
| | | subColumnChange = (values, resolve) => { |
| | |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | |
| | | this.setState({ subColumns: [...subColumns, values] }) |
| | | this.setState({ subColumns: [values, ...subColumns] }) |
| | | } |
| | | |
| | | deleteScript = (record) => { |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { columns, subColumns, 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"> |
| | |
| | | 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> |
| | |
| | | type="fields" |
| | | updatefield={this.updateSubfields} |
| | | /> |
| | | <EditTable actions={['edit', 'move', 'copy', 'del', 'clear']} type="datasourcefield" wrappedComponentRef={(inst) => this.subdatasource = inst} data={subColumns} columns={colColumns} onChange={(subColumns) => this.setState({subColumns})}/> |
| | | <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> |
| | |
| | | {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={() => { |
| | |
| | | .mk-copy-fields:hover, .mk-copy-datasource:hover, .mk-paste-datasource:hover { |
| | | opacity: 1; |
| | | } |
| | | .mk-search-fields { |
| | | position: absolute; |
| | | cursor: pointer; |
| | | width: 150px; |
| | | z-index: 1; |
| | | top: 10px; |
| | | right: -240px; |
| | | display: inline-block; |
| | | .ant-input { |
| | | border-radius: 40px; |
| | | height: 30px; |
| | | transition: opacity 0.2s; |
| | | } |
| | | .ant-input:not(:hover):not(:active):not(:focus) { |
| | | opacity: 0.6; |
| | | } |
| | | .ant-input:not(:hover):not(:active):not(:focus) + .ant-input-suffix { |
| | | opacity: 0.6; |
| | | } |
| | | } |
| | | .mk-search-fields:hover { |
| | | .ant-input { |
| | | opacity: 1; |
| | | } |
| | | .ant-input-suffix { |
| | | opacity: 1; |
| | | } |
| | | } |
| | | .count-tip { |
| | | position: absolute; |
| | | top: 0px; |
| | |
| | | } |
| | | } |
| | | }) |
| | | tab.components[0].cols = tab.components[0].cols.filter(col => !(col.field && col.Hide === 'true')) |
| | | tab.components[0].cols.forEach(col => { |
| | | if (col.type !== 'action') return |
| | | col.elements.forEach(btn => { |
| | |
| | | } |
| | | } |
| | | }) |
| | | item.cols = item.cols.filter(col => !(col.field && col.Hide === 'true')) |
| | | item.cols.forEach(col => { |
| | | if (col.type !== 'action') return |
| | | col.elements.forEach(btn => { |
| | |
| | | const presetColors = [ |
| | | '#1890ff', '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#2f54eb', '#722ed1', |
| | | '#eb2f96', '#aeb303', '#c32539', '#1d3661', '#ffd591', '#ffe58f', '#fffb8f', '#eaff8f', '#b7eb8f', '#87e8de', '#91d5ff', |
| | | '#adc6ff', '#d3adf7', '#EBE9E9', '#d9d9d9', '#434343', '#000000', '#ffffff', 'transparent' |
| | | '#adc6ff', '#EBE9E9', '#d9d9d9', 'rgba(0, 0, 0, 0.65)', 'rgba(0, 0, 0, 0.85)', '#000000', '#ffffff', 'transparent' |
| | | ] |
| | | const _href = window.location.href.split('#')[0] |
| | | |
| | | class ColorSketch extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | state = { |
| | | color: '', |
| | | initVal: '', |
| | | colors: [], |
| | | allowClear: false |
| | | } |
| | |
| | | |
| | | let _colors = sessionStorage.getItem('app_colors') |
| | | let colors = JSON.parse(JSON.stringify(presetColors)) |
| | | let normal_colors = localStorage.getItem(_href + 'normal_colors') |
| | | |
| | | if (normal_colors) { |
| | | try { |
| | | normal_colors = JSON.parse(normal_colors) |
| | | } catch (e) { |
| | | normal_colors = [] |
| | | } |
| | | |
| | | normal_colors.forEach(item => { |
| | | if (!colors.includes(item)) { |
| | | colors.push(item) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (_colors) { |
| | | try { |
| | |
| | | }) |
| | | } |
| | | |
| | | this.setState({color: initVal, allowClear: allowClear === true, colors}) |
| | | if (colors.length < 40) { |
| | | for (let i = colors.length; i < 40; i++) { |
| | | colors.push('transparent') |
| | | } |
| | | } |
| | | |
| | | this.setState({color: initVal, initVal, allowClear: allowClear === true, colors}) |
| | | } |
| | | |
| | | handleChange = (color) => { |
| | |
| | | } |
| | | } |
| | | |
| | | onVisibleChange = (status) => { |
| | | const { initVal, color } = this.state |
| | | |
| | | if (!status && color && color !== initVal) { |
| | | let normal_colors = localStorage.getItem(_href + 'normal_colors') |
| | | |
| | | if (normal_colors) { |
| | | try { |
| | | normal_colors = JSON.parse(normal_colors) |
| | | } catch (e) { |
| | | normal_colors = [] |
| | | } |
| | | } else { |
| | | normal_colors = [] |
| | | } |
| | | |
| | | normal_colors.unshift(color) |
| | | |
| | | if (normal_colors.length > 10) { |
| | | normal_colors.length = 10 |
| | | } |
| | | |
| | | localStorage.setItem(_href + 'normal_colors', JSON.stringify(normal_colors)) |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | render() { |
| | | const { color, allowClear, colors } = this.state |
| | | return ( |
| | | <div className="color-sketch-block"> |
| | | <Popover content={ |
| | | <SketchPicker color={ color } presetColors={colors} onChange={ this.handleChange } /> |
| | | } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click"> |
| | | } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click" onVisibleChange={this.onVisibleChange}> |
| | | <div className="color-sketch-block-box"> |
| | | <div className="color-sketch-block-inner" style={ {background: color} }></div> |
| | | </div> |
| | |
| | | padding: 0; |
| | | .sketch-picker { |
| | | width: 250px!important; |
| | | |
| | | .flexbox-fix:last-child { |
| | | overflow: hidden; |
| | | >div:nth-child(30) { |
| | | position: relative; |
| | | margin-bottom: 20px!important; |
| | | } |
| | | >div:nth-child(30)::after { |
| | | content: ' '; |
| | | display: block; |
| | | border-bottom: 1px solid #d9d9d9; |
| | | position: absolute; |
| | | width: 300px; |
| | | bottom: -10px; |
| | | right: -20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | field: item.field, |
| | | datatype: _t |
| | | } |
| | | items.push(newcard) |
| | | items.unshift(newcard) |
| | | keys.push(item.field.toLowerCase()) |
| | | }) |
| | | |
| | |
| | | class EditTable extends Component { |
| | | static propTpyes = { |
| | | actions: PropTypes.any, // 操作项 |
| | | searchKey: PropTypes.any, // 搜索条件 |
| | | data: PropTypes.any, // 数据列表 |
| | | columns: PropTypes.array, // 显示列 |
| | | onChange: PropTypes.func // 数据变化 |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { actions, indexShow } = this.props |
| | | const { actions, indexShow, searchKey } = this.props |
| | | const { editLineId } = this.state |
| | | |
| | | let components = { |
| | |
| | | } |
| | | |
| | | let moveprops = {} |
| | | if (actions.includes('move')) { |
| | | if (actions.includes('move') && !searchKey) { |
| | | components.body.row = DragableBodyRow |
| | | moveprops.moveAble = !this.state.editingKey |
| | | moveprops.moveRow = this.moveRow |
| | |
| | | return item |
| | | }) |
| | | |
| | | let reg = searchKey ? new RegExp(searchKey, 'ig') : null |
| | | |
| | | return ( |
| | | <EditableContext.Provider value={this.props.form}> |
| | | <div className="modal-edit-table"> |
| | |
| | | components={components} |
| | | dataSource={data} |
| | | columns={columns} |
| | | rowClassName={record => !editLineId || editLineId !== record.uuid ? 'editable-row' : 'editable-row active'} |
| | | rowClassName={record => { |
| | | let className = 'editable-row' |
| | | if (editLineId && editLineId === record.uuid) { |
| | | className += ' active' |
| | | } |
| | | if (searchKey) { |
| | | if (!reg.test(record.field) && !reg.test(record.label)) { |
| | | className += ' hidden' |
| | | } |
| | | } |
| | | return className |
| | | }} |
| | | pagination={false} |
| | | onRow={(record, index) => ({ |
| | | index, |
| | |
| | | background-color: #bae7ff!important; |
| | | } |
| | | } |
| | | .editable-row.hidden { |
| | | display: none; |
| | | } |
| | | .mk-index { |
| | | text-align: center; |
| | | white-space: nowrap; |
| | |
| | | type: 'radio', |
| | | key: 'eval', |
| | | label: '解析', |
| | | initVal: card.eval || 'true', |
| | | initVal: card.eval || 'false', |
| | | tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。', |
| | | required: false, |
| | | options: [{ |