From cbb5bb7c9eecc76bbebea81875ab6813372a78a6 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 19 五月 2025 17:53:53 +0800
Subject: [PATCH] 2025-05-19
---
src/menu/components/card/prop-card/index.jsx | 396 ++++++++++++--------------------------------------------
1 files changed, 85 insertions(+), 311 deletions(-)
diff --git a/src/menu/components/card/prop-card/index.jsx b/src/menu/components/card/prop-card/index.jsx
index 257fe0b..3fd1c5c 100644
--- a/src/menu/components/card/prop-card/index.jsx
+++ b/src/menu/components/card/prop-card/index.jsx
@@ -1,12 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Popover, Modal } from 'antd'
-import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
+import { Popover, Modal, message } from 'antd'
+import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, ClockCircleOutlined, HeatMapOutlined } from '@ant-design/icons'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
-import { resetStyle } from '@/utils/utils-custom.js'
+import { resetStyle, getTables, checkComponent, getInterfaces } from '@/utils/utils-custom.js'
import MKEmitter from '@/utils/events.js'
import Utils from '@/utils/utils.js'
import getWrapForm from '../data-card/options'
@@ -17,8 +17,6 @@
const CardComponent = asyncComponent(() => import('../cardcomponent'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteComponent = asyncIconComponent(() => import('@/components/paste'))
-// const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
-const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
@@ -45,17 +43,14 @@
let _card = {
uuid: card.uuid,
type: card.type,
- tabId: card.tabId || '',
- parentId: card.parentId || '',
format: 'object', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡
pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
switchable: true, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
- dataName: card.dataName || '',
width: card.width || 24,
name: card.name,
subtype: card.subtype,
setting: { interType: 'system' },
- wrap: { name: card.name, width: card.width || 24, title: '', datatype: 'static' },
+ wrap: { name: card.name, width: card.width || 24, title: '', datatype: 'static', cardType: 'radio' },
style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' },
headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
columns: [],
@@ -72,34 +67,8 @@
elements: [],
backElements: []
}],
- btnlog: [],
}
- if (card.config) {
- let config = fromJS(card.config).toJS()
-
- _card.wrap = config.wrap
- _card.wrap.name = card.name
- _card.style = config.style
- _card.headerStyle = config.headerStyle
-
- _card.setting = config.setting
- _card.columns = config.columns
- _card.scripts = config.scripts
-
- _card.subcards = config.subcards.map(scard => {
- scard.uuid = Utils.getuuid()
- scard.elements = scard.elements.map(elem => {
- elem.uuid = Utils.getuuid()
- return elem
- })
- scard.backElements = scard.backElements.map(elem => {
- elem.uuid = Utils.getuuid()
- return elem
- })
- return scard
- })
- }
this.updateComponent(_card)
} else {
this.setState({
@@ -109,9 +78,7 @@
}
componentDidMount () {
- MKEmitter.addListener('submitStyle', this.getStyle)
- // MKEmitter.addListener('logButton', this.logButton)
- MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle)
+ MKEmitter.addListener('mkUpdateInter', this.mkUpdateInter)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -125,49 +92,29 @@
this.setState = () => {
return
}
- MKEmitter.removeListener('submitStyle', this.getStyle)
- // MKEmitter.removeListener('logButton', this.logButton)
- MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle)
+ MKEmitter.removeListener('mkUpdateInter', this.mkUpdateInter)
}
- updateComponentStyle = (parentId, keys, style) => {
+ mkUpdateInter = (inter, split) => {
const { card } = this.state
- if (card.uuid !== parentId) return
+ if (card.wrap.datatype === 'public' && card.wrap.publicId === inter.uuid) {
+ let _card = {...card, columns: fromJS(inter.columns).toJS()}
- let subcards = card.subcards.map(item => {
- if (keys.includes(item.uuid)) {
- item.style = {...item.style, ...style}
- }
- return item
- })
+ split.delay = split.delay + 10
- this.setState({card: {...card, subcards: []}}, () => {
- this.updateComponent({...card, subcards: subcards})
- })
+ setTimeout(() => {
+ this.updateComponent(_card)
+ }, split.delay)
+ }
}
-
- // 鎸夐挳鍘嗗彶璁板綍
- // logButton = (id, item) => {
- // const { card } = this.state
-
- // if (id !== card.uuid) return
-
- // let btnlog = card.btnlog || []
- // btnlog.push(item)
-
- // this.updateComponent({...card, btnlog})
- // }
/**
* @description 鍗＄墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級
*/
updateComponent = (card) => {
- const { appType } = this.state
-
card.width = card.wrap.width
card.name = card.wrap.name
- card.btnlog = []
if (window.GLOB.styling && card.errors) { // 鏍峰紡淇敼鏃朵笉鍋氱瓫鏌�
this.setState({
@@ -178,138 +125,19 @@
return
}
- card.errors = []
+ card.$c_ds = card.wrap.datatype === 'dynamic'
+ card.$c_ac = false
+ card.$c_sc = true
+
+ card.errors = checkComponent(card)
- if (card.subcards.length === 0) {
- card.errors.push({ level: 0, detail: '鍗＄墖涓嶅彲涓虹┖锛�'})
+ if (card.errors.length === 0) {
+ card.$tables = getTables(card)
}
- if (card.wrap.datatype === 'static') {
- let supModule = card.wrap.supModule ? card.wrap.supModule[card.wrap.supModule.length - 1] : ''
- card.subcards.forEach((item, i) => {
- let linkbtn = item.setting.linkbtn || ''
-
- item.elements.forEach(cell => {
- if (cell.eleType === 'button') {
- if (cell.OpenType === 'pop' || (cell.OpenType === 'funcbutton' && cell.execMode === 'pop')) {
- if (!cell.modal || cell.modal.fields.length === 0) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟灏氭湭娣诲姞`})
- } else if (!supModule) {
- cell.modal.fields.forEach(m => {
- if (m.type === 'linkMain') {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑鍏宠仈涓昏〃琛ㄥ崟鈥�${m.label}鈥濇棤鏁坄})
- }
- })
- }
- }
- if (linkbtn && linkbtn === cell.uuid) {
- linkbtn = ''
- }
- } else if (cell.datatype === 'dynamic' && cell.field) {
- card.errors.push({ level: 1, detail: `鍗＄墖涓姩鎬佸瓧娈碘��${cell.field}鈥濇棤鏁坄})
- }
- })
-
- if (item.setting.type === 'multi' && appType !== 'mob') {
- item.backElements.forEach(cell => {
- if (cell.eleType === 'button') {
- if (cell.OpenType === 'pop' || (cell.OpenType === 'funcbutton' && cell.execMode === 'pop')) {
- if (!cell.modal || cell.modal.fields.length === 0) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟灏氭湭娣诲姞`})
- } else if (!supModule) {
- cell.modal.fields.forEach(m => {
- if (m.type === 'linkMain') {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑鍏宠仈涓昏〃琛ㄥ崟鈥�${m.label}鈥濇棤鏁坄})
- }
- })
- }
- }
- if (linkbtn && linkbtn === cell.uuid) {
- linkbtn = ''
- }
- } else if (cell.datatype === 'dynamic' && cell.field) {
- card.errors.push({ level: 1, detail: `鍗＄墖涓姩鎬佸瓧娈碘��${cell.field}鈥濇棤鏁坄})
- }
- })
- }
-
- if (linkbtn) {
- card.errors.push({ level: 1, detail: `绗�${i + 1}寮犲崱鐗囦腑缁戝畾鎸夐挳宸插垹闄})
- }
- })
- } else {
- if (card.setting.interType === 'system' && card.setting.execute !== 'false' && !card.setting.dataresource) {
- card.errors.push({ level: 0, detail: '鏈缃暟鎹簮锛�'})
- } else if (card.setting.interType === 'system' && card.setting.execute === 'false' && card.scripts.filter(script => script.status !== 'false').length === 0) {
- card.errors.push({ level: 0, detail: '鏁版嵁婧愪腑鏃犲彲鐢ㄨ剼鏈紒'})
- } else if (!card.setting.primaryKey) {
- card.errors.push({ level: 0, detail: '鏈缃富閿紒'})
- } else if (!card.setting.supModule) {
- card.errors.push({ level: 0, detail: '鏈缃笂绾х粍浠讹紒'})
- }
-
- let supModule = card.setting.supModule ? card.setting.supModule[card.setting.supModule.length - 1] || '' : ''
- if (supModule === 'empty') {
- supModule = ''
- }
- let columns = card.columns.map(c => c.field)
- let lowcols = card.columns.map(c => c.field.toLowerCase())
-
- card.subcards.forEach((item, i) => {
- let linkbtn = item.setting.linkbtn || ''
- item.elements.forEach(cell => {
- if (cell.eleType === 'button') {
- if (cell.OpenType === 'pop' || (cell.OpenType === 'funcbutton' && cell.execMode === 'pop')) {
- if (!cell.modal || cell.modal.fields.length === 0) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟灏氭湭娣诲姞`})
- } else {
- cell.modal.fields.forEach(m => {
- if (m.type === 'linkMain' && !supModule) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑鍏宠仈涓昏〃琛ㄥ崟鈥�${m.label}鈥濇棤鏁坄})
- } else if (m.field && !columns.includes(m.field) && lowcols.includes(m.field.toLowerCase())) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟鈥�${m.label}鈥濆ぇ灏忓啓涓庡瓧娈甸泦涓嶄竴鑷碻})
- }
- })
- }
- }
- if (linkbtn && linkbtn === cell.uuid) {
- linkbtn = ''
- }
- } else if (cell.datatype === 'dynamic' && cell.field && !columns.includes(cell.field)) {
- card.errors.push({ level: 1, detail: `鍗＄墖涓姩鎬佸瓧娈碘��${cell.field}鈥濇棤鏁坄})
- }
- })
-
- if (item.setting.type === 'multi' && appType !== 'mob') {
- item.backElements.forEach(cell => {
- if (cell.eleType === 'button') {
- if (cell.OpenType === 'pop' || (cell.OpenType === 'funcbutton' && cell.execMode === 'pop')) {
- if (!cell.modal || cell.modal.fields.length === 0) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟灏氭湭娣诲姞`})
- } else {
- cell.modal.fields.forEach(m => {
- if (m.type === 'linkMain' && !supModule) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑鍏宠仈涓昏〃琛ㄥ崟鈥�${m.label}鈥濇棤鏁坄})
- } else if (m.field && !columns.includes(m.field) && lowcols.includes(m.field.toLowerCase())) {
- card.errors.push({ level: 1, detail: `鎸夐挳鈥�${cell.label}鈥濅腑琛ㄥ崟鈥�${m.label}鈥濆ぇ灏忓啓涓庡瓧娈甸泦涓嶄竴鑷碻})
- }
- })
- }
- }
- if (linkbtn && linkbtn === cell.uuid) {
- linkbtn = ''
- }
- } else if (cell.datatype === 'dynamic' && cell.field && !columns.includes(cell.field)) {
- card.errors.push({ level: 1, detail: `鍗＄墖涓姩鎬佸瓧娈碘��${cell.field}鈥濇棤鏁坄})
- }
- })
- }
-
- if (linkbtn) {
- card.errors.push({ level: 1, detail: `绗�${i + 1}寮犲崱鐗囦腑缁戝畾鎸夐挳宸插垹闄})
- }
- })
- }
+ delete card.$c_ds
+ delete card.$c_ac
+ delete card.$c_sc
this.setState({
card: card
@@ -336,39 +164,15 @@
* @description 鍗曚釜鍗＄墖淇℃伅鏇存柊
*/
deleteCard = (cell) => {
- const { appType } = this.state
let card = fromJS(this.state.card).toJS()
- let _this = this
+ let that = this
confirm({
content: '纭畾鍒犻櫎鍗＄墖鍚楋紵',
onOk() {
card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid)
- // if (card.btnlog) {
- // card.btnlog = card.btnlog.filter(c => c.$parentId !== cell.uuid)
- // }
-
- _this.updateComponent(card)
-
- if (appType === 'mob') return
-
- let uuids = []
-
- cell.elements && cell.elements.forEach(c => {
- if (c.eleType !== 'button' || (appType === 'pc' && c.OpenType !== 'popview')) return
-
- uuids.push(c.uuid)
- })
- cell.backElements && cell.backElements.forEach(c => {
- if (c.eleType !== 'button' || (appType === 'pc' && c.OpenType !== 'popview')) return
-
- uuids.push(c.uuid)
- })
-
- if (uuids.length === 0) return
-
- MKEmitter.emit('delButtons', uuids)
+ that.updateComponent(card)
},
onCancel() {}
})
@@ -377,15 +181,11 @@
changeStyle = () => {
const { card } = this.state
- MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style)
+ MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear', 'minHeight'], card.style, this.getStyle)
}
- getStyle = (comIds, style) => {
- const { card } = this.state
-
- if (comIds.length !== 1 || comIds[0] !== card.uuid) return
-
- let _card = {...card, style}
+ getStyle = (style) => {
+ let _card = {...this.state.card, style}
this.updateComponent(_card)
}
@@ -429,53 +229,6 @@
this.updateComponent(card)
}
- // handleLog = (type, logs, item) => {
- // let card = fromJS(this.state.card).toJS()
-
- // if (type === 'revert') {
- // let done = false
- // if (item.$parentId) {
- // card.subcards.forEach(col => {
- // if (item.$parentId === col.uuid) {
- // if (item.$side !== 'back') {
- // col.elements = col.elements ? [...col.elements, item] : [item]
- // } else {
- // col.backElements = col.backElements ? [...col.backElements, item] : [item]
- // }
- // done = true
- // }
- // })
- // }
-
- // card.btnlog = logs
-
- // this.setState({ card: {...card, subcards: []} }, () => {
- // this.updateComponent(card)
- // })
- // if (!done) {
- // notification.warning({
- // top: 92,
- // message: '闄勫睘鍗＄墖宸插垹闄わ紒',
- // duration: 2
- // })
- // } else {
- // notification.success({
- // top: 92,
- // message: '鎭㈠鎴愬姛锛�',
- // duration: 2
- // })
- // }
- // } else {
- // card.btnlog = logs
- // this.updateComponent(card)
- // notification.success({
- // top: 92,
- // message: '娓呴櫎鎴愬姛锛�',
- // duration: 2
- // })
- // }
- // }
-
move = (item, direction) => {
let card = fromJS(this.state.card).toJS()
@@ -505,8 +258,7 @@
res.setting = res.setting || {}
res.setting.width = res.setting.width || 6
- let copyBtns = []
- let mobtypes = ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton']
+ let mobtypes = ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton', 'form']
let elements = []
res.elements && res.elements.forEach(cell => {
@@ -516,16 +268,7 @@
} else if (appType === 'mob' && !mobtypes.includes(cell.OpenType)) {
return
} else {
- let _uuid = Utils.getuuid()
-
- if (cell.OpenType === 'popview') {
- let _cell = fromJS(cell).toJS()
- _cell.$originUuid = _cell.uuid
- _cell.uuid = _uuid
- copyBtns.push(_cell)
- }
-
- cell.uuid = _uuid
+ cell.uuid = Utils.getuuid()
elements.push(cell)
}
})
@@ -542,26 +285,13 @@
} else if (appType === 'mob' && !mobtypes.includes(cell.OpenType)) {
return
} else {
- let _uuid = Utils.getuuid()
-
- if (cell.OpenType === 'popview') {
- let _cell = fromJS(cell).toJS()
- _cell.$originUuid = _cell.uuid
- _cell.uuid = _uuid
- copyBtns.push(_cell)
- }
-
- cell.uuid = _uuid
+ cell.uuid = Utils.getuuid()
backElements.push(cell)
}
})
}
res.backElements = backElements
-
- if (copyBtns.length > 0) {
- MKEmitter.emit('copyButtons', copyBtns)
- }
resolve({status: true})
@@ -570,11 +300,31 @@
getWrapForms = () => {
const { card } = this.state
- return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid)
+ let buttons = []
+
+ card.subcards.forEach(m => {
+ m.elements.forEach(n => {
+ if (n.eleType === 'button') {
+ buttons.push({
+ value: n.uuid,
+ label: n.label
+ })
+ }
+ })
+ })
+
+ return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid, null, null, buttons)
}
updateWrap = (res) => {
const { card } = this.state
+
+ if (res.interaction) {
+ if (res.interaction.includes('scale')) {
+ res.scale = 'true'
+ }
+ delete res.interaction
+ }
let _card = {...card, wrap: res}
@@ -584,7 +334,19 @@
} else {
_card.setting.supModule = ''
}
+ } else if (res.datatype === 'public') {
+ let interfaces = getInterfaces()
+
+ let d = interfaces.filter(m => m.value === res.publicId)[0]
+
+ if (d) {
+ _card.columns = fromJS(d.columns).toJS()
+
+ _card.setting = { interType: 'system' }
+ _card.scripts = []
+ }
}
+
if (res.layout === 'flex') {
_card.wrap.pagestyle = 'page'
}
@@ -614,7 +376,13 @@
clickComponent = (e) => {
if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
e.stopPropagation()
- MKEmitter.emit('clickComponent', this.state.card)
+ MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => {
+ let _card = {...this.state.card}
+ _card.style = {..._card.style, ...style}
+
+ this.setState({ card: _card })
+ this.props.updateConfig(_card)
+ })
}
}
@@ -635,22 +403,28 @@
<CopyComponent type="propcard" card={card}/>
<PasteComponent options={['cardcell']} updateConfig={this.pasteComponent} />
<FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/>
- {/* <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> */}
- <ClockComponent config={card} updateConfig={this.updateComponent}/>
- <UserComponent config={card}/>
+ {card.wrap.datatype !== 'public' ? <ClockComponent config={card} updateConfig={this.updateComponent}/> : <ClockCircleOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/>}
<DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} />
- {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
- {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null}
+ {card.wrap.datatype === 'dynamic' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/>}
</div>
} trigger="hover">
<ToolOutlined />
</Popover>
- <div className={(card.wrap.layout || 'grid') + '-layout float-' + (card.wrap.cardFloat || 'left') + ' select-' + card.wrap.selStyle}>
+ <div className={`${card.wrap.layout || 'grid'}-layout float-${card.wrap.cardFloat || 'left'} select-${card.wrap.selStyle || ''}`}>
{card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
</div>
+ {card.wrap.display === 'hidden' ? <HeatMapOutlined title="缁勪欢闅愯棌" className="prop-hidden"/> : null}
<div className="component-name">
<div className="center">
- <div className="title">{card.name}</div>
+ <div className="title" onDoubleClick={() => {
+ let oInput = document.createElement('input')
+ oInput.value = 'anchor' + card.uuid
+ document.body.appendChild(oInput)
+ oInput.select()
+ document.execCommand('Copy')
+ document.body.removeChild(oInput)
+ message.success('澶嶅埗鎴愬姛銆�')
+ }}>{card.name}</div>
<div className="content">
{card.errors && card.errors.map((err, index) => {
if (err.level === 0) {
--
Gitblit v1.8.0