dd_pc/src/views/task/get_task.vue

<template>
  <div>
    <div class="box">
      <el-tabs v-model="active" type="card">
        <el-tab-pane label="待领取" name="unclaimed">
        </el-tab-pane>
        <el-tab-pane label="已领取" name="received">
        </el-tab-pane>
      </el-tabs>
      <div v-show="active === 'unclaimed'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail" >
          <el-table-column label="任务内容" prop="task_name"></el-table-column>
          <el-table-column label="积分" prop="base_point"></el-table-column>
          <el-table-column label="截止时间" prop="expire_time"></el-table-column>
          <el-table-column label="操作" prop="owner_id">
            <template slot-scope="scope">
              <el-link type="primary" :underline='false'>领取任务</el-link>
              <!-- <span>{{scope.row.receiver_id == owner_id?'（发布人）':''}}</span> -->
            </template>
          </el-table-column>
          <template slot="empty">
						<noData></noData>
          </template>
        </el-table>
      </div>

      <div v-show="active === 'received'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail" >
          <el-table-column label="执行人" prop="receiver_id">
            <template slot-scope="scope">
              <div style="display:flex">
                <userImage class="fl" :id="scope.row.receiver_id" :user_name="scope.row.receiver_name" :img_url="scope.row.receiver_img_url" width="50px" height="50px" ></userImage>
                <span style="line-height: 50px; padding-left: 10px;">{{scope.row.receiver_name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name"></el-table-column>
          <el-table-column label="积分" prop="base_point"></el-table-column>
          <el-table-column label="截止时间" prop="expire_time"></el-table-column>
          <template slot="empty">
						<noData></noData>
          </template>
        </el-table>
      </div>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40, 50, 100]"
					layout="total, sizes, prev, pager, next"
          :current-page="formData.page"
					:page-size="formData.page_size"
					:total="total">
				</el-pagination>
			</center>

      <el-drawer
        title="我是标题"
        :custom-class="'drawer_details'"
        :visible.sync="detailShow"
        :with-header="false"
        size="500px">
        <div class="details_title">任务详情</div>
        <div class="details_content" v-loading="detail_loading">
          <el-row style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
            <el-col :span="24">
              <div class="flex-box flex-v-ce">
                <userImage :user_name="active=='unclaimed'?detailInfo.owner_name:detailInfo.receiver_name" :id="active=='unclaimed'?detailInfo.owner_id:detailInfo.receiver_id" :img_url="active=='unclaimed'?detailInfo.owner_img_url:detailInfo.receiver_img_url" class="fl" width="50px" height="50px" fontSize="1.1"></userImage>
                <span style="line-height:50px; margin-left:10px;margin-right:4px;">{{active=='unclaimed'?detailInfo.owner_name:detailInfo.receiver_name}}</span>
                <span class="color_red point" v-show="detailInfo.point_config.base_point >= 0"> +{{detailInfo.point_config.base_point}}</span>
                <span class="color_green point" v-show="detailInfo.point_config.base_point < 0"> {{detailInfo.point_config.base_point}}</span>
              </div>
              <!-- {{point_name(detailInfo.pt_id)}} -->
              <!-- {{point_name(detailInfo.pt_id)}} -->
            </el-col>
          </el-row>

          <el-row v-if="detailInfo.task_name!==''">
            <el-col :span="4">任务内容</el-col>
            <el-col :span="20">{{detailInfo.task_name}}</el-col>
          </el-row>

          <el-row v-if="detailInfo.task_remark!==''">
            <el-col :span="4">任务描述</el-col>
            <el-col :span="20">{{detailInfo.task_remark}}</el-col>
          </el-row>

          <el-row v-if="detailInfo.type_mark!==''">
            <el-col :span="4">任务类型</el-col>
            <el-col :span="20">{{detailInfo.type_mark}}</el-col>
          </el-row>

          <el-row  v-if="get_point_name(detailInfo.pt_id)!==''">
            <el-col :span="4">积分类型</el-col>
            <el-col :span="20">{{get_point_name(detailInfo.pt_id)}}</el-col>
          </el-row>

          <el-row v-if="detailInfo.expire_time!==''">
            <el-col :span="4">截止时间</el-col>
            <el-col :span="20">{{detailInfo.expire_time}}</el-col>
          </el-row>

          <!-- <el-row v-if="active =='unclaimed'">
            <el-col :span="4">审批人</el-col>
            <el-col :span="20">{{detailInfo.reviewer_name}}</el-col>
          </el-row>

          <el-row v-if="active !=='unclaimed'">
            <el-col :span="4">发布人</el-col>
            <el-col :span="20">{{detailInfo.owner_name}}</el-col>
          </el-row> -->
           <el-row v-if="detailInfo.reviewer_name">
            <el-col :span="4">审批人</el-col>
            <el-col :span="20">{{detailInfo.reviewer_name}}</el-col>
          </el-row>

          <el-row v-if="detailInfo.owner_name">
            <el-col :span="4">发布人</el-col>
            <el-col :span="20">{{detailInfo.owner_name}}</el-col>
          </el-row>

          <el-row  v-if="detailInfo.task_file_list !== null && detailInfo.task_file_list.length !== 0">
            <el-col :span="4">图片附件</el-col>
            <el-col :span="20">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailInfo.task_file_list[0]"
                :preview-src-list="detailInfo.task_file_list">
              </el-image>
            </el-col>
          </el-row>

          <div style="position: absolute; bottom: 20px; display: block; right: 20px;" v-if="detailInfo.status == '1' && user_id != detailInfo.owner_id && detailInfo.reviewer_id != user_id && !this.$authoritys('creator')">
            <el-button plain @click="detailShow = false">取消</el-button>
            <el-button type="primary" @click="collectTask" :loading="receiveLoad">领取任务</el-button>
          </div>
        </div>
      </el-drawer>

    </div>
  </div>
</template>

<script>
  import noData from '@/components/noData';
  export default {
    name: 'get_task',
    data() {
      return {
        active: 'unclaimed',
        list: [],
        loading: false,
        receiveLoad: false,
        total: null,
        formData: {
          page: 1,
          page_size: 10
        },
        detailShow: false,
        detail_loading: false,
        detailInfo: {
          point_config:{},
          task_file_list: []
        },
        point_types: JSON.parse(localStorage.getItem('types')),
        user_id: this.$getUserData().id
      }
    },
    mounted() {
      this.get_list()
    },
    components: {noData},
    watch:{
      active(val){
        this.list = []
        this.get_list()
      }
    },
    methods: {
      // 领取任务
      collectTask(){
        let self = this
        self.receiveLoad = true
        self.$axios('POST','/api/integral/task',{task_id: this.detailInfo.id}).then((res) => {
          if (res.data.code == 1) {
            self.$message.success('领取成功')
            self.list.forEach((element,index) => {
              if (element.id == self.detailInfo.id) {
                self.list.splice(index, 1)
              }
            });
            self.detailShow = false
          }else{
            self.$message.error(res.data.msg)
          }
        }).finally(()=>{
					self.receiveLoad = false
				})
      },
			// 页面变更
      handleCurrentChange(val) {
				this.formData.page = val
				this.get_list()
			},
      handleSizeChange(val){
        this.formData.page_size = val
        this.get_list()
      },

      // 打开详情弹窗
      openDetail(item){
        this.detailShow = true
        this.getDetailInfo(item)
      },
      // 获取详情信息
      getDetailInfo(item){
        let self = this
        self.detail_loading = true
        let data = {task_id: item.id}
        self.$axios('get','/api/integral/task',data).then((res) => {
          if (res.data.code == 1) {
            self.detailInfo = JSON.parse(JSON.stringify(res.data.data))
          }else{
            self.$message.error(res.data.data.msg)
          }
        }).finally(() => {
          self.detail_loading = false
        })
      },
      // 获取列表信息
      get_list(){
        let self = this
        self.loading = true
        let data = JSON.parse(JSON.stringify(this.formData))
        if (self.active == 'unclaimed') {
          data.hall_type = 'waiting'
        }else{
          data.hall_type = 'catch'
        }
        self.$axios('get','/api/integral/task/hall',data).then((res) => {
          if (res.data.code == 1) {
						self.list = res.data.data.list
						self.total = res.data.data.total
          }else{
            self.$message.error(res.data.data.msg)
          }
        }).finally(() => {
          self.loading = false
        })
      },
      // point_name(id){
      //   return this.point_types.find((item)=>{if (item.id == id) {return item.name}}).name
      // },
      // 获取积分名称
      get_point_name(id){
        let name = ''
        this.point_types.forEach(element => {
          if (element.id == id) {
            name = element.name
          }
        });
        return name
      },

      
    }
  }
</script>

<style scoped lang="scss">
  .box{
    min-height: calc(100vh - 184px);
    min-width: 800px;
    background-color: #fff;
    padding: 20px;
  }
  .color_red{
    color: #F56C6C;
  }
  .color_green{
    color: #67C23A;
  }
  .details_content{
    .row_title{
      position:relative;
      margin:0 0 20px 0;
      padding-top: 12px;
      font-size: 16px;
      color: #303133;
      line-height: 22px;
    }
    .row_title:before{
      position: absolute;
      top: 0;
      content: " ";
      width: 100%;
      border-top: 1px #f8f8f8 solid;
    }
    .el-row {
      margin-bottom:10px;
      font-size: 14px;
      .el-col-4{
        color: #606266;
      }
    }
  }
   ::v-deep .el-table tr:hover{
    cursor:pointer
  }

  
  .details_content {
    padding: 20px;
    height: calc(100vh - 60px);
    overflow: auto;
    .row_title {
      position: relative;
      margin: 0 0 20px 0;
      padding-top: 12px;
      font-size: 16px;
      color: #303133;
      line-height: 22px;
    }
    .row_title:before {
      position: absolute;
      top: 0;
      content: ' ';
      width: 100%;
      border-top: 1px #f8f8f8 solid;
    }
    .el-row {
      margin-bottom: 10px;
      font-size: 14px;
      .el-col-4 {
        color: #606266;
      }
    }
  }
  .details_title {
    font-size: 18px;
    padding: 20px;
    border-bottom: 1px #efefef solid;
  }
</style>