TreeviewCopyright © aleen42 all right reserved, powered by aleen42
模态框组件扩展
组件库
- MDF内嵌了tinper-bee和antd两套UI库供大家进行基于两个库组件进行二次扩展封装以达到特色化需求
以antd组件库的模态框Modal为例
原组件库模态框Modal地址
- antd组件库-模态框Modal
- 可以参考基础的实现效果，来写自己的代码。（注意区分MDF内嵌的antd组件库的版本）目前内嵌的是2.X版本
图 1
目前MDF支持的模态框方式
首先要清楚，MDF目前支持的模态框有哪几种方式，目前支持的有以下几种：
首先需要通过页面建模一个模态框，具体细节可以参照以下地址去创建模态框
(http://doc.yonisv.com/mybook/developergame/extension/2-/modal.html)一、打开表格列表类模态框（MDF内部实现）
//获取按钮模型，执行点击事件，触发表格列表弹窗
viewModel.get('XXX').on('click', function () {
const data = {
//单据类型：VoucherList为列表类型 voucher为卡片类型
billtype: 'VoucherList',
//单据号
billno: '904595b4List',
params: {
// 单据页面展示状态(编辑态edit、新增态add、浏览态browse)
mode: 'add',
//传递给模态框的数据
reqData:reqData
}
};
//打开一个单据，并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
})
//关闭模态框
viewModel.communication({type:'modal',payload:{data:false}});
- 二、打开卡片类模态框（MDF内部实现）
//获取按钮模型，执行点击事件，触发表格列表弹窗
viewModel.get('XXX').on('click', function () {
const data = {
//单据类型：VoucherList为列表类型 voucher为卡片类型
billtype: 'voucher',
//单据号
billno: '904595b4',
params: {
// 单据页面展示状态(编辑态edit、新增态add、浏览态browse)
mode: 'add',
//传递给模态框的数据
reqData:reqData
}
};
//打开一个单据，并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
})
//关闭模态框
viewModel.communication({type:'modal',payload:{data:false}});
- 三、Confirm弹窗
//获取按钮模型，触发点击事件，内部触发弹窗
viewModel.get('button5xh').on("click", function(data) {
//确认弹窗触发，第一个参数为 弹窗真实内容，第二个参数为点击OK的Callback，第三个参数为点击取消的CallBack
cb.utils.confirm('xxxxxx', function() {
// 点击确定
// todo something...
}, function() {
// 点击取消
// todo something...
})
})
- 四、扩展模态框的调用
//获取按钮模型，触发点击事件，内部触发弹窗
viewModel.get('button6ji').on('click', function () {
//触发弹窗
viewModel.communication({
//模态框类型-固定写死
type: "modal",
payload: {
//扩展的组件名
key: "ForceDown",
data: {
//把模型传递给组件内部，用于组件和MDF模型关联使用（比如组件内发布事件，把组件内的值传到MDF模型中）
viewModel: viewModel,
//传递给组件内部的数据（组件内部通过 this.props.myParam获取）
myParam: {
title: "弹窗示例之扩展弹窗",
billLink: "123"
}
}
}
})
})
以下介绍上面讲的第四种，模态框组件扩展的过程和使用方式
创建文件
src/web/common/extends/model/ 下创建 ForceDown.jsx
图 2
模态框Model查看官方文档原厂使用方法以及支持扩展的API属性和方法,模态框内部可以展示需求需要的内容
图 3
扩展模态框Model代码
- 引入antd的Modal、Input、Row、Col组件
- 为了保持组件的可复用性，最好把传入的props属性值定义成固定属性字段和方法，实现高内聚低耦合
- 扩展模态框组件，获取MDF数据，需要在外部把viewModel、数据传进来
- 传递到组件内的props属性具体值如下图：
图 4
/*
*
* @title 基础 重新创建模态框页面
* @description props MDF模型传入给组件内部的属性（以下介绍包括的属性）
* @description myParam MDF模型传入组件的数据
* @description viewModel MDF模型传入组件
*/
import React, { Component } from 'react';
import { Modal,Button,Input,Row,Col} from 'antd';
const { TextArea } = Input;
export default class ForceDown extends Component {
constructor(props) {
super(props);
//设置状态
this.state = {
value: '',//输入内容
len: 255 //长度限制
}
}
componentDidMount() {
//组件加载完成，把组件和MDF模型进行绑定
if(this.props.viewModel)
this.props.viewModel.addListener(this);
}
componentWillUnmount(){
//组件即将卸载时，把组件和MDF模型进行解绑
if(this.props.viewModel)
this.props.viewModel.removeListener(this);
}
//点击模态框确认按钮
handleOk() {
//MDF框架发布订阅模式，通过execute发布'handleForcedown'函数，把后面参数传入handleForcedown，框架内扩展时，通过on 触发此方法，得到传递的参数
this.props.viewModel.execute('handleForcedown', {
key: 'Audit',
value: this.state.value
});
this.props.close();
}
//点击模态框取消按钮
handleCancel = () => {
//关闭弹窗
this.props.close();
}
//textArea组件值发生改变时事件
handleChange = (e) => {
let _value = e.target.value
let _len = 255 - _value.length
if (_len>=0) {
this.setState({
value: _value,
len: _len
})
} else {
let arr = _value.split('')
arr.length=255
this.setState({
value: arr.join(''),
len: 0
})
}
}
render() {
const TextareaType = {
placeholder:'',
autosize:{ minRows: 4, maxRows: 6 }
}
return (
<Modal width={600} visible={true} maskClosable={false} title='违规下架原因：' onOk={this.handleOk.bind(this)} onCancel={this.handleCancel} className='audit'>
<Row>
<Col span={24} className='audit-row'>
<TextArea {...TextareaType} value = {this.state.value} onChange={this.handleChange}/>
<p className='audit-tips'>还可以输入<span>{this.state.len}</span>个字</p>
</Col>
</Row>
</Modal>
);
}
}
注册组件
src/web/common/extends/model/index.jsx
图 5
export ForceDown from './ForceDown';
扩展模态框组件使用
//获取按钮模型，触发点击事件，内部触发弹窗
viewModel.get('button6ji').on('click', function () {
//触发弹窗
viewModel.communication({
//模态框类型-固定写死
type: "modal",
payload: {
//扩展的组件名
key: "ForceDown",
data: {
//把模型传递给组件内部，用于组件和MDF模型关联使用（比如组件内发布事件，把组件内的值传到MDF模型中）
viewModel: viewModel,
//传递给组件内部的数据（组件内部通过 this.props.myParam获取）
myParam: {
title: "弹窗示例之扩展弹窗",
billLink: "123"
}
}
}
})
})
//获取组件内部传递给MDF模型的数据方法
viewModel.on('handleForcedown',function(data){
//data为通过发布handleForcedown函数，传递过来的值即：
/*
data:{
key: 'Audit',
value: this.state.value
}
*/
cb.utils.alert(data);
})
自定义模态框组件效果展示
图 6
组件返回数据效果展示
//获取组件内部传递给MDF模型的数据方法
viewModel.on('handleForcedown',function(data){
//data为通过发布handleForcedown函数，传递过来的值即：
/*
data:{
key: 'Audit',
value: this.state.value
}
*/
cb.utils.alert(`${data.key}${data.value}`);
})
图 7
组件封装的建议
- 1、无状态组件要用函数式封装方式进行封装组件
- 2、组件接收的属性props需要用propTypes或者结合TS数据特性，进行数据类型验证
- 3、使用React HOOKS方式进行扩展