crm-mobile/components/wk-audit-add/wk-audit-add.vue

<template>
  <view class="wk-audit-add">
    <view class="header">
      审核信息
    </view>
		
    <view v-if="flowList.length > 0" class="content">
      <view
        v-for="(flowItem, flowIndex) in flowList"
        :key="flowItem.flowId"
        class="flow-item">
        <view class="flow-item-title">
          <view class="dot-circle" />
          <view class="text">
            {{ flowItem.name }}
          </view>
          <view class="badge">
            {{ getBadge(flowItem) }}
          </view>
        </view>
				
        <view class="flow-item-body">
          <template v-if="flowItem.examineType !== 4">
            <!-- 若只有一个人审批 -->
            <template v-if="flowItem.userList.length === 1">
              <view  
                v-for="(user, index) in flowItem.userList"
                :key="user.userId"
                class="user-box">
                <wk-avatar
                  :name="user.realname"
                  :avatar="user.img"
                  :size="12"
                  :preview="false"
                  class="avatar"
                  @click="handleClickUser(flowItem, flowIndex, index)" />
                <text class="name">
                  {{ user.realname }}
                </text>
                <text class="grade">
                  第{{ index + 1 }}级
                </text>
              </view>
            </template>
						
            <!-- 指定成员，角色审批合并 -->
            <view
              v-else-if="[1, 3].includes(flowItem.examineType)"
              class="user-box">
              <image :src="$static('images/avatar.png')" class="avatar" />
              <text class="name">
                {{ flowItem.userList.length }}人{{ getFlowAuditType(flowItem) }}
              </text>
              <text class="grade">
                第1级
              </text>
            </view>
						
            <!-- 上级和连续多级上级 -->
            <template v-else>
              <template v-if="flowItem.userList.length > 0">
                <view
                  v-for="(user, index) in flowItem.userList"
                  :key="user.userId"
                  class="user-box">
                  <wk-avatar
                    :name="user.realname"
                    :avatar="user.img"
                    :size="12"
                    :preview="false"
                    class="avatar"
                    @click="handleClickUser(flowItem, flowIndex, index)" />
                  <text class="name">
                    {{ user.realname }}
                  </text>
                  <text class="grade">
                    第{{ index + 1 }}级
                  </text>
                </view>
              </template>
              <template v-else>
                <view class="user-box">
                  <image :src="$static('images/avatar.png')" class="avatar" />
                  <text class="name">
                    XX
                  </text>
                  <text class="grade">
                    第1级
                  </text>
                </view>
              </template>
            </template>
          </template>
					
          <template v-else>
            <view
              v-for="(user, index) in flowItem.userList"
              :key="user.userId"
              class="user-box">
              <wk-avatar
                :name="user.realname"
                :avatar="user.img"
                :size="12"
                :preview="false"
                class="avatar"
                @click="handleClickUser(flowItem, flowIndex, index)" />
              <text class="name">
                {{ user.realname }}
              </text>
              <text class="grade">
                第{{ index + 1 }}级
              </text>
              <image
                v-if="flowItem.examineType === 4"
                :src="$static('images/icon/delete_fill.png')"
                class="delete-icon"
                @click="handleRemoveUser(flowItem, flowIndex, index)" />
            </view>
          </template>
					
          <view v-if="canChooseUser(flowItem)" class="user-box">
            <view class="avatar add" @click="handlerAddUser(flowItem, flowIndex)">
              +
            </view>
            <text class="name">
              多人{{ getFlowAuditType(flowItem) }}
            </text>
            <text class="grade">
              第{{ flowItem.userList.length + 1 }}级
            </text>
          </view>
        </view>
				
        <view v-if="flowIndex < flowList.length - 1" class="line" />
      </view>
    </view>
		
    <view v-else class="content">
      审核人为空，审核将自动通过。
    </view>
  </view>
</template>

