From fd60067ea3673be3eeb1314632d1389f503a3285 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 07 六月 2023 14:18:34 +0800
Subject: [PATCH] 2023-06-07
---
src/menu/components/chart/antv-X6/nodeupdate/index.scss | 64 ++++++++++
src/templates/zshare/menuform/index.jsx | 2
src/menu/components/chart/antv-X6/nodeupdate/index.jsx | 243 ++++++++++++++++++++++++++++++++++++++++
src/menu/components/chart/antv-X6/index.jsx | 23 +++
4 files changed, 330 insertions(+), 2 deletions(-)
diff --git a/src/menu/components/chart/antv-X6/index.jsx b/src/menu/components/chart/antv-X6/index.jsx
index c6c84cd..5ace0da 100644
--- a/src/menu/components/chart/antv-X6/index.jsx
+++ b/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">
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.jsx b/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
new file mode 100644
index 0000000..5371bcb
--- /dev/null
+++ b/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
@@ -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
\ No newline at end of file
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.scss b/src/menu/components/chart/antv-X6/nodeupdate/index.scss
new file mode 100644
index 0000000..79e059d
--- /dev/null
+++ b/src/menu/components/chart/antv-X6/nodeupdate/index.scss
@@ -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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/templates/zshare/menuform/index.jsx b/src/templates/zshare/menuform/index.jsx
index b3ce1f3..f70d08e 100644
--- a/src/templates/zshare/menuform/index.jsx
+++ b/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 = {
--
Gitblit v1.8.0