From 04dc8530bf6241573fe788e0e74a5cf4d9a8e0b3 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 25 八月 2022 18:29:56 +0800
Subject: [PATCH] 2022-08-25
---
src/views/tabledesign/menuform/index.jsx | 323 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 243 insertions(+), 80 deletions(-)
diff --git a/src/views/tabledesign/menuform/index.jsx b/src/views/tabledesign/menuform/index.jsx
index 5e09244..4b68d28 100644
--- a/src/views/tabledesign/menuform/index.jsx
+++ b/src/views/tabledesign/menuform/index.jsx
@@ -1,69 +1,190 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Select } from 'antd'
+import { Form, Row, Col, Input, Select, notification, Radio, Tooltip, Switch } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
+import Api from '@/api'
+import options from '@/store/options.js'
import './index.scss'
const { TextArea } = Input
-class MainSearch extends Component {
+class CustomMenuForm extends Component {
static propTpyes = {
- menu: PropTypes.object, // 鑿滃崟淇℃伅
- inputSubmit: PropTypes.func // 鍥炶溅鎻愪氦
+ config: PropTypes.object,
+ MenuId: PropTypes.string,
+ MenuName: PropTypes.string,
+ MenuNo: PropTypes.string,
+ parentId: PropTypes.string,
+ updateConfig: PropTypes.func
}
state = {
- supMenuList: []
+ fstMenuId: '',
+ menulist: [],
+ smenulist: []
}
UNSAFE_componentWillMount () {
- this.setState({
- supMenuList: this.props.menu.supMenuList
+ const { MenuId, config } = this.props
+ Api.getSystemConfig({func: 's_get_pc_menus', systemType: options.sysType, debug: 'Y'}).then(result => {
+ if (result.status) {
+ let thdMenu = null
+ let thdMenuList = []
+ let menulist = result.fst_menu.map(fst => {
+ let fstItem = {
+ MenuID: fst.MenuID,
+ MenuName: fst.MenuName,
+ value: fst.MenuID,
+ label: fst.MenuName,
+ isLeaf: false,
+ children: []
+ }
+
+ if (fst.snd_menu) {
+ fstItem.children = fst.snd_menu.map(snd => {
+ let sndItem = {
+ ParentId: fst.MenuID,
+ MenuID: snd.MenuID,
+ MenuName: snd.MenuName,
+ value: snd.MenuID,
+ label: snd.MenuName,
+ children: []
+ }
+
+ if (snd.trd_menu) {
+ sndItem.children = snd.trd_menu.map(trd => {
+ let trdItem = {
+ FstId: fst.MenuID,
+ ParentId: snd.MenuID,
+ MenuID: trd.MenuID,
+ MenuName: trd.MenuName,
+ MenuNo: trd.MenuNo,
+ EasyCode: trd.EasyCode,
+ value: trd.MenuID,
+ label: trd.MenuName,
+ type: 'CommonTable',
+ // disabled: trd.MenuID === MenuId
+ disabled: false
+ }
+
+ if (MenuId === trd.MenuID) {
+ thdMenu = trdItem
+ }
+
+ if (trd.PageParam) {
+ try {
+ trd.PageParam = JSON.parse(trd.PageParam)
+ trdItem.type = trd.PageParam.Template || 'CommonTable'
+ } catch (e) {
+
+ }
+ }
+
+ thdMenuList.push(trdItem)
+
+ return trdItem
+ })
+ }
+ return sndItem
+ })
+ }
+ return fstItem
+ })
+
+ let smenulist = []
+ menulist.forEach(item => {
+ if (thdMenu && (item.MenuID === thdMenu.FstId)) {
+ smenulist = item.children
+ }
+ })
+ sessionStorage.setItem('fstMenuList', JSON.stringify(menulist))
+ sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
+ this.props.updateConfig({...config, fstMenuId: thdMenu ? thdMenu.FstId : ''})
+
+ this.setState({
+ fstMenuId: thdMenu ? thdMenu.FstId : '',
+ menulist,
+ smenulist
+ }, () => {
+ this.props.form.setFieldsValue({
+ fstMenuId: thdMenu ? thdMenu.FstId : '',
+ parentId: thdMenu ? thdMenu.ParentId : ''
+ })
+ })
+ } else {
+ notification.warning({
+ top: 92,
+ message: result.message,
+ duration: 5
+ })
+ }
})
}
- changeMenu = (val) => {
- const { menu } = this.state
+ // 涓�浜岀骇鑿滃崟鍒囨崲
+ selectChange = (key, value) => {
+ const { config } = this.props
+ const { menulist } = this.state
- let submenu = menu.fstMenuList.filter(item => item.MenuID === val)[0]
+ if (key === 'fstMenuId') {
+ let smenulist = []
+ menulist.forEach(item => {
+ if (item.MenuID === value) {
+ smenulist = item.children
+ }
+ })
- if (submenu) {
this.setState({
- supMenuList: submenu.children
+ smenulist
}, () => {
- this.props.form.setFieldsValue({ParentID: submenu.children[0] ? submenu.children[0].MenuID : ''})
+ let _id = smenulist[0] ? smenulist[0].MenuID : ''
+ this.props.form.setFieldsValue({parentId: _id})
+ this.props.updateConfig({...config, fstMenuId: value, parentId: _id})
})
- } else {
- this.setState({
- supMenuList: []
- }, () => {
- this.props.form.setFieldsValue({ParentID: ''})
- })
+ } else if (key === 'parentId') {
+ this.props.updateConfig({...config, parentId: value})
+ } else if (key === 'timeUnit') {
+ this.props.updateConfig({...config, timeUnit: value})
+ } else if (key === 'OpenType') {
+ this.props.updateConfig({...config, OpenType: value})
+ } else if (key === 'hidden') {
+ this.props.updateConfig({...config, hidden: value})
+ } else if (key === 'permission') {
+ this.props.updateConfig({...config, permission: value})
}
}
- handleConfirm = () => {
- // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
- return new Promise((resolve, reject) => {
- this.props.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- resolve(values)
- } else {
- reject(err)
- }
- })
- })
+ // 鑿滃崟鍚嶇О
+ changeName = (e) => {
+ this.props.updateConfig({...this.props.config, MenuName: e.target.value})
}
- onEnterSubmit = (e) => {
- // 琛ㄥ崟鍥炶溅鎻愪氦
- if (e.key !== 'Enter') return
-
- this.props.inputSubmit && this.props.inputSubmit()
+ // 鑿滃崟鍙傛暟
+ changeNo = (e) => {
+ this.props.updateConfig({...this.props.config, MenuNo: e.target.value})
+ }
+
+ // 鍔╄鐮�
+ changeEasyCode = (e) => {
+ this.props.updateConfig({...this.props.config, easyCode: e.target.value})
+ }
+
+ changeRemark = (e) => {
+ this.props.updateConfig({...this.props.config, Remark: e.target.value})
+ }
+
+ changeCacheDay = (val) => {
+ if (typeof(val) !== 'number') {
+ val = ''
+ }
+ this.props.updateConfig({...this.props.config, cacheTime: val})
}
render() {
+ const { MenuName, MenuNo, config } = this.props
+ const { menulist, smenulist } = this.state
const { getFieldDecorator } = this.props.form
- const { menu } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -76,100 +197,142 @@
}
return (
- <Form {...formItemLayout} style={{paddingRight: '20px'}} onKeyDown={this.onEnterSubmit}>
- <Row gutter={24}>
- <Col span={22}>
- <Form.Item label={'涓�绾ц彍鍗�'}>
+ <Form {...formItemLayout} className="custom-menu-form">
+ <Row>
+ <Col span={24}>
+ <Form.Item label="涓�绾ц彍鍗�">
{getFieldDecorator('fstMenuId', {
- initialValue: menu.fstMenuId,
+ initialValue: '',
rules: [
{
required: true,
- message: '璇烽�夋嫨涓婄骇鑿滃崟!'
+ message: '璇烽�夋嫨涓�绾ц彍鍗�!'
}
]
})(
- <Select
- showSearch
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- onChange={this.changeMenu}
- >
- {menu.fstMenuList.map(option =>
- <Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
+ <Select onChange={(value) => {this.selectChange('fstMenuId', value)}}>
+ {menulist.map(option =>
+ <Select.Option key={option.MenuID} value={option.MenuID}>
+ {option.MenuName}
+ </Select.Option>
)}
</Select>
)}
</Form.Item>
</Col>
- <Col span={22}>
- <Form.Item label={'浜岀骇鑿滃崟'}>
- {getFieldDecorator('ParentID', {
- initialValue: menu.ParentId,
+ <Col span={24}>
+ <Form.Item label="浜岀骇鑿滃崟">
+ {getFieldDecorator('parentId', {
+ initialValue: '',
rules: [
{
required: true,
- message: '璇烽�夋嫨涓婄骇鑿滃崟!'
+ message: '璇烽�夋嫨浜岀骇鑿滃崟!'
}
]
})(
- <Select
- showSearch
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- >
- {menu.supMenuList.map(option =>
- <Select.Option key={option.MenuID} value={option.MenuID}>{option.text || option.MenuName}</Select.Option>
+ <Select onChange={(value) => {this.selectChange('parentId', value)}}>
+ {smenulist.map(option =>
+ <Select.Option key={option.MenuID} value={option.MenuID}>
+ {option.MenuName}
+ </Select.Option>
)}
</Select>
)}
</Form.Item>
</Col>
- <Col span={22}>
- <Form.Item label={'鑿滃崟鍚嶇О'}>
+ <Col span={24}>
+ <Form.Item label="鑿滃崟鍚嶇О">
{getFieldDecorator('MenuName', {
- initialValue: menu.MenuName || '',
+ initialValue: MenuName,
rules: [
{
required: true,
message: '璇疯緭鍏ヨ彍鍗曞悕绉�!'
}
]
- })(<Input placeholder="" autoFocus autoComplete="off" />)}
+ })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)}
</Form.Item>
</Col>
- <Col span={22}>
- <Form.Item label={'鑿滃崟鍙傛暟'}>
+ <Col span={24}>
+ <Form.Item label="鑿滃崟鍙傛暟">
{getFieldDecorator('MenuNo', {
- initialValue: menu.MenuNo || '',
+ initialValue: MenuNo,
rules: [
{
required: true,
message: '璇疯緭鍏ヨ彍鍗曞弬鏁�!'
}
]
- })(<Input placeholder="" autoComplete="off" />)}
+ })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)}
</Form.Item>
</Col>
- {menu.Template === 'NewPage' ? <Col span={22}>
- <Form.Item label={'閾炬帴鍦板潃'}>
- {getFieldDecorator('url', {
- initialValue: menu.url || '',
+ <Col span={24}>
+ <Form.Item label="鎵撳紑鏂瑰紡">
+ {getFieldDecorator('OpenType', {
+ initialValue: config.OpenType || 'newtab',
rules: [
{
required: true,
- message: '璇疯緭鍏ラ〉闈㈠湴鍧�!'
- },
- {
- max: 1024,
- message: '鍦板潃鏈�闀夸负1024涓瓧绗�!'
+ message: '璇烽�夋嫨鎵撳紑鏂瑰紡!'
}
]
- })(<TextArea rows={2} />)}
+ })(
+ <Radio.Group onChange={(e) => {this.selectChange('OpenType', e.target.value)}}>
+ <Radio value="newtab">鏍囩椤�</Radio>
+ <Radio value="newpage">鏂伴〉闈�</Radio>
+ </Radio.Group>
+ )}
</Form.Item>
- </Col> : null}
+ </Col>
+ <Col span={24}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="璺宠繃鏉冮檺楠岃瘉鏃讹紝椤甸潰涓粍浠跺強鎸夐挳涓嶅湪杩涜鏉冮檺鎺у埗銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鏉冮檺楠岃瘉
+ </Tooltip>
+ }>
+ {getFieldDecorator('permission', {
+ initialValue: config.permission || 'true'
+ })(
+ <Radio.Group onChange={(e) => {this.selectChange('permission', e.target.value)}}>
+ <Radio value="true">浣跨敤</Radio>
+ <Radio value="false">涓嶄娇鐢�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item label="鍔╄鐮�">
+ {getFieldDecorator('easyCode', {
+ initialValue: config.easyCode
+ })(<Input placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>)}
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item label={'闅愯棌鑿滃崟'}>
+ <Switch checkedChildren={'鏄�'} checked={config.hidden === 'true'} unCheckedChildren={'鍚�'} onChange={(value) => {
+ this.selectChange('hidden', value + '')
+ }} />
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item label="澶囨敞">
+ {getFieldDecorator('Remark', {
+ initialValue: config.Remark || '',
+ rules: [
+ {
+ max: 512,
+ message: '澶囨敞鏈�澶�512涓瓧绗︼紒'
+ }
+ ]
+ })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
+ </Form.Item>
+ </Col>
</Row>
</Form>
)
}
}
-export default Form.create()(MainSearch)
\ No newline at end of file
+export default Form.create()(CustomMenuForm)
\ No newline at end of file
--
Gitblit v1.8.0