| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Popover, Modal, Pagination } from 'antd' |
| | | import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, DownOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | |
| | | const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/components/paste')) |
| | | 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 |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | MKEmitter.addListener('submitModal', this.handleSave) |
| | | // MKEmitter.addListener('logButton', this.logButton) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitStyle', this.getStyle) |
| | | MKEmitter.removeListener('submitModal', this.handleSave) |
| | | // MKEmitter.removeListener('logButton', this.logButton) |
| | | } |
| | |
| | | } |
| | | |
| | | card.errors = [] |
| | | let columns = card.columns.map(c => c.field) |
| | | // let lowcols = card.columns.map(c => c.field.toLowerCase()) |
| | | |
| | | if (card.setting.interType === 'system' && card.setting.execute !== 'false' && !card.setting.dataresource) { |
| | | card.errors.push({ level: 0, detail: '未设置数据源!'}) |
| | |
| | | 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.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()) |
| | | // 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 = '' |
| | | // } |
| | | // } |
| | | |
| | | 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}”大小写与字段集不一致`}) |
| | | } |
| | | }) |
| | | // } 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}”大小写与字段集不一致`}) |
| | | // } |
| | | // }) |
| | | } |
| | | } |
| | | // $check@有效性检测 |
| | | // if (['prompt', 'exec', 'pop'].includes(cell.OpenType) && cell.Ot === 'required' && cell.verify && cell.verify.scripts && cell.verify.scripts.length > 0) { |
| | | // cell.verify.scripts.some(s => { |
| | | // if (s.status !== 'false' && /\$check@|@check\$/ig.test(s.sql)) { |
| | | // card.errors.push({ level: 1, detail: `可选择多行的按钮“${cell.label}”中 $check@ 或 @check$ 将不会生效!`}) |
| | | // return true |
| | | // } |
| | | // return false |
| | | // }) |
| | | // } |
| | | }) |
| | | |
| | | card.subcards.forEach((item, i) => { |
| | |
| | | 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}”大小写与字段集不一致`}) |
| | | } |
| | | }) |
| | | // } 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) { |
| | |
| | | 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}”大小写与字段集不一致`}) |
| | | } |
| | | }) |
| | | // } 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) { |
| | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['background', 'height', 'border', 'padding', 'margin', 'shadow'], card.style) |
| | | MKEmitter.emit('changeStyle', ['background', 'height', 'border', 'padding', 'margin', 'shadow'], 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) |
| | | } |
| | |
| | | |
| | | getWrapForms = () => { |
| | | const { card } = this.state |
| | | |
| | | return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid, card.supNodes) |
| | | |
| | | return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid, card.supNodes, card.setting) |
| | | } |
| | | |
| | | updateWrap = (res) => { |
| | | let _card = {...this.state.card, wrap: res} |
| | | const { card } = this.state |
| | | |
| | | let _card = {...card, wrap: res} |
| | | |
| | | if (res.supNodes) { |
| | | _card.supNodes = res.supNodes |
| | |
| | | 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' |
| | | |
| | | this.updateComponent(_card) |
| | | _card.subcards.forEach(item => { |
| | | delete item.style.marginBottom |
| | | }) |
| | | |
| | | this.setState({card: {..._card, subcards: []}}, () => { |
| | | this.updateComponent(_card) |
| | | }) |
| | | } else { |
| | | this.updateComponent(_card) |
| | | } |
| | | } |
| | | |
| | | pasteComponent = (res, resolve) => { |
| | |
| | | <PasteComponent options={['action', 'search', 'form', '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}/> |
| | | <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | <SettingComponent config={card} updateConfig={this.updateComponent} /> |
| | |
| | | } trigger="hover"> |
| | | <ToolOutlined /> |
| | | </Popover> |
| | | <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> |
| | | <div className={'float-' + (card.wrap.cardFloat || 'left')}> |
| | | <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> |
| | | <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} |
| | | {card.wrap.pagestyle === 'more' && card.setting.laypage === 'true' ? <div className="mk-more">查看更多<DownOutlined/></div> : null} |
| | | <div className="component-name"> |
| | | <div className="center"> |
| | | <div className="title">{card.name}</div> |