crm-mobile/pages_crm/components/customFlow/flowProgress.vue

<template>
  <view
    v-if="showFlow"
    class="flow-progress">
    <!-- <view class="progress-box">
      <cmd-progress
        :width="rpxToPx(80)"
        :stroke-width="10"
        :trail-width="10"
        :show-info="false"
        :percent="progressPercent"
        stroke-color="#1f72ff"
        type="circle" />
      <text class="progress-box__content">
        {{ stepIndex }}/{{ listLength }}
      </text>
    </view> -->
    
    <view class="progress-info">
      <view class="status">
        {{ currentFlow.flowName || '--' }}
      </view>
      <view class="label">
        阶段信息
      </view>
    </view>
		
    <view
      class="progress-status"
      @click="handleToProgress">
      <text class="wk wk-edit icon" />
      更改
    </view>
  </view>
</template>

<script>
  import { QueryFlowSettingList } from '@/api/crm/flow.js'
  import { divideOperation, multiOperation } from '@/utils/lib.js'
  import { crmEnum } from '../../enum.js'
	
  /**
   * 自定义流程进度
   */
  export default {
    name: 'FlowProgress',
    props: {
      type: {
        type: String,
        required: true
      },
      detailId: {
        type: [String, Number],
        required: true
      },
      detailData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        keyMap: {
          type: 'customer',
          field: 'customerId'
        },
        flowData: null
      }
    },
    computed: {
      showFlow() {
        return this.flowData &&
          this.flowData.settingList &&
          this.flowData.settingList.length
      },
			
      stepIndex() {
        if (!this.flowData) return 0
        const list = this.flowData.settingList || []
        if (list.length === 0) return 0
        const currentId = this.flowData.dataId
        const findIndex = this.flowData.settingList.findIndex(o => o.id === currentId)
        if (findIndex === -1) return 0
        return findIndex + 1
      },
      listLength() {
        if (!this.flowData) return 0
        const list = this.flowData.settingList || []
        return list.length + 1
      },
      // 进度百分比
      progressPercent() {
        if (this.stepIndex === 0) return 0
        if (this.listLength === 0) return 100
        let res = divideOperation(this.stepIndex, this.listLength)
        res = multiOperation(res, 100)
        return Number(res.toFixed(2))
      },
      // 当前所在的流程
      currentFlow() {
        if (!this.flowData) return null
        const list = this.flowData.settingList || []
        const findRes = list.find(o => o.id === this.flowData.dataId)
        return findRes || null
      }
    },
    watch: {
      detailData: {
        handler() {
          if (this.detailData) {
            this.getData()
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      rpxToPx(num) {
        return uni.upx2px(num)
      },
      getData() {
        const key = this.type.replace('crm_', '')
        const obj = crmEnum[key] || {}
        if (!this.detailData || !this.detailData[obj.primaryKey]) return

        QueryFlowSettingList({
          label: obj.type,
          typeId: this.detailData[obj.primaryKey]
        }).then(res => {
          console.log('QueryFlowSettingList: ', res)
          this.flowData = res
        }).catch(() => {
        })
      },
			
      /**
       * 切换阶段
       */
      handleToProgress() {
        this.$Router.navigateTo({
          url: '/pages_crm/customFlowList',
          query: {
            type: this.type,
            typeId: this.detailId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.flow-progress {
		font-size: 24rpx;
		color: $gray;
		@include left;
		
		.progress-box {
			position: relative;
			width: 80rpx;
			height: 80rpx;
			margin-right: 25rpx;
			
			.progress-box__content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		
		.progress-info {
			flex: 1;
			.status {
				font-size: $wk-font-base;
				color: $dark;
				font-weight: 500;
			}
			.label {
				font-size: $wk-font-mini;
				color: $theme-color;
			}
		}
		
		.progress-status {
			color: $theme-color;
			font-size: $wk-font-mini;
			.icon {
				font-size: inherit;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
	}
</style>