模态

# 模态

# 开发准备

### 打开自定义模态

使用说明：建议在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(新增) | sting | 否 | 配置了此id,会优先加载此id对应的自定义vue组件 |
| content | string \| htmlString \|vue组件 | 是 | 需要打开的模态内容，根据contentRenderType来渲染成字符串、html、vue组件 |
| contentRenderType | emun(string、html、component) | 否 | 用来描述模态内容是渲染方式，默认string1、string表示conten是一个字符串，模态内容就是这个字符串2、html表示conten是一个html字符串，模态内容就是这个html3、component表示conten是一个组件，模态内容就是这个组件，二开时可以创建一个vue组件用这个方法来弹出模态 |
| componentParams | object | 否 | 弹框内容为组件渲染时的组件传参contentRenderType为component时有效 |
| componentOn | object | 否 | 弹框内容为组件渲染时的组件事件绑定contentRenderType为component时有效 |
| fullScreen | bool | 否 | 模态展示是否全屏模式 |
| showFooter | bool | 否 | 是否显示底部的确定取消区域（pc端可用） |
| needConfirm | bool | 否 | 是否显示确认标识（pc端可用） |
| position | emun(left、right、top、bottom、center) | 否 | 弹框位置，fullScreen为false时有效，默认center，（移动端可用）1、left，弹框位置在屏幕左边2、right，弹框位置在屏幕右边3、top，弹框位置在屏幕顶部4、bottom，弹框位置在屏幕底部5、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 | emun('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'], // 根据code从系统字段里过滤
      fieldTypes: ['DefaultComponent'] // 根据字段类型从系统字段里过滤
    },
    {
      type: 'main', // 过滤主表字段
      codes: ['f_xx'], // 根据code从主表字段里过滤
      fieldTypes: ['DefaultComponent'] // 根据字段类型从主表字段里过滤
    },
    {
      type: 'sub', // 过滤子表
      codes: ['xxx'] // 根据子表code过滤子表
    },
    {
      type: 'subCode', // 过滤子表字段
      filter:[
        {
          type: 'code', // 根据code过滤
          subCode: 'xxx', // 子表code
          codes: ['f_xx'], // 根据code过滤
          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 | 否 | 取消的回调 |

#### 返回内容：无

#### 返回数据样例：无