<script>
  import { PreviewExamineFlow } from 'API/examine'
  import { deepCopy } from '@/utils/lib.js'
	
  export default {
    name: 'WkAuditAdd',
    props: {
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        guid: null,
        auditInfo: {},
        flowList: [],
				
        activeFlowIndex: -1,
        activeUserIndex: -1
      }
    },
    created() {
      this.guid = this.$guid()
    },
    methods: {
      /**
       * 获取审批流信息
       */
      getAuditInfo(params = {}) {
        // { name: '合同', value: 1 },
        // { name: '回款', value: 2 },
        // { name: '发票', value: 3 },
        // { name: '薪资', value: 4 },
        // { name: '采购审批', value: 5 },
        // { name: '采购退货审批', value: 6 },
        // { name: '销售审批', value: 7 },
        // { name: '销售退货审批', value: 8 },
        // { name: '付款审批', value: 9 },
        // { name: '办公审批', value: 10 },
        // { name: '盘点审批', value: 11 },
        // { name: '调拨审批', value: 12 }
        PreviewExamineFlow(params).then(res => {
          this.auditInfo = res
          const list = deepCopy(res.examineFlowList || [])
          list.forEach(o => {
            if (o.examineType === 4) {
              o.userList = []
            }
          })
          this.flowList = list
        }).catch(() => {
          this.auditInfo = {}
          this.flowList = []
          this.remarks = ''
        })
      },
			
      getBadge(flowItem) {
        return {
          1: '指定成员',
          2: '上级',
          3: '角色',
          4: '发起人自选',
          5: '连续多级上级'
        }[flowItem.examineType] || ''
      },
			
      getFlowAuditType(flowItem) {
        return {
          1: '依次审批',
          2: '会签',
          3: '或签'
        }[flowItem.type] || ''
      },
			
      /**
       * 判断是否可以选人
       * @param {Object} flowItem
       */
      canChooseUser(flowItem) {
        if (flowItem.examineType !== 4) return false // 自选
        if (flowItem.chooseType === 1) return flowItem.userList.length < 1 // 自选1人
        if (flowItem.chooseType === 2) return true // 自选多人
        return false
      },
			
      /**
       * 点击审批人头像
       */
      handleClickUser(flowItem, flowIndex, userIndex) {
        if (flowItem.examineType !== 4) return // 自选
        this.handlerAddUser(flowItem, flowIndex, userIndex)
      },
			
      /**
       * 移除
       */
      handleRemoveUser(flowItem, flowIndex, userIndex) {
        this.activeFlowIndex = -1
        this.activeUserIndex = -1
        this.flowList[flowIndex].userList.splice(userIndex, 1)
      },
			
      /**
       * 自选审核人
       */
      handlerAddUser(flowItem, flowIndex, userIndex = -1) {
        const bridge = getApp().globalData.selectedValBridge
        let defaultVal = []
        if (userIndex !== -1) {
          defaultVal = [flowItem.userList[userIndex]]
          this.activeUserIndex = userIndex
        }
        this.activeFlowIndex = flowIndex
        this.activeUserIndex = userIndex
				
        // 1 全公司 2 指定成员 3 指定角色
        if (flowItem.rangeType === 1) {
          // 从全公司中选人
          bridge.user = {
            title: '选择审核人',
            maxlength: 1,
            guid: this.guid,
            defaultVal: defaultVal
          }
        } else {
          // 部分选人
          bridge.user = {
            title: '选择审核人',
            maxlength: 1,
            guid: this.guid,
            list: this.auditInfo.examineFlowList[flowIndex].userList,
            defaultVal: defaultVal
          }
        }
        uni.$on('selected-user', this.selectedUser)
        this.$Router.navigateTo('/pages_common/selectList/user')
      },
			
      /**
       * 选中员工
       * @param {Object} data
       */
      selectedUser(data) {
        if (this.guid === data.guid) {
          if (data.data.length > 0) {
            const user = data.data[0]
            console.log('activeFlowIndex', this.activeFlowIndex)
            const findIndex = this.flowList[this.activeFlowIndex].userList.findIndex(o => o.userId === user.userId)
            if (findIndex !== -1 && findIndex !== this.activeUserIndex) {
              setTimeout(() => {
                this.$toast('已经选择过该审批人啦')
              }, 100)
            } else {
              if (this.activeUserIndex !== -1) {
                this.flowList[this.activeFlowIndex].userList.splice(this.activeUserIndex, 1, user)
              } else {
                this.flowList[this.activeFlowIndex].userList.push(user)
              }
            }
          }
        }
        this.activeFlowIndex = -1
        uni.$off('selected-user')
      },
			
      getSaveData() {
        if (this.flowList.length === 0) return {}
        const optionalList = []
        for (let i = 0; i < this.flowList.length; i++) {
          const item = this.flowList[i]
          if (item.examineType === 4) {
            if (this.$isEmpty(item.userList)) {
              this.$toast('请完善审批信息')
              return null
            }
            optionalList.push({
              flowId: item.flowId,
              userList: item.userList.map(u => u.userId)
            })
          }
        }
        return { optionalList }
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-audit-add {
		width: 100%;
		.header {
			width: 100%;
			font-size: 24rpx;
			background-color: #F3F5FA;
			padding: 20rpx 30rpx;
		}
		
		.content {
			width: 100%;
			font-size: $wk-font-base;
			color: $dark;
			background-color: white;
			padding: 30rpx 24rpx 40rpx;
			
			.flow-item {
				position: relative;
				
				.flow-item-title {
					@include left;
					.dot-circle {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #E1E1E1;
						margin-right: 15rpx;
					}
					.text {
						font-size: $wk-font-sm;
					}
					.badge {
						color: white;
						font-size: 20rpx;
						line-height: normal;
						background-color: #FD715A;
						margin-left: 15rpx;
						padding: 0 15rpx;
						border-radius: 30rpx;
					}
				}
				
				.flow-item-body {
					width: 100%;
					flex-wrap: wrap;
					padding-left: 20rpx;
					@include left;
					.user-box {
						position: relative;
						flex-direction: column;
						margin: 15rpx 22rpx;
						@include center;
						.avatar {
							width: 70rpx;
							height: 70rpx;
							margin-bottom: 8rpx;
						}
						.add {
							font-size: 52rpx;
							color: $light;
							font-weight: 300;
							border-radius: 50%;
							border: 1rpx dotted #ccc;
							@include center;
						}
						.name {
							font-size: 22rpx;
							color: $gray;
						}
						.grade {
							font-size: $wk-font-sm;
						}
						.delete-icon {
							position: absolute;
							top: -10rpx;
							right: 0;
							width: 32rpx;
							height: 32rpx;
							background-color: white;
							border-radius: 50%;
						}
					}
				}
				
				.line {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					width: 1rpx;
					height: 100%;
					background-color: #E1E1E1;
				}
				
			}
		}
	}
</style>