1.0.3 • Published 4 months ago

vue-approval-progress-app v1.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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-listArray流程数据源(下方详细说明)true([])false
max-rowNumber文字超过多少行显示省略号true(5)false
over-visibleBoolean数据默认添加结束项true(true)false
over-disabledBoolean数据默认添加结束项是否为不可用状态true(false)false
default-imgString默认图片truefalse

data-list

属性类型说明是否默认默认值
titleString当前流程的 title,如图"第一次审批"
listArray (二维数组)当前流程数据源(下方详细说明)

list

属性类型说明是否默认默认值
titleString当条数据的 title(注意有多个处理人的情况不展示,参考'或签/会签'样式)
classNameString当条数据的 class
sameLineTimeString当条数据的时间是否和用户信息展示在同一行
disabledString当前数据字体等置灰
descPrefixString当条数据的文字说明前缀true备注说明
descPrefixColorString当条数据的文字说明前缀字体颜色true#424675
descString当条数据的文字说明展示
descColorString当条数据的文字说明字体颜色true#424675
headportraitArray头像显示,当存在 headportrait 值时,会优先于 label 和 icon 的显示
iconString当条数据的图标展示(注意有多个处理人的情况不展示,参考'或签/会签'样式),若存在 iconLabel 则不展示 icon 图标true第一条数据默认人头,结尾数据默认打勾,其它默认印章
iconLabelString当条数据的图标替换成文字(注意有多个处理人的情况不展示,参考'或签/会签'样式;注意传此则不展示 icon)
handlerInfoArray当条数据的处理人信息,可传多条(下方详细说明)

handlerInfo

属性类型说明是否默认默认值
prefixString处理人文字前缀
nameString处理人文字说明
nameColorString处理人文字颜色
postString处理人职务
timeString处理时间
timeColorString处理时间文字颜色true#999999
approvalTypeString处理状态文字说明
approvalTypeColorString处理状态文字颜色true#07c264
iconString处理人后面跟的 icon 图标

API

函数名说明参数格式调用示例
init手动更新this.$refs.vap.init();

Other

1、后继会继续更新 vue3 版本

2、如果有其他问题邮件沟通1195669615@qq.com或者加 qq1195669615。若插件能够帮助到您,期待您的 star 哦!