模态框组件扩展

组件库

组件库

  • MDF内嵌了tinper-bee和antd两套UI库供大家进行基于两个库组件进行二次扩展封装以达到特色化需求

以antd组件库的模态框Modal为例

原组件库模态框Modal地址

  • antd组件库-模态框Modal
  • 可以参考基础的实现效果,来写自己的代码。(注意区分MDF内嵌的antd组件库的版本)目前内嵌的是2.X版本

undefined

图 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

undefined

图 2

模态框Model查看官方文档原厂使用方法以及支持扩展的API属性和方法,模态框内部可以展示需求需要的内容

undefined

图 3

扩展模态框Model代码

  • 引入antd的Modal、Input、Row、Col组件
  • 为了保持组件的可复用性,最好把传入的props属性值定义成固定属性字段和方法,实现高内聚低耦合
  • 扩展模态框组件,获取MDF数据,需要在外部把viewModel、数据传进来
  • 传递到组件内的props属性具体值如下图:

undefined

图 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

undefined

图 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);
  })

自定义模态框组件效果展示

undefined

图 6

组件返回数据效果展示

  //获取组件内部传递给MDF模型的数据方法
  viewModel.on('handleForcedown',function(data){
    //data为通过发布handleForcedown函数,传递过来的值即:
    /*
      data:{
          key: 'Audit',
          value: this.state.value
      }
    */
    cb.utils.alert(`${data.key}${data.value}`);
  })

undefined

图 7

组件封装的建议

  • 1、无状态组件要用函数式封装方式进行封装组件
  • 2、组件接收的属性props需要用propTypes或者结合TS数据特性,进行数据类型验证
  • 3、使用React HOOKS方式进行扩展
Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""