From cec96a86ed6b3fba6a10d6d46818e9755ac3b5ca Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 10 三月 2023 11:13:51 +0800
Subject: [PATCH] 2023-03-10
---
src/mob/modalconfig/index.jsx | 289 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 212 insertions(+), 77 deletions(-)
diff --git a/src/mob/modalconfig/index.jsx b/src/mob/modalconfig/index.jsx
index 87ddbd4..8bcad78 100644
--- a/src/mob/modalconfig/index.jsx
+++ b/src/mob/modalconfig/index.jsx
@@ -4,25 +4,24 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
-import { Button, Modal, Collapse, notification, Switch, Icon } from 'antd'
+import { Button, Modal, Collapse, notification, Switch, message } from 'antd'
+import { LeftOutlined } from '@ant-design/icons'
import Api from '@/api'
import Utils from '@/utils/utils.js'
-import zhCN from '@/locales/zh-CN/model.js'
-import enUS from '@/locales/en-US/model.js'
import { getModalForm } from '@/templates/zshare/formconfig'
-import ModalForm from '@/templates/zshare/modalform'
import SourceElement from '@/templates/modalconfig/dragelement/source'
import SettingForm from '@/templates/modalconfig/settingform'
import asyncComponent from '@/utils/asyncComponent'
+import MKEmitter from '@/utils/events.js'
import { SearchItems } from './source'
import './index.scss'
const { Panel } = Collapse
const { confirm } = Modal
-const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const PasteComponent = asyncComponent(() => import('./pastecomponent'))
+const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const DragElement = asyncComponent(() => import('@/mob/components/formdragelement'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
@@ -34,7 +33,6 @@
}
state = {
- dict: CommonDict, // 瀛楀吀
config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛�
visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒�
formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁
@@ -43,7 +41,8 @@
originConfig: null, // 鍘熷鑿滃崟
sqlVerifing: false, // sql楠岃瘉
showField: false, // 鏄剧ず琛ㄥ崟瀛楁鍊�
- standardform: null
+ standardform: null,
+ saving: false
}
/**
@@ -61,6 +60,11 @@
})
}
+ componentDidMount () {
+ MKEmitter.addListener('submitStyle', this.getStyle)
+ MKEmitter.addListener('completeSave', this.completeSave)
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
@@ -68,6 +72,30 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('submitStyle', this.getStyle)
+ MKEmitter.removeListener('completeSave', this.completeSave)
+ }
+
+ completeSave = () => {
+ this.setState({saving: false})
+ }
+
+ 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
+ })
}
/**
@@ -80,8 +108,7 @@
let _config = fromJS(this.state.config).toJS()
if (list.length > _config.fields.length) {
- _config.fields = list.filter(item => !item.origin)
-
+ _config.fields = list
this.setState({
config: _config
}, () => {
@@ -100,43 +127,60 @@
* 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 = [{
- value: '',
- text: '绌�'
- }]
+ let _linksupFields = []
let standardform = null
- _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
- _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
- _tabfields.unshift({field: '', text: '鍘熻〃鍗�'})
-
let uniq = new Map()
- uniq.set(card.field, true)
let index = null
+ uniq.set(card.field, true)
+
config.fields.forEach((item, i) => {
if (card.uuid === item.uuid) {
index = i
}
- if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return
+
+ if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
+ _inputfields.push({
+ field: item.field,
+ label: item.label
+ })
+ }
+ if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
+ _tabfields.push({
+ field: item.field,
+ label: item.label
+ })
+ }
+
+ if (item.type === 'switch') {
+ _linksupFields.push({
+ field: item.field,
+ label: item.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({
- value: item.field,
- text: item.label + ' (琛ㄥ崟)'
+ field: item.field,
+ label: item.label + '-琛ㄥ崟'
})
_linksupFields.push({
- value: item.field,
- text: item.label
+ field: item.field,
+ label: item.label
})
}
})
+
if (index !== null) {
if (index === 0) {
standardform = config.fields[index + 1] || null
@@ -145,13 +189,18 @@
}
}
- componentConfig.columns.forEach(col => {
+ let columns = componentConfig.columns
+ if (btn.$sub) {
+ columns = componentConfig.subColumns || []
+ }
+
+ columns.forEach(col => {
if (col.field && !uniq.has(col.field)) {
uniq.set(col.field, true)
_linkableFields.push({
- value: col.field,
- text: col.label + ' (鏄剧ず鍒�)'
+ field: col.field,
+ label: col.label + '-鏄剧ず鍒�'
})
}
})
@@ -161,16 +210,11 @@
card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
}
- if (!card.span && standardform && standardform.span) {
- card.span = standardform.span
- card.labelwidth = standardform.labelwidth
- }
-
this.setState({
standardform,
visible: true,
card: card,
- formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab)
+ formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, columns)
})
}
@@ -184,16 +228,16 @@
this.formRef.handleConfirm().then(res => {
let _config = fromJS(this.state.config).toJS()
let fieldrepet = false // 瀛楁閲嶅
- let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅
_config.fields = _config.fields.map(item => {
if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
fieldrepet = true
- } else if (res.label && item.uuid !== res.uuid && item.label === res.label) {
- labelrepet = true
}
if (item.uuid === res.uuid) {
+ if (item.style) {
+ res.style = item.style
+ }
return res
} else {
return item
@@ -207,18 +251,9 @@
duration: 10
})
return
- } else if (labelrepet) {
- notification.warning({
- top: 92,
- message: '鍚嶇О宸插瓨鍦紒',
- duration: 10
- })
- return
}
- _config.fields = _config.fields.filter(item => !item.origin)
-
- if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) {
+ if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
this.setState({
sqlVerifing: true
})
@@ -226,20 +261,22 @@
let param = {
func: 's_debug_sql',
exec_type: 'y',
- LText: res.dataSource
+ LText: `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
+ ${res.dataSource}`
}
- param.LText = param.LText.replace(/@\$|\$@/ig, '')
+ 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 = param.LText.replace(/\n/g, ' ')
param.LText = Utils.formatOptions(param.LText)
- param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
param.secretkey = Utils.encrypt('', param.timestamp)
if (window.GLOB.mainSystemApi && res.database === 'sso') {
param.rduri = window.GLOB.mainSystemApi
}
- Api.getLocalConfig(param).then(result => {
+ Api.genericInterface(param).then(result => {
if (result.status) {
this.setState({
sqlVerifing: false,
@@ -288,13 +325,12 @@
submitConfig = () => {
const { config } = this.state
- this.setState({originConfig: fromJS(config).toJS()})
+ this.setState({originConfig: fromJS(config).toJS(), saving: true})
this.props.handleSave(config)
- notification.success({
- top: 92,
- message: '淇濆瓨鎴愬姛銆�',
- duration: 2
- })
+
+ setTimeout(() => {
+ MKEmitter.emit('triggerMenuSave')
+ }, 100)
}
cancelConfig = () => {
@@ -359,73 +395,173 @@
/**
* @description 鏇存柊
*/
- updateConfig = (config) => {
+ plusFields = (items) => {
+ let _config = fromJS(this.state.config).toJS()
+
+ _config.fields.push(...items)
+
+ this.setState({
+ config: _config
+ }, () => {
+ if (items.length === 1 && items[0].focus) {
+ this.handleForm(items[0])
+ }
+ })
+ }
+
+ insert = (config, type) => {
+ if (type === 'forms') {
+ let _config = fromJS(this.state.config).toJS()
+
+ if (_config.fields.length > 0) {
+ let that = this
+ _config.fields = config.fields.map(item => {
+ item.uuid = Utils.getuuid()
+ return item
+ })
+
+ confirm({
+ title: '纭畾鏇挎崲琛ㄥ崟鍚楋紵',
+ content: '鍘熻〃鍗曞皢鍒犻櫎銆�',
+ onOk() {
+ that.setState({
+ config: _config
+ })
+ },
+ onCancel() {}
+ })
+ } else {
+ _config.fields = config.fields.map(item => {
+ item.uuid = Utils.getuuid()
+ return item
+ })
+
+ this.setState({
+ config: _config
+ })
+ notification.success({
+ top: 92,
+ message: '绮樿创鎴愬姛锛�',
+ duration: 2
+ })
+ }
+ return
+ }
+
this.setState({
config
+ }, () => {
+ this.handleForm(config.fields[config.fields.length - 1])
+ })
+ }
+
+ 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('澶嶅埗鎴愬姛銆�')
+ }
+ }
+
+ clearConfig = () => {
+ const _this = this
+ let _config = {...this.state.config, fields: []}
+
+ confirm({
+ content: '纭畾娓呯┖琛ㄥ崟鍚楋紵',
+ onOk() {
+ _this.setState({ config: _config })
+ },
+ onCancel() {}
})
}
render () {
- const { config, dict } = this.state
+ const { btn } = this.props
+ const { config, saving } = this.state
return (
<div className="mob-form-board">
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="1" bordered={false}>
- <Panel header={dict['header.menu.form']} key="1">
+ <Panel header="琛ㄥ崟" key="1">
<div className="search-element">
{SearchItems.map((item, index) => {
return (<SourceElement key={index} content={item}/>)
})}
</div>
- <FieldsComponent
- config={config}
- type="form"
- updatefield={this.updateConfig}
- />
+ <FieldsComponent config={config} type="form" plusFields={this.plusFields}/>
</Panel>
</Collapse>
</div>
<div className="modal-control">
<Button icon="setting" onClick={this.changeSetting}>璁剧疆</Button>
- <Button type="primary" onClick={this.submitConfig}>淇濆瓨</Button>
+ <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button>
<Button onClick={this.cancelConfig}>杩斿洖</Button>
- <PasteComponent type="menu" Tab={null} insert={this.insert} />
- <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
+ <Button type="primary" style={{background: '#26C281', border: 'none'}} onClick={this.triggerCopy}>澶嶅埗</Button>
+ <PasteComponent config={config} updateConfig={this.insert} />
+ <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button>
+ <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
</div>
<div className="setting">
<div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
<div className="mob-shell-inner">
<div className="am-navbar">
- <Icon type="close" />
- <div className="am-navbar-title">{config.setting.title}</div>
+ <LeftOutlined />
+ <div className="am-navbar-title">{btn.label}</div>
+ {config.setting.btnPosition === 'top' ? <Button className="modal-submit-top">{config.setting.btnName || '纭畾'}</Button> : null}
</div>
<DragElement
list={config.fields}
setting={config.setting}
showField={this.state.showField}
- placeholder={this.state.dict['header.form.modal.placeholder']}
handleList={this.handleList}
handleForm={this.handleForm}
closeForm={this.closeForm}
/>
- <Button className="modal-submit" type="primary">纭畾</Button>
+ {config.setting.btnPosition !== 'top' ?
+ <Button className="modal-submit" type="primary">{config.setting.btnName || '纭畾'}</Button> : null}
</div>
</div>
</div>
</DndProvider>
<Modal
- title={this.state.dict['model.edit']}
+ title="缂栬緫"
visible={this.state.visible}
- width={850}
+ width={950}
+ maskClosable={false}
onCancel={this.editModalCancel}
onOk={this.handleSubmit}
confirmLoading={this.state.sqlVerifing}
destroyOnClose
>
<ModalForm
- dict={this.state.dict}
card={this.state.card}
formlist={this.state.formlist}
inputSubmit={this.handleSubmit}
@@ -434,9 +570,9 @@
/>
</Modal>
<Modal
- title={this.state.dict['model.edit']}
+ title="缂栬緫"
visible={this.state.settingVisible}
- width={850}
+ width={900}
maskClosable={false}
onOk={this.settingSave}
onCancel={() => { this.setState({ settingVisible: false }) }}
@@ -444,7 +580,6 @@
>
<SettingForm
config={config}
- dict={this.state.dict}
isSubTab={!!this.props.editTab}
inputSubmit={this.settingSave}
wrappedComponentRef={(inst) => this.settingRef = inst}
--
Gitblit v1.8.0