From 5046d0d13dc6a8563b8e54e31913bc44cfa1072f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 26 四月 2022 19:23:18 +0800 Subject: [PATCH] 2022-04-26 --- src/menu/components/card/table-card/index.jsx | 281 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 234 insertions(+), 47 deletions(-) diff --git a/src/menu/components/card/table-card/index.jsx b/src/menu/components/card/table-card/index.jsx index a7d5efe..ad0934f 100644 --- a/src/menu/components/card/table-card/index.jsx +++ b/src/menu/components/card/table-card/index.jsx @@ -1,26 +1,27 @@ 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, notification } 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 '../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('@/menu/components/share/pastecomponent')) +const PasteComponent = asyncIconComponent(() => import('@/components/paste')) const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) +const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent')) const { confirm } = Modal @@ -32,7 +33,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, appType: sessionStorage.getItem('appType'), back: false @@ -45,7 +45,6 @@ let _card = { uuid: card.uuid, type: card.type, - floor: card.floor, tabId: card.tabId || '', parentId: card.parentId || '', format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 @@ -70,6 +69,7 @@ }, elements: [] }], + action: [], btnlog: [], } @@ -80,6 +80,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() @@ -93,14 +97,43 @@ col.uuid = Utils.getuuid() return col }) + if (config.action) { + _card.action = config.action.map(col => { + col.uuid = Utils.getuuid() + return col + }) + } } this.setState({ card: _card }) this.props.updateConfig(_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: fromJS(card).toJS() + card: _card }) } } @@ -210,7 +243,7 @@ changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin', 'shadow'], card.style) } getStyle = (comIds, style) => { @@ -227,25 +260,30 @@ this.props.updateConfig(_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) @@ -254,22 +292,26 @@ this.props.updateConfig(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) @@ -342,6 +384,147 @@ this.props.updateConfig(card) } + getWrapForms = () => { + const { card } = this.state + + return getWrapForm(card.wrap, card.subtype) + } + + 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'] + + 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() @@ -358,22 +541,26 @@ <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" /> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} - <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="tablecard" card={card}/> - <PasteComponent config={card} options={['cardcell', 'search', 'form']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <PasteComponent options={['cardcell', 'search', 'form']} 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)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> + <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> <div style={{minHeight: 'calc(100% - 90px)'}}> - {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} move={this.move} deleteElement={this.deleteCard}/>))} + {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' && card.wrap.pagestyle !== 'slide' && appType !== 'mob' ? <Pagination size="small" total={50} /> : null} {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType === 'mob' ? <MobPagination /> : null} -- Gitblit v1.8.0