gdy_pc_8/src/okr/components/TargetDetail/Interaction.vue

<template>
  <div>
    <div class="scroll-bar" :class="{'setHeight':target_type==4}">
      <template v-if="target_type!=5">
        <div class="fontColorC hoverBlue" style="font-size: 12px;">
          <span @click="isShowAll=!isShowAll">全部操作 {{total}} <i :class="isShowAll? 'el-icon-arrow-up':'el-icon-arrow-down'"></i></span>
        </div>
        <Record :record="record" :isShowAll="isShowAll"></Record>
      </template>

      <div class="fontColorC flex-box-ce flex-d-center">
        <span class="hoverBlue" style="font-size: 12px;" @click="isShowAll2=!isShowAll2">全部沟通 {{total2}} <i :class="isShowAll2? 'el-icon-arrow-up':'el-icon-arrow-down'"></i></span>
        <div class="flex-box-ce">
            <el-checkbox v-model="checked">仅看有附件的</el-checkbox>
            <el-input  class="input" maxlength="20" prefix-icon="el-icon-search" style="width: 206px;margin: 0 10px;" size="small" v-model="keyword" clearable placeholder="按沟通内容搜索" />
            <el-button @click="huiFu({},true)"  class="primaryBtn"  size="small" v-if="isOperation"><i class="el-icon-edit"></i>立即沟通</el-button>
        </div>
      </div>
      <div class="record" v-if="feedbackList.length > 0" style="margin: 20px 0;">
        <div v-for="(item, index) in feedbackList" :key="index" class="record-list" v-if="isShowAll2">
          <div class="flex-box-ce record-date fontColorB">
            <userImage :user_name="item.userInfo.name" :img_url="item.userInfo.img_url" fontSize="12" width="32px" height="32px"></userImage>
            <div class="record-name">{{ item.userInfo.name }} <span v-if="item.reply_employee_id"><span style="font-weight: 500;" class="fontColorF">回复</span> {{$getEmployeeMapItem(item.reply_employee_id).name}}</span></div>
            <span class="fontColorC flex-1">{{ item.create_time }}</span>
            <span class="blue cursor" style="padding-right: 10px;display: none;" @click="huiFu(item)">回复</span>
            <el-popconfirm title="此操作不可恢复，您确定删除吗？" @confirm="deleteFeedback(item)" v-if="userId==item.userInfo.id">
              <span slot="reference" class="blue cursor" style="display: none;">删除</span>
            </el-popconfirm>
          </div>
          <div class="record-content">
            <pre class="pre fontColorB">{{ item.content }}</pre>
          </div>
          <div v-if="item.files.length>0" class="flex-box-ce" style="margin-top: 20px;">
              <div class="files-box flex-box-ce" v-for="(f,index2) in item.files" :key="index2">
                <el-image v-if="f.type=='img'" style="width: 30px; height: 30px;cursor: pointer;" :src="f.file" :preview-src-list="[f.file]"></el-image>
                <span v-else ><img  @click="$onFilePreView(f.file)" style="width: 30px; height: 30px;cursor: pointer;" src="static/images/excel_icon.png"/></span>
                <Tooltip :preHtml="f.name">
                    <div style="margin-left: 10px;width: 120px;">{{f.name}}</div>
                </Tooltip>
              </div>
          </div>

          <div v-if="item.notice_employee_ids.length>0" class="flex-box-ce" style="margin-top: 20px;padding-left: 40px;">
              <div>@人员:</div>
              <span class="green" v-for="(f,index2) in item.notice_employee_ids" :key="index2" style="padding-left: 5px;">{{f.name}}</span>
          </div>
        </div>
      </div>
      <div class="dotted-line" v-else style="margin: 20px 0;">
            <div>暂无沟通记录，<span class="blue cursor" @click="huiFu({},true)">去沟通</span></div>
      </div>
    </div>
    <!-- 沟通弹窗 -->
    <AddInteraction :visible.sync="isShowCommunication" :userInfo="userInfo" :replyId="reply_id" :target_type="target_type" :target_id="target_id" @confirm="getLog"></AddInteraction>
  </div>
</template>

