2023-08-03

king

2023-08-03 f6adeb27e1c1ff7299bbf5079a5749cbcd7864de

2023-08-03

 src/tabviews/custom/components/chart/antv-X6/index.jsx

@@ -139,7 +139,7 @@
  {
    inherit: 'rect',
    width: 66,
    height: 36,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -169,7 +169,7 @@
  {
    inherit: 'polygon',
    width: 66,
    height: 36,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -199,7 +199,7 @@
  {
    inherit: 'polygon',
    width: 66,
    height: 36,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -226,8 +226,8 @@
  'mk-circle',
  {
    inherit: 'circle',
    width: 36,
    height: 36,
    width: 40,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -257,7 +257,7 @@
  {
    inherit: 'ellipse',
    width: 66,
    height: 36,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -286,8 +286,8 @@
  'mk-star',
  {
    inherit: 'polygon',
    width: 36,
    height: 36,
    width: 40,
    height: 40,
    points: '100,10 40,198 190,78 10,78 160,198',
    attrs: {
      body: {
@@ -319,7 +319,7 @@
  {
    inherit: 'text-block',
    width: 66,
    height: 36,
    height: 40,
    text: '文本域',
    attrs: {
      body: {
@@ -899,6 +899,7 @@
    const r1 = graph.createNode({
      shape: 'mk-rect',
      mknode: 'start',
      mkdata: {status: 0},
      attrs: {
        body: {
          rx: 20,
@@ -941,6 +942,20 @@
      }
    })
    const r4 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 0,
          ry: 0,
          fill: '#fff7e6',
          stroke: '#fa8c16'
        },
        text: {
          text: '节点'
        }
      }
    })
    const r5 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
@@ -953,7 +968,7 @@
        }
      }
    })
    const r5 = graph.createNode({
    const r6 = graph.createNode({
      shape: 'mk-paral',
      attrs: {
        body: {
@@ -966,7 +981,7 @@
        }
      }
    })
    const r6 = graph.createNode({
    const r7 = graph.createNode({
      shape: 'mk-circle',
      attrs: {
        body: {
@@ -979,7 +994,7 @@
      }
    })

    const r7 = graph.createNode({
    const r8 = graph.createNode({
      shape: 'mk-rect',
      mknode: 'end',
      attrs: {
@@ -996,7 +1011,7 @@
      }
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6, r7], 'group1')
    stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1')
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
@@ -1661,6 +1676,8 @@
        } else {
          this.selectNode.attr('line/strokeDasharray', 0)
        }
      } else if (key === 'mkdata') {
        this.selectNode.prop('mkdata', value)
      }
    } else if (node.shape === 'lane') {
      if (key === 'title') {
@@ -1796,12 +1813,12 @@
    const { plot, status } = this.state

    let _status = status === 10 ? 0 : 10
    let nodes = this.mkGraph.toJSON()
    
    if (plot.subtype === 'xflow' && _status === 10) {
      let nodes = this.mkGraph.toJSON()
      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,

 src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx

@@ -5,6 +5,7 @@
import { FormOutlined } from '@ant-design/icons'

import ColorSketch from '@/mob/colorsketch'
import NodeForm from './nodeform'
import './index.scss'

const { TextArea } = Input
@@ -17,12 +18,14 @@

  state = {
    formlist: null,
    mknode: null
    mknode: null,
    mkdata: null
  }

  UNSAFE_componentWillMount () {
    this.setState({
      mknode: null,
      mknode: this.props.node,
      mkdata: this.props.node.mkdata || '',
      formlist: this.getFormList(this.props.node)
    })
  }
@@ -30,10 +33,11 @@
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
      this.setState({
        mknode: null,
        formlist: null
      }, () => {
        this.setState({
          mknode: nextProps.node,
          mkdata: nextProps.node.mkdata || '',
          formlist: this.getFormList(nextProps.node)
        })
      })
@@ -133,8 +137,7 @@
        },
        {
          type: 'other',
          label: '自定义信息',
          initval: node
          label: '自定义信息'
        }
      ]
    } else if (node.shape === 'lane') {
@@ -359,8 +362,7 @@
        },
        {
          type: 'other',
          label: '自定义信息',
          initval: node
          label: '自定义信息'
        }
      ]
    }
@@ -383,11 +385,14 @@
  }

  confirm = () => {
    this.setState({visible: false})
    this.nodeRef.handleConfirm().then(res => {
      this.setState({visible: false, mkdata: res})
      this.props.onChange(res, 'mkdata')
    })
  }

  getFields() {
    const { formlist } = this.state
    const { formlist, mkdata, mknode } = this.state
    const fields = []

    if (!formlist) return
@@ -466,6 +471,13 @@
        fields.push(
          <Col span={24} key={index}>
            <span className="split-line">{item.label}：<FormOutlined onClick={() => {this.setState({visible: true})}}/></span>
            {mkdata ? <div className="mk-data">
              <div>状态：{mkdata.status}<span style={{float: 'right'}}>{mkdata.statusName}</span></div>
              {mknode.shape !== 'edge' ? <div>标记：{mkdata.sign || ''}</div> : null}
              {mkdata.roleId ? <div>角色：{mkdata.roleName || ''}</div> : null}
              {mkdata.depId ? <div>部门：{mkdata.depName || ''}</div> : null}
              <div>备注：{mkdata.remark || ''}</div>
            </div> : null}
          </Col>
        )
      }
@@ -474,7 +486,7 @@
  }

  render() {
    const { visible } = this.state
    const { visible, mkdata, mknode } = this.state

    return (
      <div className="node-edit-form-wrap">
@@ -491,7 +503,7 @@
          onCancel={() => this.setState({visible: false})}
          destroyOnClose
        >

          <NodeForm node={mknode} data={mkdata} rolelist={this.props.rolelist} handleSubmit={() => this.confirm()} wrappedComponentRef={(inst) => this.nodeRef = inst}/>
        </Modal>
      </div>
    )

 src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss

@@ -8,6 +8,13 @@
    padding-bottom: 2px;
    font-size: 13px;
  }
  .mk-data {
    font-size: 13px;
    padding: 0 12px;
    >div {
      padding-bottom: 2px;
    }
  }
  textarea.ant-input {
    padding: 0px 4px;
    border-radius: 0px;
@@ -100,4 +107,15 @@
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0);
}

.normal-node-form {
  >.ant-row >.ant-col-24 {
    .ant-form-item-label {
      width: 16%;
    }
    .ant-form-item-control-wrapper {
      width: 84%;
    }
  }
}

 src/tabviews/custom/components/chart/antv-X6/nodeupdate/nodeform.jsx

New file
@@ -0,0 +1,168 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Input, Radio, Tooltip, InputNumber } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

const { TextArea } = Input

class NodeForm extends Component {
  static propTpyes = {
    node: PropTypes.any,
    data: PropTypes.any,
    rolelist: PropTypes.array
  }

  state = {
    ctrlType: this.props.data.ctrlType || 'role'
  }

  handleConfirm = () => {
    const { rolelist } = this.props

    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.roleId) {
            values.roleName = ''
            rolelist.forEach(item => {
              if (item.RoleID === values.roleId) {
                values.roleName = item.RoleName
              }
            })
          }
          if (values.depId) {
            values.depName = ''
            rolelist.forEach(item => {
              if (item.RoleID === values.depId) {
                values.depName = item.RoleName
              }
            })
          }
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  }

  render() {
    const { node, rolelist } = this.props
    const { getFieldDecorator } = this.props.form
    const { ctrlType } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    let data = this.props.data || {}

    return (
      <Form {...formItemLayout} className="normal-node-form">
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="状态值">
              {getFieldDecorator('status', {
                initialValue: data.status || 0,
                rules: [
                  {
                    required: true,
                    message: '请输入状态值!'
                  }
                ]
              })(
                <InputNumber precision={0}/>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="状态名">
              {getFieldDecorator('statusName', {
                initialValue: data.statusName || ''
              })(
                <Input placeholder="" autoComplete="off"/>
              )}
            </Form.Item>
          </Col>
          {node.shape !== 'edge' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="标记将作为节点ID">
                <QuestionCircleOutlined className="mk-form-tip" />
                标记
              </Tooltip>
            }>
              {getFieldDecorator('sign', {
                initialValue: data.sign || ''
              })(
                <Input placeholder="" autoComplete="off"/>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="类型">
              {getFieldDecorator('ctrlType', {
                initialValue: data.ctrlType || 'role'
              })(
                <Radio.Group onChange={(e) => this.setState({ctrlType: e.target.value})}>
                  <Radio value="role">角色</Radio>
                  <Radio value="department">部门</Radio>
                  <Radio value="none">无</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {ctrlType === 'role' ? <Col span={12}>
            <Form.Item label="角色">
              {getFieldDecorator('roleId', {
                initialValue: data.roleId || '',
                rules: [
                  {
                    required: true,
                    message: '请选择角色!'
                  }
                ]
              })(
                <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                  {rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {ctrlType === 'department' ? <Col span={12}>
            <Form.Item label="部门">
              {getFieldDecorator('depId', {
                initialValue: data.depId || '',
                rules: [
                  {
                    required: true,
                    message: '请选择部门!'
                  }
                ]
              })(
                <Select showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                  {rolelist.map(item => (<Select.Option key={item.RoleID} value={item.RoleID}>{item.RoleName}</Select.Option>))}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label="备注">
              {getFieldDecorator('remark', {
                initialValue: data.remark || ''
              })(
                <TextArea rows={2}/>
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Form.create()(NodeForm)