dragon-approve-ui
v0.1.13
Published
dragon-approve-ui
Downloads
33
Readme
dragon-approve-ui
Package setup
npm install --save dragon-approve-ui
design sketch
- https://pic3.pocoimg.cn/image/poco/works/63/2021/0927/10/16327110895802072_201878460.png?imageView2/1/w/480/h/480/q/95&
- https://pic3-nc.pocoimg.cn/image/poco/works/39/2021/0927/10/16327114454231851_201878460_S480.png
- https://pic3-nc.pocoimg.cn/image/poco/works/51/2021/0927/10/16327114762892835_201878460_S480.png
Example
<template>
<div>
<dg-approve
:data="approveDataList"
:showCreate="true"
@node-create="handleNodeCreate"
@node-delete="handleNodeDelete"
>
</dg-approve>
</div>
</template>
<script>
import "dragon-approve-ui";
import "dragon-approve-ui/dist/dragon-approve-ui.css";
export default {
data() {
return {
approveDataList: [
{
nodeAbbre: "张",
nodeName: "张天旭",
nodeStatusName: "审批通过",
nodeStatusCode: "2",
},
{
nodeAbbre: "张",
nodeName: "张天旭",
nodeStatusName: "审批通过",
nodeStatusCode: "2",
},
{
nodeAbbre: "张",
nodeName: "张天旭",
nodeStatusName: "审批通过",
nodeStatusCode: "2",
},
{
nodeAbbre: "张",
nodeName: "张天旭",
nodeStatusName: "驳回",
nodeStatusCode: "3",
explainLabel: "驳回原因",
explainValue: "方案有遗漏,请重新审查。",
},
],
};
},
methods: {
// 审批节点新增
handleNodeCreate() {},
// 审批节点删除
handleNodeDelete(data) {
console.log(data)
}
},
};
</script>
Instruction for use
| 参数 | 说明 | 类型 |可选值 |默认值 | | --- | --- | --- |--- |--- | |showCreate|是否显示审批节点添加区域|Boolean|——|true| |data|显示的数据|array|——|——|
Data Attributes
| 参数 | 说明 | 类型 |可选值 |默认值 | | --- | --- | --- | --- | --- | |nodeAbbre|头像内显示的简称|String|——|H| |nodeName|节点名称|Boolean|——|——| |nodeStatusName|节点状态名|String|——|——| |nodeStatusCode|审批节点状态Code|String|1:待审批; 2:通过; 3:驳回|——| |explainLabel|审批说明Label|String|——|——| |explainValue|审批说明Value(前置条件:explainLabel非空)|String|——|——|
Approve Event
| 事件名 | 说明 | 参数 | | --- | --- | --- | |node-delete|当点击删除时会触发该事件|nodeInfo| |node-create|当点击新增时会触发该事件|-|