<script>
import Record from '@/okr/components/public/Record'; //流程
import AddInteraction from '@/okr/components/TargetDetail/AddInteraction'; //流程
import Tooltip from '@/components/Tooltip'; //鼠标悬浮显示文字
import { _debounce} from '@/utils/auth';
export default {
  name: 'Interaction',
  components: { Record, AddInteraction,Tooltip },
  props: {
    target_id: {//对象id 根据对象种类不同而不同
      type: Number,
      default: 0,
    },
    target_type: {//沟通记录所属的对象种类 1-目标 2-KR 3-计划 4-项目 5-里程碑 6-进展
      type: Number,
      default: 0,
    },
    isOperation: { //是否可以操作
      type: Boolean,
      default: true
    },

  },
  data() {
    return {
      userInfo:{},
      userId:this.$userInfo().id,//当前用户id
      reply_id:0,
      tags: [], //沟通@人员
      selectUser: false,
      record: [],
      feedbackList:[],
      total:0,
      total2:0,
      isShowAll:false,//是否显示全部操作记录
      isShowAll2:true,
      isShowCommunication: false, //沟通反馈

      keyword:'',
      file:'',
      checked:false,
    };
  },
  watch: {
    keyword:_debounce(function(val) {
        this.getLog();
    }),
    checked(val) {
      this.getLog();
    },
  },
  mounted() {
    this.getLog()
  },
  methods: {
    onFilePreView(url) {
      window.open(url, '_blank');
    },
    deleteFeedback(item){
      this.$axiosUser('post','/api/pro/okr/feedback/delete',{fb_id:item.id}).then(res => {
        this.getLog()
      })
    },
    huiFu(item,is){
      if(is){
        this.userInfo={};
        this.reply_id=0;
      }else{
        this.userInfo=item.userInfo;
        this.reply_id=item.id;
      }
      this.isShowCommunication=true;
    },
    getLog() {
      let axios= this.$axiosUser('get', '/api/pro/okr/log',{target_id:this.target_id,target_type:this.target_type})
      let axios2= this.$axiosUser('get', '/api/pro/okr/feedback/list', {target_id:this.target_id,target_type:this.target_type,page:0,page_size:100,keyword:this.keyword,file:this.checked? 1:0})
      let urls=this.target_type==5? [axios2]:[axios,axios2];

      Promise.all(urls).then(res => {
          if(this.target_type==5){
            let data2=res[0].data.data
            let list=data2.list;
            list.forEach(item=>{
              item.userInfo=this.$getEmployeeMapItem(item.publisher_id);
              item.notice_employee_ids=item.notice_employee_ids.map(e=>{
                 return this.$getEmployeeMapItem(e)
              })
            })
            this.feedbackList=list;
            this.total2=data2.total;
          }else{
            let data1=res[0].data.data
            this.record=data1.list;
            this.total=data1.total;


            let data2=res[1].data.data
            let list=data2.list;
            list.forEach(item=>{
              item.userInfo=this.$getEmployeeMapItem(item.publisher_id);
              item.notice_employee_ids=item.notice_employee_ids.map(e=>{
                 return this.$getEmployeeMapItem(e)
              })
            })
            this.feedbackList=list;
            this.total2=data2.total;
          }
      })
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
  ::v-deep input {
    border-radius: 20px;
  }
 .setHeight{
   height: calc(100vh - 280px);
   overflow-y: auto;
 }
.add-task {
  width: 120px;
  text-align: center;
  color: #409EFF;
  // background-color: #409EFF;
  padding: 2px 0;
  border: 1px solid #409EFF;
  border-radius: 3px;
  cursor: pointer;
}
.record-message {
  font-size: 13px;
  margin: 5px 60px;
}
.record-list {
  position: relative;
  padding: 8px;
  border-radius: 5px;
}
.record-list:hover {
  background-color: #f4f6f9;
}
.record-list:hover .blue {
  display: block !important;
}
.record-title {
  padding: 16px 0;
  font-size: 16px;
}
.record-date {
  position: relative;
  font-size: 13px;
}
.record-content {
  margin-left: 40px;
  border-radius: 5px;
}
.pre{
  margin: 5px 0;
}
.record-name {
  margin-right: 10px;
  margin-left: 10px;
  color: #141c28;
  font-weight: 600;
}
  .files-box{
    margin-right: 10px;
    height: 46px;
    width: 200px;
    padding-left: 10px;
    position: relative;
  }
  .files-box div{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .files-box:hover{
    background-color: #dcdfe6;
  }
  .files-box i{
    color: #606266;
  }
  .files-box i:hover{
    color: #f56c6c;
  }
</style>