模态

开发准备

打开自定义模态

使用说明：建议在vue组件开发中使用；当content是vue组件时，就只能用在组件开发中使用（V3版本后，可以弹出自定义vue组件）

this.$modal.show({  
    title: '标题',  
    content: xxx,  
    fullscreen: false,  
    showFooter: false,  
    width: '300px | 50%',  
    customClass: 'xxx',  
    componentParams: {},  
    componentOn: {}  
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
title	string	否	模态标题
vueComponentId（新增）	string	否	配置了此id，会优先加载此id对应的自定义vue组件
content	string / htmlString / vue组件	是	需要打开的模态内容，根据contentRenderType来渲染成字符串、html、vue组件
contentRenderType	enum(string、html、component)	否	用来描述模态内容的渲染方式，默认string。1. string表示content是一个字符串；2. html表示content是一个html字符串；3. component表示content是一个组件
componentParams	object	否	弹框内容为组件渲染时的组件传参（contentRenderType为component时有效）
componentOn	object	否	弹框内容为组件渲染时的组件事件绑定（contentRenderType为component时有效）
fullScreen	bool	否	模态展示是否全屏模式
showFooter	bool	否	是否显示底部的确定取消区域（PC端可用）
needConfirm	bool	否	是否显示确认标识（PC端可用）
position	enum(left、right、top、bottom、center)	否	弹框位置，fullScreen为false时有效，默认center（移动端可用）
round	bool	否	圆角模式，设置为true之后，模态的边框用圆角展示（移动端可用）
width	px / %	否	模态宽度，可以指定像素或百分比
height	px / %	否	模态高度，可以指定像素或百分比
minWidth	px / %	否	模态最小宽度
minHeight	px / %	否	模态最小高度
maxWidth	px / %	否	模态最大宽度
maxHeight	px / %	否	模态最大高度
modalStyle	object	否	模态样式
beforeConfirmHandler	function	否	确定之前的回调
confirmHandler	function	否	确定之后的回调
cancelHandler	function	否	取消回调

返回内容

无

---

消息提示（message）

message目前支持warning、error、info。

this.$message({  
    type: "warning",  
    message: "保存失败"
});

输入参数

参数	类型	必填	说明
type	enum('warning', 'error', 'info')	否	warning：警告类型；error：错误类型；info：普通类型。默认'info'
message	string	是	消息内容

返回内容

无

返回数据样例

无

---

弹框（alert）

this.$alert('保存失败，是否继续', '提示', {  
    confirmButtonText: '确定',  
    cancelButtonText: '取消',  
    showCancelButton: true  
}).then(function () {  
    // 确定回调  
}).catch(function () {  
    // 取消回调  
});

输入参数

参数	类型	必填	说明
message	string	否	内容
title	string	否	标题
options	object	否	扩展选项
confirmButtonText	string	否	确定按钮显示的名称
cancelButtonText	string	否	取消按钮显示的名称
showCancelButton	bool	否	是否显示取消按钮

返回内容

无

返回数据样例

无

---

打开选人控件

this.$modal.selectPerson({
    isMultiple: true,
    filter: [],
    confirmHandler: () => {
        // 确认的回调
    },
    cancelHandler: () => {
        // 取消的回调
    }
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
isMultiple	bool	否	是否是多选，默认false
filter	array	否	数据过滤范围
confirmHandler	function	否	确认的回调，回调入参：data（选中的数据）
cancelHandler	function	否	取消的回调

返回内容

无

返回数据样例

无

---

打开组织机构弹框

this.$modal.selectDepartment({
    isMultiple: true,
    filter: [],
    onlyCheckLeafNode: false,
    confirmHandler: () => {
        // 确认的回调
    },
    cancelHandler: () => {
        // 取消的回调
    }
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
isMultiple	bool	否	是否是多选，默认false
filter	array	否	数据过滤范围
onlyCheckLeafNode	bool	否	只能选叶子节点
confirmHandler	function	否	确认的回调，回调入参：data（选中的数据）
cancelHandler	function	否	取消的回调

返回内容

无

返回数据样例

无

---

打开链接地址

this.$modal.openLink({  
    url: 'xxx',  
    closeHandler: () => {  
        // 关闭的回调  
    }  
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
url	string	是	url地址，地址里可以配置占位符{Custom_xxx}来获取环境变量，也可以配置占位符{User_xxx}来获取用户信息
closeHandler	function	否	关闭的回调

返回内容

无

返回数据样例

无

---

打开字段选择弹窗

this.$modal.selectField({
    formCode: 'xxx',
    isMultiple: true,
    filter: [
        {
            type: 'code', // 根据code过滤
            codes: ['f_xx']
        },
        {
            type: 'fieldType', // 根据字段类型过滤
            fieldTypes: ['Text']
        },
        {
            type: 'system', // 过滤系统字段
            codes: ['CreateBy', 'State'],
            fieldTypes: ['DefaultComponent']
        },
        {
            type: 'main', // 过滤主表字段
            codes: ['f_xx'],
            fieldTypes: ['DefaultComponent']
        },
        {
            type: 'sub', // 过滤子表
            codes: ['xxx']
        },
        {
            type: 'subCode', // 过滤子表字段
            filter: [
                {
                    type: 'code',
                    subCode: 'xxx',
                    codes: ['f_xx'],
                    fieldTypes: ['DefaultComponent']
                },
                {
                    type: 'fieldType',
                    fieldTypes: ['Text']
                }
            ]
        }
    ],
    confirmHandler: () => {
        // 确认的回调
    },
    cancelHandler: () => {
        // 取消的回调
    }
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
formCode	string	是	功能code
isMultiple	bool	否	是否是多选，默认false
confirmHandler	function	否	确认的回调，回调入参：data（选中的数据）
cancelHandler	function	否	取消的回调

返回内容

无

返回数据样例

无

---

打开功能选择弹窗

this.$modal.selectAppItem({
    isMultiple: true,
    confirmHandler: () => {
        // 确认的回调
    },
    cancelHandler: () => {
        // 取消的回调
    }
});

支持版本

V8.8.3

输入参数

参数	类型	必填	说明
isMultiple	bool	否	是否是多选，默认false
confirmHandler	function	否	确认的回调，回调入参：data（选中的数据）
cancelHandler	function	否	取消的回调

返回内容

无

返回数据样例

无