From 5d8706040a328c007734ad4916b034d71696eaab Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 24 四月 2024 15:09:14 +0800
Subject: [PATCH] 2024-04-24
---
src/menu/components/tree/antd-tree/options.jsx | 25 ++++++
src/menu/components/tree/antd-tree/index.jsx | 7 +
src/menu/components/tree/antd-tree/index.scss | 10 ++
src/tabviews/custom/components/tree/antd-tree/index.jsx | 81 +++++++++++++------
src/tabviews/custom/components/tree/antd-tree/index.scss | 53 +++++++++++--
src/tabviews/zshare/mutilform/mkNumberInput/index.jsx | 10 ++
6 files changed, 149 insertions(+), 37 deletions(-)
diff --git a/src/menu/components/tree/antd-tree/index.jsx b/src/menu/components/tree/antd-tree/index.jsx
index 6ae5917..8402c6b 100644
--- a/src/menu/components/tree/antd-tree/index.jsx
+++ b/src/menu/components/tree/antd-tree/index.jsx
@@ -181,9 +181,9 @@
}
getWrapForms = () => {
- const { wrap, columns } = this.state.card
+ const { wrap, columns, action } = this.state.card
- return getWrapForm(wrap, columns)
+ return getWrapForm(wrap, columns, action.findIndex(item => item.Ot === 'requiredSgl') > -1)
}
updateWrap = (res) => {
@@ -206,6 +206,9 @@
render() {
const { card } = this.state
let _style = resetStyle(card.style)
+ if (card.wrap.lineHeight) {
+ _style['--mk-tree-line-height'] = card.wrap.lineHeight + 'px'
+ }
return (
<div className="menu-tree-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
diff --git a/src/menu/components/tree/antd-tree/index.scss b/src/menu/components/tree/antd-tree/index.scss
index 20df956..37f6cfb 100644
--- a/src/menu/components/tree/antd-tree/index.scss
+++ b/src/menu/components/tree/antd-tree/index.scss
@@ -7,6 +7,7 @@
background-size: cover;
min-height: 100px;
overflow-y: auto;
+ --mk-tree-line-height: 24px;
.anticon-tool {
position: absolute;
@@ -28,6 +29,15 @@
.model-menu-action-list:not(.length0) {
margin: 10px 0px;
}
+ .model-menu-action-list {
+ .ant-btn {
+ border-width: 0px;
+ }
+ }
+ .ant-tree li .ant-tree-node-content-wrapper, .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
+ height: var(--mk-tree-line-height);
+ line-height: var(--mk-tree-line-height);
+ }
}
.menu-tree-box::after {
display: block;
diff --git a/src/menu/components/tree/antd-tree/options.jsx b/src/menu/components/tree/antd-tree/options.jsx
index d8b6a7e..54c8c0d 100644
--- a/src/menu/components/tree/antd-tree/options.jsx
+++ b/src/menu/components/tree/antd-tree/options.jsx
@@ -1,7 +1,7 @@
/**
* @description Wrap琛ㄥ崟閰嶇疆淇℃伅
*/
-export default function (wrap, columns = []) {
+export default function (wrap, columns = [], hasLineAction) {
let roleList = sessionStorage.getItem('sysRoles')
let appType = sessionStorage.getItem('appType')
let ispop = sessionStorage.getItem('editMenuType') === 'popview'
@@ -79,6 +79,16 @@
required: true
},
{
+ type: 'number',
+ field: 'lineHeight',
+ label: '琛岄珮',
+ initval: wrap.lineHeight || 24,
+ min: 24,
+ max: 200,
+ precision: 0,
+ required: true
+ },
+ {
type: 'radio',
field: 'showIcon',
label: '鍥炬爣',
@@ -124,6 +134,19 @@
},
{
type: 'radio',
+ field: 'actShow',
+ label: '鎸夐挳鏄剧ず',
+ initval: wrap.actShow || 'dropdown',
+ tooltip: '閫夋嫨鍗曡鎸夐挳鐨勬樉绀烘柟寮忋��',
+ required: false,
+ forbid: !hasLineAction,
+ options: [
+ {value: 'dropdown', label: '涓嬫媺'},
+ {value: 'line', label: '琛屽唴'},
+ ]
+ },
+ {
+ type: 'radio',
field: 'permission',
label: '鏉冮檺楠岃瘉',
initval: wrap.permission || 'false',
diff --git a/src/tabviews/custom/components/tree/antd-tree/index.jsx b/src/tabviews/custom/components/tree/antd-tree/index.jsx
index 361b59a..e218c48 100644
--- a/src/tabviews/custom/components/tree/antd-tree/index.jsx
+++ b/src/tabviews/custom/components/tree/antd-tree/index.jsx
@@ -31,6 +31,7 @@
treeNodes: null, // 鍒楄〃鏁版嵁闆�
expandedKeys: [], // 灞曞紑鐨勬爲鑺傜偣
selectedKeys: [], // 閫変腑鐨勬爲鑺傜偣
+ lineActions: [],
selected: false // 閫変腑棣栬
}
@@ -71,13 +72,28 @@
}
}
+ let lineActions = []
+ _config.action = _config.action || []
+ _config.action = _config.action.filter(item => {
+ if (item.Ot === 'requiredSgl') {
+ lineActions.push(item)
+ return false
+ }
+ return true
+ })
+
_config.wrap.contentHeight = config.wrap.title || config.wrap.searchable === 'true' ? 'calc(100% - 45px)' : '100%'
+
+ if (_config.wrap.lineHeight) {
+ _config.style['--mk-tree-line-height'] = _config.wrap.lineHeight + 'px'
+ }
this.setState({
selected: _config.wrap.selected === 'true',
config: _config,
data: _data,
- BID: BID || ''
+ BID: BID || '',
+ lineActions
})
}
@@ -505,30 +521,45 @@
})
}
- renderActionTreeNodes = (nodes) => {
+ renderActionTreeNodes = (nodes, actShow) => {
return nodes.map(item => {
- let title = <>
- {item.$title}
- <Dropdown overlay={
- <div className="mk-tree-dropdown-wrap" onClick={(e) => e.stopPropagation()}>
- <MainAction
- BID={this.state.BID}
- BData={this.state.BData}
- setting={this.state.config.setting}
- actions={this.state.config.action}
- columns={this.state.config.columns}
- selectedData={[{...item, children: ''}]}
- />
- </div>
- } placement="bottomCenter" trigger={['hover']}>
- <MoreOutlined onClick={(e) => e.stopPropagation()}/>
- </Dropdown>
- </>
+ let title = null
+ if (actShow === 'line') {
+ title = <>
+ {item.$title}
+ <MainAction
+ BID={this.state.BID}
+ BData={this.state.BData}
+ setting={this.state.config.setting}
+ actions={this.state.lineActions}
+ columns={this.state.config.columns}
+ selectedData={[{...item, children: ''}]}
+ />
+ </>
+ } else {
+ title = <>
+ {item.$title}
+ <Dropdown overlay={
+ <div className="mk-tree-dropdown-wrap" onClick={(e) => e.stopPropagation()}>
+ <MainAction
+ BID={this.state.BID}
+ BData={this.state.BData}
+ setting={this.state.config.setting}
+ actions={this.state.lineActions}
+ columns={this.state.config.columns}
+ selectedData={[{...item, children: ''}]}
+ />
+ </div>
+ } placement="bottomCenter" trigger={['hover']}>
+ <MoreOutlined onClick={(e) => e.stopPropagation()}/>
+ </Dropdown>
+ </>
+ }
if (item.children) {
return (
<TreeNode icon={<span><FolderOpenOutlined /><FolderOutlined /></span>} title={title} key={item.$key} dataRef={item}>
- {this.renderActionTreeNodes(item.children)}
+ {this.renderActionTreeNodes(item.children, actShow)}
</TreeNode>
)
}
@@ -591,9 +622,7 @@
}
render() {
- const { BID, BData, config, loading, treeNodes, expandedKeys, selectedKeys } = this.state
-
- let extra = config.action && config.action.length > 0
+ const { BID, BData, config, loading, treeNodes, expandedKeys, selectedKeys, lineActions } = this.state
return (
<div className="custom-tree-box" id={'anchor' + config.uuid} style={config.style}>
@@ -607,7 +636,7 @@
<span className={'title ' + (config.wrap.searchable !== 'true' ? 'search-unable' : '')}>{config.wrap.title}</span>
{config.wrap.searchable === 'true' ? <Search allowClear onSearch={this.treeFilter} /> : null}
</div> : null}
- {extra ? <MainAction
+ {config.action.length ? <MainAction
BID={BID}
setting={config.setting}
actions={config.action}
@@ -621,12 +650,12 @@
onSelect={this.selectTreeNode}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
- onRightClick={!extra ? this.changeExpandedAllKeys : null}
+ onRightClick={!lineActions.length ? this.changeExpandedAllKeys : null}
onExpand={this.changeExpandedKeys}
showIcon={config.wrap.showIcon === 'true'}
showLine={config.wrap.showLine === 'true'}
>
- {!extra ? this.renderTreeNodes(treeNodes) : this.renderActionTreeNodes(treeNodes)}
+ {!lineActions.length ? this.renderTreeNodes(treeNodes) : this.renderActionTreeNodes(treeNodes, config.wrap.actShow)}
</Tree>
</div> : null}
{treeNodes && treeNodes.length === 0 ? <Empty description={false}/> : null}
diff --git a/src/tabviews/custom/components/tree/antd-tree/index.scss b/src/tabviews/custom/components/tree/antd-tree/index.scss
index eb5df34..d3b8fb0 100644
--- a/src/tabviews/custom/components/tree/antd-tree/index.scss
+++ b/src/tabviews/custom/components/tree/antd-tree/index.scss
@@ -5,6 +5,7 @@
background-repeat: no-repeat;
background-size: cover;
min-height: 50px;
+ --mk-tree-line-height: 24px;
.tree-header {
position: relative;
@@ -44,6 +45,39 @@
}
}
}
+ .ant-tree-title {
+ .button-list.toolbar-button {
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ padding: 0px;
+ min-height: 24px;
+ height: var(--mk-tree-line-height);
+
+ button {
+ min-width: 20px;
+ margin-bottom: 0px !important;
+ min-height: 24px;
+ border-width: 0px;
+ vertical-align: middle;
+ }
+ }
+ }
+ .ant-tree-node-content-wrapper {
+ .button-list.toolbar-button {
+ opacity: 0;
+ transition: all 0.3s;
+ }
+ }
+ .ant-tree-node-content-wrapper:hover {
+ .button-list.toolbar-button {
+ opacity: 1;
+ }
+ }
+ .ant-tree li .ant-tree-node-content-wrapper, .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
+ height: var(--mk-tree-line-height);
+ line-height: var(--mk-tree-line-height);
+ }
.tree-box {
overflow: auto;
padding-bottom: 10px;
@@ -61,6 +95,8 @@
right: 0px;
padding: 5px 10px;
color: var(--mk-sys-color);
+ height: var(--mk-tree-line-height);
+ line-height: var(--mk-tree-line-height);
}
}
}
@@ -117,21 +153,22 @@
.mk-tree-dropdown-wrap {
box-shadow: 0 0 2px #bcbcbc;
background: #ffffff;
- min-width: 85px;
+ min-width: 100px;
.button-list.toolbar-button {
padding: 0px;
+ min-height: 36px;
button {
display: block;
margin: 0!important;
width: 100%;
border-radius: 0px;
- padding-left: 15px!important;
- .anticon {
- display: none;
- }
- .anticon + span {
- margin-left: 0px;
- }
+ border: 0px !important;
+ color: rgba(0, 0, 0, 0.85)!important;
+ background: transparent !important;
+ min-height: 36px;
+ }
+ button:not(:last-child) {
+ border-bottom: 1px solid #d8d8d8 !important;
}
}
}
diff --git a/src/tabviews/zshare/mutilform/mkNumberInput/index.jsx b/src/tabviews/zshare/mutilform/mkNumberInput/index.jsx
index 9e80af9..b57a793 100644
--- a/src/tabviews/zshare/mutilform/mkNumberInput/index.jsx
+++ b/src/tabviews/zshare/mutilform/mkNumberInput/index.jsx
@@ -84,6 +84,16 @@
} else {
return (<InputNumber id={config.uuid} value={value} precision={precision} disabled={config.readonly} onChange={this.handleChange} onPressEnter={this.handleSubmit} />)
}
+ // <InputNumber
+ // id={config.uuid}
+ // formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+ // parser={value => value.replace(/,*/g, '')}
+ // value={value}
+ // precision={precision}
+ // disabled={config.readonly}
+ // onChange={this.handleChange}
+ // onPressEnter={this.handleSubmit}
+ // />
}
}
--
Gitblit v1.8.0