From 8f394e7ef20cc0abba3f47c23a63b069e9dd0e45 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 19 十月 2022 15:09:30 +0800 Subject: [PATCH] 2022-10-19 --- src/menu/components/card/table-card/index.jsx | 559 ++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 425 insertions(+), 134 deletions(-) diff --git a/src/menu/components/card/table-card/index.jsx b/src/menu/components/card/table-card/index.jsx index 6f572c1..91e11b6 100644 --- a/src/menu/components/card/table-card/index.jsx +++ b/src/menu/components/card/table-card/index.jsx @@ -1,22 +1,27 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Pagination } from 'antd' +import { Popover, Modal, Pagination } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, DownOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' - +import { resetStyle, getTables } 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 '../data-card/options' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) -const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting')) -const CardComponent = asyncComponent(() => import('./cardcomponent')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) +const CardSimpleComponent = asyncComponent(() => import('../cardsimplecomponent')) +const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) +const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) +const PasteComponent = asyncIconComponent(() => import('@/components/paste')) +const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) +const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent')) +const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent')) const { confirm } = Modal @@ -28,8 +33,8 @@ } state = { - dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, + appType: sessionStorage.getItem('appType'), back: false } @@ -37,11 +42,46 @@ const { card } = this.props if (card.isNew) { - let subcards = null - + let _card = { + uuid: card.uuid, + type: card.type, + format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 + pageable: true, // 缁勪欢灞炴�� - 鏄惁鍙垎椤� + switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹� + width: card.width || 12, + search: [], + name: card.name, + subtype: card.subtype, + setting: { interType: 'system' }, + wrap: { name: card.name, width: card.width || 12, title: '' }, + style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, + headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, + columns: [], + scripts: [], + subcards: [{ + uuid: Utils.getuuid(), + setting: { width: 24, type: 'simple'}, + style: { + paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px', + }, + elements: [] + }], + action: [], + } + if (card.config) { - subcards = JSON.parse(card.config) - subcards = subcards.map(scard => { + 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() @@ -49,58 +89,51 @@ }) return scard }) - } else { - subcards = [{ - uuid: Utils.getuuid(), - setting: { width: 24, type: 'simple'}, - style: { - paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px', - }, - elements: [] - }] + _card.search = config.search.map(col => { + col.uuid = Utils.getuuid() + return col + }) + if (config.action) { + _card.action = config.action.map(col => { + col.uuid = Utils.getuuid() + return col + }) + } } - let _card = { - uuid: card.uuid, - type: card.type, - floor: card.floor, - tabId: card.tabId || '', - parentId: card.parentId || '', - format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 - pageable: true, // 缁勪欢灞炴�� - 鏄惁鍙垎椤� - switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹� - dataName: card.dataName || '', - width: 12, - search: [], - name: card.name, - subtype: card.subtype, - setting: { interType: 'system' }, - wrap: { name: card.name, width: 12, title: '' }, - style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, - headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, - columns: [], - scripts: [], - subcards: subcards, - btnlog: [], + this.updateComponent(_card) + } else { + let _card = fromJS(card).toJS() + if (!_card.action) { + _card.action = [] } - + + if (this.state.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: _card - }) - this.props.updateConfig(_card) - } else { - this.setState({ - card: fromJS(card).toJS() }) } } - componentDidMount () { - MKEmitter.addListener('submitStyle', this.getStyle) - } - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) || (!this.props.menu && nextProps.menu) + return !is(fromJS(this.state), fromJS(nextState)) } /** @@ -110,21 +143,80 @@ this.setState = () => { return } - MKEmitter.removeListener('submitStyle', this.getStyle) } /** * @description 鍗$墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級 */ - updateComponent = (component) => { - this.setState({ - card: component + updateComponent = (card) => { + card.width = card.wrap.width + card.name = card.wrap.name + + if (window.GLOB.styling && card.errors) { // 鏍峰紡淇敼鏃朵笉鍋氱瓫鏌� + this.setState({ + card: card + }) + + this.props.updateConfig(card) + return + } + + card.errors = [] + + // 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()) + + if (card.subcards.length === 0) { + card.errors.push({ level: 0, detail: '鍗$墖涓嶅彲涓虹┖锛�'}) + } + + 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 (!columns.includes(card.setting.primaryKey)) { + card.errors.push({ level: 0, detail: '涓婚敭宸插け鏁堬紒'}) + } else if (!card.setting.supModule) { + card.errors.push({ level: 0, detail: '鏈缃笂绾х粍浠讹紒'}) + } + + if (card.errors.length === 0) { + card.$tables = getTables(card) + } + + 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}鈥濅腑琛ㄥ崟灏氭湭娣诲姞`}) + } + } + 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}寮犲崱鐗囦腑缁戝畾鎸夐挳宸插垹闄}) + } }) - component.width = component.wrap.width - component.name = component.wrap.name + this.setState({ + card: card + }) - this.props.updateConfig(component) + this.props.updateConfig(card) } /** @@ -138,15 +230,14 @@ return item }) - this.setState({card}) - - this.props.updateConfig(card) + this.updateComponent(card) } /** * @description 鍗曚釜鍗$墖淇℃伅鏇存柊 */ deleteCard = (cell) => { + const { appType } = this.state let card = fromJS(this.state.card).toJS() let _this = this @@ -154,9 +245,22 @@ content: '纭畾鍒犻櫎鍗$墖鍚楋紵', onOk() { card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid) - - _this.setState({card}) - _this.props.updateConfig(card) + + _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) + }) + + if (uuids.length === 0) return + + MKEmitter.emit('delButtons', uuids) }, onCancel() {} }) @@ -165,107 +269,294 @@ changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', ['height', 'background', 'border', 'padding', 'margin', 'shadow'], card.style, this.getStyle) } - getStyle = (comIds, style) => { - const { card } = this.state + getStyle = (style) => { + let _card = {...this.state.card, style} - if (comIds[0] !== card.uuid || comIds.length > 1) return - - let _card = {...card, style} - - this.setState({ - card: _card - }) - - this.props.updateConfig(_card) + this.updateComponent(_card) } - addCard = () => { + addCard = (copy) => { let card = fromJS(this.state.card).toJS() + let newcard = {} - let newcard = { - uuid: Utils.getuuid(), - setting: { width: 6, type: 'simple'}, - style: { - paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px', - }, - elements: [] - } - - if (card.subcards.length > 0) { - newcard = fromJS(card.subcards.slice(-1)[0]).toJS() - newcard.uuid = Utils.getuuid() - newcard.elements = newcard.elements.map(elem => { - elem.uuid = Utils.getuuid() - return elem - }) + if (copy) { // 绮樿创 + newcard = copy + } else { + newcard = { + uuid: Utils.getuuid(), + setting: { width: 6, type: 'simple'}, + style: { + paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px', + }, + elements: [] + } + + if (card.subcards.length > 0) { + newcard = fromJS(card.subcards.slice(-1)[0]).toJS() + newcard.uuid = Utils.getuuid() + newcard.elements = newcard.elements.map(elem => { + elem.uuid = Utils.getuuid() + return elem + }) + } } card.subcards.push(newcard) - - this.setState({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.initval = '' - 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.initval = '' + newcard.type = 'select' + newcard.resourceType = '0' + newcard.options = [] + newcard.orderType = 'asc' + newcard.match = '=' + } // 娉ㄥ唽浜嬩欢-娣诲姞鎼滅储 MKEmitter.emit('addSearch', card.uuid, newcard) } - render() { - const { menu } = this.props + move = (item, direction) => { + let card = fromJS(this.state.card).toJS() + + let dragIndex = card.subcards.findIndex(c => c.uuid === item.uuid) + let hoverIndex = null + + if (direction === 'left') { + hoverIndex = dragIndex - 1 + } else { + hoverIndex = dragIndex + 1 + } + + if (hoverIndex === -1 || hoverIndex === card.subcards.length) return + + card.subcards.splice(hoverIndex, 0, ...card.subcards.splice(dragIndex, 1)) + + this.updateComponent(card) + } + + getWrapForms = () => { const { card } = this.state + return getWrapForm(card.wrap, card.subtype, null, null, null, card.setting) + } + + updateWrap = (res) => { + this.updateComponent({...this.state.card, wrap: res}) + } + + 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.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.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 + + delete res.$cardType + delete res.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) + } + } + } + + addButton = (copy) => { + const { card } = this.state + + let newcard = {} + + 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) + } + + setSubConfig = (item) => { + const { card, appType } = this.state + let btn = fromJS(item).toJS() + + if (btn.OpenType === 'pop' || btn.execMode === 'pop') { + if (!btn.modal) { + btn.modal = { + setting: { title: btn.label, width: appType === 'mob' ? 100 : 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, + tables: [], + groups: [], + fields: [] + } + } + MKEmitter.emit('changeModal', card, btn) + } else if (btn.OpenType === 'popview' && appType !== 'mob') { + MKEmitter.emit('changePopview', card, btn) + } + } + + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { + e.stopPropagation() + 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) + }) + } + } + + render() { + const { card, appType } = this.state + let _style = resetStyle(card.style) + return ( - <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}}> + <div className="menu-table-card-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍗$墖" onClick={this.addCard} type="plus" /> - <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> - {menu ? <WrapComponent config={card} MenuType={menu.MenuType} updateConfig={this.updateComponent} /> : null} - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <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="tablecard" card={card}/> + <PasteComponent options={['cardcell', 'search', 'form']} updateConfig={this.pasteComponent} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <ClockComponent config={card} updateConfig={this.updateComponent}/> + <UserComponent config={card}/> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> - <div style={{minHeight: card.wrap.height - 90}}> - {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} MenuType={menu ? menu.MenuType : ''} cards={card} card={subcard} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> + <div style={{minHeight: 'calc(100% - 90px)'}}> + {card.subcards.map(subcard => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} move={this.move} deleteElement={this.deleteCard}/>))} </div> - {card.setting.laypage === 'true' ? <Pagination size="small" total={50} /> : null} + {card.setting.laypage === 'true' && card.wrap.pagestyle === 'page' && appType !== 'mob' ? <Pagination size="small" total={50} /> : null} + {card.setting.laypage === 'true' && card.wrap.pagestyle === 'page' && appType === 'mob' ? <MobPagination /> : null} + {card.setting.laypage === 'true' && card.wrap.pagestyle === 'more' ? <div className="mk-more">鏌ョ湅鏇村<DownOutlined/></div> : 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> ) } } -const mapStateToProps = (state) => { - return { - menu: state.customMenu - } -} - -const mapDispatchToProps = () => { - return {} -} - -export default connect(mapStateToProps, mapDispatchToProps)(TableCardEditComponent) \ No newline at end of file +export default TableCardEditComponent \ No newline at end of file -- Gitblit v1.8.0