From 0472ec32cadb4f9bca6dbab82ac33a42e76f37ed Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 28 六月 2022 16:24:15 +0800
Subject: [PATCH] 菜单栏&时间轴
---
src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx | 34 +++++
src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx | 20 ++
src/menu/components/timeline/normal-timeline/options.jsx | 39 +++++-
src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx | 2
src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx | 2
src/templates/zshare/editTable/index.jsx | 5
src/assets/css/viewstyle.scss | 5
src/tabviews/custom/components/timeline/normal-timeline/index.scss | 54 ++++++++
src/menu/components/timeline/normal-timeline/index.jsx | 8 +
src/menu/stylecontroller/index.jsx | 34 +++++
src/mob/components/navbar/normal-navbar/menus/drags/card.jsx | 2
src/mob/components/navbar/normal-navbar/index.scss | 18 +++
src/tabviews/custom/components/timeline/normal-timeline/index.jsx | 61 ++++++++++
src/components/normalform/modalform/mkTable/index.jsx | 5
src/menu/bgcontroller/index.jsx | 34 +++++
15 files changed, 300 insertions(+), 23 deletions(-)
diff --git a/src/assets/css/viewstyle.scss b/src/assets/css/viewstyle.scss
index 6c1f120..dce11d4 100644
--- a/src/assets/css/viewstyle.scss
+++ b/src/assets/css/viewstyle.scss
@@ -426,6 +426,11 @@
border-color: $color2;
}
}
+ .mk-time-line-wrap.system {
+ .mk-timeline-item-tail {
+ border-color: $color2;
+ }
+ }
.custom-tab-form-box .mk-normal-form-title.mkbtn {
.form-title {
color: $color6;
diff --git a/src/components/normalform/modalform/mkTable/index.jsx b/src/components/normalform/modalform/mkTable/index.jsx
index 6cb9b90..ae23f22 100644
--- a/src/components/normalform/modalform/mkTable/index.jsx
+++ b/src/components/normalform/modalform/mkTable/index.jsx
@@ -75,14 +75,14 @@
class EditableCell extends Component {
getInput = (form) => {
- const { inputType, options, min, max, unlimit } = this.props
+ const { inputType, options, min, max, unlimit, allowClear } = this.props
if (inputType === 'number' && unlimit) {
return <InputNumber onPressEnter={() => this.getValue(form)} />
} else if (inputType === 'number') {
return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} />
} else if (inputType === 'color') {
- return <ColorSketch />
+ return <ColorSketch allowClear={allowClear}/>
} else if (inputType === 'icon') {
return <MkEditIcon allowClear/>
} else if (inputType === 'select') {
@@ -420,6 +420,7 @@
unlimit: col.unlimit,
required: col.required !== false ? true : false,
title: col.title,
+ allowClear: col.allowClear === true,
editing: this.isEditing(record),
onSave: this.execSave,
}),
diff --git a/src/menu/bgcontroller/index.jsx b/src/menu/bgcontroller/index.jsx
index 9a0f560..ba87f28 100644
--- a/src/menu/bgcontroller/index.jsx
+++ b/src/menu/bgcontroller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Form, Select } from 'antd'
+import { Form, Select, Input } from 'antd'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
@@ -17,6 +17,7 @@
}
state = {
+ background: '',
backgroundColor: '',
backgroundImage: '',
backgroundSize: '',
@@ -34,6 +35,7 @@
}
this.setState({
+ background: config.style.background || '',
backgroundColor: config.style.backgroundColor,
backgroundImage: bgImg,
backgroundSize: config.style.backgroundSize || '100%',
@@ -96,8 +98,33 @@
this.props.updateConfig(config)
}
+ changeBackground = (val) => {
+ this.setState({
+ background: val,
+ })
+
+ if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
+ let config = fromJS(this.props.config).toJS()
+ config.style.background = val
+
+ delete config.style.backgroundColor
+ delete config.style.backgroundImage
+
+ if (!val) {
+ delete config.style.background
+ }
+
+ this.setState({
+ backgroundImage: '',
+ backgroundColor: ''
+ })
+
+ this.props.updateConfig(config)
+ }
+ }
+
render () {
- const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat } = this.state
+ const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, background } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -115,6 +142,9 @@
<Form.Item className="color-control" colon={false} label="棰滆壊">
<ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
</Form.Item>
+ {window.develop === true ? <Form.Item colon={false} label="棰滆壊">
+ <Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
+ </Form.Item> : null}
<Form.Item colon={false} label="鍥剧墖">
<SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
</Form.Item>
diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx
index e39387d..1b1c12f 100644
--- a/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx
+++ b/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx
@@ -53,7 +53,7 @@
title="鑺傜偣缁�"
wrapClassName="nodes-field-modal"
visible={visible}
- width={900}
+ width={950}
maskClosable={false}
onOk={this.submit}
onCancel={() => { this.setState({ visible: false })}}
diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx
index 478ed52..8b50c97 100644
--- a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx
+++ b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx
@@ -61,7 +61,7 @@
<Col span={8}>
<Form.Item label="棰滆壊">
{getFieldDecorator('color', {
- initialValue: '',
+ initialValue: '#e8e8e8',
rules: [
{
required: true,
diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx
index 13230b0..31a0452 100644
--- a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx
+++ b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx
@@ -27,7 +27,7 @@
editable: true,
unique: true,
required: false,
- width: '35%'
+ width: '25%'
},
{
title: '棰滆壊',
@@ -35,7 +35,8 @@
inputType: 'color',
editable: true,
required: true,
- width: '35%'
+ width: '25%',
+ render: (text, record) => <span style={{display: 'inline-block', width: '40px', height: '25px', background: text}}></span>
},
{
title: '鍥炬爣',
@@ -43,9 +44,19 @@
inputType: 'icon',
editable: true,
required: false,
- width: '35%',
+ width: '25%',
render: (text, record) => record.icon ? <MkIcon type={record.icon}/> : ''
- }
+ },
+ {
+ title: '杩炴帴绾�',
+ dataIndex: 'linecolor',
+ inputType: 'color',
+ editable: true,
+ required: false,
+ allowClear: true,
+ width: '25%',
+ render: (text, record) => text ? <span style={{display: 'inline-block', width: '40px', height: '25px', background: text}}></span> : null
+ },
]
}
@@ -77,6 +88,7 @@
return (
<div style={{minHeight: '250px'}}>
<ColumnForm menus={menus} columnChange={this.columnChange}/>
+ <p style={{position: 'absolute', fontSize: '12px', transform: 'translate(0px, -20px)'}}>杩炴帴绾垮湪妯悜鏃堕棿杞翠腑鏈夋晥</p>
<EditTable actions={['edit', 'move', 'copy', 'del']} type={'timenodes'} data={menus} columns={columns} onChange={this.changeColumns}/>
</div>
)
diff --git a/src/menu/components/timeline/normal-timeline/index.jsx b/src/menu/components/timeline/normal-timeline/index.jsx
index 9d8b2d3..1dcb7f4 100644
--- a/src/menu/components/timeline/normal-timeline/index.jsx
+++ b/src/menu/components/timeline/normal-timeline/index.jsx
@@ -48,7 +48,7 @@
name: card.name,
subtype: card.subtype,
setting: { interType: 'system' },
- wrap: { title: '', name: card.name, width: card.width || 24, color: '#1890ff', mode: 'left' },
+ wrap: { title: '', name: card.name, direction: 'vertical', width: card.width || 24, color: '#1890ff', mode: 'left' },
style: { marginLeft: '0px', marginRight: '0px', marginTop: '0px', marginBottom: '0px' },
subcards: [{
uuid: Utils.getuuid(),
@@ -200,6 +200,12 @@
updateWrap = (res) => {
delete res.quick
+
+ if (res.hmode) {
+ res.mode = res.hmode
+ delete res.hmode
+ }
+
this.updateComponent({...this.state.card, wrap: res})
}
diff --git a/src/menu/components/timeline/normal-timeline/options.jsx b/src/menu/components/timeline/normal-timeline/options.jsx
index 61cc83d..fac7a50 100644
--- a/src/menu/components/timeline/normal-timeline/options.jsx
+++ b/src/menu/components/timeline/normal-timeline/options.jsx
@@ -44,9 +44,25 @@
},
{
type: 'radio',
+ field: 'direction',
+ label: '杞寸嚎鏂瑰悜',
+ initval: wrap.direction || 'vertical',
+ required: false,
+ options: [
+ {value: 'vertical', label: '绾靛悜'},
+ {value: 'horizontal', label: '妯悜'},
+ ],
+ controlFields: [
+ {field: 'mode', values: ['vertical']},
+ {field: 'hmode', values: ['horizontal']},
+ {field: 'label', values: ['vertical']},
+ ]
+ },
+ {
+ type: 'radio',
field: 'mode',
label: '杞寸嚎浣嶇疆',
- initval: wrap.mode || 'left',
+ initval: ['left', 'alternate', 'right'].includes(wrap.mode) ? wrap.mode : 'left',
required: false,
options: [
{value: 'left', label: '宸︿晶'},
@@ -56,15 +72,26 @@
},
{
type: 'radio',
- field: 'reverse',
- label: '鎺掑簭',
- initval: wrap.reverse || 'false',
+ field: 'hmode',
+ label: '杞寸嚎浣嶇疆',
+ initval: ['up', 'down'].includes(wrap.mode) ? wrap.mode : 'up',
required: false,
options: [
- {value: 'false', label: '姝ｅ簭'},
- {value: 'true', label: '鍊掑簭'},
+ {value: 'up', label: '涓婁晶'},
+ {value: 'down', label: '涓嬩晶'}
]
},
+ // {
+ // type: 'radio',
+ // field: 'reverse',
+ // label: '鎺掑簭',
+ // initval: wrap.reverse || 'false',
+ // required: false,
+ // options: [
+ // {value: 'false', label: '姝ｅ簭'},
+ // {value: 'true', label: '鍊掑簭'},
+ // ]
+ // },
{
type: 'color',
field: 'color',
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 1cd4572..a98c24b 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
+import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button } from 'antd'
import {
ColumnHeightOutlined,
FontSizeOutlined,
@@ -259,6 +259,29 @@
*/
changeBackgroundColor = (val) => {
this.updateStyle({backgroundColor: val})
+ }
+
+ changeBackground = (val) => {
+ const { comIds, card } = this.state
+
+ let _style = { ...card }
+
+ _style.background = val
+
+ delete _style.backgroundColor
+ delete _style.backgroundImage
+
+ if (!val) {
+ delete _style.background
+ }
+
+ this.setState({
+ card: _style,
+ })
+
+ if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
+ MKEmitter.emit('submitStyle', comIds, _style)
+ }
}
/**
@@ -578,6 +601,15 @@
<ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
+ {window.develop === true ? <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
+ </Form.Item>
+ </Col> : null}
{!options.includes('backgroundColor') ? <Col span={24}>
<Form.Item
colon={false}
diff --git a/src/mob/components/navbar/normal-navbar/index.scss b/src/mob/components/navbar/normal-navbar/index.scss
index 592454e..6414525 100644
--- a/src/mob/components/navbar/normal-navbar/index.scss
+++ b/src/mob/components/navbar/normal-navbar/index.scss
@@ -41,6 +41,24 @@
margin-bottom: 0;
}
}
+ .am-tab-bar-tab.tab-zoomIn {
+ .am-tab-bar-tab-icon {
+ padding: 10px;
+ display: inline-block;
+ background: #1890ff;
+ color: #ffffff;
+ border-radius: 40px;
+ width: 42px;
+ height: 42px;
+ font-size: 15px;
+ transform: translate(0px, -25px);
+ }
+ .am-tab-bar-tab-title {
+ font-size: 1.2em;
+ color: #1890ff;
+ transform: translate(0px, -22px);
+ }
+ }
}
.anticon-tool {
diff --git a/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx b/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx
index fe9dd41..98cdcef 100644
--- a/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx
+++ b/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx
@@ -50,7 +50,7 @@
<CloseOutlined className="close" title="鍒犻櫎" onClick={() => delCard(id)} />
</div>
} trigger="hover">
- <div ref={node => drag(drop(node))} className="am-tab-bar-tab" style={{opacity: isDragging ? 0 : 1}} onDoubleClick={doubleClickCard}>
+ <div ref={node => drag(drop(node))} className={'am-tab-bar-tab tab-' + (card.class || 'default')} style={{opacity: isDragging ? 0 : 1}} onDoubleClick={doubleClickCard}>
{card.icon ? <div className="am-tab-bar-tab-icon">
<span className="am-badge am-tab-bar-tab-badge tab-badge">
<MkIcon type={card.icon} />
diff --git a/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx b/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx
index 8efdcec..2ffce2b 100644
--- a/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx
+++ b/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx
@@ -168,6 +168,23 @@
)}
</Form.Item>
</Col>
+ {property === 'menu' || property === 'linkmenu' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鏇挎崲褰撳墠椤甸潰鎴栨墦寮�鏂伴〉闈紝鍦℉5鎴栧皬绋嬪簭涓湁鏁堛��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鎵撳紑鏂瑰紡
+ </Tooltip>
+ }>
+ {getFieldDecorator('open', {
+ initialValue: menu.open || 'self'
+ })(
+ <Radio.Group>
+ <Radio value="self">鏍囩椤�</Radio>
+ <Radio value="blank">鏂伴〉闈�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
{property === 'link' ? <Col span={24}>
<Form.Item label="閾炬帴鍦板潃" className="textarea">
{getFieldDecorator('link', {
@@ -244,6 +261,23 @@
)}
</Form.Item>
</Col> : null}
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鍦℉5鎴栧皬绋嬪簭涓湁鏁堛��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鑿滃崟鏍峰紡
+ </Tooltip>
+ }>
+ {getFieldDecorator('class', {
+ initialValue: menu.class || 'default'
+ })(
+ <Radio.Group>
+ <Radio value="default">榛樿</Radio>
+ <Radio value="zoomIn">鏀惧ぇ</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
</Row>
</Form>
)
diff --git a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx
index 2c0858a..eaf2074 100644
--- a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx
+++ b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx
@@ -304,6 +304,62 @@
</Timeline.Item>)
}
+ getMknodes = (data) => {
+ const { config, card } = this.state
+
+ let color = config.wrap.color
+ let dot = ''
+ let linebg = {}
+ if (config.wrap.node && card.nodes && card.nodes.length > 0) {
+ let sign = data[config.wrap.node]
+ card.nodes.some(item => {
+ if (sign === item.sign) {
+ color = item.color
+
+ if (item.icon) {
+ dot = <MkIcon type={item.icon}/>
+ }
+
+ if (item.linecolor) {
+ linebg = {borderColor: item.linecolor}
+ }
+ return true
+ }
+ return false
+ })
+ }
+
+ if (config.wrap.mode === 'down') {
+ return (<div className="mk-time-line-item" key={data.$Index}>
+ <div className="mk-timeline-item-content">
+ <div className="card-item-box" style={card.style}>
+ <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/>
+ </div>
+ </div>
+ <div className="mk-timeline-item-head">
+ <div className="mk-timeline-item-tail" style={linebg}></div>
+ <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color}}>
+ {dot}
+ </div>
+ </div>
+ </div>)
+ } else {
+ return (<div className="mk-time-line-item" key={data.$Index}>
+ <div className="mk-timeline-item-head">
+ <div className="mk-timeline-item-tail" style={linebg}></div>
+ <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color}}>
+ {dot}
+ </div>
+ </div>
+ <div className="mk-timeline-item-content">
+ <div className="card-item-box" style={card.style}>
+ <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/>
+ </div>
+ </div>
+ </div>)
+ }
+ }
+
render() {
const { config, loading, data } = this.state
@@ -316,9 +372,12 @@
</div> : null
}
<NormalHeader config={config} />
- {data && data.length > 0 ? <Timeline mode={config.wrap.mode} reverse={config.wrap.reverse === 'true'} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}>
+ {config.wrap.direction !== 'horizontal' && data && data.length > 0 ? <Timeline mode={config.wrap.mode} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}>
{data.map(item => this.getnodes(item))}
</Timeline> : null}
+ {config.wrap.direction === 'horizontal' && data && data.length > 0 ? <div className={'mk-time-line-wrap card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}>
+ {data.map(item => this.getMknodes(item))}
+ </div> : null}
{data && data.length === 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}>
<Empty description={false}/>
</div> : null}
diff --git a/src/tabviews/custom/components/timeline/normal-timeline/index.scss b/src/tabviews/custom/components/timeline/normal-timeline/index.scss
index 13333b6..0f867bf 100644
--- a/src/tabviews/custom/components/timeline/normal-timeline/index.scss
+++ b/src/tabviews/custom/components/timeline/normal-timeline/index.scss
@@ -41,7 +41,7 @@
.card-row-list {
overflow-y: auto;
- padding: 20px;
+ padding: 15px;
.card-item-box {
text-align: left;
overflow: hidden;
@@ -94,6 +94,58 @@
background: #ffffff;
}
}
+
+ .mk-time-line-wrap {
+ display: flex;
+ overflow-x: hidden;
+ .mk-time-line-item {
+ position: relative;
+ width: 5%;
+ flex: 1;
+ }
+ .mk-time-line-item:last-child {
+ .mk-timeline-item-tail {
+ display: none;
+ }
+ }
+ .mk-timeline-item-head {
+ position: relative;
+ height: 20px;
+ text-align: center;
+ .mk-dot {
+ position: absolute;
+ background: #e8e8e8;
+ padding: 5px;
+ display: inline-block;
+ border-radius: 20px;
+ z-index: 1;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ .anticon {
+ font-size: 14px;
+ color: #ffffff;
+ width: 16px;
+ height: 16px;
+ vertical-align: top;
+ }
+ }
+ .mk-dot-icon {
+ width: 24px;
+ height: 24px;
+ padding: 4px;
+ }
+ }
+ .mk-timeline-item-tail {
+ position: absolute;
+ top: 10px;
+ left: 0px;
+ width: 100%;
+ transform: translate(50%, -1px);
+ border-top: 2px solid #e8e8e8;
+ }
+ }
}
.normal-timeline-box::after {
diff --git a/src/templates/zshare/editTable/index.jsx b/src/templates/zshare/editTable/index.jsx
index a1091fc..0319a12 100644
--- a/src/templates/zshare/editTable/index.jsx
+++ b/src/templates/zshare/editTable/index.jsx
@@ -81,14 +81,14 @@
class EditableCell extends Component {
getInput = (form) => {
- const { inputType, options, min, max, unlimit } = this.props
+ const { inputType, options, min, max, unlimit, allowClear } = this.props
if (inputType === 'number' && unlimit) {
return <InputNumber onPressEnter={() => this.getValue(form)} />
} else if (inputType === 'number') {
return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} />
} else if (inputType === 'color') {
- return <ColorSketch />
+ return <ColorSketch allowClear={allowClear} />
} else if (inputType === 'icon') {
return <MkEditIcon allowClear/>
} else if (inputType === 'switch') {
@@ -582,6 +582,7 @@
max: col.max || 500,
unlimit: col.unlimit,
required: col.required !== false ? true : false,
+ allowClear: col.allowClear === true,
title: col.title,
editing: this.isEditing(record),
onSave: this.onSave,
--
Gitblit v1.8.0