From cbeffcc0902631909c0373f274752a97ddaf2d4e Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 06 八月 2022 01:41:54 +0800 Subject: [PATCH] 2022-08-06 --- src/menu/components/card/data-card/index.jsx | 659 ++++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 491 insertions(+), 168 deletions(-) diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx index 5c85b95..67ca766 100644 --- a/src/menu/components/card/data-card/index.jsx +++ b/src/menu/components/card/data-card/index.jsx @@ -1,25 +1,25 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Pagination, notification } from 'antd' +import { Popover, Modal, Pagination } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import { resetStyle } from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' +import getWrapForm from './options' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) -const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const CardComponent = asyncComponent(() => import('../cardcomponent')) const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) -const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) +// const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) -const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) +const PasteComponent = asyncIconComponent(() => import('@/components/paste')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent')) @@ -33,7 +33,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, appType: sessionStorage.getItem('appType'), back: false @@ -47,7 +46,6 @@ let _card = { uuid: card.uuid, type: card.type, - floor: card.floor, tabId: card.tabId || '', parentId: card.parentId || '', format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 @@ -58,7 +56,7 @@ name: card.name, subtype: card.subtype, setting: { interType: 'system' }, - wrap: { name: card.name, width: card.width || 24, title: '', pagestyle: 'page', switch: 'false', cardType: '' }, + wrap: { name: card.name, width: card.width || 24, title: '', pagestyle: 'page', cardType: '' }, style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, columns: [], @@ -76,7 +74,8 @@ }, backStyle: {}, elements: [], - backElements: [] + backElements: [], + menus: [] }] } @@ -87,6 +86,10 @@ _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() @@ -110,16 +113,33 @@ }) } - this.setState({ - card: _card - }) - this.props.updateConfig(_card) + this.updateComponent(_card) } else { - card.action = card.action || [] // 鍏煎 - card.search = card.search || [] // 鍏煎 + let _card = fromJS(card).toJS() + _card.action = _card.action || [] // 鍏煎 + _card.search = _card.search || [] // 鍏煎 + + if (appType === 'mob') { + _card.action = _card.action.map(item => { + if (!item.color) { + if (item.sqlType === 'LogicDelete' || item.sqlType === 'delete') { + item.color = 'danger' + } else if (item.sqlType === 'insert') { + item.color = 'success' + } else if (item.sqlType === 'update' || item.sqlType === 'insertOrUpdate' || item.sqlType === 'custom') { + item.color = 'primary' + } else if (item.sqlType === 'audit') { + item.color = 'warning' + } else { + item.color = 'weak' + } + } + return item + }) + } this.setState({ - card: fromJS(card).toJS() + card: _card }) } } @@ -127,7 +147,7 @@ componentDidMount () { MKEmitter.addListener('submitStyle', this.getStyle) MKEmitter.addListener('submitModal', this.handleSave) - MKEmitter.addListener('logButton', this.logButton) + // MKEmitter.addListener('logButton', this.logButton) } shouldComponentUpdate (nextProps, nextState) { @@ -143,41 +163,148 @@ } MKEmitter.removeListener('submitStyle', this.getStyle) MKEmitter.removeListener('submitModal', this.handleSave) - MKEmitter.removeListener('logButton', this.logButton) + // MKEmitter.removeListener('logButton', this.logButton) } - logButton = (id, item) => { - const { card } = this.state + // logButton = (id, item) => { + // const { card } = this.state - if (id !== card.uuid) return + // if (id !== card.uuid) return - let btnlog = card.btnlog || [] - btnlog.push(item) + // let btnlog = card.btnlog || [] + // btnlog.push(item) - this.setState({ - card: {...card, btnlog} - }) - this.props.updateConfig({...card, btnlog}) - } + // this.updateComponent({...card, btnlog}) + // } /** * @description 鍗$墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級 */ - updateComponent = (component) => { - this.setState({ - card: component + 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({ + card: card + }) + + this.props.updateConfig(card) + return + } + + card.errors = [] + + 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.wrap.supType !== 'multi' && !card.setting.supModule) { + card.errors.push({ level: 0, detail: '鏈缃笂绾х粍浠讹紒'}) + } + + let supModule = '' + if (card.wrap.supType === 'multi') { // 鏁版嵁鍗″涓婄骇缁勪欢 + if (card.supNodes && card.supNodes[0]) { + supModule = card.supNodes[0].componentId + } + } else if (card.setting.supModule) { + 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.action.forEach(cell => { + 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}鈥濆ぇ灏忓啓涓庡瓧娈甸泦涓嶄竴鑷碻}) + } + }) + } + } }) - component.width = component.wrap.width - component.name = component.wrap.name + 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}鈥濇棤鏁坄}) + } + }) - this.props.updateConfig(component) + 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}寮犲崱鐗囦腑缁戝畾鎸夐挳宸插垹闄}) + } + }) + + this.setState({ + card: card + }) + + this.props.updateConfig(card) } /** * @description 鍗曚釜鍗$墖淇℃伅鏇存柊 */ - updateCard = (cell) => { + updateCard = (cell, btn) => { let card = fromJS(this.state.card).toJS() card.subcards = card.subcards.map(item => { @@ -185,9 +312,11 @@ return item }) - this.setState({card}) + if (btn) { + card.action = card.action.filter(item => item.uuid !== btn.uuid) + } - this.props.updateConfig(card) + this.updateComponent(card) } /** @@ -203,12 +332,11 @@ onOk() { card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid) - if (card.btnlog) { - card.btnlog = card.btnlog.filter(c => c.$parentId !== cell.uuid) - } + // if (card.btnlog) { + // card.btnlog = card.btnlog.filter(c => c.$parentId !== cell.uuid) + // } - _this.setState({card}) - _this.props.updateConfig(card) + _this.updateComponent(card) if (appType === 'mob') return @@ -236,7 +364,7 @@ changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', [card.uuid], ['background', 'height', 'border', 'padding', 'margin', 'shadow'], card.style) } getStyle = (comIds, style) => { @@ -245,56 +373,62 @@ if (comIds.length !== 1 || comIds[0] !== card.uuid) return let _card = {...card, style} - - this.setState({ - card: _card - }) - this.props.updateConfig(_card) + this.updateComponent(_card) } - addSearch = () => { + addSearch = (copy) => { const { card } = this.state let newcard = {} - newcard.uuid = Utils.getuuid() - newcard.focus = true - newcard.label = 'label' - newcard.type = 'select' - newcard.resourceType = '0' - newcard.options = [] - newcard.setAll = 'false' - newcard.orderType = 'asc' - newcard.display = 'dropdown' - newcard.match = '=' + if (copy) { + newcard = copy + newcard.focus = true + } else { + newcard.uuid = Utils.getuuid() + newcard.focus = true + + newcard.label = 'label' + newcard.type = 'select' + newcard.resourceType = '0' + newcard.options = [] + newcard.orderType = 'asc' + newcard.match = '=' + } // 娉ㄥ唽浜嬩欢-娣诲姞鎼滅储 MKEmitter.emit('addSearch', card.uuid, newcard) } - addButton = () => { + addButton = (copy) => { const { card } = this.state let newcard = {} - newcard.uuid = Utils.getuuid() - newcard.focus = true - - newcard.label = 'label' - newcard.Ot = 'requiredSgl' - newcard.OpenType = 'pop' - newcard.icon = '' - newcard.class = 'green' - newcard.intertype = card.setting.interType || 'system' - newcard.innerFunc = card.setting.innerFunc || '' - newcard.sysInterface = card.setting.sysInterface || '' - newcard.outerFunc = card.setting.outerFunc || '' - newcard.interface = card.setting.interface || '' - newcard.execSuccess = 'grid' - newcard.execError = 'never' - newcard.verify = null - newcard.show = 'button' - newcard.style = {marginRight: '15px'} + + if (copy) { + newcard = copy + newcard.focus = true + } else { + newcard.uuid = Utils.getuuid() + newcard.focus = true + + newcard.label = 'label' + newcard.Ot = 'requiredSgl' + newcard.OpenType = 'pop' + newcard.icon = '' + newcard.class = 'green' + newcard.intertype = card.setting.interType || 'system' + newcard.innerFunc = card.setting.innerFunc || '' + newcard.sysInterface = card.setting.sysInterface || '' + newcard.outerFunc = card.setting.outerFunc || '' + newcard.interface = card.setting.interface || '' + newcard.execSuccess = 'grid' + newcard.execError = 'never' + newcard.verify = null + newcard.show = 'button' + newcard.style = {marginRight: '15px'} + } // 娉ㄥ唽浜嬩欢-娣诲姞鎸夐挳 MKEmitter.emit('addButton', card.uuid, newcard) @@ -336,79 +470,81 @@ return cell }) - this.setState({card}) - this.props.updateConfig(card) + this.updateComponent(card) } - handleLog = (type, logs, item) => { + // 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 + // } + // }) + // } + + // if (!done) { + // card.action = card.action ? [...card.action, item] : [item] + // } + + // card.btnlog = logs + + // this.updateComponent(card) + // notification.success({ + // top: 92, + // message: '鎭㈠鎴愬姛锛�', + // duration: 2 + // }) + // } else { + // card.btnlog = logs + // this.updateComponent(card) + // notification.success({ + // top: 92, + // message: '娓呴櫎鎴愬姛锛�', + // duration: 2 + // }) + // } + // } + + addCard = (copy) => { let card = fromJS(this.state.card).toJS() + let newcard = {} - 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 - } - }) - } - - if (!done) { - card.action = card.action ? [...card.action, item] : [item] - } - - card.btnlog = logs - - this.setState({ card }) - this.props.updateConfig(card) - notification.success({ - top: 92, - message: '鎭㈠鎴愬姛锛�', - duration: 2 - }) + if (copy) { // 绮樿创 + newcard = copy } else { - card.btnlog = logs - this.setState({ card }) - this.props.updateConfig(card) - notification.success({ - top: 92, - message: '娓呴櫎鎴愬姛锛�', - duration: 2 - }) - } - } - - addCard = () => { - let card = fromJS(this.state.card).toJS() - let height = card.subcards[0].style.height - if (height === 'auto') { - height = '100px' - } - - let newcard = { - uuid: Utils.getuuid(), - $cardType: 'extendCard', - setting: { width: 6, type: 'simple', click: 'button'}, - style: { - height, - borderWidth: '1px', borderColor: '#e8e8e8', - paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', - marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' - }, - backStyle: {}, - elements: [], - backElements: [] + let height = card.subcards[0].style.height + if (height === 'auto') { + height = '100px' + } + + newcard = { + uuid: Utils.getuuid(), + $cardType: 'extendCard', + setting: { width: 6, type: 'simple', click: ''}, + style: { + height, + borderWidth: '1px', borderColor: '#e8e8e8', + paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', + marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' + }, + backStyle: {}, + elements: [], + backElements: [] + } } card.subcards.push(newcard) - - this.setState({card}) - this.props.updateConfig(card) + + this.updateComponent(card) } move = (item, direction) => { @@ -427,8 +563,188 @@ card.subcards.splice(hoverIndex, 0, ...card.subcards.splice(dragIndex, 1)) - this.setState({card}) - this.props.updateConfig(card) + this.updateComponent(card) + } + + getWrapForms = () => { + const { card } = this.state + + return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid, card.supNodes, card.setting) + } + + updateWrap = (res) => { + const { card } = this.state + + let _card = {...card, wrap: res} + + if (res.supNodes) { + _card.supNodes = res.supNodes + _card.supNodes = _card.supNodes.map(item => { + item.componentId = item.nodes[item.nodes.length - 1] + return item + }) + + delete res.supNodes + } else { + delete _card.supNodes + } + + + if (res.layout === 'flex') { + _card.wrap.pagestyle = 'page' + } + + if (res.selStyle === 'tabs' && card.wrap.selStyle !== 'tabs') { + Object.keys(_card.style).forEach(key => { + if (/^border/.test(key)) { + delete _card.style[key] + } + }) + _card.style.borderBottomColor = '#eeeeee' + _card.style.borderBottomWidth = '1px' + _card.style.paddingBottom = '0px' + + _card.subcards.forEach(item => { + delete item.style.marginBottom + }) + + this.setState({card: {..._card, subcards: []}}, () => { + this.updateComponent(_card) + }) + } else { + this.updateComponent(_card) + } + } + + pasteComponent = (res, resolve) => { + const { card, appType } = this.state + + let type = res.copyType + delete res.copyType + + if (type === 'cardcell') { + res.uuid = Utils.getuuid() + res.setting = res.setting || {} + res.$cardType = 'extendCard' + res.setting.width = res.setting.width || 6 + + let copyBtns = [] + let mobtypes = ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton'] + + let elements = [] + res.elements && res.elements.forEach(cell => { + if (cell.datatype === 'dynamic') { + cell.datatype = 'static' + } + + if (cell.eleType !== 'button') { + cell.uuid = Utils.getuuid() + elements.push(cell) + } 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 + elements.push(cell) + } + }) + + res.elements = elements + + let backElements = [] + + if (appType !== 'mob') { + res.backElements && res.backElements.forEach(cell => { + if (cell.datatype === 'dynamic') { + cell.datatype = 'static' + } + + if (cell.eleType !== 'button') { + cell.uuid = Utils.getuuid() + backElements.push(cell) + } 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 + backElements.push(cell) + } + }) + } + + res.backElements = backElements + + if (copyBtns.length > 0) { + MKEmitter.emit('copyButtons', copyBtns) + } + + resolve({status: true}) + + this.addCard(res) + } else if (type === 'search' || type === 'form') { + if (appType === 'mob') { + resolve({status: false, message: '绉诲姩绔暟鎹崱涓嶆敮鎸佹坊鍔犳悳绱㈡潯浠躲��'}) + } else { + res.uuid = Utils.getuuid() + let keys = card.search.map(item => item.field.toLowerCase()) + + if (type === 'form') { + if (['number', 'switch', 'textarea', 'fileupload', 'hint', 'color', 'funcvar'].includes(res.type)) { + res.type = 'text' + } else if (res.type === 'radio') { + res.type = 'select' + } else if (res.type === 'checkbox') { + res.type = 'multiselect' + } else if (res.type === 'datetime') { + res.type = 'date' + } + } + + if (res.field && keys.includes(res.field.toLowerCase())) { + resolve({status: false, message: '鎼滅储瀛楁宸插瓨鍦紒'}) + return + } + + resolve({status: true}) + + this.addSearch(res) + } + } else if (type === 'action') { + if (appType === 'mob' && !['pop', 'prompt', 'exec', 'innerpage'].includes(res.OpenType)) { + resolve({status: false, message: '绉诲姩绔笉鏀寔姝ょ被鍨嬬殑鎸夐挳銆�'}) + } else { + let _uuid = Utils.getuuid() + + if (res.OpenType === 'popview') { + let _cell = fromJS(res).toJS() + _cell.$originUuid = _cell.uuid + _cell.uuid = _uuid + + MKEmitter.emit('copyButtons', [_cell]) + } + + resolve({status: true}) + + res.uuid = _uuid + this.addButton(res) + } + } } clickComponent = (e) => { @@ -441,44 +757,51 @@ render() { const { card, appType } = this.state - let offset = 0 - if (card.wrap.cardFloat && card.wrap.cardFloat !== 'left') { - let _width = 0 - card.subcards.forEach(card => { - _width += card.setting.width - }) - offset = _width < 24 ? 24 - _width : 0 - if (card.wrap.cardFloat === 'center') { - offset = Math.floor(offset / 2) - } - } let _style = resetStyle(card.style) return ( <div className={'menu-data-card-edit-box ' + appType} style={_style} onClick={this.clickComponent} id={card.uuid}> - <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/> + <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鍗$墖" onClick={this.addCard} type="plus" /> : null} - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> - <WrapComponent config={card} updateConfig={this.updateComponent} /> + <PlusOutlined className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()}/> + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={() => this.addSearch()}/> : null} + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.addButton()}/> + <NormalForm title="鏁版嵁鍗¤缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> <CopyComponent type="datacard" card={card}/> - <PasteComponent config={card} options={['action', 'search', 'form', 'cardcell']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> + <PasteComponent options={['action', 'search', 'form', 'cardcell']} updateConfig={this.pasteComponent} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + {/* <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> */} <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> - {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} offset={!index ? offset : 0} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + <div className={'float-' + (card.wrap.cardFloat || 'left') + ' select-' + card.wrap.selStyle}> + {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + </div> <div style={{clear: 'both'}}></div> {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType !== 'mob' ? <Pagination total={85} size="small" showTotal={total => `鍏� ${total} 鏉} pageSize={20} defaultCurrent={1}/> : null} {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType === 'mob' ? <MobPagination /> : null} + <div className="component-name"> + <div className="center"> + <div className="title">{card.name}</div> + <div className="content"> + {card.errors && card.errors.map((err, index) => { + if (err.level === 0) { + return <span key={index} className="error">{err.detail}</span> + } else { + return <span key={index} className="waring">{err.detail}锛�</span> + } + })} + </div> + </div> + </div> </div> ) } -- Gitblit v1.8.0