gdy_qywx_pc/src/views/common/repeatTaskDetailsPopup.vue

<template>
  <div>
    <!-- 重复任务详情弹窗 -->
    <el-drawer :visible.sync="Delay_to_open"  :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
      <div class="details_title">{{title}}</div>
      <div class="details_content" v-if="workDetailData" v-loading="loading">
        <ul>
          <li class="flex-box">
            <div class="label">任务内容</div>
            <div class="content_text">{{workDetailData.name}}</div>
          </li>
          <li class="flex-box">
            <div class="label">任务描述</div>
            <div class="content_text yellow">{{workDetailData.remark}}</div>
          </li>
          <li class="flex-box" v-if="workDetailData">
            <div class="label">执行周期</div>
            <div class="content_text yellow">{{workDetailData.task_expire_day}}{{workDetailData.task_cycle == 1?'天':workDetailData.task_cycle == 2?'周':'月'}}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config">
            <div class="label">逾期扣分</div>
            <div class="content_text yellow">{{workDetailData.point_config.timeout_deduction_point}}/天</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config">
            <div class="label">任务积分</div>
            <div class="content_text yellow">{{workDetailData.point_config.base_point}}</div>
          </li>
          <li class="flex-box">
            <div class="label">任务附件</div>
            <div class="content_text">
              <el-image
                v-for="(item,index) in workDetailData.file_list"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item">
              </el-image>
            </div>
          </li>
        </ul>
        <el-row style=" margin-bottom: 20px;">
          <el-col :span="24" style="line-height: 30px;">审批人</el-col>
          <el-col :span="24">
            <div>
              <userImage class="fl" :id="workDetailData.reviewer_id" :user_name="workDetailData.reviewer_name" width="50px" height="50px" style=" margin-right: 15px;"></userImage>
              <p style="margin: 0; line-height: 50px;"><WWOpenData type="userName" :openid="workDetailData.reviewer_name"></WWOpenData></p>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="workDetailData.target_info">
          <el-col :span="24" style="line-height: 30px;">执行人</el-col>
          <el-col :span="24">
            <div v-for="(item,index) in workDetailData.target_info" style="margin-bottom: 10px;">
              <userImage class="fl" :id="item.id" :user_name="item.name" width="50px" height="50px" style=" margin-right: 15px;"></userImage>
              <p style="margin: 0; line-height: 50px;"><WWOpenData type="userName" :openid="item.name"></WWOpenData></p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  export default {
    name: 'repeatTaskDetailsPopup',
    props:{
      title: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        Delay_to_open:false,//打开抽屉
        
        loading: false,
        workDetailData:{},
      }
    },
    components: {},
    watch:{},
    mounted() {
      this.getData()
      this.Delay_to_open = this.visible//更换打开抽屉时机，避免打开两次
    },
    methods: {
      // 关闭弹窗
      handleClose(){
        this.$emit('update:visible', false)
      },
      // 获取数据
      getData(){
        let self = this
        self.loading = true
        let data =  {schedule_id: this.id}
        self.$http('get','/api/integral/schedule',data
        ).then(res => {
					if (res.data.code == 1) {
            self.workDetailData = res.data.data
          }
          self.loading = false
				}).catch(e => {
          self.$message.error(e.data.msg)
          self.loading = false
        })
      }
    }
  }
</script>
<style lang="scss" scoped="scoped">
  .details_content{
    & .d_userMessage{
      margin-left: 10px;
    }
    & .d_userMessage div:nth-child(1){
      font-size: 16px;
      margin-bottom: 8px;
    }
    & .d_userMessage div:nth-child(2){
      font-size: 12px;
      color: #909399;
    }
    & .d_progress{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: 10px;
    }
    & ul{
      padding: 12px 0;
      border-bottom: 1px solid #f1f1f1;
      & li{
        padding: 6px 0;
      }
      & .label{
        width: 80px;
        text-align: left;
        color: #909399;
      }
      & .content_text{
        flex:1
      }
    }
  }
  .fontColorF{
    color:#909399;
  }
</style>