gdy_pc_8/src/point/views/common/taskDetailsPopup.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-loading="loading">
        <div class="flex-box flex-v-ce">
          <userImage class="user_img person_imghead" width="46px" height="46px" :user_name="workDetailData.employee_name" :img_url="workDetailData.img_url"></userImage>
          <div class="d_userMessage">
            <div>{{ workDetailData.employee_name }}</div>
            <div v-if="detailType != 2 && workDetailData.dept_list[0]">{{ workDetailData.dept_list[0].dept_name }}</div>
          </div>
          <div style="margin-left: 5px;" class="flex-box flex-v-ce">
            <div v-if="workDetailData.point_config.review_point > 0" class="red">+{{ workDetailData.point_config.review_point }}</div>
            <div v-else class="green">{{ workDetailData.point_config.review_point }}</div>
            <div style="margin-left: 5px;">{{ $getTypsName(workDetailData.pt_id) }}</div>
          </div>
        </div>
        <ul>
          <li class="flex-box">
            <div class="label">任务内容</div>
            <div class="content_text">{{ workDetailData.task_name }}</div>
          </li>
          <li class="flex-box">
            <div class="label">发布时间</div>
            <div class="content_text">{{ workDetailData.create_time }}</div>
          </li>
          <li class="flex-box">
            <div class="label">任务备注</div>
            <textarea class="flex-1" disabled="disabled" v-model="workDetailData.task_remark" style="border: none;height:100px"></textarea>
          </li>
          <li class="flex-box">
            <div class="label">任务积分</div>
            <div class="content_text">{{ workDetailData.point_config.base_point }}{{ workDetailData.pt_name }}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config.review_point">
            <div class="label">最终分</div>
            <div class="content_text">{{ workDetailData.point_config.review_point }}</div>
          </li>
          <li class="flex-box">
            <div class="label">截止时间</div>
            <div class="content_text">{{ workDetailData.expire_time }} <span style="padding-left: 10px;" class="red" v-show="workDetailData.expire_day > 0">逾期{{ workDetailData.expire_day }}天</span></div>
          </li>
					<li class="flex-box" v-if="workDetailData.point_config.timeout_deduction_point > 0">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }} B分/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.ahead_award_point > 0">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }} B分/天</div>
					</li>
          <li class="flex-box">
            <div class="label">审批人</div>
            <div class="content_text">{{ workDetailData.reviewer_name }}</div>
          </li>
          <li class="flex-box">
            <div class="label">发布人</div>
            <div class="content_text">{{ workDetailData.publisher_name }}</div>
          </li>
          <li class="flex-box">
            <div class="label">积分种类</div>
            <div class="content_text">{{ workDetailData.pt_name }}</div>
          </li>
        </ul>
        <div v-show="showWork">
          <div class="d_progress">
            <div class="flex-box">
              <div class="flex-1">工作进度（{{ workDetailData.progress }}%）</div>
              <div class="fontColorC addJf" @click="isSlider = true" v-if="workDetailData.employee_id == userId && workDetailData.status == 1">+更新进度</div>
            </div>
            <el-progress :percentage="workDetailData.progress"></el-progress>
          </div>
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="工作记录" name="work">
                <div class="flex-box">
                  <div class="flex-1"></div>
                  <div
                    class="fontColorC addJf"
                    @click="isOne = true"
                    v-if="workDetailData.employee_id == userId && (workDetailData.status == 1||workDetailData.status == 2)"
                  >
                    +记一条工作记录
                  </div>
                </div>
                <div class="work_box">
                  <div class="work_item" v-for="(item, index) in text_list" :key="index">
                    <div class="flex-box-ce">
                      <userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
                      <div class="d_name flex-1">
                        {{ item.recorder }}
                        <span v-if="item.point * 1 > 0">+{{ item.point }}</span>
                        <span v-if="item.point * 1 < 0">{{ item.point }}</span>
                      </div>
                      <div class="d_date fontColorC">{{ item.time }}</div>
                    </div>
                    <div class="d_content fontColorB flex-box">
                        <div class="flex-1">{{ item.remark }}</div>
                        <i class="el-icon-delete"  v-if="item.recorder_id == userId" @click="deleteItem(item,index)"></i>
                    </div>
                  </div>
                  <div v-if="text_list.length == 0" class="fontColorC" style="text-align: center;">暂无工作记录</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="记分记录" name="participation">
                <div class="flex-box" style="padding-bottom: 10px;border-bottom: 1px solid #f1f1f1;">
                  <div class="flex-1 blue">
                    <span v-if="point_total > 0">合计：+{{ point_total }}</span>
                    <span v-else>合计：{{ point_total }}</span>
                  </div>
                  <div class="fontColorC addJf" @click="isIntegral = true" v-if="isShowJf">+记分</div>
                </div>
                <div class="work_box" style="padding-top:10px">
                  <div class="work_item" v-for="(item, index) in point_list" :key="index">
                    <div class="flex-box-ce">
                      <userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
                      <div class="d_name flex-1">
                        {{ item.recorder }}
                        <span class="red" v-if="item.point * 1 > 0">+{{ item.point }}</span>
                        <span class="green" v-if="item.point * 1 < 0">{{ item.point }}</span>
                      </div>
                      <div class="d_date fontColorC">{{ item.time }}</div>
                    </div>
                    <div class="d_content fontColorB flex-box">
                        <div class="flex-1">{{ item.remark }}</div>
                        <i class="el-icon-delete"  v-if="item.recorder_id == userId" @click="deleteItem(item,index)"></i>
                    </div>
                  </div>
                  <div v-if="point_list.length == 0" class="fontColorC" style="text-align: center;">暂无积分记录</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 更新进度 -->
    <el-dialog :close-on-click-modal="false" title="更新进度" :visible.sync="isSlider" :before-close="publicClose" width="40%">
      <div class="slider">
        <div class="fontColorC">拖动滑杆更新进度</div>
        <div class="flex-box-ce">
          <el-slider class="flex-1" v-model="progress"></el-slider>
          <div class="fontColorC" style="padding-left: 10px;">{{progress}}%</div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="publicClose()">取消</el-button>
        <el-button type="primary" @click="sliderSend">完成</el-button>
      </span>
    </el-dialog>
    <!-- 记一条 -->
    <el-dialog :close-on-click-modal="false" title="记一条" :visible.sync="isOne" :before-close="publicClose" width="40%">
      <div class="flex-box">
        <div style="width: 80px;">工作记录</div>
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
      </div>
      <span slot="footer">
        <el-button @click="publicClose()">取消</el-button>
        <el-button type="primary" @click="one">完成</el-button>
      </span>
    </el-dialog>
    <!-- 记分记录 -->
    <el-dialog :close-on-click-modal="false" title="记分" :visible.sync="isIntegral" :before-close="publicClose" width="40%">
      <el-form :model="integral" ref="integral" label-width="80px">
        <el-form-item label="记录" prop="text" :rules="[{ required: true, message: '记录不能为空' }]">
          <el-input type="textarea" :rows="3" v-model="integral.text"></el-input>
        </el-form-item>
        <el-form-item label="记分" prop="num" :rules="[{ required: true, message: '记分不能为空' }, { type: 'number', message: '积分必须为数字值' }]">
          <div class="num" :class="[integral.type == '1' ? 'add' : 'jian']"></div>
          <el-input placeholder="请输入分值" v-model.number="integral.num">
            <el-select v-model="integral.type" slot="prepend" placeholder="请选择" style="width: 80px;">
              <el-option label="奖分" value="1"></el-option>
              <el-option label="扣分" value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="publicClose()">取消</el-button>
        <el-button type="primary" @click="integralSend('integral')">完成</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'taskDetailsPopup',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    showWork: {
      type: Boolean,
      default: true
    },
    detailType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      Delay_to_open: false, //打开抽屉

      loading: false,
      workDetailData: {
        process: [],
        dept_list: [],
        point_config: {
          base_point: '0'
        }
      },
      text_list: [],
      isIntegral: false,

      point_total: 0,
      point_list: [],
      activeName: 'work',
      getDataUrl: '/api/pro/integral/work',
      params: {},

      //工作详情相关
      workDetail: '',
      drawer3: false,
      isSlider: false,
      isOne: false,
      textarea: '', //记录一条内容
      integral: {
        text: '',
        num: '',
        type: '1'
      },
      progress: 0,
      userId: this.$store.getters.user_info.id,

      parameter: {} ,//参数
      isShowJf:false
    };
  },
  watch: {
    isSlider(val) {
      if (val) {
          this.progress=this.workDetailData.progress
      }
    }
  },
  mounted() {
    this.detailType == 2 ? (this.getDataUrl = '/api/pro/integral/schedule') : (this.getDataUrl = '/api/pro/integral/work');
    this.$nextTick(() => {
      this.getData();
      this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
    });
  },
  methods: {
    deleteItem(obj,index){
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let list=JSON.parse(JSON.stringify(this.workDetailData.process.list));
        list.some((item,index)=>{
          if(item.time===obj.time&&item.remark===obj.remark){
            list.splice(index, 1)
            return true
          }
        })
        let data = {
          work_id: this.workDetailData.id,
          process:list.length==0? '[]':list
        }
        this.$axiosUser('post', '/api/pro/integral/work', data).then(res => {
            this.$message.success('已删除');
            this.getData()
        });
      }).catch();
    },
    one() {
      if (!this.textarea) {
        this.$message.error('请输入工作记录');
        return;
      }
      var self = this;
      var items;
      if (this.workDetailData.process.list && this.workDetailData.process.list.length > 0) {
         items = this.workDetailData.process.list;
       }else{
         items=[];
      }
      var process = {
        img_url: this.$store.getters.user_info.img_url,
        point: 0,
        recorder_id: this.$store.getters.user_info.id,
        recorder: this.$store.getters.user_info.name,
        remark: this.textarea,
        time: this.$moment().format('YYYY-MM-DD HH:mm')
      };
      var data = {
        work_id:this.workDetailData.id,
        process: []
      };
      items.unshift(process);
      data.process = items;
      self.$axiosUser('post', '/api/pro/integral/work', data).then(res => {
        if (res.data.code == 1) {
          self.publicClose();
          self.getData();
        } else {
          self.$message.error(res.data.msg);
        }
      });
    },
    integralSend(formName) {
      var self = this;
      var items;
      if (this.workDetailData.process.list && this.workDetailData.process.list.length > 0) {
         items =JSON.parse(JSON.stringify(this.workDetailData.process.list));
       }else{
         items=[];
      }
      var process = {
        img_url: this.$store.getters.user_info.img_url,
        point: this.integral.type == '1' ? this.integral.num : '-' + this.integral.num,
        recorder_id: this.$store.getters.user_info.id,
        recorder: this.$store.getters.user_info.name,
        remark: this.integral.text,
        time: this.$moment().format('YYYY-MM-DD HH:mm')
      };
      var data = {
        work_id: this.workDetailData.id,
        process: []
      };
      // console.log(items)
      items.unshift(process);
      data.process = items;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.integral.num) {
            this.$message.error('分值不能为0');
            return;
          }
          self.$axiosUser('post', '/api/pro/integral/work', data)
            .then(res => {
              if (res.data.code == 1) {
                self.getData();
                self.publicClose();
              } else {
                self.$message.error(res.data.msg);
              }
            })
            .finally(() => {});
        }
      });
    },
    //更新进度
    sliderSend() {
      var self = this;
      let data = {
        work_id: self.workDetailData.id,
        progress: self.progress
      };
      self.$axiosUser('post', '/api/pro/integral/work', data).then(res => {
        if (res.data.code == 1) {
          self.getData();
          self.isSlider = false;
        } else {
          self.$message.error(res.data.msg);
        }
      });
    },
    //弹窗关闭公共方法
    publicClose() {
      if (this.$refs['integral']) {
      	this.$refs['integral'].resetFields();
      }
      this.isIntegral = false;
      this.isOne = false;
      this.isSlider = false;
      this.textarea = ''; //记录一条内容
      this.integral = {
          text: '',
          num: '',
          type: '1'
      };
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('update:visible', false);
    },
    keepTheScore(data){
      if(data.status > 2){
        return false
      }
      if(this.userId == data.reviewer_id){
        return true
      }
      let info=this.$getEmployeeMapItem(data.employee_id)
      if(info){
        return info.employee_detail.superior_list.some(x =>{
          if(this.userId == x.id){
            return true
          }
        })
      }
    },
    // 获取数据
    getData() {
      this.loading = true;
      let data = this.detailType == 2 ? { schedule_id: this.id } : { work_id: this.id };
      this.$axiosUser('get', this.getDataUrl, data)
        .then(res => {
            this.workDetailData = res.data.data;
            this.isShowJf=this.keepTheScore(res.data.data);
            let text_list = [];
            let point_list = [];
            this.point_total = 0;
            if (this.workDetailData.process.list && this.workDetailData.process.list.length > 0) {
              for (let i in this.workDetailData.process.list) {
                this.point_total += this.workDetailData.process.list[i].point * 1;
                if (this.workDetailData.process.list[i].point != 0) {
                  point_list.push(this.workDetailData.process.list[i]);
                } else {
                  text_list.push(this.workDetailData.process.list[i]);
                }
              }
            }
            setTimeout(()=>{
              this.text_list=text_list;
              this.point_list=point_list;
            },500)
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.work_box{
  overflow: auto;
}
.el-icon-delete{
  font-size: 20px;
  height: 20px;
  margin-left: 10px;
  color: #909399;
  cursor: pointer;
}
.el-icon-delete:hover{
  color: #F56C6C;
}

.details_content {
  height: calc(100vh - 61px) !important;
  & .d_userMessage {
    margin-left: 10px;
  }
  & .d_userMessage div:nth-child(1) {
    font-size: 16px;
  }
  & .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;
    }
  }
}
  .work_item {
    padding-top: 10px;
    border-bottom: 1px solid #f1f1f1;
  }
.addJf {
  font-size: 13px;
  cursor: pointer;
  // margin-bottom: 5px;
  padding: 5px;
}
.addJf:hover{
  color: #409EFF !important;
}
.d_name {
  margin-left: 10px;
}
.d_content {
  margin-left: 50px;
  padding-bottom: 10px;
  word-break: break-all;
}
</style>