From dddb2c96f42d9c852dba26ff9a27daa12bd85008 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 14 十月 2021 00:07:20 +0800
Subject: [PATCH] 2021-10-14
---
src/menu/components/card/cardcomponent/menus-wrap/index.jsx | 95 +++++++++++++++
src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx | 83 +++++++++++++
src/menu/components/card/cardcomponent/menus-wrap/index.scss | 9 +
src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx | 82 +++++++++++++
src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss | 0
src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss | 3
src/menu/components/card/cardcomponent/options.jsx | 26 +++
src/menu/components/card/cardcomponent/index.jsx | 16 ++
src/components/normalform/modalform/mkSelect/index.jsx | 4
src/menu/components/card/data-card/index.jsx | 3
10 files changed, 311 insertions(+), 10 deletions(-)
diff --git a/src/components/normalform/modalform/mkSelect/index.jsx b/src/components/normalform/modalform/mkSelect/index.jsx
index 25c5984..73c44d9 100644
--- a/src/components/normalform/modalform/mkSelect/index.jsx
+++ b/src/components/normalform/modalform/mkSelect/index.jsx
@@ -115,8 +115,8 @@
onSelect={this.selectChange}
onChange={(val) => val === undefined && this.selectChange('')}
>
- {options.map(option =>
- <Select.Option key={option.value || option.field} disabled={option.disabled} value={option.value || option.field}>{option.label || option.text}</Select.Option>
+ {options.map((option, i) =>
+ <Select.Option key={i} disabled={option.disabled} value={option.value || option.field || ''}>{option.label || option.text}</Select.Option>
)}
</Select>
)
diff --git a/src/menu/components/card/cardcomponent/index.jsx b/src/menu/components/card/cardcomponent/index.jsx
index 449bec8..eabda1c 100644
--- a/src/menu/components/card/cardcomponent/index.jsx
+++ b/src/menu/components/card/cardcomponent/index.jsx
@@ -13,6 +13,7 @@
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))
+const CardMenus = asyncComponent(() => import('./menus-wrap'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteController = asyncIconComponent(() => import('@/components/paste'))
@@ -192,8 +193,7 @@
}
})
}
-
- return getSettingForm(card.setting, cards.subtype === 'propcard', buttons)
+ return getSettingForm(card.setting, cards.subtype, buttons, card.$cardType, cards.columns)
}
updateSetting = (res) => {
@@ -273,6 +273,16 @@
}
}
+ updateMenus = (res) => {
+ const { card } = this.state
+
+ this.setState({
+ card: {...card, menus: res}
+ })
+
+ this.props.updateElement({...card, menus: res})
+ }
+
render() {
const { cards, offset } = this.props
const { card, elements, side } = this.state
@@ -303,6 +313,8 @@
<NormalForm title="鍗＄墖璁剧疆" width={800} update={this.updateSetting} getForms={this.getSettingForms}>
<Icon type="edit" className="edit" title="缂栬緫"/>
</NormalForm>
+ {cards.subtype === 'datacard' && card.$cardType !== 'extendCard' && card.setting.click === 'menus' ?
+ <CardMenus card={card} updateMenus={this.updateMenus}/> : null}
<CopyComponent type="cardcell" card={card}/>
<PasteController options={['action', 'customCardElement']} updateConfig={this.paste} />
<Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/index.jsx
new file mode 100644
index 0000000..bbd6530
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/index.jsx
@@ -0,0 +1,95 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { Modal, Icon } from 'antd'
+
+import MenusForm from './menus'
+import './index.scss'
+
+class MenusWrap extends Component {
+ static propTpyes = {
+ card: PropTypes.object,
+ updateMenus: PropTypes.func
+ }
+
+ state = {
+ visible: false,
+ menus: [],
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ trigger = () => {
+ const { card } = this.props
+
+ let appType = sessionStorage.getItem('appType') || ''
+ let menulist = []
+
+ if (appType) {
+ menulist = sessionStorage.getItem('appMenus')
+ if (menulist) {
+ try {
+ menulist = JSON.parse(menulist)
+ } catch (e) {
+ menulist = []
+ }
+ } else {
+ menulist = []
+ }
+ } else {
+ menulist = sessionStorage.getItem('fstMenuList')
+ if (menulist) {
+ try {
+ menulist = JSON.parse(menulist)
+ } catch (e) {
+ menulist = []
+ }
+ } else {
+ menulist = []
+ }
+ }
+ this.setState({
+ appType,
+ menulist,
+ visible: true,
+ menus: card.menus || []
+ })
+ }
+
+ submit = () => {
+ this.setState({
+ visible: false
+ })
+ this.props.updateMenus(this.state.menus)
+ }
+
+ update = (menus) => {
+ this.setState({menus})
+ }
+
+ render() {
+ const { visible, menus, appType, menulist } = this.state
+
+ return (
+ <>
+ <Icon type="menu" title="鑿滃崟缁�" onClick={this.trigger}/>
+ <Modal
+ title="鑿滃崟缁�"
+ wrapClassName="menus-field-modal"
+ visible={visible}
+ width={900}
+ maskClosable={false}
+ onOk={this.submit}
+ onCancel={() => { this.setState({ visible: false })}}
+ destroyOnClose
+ >
+ <MenusForm menus={menus} appType={appType} menulist={menulist} update={this.update}/>
+ </Modal>
+ </>
+ )
+ }
+}
+
+export default MenusWrap
\ No newline at end of file
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/index.scss b/src/menu/components/card/cardcomponent/menus-wrap/index.scss
new file mode 100644
index 0000000..52caa86
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/index.scss
@@ -0,0 +1,9 @@
+.menus-field-modal {
+ .ant-modal {
+ top: 70px;
+ }
+ .ant-modal-body {
+ min-height: 150px;
+ padding-top: 40px;
+ }
+}
\ No newline at end of file
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx
new file mode 100644
index 0000000..0637540
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx
@@ -0,0 +1,83 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Form, Row, Col, Button, Input, Select, Cascader } from 'antd'
+import './index.scss'
+
+class ExcelOutColumn extends Component {
+ static propTpyes = {
+ appType: PropTypes.string,
+ menulist: PropTypes.array,
+ columnChange: PropTypes.func // 淇敼鍑芥暟
+ }
+
+ handleConfirm = () => {
+ // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
+ this.props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ this.props.columnChange(values)
+ this.props.form.setFieldsValue({
+ Column: '',
+ Text: '',
+ Width: 20
+ })
+ }
+ })
+ }
+
+ render() {
+ const { appType, menulist } = this.props
+ const { getFieldDecorator } = this.props.form
+ const formItemLayout = {
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 8 }
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 16 }
+ }
+ }
+
+ return (
+ <Form {...formItemLayout} className="verify-form">
+ <Row gutter={24}>
+ <Col span={10}>
+ <Form.Item label="鏍囪瘑">
+ {getFieldDecorator('name', {
+ initialValue: '',
+ rules: [
+ {
+ required: true,
+ message: '璇疯緭鍏ユ爣璇�!'
+ }
+ ]
+ })(<Input placeholder="" autoComplete="off" />)}
+ </Form.Item>
+ </Col>
+ <Col span={10}>
+ <Form.Item label="鑿滃崟">
+ {getFieldDecorator('menu', {
+ initialValue: appType ? '' : [],
+ rules: [
+ {
+ required: true,
+ message: '璇烽�夋嫨鑿滃崟!'
+ }
+ ]
+ })(appType ? <Select>
+ {menulist.map((item, i) => (<Select.Option key={i} value={item.value}> {item.label || item.text} </Select.Option>))}
+ </Select> : <Cascader options={menulist} placeholder=""/>)}
+ </Form.Item>
+ </Col>
+ <Col span={4} className="add">
+ <Button onClick={this.handleConfirm} type="primary" className="mk-green">
+ 娣诲姞
+ </Button>
+ </Col>
+ </Row>
+ </Form>
+ )
+ }
+}
+
+export default Form.create()(ExcelOutColumn)
\ No newline at end of file
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx
new file mode 100644
index 0000000..98f4c98
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx
@@ -0,0 +1,82 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { fromJS } from 'immutable'
+
+import ColumnForm from './columnform'
+import asyncComponent from '@/utils/asyncComponent'
+import './index.scss'
+
+const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
+
+class CardMenus extends Component {
+ static propTpyes = {
+ appType: PropTypes.string,
+ menulist: PropTypes.array,
+ menus: PropTypes.array,
+ update: PropTypes.func
+ }
+
+ state = {
+ columns: [
+ {
+ title: '鏍囪瘑',
+ dataIndex: 'name',
+ inputType: 'input',
+ editable: true,
+ unique: true,
+ width: '30%'
+ },
+ {
+ title: '鑿滃崟',
+ dataIndex: 'menu',
+ inputType: !this.props.appType ? 'cascader' : 'select',
+ editable: true,
+ required: true,
+ width: '40%',
+ render: (text) => {
+ if (text === 'image') {
+ return '鍥剧墖'
+ } else {
+ return '鏂囨湰'
+ }
+ },
+ options: this.props.menulist
+ }
+ ]
+ }
+
+ UNSAFE_componentWillMount() {
+ const { menus } = this.props
+
+ this.setState({
+ menus: fromJS(menus).toJS()
+ })
+ }
+
+ columnChange = (values) => {
+ const { menus } = this.state
+
+ this.setState({menus: [...menus, values]})
+ }
+
+ changeColumns = (columns) => {
+ // const { menus } = this.state
+
+ this.setState({menus: columns})
+ }
+
+ render() {
+ const { appType, menulist } = this.props
+ const { menus, columns } = this.state
+
+ return (
+ <div className="menus-box-wrap">
+ <ColumnForm appType={appType} menulist={menulist} columnChange={this.columnChange}/>
+ {/* <div style={{color: '#959595', fontSize: '13px', paddingLeft: '10px'}}>濡傞渶瀵煎嚭搴忓彿锛岃浣跨敤瀛楁 $Index銆�</div> */}
+ <EditTable actions={['edit', 'move', 'del']} type="excelcolumn" data={menus} columns={columns} onChange={this.changeColumns}/>
+ </div>
+ )
+ }
+}
+
+export default CardMenus
\ No newline at end of file
diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss b/src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss
new file mode 100644
index 0000000..dc5f201
--- /dev/null
+++ b/src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss
@@ -0,0 +1,3 @@
+// .menus-box-wrap {
+
+// }
\ No newline at end of file
diff --git a/src/menu/components/card/cardcomponent/options.jsx b/src/menu/components/card/cardcomponent/options.jsx
index c59147a..e50b706 100644
--- a/src/menu/components/card/cardcomponent/options.jsx
+++ b/src/menu/components/card/cardcomponent/options.jsx
@@ -1,8 +1,9 @@
/**
* @description Setting琛ㄥ崟閰嶇疆淇℃伅
*/
-export default function (setting, hasPrimaryKey, buttons = []) {
+export default function (setting, subtype, buttons = [], cardType, columns) {
let appType = sessionStorage.getItem('appType')
+ let hasMenus = subtype === 'datacard' && cardType !== 'extendCard'
let menulist = []
let appmenulist = []
@@ -29,6 +30,11 @@
} else {
menulist = []
}
+ }
+
+ let ops = []
+ if (hasMenus) {
+ ops = [{value: 'menus', label: '鑿滃崟缁�'}]
}
const cardSettingForm = [
@@ -84,10 +90,10 @@
initval: setting.primaryId || '',
tooltip: '璁剧疆涓�涓睘鎬у崱闈欐�両D锛屽悜鍏朵粬缁勪欢浼犻�掔殑鎸囧畾闈欐�両D鍊�',
required: false,
- forbid: !hasPrimaryKey
+ forbid: subtype !== 'propcard'
},
{
- type: 'radio',
+ type: !hasMenus ? 'radio' : 'select',
field: 'click',
label: '鐐瑰嚮浜嬩欢',
initval: setting.click || '',
@@ -98,16 +104,26 @@
{value: 'menu', label: '鑿滃崟'},
{value: 'link', label: '閾炬帴'},
{value: 'button', label: '鎸夐挳'},
+ ...ops
],
controlFields: [
{field: 'menu', values: ['menu']},
{field: 'linkurl', values: ['link']},
- {field: 'open', values: ['menu', 'link']},
- {field: 'joint', values: ['menu', 'link']},
+ {field: 'open', values: ['menu', 'link', 'menus']},
+ {field: 'joint', values: ['menu', 'link', 'menus']},
{field: 'linkbtn', values: ['button']},
+ {field: 'menuType', values: ['menus']},
]
},
{
+ type: 'select',
+ field: 'menuType',
+ label: '鑿滃崟绫诲瀷',
+ initval: setting.menuType || '',
+ required: true,
+ options: columns,
+ },
+ {
type: appType ? 'select' : 'cascader',
field: 'menu',
label: '鍏宠仈鑿滃崟',
diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx
index 51c6974..021b6da 100644
--- a/src/menu/components/card/data-card/index.jsx
+++ b/src/menu/components/card/data-card/index.jsx
@@ -77,7 +77,8 @@
},
backStyle: {},
elements: [],
- backElements: []
+ backElements: [],
+ menus: []
}]
}
--
Gitblit v1.8.0