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

<template>
  <div>
    <div class="box boxMinHeight">
      <el-tabs v-model="active">
        <el-tab-pane label="待领取" name="unclaimed"></el-tab-pane>
        <el-tab-pane label="已领取" name="received"></el-tab-pane>
      </el-tabs>
      <div v-if="active === 'unclaimed'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
          <el-table-column label="发布者" prop="owner_name">
            <template slot-scope="scope">
              <userImage class="fl" :id="scope.row.owner_id" :user_name="scope.row.owner_name" :img_url="scope.row.owner_img_url" width="50px" height="50px"></userImage>
              <span style="line-height: 50px; padding-left: 10px;">{{ scope.row.owner_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name" show-overflow-tooltip></el-table-column>
          <el-table-column label="积分" prop="base_point" width="120">
            <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="green">{{scope.row.base_point}} {{scope.row.pt_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time" width="200"></el-table-column>
          <el-table-column label="操作" prop="owner_id" v-if="!$supremeAuthority('creator')" width="120">
            <template slot-scope="scope">
              <el-link v-if="scope.row.owner_id!=$userInfo().id && scope.row.reviewer_id != $userInfo().id" type="primary">领取任务</el-link>
            </template>
          </el-table-column>
          <template slot="empty">
            <NoData></NoData>
          </template>
        </el-table>
      </div>

      <div v-if="active === 'received'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
          <el-table-column label="执行人" prop="receiver_id" width="250">
            <template slot-scope="scope">
              <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>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name" show-overflow-tooltip></el-table-column>
          <el-table-column label="积分" prop="base_point" width="120">
            <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="green">{{scope.row.base_point}} {{scope.row.pt_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time" width="200"></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>

      <el-drawer :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">
<!--          <div style="border-bottom:1px #f8f8f8 solid;padding-bottom: 10px;margin-bottom: 10px;" class="flex-box-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="15"-->
<!--              ></userImage>-->
<!--              <div class="flex-1" style="padding-left: 10px;">-->
<!--                <div class="flex-box-ce" style="margin-bottom: 4px;">-->
<!--                  <div class="flex-1" style="font-size: 16px;font-weight: 700;">-->
<!--                    {{ active == 'unclaimed' ? detailInfo.owner_name : detailInfo.receiver_name }}{{active == 'unclaimed' ? `悬赏的${$getTypsName(detailInfo.pt_id)}任务`:`领取的${$getTypsName(detailInfo.pt_id)}任务`}}-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    <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>-->
<!--                </div>-->
<!--                <div class="orange">{{detailInfo.status_mark}}</div>-->
<!--              </div>-->
<!--          </div>-->

<!--          <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="$getTypsName(detailInfo.pt_id) !== ''">-->
<!--            <el-col :span="4">积分类型</el-col>-->
<!--            <el-col :span="20">{{ $getTypsName(detailInfo.pt_id) }}</el-col>-->
<!--          </el-row>-->
<!--          <el-row v-if="detailInfo.create_time !== ''">-->
<!--            <el-col :span="4">发布时间</el-col>-->
<!--            <el-col :span="20">{{ detailInfo.create_time }}</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="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-->
<!--              v-for="(item,index) in detailInfo.task_file_list"-->
<!--              :key="index"-->
<!--              style="width: 100px; height: 100px; margin-right:10px"-->
<!--              :src="item"-->
<!--              :preview-src-list="detailInfo.task_file_list"></el-image>-->
<!--              </el-col>-->
<!--          </el-row>-->

          <el-card shadow="always">
            <template slot="header">
              <div class="flex-box-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="15"
                />
                <div>
                  {{detailInfo.owner_name}}
                  {{ $getTypsName(detailInfo.pt_id) }}任务
                  <el-tag>{{ detailInfo.point_config.base_point }}分</el-tag>
                  <el-tag type="info">{{ detailInfo.receiver_name }}{{ detailInfo.status_mark }}</el-tag>
                </div>
              </div>
            </template>
            <el-descriptions
              title="任务信息"
              direction="vertical"
              :column="2"
              size="small"
              :label-style="{width:'80px',textAlign:'center'}"
              :content-style="{width:'80px',textAlign: 'center'}"
              border
            >
              <el-descriptions-item label="任务内容">{{detailInfo.task_name}}</el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.receiver_id !== 0"
                :label="detailInfo.status == 3 ? '完成人' : '领取人'"
              >{{detailInfo.receiver_name}}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.task_remark"
                label="任务备注"
              >{{detailInfo.task_remark}}
              </el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.point_config"
                label="任务积分"
              >
                {{ detailInfo.point_config.base_point }}{{ $getTypsName(detailInfo.pt_id) }}
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">{{detailInfo.create_time}}</el-descriptions-item>
              <el-descriptions-item label="截止时间">{{detailInfo.end_time}}</el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.point_config && detailInfo.point_config.timeout_deduction_point"
                label="逾期扣分"
              >
                {{ detailInfo.point_config.timeout_deduction_point }}/天
              </el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.point_config && detailInfo.point_config.ahead_award_point"
                label="提前奖分"
              >
                {{ detailInfo.point_config.ahead_award_point }}/天
              </el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.department_info"
                label="可见范围"
              >
                <div class="content_text" v-if="detailInfo.department_info.length > 0">
                <span
                  v-for="(item, index) in detailInfo.department_info"
                  :key="index"
                >
                  {{ item.name }}&nbsp;
                </span>
                </div>
                <div v-else >
                  <el-tag>全公司可见</el-tag>
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                v-if="detailInfo.reviewer_name"
                label="审批人"
              >
                {{detailInfo.reviewer_name}}
              </el-descriptions-item>
              <el-descriptions-item label="任务类型">{{ detailInfo.source_type_mark }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions
              v-if="detailInfo.item_info"
              style="margin-top: 20px"
              title="规则依据"
              direction="vertical"
              :column="2"
              size="small"
              :label-style="{width:'80px',textAlign:'center'}"
              :content-style="{width:'80px',textAlign: 'center'}"
              border
            >
              <el-descriptions-item label="规则">{{detailInfo.item_info.remark}}</el-descriptions-item>
              <el-descriptions-item label="积分">{{pointRemark}}</el-descriptions-item>
              <el-descriptions-item label="规则状态" v-if="detailInfo.item_info.has_delete">
                <el-tag type="warning">规则已删除</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="detailInfo.rule_info" label="分类">{{detailInfo.rule_info.name}}</el-descriptions-item>
              <el-descriptions-item v-if="detailInfo.rule_info && detailInfo.rule_info.has_delete" label="分类状态">
                <el-tag type="warning">分类已删除</el-tag>
              </el-descriptions-item>
            </el-descriptions>

            <el-descriptions
              v-else-if="detailInfo.rule_info"
              style="margin-top: 20px"
              title="规则分类"
              direction="vertical"
              :column="2"
              size="small"
              :label-style="{width:'80px',textAlign:'center'}"
              :content-style="{width:'80px',textAlign: 'center'}"
              border
            >
              <el-descriptions-item label="分类">{{detailInfo.rule_info.name}}</el-descriptions-item>
              <el-descriptions-item label="分类状态" v-if="detailInfo.rule_info.has_delete">
                <el-tag type="warning">分类已删除</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>

        <div class="drawer-footer flex-box-end flex-v-ce" v-if="detailInfo.status == '1' && user_id != detailInfo.owner_id && detailInfo.reviewer_id != user_id">
          <el-button plain @click="detailShow = false">取消</el-button>
          <el-button type="primary" @click="collectTask" :loading="receiveLoad">领取任务</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Template from "../../../../examine/components/Template.vue";

export default {
  name: 'get_task',
  components: {Template},
  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: []
      },
      user_id: this.$store.getters.user_info.id
    };
  },
  computed:{
    pointRemark(){
      if (!(this.detailInfo && this.detailInfo.item_info)) return ''
      return this.detailInfo.item_info.range_type === 1 ? `${this.detailInfo.item_info.min_point} ${this.$getTypsName(this.detailInfo.item_info.pt_id)}` : `${this.detailInfo.item_info.min_point} -- ${this.detailInfo.item_info.max_point} ${this.$getTypsName(this.detailInfo.item_info.pt_id)}`
    }
  },
  mounted() {
    this.get_list();
  },
  watch: {
    active(val) {
      this.list = [];
      this.get_list();
    }
  },
  methods: {
    // 领取任务
    collectTask() {
      let self = this;
      self.receiveLoad = true;
      self
        .$axiosUser('POST', '/api/pro/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
        .$axiosUser('get', '/api/pro/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
        .$axiosUser('get', '/api/pro/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;
        });
    },
  }
};
</script>

<style scoped lang="scss">
  .drawer-footer {
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    padding: 10px 20px;
    font-size: 14px;
  }
  .details_content {
      height: calc(100vh - 120px) !important;
      padding: 20px;
      overflow: auto;
  }
.box {
  padding: 20px;
  background-color: #fff;
}
.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;
    }
  }
}
/deep/ .el-table tr:hover {
  cursor: pointer;
}
</style>