【vue2+Flowable工作流，审批流前端展示组件】

饭宝  金牌会员 | 2024-8-15 21:01:14 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 898|帖子 898|积分 2694

概要

vue2+Flowable工作流，审批流前端展示组件。
团体架构流程

  vue2版本展示组件封装，vue3会出
技术细节

  通过父组件传流程展示需要的各种参数，可根据自己使用流程组件举行对应。
实现结果：

1.父组件代码
  1.    <ApprovalProcess
  2.         :tasks-data="tasksData"
  3.         :start-user="startUser"
  4.         :start-time="startTime"
  5.         process-definition-key="appropriate_reporting"
  6.         :add-form-flow-data="addFormFlowData"
  7.         :approval-flow-status="approvalFlowStatus"
  8.         :process-instance-id="processInstanceId"
  9.         is-history="false"
  10.       />
  11.       import ApprovalProcess from '../components/ApprovalProcess.vue'
  12.   components: {
  13.     ApprovalProcess,
  14.     ColumnTip
  15.   },
复制代码
关键参数approvalFlowStatus，字典里可设置不同审批状态，转达的参数都是工作流中存在的字段
2.子组件代码
  1. <template>
  2.   <div class="history-container">
  3.     <!-- 审批流程、历史审批弹框内容 -->
  4.     <div class="approval-flow">
  5.       <div v-if="isHistory == 'true' ? false : true" class="flow-label">
  6.         审批流程
  7.       </div>
  8.       <div class="flow-box">
  9.         <!-- 待提交状态 -->
  10.         <el-timeline v-if="approvalFlowStatus == 0">
  11.           <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  12.             <div class="add-line-name">发起</div>
  13.             <label
  14.               v-if="startUser"
  15.               style="color: black; font-weight: normal; margin-right: 30px"
  16.             >
  17.               {{ startUser.nickname }}
  18.               <span>/</span>
  19.               {{ startUser.deptName }}
  20.             </label>
  21.             <p style="color: #ffc600">待提交</p>
  22.           </el-timeline-item>
  23.           <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  24.             <div class="add-line-name">企业审核</div>
  25.             <label
  26.               v-for="(item, index) in addFormFlowDataS.qyUserList"
  27.               :key="index"
  28.               style="font-weight: 400; color: black; margin-right: 30px"
  29.             >
  30.               {{ item.nickname }}
  31.               <span>/</span>
  32.               {{ item.deptName }}
  33.             </label>
  34.             <p style="color: #ffc600">待审批</p>
  35.           </el-timeline-item>
  37.           <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  38.             <div class="add-line-name">经办人</div>
  39.             <label
  40.               v-for="(item, index) in addFormFlowDataS.gzUserList"
  41.               :key="index"
  42.               style="font-weight: 400; color: black; margin-right: 30px"
  43.             >
  44.               {{ item.nickname }}
  45.               <span>/</span>
  46.               {{ item.deptName }}
  47.             </label>
  48.             <p style="color: #ffc600">待审批</p>
  49.           </el-timeline-item>
  50.           <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  51.             <div class="add-line-name">领导审核</div>
  52.             <label
  53.               v-for="(item, index) in addFormFlowDataS.gzldUserList"
  54.               :key="index"
  55.               style="font-weight: 400; color: black; margin-right: 30px"
  56.             >
  57.               {{ item.nickname }}
  58.               <span>/</span>
  59.               {{ item.deptName }}
  60.             </label>
  61.             <p style="color: #ffc600">待审批</p>
  62.           </el-timeline-item>
  64.           <el-timeline-item style="margin-left: 60px">
  65.             <div class="add-line-name">结束</div>
  66.           </el-timeline-item>
  67.         </el-timeline>
  68.         <!-- 待审批 -->
  69.         <el-timeline v-if="approvalFlowStatus == 1">
  70.           <el-timeline-item icon="el-icon-check" type="success">
  71.             <div class="add-line-name">发起</div>
  72.             <label
  73.               v-if="startUser"
  74.               style="color: black; font-weight: 400; margin-right: 30px"
  75.             >
  76.               {{ startUser.nickname }}
  77.               <span>/</span>
  78.               {{ startUser.deptName }}
  79.             </label>
  80.             <label
  81.               v-if="startTime"
  82.               style="font-weight: normal; font-weight: 400"
  83.             >{{ parseTime(startTime ? startTime : '') }}</label>
  85.             <p style="color: #13ce66">已提交</p>
  86.           </el-timeline-item>
  87.           <el-timeline-item
  88.             v-for="(task, index) in tasksData"
  89.             :key="index"
  90.             :color="task.timeLineCorlor"
  91.             :type="task.result ? task.istype : ''"
  92.           >
  93.             <div class="add-line-name">
  94.               {{ task.name }}
  95.             </div>
  96.             <label
  97.               v-if="task.result === 2 && task.assigneeUser.nickname"
  98.               style="color: black; font-weight: normal; margin-right: 30px"
  99.             >
  100.               {{ task.assigneeUser.nickname }}
  101.               <span v-if="task.assigneeUser.deptName">/</span>
  102.               {{ task.assigneeUser.deptName }}
  103.             </label>
  104.             <div
  105.               v-else-if="task.result === 1 || task.assigneeUser == null"
  106.               style="
  107.                 display: block;
  108.                 color: black;
  109.                 font-weight: normal;
  110.                 margin-right: 30px;
  111.               "
  112.             >
  113.               {{ task.assigneeUser.nickname }}
  114.               <span v-if="task.assigneeUser.deptName">/</span>
  115.               {{ task.assigneeUser.deptName }}
  116.             </div>
  118.             <p v-if="task.name" style="color: #ffc600">待审批</p>
  119.           </el-timeline-item>
  121.           <el-timeline-item>
  122.             <div class="add-line-name">结束</div>
  123.           </el-timeline-item>
  124.         </el-timeline>
  125.         <!-- 审批中 -->
  126.         <el-timeline v-if="approvalFlowStatus == 7">
  127.           <el-timeline-item icon="el-icon-check" type="success">
  128.             <div class="add-line-name">发起</div>
  129.             <label
  130.               v-if="startUser"
  131.               style="font-weight: normal; margin-right: 30px"
  132.             >
  133.               {{ startUser.nickname }}
  134.               <span>/</span>
  135.               {{ startUser.deptName }}
  136.             </label>
  137.             <label v-if="startTime" style="color: black; font-weight: 400">{{
  138.               parseTime(startTime)
  139.             }}</label>
  140.             <p style="color: #13ce66">已提交</p>
  141.           </el-timeline-item>
  143.           <el-timeline-item
  144.             v-for="(task, index) in tasksData"
  145.             :key="index"
  146.             :color="task.timeLineCorlor"
  147.             :icon="task.ischeck"
  148.             :type="task.istype"
  149.           >
  150.             <div v-if="task.name" class="add-line-name">
  151.               {{ task.name }}
  152.             </div>
  153.             <label
  154.               v-if="
  155.                 task &&
  156.                   task.assigneeUser &&
  157.                   task.assigneeUser.nickname &&
  158.                   task.endTime
  159.               "
  160.               style="color: black; font-weight: normal; margin-right: 30px"
  161.             >
  162.               {{ task.assigneeUser.nickname }}
  163.               <span
  164.                 v-if="task && task.assigneeUser && task.assigneeUser.deptName"
  165.               >/</span>
  166.               {{ task.assigneeUser.deptName }}
  167.             </label>
  168.             <div
  169.               v-else-if="task.result == 1"
  170.               style="
  171.                 display: block;
  172.                 color: black;
  173.                 font-weight: normal;
  174.                 margin-right: 30px;
  175.               "
  176.                v-for="(item, index) in task.assigneeUserList"
  177.             >
  178.               {{ item.nickname }}
  179.               <span>/</span>
  180.               {{ item.deptName }}
  181.             </div>
  183.             <label
  184.               v-if="task && task.endTime"
  185.               style="color: black; font-weight: normal"
  186.             >
  187.               {{ parseTime(task.endTime) }}
  188.             </label>
  189.             <p v-if="task.endTime" style="color: #13ce66">已通过</p>
  190.             <p v-if="!task.endTime" style="color: #ffc600">待审批</p>
  191.           </el-timeline-item>
  193.           <el-timeline-item>
  194.             <div class="add-line-name">结束</div>
  195.           </el-timeline-item>
  196.         </el-timeline>
  198.         <!-- 已完结 -->
  199.         <el-timeline v-if="approvalFlowStatus == 2">
  200.           <el-timeline-item icon="el-icon-check" type="success">
  201.             <div class="add-line-name">发起</div>
  202.             <label
  203.               v-if="startUser"
  204.               style="color: black; font-weight: normal; margin-right: 30px"
  205.             >
  206.               {{ startUser.nickname }}
  207.               <span>/</span>
  208.               {{ startUser.deptName }}
  209.             </label>
  210.             <label v-if="startTime" style="font-weight: 400">{{
  211.               parseTime(startTime)
  212.             }}</label>
  214.             <p style="color: #13ce66">已提交</p>
  215.           </el-timeline-item>
  216.           <el-timeline-item icon="el-icon-check" type="success">
  217.             <div v-if="tasksData[0] && tasksData[0].name" class="add-line-name">
  218.               {{ tasksData[0].name }}
  219.             </div>
  220.             <label
  221.               v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"
  222.               style="font-weight: normal; margin-right: 30px"
  223.             >
  224.               {{ tasksData[0].assigneeUser.nickname }}
  225.               <span v-if="tasksData[0].assigneeUser.deptName">/</span>
  226.               {{ tasksData[0].assigneeUser.deptName }}
  227.             </label>
  228.             <label
  229.               v-if="tasksData[0] && tasksData[0].endTime"
  230.               style="font-weight: normal"
  231.             >{{ parseTime(tasksData[0].endTime) }}</label>
  232.             <p style="color: #13ce66">已通过</p>
  233.           </el-timeline-item>
  234.           <el-timeline-item icon="el-icon-check" type="success">
  235.             <div v-if="tasksData[1] && tasksData[1].name" class="add-line-name">
  236.               {{ tasksData[1].name }}
  237.             </div>
  238.             <label
  239.               v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"
  240.               style="font-weight: normal; margin-right: 30px"
  241.             >
  242.               {{ tasksData[1].assigneeUser.nickname }}
  243.               <span v-if="tasksData[1].assigneeUser.deptName">/</span>
  244.               {{ tasksData[1].assigneeUser.deptName }}
  245.             </label>
  246.             <label
  247.               v-if="tasksData[1] && tasksData[1].endTime"
  248.               style="font-weight: normal"
  249.             >{{ parseTime(tasksData[1].endTime) }}</label>
  250.             <p style="color: #13ce66">已通过</p>
  251.           </el-timeline-item>
  252.           <el-timeline-item icon="el-icon-check" type="success">
  253.             <div v-if="tasksData[2] && tasksData[2].name" class="add-line-name">
  254.               {{ tasksData[2].name }}
  255.             </div>
  256.             <label
  257.               v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"
  258.               style="font-weight: normal; margin-right: 30px"
  259.             >
  260.               {{ tasksData[2].assigneeUser.nickname }}
  261.               <span v-if="tasksData[2].assigneeUser.deptName">/</span>
  262.               {{ tasksData[2].assigneeUser.deptName }}
  263.             </label>
  264.             <label
  265.               v-if="tasksData[2] && tasksData[2].endTime"
  266.               style="font-weight: normal"
  267.             >{{ parseTime(tasksData[2].endTime) }}</label>
  268.             <p style="color: #13ce66">已通过</p>
  269.           </el-timeline-item>
  271.           <el-timeline-item icon="el-icon-check" type="success">
  272.             <div class="add-line-name">结束</div>
  273.             <label>
  274.               <span
  275.                 style="
  276.                   display: inline-block;
  277.                   color: #13ce66;
  279.                   margin-right: 30px;
  280.                 "
  281.               >已完结</span>
  282.             </label>
  283.             <!-- <span v-if="tasksData[1] && tasksData[1].endTime">{{
  284.               parseTime(tasksData[1].endTime)
  285.             }}</span> -->
  286.           </el-timeline-item>
  287.         </el-timeline>
  289.         <!-- 退回流程状态 -->
  290.         <el-timeline v-if="approvalFlowStatus == 3">
  291.           <el-timeline-item icon="el-icon-check" type="success">
  292.             <div class="add-line-name">发起</div>
  293.             <label
  294.               v-if="startUser"
  295.               style="color: black; font-weight: normal; margin-right: 30px"
  296.             >
  297.               {{ startUser.nickname }}
  298.               <span>/</span>
  299.               {{ startUser.deptName }}
  300.             </label>
  301.             <label v-if="startTime" style="font-weight: 400">{{
  302.               parseTime(startTime)
  303.             }}</label>
  304.             <p style="color: #13ce66">已提交</p>
  305.           </el-timeline-item>
  306.           <el-timeline-item
  307.             v-for="(task, index) in tasksData"
  308.             :key="index"
  309.             :color="task.timeLineCorlor"
  310.             :icon="task.ischeck"
  311.             :type="task.istype"
  312.           >
  313.             <div v-if="task.name" class="add-line-name">
  314.               {{ task.name }}
  315.             </div>
  316.             <label
  317.               v-if="task.assigneeUser && task.assigneeUser.nickname"
  318.               style="color: black; font-weight: normal; margin-right: 30px"
  319.             >
  320.               {{ task.assigneeUser.nickname }}
  321.               <span v-if="task.assigneeUser.deptName">/</span>
  322.               {{ task.assigneeUser.deptName }}
  323.             </label>
  324.             <label
  325.               v-if="task.reviewerList && !task.assigneeUser"
  326.               style="color: black; font-weight: normal; margin-right: 30px"
  327.             >
  328.               {{ task.reviewerList[0].nickname }}
  329.               <span v-if="task.reviewerList[0].deptName">/</span>
  330.               {{ task.reviewerList[0].deptName }}
  331.             </label>
  332.             <label
  333.               v-if="task.endTime"
  334.               style="color: black; font-weight: normal"
  335.             >
  336.               {{ parseTime(task.endTime) }}
  337.             </label>
  338.             <p
  339.               v-if="task.assigneeUser"
  340.               style="color: #13ce66; font-weight: normal"
  341.             >
  342.               {{ task.result == 2 ? '已通过' : '' }}
  343.             </p>
  344.             <p v-if="task.assigneeUser" style="color: red; font-weight: normal">
  345.               {{
  346.                 task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : ''
  347.               }}
  348.               <span v-if="task.reason" style="margin-left: 20px">
  349.                 <span>{{ task.reason }}</span>
  350.               </span>
  351.             </p>
  352.           </el-timeline-item>
  354.           <el-timeline-item>
  355.             <div class="add-line-name">结束</div>
  356.             <!-- <label>
  357.               <span
  358.                 style="
  359.                   display: inline-block;
  360.                   color: red;
  362.                   margin-right: 30px;
  363.                 "
  364.                 >已完结</span
  365.               >
  366.             </label> -->
  367.             <!-- <span v-if="tasksData[1] && tasksData[1].endTime">{{
  368.               parseTime(tasksData[1].endTime)
  369.             }}</span> -->
  370.           </el-timeline-item>
  371.         </el-timeline>
  372.       </div>
  373.     </div>
  374.   </div>
  375. </template>
  377. <script>
  378. export default {
  379.   name: 'ApprovalProcess',
  380.   props: {
  381.     startUser: {
  382.       type: Object
  383.     },
  384.     createTime: {
  385.       type: String,
  386.       default: ''
  387.     },
  388.     startTime: {
  389.       type: Number,
  390.       default: null
  391.     },
  393.     isHistory: {
  394.       type: String,
  395.       default: ''
  396.     },
  398.     approvalFlowStatus: {
  399.       // 审批流程状态
  400.     },
  401.     addFormFlowData: {
  402.       // 表单的数据
  403.     },
  404.     processDefinitionKey: {
  405.       type: String,
  406.       default: `appropriate_reporting1` // decision_matter
  407.     },
  408.     tasksData: {
  409.       type: Array,
  410.       default: () => []
  411.     }
  412.   },
  413.   data() {
  414.     return {
  415.       reviewerList: [], // 流程审批人列表
  416.       // 审批流程激活的tab标签
  417.       activeName: 'first',
  418.       timeLineCorlor: '',
  419.       ischeck: '',
  420.       addFormFlowDataS: {}
  421.     }
  422.   },
  423.   computed: {
  424.     labelName() {
  425.       return this.isHistory == 'true' ? '(历史审批)集团' : '集团'
  426.     }
  427.   },
  428.   watch: {
  429.     addFormFlowData: {
  430.       immediate: true, // 第一次进入页面时也触发
  431.       handler(newData) {
  432.         // console.log(newData)
  433.         // 子组件接收到新的属性值时执行的逻辑
  434.         this.addFormFlowDataS = newData
  435.       }
  436.     },
  437.     tasksData(val) {
  438.       // console.log(val)
  439.       this.getTimelineColor(val)
  440.     },
  441.     startUser: {
  442.       deep: true,
  443.       handler(val) {
  444.         return val
  445.       }
  446.     }
  447.   },
  448.   created() {},
  449.   mounted() {
  450.     // console.log(`this.tasksData`, this.tasksData)
  451.   },
  452.   methods: {
  453.     getTimelineColor(isTasksData) {
  454.       // console.log(`isTasksData`, isTasksData)
  455.       isTasksData.forEach((item, index) => {
  456.         // 判断每一项的endTime是否有值
  457.         if (item.endTime && item.result === 2) {
  458.           item.timeLineCorlor = '#13ce66'
  459.           item.ischeck = 'el-icon-check'
  460.           item.istype = 'success'
  461.         }
  462.         if (
  463.           item.result === 7 ||
  464.           item.result === 1 ||
  465.           item.assigneeUser == null
  466.         ) {
  467.           item.timeLineCorlor = '#ffc600'
  468.           item.ischeck = ''
  469.           item.istype = ''
  470.         }
  471.         if (item.result === 3 || item.result === 4) {
  472.           item.timeLineCorlor = 'red'
  473.           item.ischeck = ''
  474.           item.istype = ''
  475.         }
  476.         if (item.result == null) {
  477.           item.timeLineCorlor = ''
  478.           item.ischeck = ''
  479.           item.istype = ''
  480.           isTasksData.splice(index, 1)
  481.         }
  482.       })
  483.       return isTasksData
  484.     }
  485.   }
  486. }
  487. </script>
  489. <style scoped>
  490. .approval-flow {
  491.   display: flex;
  492. }
  493. .history-container .flow-label {
  494.   width: 140px;
  495.   padding-top: 10px;
  496.   display: flex;
  497.   justify-content: flex-end;
  498.   /* font-weight: 700; */
  499. }
  500. .flow-box {
  501.   margin-left: 20px;
  502.   width: 645px;
  503.   min-height: 330px;
  504.   height: auto;
  505. }
  506. .history-container /deep/ .el-timeline {
  507.   padding-left: 37px;
  508.   padding-top: 10px;
  509. }
  510. .history-container /deep/ .el-timeline-item {
  511.   min-height: 60px;
  512.   height: auto;
  513. }
  514. .line-name {
  515.   position: absolute;
  516.   left: -35px;
  517.   top: -1px;
  518.   color: #aaa;
  519. }
  520. .add-line-name {
  521.   width: 100px;
  522.   position: absolute;
  523.   text-align: right;
  524.   left: -110px;
  525.   font-weight: normal;
  526.   top: 0px;
  527.   color: #aaa;
  528. }
  529. </style>
