dd_pc/src/views/task/my_issue.vue

<template>
  <div>
    <div class="box">
      <el-tabs v-model="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="70px">
        <el-form-item>
          <el-dropdown @command="downClick">
            <el-button type="primary">
              发布任务<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">+ 临时任务</el-dropdown-item>
              <el-dropdown-item command="2">+ 悬赏任务</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>          
        </el-form-item>
        <el-form-item v-if="status == 'assign' || status == 'reward'" label="积分类型">
          <el-select v-model="formData.pt_id" placeholder="请选择排序">
            <el-option v-for="item in point_types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'assign'" label="任务状态">
          <el-select v-model="formData.status" placeholder="请选择排序">
            <el-option v-for="item in task_status" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'reward'" label="排序">
          <el-select v-model="formData.order_by" placeholder="请选择排序">
            <el-option v-for="item in order_by" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'assign'" label="排序" label-width="45px">
          <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="status == 'assign'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rowClick">
          <el-table-column label="执行人" prop="task_name" width='250px'>
            <template slot-scope="scope">
              <div style="display:flex">
                <userImage  width="50px" height="50px" :user_name="scope.row.employee_name"></userImage>
                <span style="line-height: 50px; padding-left: 10px;">{{scope.row.employee_name}}的{{scope.row.pt_name}}任务</span>
              </div>
            </template>
          </el-table-column>
          <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="积分" prop="point_config.base_point" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.point_config?scope.row.point_config.base_point >= 0 && scope.row.status == 2 :false">+ {{scope.row.point_config.base_point}}</span>
              <span v-else>{{scope.row.point_config?scope.row.point_config.base_point:''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time">
            <template slot-scope="scope">
              <span>{{scope.row.expire_time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
              <span :class="scope.row.status == 1?'yellow':scope.row.status == 2?'green':scope.row.status == 3?'color_3':scope.row.status == 4?'color_4':scope.row.status == 5?'color_5':''">{{scope.row.status == 1?'进行中':scope.row.status == 2?'已完成':scope.row.status == 3?'已退回':scope.row.status == 4?'已审批':scope.row.status == 5?'已撤销':''}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <el-dropdown-item :disabled="false" v-if="scope.row.status==1"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="issueAmend1(scope.row)">修改</el-button></el-dropdown-item>
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,0)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </el-table-column>

          <template slot="empty">
						<noData></noData>
          </template>
        </el-table>
      </div>

      <div v-if="status == 'reward'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rewardTasksClick">
          <el-table-column label="发布人" prop="employee_id">
            <template slot-scope="scope">
              <div style="display:flex">
                <userImage  width="50px" height="50px" :img_url="scope.row.owner_img_url" :user_name="scope.row.owner_name" ></userImage>
                <span style="line-height: 50px; padding-left: 10px;">我发布的{{scope.row.pt_name}}任务</span>
              </div>
            </template>
          </el-table-column>
          <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="积分" prop="base_point" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 3 && scope.row.base_point >= 0">+ {{scope.row.base_point}}</span>
              <span v-else>{{scope.row.base_point}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time">
            <template slot-scope="scope">
              <span>{{scope.row.expire_time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
              <span class="color_3" v-show="scope.row.status == -1">已过期</span>
              <span class="color_yelllo" v-show="scope.row.status == 1">待领取</span>
              <span class="color_yelllo2"  v-show="scope.row.status == 2">待处理</span>
              <span class="green" v-show="scope.row.status == 3">已完成</span>
              <span class="color_5" v-show="scope.row.status == 4">已撤回</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <el-dropdown-item :disabled="false" v-if="scope.row.status==1"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="offerARewardAmend2(scope.row)">修改</el-button></el-dropdown-item>
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,1)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </el-table-column>

          <template slot="empty">
				<noData></noData>
          </template>
        </el-table>
      </div>

      <div v-if="status == 'repetitive'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="repetitiveTasksClick">
          <el-table-column label="执行人" prop="target_info">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.target_info" :key="index">
                <span v-if="scope.row.target_info.length == 1 && index == 0">{{item.name}}</span>
                <span v-if="scope.row.target_info.length > 1 && index == 0">{{item.name}}等{{scope.row.target_info.length}}人</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="remark">
            <template slot-scope="scope">
				<span class="font-flex-word" style="max-width: 200px;">{{scope.row.name || scope.row.remark}}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务积分" prop="point_config.base_point">
            <template slot-scope="scope">
              <span>{{scope.row.point_config.base_point}}</span>
            </template>
          </el-table-column>
          <el-table-column label="重复周期" prop="task_cycle">
            <template slot-scope="scope">
              <span v-if="scope.row.task_cycle == '1'">每天自动发布 完成截止为{{scope.row.task_cycle_value}}点</span>
              <span v-if="scope.row.task_cycle == '2'">
                <span v-if="scope.row.task_cycle_value == 1">每周一自动发布</span>
                <span v-if="scope.row.task_cycle_value == 2">每周二自动发布</span>
                <span v-if="scope.row.task_cycle_value == 3">每周三自动发布</span>
                <span v-if="scope.row.task_cycle_value == 4">每周四自动发布</span>
                <span v-if="scope.row.task_cycle_value == 5">每周五自动发布</span>
                <span v-if="scope.row.task_cycle_value == 6">每周六自动发布</span>
                <span v-if="scope.row.task_cycle_value == 7">每周日自动发布</span>
              </span>
              <span v-if="scope.row.task_cycle == '3'">每月自动发布 完成截止为次月{{scope.row.task_cycle_value}}号</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,2)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </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"
          :page-size="formData.page_size"
          :current-page="formData.page"
          :total="total">
        </el-pagination>
      </center>

    </div>
    <!-- 临时任务 -->
    <temporaryTask :dialogVisible.sync="dialogVisible" :showTitle="'临时任务'"></temporaryTask>
    <!-- 临时任务-修改 -->
    <temporaryTaskAmend :dialogVisible.sync="dialogVisibleAmend" :showTitle="'任务编辑'" :modifyData="modifyData"></temporaryTaskAmend>
    <!-- 悬赏任务 -->
    <rewardTask :dialogVisible.sync="rewardTaskShow" :showTitle="'悬赏任务'"></rewardTask>
    <!-- 悬赏任务-修改 -->
    <rewardTaskAmend :dialogVisible.sync="rewardTaskAmendShow" ref="rewardTasks" :showTitle="'任务编辑'" :rewardTaskAmendData="rewardTaskAmendData"></rewardTaskAmend>

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

    <!-- 重复任务详情弹窗 -->
    <repeatTaskDetailsPopup :visible.sync="showRepetitiveTasksPopup" v-if="showRepetitiveTasksPopup" :id="detailId" :title="'重复任务详情'"></repeatTaskDetailsPopup>
    
    <!-- 悬赏任务详情弹窗 -->
    <rewardTaskDetailsPopup :visible.sync="showRewardTaskDetailsPopup" v-if="showRewardTaskDetailsPopup" :id="detailId" :title="'工作详情'"></rewardTaskDetailsPopup>
  </div>
</template>

<script>
  import noData from '@/components/noData';
  import temporaryTask from '@/views/common/below/temporaryTask'
  import temporaryTaskAmend from '@/views/common/below/temporaryTaskAmend'
  import rewardTask from '@/views/common/below/rewardTask'
  import rewardTaskAmend from '@/views/common/below/rewardTaskAmend'
  import taskDetailsPopup from '@/views/common/below/taskDetailsPopup'
  import repeatTaskDetailsPopup from '@/views/common/below/repeatTaskDetailsPopup'
  import rewardTaskDetailsPopup from '@/views/common/below/rewardTaskDetailsPopup'
  
  export default {
    name: 'my_issue',
    data() {
      return {
        rewardTaskAmendData:{},//悬赏修改
        modifyData:{},//任务修改

        operation_if:false,//操作列显示隐藏
        bodyLoad: false,

        status:'assign',
        formData:{
          status: "all",
          sort: "publish",
          order_by: "create_time",
          pt_id: 0,
          page_size: 10,
          page: 1,
          source_type: '1'
        },
        total: null,
        list: [],
        loading: false,
        point_types: null,
        task_status: [
          {id: 1, name: '全部', code: 'all'},
          {id: 2, name: '进行中', code: 'running'},
          {id: 3, name: '已完成', code: 'complete'},
          {id: 4, name: '已审批', code: 'reviewed'},
          {id: 5, name: '已撤销', code: 'revocation'},
          {id: 6, name: '已退回', code: 'refuse'},
        ],
        sort: [{id:1,name:'按截止时间',code:'expire'},{id:2,name:'按发布时间',code:'publish'}],
        order_by: [{id:1,name:'按截止时间',code:'expire_time'},{id:2,name:'按发布时间',code:'create_time'}],
        tabsOption: [
          { label: '我指派的', name: 'assign' },
          { label: '我悬赏的', name: 'reward' },
          { label: '重复任务', name: 'repetitive' },
        ],
        dialogVisible: false,
        dialogVisibleAmend: false,
        rewardTaskShow: false,
        rewardTaskAmendShow: false,
        showDetailPopup: false,
        showRepetitiveTasksPopup: false,
        showRewardTaskDetailsPopup: false,
        detailId: 0
      }
    },
    components: {noData,temporaryTask,rewardTask,rewardTaskAmend ,temporaryTaskAmend,taskDetailsPopup,repeatTaskDetailsPopup, rewardTaskDetailsPopup},
    watch:{
      status(val){
        this.formData.page = 1
        this.formData.status = "all"
        this.formData.sort = "publish"
        this.formData.order_by = "create_time"
        this.formData.pt_id = 0
        this.list = []
        this.get_list()
      },
      'formData.status'(){
        // debugger
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.sort'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.order_by'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.pt_id'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
    },
    mounted() {
      if(this.$route.query.type == 1){
        this.dialogVisible = true
      }else if(this.$route.query.type == 2){
        this.rewardTaskShow = true
      }
      this.get_list()
      this.point_types = this.getPointTypes()
    },
    methods: {
      //悬赏修改
      offerARewardAmend2(item){
        this.rewardTaskAmendShow = true
        this.$refs.rewardTasks.forTheTaskLoading = true
        let params = {
          task_id:item.id
        }
        this.$axios('get','/api/integral/task',params).then(res => {
            if (res.data.code == 1) {
              this.rewardTaskAmendData = res.data.data
            } else {
              self.$message.error(res.data.msg);
            }
          }).finally(() => {
            this.$refs.rewardTasks.forTheTaskLoading = false
          })
      },
      //任务修改
      issueAmend1(item){
        this.modifyData = item
        this.dialogVisibleAmend = true
      },
       //删除---我指派的、我悬赏的、重复任务    （重复任务需等后端接口）
      deletes(item,s){
        let self = this
        this.$message.closeAll()
        self.$confirm('删除此任务将会删除其相关记录和积分数据，确认删除吗？', '删除任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axios(s==0?'get':s==1?'get':'get',s==0?'/api/integral/work/delete':s==1?'/api/integral/task/delete':'/api/integral/schedule/delete',s==0?{work_id: item.id}:s==1?{task_id: item.id}:{schedule_id: item.id}
            ).then(res => {
            if (res.data.code == 1) {
              if(this.formData.page>1){
                if(self.list.length == 1){
                  this.formData.page = this.formData.page -1
                }
              }
              this.get_list()
              self.$message.success(res.data.msg);
            } else {
              self.$message.error(res.data.msg);
            }
          })
        })
      },

      // 点击详情
      rowClick(row) {
		console.log(row);
        this.showDetailPopup = true
        this.detailId = parseInt(row.id)
      },
      // 重复任务详情
      repetitiveTasksClick(row) {
        this.showRepetitiveTasksPopup = true
        this.detailId = parseInt(row.id)
      },
      // 悬赏任务详情
      rewardTasksClick(row){
        this.showRewardTaskDetailsPopup = true
        this.detailId = parseInt(row.id)
      },
      // 发布临时任务 和 悬赏任务
      downClick(val){
        if(val == 1){
          this.dialogVisible = true
        }else{
          this.rewardTaskShow = true
        }
      },
      // 获取积分类型
      getPointTypes(){
        let point = window.plus?JSON.parse(plus.storage('types')):JSON.parse(localStorage.getItem('types'))
        point.unshift({code: "all",id: 0,name: "全部"})
        return point
      },
	 // 页码变更
      handleCurrentChange(val) {
		this.formData.page = val
		this.get_list()
	  },
      handleSizeChange(val){
        this.formData.page_size = val
        this.get_list()
      },
      get_list(){
        let self = this
        self.loading = true
        let params = JSON.parse(JSON.stringify(this.formData))
        params.pt_id == 0?delete params.pt_id:'';
        if(self.status == 'assign'){
          delete params.order_by
        }else if(self.status == 'reward'){
          delete params.status
          delete params.sort
        }else{
          delete params.status
          delete params.sort
          delete params.order_by
          delete params.pt_id
        }
        self.$axios('get',self.status=='assign'?'/api/integral/work/list/publisher':self.status=='reward'?'/api/integral/task/publish/list':'/api/integral/schedule/list',params).then((res) => {
           //数据过多的情况延迟较大
          if (res.data.code == 1) {
            //传入发布者ID进行判断
			self.list = res.data.data.list
            self.total = res.data.data.total
          }else{
            self.$message.error(res.data.data.msg)
            this.get_list()
          }
        }).finally(()=>{
          self.loading = false
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .box{
    min-height: calc(100vh - 184px);
    min-width: 800px;
    background-color: #fff;
    padding: 20px;
    & .color_yelllo{
      color: #E6A23C;
    }
    & .color_green{
      color: #67C23A;
    }
    & .color_3{
      color: #F56C6C;
    }
    & .color_4{
      color: #67C23A;
    }
    & .color_5{
      color: #F56C6C;
    }
    & .color_yelllo2{
      color: #ffa939;
    }
  }


$red: #F56C6C;
.color-red{
  color: $red;
  &:hover{
    color: #f14141;
  }
}
  .delicon{
  font-size: 20px;
  float: right;
}

.el-dropdown-links {
    font-size: 20px;
    cursor: pointer;
    color: #606266;
  }

 ::v-deep .el-table tr:hover{
  cursor:pointer
}
</style>