aiot-app/components/Approval.vue

<!-- 审批组件 -->
<template>
  <view class="approval-container">
    <view class="approval_btn-wrapper">
      <text class="approval-btn refuse" @click="handleRefuse">驳回</text>
      <text class="approval-btn primary" @click="handlePass(true)">通过</text>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="驳回原因"
        placeholder="请输入内容"
        :before-close="true"
        @close="handleClose"
        @confirm="timeoutCauseConfirm"
      ></uni-popup-dialog>
    </uni-popup>
	
	
	<uni-popup ref="evaluateDialog" type="dialog" background-color="#fff">
		<view class="evaluate_box">
			<view class="title">服务评价</view>
			 <view class="btn_box">
				 <view v-for="(item,index) in evaluateList" :key="index" :class="[actCode == item.dictCode ? 'actBtn' : '', 'btn']" @click="handleAct(item.dictCode)">
					 {{item.dictValue}}
				 </view>
			 </view>
			 
			 <view class="btn_ok" @click="handleOk">提交</view>
			 
		</view>
	</uni-popup>
	
  </view>
</template>

<script>
import { postJ, get, } from '../utils/api'
export default {
  props: {
    devOpsType: {
      type: [Number, String]
    },
    planType: {
      type: [Number, String]
    },
    myHandleId: {
      type: [Number, String]
    },
    id: {
      type: [Number, String]
    }
  },
  data() {
	    return {
			 evaluateList: [],
			 actCode: null
		}
  },
  created () {
	   this.getEnum()
  },
  methods: {
    handleRefuse () {
      this.$refs.inputDialog.open()
	 
    },
    handleClose () {
      this.$refs.inputDialog.close()
    },
    handlePass (checked, cause) {
      const params = {
        checked,
        handleType: this.devOpsType,
        myHandleId: this.myHandleId,
        id: this.id,
        type:   this.planType == 10 ? 10 : this.planType == 3 ? 1 : 2
      }
      if (cause) {
        params.cause = cause
      }
      postJ(this.apiUrl + '/plan/info/audit', params).then(res => {
        if (res?.success) {
			if(this.planType == 10 || this.planType == 3) {
				this.$refs.evaluateDialog.open()
			} else {
				uni.navigateTo({
				  url: `/pages/home/backlog/result?type=${
				    checked ? 'approve' : 'refuse'
				  }&status=${this.devOpsType}`
				})
			}
     
        }
      })
    },
    timeoutCauseConfirm (value) {
      if (!value) {
        uni.showToast({
          title: '请输入驳回原因',
          icon: 'none'
        })
        return
      }

      this.handlePass(false, value)
      this.$refs.inputDialog.close()
    },
	
	getEnum() {
		get(this.apiUrl + '/enumerationKeyvalue/getListByMainCode/evaluate').then(res => {
			if(res?.success) {
				this.evaluateList = res.data
			
			}
		})
	
	},
	
	handleAct(code) {
		this.actCode = code
	},
	
	handleOk() {
		let params = {
			evaluationResult: this.actCode,
			id: this.id
		}
		 postJ(this.apiUrl + '/planRepair/evaluation', params).then(res => { 
			 if(res?.success) {
				 this.$refs.evaluateDialog.close()
			 	uni.navigateTo({
			 	  url: `/pages/home/backlog/result?type=approve&status=${this.devOpsType}`
			 	})
			 
			 }
		 })
	}
	
	
  }
}
</script>

<style lang="scss" scoped>
.approval-container {
  width: 100vw;
  height: 80rpx;

  .approval_btn-wrapper {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 80rpx;
	background-color: #fff;
  }

  .approval-btn {
    flex: 1;
    line-height: 78rpx;
    text-align: center;
    border: 1rpx solid $j-primary-border-green;
    &.refuse {
      color: red;
    }
    &.primary {
      background-color: $j-primary-border-green;
      color: #fff;
    }
  }
}

.evaluate_box{
	width: 600rpx;
	min-height: 280rpx;
	
	.title{
	  margin-top: 32rpx;
		  text-align: center;
		  font-size: 40rpx;
		  font-weight: 600;
	}
	.btn_box{
		width: 400rpx;
		display: flex;
		flex-direction: row;
		margin: auto;
		margin-top: 20rpx;
		.btn{
			width: 260rpx;
			height: 46rpx;
			border: 2rpx solid #157a2c;
			text-align: center;
			line-height: 46rpx;
			color: #000;
		}
		.actBtn{
				border: 2rpx solid #157a2c;
				background: #157a2c;
				color: #fff;
		}
		
	
	}

	.btn_ok{
			  width: 200rpx;
				height: 60rpx;
				background: #157a2c;
				color: #fff;
				margin: auto;
				margin-top: 50rpx;
				line-height: 60rpx;
				text-align: center;
		}
}
</style>