通用组件

介绍

ASPDEV 提供给开发者可复用的业务功能组件，为了方便开发者快速搭建应用系统。

提示

平台通用组件包的引用示例

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取通用组件
const { AspUpload } = AspDev
// 使用通用组件
export default {
  name: 'MyComponents',
  components: {
    AspUpload
  }
  ......

平台所有的通用组件示例都可以在 @/views/tool/components 内找到示例代码

数据字典

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取数据字典组件
const { AspDict } = AspDev

数据字典组件 AspDict ，提供了平台通用的数据字典处理能力。数据字典配置可以使用 系统管理-数据字典 功能，配置好后的数据字典可以通过数据字典组件进行使用。 数据字典组件提供以下几种展示方式：

1. 单选框
2. 复选框
3. 单选下拉框
4. 复选下拉框

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String/Array	是	——	——
dictCode	字典码	String	是	——	——
placeholder	输入框占位符，单选框和复选框无效	String	否	——	请选择
disabled	当前组件是否为禁用状态	Boolean	否	——	false
multi	当前组件是否为多选	Boolean	否	——	false
tagType	当前组件是否为多选	String	否	select/radio/checkbox	select

部门选择

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取部门选择组件
const { AspDept } = AspDev

部门选择组件 AspDept ，提供了平台通用的部门选择处理能力。 部门选择组件提供以下几种展示方式：

1. 单选
2. 多选
3. 单选树
4. 多选树

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String	是	——	——
modalWidth	模态框宽度	String	否	——	550px
rootDeptId	根部门ID	String	否	——	orgRootDomain
disabled	当前组件是否为禁用状态	Boolean	否	——	false
multi	当前组件是否为多选	Boolean	否	——	false
customReturnField	自定义返回字段	String	否	——	id

图片上传

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取图片上传组件
const { AspImageUpload } = AspDev

图片上传组件 AspImageUpload ，提供了平台通用的图片上传处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String	是	——	——
limit	允许上传图片的数量	Number	否	——	不限制
disabled	当前组件是否为禁用状态	Boolean	否	——	false
showFileList	是否显示上传文件列表	Boolean	否	——	true
bizPath	控制文件上传的业务路径	String	否	——	temp

文件上传

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取文件上传组件
const { AspUpload } = AspDev

文件上传组件 AspUpload ，提供了平台通用的文件上传处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String	是	——	——
limit	允许上传图片的数量	Number	否	——	不限制
disabled	当前组件是否为禁用状态	Boolean	否	——	false
showFileList	是否显示上传文件列表	Boolean	否	——	true
bizPath	控制文件上传的业务路径	String	否	——	temp
text	上传按钮内文字	String	否	——	点击上传
prompt	文字提示信息	String	否	——	——
fileType	允许上传的文件类型	String	否	——	all
drag	当前组件是否为拖拽上传	Boolean	否	——	false

用户选择(输入框)

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取文件上传组件
const { AspUser } = AspDev

用户选择组件 AspUser ，提供了平台通用的根据部门选择用户能力，表现形式为通过输入框点选。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String	是	——	——
modalWidth	模态框宽度	String	否	——	850px
rootDeptId	根部门ID	String	否	——	orgRootDomain
limit	是否为多选	Boolean	否	——	false

用户选择(弹出层)

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取文件上传组件
const { AspUserDialog } = AspDev
// 使用
<asp-user-dialog :visible.sync="isVisible" :rootDeptId="rootDeptId" :multi="multi" :modalWidth="modalWidth" @ok="handleOK"></asp-user-dialog>

用户选择组件 AspUserDialog ，提供了平台通用的根据部门选择用户能力，表现形式为触发弹出层。

组件属性接口

参数	说明	类型	必填	可选值	默认值
modalWidth	模态框宽度	String	否	——	850px
rootDeptId	根部门ID	String	否	——	orgRootDomain
limit	是否为多选	Boolean	否	——	false

角色选择

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取文件上传组件
const { AspRole } = AspDev

用户选择组件 AspRole ，提供了平台通用的根据部门角色选择能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	绑定值	String/Array	是	——	——
placeholder	输入框占位符	String	否	——	请选择
disabled	当前组件是否为禁用状态	Boolean	否	——	false
multi	当前组件是否为多选	Boolean	否	——	false

省市县级联

TODO

富文本编辑器

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取富文本编辑器组件
const { AspEditor } = AspDev

富文本编辑器组件 AspEditor ，提供了平台通用的富文本编辑器处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	编辑器内容	String	是	——	——

代码编辑器

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取代码编辑器组件
const { AspEditor } = AspDev

代码编辑器组件 AspEditor ，提供了平台通用的代码编辑器处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
value / v-model	编辑器内容	String	是	——	——

滑块验证码

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取滑块验证码组件
const { AspSlider } = AspDev

滑块验证码组件 AspSlider ，提供了平台通用的滑块验证码处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值

AspSlider Events | 事件名称 | 说明 | 参数 | | --- | --- | --- | --- | | onSuccess |是否验证成功|boolean|

流程处理组件

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取滑块验证码组件
const { AspProcess } = AspDev
// 1. 选择流程模板
<asp-process @onFlowHandle="onFlowHandle">选择流程模板</asp-process>
// 2. 选择流程模板并启动流程
<asp-process @onFlowHandle="onFlowHandle" businessKey="业务数据ID"></asp-process>

流程处理组件 AspProcess ，提供了平台通用的流程处理能力。可以快速选择流程模板或选择流程模板后基于业务数据ID，自动启动流程

组件属性接口

参数	说明	类型	必填	可选值	默认值
size	显示按钮大小	String	否	medium/small/mini	mini
formType	表单类型	Number	否	---	1
disabled	当前组件是否为禁用状态	Boolean	否	——	false
businessKey	业务数据ID,此值存在则会自动触发启动流程	String	否	---	''

组件事件

| 事件名称 | 说明 | 参数 | | --- | --- | --- | --- | | onFlowHandle |组件处理完业务流程后触发的事件|{code,msg,data}|

注意 此事件返回值中，code为200表示处理成功，204表示失败。msg为处理完业务流程后信息。data为选中的流程模板数据

组件插槽

自定义按钮的文本信息，默认值 启动流程

甘特图

介绍

// 导入 ASP 平台通用组件包
import AspDev from '@/utils/aspdev'
// 解构获取甘特图组件
const { AspGantt } = AspDev

甘特图组件 AspGantt ，提供了平台通用的任务展示处理能力。

组件属性接口

参数	说明	类型	必填	可选值	默认值
tasks	甘特图内任务信息	Object	是	——	——
readonly	是否是只读模式	Boolean	否	——	false
height	甘特图表高度	Number	否	——	600
onBeforeTaskDelete	任务删除前处理函数	Function	否	——	()=>true
onBeforeTaskAdd	任务添加前处理函数	Function	否	——	()=>true
onBeforeLinkAdd	任务链接建立前处理函数	Function	否	——	()=>true
onBeforeLinkDelete	任务链接被删除前处理函数	Function	否	——	()=>true
onBeforeLinkUpdate	任务连接被更新之前触发处理函数	Function	否	——	()=>true
onBeforeTaskUpdate	任务被更新之前触发处理函数	Function	否	——	()=>true

// tasks 说明
/*
 ** data - 定义甘特图中的任务
 * id - (string, number)任务id
 * start_date - (Date)任务开始日期
 * text - (string)任务描述
 * progress - (number) 任务完成度，0到1
 * duration - (number) 在当前时间刻度下的任务持续周期
 * parent - (number) 父任务的id
 ** links - 定义甘特图中的任务关联线
 * id - (string, number) 关联线id
 * source - (number) 数据源任务的id
 * target - (number) 目标源任务的id
 * type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束”
 */

注意

凡是onBefore相关处理函数，都需要有一个明确的 Boolean 类型的返回值，才能使后续操作成功。如：

onBeforeTaskAdd(){
// 任务被添加前调用后端接口创建任务，后端接口返回创建成功后，进行后续操作
  return true
}