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 == 'assign'" label="排序" label-width="50px">
          <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-item v-if="status == 'reward'" label="排序" label-width="50px">
          <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 label-width="60px">
						<el-input v-model="formData.content" placeholder="请输入任务内容" max="200" @keyup.enter.native="getContent()" class="persons_name">
							<el-button slot="append" icon="el-icon-search" @click="getContent()"></el-button>
						</el-input>
        </el-form-item>

        <el-form-item v-if="status == 'assign' || status == 'repetitive'" label="执行人" label-width="60px">
					<el-select v-model="formData.executor_id" clearable filterable placeholder="请输入或选择执行人">
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
        </el-form-item>

        <el-form-item label="审批人" label-width="60px">
					<el-select v-model="formData.reviewer_id" clearable filterable placeholder="请输入或选择审批人">
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
        </el-form-item>

      </el-form>

      <div v-show="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 :img_url="scope.row.employee_img_url" :id="scope.row.employee_id" :user_name="scope.row.employee_name" width="50px" height="50px"></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="base_point" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.point_config && scope.row.point_config.review_point>0" class="red">+{{scope.row.point_config.review_point}} {{scope.row.pt_name}}</span>
              <span v-else>
                <span v-if="scope.row.point_config && scope.row.point_config.base_point">
                  <span class="red" v-if="scope.row.point_config.base_point > 0"> +{{scope.row.point_config.base_point}} {{scope.row.pt_name}}</span>
                  <span class="color_green" v-else>{{scope.row.point_config.base_point}} {{scope.row.pt_name}}</span>
                </span>
              </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="审批人" width="100px" prop="reviewer_name"></el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
              <span class="yellow" v-if="scope.row.status==1">进行中</span>
              <span class="green" v-else-if="scope.row.status==2">已完成</span>
              <span class="red" v-else-if="scope.row.status==3">退回</span>
              <span class="green" v-else-if="scope.row.status==4">已审批</span>
              <span class="textBox" v-else>已撤回</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-show="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.base_point>0" class="red">+{{scope.row.base_point}} {{scope.row.pt_name}}</span>
		          <span v-else class="color_green">{{scope.row.base_point}} {{scope.row.pt_name}}</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="审批人" width="100px" prop="reviewer_name">
            <template slot-scope="scope">
              <span v-if="scope.row.reviewer_id" >{{list_approver(scope.row.reviewer_id)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
				<span class="yellow" v-if="scope.row.status==1">待领取</span>
				<span class="yellow" v-else-if="scope.row.status==2">进行中</span>
				<span class="green" v-else-if="scope.row.status==3">已完成</span>
				<span class="fontColorZ" v-else-if="scope.row.status==4">已撤回</span>
				<span class="red" v-else>已过期</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" width="120px">
            <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" width="130px">
            <template slot-scope="scope">
				      <span v-if="scope.row.point_config.base_point > 0" class="red">+{{scope.row.point_config.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
				      <span v-else class="color_green">{{scope.row.point_config.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="重复周期" prop="task_cycle" width="220px">
            <template slot-scope="scope">
              <span v-if="scope.row.task_cycle == '1'">每天0点自动发布，{{dayTime(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 label="可见范围" prop="department_info">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.department_info" :key="index">{{item.name}}<span v-if="(scope.row.department_info.length - 1) > index">，</span></span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="create_time" width="140px"></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" :trees_ab="trees_v2_ab_module" :showTitle="'临时任务'"></temporaryTask>
    <!-- 临时任务-修改 -->
    <temporaryTaskAmend :dialogVisible.sync="dialogVisibleAmend" :trees_ab="trees_v2_ab_module" :showTitle="'任务编辑'" :modifyData="modifyData"></temporaryTaskAmend>
    <!-- 悬赏任务 -->
    <rewardTask :dialogVisible.sync="rewardTaskShow" :trees_ab="trees_v2_ab_module" :showTitle="'悬赏任务'"></rewardTask>
    <!-- 悬赏任务-修改 -->
    <rewardTaskAmend :dialogVisible.sync="rewardTaskAmendShow" :trees_ab="trees_v2_ab_module" 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/temporaryTask'
  import temporaryTaskAmend from '@/views/common/temporaryTaskAmend'
  import rewardTask from '@/views/common/rewardTask'
  import rewardTaskAmend from '@/views/common/rewardTaskAmend'
  import taskDetailsPopup from '@/views/common/taskDetailsPopup'
  import repeatTaskDetailsPopup from '@/views/common/repeatTaskDetailsPopup'
  import rewardTaskDetailsPopup from '@/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',

          executor_id: '',//执行人
          reviewer_id: '',//审批人
          content: '',//内容
        },
        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:2,name:'按发布时间',code:'publish'},{id:1,name:'按截止时间',code:'expire'}],
        order_by: [{id:2,name:'按发布时间',code:'create_time'},{id:1,name:'按截止时间',code:'expire_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,
        trees_v2_ab_module: {
          A: [],
          B: [],
          rule_tree: [],
        },
        employee_map: [],//人员列表
      }
    },
    components: {noData,temporaryTask,rewardTask,rewardTaskAmend ,temporaryTaskAmend,taskDetailsPopup,repeatTaskDetailsPopup, rewardTaskDetailsPopup},
    watch:{
      status(val){
        this.formData.executor_id = ''
        this.formData.reviewer_id = ''
        this.formData.content = ''
        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()
      },
      'formData.executor_id' (){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.reviewer_id' (){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
    },
    created() {
      this.getRuleItemData()//获取AB分细则
    },
    mounted() {
      this.getUserDetail()
      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()
		  this.getEmployee();//员工列表
    },
    methods: {
      list_approver(id){
        let arr = this.employee_map.filter(x => x.id == id)
        return arr[0] ? arr[0].name : ''
      },
      dayTime(item){
        return item > 9 ? item + ': 00' : '0' + item + ': 00'
      },
      getContent(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },

      //获取员工列表
      getEmployee() {
        this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 3000,is_official:1 })
          .then(res => {
            let list = res.data.data.list;
            this.employee_map = list;
          })
      },

      getUserDetail(){
        this.$axios('get', '/api/employee/detail').then(res => {
          this.$setUserData(res.data.data.user);
        });
      },
      //悬赏修改
      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) {
        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:'';
        params.executor_id == ''?delete params.executor_id:'';
        params.reviewer_id == ''?delete params.reviewer_id:'';
        if(self.status == 'assign'){
          delete params.order_by
        }else if(self.status == 'reward'){
          delete params.executor_id
          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
        })
      },
      
      // 获取ab规则细则
      getRuleItemData() {
        let a = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1', pt_id: '2'}, 'v2');
        let b = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1', pt_id: '3'}, 'v2');
        let c = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1'});
        Promise.all([a, b, c]).then(res =>{
          this.trees_v2_ab_module.A = res[0].data.data.tree
          this.trees_v2_ab_module.B = res[1].data.data.tree
          this.trees_v2_ab_module.rule_tree = this.flatten(res[2].data.data.rule_tree)
        })
      },
      flatten (arr){
        return arr.reduce((result, item)=> {
            return result.concat(item,(Array.isArray(item.child) ? this.flatten(item.child) : []));
        }, []);
      },
    }
  }
</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>