gdy_pc_8/src/point/views/common/repeatTaskDetailsPopup.vue

<template>
  <div>
    <!-- 重复任务详情弹窗 -->
    <el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
      <div class="details_title">{{ title }}</div>
      <div class="details_content" v-if="workDetailData" v-loading="loading">
<!--        <ul>-->
<!--          <li class="flex-box">-->
<!--            <div class="label">任务内容</div>-->
<!--            <div class="content_text">{{ workDetailData.name }}</div>-->
<!--          </li>-->
<!--          <li class="flex-box">-->
<!--            <div class="label">任务备注</div>-->
<!--            <div class="content_text orange">{{ workDetailData.remark }}</div>-->
<!--          </li>-->
<!--          <li class="flex-box">-->
<!--            <div class="label">执行周期</div>-->
<!--            <div class="content_text orange">{{workDetailData.target_info.length>0? '临时任务-':'悬赏任务-'}}{{ workDetailData.task_cycle_mark }}</div>-->
<!--          </li>-->
<!--          <li class="flex-box" v-if="workDetailData.point_config">-->
<!--          	<div class="label">任务积分</div>-->
<!--          	<div class="content_text orange">-->
<!--          		{{ workDetailData.point_config.base_point }}-->
<!--          		<span>{{ workDetailData.pt_id == 2 ? 'A分' : workDetailData.pt_id == 3 ? 'B分' : '' }}</span>-->
<!--          	</div>-->
<!--          </li>-->
<!--          <li class="flex-box" v-if="workDetailData.file_list && workDetailData.file_list.length > 0">-->
<!--          	<div class="label">任务附件</div>-->
<!--          	<div class="content_text">-->
<!--          		<el-image-->
<!--          			v-for="(item, index) in workDetailData.file_list"-->
<!--          			:key="index"-->
<!--          			style="width: 100px; height: 100px;margin-right:8px"-->
<!--          			:src="item"-->
<!--          			:preview-src-list="workDetailData.file_list"-->
<!--          		></el-image>-->
<!--          	</div>-->
<!--          </li>-->
<!--          <li class="flex-box">-->
<!--          	<div class="label">发布人</div>-->
<!--          	<div class="content_text">{{ workDetailData.owner_name }}</div>-->
<!--          </li>-->
<!--          <li class="flex-box">-->
<!--          	<div class="label">截止时间</div>-->
<!--          	<div class="content_text">-->
<!--          		<span v-if="workDetailData.task_cycle == '1'">{{workDetailData.task_cycle_mark}}{{ dayTime(workDetailData.task_cycle_value) }}截止</span>-->
<!--          		<span v-if="workDetailData.task_cycle == '2'">-->
<!--          			<span>{{workDetailData.task_cycle_mark}}{{ weekList[workDetailData.task_cycle_value - 1] }}截止</span>-->
<!--          		</span>-->
<!--          		<span v-if="workDetailData.task_cycle == '3'">{{workDetailData.task_cycle_mark}}{{ workDetailData.task_cycle_value }}号截止</span>-->
<!--          	</div>-->
<!--          </li>-->
<!--          <li class="flex-box" v-if="workDetailData.schedule_expire_time">-->
<!--            <div class="label">有效日期</div>-->
<!--            <div class="content_text" >-->
<!--              <span v-if="!isExpire(workDetailData.schedule_expire_time)" >{{workDetailData.schedule_expire_time}}</span>-->
<!--              <el-alert v-else :title="workDetailData.schedule_expire_time" type="warning" :closable="false" ></el-alert>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li class="flex-box" v-if="workDetailData.department_info">-->
<!--          	<div class="label">可见范围</div>-->
<!--          	<div class="content_text" v-if="workDetailData.department_info.length>0">-->
<!--          	<span v-for="(item,index) in workDetailData.department_info" :key="index">-->
<!--          		{{item.name}}-->
<!--          		<span v-if="(workDetailData.department_info.length - 1) > index"> ,</span>-->
<!--          	</span>-->
<!--          	</div>-->
<!--          	<div class="content_text" v-else>全公司</div>-->
<!--          </li>-->
<!--					<li class="flex-box" v-if="workDetailData.point_config">-->
<!--						<div class="label">逾期扣分</div>-->
<!--						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }}/天</div>-->
<!--					</li>-->
<!--					<li class="flex-box" v-if="workDetailData.point_config">-->
<!--						<div class="label">提前奖分</div>-->
<!--						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }}/天</div>-->
<!--					</li>-->
<!--        </ul>-->
<!--        <el-row style=" margin-bottom: 20px;">-->
<!--          <el-col :span="24" style="line-height: 30px;">审批人</el-col>-->
<!--          <el-col :span="24">-->
<!--            <div>-->
<!--              <userImage class="fl" :id="workDetailData.reviewer_id" :user_name="workDetailData.reviewer_name" width="50px" height="50px" style=" margin-right: 15px;"></userImage>-->
<!--              <p style="margin: 0; line-height: 50px;">{{ workDetailData.reviewer_name }}</p>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row v-if="workDetailData.target_info.length>0">-->
<!--          <el-col :span="24" style="line-height: 30px;">执行人</el-col>-->
<!--          <el-col :span="24">-->
<!--            <div v-for="(item, index) in workDetailData.target_info" style="margin-bottom: 10px;">-->
<!--              <userImage class="fl" :id="item.id" :user_name="item.name" width="50px" height="50px" style=" margin-right: 15px;"></userImage>-->
<!--              <p style="margin: 0; line-height: 50px;">{{ item.name }}</p>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->

        <el-card shadow="always">
          <template slot="header">
            <div class="flex-box flex-v-ce">
              <userImage
                style="margin-right: 15px;"
                width="50px"
                height="50px"
                class="fl"
                :id="workDetailData.owner_id"
                :user_name="workDetailData.owner_name"
                :img_url="workDetailData.owner_img_url"
              />
              <div>
                {{workDetailData.owner_name}}
                {{ $getTypsName(workDetailData.pt_id) }}{{scheduleTypeMark}}&nbsp;
                <el-tag>{{ workDetailData.point_config.base_point }}分</el-tag>
              </div>
            </div>
          </template>
          <el-descriptions
            :title="scheduleTypeMark + '信息'"
            direction="vertical"
            :column="2"
            size="small"
            :label-style="{width:'80px',textAlign:'center'}"
            :content-style="{width:'80px',textAlign: 'center'}"
            border
          >
            <el-descriptions-item :label="scheduleTypeMark + '内容'">
              {{workDetailData.name}}
            </el-descriptions-item>
            <el-descriptions-item v-if="workDetailData.remark" :label="scheduleTypeMark + '备注'">
              {{workDetailData.remark}}
            </el-descriptions-item>
            <el-descriptions-item label="执行周期">
              {{workDetailData.target_info.length>0? '临时任务-':'悬赏任务-'}}{{ workDetailData.task_cycle_mark }}
            </el-descriptions-item>
            <el-descriptions-item
              v-if="workDetailData.point_config"
              :label="scheduleTypeMark + '积分'"
            >
              {{ workDetailData.point_config.base_point }}
              <span>{{ $getTypsName(workDetailData.pt_id) }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="workDetailData.file_list && workDetailData.file_list.length > 0"
              title="附件"
            >
              <el-image
                v-for="(item, index) in workDetailData.file_list"
                :key="index"
                style="width: 100px; height: 100px;margin-right:8px"
                :src="item"
                :preview-src-list="workDetailData.file_list"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item
              label="截止时间"
            >
              <span v-if="workDetailData.task_cycle == '1'">{{workDetailData.task_cycle_mark}}{{ dayTime(workDetailData.task_cycle_value) }}截止</span>
              <span v-if="workDetailData.task_cycle == '2'">
          			<span>{{workDetailData.task_cycle_mark}}{{ weekList[workDetailData.task_cycle_value - 1] }}截止</span>
          		</span>
              <span v-if="workDetailData.task_cycle == '3'">{{workDetailData.task_cycle_mark}}{{ workDetailData.task_cycle_value }}号截止</span>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="workDetailData.schedule_expire_time"
              label="有效日期"
            >
              <span v-if="!isExpire(workDetailData.schedule_expire_time)" >{{workDetailData.schedule_expire_time}}</span>
              <el-alert v-else :title="workDetailData.schedule_expire_time" type="warning" :closable="false" ></el-alert>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="workDetailData.department_info"
              label="可见范围"
            >
              <div v-if="workDetailData.department_info.length>0">
                <span v-for="(item,index) in workDetailData.department_info" :key="index">
          		{{item.name}}
          		<span v-if="(workDetailData.department_info.length - 1) > index"> ,</span>
          	</span>
              </div>
              <div v-else>
                全公司
              </div>
            </el-descriptions-item>
            <template v-if="workDetailData.point_config">
              <el-descriptions-item
                label="逾期扣分"
              >
                {{ workDetailData.point_config.timeout_deduction_point }}&nbsp;B/天
              </el-descriptions-item>
              <el-descriptions-item
                label="提前奖分"
              >
                {{ workDetailData.point_config.ahead_award_point }}&nbsp;B分/天
              </el-descriptions-item>
            </template>
            <el-descriptions-item label="审批人">
              <div style="width: fit-content;margin: 0 auto;">
                <userImage
                  width="50px"
                  height="50px"
                  class="fl"
                  :id="workDetailData.reviewer_id"
                  :user_name="workDetailData.reviewer_name"
                  :img_url="workDetailData.reviewer_img_url"
                />
                <div>{{ workDetailData.reviewer_name }}</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="workDetailData.target_info.length > 0"
              label="执行人"
            >
              <div style="width: fit-content;margin: 0 auto;">
                <div
                  v-for="(item, index) in workDetailData.target_info"
                  :key="index"
                  style="margin-bottom: 10px; display: inline-block;margin-right: 5px;"
                >
                  <userImage class="fl" :id="item.id" :user_name="item.name" width="50px" height="50px" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </el-descriptions-item>


          </el-descriptions>
        </el-card>


      </div>
    </el-drawer>
  </div>
</template>

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

export default {
  name: 'repeatTaskDetailsPopup',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      Delay_to_open: false, //打开抽屉

      loading: false,
      workDetailData: {
        target_info:[]
      },
      weekList: ['一', '二', '三', '四', '五', '六', '日']
    };
  },
  components: {Template},
  watch: {},
  computed:{
    scheduleTypeMark(){
      return !this.workDetailData ? '--' : (this.workDetailData.type === 2 ? '悬赏' : '任务')
    }
  },
  mounted() {
    this.getData();
    this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
  },
  methods: {
    dayTime(item) {
    	return item > 9 ? item + ': 00' : '0' + item + ': 00';
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('update:visible', false);
    },
    // 获取数据
    getData() {
      let self = this;
      self.loading = true;
      let data = { schedule_id: this.id };
      self
        .$axiosUser('get', '/api/pro/integral/schedule', data)
        .then(res => {
          if (res.data.code == 1) {
            self.workDetailData = res.data.data;
          }
          self.loading = false;
        })
        .catch(e => {
          self.$message.error(e.data.msg);
          self.loading = false;
        });
    },
    isExpire(expire_time){
      if (!expire_time) return false
      let now = new Date();
      let expire_date = new Date(expire_time);
      return now >= expire_date;
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.details_content {
  & .d_userMessage {
    margin-left: 10px;
  }
  & .d_userMessage div:nth-child(1) {
    font-size: 16px;
    margin-bottom: 8px;
  }
  & .d_userMessage div:nth-child(2) {
    font-size: 12px;
    color: #909399;
  }
  & .d_progress {
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
  }
  & ul {
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    & li {
      padding: 6px 0;
    }
    & .label {
      width: 80px;
      text-align: left;
      color: #909399;
    }
    & .content_text {
      flex: 1;
    }
  }
}
</style>