vue-approval-progress(当前版本 V1.0.3)
一款高效、简洁、功能丰富的审批进度流程显示 app 端插件,适配postcss-pxtorem
兼容版本
Vue2.x
Install
npm i vue-approval-progress-app -S
//main.js
import vap from "vue-approval-progress-app";
import "vue-approval-progress-app/lib/index.css";
Vue.use(vap)
data() {
return {
dataList: [
{
title: "第二次审批",
list: [
[
{
// title: "发起人",
icon: "vapfont vap-top_icon4",
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
iconLabel: "发",
className:"classname",
handlerInfo: [
{
name: "xxx",
prefix: "审批人",
post: "UI设计师",
time: "2021-03-15 20:42:00",
approvalType: "",
},
],
descPrefixColor: "red",
descColor: "red",
descPrefix: "发起说明",
desc:
"转正时间到,申请转正,望领导批准!转正时间到,申请转正,望领导批准!转正时间到,申请转正,望领导批准!",
},
],
[
{
title: "会签",
},
{
title: "",
className:"classname1",
sameLineTime: true,
headportrait: [
"https://v3.cn.vuejs.org/logos.png",
// null,
],
handlerInfo: [
{
name: "xxx",
prefix: "审批人",
// post: "部门主管",
time: "2021-03-15 20:42:00",
approvalType: "同意",
},
],
descPrefix: "审批意见",
desc:
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccdddddddddddddddddd",
},
{
title: "",
className:"classname2",
sameLineTime: true,
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
handlerInfo: [
{
name: "xxx",
prefix: "审批人",
post: "商务主管",
time: "2021-03-15 20:42:00",
approvalType: "拒绝",
approvalTypeColor: "red",
timeColor: "red",
stepList: "red",
},
],
descPrefix: "审批意见",
desc: "该员工任职UI设计师,态度认真,故本人同意转正。",
},
{
title: "",
sameLineTime: true,
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
handlerInfo: [
{
name: "xxx",
prefix: "审批人",
post: "商务主管",
time: "2021-03-15 20:42:00",
approvalType: "拒绝",
approvalTypeColor: "red",
timeColor: "red",
stepList: "red",
},
],
descPrefix: "审批意见",
desc:
"该员工任职UI设计师,态度认真,故本人同意转正。该员工任职UI设计师,态度认真,故本人同意转正。该员工任职UI设计师,态度认真,故本人同意转正。该员工任职UI设计师,态度认真,故本人同意转正。该员工任职UI设计师,态度认真,故本人同意转正。该员工任职UI设计师,态度认真,故本人同意转正。",
},
],
[
{ title: "抄送人", sameLineTime: true, disabled: true },
{
title: "",
sameLineTime: true,
disabled: true,
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
handlerInfo: [
{
name: "xx1",
approvalType: "待抄送",
},
],
},
{
title: "",
sameLineTime: true,
disabled: true,
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
handlerInfo: [
{
name: "xx2",
approvalType: "待抄送",
},
],
},
],
[
{
title: "结束",
last: true,
disabled: true,
},
],
],
},
{
title: "第一次审批",
list: [
[
{
// title: "发起人",
sameLineTime: true,
icon: "vapfont vap-top_icon4",
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
iconLabel: "发",
handlerInfo: [
{
name: "xxx",
prefix: "发起人",
post: "UI设计师",
time: "2021-03-15 20:42:00",
approvalType: "",
},
],
descPrefixColor: "red",
descColor: "red",
descPrefix: "发起说明",
desc:
"转正时间到,申请转正,望领导批准!转正时间到,申请转正,望领导批准!转正时间到,申请转正,望领导批准!",
},
],
[
{
title: "或签",
},
{
sameLineTime: true,
headportrait: ["https://v3.cn.vuejs.org/logos.png"],
handlerInfo: [
{
name: "xxx",
prefix: "财务主管",
time: "2021-03-15 20:42:00",
approvalType: "同意",
},
],
descPrefix: "审批意见",
desc: "同意同意",
},
{
sameLineTime: true,
title: "",
handlerInfo: [
{
name: "xxx",
prefix: "行政主管",
time: "2021-03-15 20:42:00",
approvalType: "拒绝",
approvalTypeColor: "red",
timeColor: "red",
stepList: "red",
},
],
descPrefix: "审批意见",
desc: "考核不通过",
descColor: "red",
},
],
[
{
sameLineTime: true,
title: "",
handlerInfo: [
{
name: "发起人撤回",
nameColor: "#FF4343",
prefix: "",
time: "2021-03-15 20:42:00",
approvalType: "",
approvalTypeColor: "",
timeColor: "",
stepList: "",
},
],
descPrefix: "",
desc: "",
},
],
[
{
title: "结束",
last: true,
},
],
],
},
],
};
},
示例
<vue-approval-progress-app :data-list="dataList"></vue-approval-progress-app>
ui 效果图
Attribute
属性 | 类型 | 说明 | 默认(默认值) | 是否必传 |
---|---|---|---|---|
data-list | Array | 流程数据源(下方详细说明) | true([]) | false |
max-row | Number | 文字超过多少行显示省略号 | true(5) | false |
over-visible | Boolean | 数据默认添加结束项 | true(true) | false |
over-disabled | Boolean | 数据默认添加结束项是否为不可用状态 | true(false) | false |
default-img | String | 默认图片 | true | false |
data-list
属性 | 类型 | 说明 | 是否默认 | 默认值 |
---|---|---|---|---|
title | String | 当前流程的 title,如图"第一次审批" | ||
list | Array (二维数组) | 当前流程数据源(下方详细说明) |
list
属性 | 类型 | 说明 | 是否默认 | 默认值 |
---|---|---|---|---|
title | String | 当条数据的 title(注意有多个处理人的情况不展示,参考'或签/会签'样式) | ||
className | String | 当条数据的 class | ||
sameLineTime | String | 当条数据的时间是否和用户信息展示在同一行 | ||
disabled | String | 当前数据字体等置灰 | ||
descPrefix | String | 当条数据的文字说明前缀 | true | 备注说明 |
descPrefixColor | String | 当条数据的文字说明前缀字体颜色 | true | #424675 |
desc | String | 当条数据的文字说明展示 | ||
descColor | String | 当条数据的文字说明字体颜色 | true | #424675 |
headportrait | Array | 头像显示,当存在 headportrait 值时,会优先于 label 和 icon 的显示 | ||
icon | String | 当条数据的图标展示(注意有多个处理人的情况不展示,参考'或签/会签'样式),若存在 iconLabel 则不展示 icon 图标 | true | 第一条数据默认人头,结尾数据默认打勾,其它默认印章 |
iconLabel | String | 当条数据的图标替换成文字(注意有多个处理人的情况不展示,参考'或签/会签'样式;注意传此则不展示 icon) | ||
handlerInfo | Array | 当条数据的处理人信息,可传多条(下方详细说明) |
handlerInfo
属性 | 类型 | 说明 | 是否默认 | 默认值 |
---|---|---|---|---|
prefix | String | 处理人文字前缀 | ||
name | String | 处理人文字说明 | ||
nameColor | String | 处理人文字颜色 | ||
post | String | 处理人职务 | ||
time | String | 处理时间 | ||
timeColor | String | 处理时间文字颜色 | true | #999999 |
approvalType | String | 处理状态文字说明 | ||
approvalTypeColor | String | 处理状态文字颜色 | true | #07c264 |
icon | String | 处理人后面跟的 icon 图标 |
API
函数名 | 说明 | 参数格式 | 调用示例 |
---|---|---|---|
init | 手动更新 | this.$refs.vap.init(); |
Other
1、后继会继续更新 vue3 版本
2、如果有其他问题邮件沟通1195669615@qq.com或者加 qq1195669615。若插件能够帮助到您,期待您的 star 哦!