复制代码
可根据后台数据举行得当修改，已适配待提交状态/待审批/审批中/已完结/退回等流程
小结

自己使用过程中遇到的场景，可自己修改样式在ColumnTip使用。
代码案例：
父组件
  2.   <el-table-column
  3.                 label="流程状态"
  4.                 align="center"
  5.                 prop="apply.status"
  6.               >
  7.                 <template slot-scope="scope">
  8.                   <el-tooltip placement="bottom">
  9.                     <div slot="content">
  10.                       <ColumnTip
  11.                         :tasks-data="tasksData"
  12.                         :start-user="startUser"
  13.                         :start-time="startTime"
  14.                         :approval-level="approvalLevel"
  15.                         :reject-level="rejectLevel"
  16.                         :add-form-flow-data="addFormFlowData"
  17.                         :approval-flow-status="approvalFlowStatus"
  18.                         :process-instance-id="scope.row.processInstanceId"
  19.                       />
  20.                     </div>
  21.                     <div
  22.                       @mouseenter="
  23.                         (e) => {
  24.                           handleClick(scope.row.apply, e)
  25.                         }
  26.                       "
  27.                     >
  28.                       <dict-tag
  29.                         :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
  30.                         :value="scope.row.apply.status"
  31.                       />
  32.                     </div>
  33.                   </el-tooltip>
  34.                 </template>
  35.               </el-table-column>
  36.       import ColumnTip from '../components/ColumnTip.vue'        
  37.   components: {
  38.     ApprovalProcess,
  39.     ColumnTip
  40.   },
