crm-mobile/pages_crm/customFlowDetail.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navTitle" />
			
      <view
        v-if="showNoData"
        :style="{backgroundImage: bgUrl('images/no_data.png')}"
        class="no-data">
        暂无数据
      </view>
			
      <view v-else class="container">
        <template v-if="showTaskData">
          <view class="task-container">
            <view class="group-title-box">
              <view class="prev-badge" />
              <text>阶段工作</text>
            </view>
            <view class="task-content">
              <view
                v-for="(task, index) in detailData.taskData"
                :key="index"
                class="task-item">
                <view :class="{over: task.isOk}" class="checkbox">
                  <text v-if="task.isOk" class="icon wk wk-check" />
                </view>
					
                <view class="item-content">
                  <view class="item-title" :class="{'over': task.isOk}">
                    <text v-if="task.isNull" class="required">
                      *
                    </text>
                    <text>{{ task.taskName }}</text>
                  </view>
                  <view
                    v-if="task.isOk && task.createUserName"
                    class="item-desc">
                    {{ task.createUserName }}于{{ task.createTime | formatTime }}完成
                  </view>
                </view>
              </view>
            </view>
          </view>
					
          <view class="field-container">
            <view class="group-title-box">
              <view class="prev-badge" />
              <text>阶段工作</text>
            </view>
            <view class="field-content">
              <base-info-item
                v-for="item in fieldList"
                :key="item.fieldId"
                :field="item" />
            </view>
          </view>
        </template>

        <view
          v-if="auditInfo.examineFlowList"
          class="line" />

        <!--审核流程-->
        <view
          v-if="auditInfo.examineFlowList"
          class="examine-flow-container section">
          <view
            v-for="(item, index) in auditInfo.examineFlowList"
            :key="index"
            class="flow-item">
            <wk-audit-flow-item
              :item-data="item"
              :audit-info="auditInfo" />
          </view>
        </view>
      </view>
			
      <view
        v-if="showExamineBtn"
        class="footer-region">
        <view class="footer-box">
          <view
            v-if="auditInfo.isRecheck === 1"
            class="footer-button recall"
            @click="handleAuditAction('cancel')">
            撤回
          </view>
          <template v-if="auditInfo.isCheck === 1">
            <view class="footer-button refuse" @click="handleAuditAction('refuse')">
              拒绝
            </view>
            <view class="footer-button pass" @click="handleAuditAction('pass')">
              通过
            </view>
          </template>
        </view>
      </view>
			
      <view
        v-else-if="!showNoData"
        class="footer-btn-group">
        <button
          class="button plain-btn"
          @click="handleToComment">
          反馈
          <template v-if="detailData.commentNum">
            （{{ detailData.commentNum }}）
          </template>
        </button>
      </view>
    </view>
		
    <uni-popup
      ref="commentPopup"
      radius="20rpx 20rpx 0 0"
      type="bottom"
      @click.stop>
      <flow-comment-popup
        v-if="showCommentContent"
        :data-id="routerQuery.id"
        :comment-num="detailData.commentNum"
        @update="getData"
        @close="handleCloseComment" />
    </uni-popup>
  </view>
</template>

