From 9a11e62adeb8d435b52a361eb62d5b59e1deef2a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 23 五月 2024 21:14:50 +0800
Subject: [PATCH] 2024-05-23
---
src/menu/modalconfig/index.jsx | 286 +++++++++++++++++++-------------------------------------
1 files changed, 97 insertions(+), 189 deletions(-)
diff --git a/src/menu/modalconfig/index.jsx b/src/menu/modalconfig/index.jsx
index 6b1c9ae..9124c01 100644
--- a/src/menu/modalconfig/index.jsx
+++ b/src/menu/modalconfig/index.jsx
@@ -3,14 +3,10 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
-import moment from 'moment'
-import { Button, Card, Modal, Collapse, notification, Switch } from 'antd'
-import { SettingOutlined } from '@ant-design/icons'
+import { Button, Card, Modal, Collapse, Switch, message, Popover } from 'antd'
+import { SettingOutlined, CopyOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'
-import Api from '@/api'
-import Utils from '@/utils/utils.js'
import { getModalForm } from '@/templates/zshare/formconfig'
-
import SourceElement from '@/templates/modalconfig/dragelement/source'
import SettingForm from '@/templates/modalconfig/settingform'
import asyncComponent from '@/utils/asyncComponent'
@@ -20,8 +16,12 @@
const { Panel } = Collapse
const { confirm } = Modal
+
+const MkIcon = asyncComponent(() => import('@/components/mk-icon'))
+const TableComponent = asyncComponent(() => import('./tablecomponent'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
-const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
+const PasteForms = asyncComponent(() => import('@/menu/components/share/pasteforms'))
+// const FormFork = asyncComponent(() => import('@/menu/modalconfig/formfork'))
const DragElement = asyncComponent(() => import('@/templates/modalconfig/dragelement'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
@@ -41,7 +41,6 @@
originConfig: null, // 鍘熷鑿滃崟
sqlVerifing: false, // sql楠岃瘉
showField: false, // 鏄剧ず琛ㄥ崟瀛楁鍊�
- standardform: null,
saving: false
}
@@ -62,7 +61,6 @@
componentDidMount () {
MKEmitter.addListener('completeSave', this.completeSave)
- MKEmitter.addListener('submitStyle', this.getStyle)
}
/**
@@ -73,7 +71,6 @@
return
}
MKEmitter.removeListener('completeSave', this.completeSave)
- MKEmitter.removeListener('submitStyle', this.getStyle)
}
/**
@@ -101,130 +98,21 @@
/**
* @description 琛ㄥ崟缂栬緫
- * 1銆佹樉绀虹紪杈戝脊绐�-visible
- * 2銆佷繚瀛樼紪杈戦」-card
- * 3銆佽缃紪杈戝弬鏁伴」-formlist
*/
handleForm = (_card) => {
- const { componentConfig } = this.props
+ const { componentConfig, btn } = this.props
const { config } = this.state
+
let card = fromJS(_card).toJS()
- let _inputfields = []
- let _tabfields = []
- let _linkableFields = []
- let _linksupFields = []
- let standardform = null
-
- let uniq = new Map()
- let index = null
- uniq.set(card.field, true)
-
- let _inputIndex = 1
- let _tabIndex = 1
- let _linkIndex = 1
- config.fields.forEach((item, i) => {
- if (card.uuid === item.uuid) {
- index = i
- }
-
- let label = item.label || ''
- if (item.field && item.field.toLowerCase() !== label.toLowerCase()) {
- label = label + ' (' + item.field + ')'
- }
-
- if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
- _inputfields.push({
- field: item.field,
- label: _inputIndex + '銆�' + label
- })
- _inputIndex++
- }
- if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
- _tabfields.push({
- field: item.field,
- label: _tabIndex + '銆�' + label
- })
- _tabIndex++
- }
-
- if (item.type === 'switch') {
- _linksupFields.push({
- field: item.field,
- label: _linkIndex + '銆�' + label
- })
- }
-
- if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return
- if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫�
- if (item.field && !uniq.has(item.field)) {
- uniq.set(item.field, true)
-
- _linkableFields.push({
- field: item.field,
- label: _linkIndex + '銆�' + item.label + ' (琛ㄥ崟)'
- })
- _linksupFields.push({
- field: item.field,
- label: _linkIndex + '銆�' + label
- })
- _linkIndex++
- }
- })
- if (index !== null) {
- if (index === 0) {
- standardform = config.fields[index + 1] || null
- } else {
- standardform = config.fields[index - 1] || null
- }
- }
-
- _tabfields.unshift({field: '', label: '鍘熻〃鍗�'})
-
- componentConfig.columns.forEach(col => {
- if (col.field && !uniq.has(col.field)) {
- uniq.set(col.field, true)
-
- _linkableFields.push({
- field: col.field,
- label: _linkIndex + '銆�' + col.label + ' (鏄剧ず鍒�)'
- })
- _linkIndex++
- }
- })
-
- if (card.linkSubField && card.linkSubField.length > 0) {
- let fields = _inputfields.map(item => item.field)
- card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
- }
-
- if (!card.span && standardform && standardform.span) {
- card.span = standardform.span
- card.labelwidth = standardform.labelwidth
+ let columns = componentConfig.columns
+ if (btn.$sub) {
+ columns = componentConfig.subColumns || []
}
this.setState({
- standardform,
visible: true,
card: card,
- formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields)
- })
- }
-
- getStyle = (comIds, style) => {
- const { config } = this.state
-
- if (comIds[0] !== 'form') return
-
- let Index = config.fields.findIndex(n => n.uuid === comIds[1])
-
- if (Index === -1) return
-
- let _config = fromJS(config).toJS()
-
- _config.fields[Index].style = style
-
- this.setState({
- config: _config
+ formlist: getModalForm(card, config.fields, columns)
})
}
@@ -235,70 +123,33 @@
* 3銆侀�氳繃loading鍒锋柊
*/
handleSubmit = () => {
- this.formRef.handleConfirm().then(res => {
- let _config = fromJS(this.state.config).toJS()
- let fieldrepet = false // 瀛楁閲嶅
+ let _config = fromJS(this.state.config).toJS()
+ this.formRef.handleConfirm(_config.fields).then(res => {
_config.fields = _config.fields.map(item => {
- if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
- fieldrepet = true
- }
+ delete item.focus
- if (item.uuid === res.uuid) {
- if (item.style) {
- res.style = item.style
- }
- return res
+ if (item.uuid === res.values.uuid) {
+ return res.values
} else {
return item
}
})
- if (fieldrepet) {
- notification.warning({
- top: 92,
- message: '瀛楁宸插瓨鍦紒',
- duration: 10
- })
- return
- }
-
- if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
+ if (res.loading) {
this.setState({
sqlVerifing: true
})
- let param = {
- func: 's_debug_sql',
- exec_type: 'y',
- LText: res.dataSource
- }
-
- param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
- param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`)
-
- param.LText = Utils.formatOptions(param.LText)
- param.secretkey = Utils.encrypt('', param.timestamp)
-
- if (window.GLOB.mainSystemApi && res.database === 'sso') {
- param.rduri = window.GLOB.mainSystemApi
- }
-
- Api.genericInterface(param).then(result => {
- if (result.status) {
- this.setState({
- sqlVerifing: false,
- config: _config,
- card: null,
- visible: false
- })
- } else {
- this.setState({sqlVerifing: false})
-
- Modal.error({
- title: result.message
- })
- }
+ res.promise().then(() => {
+ this.setState({
+ sqlVerifing: false,
+ config: _config,
+ card: null,
+ visible: false
+ })
+ }, () => {
+ this.setState({sqlVerifing: false})
})
} else {
this.setState({
@@ -474,14 +325,60 @@
})
}
+ pasteFields = (items) => {
+ let _config = fromJS(this.state.config).toJS()
+ _config.fields = items
+
+ this.setState({
+ config: _config
+ })
+ }
+
+ triggerCopy = () => {
+ const { config } = this.state
+
+ let val = {
+ copyType: 'forms',
+ fields: config.fields || []
+ }
+
+ if (val.fields.length === 0) {
+ message.warning('琛ㄥ崟鍏冪礌涓嶅彲涓虹┖锛�')
+ return
+ }
+
+ try {
+ val = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
+ } catch (e) {
+ console.warn(e)
+ message.warning('澶嶅埗澶辫触锛岃閲嶈瘯锛�')
+ val = ''
+ }
+
+ if (val) {
+ let oInput = document.createElement('input')
+ oInput.value = val
+ document.body.appendChild(oInput)
+ oInput.select()
+ document.execCommand('Copy')
+ document.body.removeChild(oInput)
+
+ message.success('澶嶅埗鎴愬姛銆�')
+ }
+ }
+
render () {
- const { config, saving } = this.state
+ const { btn } = this.props
+ const { config, saving, card } = this.state
return (
<div className="modal-form-board">
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="1" bordered={false}>
+ <Panel header="鍩烘湰淇℃伅" key="0">
+ <TableComponent />
+ </Panel>
<Panel header="琛ㄥ崟" key="1">
<div className="search-element">
{SearchItems.map((item, index) => {
@@ -495,8 +392,7 @@
<div className="setting">
<Card title="琛ㄥ崟閰嶇疆" bordered={false} extra={
<div>
- <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button>
- <EditComponent options={['form']} config={this.state.config} plusFields={this.plusFields}/>
+ <PasteForms type="toolbar" config={config} update={this.pasteFields}/>
<Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button>
<Button onClick={this.cancelConfig}>杩斿洖</Button>
</div>
@@ -504,12 +400,23 @@
<SettingOutlined onClick={this.changeSetting} />
<div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.width : config.setting.width + '%'}}>
<div className="ant-modal-header">
- <div className="ant-modal-title">{config.setting.title}</div>
- <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button>
- <Button className="mk-cols-change" onClick={() => this.changecols(2)}>2鍒�</Button>
- <Button className="mk-cols-change" onClick={() => this.changecols(3)}>3鍒�</Button>
- <Button className="mk-cols-change" onClick={() => this.changecols(4)}>4鍒�</Button>
- <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
+ <div className="ant-modal-title">{config.setting.icon ? <span className={'mk-modal-icon-' + config.setting.iconType} style={{background: config.setting.iconColor || 'unset', color: config.setting.iconColor || 'inherit'}}><MkIcon type={config.setting.icon}/></span> : null}{btn.label}</div>
+ <div className="mk-form-tool">
+ <DeleteOutlined title="娓呯┖" onClick={this.clearConfig} />
+ <Popover title="鍒囨崲甯冨眬" overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <>
+ <Button style={{marginRight: '10px'}} onClick={() => this.changecols(1)}>1鍒�</Button>
+ <Button style={{marginRight: '10px'}} onClick={() => this.changecols(2)}>2鍒�</Button>
+ <Button style={{marginRight: '10px'}} onClick={() => this.changecols(3)}>3鍒�</Button>
+ <Button onClick={() => this.changecols(4)}>4鍒�</Button>
+ </>
+ } trigger="hover">
+ <SwapOutlined />
+ </Popover>
+ {/* <FormFork forms={config.fields}/> */}
+ <CopyOutlined title="澶嶅埗" onClick={this.triggerCopy} />
+ <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
+ </div>
</div>
<div className="ant-modal-body">
<div className="modal-form">
@@ -539,7 +446,8 @@
</div>
</DndProvider>
<Modal
- title="缂栬緫"
+ title={card && card.$copy ? '澶嶅埗' : '缂栬緫'}
+ wrapClassName="mk-scroll-modal"
visible={this.state.visible}
width={950}
maskClosable={false}
@@ -549,10 +457,10 @@
destroyOnClose
>
<ModalForm
- card={this.state.card}
+ card={card}
formlist={this.state.formlist}
inputSubmit={this.handleSubmit}
- standardform={this.state.standardform}
+ fields={config.fields}
wrappedComponentRef={(inst) => this.formRef = inst}
/>
</Modal>
--
Gitblit v1.8.0