复制代码
子组件代码
  1. <template>
  2.   <div class="history-container">
  3.     <!-- 状态栏tips内容 -->
  4.     <div class="flow-box">
  5.       <!-- 待提交状态 -->
  6.       <el-timeline v-if="approvalFlowStatus == 0">
  7.         <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  8.           <div class="add-line-name">发起</div>
  9.           <label
  10.             v-for="(item, index) in addFormFlowDataS.startUserList"
  11.             :key="index"
  12.             style="color: #fff; font-weight: 500; margin-right: 30px"
  13.           >
  14.             {{ item.nickname }}
  15.             <span>/</span>
  16.             {{ item.deptName }}
  17.           </label>
  18.           <p style="color: #ffc600">待提交</p>
  19.         </el-timeline-item>
  20.         <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  21.           <div class="add-line-name">企业审核</div>
  22.           <label
  23.             v-for="(item, index) in addFormFlowDataS.qyUserList"
  24.             :key="index"
  25.             style="color: #fff; font-weight: 500; margin-right: 30px"
  26.           >
  27.             {{ item.nickname }}
  28.             <span>/</span>
  29.             {{ item.deptName }}
  30.           </label>
  31.           <p style="color: #ffc600">待审批</p>
  32.         </el-timeline-item>
  34.         <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  35.           <div class="add-line-name">经办人</div>
  36.           <label
  37.             v-for="(item, index) in addFormFlowDataS.gzUserList"
  38.             :key="index"
  39.             style="color: #fff; font-weight: 500; margin-right: 30px"
  40.           >
  41.             {{ item.nickname }}
  42.             <span>/</span>
  43.             {{ item.deptName }}
  44.           </label>
  45.           <p style="color: #ffc600">待审批</p>
  46.         </el-timeline-item>
  47.         <el-timeline-item style="margin-left: 60px" :color="'#FFC600'">
  48.           <div class="add-line-name">领导审核</div>
  49.           <label
  50.             v-for="(item, index) in addFormFlowDataS.gzldUserList"
  51.             :key="index"
  52.             style="color: #fff; font-weight: 500; margin-right: 30px"
  53.           >
  54.             {{ item.nickname }}
  55.             <span>/</span>
  56.             {{ item.deptName }}
  57.           </label>
  58.           <p style="color: #ffc600">待审批</p>
  59.         </el-timeline-item>
  61.         <el-timeline-item style="margin-left: 60px">
  62.           <div class="add-line-name">结束</div>
  63.         </el-timeline-item>
  64.       </el-timeline>
  66.       <!-- 待审批 -->
  67.       <el-timeline v-if="approvalFlowStatus == 1">
  68.         <el-timeline v-if="approvalFlowStatus == 1 && tasksData.length > 0">
  69.           <el-timeline-item
  70.             style="margin-left: 60px"
  71.             icon="el-icon-check"
  72.             type="success"
  73.           >
  74.             <div class="add-line-name">发起</div>
  75.             <label
  76.               v-if="startUser"
  77.               style="color: #fff; font-weight: 500; margin-right: 30px"
  78.             >
  79.               {{ startUser.nickname }}
  80.               <span>/</span>
  81.               {{ startUser.deptName }}
  82.             </label>
  83.             <label
  84.               v-if="tasksData[0] && tasksData[0].createTime"
  85.               style="color: #fff; font-weight: normal"
  86.             >{{ parseTime(tasksData[0].createTime) }}</label>
  87.             <p style="color: #13ce66">已提交</p>
  88.           </el-timeline-item>
  89.           <el-timeline-item
  90.             v-for="(task, index) in tasksData"
  91.             :key="index"
  92.             style="margin-left: 60px"
  93.             :color="task.timeLineCorlor"
  94.             :type="task.result ? task.istype : ''"
  95.           >
  96.             <div class="add-line-name">
  97.               {{ task.name }}
  98.             </div>
  99.             <label
  100.               v-if="task.result === 2 && task.assigneeUser.nickname"
  101.               style="color: #fff; font-weight: normal; margin-right: 30px"
  102.             >
  103.               {{ task.assigneeUser.nickname }}
  104.               <span v-if="task.assigneeUser.deptName">/</span>
  105.               {{ task.assigneeUser.deptName }}
  106.             </label>
  107.             <div
  108.               v-else-if="task.result === 1 || task.assigneeUser == null"
  109.               style="
  110.                 display: block;
  111.                 color: #fff;
  112.                 font-weight: normal;
  113.                 margin-right: 30px;
  114.               "
  115.             >
  116.               {{ task.assigneeUser.nickname }}
  117.               <span v-if="task.assigneeUser.deptName">/</span>
  118.               {{ task.assigneeUser.deptName }}
  119.             </div>
  121.             <p v-if="task.name" style="color: #ffc600">待审批</p>
  122.           </el-timeline-item>
  124.           <el-timeline-item style="margin-left: 60px">
  125.             <div class="add-line-name">结束</div>
  126.           </el-timeline-item>
  127.         </el-timeline>
  128.       </el-timeline>
  130.       <!-- 审批中 -->
  131.       <el-timeline v-if="approvalFlowStatus == 7 && addFormFlowData != {}">
  132.         <el-timeline-item
  133.           style="margin-left: 60px"
  134.           icon="el-icon-check"
  135.           type="success"
  136.         >
  137.           <div class="add-line-name">发起</div>
  138.           <label
  139.             v-if="startUser"
  140.             style="color: #fff; font-weight: 500; margin-right: 30px"
  141.           >
  142.             {{ startUser.nickname }}
  143.             <span>/</span>
  144.             {{ startUser.deptName }}
  145.           </label>
  146.           <label
  147.             v-if="tasksData[0] && tasksData[0].createTime"
  148.             style="color: #fff; font-weight: normal"
  149.           >{{ parseTime(tasksData[0].createTime) }}</label>
  150.           <p style="color: #13ce66">已提交</p>
  151.         </el-timeline-item>
  153.         <el-timeline-item
  154.           v-for="(task, index) in tasksData"
  155.           :key="index"
  156.           style="margin-left: 60px"
  157.           :color="task.timeLineCorlor"
  158.           :icon="task.ischeck"
  159.           :type="task.istype"
  160.         >
  161.           <div v-if="task.name" class="add-line-name">
  162.             {{ task.name }}
  163.           </div>
  164.           <label
  165.             v-if="
  166.               task &&
  167.                 task.assigneeUser &&
  168.                 task.assigneeUser.nickname &&
  169.                 task.endTime
  170.             "
  171.             style="color: #fff; font-weight: normal; margin-right: 30px"
  172.           >
  173.             {{ task.assigneeUser.nickname }}
  174.             <span
  175.               v-if="task && task.assigneeUser && task.assigneeUser.deptName"
  176.             >/</span>
  177.             {{ task.assigneeUser.deptName }}
  178.           </label>
  179.           <div
  180.               v-else-if="task.result == 1"
  181.               style="
  182.                 display: block;
  183.                 color: black;
  184.                 font-weight: normal;
  185.                 margin-right: 30px;
  186.                 color: white;
  187.               "
  188.                v-for="(item, index) in task.assigneeUserList"
  189.             >
  190.               {{ item.nickname }}
  191.               <span>/</span>
  192.               {{ item.deptName }}
  193.             </div>
  196.           <label
  197.             v-if="task && task.endTime"
  198.             style="color: #fff; font-weight: normal"
  199.           >
  200.             {{ parseTime(task.endTime) }}
  201.           </label>
  202.           <p v-if="task.endTime" style="color: #13ce66">已通过</p>
  203.           <p v-if="!task.endTime" style="color: #ffc600">待审批</p>
  204.         </el-timeline-item>
  206.         <el-timeline-item style="margin-left: 60px">
  207.           <div class="add-line-name">结束</div>
  208.         </el-timeline-item>
  209.       </el-timeline>
  211.       <!-- 已完结 -->
  212.       <el-timeline v-if="approvalFlowStatus == 2">
  213.         <el-timeline-item
  214.           style="margin-left: 60px"
  215.           icon="el-icon-check"
  216.           type="success"
  217.         >
  218.           <div class="add-line-name">发起</div>
  219.           <label
  220.             v-if="startUser"
  221.             style="color: #fff; font-weight: 500; margin-right: 30px"
  222.           >
  223.             {{ startUser.nickname }}
  224.             <span>/</span>
  225.             {{ startUser.deptName }}
  226.           </label>
  227.           <label
  228.             v-if="startTime"
  229.             style=" color: #fff; font-weight: 400"
  230.           >{{ parseTime(startTime) }}</label>
  232.           <p style="color: #13ce66">已提交</p>
  233.         </el-timeline-item>
  234.         <el-timeline-item
  235.           style="margin-left: 60px"
  236.           icon="el-icon-check"
  237.           type="success"
  238.         >
  239.           <div v-if="tasksData[0] && tasksData[0].name" class="add-line-name">
  240.             {{ tasksData[0].name }}
  241.           </div>
  242.           <label
  243.             v-if="tasksData[0] && tasksData[0].assigneeUser.nickname"
  244.             style="color: #fff; font-weight: normal; margin-right: 35px"
  245.           >
  246.             {{ tasksData[0].assigneeUser.nickname }}
  247.             <span v-if="tasksData[0].assigneeUser.deptName">/</span>
  248.             {{ tasksData[0].assigneeUser.deptName }}
  249.           </label>
  250.           <label
  251.             v-if="tasksData[0] && tasksData[0].endTime"
  252.             style="color: #fff; font-weight: normal"
  253.           >{{ parseTime(tasksData[0].endTime) }}</label>
  254.           <p style="color: #13ce66">已审批</p>
  255.         </el-timeline-item>
  256.         <el-timeline-item
  257.           style="margin-left: 60px"
  258.           icon="el-icon-check"
  259.           type="success"
  260.         >
  261.           <div v-if="tasksData[1] && tasksData[1].name" class="add-line-name">
  262.             {{ tasksData[1].name }}
  263.           </div>
  264.           <label
  265.             v-if="tasksData[1] && tasksData[1].assigneeUser.nickname"
  266.             style="color: #fff; font-weight: normal; margin-right: 40px"
  267.           >
  268.             {{ tasksData[1].assigneeUser.nickname }}
  269.             <span v-if="tasksData[1].assigneeUser.deptName">/</span>
  270.             {{ tasksData[1].assigneeUser.deptName }}
  271.           </label>
  272.           <label
  273.             v-if="tasksData[1] && tasksData[1].endTime"
  274.             style="color: #fff; font-weight: normal"
  275.           >{{ parseTime(tasksData[1].endTime) }}</label>
  276.           <p style="color: #13ce66">已审批</p>
  277.         </el-timeline-item>
  278.         <el-timeline-item
  279.           style="margin-left: 60px"
  280.           icon="el-icon-check"
  281.           type="success"
  282.         >
  283.           <div v-if="tasksData[2] && tasksData[2].name" class="add-line-name">
  284.             {{ tasksData[2].name }}
  285.           </div>
  286.           <label
  287.             v-if="tasksData[2] && tasksData[2].assigneeUser.nickname"
  288.             style="color: #fff; font-weight: normal; margin-right: 12px"
  289.           >
  290.             {{ tasksData[2].assigneeUser.nickname }}
  291.             <span v-if="tasksData[2].assigneeUser.deptName">/</span>
  292.             {{ tasksData[2].assigneeUser.deptName }}
  293.           </label>
  294.           <label
  295.             v-if="tasksData[2] && tasksData[2].endTime"
  296.             style="color: #fff; font-weight: normal"
  297.           >{{ parseTime(tasksData[2].endTime) }}</label>
  298.           <p style="color: #13ce66">已审批</p>
  299.         </el-timeline-item>
  301.         <el-timeline-item
  302.           style="margin-left: 60px"
  303.           icon="el-icon-check"
  304.           type="success"
  305.         >
  306.           <div class="add-line-name">结束</div>
  307.           <label>
  308.             <span
  309.               style="
  310.                 display: inline-block;
  311.                 color: #13ce66;
  312.                 font-weight: 500;
  313.                 margin-right: 30px;
  314.               "
  315.             >已完结</span>
  316.           </label>
  317.           <span v-if="tasksData[1] && tasksData[1].endTime">{{
  318.             parseTime(tasksData[1].endTime)
  319.           }}</span>
  320.         </el-timeline-item>
  321.       </el-timeline>
  323.       <!-- 退回流程状态 -->
  324.       <el-timeline v-if="approvalFlowStatus == 3 && tasksData.length > 0">
  325.         <el-timeline-item
  326.           style="margin-left: 60px"
  327.           icon="el-icon-check"
  328.           type="success"
  329.         >
  330.           <div class="add-line-name">发起</div>
  331.           <label
  332.             v-if="startUser"
  333.             style="color: #fff; font-weight: 500; margin-right: 30px"
  334.           >
  335.             {{ startUser.nickname }}
  336.             <span>/</span>
  337.             {{ startUser.deptName }}
  338.           </label>
  339.           <label
  340.             v-if="tasksData[0] && tasksData[0].createTime"
  341.             style="color: #fff; font-weight: normal"
  342.           >{{ parseTime(tasksData[0].createTime) }}</label>
  343.           <p style="color: #13ce66">已提交</p>
  344.         </el-timeline-item>
  345.         <el-timeline-item
  346.           v-for="(task, index) in tasksData"
  347.           :key="index"
  348.           style="margin-left: 60px"
  349.           :color="task.timeLineCorlor"
  350.           :icon="task.ischeck"
  351.           :type="task.istype"
  352.         >
  353.           <div v-if="task.name" class="add-line-name">
  354.             {{ task.name }}
  355.           </div>
  356.           <label
  357.             v-if="task.assigneeUser && task.assigneeUser.nickname"
  358.             style="color: #fff; font-weight: normal; margin-right: 30px"
  359.           >
  360.             {{ task.assigneeUser.nickname }}
  361.             <span v-if="task.assigneeUser.deptName">/</span>
  362.             {{ task.assigneeUser.deptName }}
  363.           </label>
  364.           <!-- <label
  365.               v-if="task.reviewerList && !task.assigneeUser"
  366.               style="color: #fff; font-weight: normal; margin-right: 30px"
  367.             >
  368.               {{ task.reviewerList[0].nickname }}
  369.               <span v-if="task.reviewerList[0].deptName">/</span>
  370.               {{ task.reviewerList[0].deptName }}
  371.             </label> -->
  372.           <label v-if="task.endTime" style="color: #fff; font-weight: normal">
  373.             {{ parseTime(task.endTime) }}
  374.           </label>
  375.           <p
  376.             v-if="task.assigneeUser"
  377.             style="color: #13ce66; font-weight: normal"
  378.           >
  379.             {{ task.result == 2 ? '已通过' : '' }}
  380.           </p>
  381.           <p v-if="task.assigneeUser" style="color: red; font-weight: normal">
  382.             {{
  383.               task.result === 3 ? '已退回' : task.result === 4 ? '已撤回' : ''
  384.             }}
  385.             <span v-if="task.reason" style="margin-left: 20px">
  386.               <span>{{ task.reason }}</span>
  387.             </span>
  388.           </p>
  389.         </el-timeline-item>
  391.         <el-timeline-item style="margin-left: 60px" :color="'red'">
  392.           <div class="add-line-name">结束</div>
  393.           <label>
  394.             <span
  395.               style="
  396.                 display: inline-block;
  397.                 color: red;
  398.                 font-weight: 500;
  399.                 margin-right: 30px;
  400.               "
  401.             >已退回</span>
  402.           </label>
  403.           <span v-if="tasksData[1] && tasksData[1].endTime">{{
  404.             parseTime(tasksData[1].endTime)
  405.           }}</span>
  406.         </el-timeline-item>
  407.       </el-timeline>
  408.     </div>
  409.   </div>
  410. </template>
  412. <script>
  413. import { getDate } from '@/utils/dateUtils'
  415. export default {
  416.   name: 'ColumnTip',
  417.   props: {
  418.     startUser: {
  419.       type: Object
  420.     },
  421.     approvalFlowStatus: {},
  422.     addFormFlowData: {
  423.       type: Object,
  424.       required: true
  425.     },
  426.     tasksData: {
  427.       type: Array,
  428.       default: () => []
  429.     },
  430.     startTime: {
  431.       type: Number
  432.     },
  434.     approvalLevel: {
  435.       type: Number,
  436.       default: null
  437.     },
  438.     rejectLevel: {
  439.       type: Number,
  440.       default: null
  441.     }
  442.   },
  443.   data() {
  444.     return {
  445.       timeLineCorlor: '',
  446.       ischeck: '',
  447.       addFormFlowDataS: {}
  448.     }
  449.   },
  450.   computed: {
  451.     isShowReason() {
  452.       return this.tasksData[2]?.str?.[1] !== 'null'
  453.     }
  454.   },
  455.   watch: {
  456.     addFormFlowData: {
  457.       immediate: true, // 第一次进入页面时也触发
  458.       handler(newData) {
  459.         // console.log(newData)
  460.         // 子组件接收到新的属性值时执行的逻辑
  461.         this.addFormFlowDataS = newData
  462.       }
  463.     },
  464.     tasksData(val) {
  465.       this.getTimelineColor(val)
  466.     },
  467.     startTime(newVal) {
  468.       return newVal
  469.     }
  470.   },
  471.   created() {},
  472.   mounted() {
  473.     console.log('taskdata', this.startTime)
  474.   },
  476.   methods: {
  477.     getTimelineColor(isTasksData) {
  478.       // console.log(`isTasksData`, isTasksData)
  479.       isTasksData.forEach((item, index) => {
  480.         // 判断每一项的endTime是否有值
  481.         if (item.endTime && item.result === 2) {
  482.           item.timeLineCorlor = '#13ce66'
  483.           item.ischeck = 'el-icon-check'
  484.           item.istype = 'success'
  485.         }
  486.         if (
  487.           item.result === 7 ||
  488.           item.result === 1 ||
  489.           item.assigneeUser == null
  490.         ) {
  491.           item.timeLineCorlor = '#ffc600'
  492.           item.ischeck = ''
  493.           item.istype = ''
  494.         }
  495.         if (item.result === 3 || item.result === 4) {
  496.           item.timeLineCorlor = 'red'
  497.           item.ischeck = ''
  498.           item.istype = ''
  499.         }
  500.         if (item.result == null) {
  501.           item.timeLineCorlor = ''
  502.           item.ischeck = ''
  503.           item.istype = ''
  504.           isTasksData.splice(index, 1)
  505.         }
  506.       })
  507.       return isTasksData
  508.     },
  509.     // 审批流程图标
  510.     getTimelineItemIcon(item) {
  511.       if (!item) {
  512.         return
  513.       }
  514.       if (item.result === 1) {
  515.         return 'el-icon-time'
  516.       }
  517.       if (item.result === 2) {
  518.         return 'el-icon-check'
  519.       }
  520.       if (item.result === 3) {
  521.         return 'el-icon-close'
  522.       }
  523.       if (item.result === 4) {
  524.         return 'el-icon-remove-outline'
  525.       }
  526.       return ''
  527.     },
  528.     getTimelineItemType(item) {
  529.       if (!item) {
  530.         return
  531.       }
  532.       if (item.result === 1) {
  533.         return 'primary'
  534.       }
  535.       if (item.result === 2) {
  536.         return 'success'
  537.       }
  538.       if (item.result === 3) {
  539.         return 'danger'
  540.       }
  541.       if (item.result === 4) {
  542.         return 'info'
  543.       }
  544.       return ''
  545.     },
  546.     // 审批耗时秒数
  547.     getDateStar(ms) {
  548.       return getDate(ms)
  549.     }
  550.   }
  551. }
  552. </script>
  554. <style scoped>
  555. .flow-box {
  556.   margin-right: 100px;
  557.   width: 500px;
  558.   height: auto;
  559.   /* height: 380px; */
  560.   color: #fff;
  561. }
  563. .history-container /deep/ .el-timeline {
  564.   margin-left: 20px;
  565.   margin: 10px;
  566. }
  568. .history-container /deep/ .el-timeline-item {
  569.   min-height: 60px;
  570.   display: flex;
  571.   height: auto;
  572. }
  574. .line-name {
  575.   position: absolute;
  576.   left: -65px;
  577.   top: -1px;
  578.   color: #fff;
  579.   text-align: right;
  580. }
  581. .add-line-name {
  582.   width: 100px;
  583.   position: absolute;
  584.   text-align: right;
  585.   left: -110px;
  586.   top: 0px;
  587.   color: #fff;
  588. }
  589. </style>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

饭宝

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表