import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Modal, Button, notification } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import { getSettingForm } from '@/templates/zshare/formconfig'
|
|
import SettingForm from './settingform'
|
import CreateFunc from '@/templates/zshare/createfunc'
|
import CreateInterface from '@/templates/zshare/createinterface'
|
|
import './index.scss'
|
|
class SettingComponent extends Component {
|
static propTpyes = {
|
type: PropTypes.string, // 菜单类型
|
mainsearch: PropTypes.any, // 主表的搜索条件，当子表设置接收主表条件时有效
|
MenuID: PropTypes.string, // 菜单ID
|
config: PropTypes.object, // 菜单配置信息
|
permFuncField: PropTypes.array, // 存储过程可用开头字段
|
menuformRef: PropTypes.any, // 菜单基本信息表单
|
updatesetting: PropTypes.func
|
}
|
|
state = {
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
menu: null, // 菜单信息
|
formlist: null, // 表单信息
|
visible: false, // 模态框控制
|
loading: false // 设置信息验证保存中
|
}
|
|
/**
|
* @description 全局设置触发
|
*/
|
changeSetting = () => {
|
const { menuformRef, MenuID, config, type, permFuncField, mainsearch } = this.props
|
let menu = {MenuID: MenuID}
|
|
if (menuformRef) {
|
menu = {MenuID: MenuID, MenuName: menuformRef.props.form.getFieldValue('MenuName') || '', MenuNo: menuformRef.props.form.getFieldValue('MenuNo') || ''}
|
}
|
|
let _columns = fromJS(config.columns).toJS()
|
|
let primaryKey = config.setting.primaryKey || ''
|
|
if (!primaryKey || _columns.filter(column => column.field === primaryKey).length === 0) {
|
_columns.forEach(col => {
|
if (col.field.toLowerCase() === 'id') {
|
primaryKey = col.field
|
}
|
})
|
}
|
_columns = _columns.filter(item => item.field && item.type !== 'colspan')
|
_columns = _columns.map(item => {
|
return {
|
value: item.field,
|
text: item.label
|
}
|
})
|
|
// _columns.unshift({value: '', text: '未设置'})
|
|
let _config = fromJS(config).toJS()
|
|
if (mainsearch) { // 综合主页搜索及子表搜索条件
|
_config.search = [..._config.search, ...mainsearch]
|
}
|
|
this.setState({
|
visible: true,
|
formlist: getSettingForm(config.setting, permFuncField, MenuID, primaryKey, _columns, type),
|
menu: menu,
|
config: _config
|
})
|
}
|
|
/**
|
* @description 保存页面配置信息
|
*/
|
settingSave = () => {
|
const { config } = this.props
|
|
this.setState({
|
loading: true
|
})
|
this.settingRef.handleConfirm().then(res => {
|
this.setState({
|
visible: false,
|
loading: false
|
})
|
this.props.updatesetting({...config, setting: res})
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
})
|
}
|
|
/**
|
* @description 创建表格存储过程
|
*/
|
tableCreatFunc = () => {
|
const { config } = this.props
|
const { menu } = this.state
|
|
this.settingRef.handleConfirm().then(setting => {
|
|
if (!(setting.interType === 'inner') || !setting.innerFunc) {
|
notification.warning({
|
top: 92,
|
message: '接口类型为-内部，且存在内部函数时，才可以创建存储过程！',
|
duration: 5
|
})
|
return
|
}
|
|
let _config = {...config, setting: setting}
|
let newLText = Utils.formatOptions(Utils.getTableFunc(setting, menu, _config)) // 创建存储过程sql
|
let DelText = Utils.formatOptions(Utils.dropfunc(setting.innerFunc)) // 删除存储过程sql
|
|
this.refs.funcCreatComponent.exec(setting.innerFunc, newLText, DelText).then(result => {
|
if (result === 'success') {
|
this.props.updatesetting(_config)
|
}
|
})
|
})
|
}
|
|
/**
|
* @description 创建表格接口（读出）
|
*/
|
tableCreatInterface = () => {
|
const { config, type } = this.props
|
const { menu } = this.state
|
|
this.settingRef.handleConfirm().then(setting => {
|
if (setting.interType !== 'inner' || setting.innerFunc) {
|
notification.warning({
|
top: 92,
|
message: '接口类型为-内部，且不存在内部函数时，才可以创建接口！',
|
duration: 5
|
})
|
return
|
}
|
|
let _config = {...config, setting: setting}
|
let _menu = {
|
type: type,
|
MenuID: menu.MenuID,
|
menuName: menu.MenuName,
|
menuNo: menu.MenuNo
|
}
|
|
this.refs.tableCreatInterface.triggerOutInterface(_menu, _config)
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { type } = this.props
|
const { dict, visible, config } = this.state
|
|
return (
|
<div className="model-menu-setting">
|
<Icon type="setting" onClick={this.changeSetting} />
|
{/* 设置全局配置及列表数据源 */}
|
<Modal
|
wrapClassName="model-table-setting-verify-modal"
|
title={dict['model.edit']}
|
visible={visible}
|
width={900}
|
maskClosable={false}
|
onCancel={() => { this.setState({ visible: false })}}
|
footer={[
|
<CreateInterface key="interface" dict={dict} ref="tableCreatInterface" trigger={this.tableCreatInterface}/>,
|
<CreateFunc key="create" dict={dict} ref="funcCreatComponent" trigger={this.tableCreatFunc}/>,
|
<Button key="cancel" onClick={() => { this.setState({ visible: false }) }}>{this.state.dict['header.cancel']}</Button>,
|
<Button key="confirm" type="primary" loading={this.state.loading} onClick={this.settingSave}>{this.state.dict['model.confirm']}</Button>
|
]}
|
destroyOnClose
|
>
|
<SettingForm
|
type={type}
|
dict={dict}
|
config={config}
|
menu={this.state.menu}
|
inputSubmit={this.settingSave}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.settingRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default SettingComponent
|