<script>
  import {
    QueryFlowDataInfoAPI,
    SaveFlowDataAPI
  } from '@/api/crm/flow.js'
  import { QueryExamineRecordList, AuditExamine } from 'API/examine'
	
  import BaseInfoItem from './components/detailSection/baseInfoItem.vue'
  import FlowCommentPopup from './components/customFlow/flowCommentPopup.vue'

  import moment from 'moment'

  export default {
    name: 'CustomFlowDetail',
    filters: {
      formatTime(data) {
        return moment(data).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    components: {
      BaseInfoItem,
      FlowCommentPopup
    },
    data() {
      return {
        loading: false,
        routerQuery: {},
        detailData: {},

        fieldList: [],

        auditInfo: {}, // 审批流程信息
				
        showCommentContent: false
      }
    },
    computed: {
      navTitle() {
        const name = this.detailData.flowName || ''
        return `${name}阶段信息`
      },
      showNoData() {
        return this.detailData &&
          !(this.detailData.taskData || []).length &&
          !(this.detailData.fieldData || []).length &&
          !this.detailData.examineId
      },
			
      showTaskData() {
        return this.detailData &&
          this.detailData.taskData &&
          this.detailData.taskData.length
      },
			
      showExamineBtn() {
        if (this.$isEmpty(this.auditInfo)) return false
        return this.auditInfo.isCheck === 1 || this.auditInfo.isRecheck === 1
      }
    },
    onLoad(options) {
      this.routerQuery = options || {}
      this.getData()
    },
    methods: {
      bgUrl(val) {
        return `url(${this.$static(val)})`
      },

      getData() {
        QueryFlowDataInfoAPI({
          dataId: this.routerQuery.id
        }).then(res => {
          this.detailData = res
          this.fieldList = this.detailData.fieldData || []

          if (res.examineId) {
            this.getAuditInfo()
          }
        }).catch(() => {})
      },

      /**
       * 获取审批步骤
       */
      getAuditInfo() {
        QueryExamineRecordList({
          recordId: this.detailData.examineRecordId
        }).then(res => {
          this.auditInfo = res
          // console.log('res step list: ', res)
        }).catch()
      },

      handleAuditAction(action) {
        // cancel 撤回 refuse 拒绝 pass 通过
        this.auditType = action
        getApp().globalData.auditInfo = this.auditInfo
        uni.$once('save-audit', this.handleAudit)
        this.$Router.navigateTo({
          url: '/pages_common/audit/index',
          query: {
            type: action
          }
        })
      },
			
      /**
       * 审核
       * @param form 审核信息
       */
      handleAudit(form) {
        let params = {
          typeId: this.id,
          recordId: this.detailData.examineRecordId,
					...form
        }
        console.log('audit:', form)
        AuditExamine(params).then(() => {
          this.$toast(params.status === 4 ? '撤销成功' : '审核成功')
          this.getData()
          this.$refreshAndToPrev(this, false)
        }).catch(() => {})
      },
			
      /**
       * 反馈信息弹窗
       */
      handleToComment() {
        this.showCommentContent = true
        this.$refs.commentPopup.open()
      },
			
      /**
       * 关闭反馈弹窗
       */
      handleCloseComment() {
        this.showCommentContent = false
        this.$refs.commentPopup.close()
      }
    }
  }
</script>

<style scoped lang="scss">
	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 6rpx;
		overflow: hidden;
		@include center;
		.icon {
			font-size: 28rpx;
			line-height: 1;
			color: white;
		}
		&.over {
			background-color: rgba(60,128,247,.5);
			border-color: transparent;
		}
	}
	
	.no-data {
		width: 100%;
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #BBBBBB;
		background-position: center 200rpx;
		background-repeat: no-repeat;
		background-size: 200rpx;
		padding-top: 430rpx;
	}
	
	.footer-btn-group {
		.plain-btn {
			color: $theme-color;
			border: 1rpx solid $theme-color;
			background-color: white;
		}
	}

	.container {
		flex: 1;
		background-color: white;
		overflow: auto;
		padding: 0 30rpx 20rpx;

		.group-title-box {
			font-size: $wk-font-medium;
			padding: 18rpx 0;
			@include left;
			.prev-badge {
				width: 10rpx;
				height: 30rpx;
				border-radius: 10rpx;
				background-color: $theme-color;
				margin-right: 15rpx;
			}
		}

		.task-container {
			.task-content {
				padding-left: 15rpx;
				margin-top: -15rpx;
				.task-item {
					padding: 20rpx 0;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					.item-content {
						flex: 1;
						color: $gray;
						margin-left: 25rpx;
						.required {
							color: $error;
						}
					}
					.item-desc {
						font-size: $wk-font-sm;
						color: $light;
						margin-top: 5rpx;
					}
				}
			}
		}

		.field-container {
			.field-content {
				margin: 0 -20rpx;
				.info-item {
					padding-left: 20rpx;
					padding-right: 20rpx;
					border-bottom: 0 none;
				}
			}
		}
		
		.line {
      width: calc(100% + 60rpx);
      height: 40rpx;
      background-color: $main-bg;
			margin: 0 -30rpx;
			&::before {
				content: '';
				width: 100%;
				height: 25rpx;
				background-color: white;
				display: block;
			}
    }
		
    .examine-flow-container {
      padding: 30rpx;
      .flow-item {
        position: relative;
        margin-bottom: 20rpx;
        &::after {
          content: '';
          position: relative;
          left: 52rpx;
          top: 10rpx;
          width: 1rpx;
          height: 60rpx;
          border-left: 1rpx dashed #ccc;
          display: block;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
	}

  .footer-region {
    background-color: white;
    width: 100%;
    height: 120rpx;
    padding: 0 30rpx;
    border-top: 1rpx solid $border-color;

    .footer-box {
      width: 100%;
      height: 100%;
      @include center;

      .footer-button {
        width: 210rpx;
        height: 72rpx;
        font-size: $wk-font-base;
        border-radius: 6rpx;
        @include center;
      }

      .refuse {
        background-color: $error;
        color: white;
        margin-right: 30rpx;
      }

      .pass {
        background-color: $theme-color;
        color: white;
      }

      .recall {
        color: $gray;
        background-color: #F5F5F5;
        margin-right: 30rpx;
      }
    }
  }
</style>