| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Spin, Tooltip, message, Modal, notification } from 'antd' |
| | | import { Spin, Tooltip, message, Modal, notification, Switch } from 'antd' |
| | | import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, QuestionCircleOutlined, ClearOutlined } from '@ant-design/icons' |
| | | import { Graph, Shape } from '@antv/x6' |
| | | import { Stencil } from '@antv/x6-plugin-stencil' |
| | |
| | | editing: false, |
| | | node: null, |
| | | loading: false, |
| | | status: 0, |
| | | rolelist: [] |
| | | } |
| | | |
| | |
| | | this.handleData() |
| | | |
| | | this.setState({ |
| | | status: item.status || 0, |
| | | loading: false |
| | | }) |
| | | |
| | |
| | | groups: [ |
| | | { |
| | | title: '通用节点', |
| | | name: 'group1' |
| | | name: 'group1', |
| | | graphHeight: 240 |
| | | }, |
| | | { |
| | | title: '自定义', |
| | |
| | | |
| | | const r1 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | label: '开始', |
| | | mknode: 'start', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26 |
| | | ry: 26, |
| | | fill: '#52c41a', |
| | | stroke: '#52c41a' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | | text: '开始' |
| | | } |
| | | } |
| | | }) |
| | | const r2 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | label: '过程' |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '过程' |
| | | } |
| | | } |
| | | }) |
| | | const r3 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 6, |
| | | ry: 6 |
| | | } |
| | | ry: 6, |
| | | fill: '#fff7e6', |
| | | stroke: '#fa8c16' |
| | | }, |
| | | label: '可选过程' |
| | | text: { |
| | | text: '可选过程' |
| | | } |
| | | } |
| | | }) |
| | | const r4 = graph.createNode({ |
| | | shape: 'mk-polygon', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '0,10 10,0 20,10 10,20' |
| | | } |
| | | refPoints: '0,10 10,0 20,10 10,20', |
| | | fill: '#f9f0ff', |
| | | stroke: '#722ed1' |
| | | }, |
| | | label: '决策' |
| | | text: { |
| | | text: '决策' |
| | | } |
| | | } |
| | | }) |
| | | const r5 = graph.createNode({ |
| | | shape: 'mk-paral', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '10,0 40,0 30,20 0,20' |
| | | } |
| | | refPoints: '10,0 40,0 30,20 0,20', |
| | | fill: '#e6fffb', |
| | | stroke: '#13c2c2' |
| | | }, |
| | | label: '数据' |
| | | text: { |
| | | text: '数据' |
| | | } |
| | | } |
| | | }) |
| | | const r6 = graph.createNode({ |
| | | shape: 'mk-circle', |
| | | label: '连接' |
| | | attrs: { |
| | | body: { |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '连接' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | stencil.load([r1, r2, r3, r4, r5, r6], 'group1') |
| | | const r7 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | mknode: 'end', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#fa8c16', |
| | | stroke: '#fa8c16' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | | text: '结束' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | stencil.load([r1, r2, r3, r4, r5, r6, r7], 'group1') |
| | | |
| | | const p1 = graph.createNode({ |
| | | shape: 'mk-ellipse', |
| | |
| | | } |
| | | |
| | | save = () => { |
| | | const { BID } = this.state |
| | | const { BID, plot, status } = this.state |
| | | |
| | | if (!BID) { |
| | | Modal.error({ |
| | |
| | | return |
| | | } |
| | | |
| | | let nodes = this.mkGraph.toJSON() |
| | | let _status = status |
| | | |
| | | if (plot.subtype === 'xflow' && status === 10) { |
| | | let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length |
| | | let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length |
| | | |
| | | if (start_num !== 1 || end_num !== 1) { |
| | | _status = 0 |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | |
| | | let nodes = this.mkGraph.toJSON() |
| | | this.mkGraph.toPNG((dataUri) => { |
| | | let param = { |
| | | func: 's_works_flow_param_upt_v6', |
| | | long_param: window.btoa(window.encodeURIComponent(JSON.stringify(nodes))), |
| | | flow_image: dataUri, |
| | | status: status, |
| | | ID: BID, |
| | | BID: '' |
| | | } |
| | |
| | | message: '保存成功!', |
| | | duration: 2 |
| | | }) |
| | | this.setState({ |
| | | loading: false, |
| | | status: _status |
| | | }) |
| | | } else { |
| | | notification.error({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | } |
| | | }) |
| | | }, {padding: 20}) |
| | | } |
| | |
| | | this.selectNode.attr('text/fontSize', value) |
| | | } else if (key === 'fontFill') { |
| | | this.selectNode.attr('text/fill', value) |
| | | } else if (key === 'mksign') { |
| | | this.selectNode.prop('mksign', value) |
| | | } else if (key === 'mkdata') { |
| | | this.selectNode.prop('mkdata', value) |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | changeStatus = () => { |
| | | const { plot, status } = this.state |
| | | |
| | | let _status = status === 10 ? 0 : 10 |
| | | let nodes = this.mkGraph.toJSON() |
| | | |
| | | if (plot.subtype === 'xflow' && _status === 10) { |
| | | let start_num = nodes.cells.filter(cell => cell.mknode === 'start').length |
| | | let end_num = nodes.cells.filter(cell => cell.mknode === 'end').length |
| | | |
| | | if (start_num === 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请添加开始节点!', |
| | | duration: 2 |
| | | }) |
| | | } else if (start_num > 1) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '开始节点不可添加多个!', |
| | | duration: 2 |
| | | }) |
| | | } else if (end_num === 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请添加结束节点!', |
| | | duration: 2 |
| | | }) |
| | | } else if (end_num > 1) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '结束节点不可添加多个!', |
| | | duration: 2 |
| | | }) |
| | | } else { |
| | | this.setState({status: _status}) |
| | | } |
| | | } else { |
| | | this.setState({status: _status}) |
| | | } |
| | | } |
| | | |
| | | resetlane = (id, x, offset) => { |
| | | let nodes = this.mkGraph.getNodes() |
| | | |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { loading, config, node, rolelist } = this.state |
| | | const { loading, config, node, rolelist, status } = this.state |
| | | |
| | | let style = {...config.style} |
| | | |
| | |
| | | </Tooltip> |
| | | </div> |
| | | <div className="right-tool"> |
| | | <Tooltip title="启用/停用"> |
| | | <Switch size="small" style={{marginRight: '10px'}} checked={status === 10} onChange={this.changeStatus} /> |
| | | </Tooltip> |
| | | <Tooltip title="保存"> |
| | | <SaveOutlined onClick={this.save}/> |
| | | <SaveOutlined style={{marginRight: '10px'}} onClick={this.save}/> |
| | | </Tooltip> |
| | | </div> |
| | | </div> |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Form, Row, Col, Input, Select, Radio, InputNumber } from 'antd' |
| | | import { Form, Row, Col, Input, Select, Radio, InputNumber, Modal } from 'antd' |
| | | import { FormOutlined } from '@ant-design/icons' |
| | | |
| | | import ColorSketch from '@/mob/colorsketch' |
| | | |
| | | import './index.scss' |
| | | |
| | | const { TextArea } = Input |
| | |
| | | } |
| | | |
| | | state = { |
| | | formlist: null |
| | | formlist: null, |
| | | mknode: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | this.setState({ |
| | | mknode: null, |
| | | formlist: this.getFormList(this.props.node) |
| | | }) |
| | | } |
| | |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (!is(fromJS(this.props.node), fromJS(nextProps.node))) { |
| | | this.setState({ |
| | | mknode: null, |
| | | formlist: null |
| | | }, () => { |
| | | this.setState({ |
| | |
| | | field: 'fontFill', |
| | | label: '颜色', |
| | | initval: font.fill || '#000000' |
| | | }, |
| | | { |
| | | type: 'other', |
| | | label: '自定义信息', |
| | | initval: node |
| | | } |
| | | ] |
| | | } else if (node.shape === 'lane') { |
| | |
| | | initval: fontFill |
| | | }, |
| | | { |
| | | type: 'title', |
| | | label: '自定义信息' |
| | | }, |
| | | { |
| | | type: 'text', |
| | | field: 'mksign', |
| | | label: '标记', |
| | | initval: node.mksign || '' |
| | | }, |
| | | { |
| | | type: 'select', |
| | | field: 'mkroleid', |
| | | label: '角色', |
| | | initval: node.mkroleid || '', |
| | | options: this.props.rolelist.map(item => ({value: item.RoleID, text: item.RoleName})) |
| | | }, |
| | | type: 'other', |
| | | label: '自定义信息', |
| | | initval: node |
| | | } |
| | | ] |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | this.props.onChange(value, key) |
| | | } |
| | | |
| | | confirm = () => { |
| | | this.setState({visible: false}) |
| | | } |
| | | |
| | | getFields() { |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'other') { |
| | | fields.push( |
| | | <Col span={24} key={index}> |
| | | <span className="split-line">{item.label}:<FormOutlined onClick={() => {this.setState({visible: true})}}/></span> |
| | | </Col> |
| | | ) |
| | | } |
| | | }) |
| | | return fields |
| | | } |
| | | |
| | | render() { |
| | | const { visible } = this.state |
| | | |
| | | return ( |
| | | <div className="node-edit-form-wrap"> |
| | | <Form className="node-edit-form"> |
| | | <Row>{this.getFields()}</Row> |
| | | </Form> |
| | | <Modal |
| | | title="节点编辑" |
| | | visible={visible} |
| | | closable={false} |
| | | maskClosable={false} |
| | | width={700} |
| | | onOk={this.confirm} |
| | | onCancel={() => this.setState({visible: false})} |
| | | destroyOnClose |
| | | > |
| | | |
| | | </Modal> |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | /** |
| | | * @description 获取默认存储过程请求参数 |
| | | */ |
| | | getExcelDefaultParam = (arr_field, orderBy, search, pagination = false, pageIndex = 1, pageSize = 100) => { |
| | | getExcelDefaultParam = (arr_field, orderBy, search, pagination = false, pageIndex = 1, pageSize = 9999) => { |
| | | const { setting, btn, selectedData, BID } = this.props |
| | | |
| | | let defaultSql = setting.execute || setting.default || 'true' |
| | |
| | | } |
| | | } |
| | | |
| | | let custompage = /@pageSize@/i.test(_dataresource + customScript) |
| | | let _search = Utils.joinMainSearchkey(search) |
| | | |
| | | _search = _search ? 'where ' + _search : '' |
| | | |
| | | let param = { |
| | |
| | | fullName = sessionStorage.getItem('CloudFullName') || '' |
| | | } |
| | | |
| | | let regoptions = null |
| | | if (queryType === 'statistics' || param.custom_script) { |
| | | let allSearch = Utils.getAllSearchOptions(search) |
| | | |
| | | regoptions = allSearch.map(item => { |
| | | let regoptions = allSearch.map(item => { |
| | | return { |
| | | reg: new RegExp('@' + item.key + '@', 'ig'), |
| | | value: `'${item.value}'` |
| | |
| | | reg: new RegExp('@pageIndex@', 'ig'), |
| | | value: pageIndex |
| | | }) |
| | | } |
| | | |
| | | if (queryType === 'statistics') { // 统计数据源,内容替换 |
| | | regoptions.forEach(item => { |
| | | _dataresource = _dataresource.replace(item.reg, item.value) |
| | | param.custom_script = param.custom_script.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | if (queryType === 'statistics') { // 统计数据源,内容替换 |
| | | _search = '' |
| | | } |
| | | |
| | |
| | | |
| | | let LText = '' |
| | | |
| | | if (defaultSql !== 'false' && !pagination) { |
| | | LText = ` select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${orderBy}) as rows from ${_dataresource} ${_search}) tmptable order by tmptable.rows ` |
| | | if (custompage) { |
| | | LText = `/*system_query*/select ${arr_field} from ${_dataresource} ${_search} ` |
| | | } else if (defaultSql !== 'false' && !pagination) { |
| | | LText = `/*system_query*/select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${orderBy}) as rows from ${_dataresource} ${_search}) tmptable order by tmptable.rows ` |
| | | } else if (defaultSql !== 'false') { |
| | | LText = ` 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 ` |
| | | LText = `/*system_query*/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 ` |
| | | } |
| | | |
| | | if (param.custom_script) { |
| | | param.custom_script = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000),@UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20),@mk_nation nvarchar(50),@mk_province nvarchar(50),@mk_city nvarchar(50),@mk_district nvarchar(50),@mk_address nvarchar(100) select @ErrorCode='',@retmsg ='',@UserName='${userName}', @FullName='${fullName}', @RoleID='${RoleID}', @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @mk_user_type='${mk_user_type}', @mk_nation='${nation}', @mk_province='${province}', @mk_city='${city}', @mk_district='${district}', @mk_address='${address}' |
| | | ${param.custom_script} |
| | | ` |
| | | regoptions.forEach(item => { |
| | | param.custom_script = param.custom_script.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | if (LText) { |
| | | LText += ` |
| | |
| | | const { config } = this.state |
| | | |
| | | if (config.type === 'multiselect') { |
| | | this.props.onChange(val.join(',')) |
| | | this.props.onChange(val.join(','), true) |
| | | } else { |
| | | config.linkFields && config.linkFields.forEach((m, i) => { |
| | | setTimeout(() => { |
| | |
| | | let _regoptions = regoptions.map(item => { |
| | | return { |
| | | reg: new RegExp('@' + item.key + '@', 'ig'), |
| | | value: `'0'`, |
| | | type: item.type || '' |
| | | value: `'0'` |
| | | } |
| | | }) |
| | | |
| | |
| | | value: 1 |
| | | }) |
| | | |
| | | if (verify.queryType === 'statistics' && _dataresource) { |
| | | _regoptions.forEach(item => { |
| | | _dataresource = _dataresource.replace(item.reg, item.value) |
| | | }) |
| | | _search = '' |
| | | } else if (_dataresource) { |
| | | _regoptions.forEach(item => { |
| | | if (item.type !== 'url') return |
| | | _dataresource = _dataresource.replace(item.reg, item.value) |
| | | }) |
| | | } |
| | | |
| | | if (_customScript) { |
| | | _regoptions.forEach(item => { |
| | | _customScript = _customScript.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | if (verify.queryType === 'statistics' && _dataresource) { |
| | | _search = '' |
| | | } |
| | | |
| | | // 数据源处理, 存在显示列时 |