2023-06-07

king

2023-06-07 fd60067ea3673be3eeb1314632d1389f503a3285

2023-06-07

 src/menu/components/chart/antv-X6/index.jsx

@@ -20,6 +20,7 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const NodeUpdate = asyncIconComponent(() => import('./nodeupdate'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

@@ -664,6 +665,26 @@
    // let nodes = this.mkGraph.toJSON()
  }

  changeProps = (value, key) => {
    const { node } = this.state

    if (node.shape === 'edge') {

    } else {
      if (key === 'title') {
        this.selectNode.attr('text/text', value)
      } else if (key === 'fill') {
        this.selectNode.attr('body/fill', value)
      } else if (key === 'stroke') {
        this.selectNode.attr('body/stroke', value)
      } else if (key === 'fontSize') {
        this.selectNode.attr('text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('text/fill', value)
      }
    }
  }

  updateComponent = (card) => {
    card.width = card.plot.width
    card.name = card.plot.name
@@ -760,7 +781,7 @@
              <DoubleLeftOutlined />
            </div>
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <div></div>}
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
          </div>
        </div>
        <div className="component-name">

 src/menu/components/chart/antv-X6/nodeupdate/index.jsx

New file
@@ -0,0 +1,243 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, InputNumber } from 'antd'

import ColorSketch from '@/mob/colorsketch'

import './index.scss'

class NodeUpdate extends Component {
  static propTpyes = {
    node: PropTypes.object
  }

  state = {
    formlist: null
  }

  UNSAFE_componentWillMount () {
    this.setState({
      formlist: this.getFormList(this.props.node)
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
      this.setState({
        formlist: null
      }, () => {
        this.setState({
          formlist: this.getFormList(nextProps.node)
        })
      })
    }
  }

  getFormList = (node) => {
    let roleList = sessionStorage.getItem('sysRoles')
    if (roleList) {
      try {
        roleList = JSON.parse(roleList)
      } catch (e) {
        roleList = []
      }
    } else {
      roleList = []
    }

    let title = ''
    if (node.attrs && node.attrs.text) {
      title = node.attrs.text.text || ''
    }

    let fontSize = ''
    if (node.attrs && node.attrs.text) {
      fontSize = node.attrs.text.fontSize || 12
    }

    let fontFill = ''
    if (node.attrs && node.attrs.text) {
      fontFill = node.attrs.text.fill || '#262626'
    }

    let stroke = ''

    if (node.attrs && node.attrs.body) {
      stroke = node.attrs.body.stroke || ''
    }
    let fill = ''

    if (node.attrs && node.attrs.body) {
      fill = node.attrs.body.fill || ''
    }

    if (node.shape === 'edge') {
      return [
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    } else {
      return [
        {
          type: 'title',
          label: '内容'
        },
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'title',
          label: '样式'
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'title',
          label: '标签样式'
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    }
  }

  change = (value, key) => {
    if (key === 'title') {
      
    } else if (key === 'fill') {

    } else if (key === 'stroke') {

    } else if (key === 'fontSize') {
      if (typeof(value) !== 'number' || value < 0) {
        return
      }
    } else if (key === 'fontFill') {
 
    }

    this.props.onChange(value, key)
  }

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

    if (!formlist) return

    formlist.forEach((item, index) => {
      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
            <span className="split-line">{item.label}</span>
          </Col>
        )
      } else if (item.type === 'text') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <Input defaultValue={item.initval} placeholder="" autoComplete="off" onChange={(e) => this.change(e.target.value, item.field)} />
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <InputNumber defaultValue={item.initval} precision={0} min={0} onChange={(value) => this.change(value, item.field)} />
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <Select
                showSearch
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                onChange={(value) => {this.change(value, item.field)}}
              >
                {item.options.map(option =>
                  <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                    {option.text}
                  </Select.Option>
                )}
              </Select>
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <ColorSketch defaultValue={item.initval} onChange={(value) => this.change(value, item.field)}/>
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  render() {
    return (
      <Form className="node-edit-form">
        <Row>{this.getFields()}</Row>
      </Form>
    )
  }
}

export default NodeUpdate

 src/menu/components/chart/antv-X6/nodeupdate/index.scss

New file
@@ -0,0 +1,64 @@
.node-edit-form {
  padding-top: 10px;
  .split-line {
    display: block;
    border-bottom: 1px solid #d9d9d9;
    margin: 5px 12px 10px;
    padding-bottom: 2px;
    font-size: 13px;
  }
  .ant-form-item {
    display: flex;
    margin-bottom: 10px;

    .ant-form-item-label {
      width: 40px;
      line-height: 24px;
      label {
        color: rgba(0,0,0,0.45);
        font-size: 13px;
      }
      label::after {
        display: none;
      }
    }
    .ant-form-item-control-wrapper {
      padding: 0 8px;
      flex: 1;
      .ant-form-item-control {
        line-height: 24px;
      }
      .ant-input {
        height: 24px;
        padding: 0px 4px;
        font-size: 13px;
        line-height: 24px;
        border-radius: 0px;
      }
      .ant-input-number {
        height: 24px;
        border-radius: 0px;
        .ant-input-number-input {
          height: 22px;
          padding: 2px 4px;
          font-size: 13px;
        }
      }

      .color-sketch-block {
        height: 22px;
        margin-top: 2px;
        .color-sketch-block-box {
          width: 22px;
          height: 22px;
        }
        .color-sketch-value {
          display: none;
        }
        .color-sketch-block-inner {
          border-radius: 0px;
        }
      }
    }
  }
}

 src/templates/zshare/menuform/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select } from 'antd'
import { formRule } from '@/utils/option.js'
import './index.scss'
// import './index.scss'

class MainSearch extends Component {
  static propTpyes = {