gdy_pc_8/src/point/views/workbench/task/my_issue.vue

<template>
  <div>
    <el-alert class="diy-tip" title="管理者角色均可发布任务，系统有2种任务：" type="success" description show-icon>
      <p>指派任务：指派给某个人执行，完成后可审批打分，支持设置自动重复发布<br/>
      悬赏任务：公开悬赏任务到某个部门或全公司，员工抢当任务负责人，完成可审批打分，也支持设置自动重复发布<br/>
      重复任务：每天、周、月自动帮你发布任务，分配日常固定事务更加省心省力
      </p>
    </el-alert>
    <div class="box boxMinHeight">
      <el-tabs v-model="status">
        <el-tab-pane v-for="(item,index) in tabsOption" :key="index" :label="item.label" :name="item.name" :disabled="loading"></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 == 'repetitive'">
            <span class="blue cursor" style="font-size: 14px;" @click="$openUrl(19)" v-if="status=='repetitive'">什么是重复任务？</span>
        </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">
              <userImage class="fl" width="50px" height="50px" :id="scope.row.employee_id" :user_name="scope.row.employee_name"></userImage>
              <span style="line-height: 50px; padding-left: 10px;">{{scope.row.employee_name}}的{{scope.row.pt_name}}任务</span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name" >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <span>{{ scope.row.task_name }}</span>
                <div slot="reference" class="name-wrapper">
                  <span style="white-space: normal; overflow: hidden;">{{ scope.row.task_name }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="积分" prop="point_config.base_point" width="120px">
            <template slot-scope="scope">
              <span class="red" v-if="scope.row.point_config.base_point >= 0 && scope.row.status == 4">+ {{scope.row.point_config.base_point}} {{scope.row.pt_name}}</span>
              <span v-else>{{scope.row.point_config.base_point}} {{scope.row.pt_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time" width="200px"></el-table-column>
          <el-table-column label="状态" prop="owner_id" width="120px">
            <template slot-scope="scope">
              <span :class="scope.row.status == 1?'color_yelllo':scope.row.status == 2?'color_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='100px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <!-- <el-dropdown-item :disabled="false" v-if="scope.row.source_type==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" 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" width='250px'>
            <template slot-scope="scope">
              <userImage class="fl" width="50px" height="50px" :id="scope.row.owner_id" :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>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <span>{{ scope.row.task_name }}</span>
                <div slot="reference" class="name-wrapper">
                  <span style="white-space: normal; overflow: hidden;">{{ scope.row.task_name }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="积分" prop="base_point" width="120px">
            <template slot-scope="scope">
              <span class="red" v-if="scope.row.status == 3 && scope.row.base_point >= 0">+ {{scope.row.base_point}} {{scope.row.pt_name}}</span>
              <span v-else>{{scope.row.base_point}} {{scope.row.pt_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time" width="200px"></el-table-column>
          <el-table-column label="状态" prop="owner_id" width="120px">
            <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="color_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='100px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</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-class-name="scheduleClassName" @row-click="repetitiveTasksClick">
          <el-table-column label="执行人" prop="target_info" width='250px'>
            <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">
              {{scope.row.name || scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column label="任务积分" prop="point_config.base_point" width="120px">
            <template slot-scope="scope">
              <span class="red" v-if="scope.row.status == 3 && scope.row.base_point >= 0">+ {{scope.row.point_config.base_point}} {{ptID(scope.row.pt_code)}}</span>
              <span v-else>{{scope.row.point_config.base_point}} {{ptID(scope.row.pt_code)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="重复周期" prop="task_cycle" width="200px">
            <template slot-scope="scope">
              <span v-if="scope.row.task_cycle == '1'">每天0点自动发布，{{scope.row.task_cycle_value}}点截止</span>
							<span v-if="scope.row.task_cycle == '2'">
								<span>每周一自动发布，周{{ weekList[scope.row.task_cycle_value - 1] }}截止</span>
							</span>
              <span v-if="scope.row.task_cycle == '3'">每月1号自动发布，{{ scope.row.task_cycle_value }}号截止</span>
            </template>
          </el-table-column>
          <el-table-column prop="base_point" label="操作" align="center" width='100px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</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 temporaryTask from '@/point/views/common/temporaryTask'
  import temporaryTaskAmend from '@/point/views/common/temporaryTaskAmend'
  import rewardTask from '@/point/views/common/rewardTask'
  import rewardTaskAmend from '@/point/views/common/rewardTaskAmend'
  import taskDetailsPopup from '@/point/views/common/taskDetailsPopup'
  import repeatTaskDetailsPopup from '@/point/views/common/repeatTaskDetailsPopup'
  import rewardTaskDetailsPopup from '@/point/views/common/rewardTaskDetailsPopup'
  export default {
    name: 'my_issue',
    data() {
      return {
        weekList: ['一', '二', '三', '四', '五', '六', '日'],
        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: {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: {
      ptID(id){
        switch(id){
          case 'BF':
            return 'B分'
            break;
          case 'AF':
            return 'A分'
            break;
        }
      },
      //悬赏修改
      offerARewardAmend2(item){
        this.rewardTaskAmendShow = true
        this.$refs.rewardTasks.forTheTaskLoading = true
        let params = {
          task_id:item.id
        }
        // this.rewardTaskAmendData = item
        this.$axiosUser('get','/api/pro/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.$axiosUser(s==0?'DELETE':s==1?'DELETE':'DELETE',s==0?'/api/pro/integral/work':s==1?'/api/pro/integral/task':'/api/pro/integral/schedule',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) {
        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 = this.$getTyps();
        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.$axiosUser('get',self.status=='assign'?'/api/pro/integral/work/list/publisher':self.status=='reward'?'/api/pro/integral/task/publish/list':'/api/pro/integral/schedule/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)
            this.get_list()
          }
        }).finally((e)=>{
          self.loading = false
		})
      },
      scheduleClassName({row, rowIndex}){
        if (!row.schedule_expire_time) return "";
        let now = new Date();
        let expire_date = new Date(row.schedule_expire_time);
        return now >= expire_date ? "schedule-expire" : "";
      }
    }
  }
</script>

<style scoped lang="scss">
.diy-tip {
  margin-bottom: 10px;
  border: 1px solid #67c23a;
  padding: 20px 16px;
  p {
    color: #67c23a !important;
    font-size: 14px;
    margin: 0 !important;
    padding: 4px 0;
  }
}
  .box{
    padding: 20px;
    background-color: #fff;
    & .color_yelllo{
      color: #ffce2f;
    }
    & .color_green{
      color: #49d3a7;
    }
    & .color_3{
      color: #ff4753;
    }
    & .color_4{
      color: #49d3a7;
    }
    & .color_5{
      color: #f04b56;
    }
    & .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: #a6a8aa;
  }

 /deep/ .el-table tr:hover{
  cursor:pointer
}

/deep/ .el-table .schedule-expire{
   background: oldlace;
 }
</style>