dd_pc/src/views/task/my_task.vue

<template>
  <div>
    <div class="box">
      <el-tabs v-model="formData.status" type="card">
        <el-tab-pane v-for="(item,index) in tabsOption" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>

      <el-form ref="formData" :inline="true" :model="formData" label-width="80px">
        <el-form-item label="积分类型">
          <el-select v-model="formData.pt_id" clearable placeholder="请选择积分类型">
            <el-option v-for="item in point_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-select v-model="formData.sort" placeholder="请选择排序">
            <el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div v-if="formData.status == 'running'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail" >
          <el-table-column label="任务内容" prop="task_name">
			  <template slot-scope="scope">
					<span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}驱蚊器翁请问请问恶趣味恶趣味</span>
			  </template>
		  </el-table-column>
          <el-table-column label="积分">
            <template slot-scope="scope">
              <span>{{scope.row.point_config.base_point}}</span>
            </template>
          </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' @click.stop="completeBtn(scope.row)">完成任务</el-link>
            </template>
          </el-table-column>
          <template slot="empty">
						<noData></noData>
          </template>
        </el-table>
      </div>

      <div v-else>
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
          <el-table-column label="任务内容" prop="task_name">
			  <template slot-scope="scope">
			  	<span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}</span>
			  </template>
		  </el-table-column>
          <el-table-column label="积分">
            <template slot-scope="scope">
              <span>{{scope.row.point_config.base_point}}</span>
            </template>
          </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, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :current-page="formData.page"
          :page-size="formData.page_size"
          :total="total">
        </el-pagination>
      </center>

    </div>

    <el-drawer
      :custom-class="'drawer_details'"
      :visible.sync="completeShow"
      wrapperClosable
      :with-header="false"
      size="500px">
      <div class="details_title">完成任务</div>
      <div class="details_content">
        <el-form :model="detail_form" ref="detail_form" label-width="80px">
          <el-form-item label="任务备注" prop="remark" :rules="[{ required: true, message: '请填写任务备注(限20字)', trigger: 'blur' }]">
            <el-input v-model="detail_form.remark" type="textarea" max="20"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('detail_form')">取消</el-button>
            <el-button type="primary" @click="onSubmit('detail_form')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <!-- 详情弹窗 -->
    <taskDetailsPopup :visible.sync="showDetailPopup"  v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>

  </div>
</template>

<script>
  import noData from '@/components/noData';
  import taskDetailsPopup from '@/views/common/taskDetailsPopup'

  export default {
    name: 'my_task',
    data() {
      return {
        active: 'running',
        tabsOption: [
          { label: '待完成', name: 'running' },
          { label: '待审批', name: 'complete' },
          { label: '已审批', name: 'reviewed' },
        ],
        list: [],
        loading: false,
        total: null,
        sort:[{id: 1,code: 'expire',name: '按截止时间'}, {id: 2,code: 'publish',name: '按发布时间'}],
        point_type: null,
        detail_form:{
          id: '',
          remark: ''
        },
        formData: {
          status: "running",
          pt_id: 0,
          sort: 'publish',
          today: '0',
          page: 1,
          page_size: 10,
        },
        completeShow: false,
        showDetailPopup: false,
        detailId: null,
        showDetailPopup: false,
        showRepetitiveTasksPopup: false,
        showRewardTaskDetailsPopup: false
      }
    },
    components: {taskDetailsPopup,noData},
    watch:{
      'formData.pt_id'(val){
        this.get_list()
      },
      'formData.sort'(val){
        this.get_list()
      },
      'formData.status'(val){
        this.formData.page = 1
        this.formData.pt_id = 0
        this.formData.sort = 'expire'
        this.list = []
        this.get_list()
      }
    },
    mounted() {
      this.get_list()
      this.point_type = this.getPointType()
    },
    methods: {
      // 点击完成
      completeBtn(data){
        this.detail_form.id = data.id
        this.completeShow = true
      },
      //提交完成任务
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let self = this
            let data = {
              work_id: self.detail_form.id,
              progress: '100',
              remark: self.detail_form.remark,
              state:'1'
            }
            self.$axios('post','/api/integral/work',data).then(res => {
              if (res.data.code == 1) {
                self.$message.success(res.data.msg);
                self.$refs[formName].resetFields();
                self.completeShow = false
                self.get_list()
              } else {
                self.$message.error(res.data.msg);
              }
            })
          }
        });
      },
      //重置表单
      resetForm(formName){
        this.$refs[formName].resetFields();
        this.completeShow = false
      },
      getPointType(){
        let point = window.plus?JSON.parse(puls.storage.getItem('types')):JSON.parse(localStorage.getItem('types'))
        // point.splice(0,1)
        point.unshift({code: "AF",id: 0,name: "全部"})
        return point
      },
			// 页码变更
      handleCurrentChange(val) {
				this.formData.page = val
				this.get_list()
			},
      handleSizeChange(val){
        this.formData.page_size = val
        this.get_list()
      },
      openDetail(row){
        this.detailId = parseInt(row.id)
        this.showDetailPopup = true
      },
      get_list(){
        let self = this
        self.loading = true
        let params = JSON.parse(JSON.stringify(this.formData))
        if (params.pt_id == 0) {
          delete params.pt_id
        }
        self.$axios('get','/api/integral/work/list',params).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
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .box{
    min-height: calc(100vh - 184px);
    min-width: 800px;
    background-color: #fff;
    padding: 20px;
  }
   ::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>