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

<template>
  <div>

    <div class="flex-box-ce flex-d-center" v-if="isOperation && !readonly">
      <!-- <el-date-picker v-model="time" type="daterange" size="mini" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
      <div class="add-task" @click="isShowFp = true"><i class="el-icon-plus"></i> 添加复盘</div>
    </div>

    <div style="padding: 10px 0;">
      <div class="flex-box-ce flex-d-center cursor record-list" v-for="(item, index) in list" :key="index"
        @click="openDetail(item.id)">
        <div class="black" style="font-weight: 700;font-size: 16px;">{{index+1}} 复盘({{item.ct}})</div>
        <div class="blue">
          <span style="padding-right: 10px;" class="cursor" v-if="isOperation && !readonly"><i
              class="el-icon-edit-outline"></i>编辑</span>
          <!-- <span class="cursor">查看详情</span> -->
        </div>
      </div>
      <div class="dotted-line" v-if="list.length==0">
        <div>尚未复盘过</div>
      </div>
    </div>

    <!-- 复盘目标 -->
    <el-dialog title="复盘" :visible.sync="isShowFp" :append-to-body="true" width="600px" :close-on-click-modal="false">
      <div style="max-height: 500px;overflow: auto;height: 500px;" class="scroll-bar">
        <div class="flex-box-ce">
          <div class="add-task-title">复盘对象</div>
          <div class="flex-1">
            <div class="huan" v-if="target_type==1"><span></span></div>
            <span class="huan" v-else style="font-weight: 600; color: #409EFF; font-size: 12px;">KR</span>{{name}}
          </div>
        </div>
        <div style="margin-bottom: 10px;">
          <div class="add-task-title">价值与收获</div>
          <el-input type="textarea" v-model="form.summary" :disabled="readonly" aria-required maxlength="500"
            show-word-limit clearable placeholder="我们在过程中学到了什么？(必填)" />
        </div>
        <div style="margin-bottom: 10px;">
          <div class="add-task-title">问题与不足</div>
          <el-input type="textarea" v-model="content" :disabled="readonly" maxlength="500" show-word-limit clearable
            placeholder="请描述出现的某个问题并针对该问题展开分析(必填)" />
        </div>
        <div style="margin-bottom: 10px;">
          <div class="add-task-title2">根本原因</div>
          <el-input type="textarea" v-model="reason" :disabled="readonly" maxlength="500" show-word-limit clearable
            placeholder="请填写问题出现的根本原因(必填)" />
        </div>
        <div style="margin-bottom: 10px;">
          <div class="add-task-title2">相应解决措施</div>
          <el-input type="textarea" v-model="plan" :disabled="readonly" maxlength="500" show-word-limit clearable
            placeholder="请根据上述原因给出可落地的解决措施(必填)" />
        </div>
        <div style="margin-bottom: 10px;">
          <div class="add-task-title">复盘参与人员</div>
          <div class="flex-box-ce flex-d-wrap">
            <div class="flex-box-ce userItem" v-for="item in employee_selected_all.employee" :key="item.id"
              style="margin-right: 10px;">
              <userImage :id="item.id" width="30px" height="30px" fontSize="14" :user_name="item.name"></userImage>
              <span style="font-weight: 600;padding-left: 10px;" class="fontColorB">{{item.name}}</span>
            </div>
            <div v-if="!readonly" class="aite" @click="show_employee_selector_all=true">+</div>
          </div>
        </div>
        <div style="height: 100px;"></div>
      </div>
      <div class="flex-box-end" style="margin-top:10px;">
        <el-popconfirm title="此操作不可恢复，您确定删除吗？" @confirm="deleteR" v-if="form.replay_id && isOperation && !readonly">
          <el-button slot="reference" type="danger" plain>删除</el-button>
        </el-popconfirm>
        <div class="flex-1"></div>
        <el-button @click="isShowFp=false">取消</el-button>
        <el-button type="primary" @click="confirm" v-if="isOperation">确定</el-button>
      </div>
    </el-dialog>

    <!--添加任务 -->
    <AddTask :visible.sync="isShowAddTask"></AddTask>

    <!-- @人员 -->
    <EmployeeSelector :is_filtration_creator="false" title="选择人员" :selected="employee_selected_all"
      :visible.sync="show_employee_selector_all" @confirm="employee_confirm_all" />

  </div>
</template>

<script>
import AddTask from '@/okr/components/public/AddTask'; //添加任务
import EmployeeSelector from '@/components/EmployeeSelector';
export default {
  name: 'Replay',
  components:{AddTask,EmployeeSelector},
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    target_id: {//对象id 根据对象种类不同而不同
      type: Number,
      default: 0,
    },
    target_type: {//沟通记录所属的对象种类 1-目标 2-KR 3-计划 4-项目 5-里程碑 6-进展
      type: Number,
      default: 0,
    },
    name:{ //名称
      type: String,
      default: '',
    },
    isOperation: { //是否可以操作
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      form: {
        target_type:this.target_type,//	是	string	复盘对象种类 1-目标 2-KR
        target_id:this.target_id,//	是	string	复盘对象id
        content:'',//	是	string	问题与不足列表。指定json结构的字符串
        summary:'',//	是	string	价值总结
        joiner_ids:'',//	是	string	参与者id列表,多个参与者以逗号分隔
      },
      content:'',
      reason:'',
      plan:'',
      time: [],
      tags: [],
      isShowAddTask:false,
      isShowFp: false,
      list: [],
      employee_selected_all: { dept: [], employee: [] },
      show_employee_selector_all: false,
    };
  },
  computed: {
    valueStr() {
      return (this.value + this.value).toString();
    }
  },
  watch:{
    isShowFp(val){
        if(!val){
          this.form={
            target_type:this.target_type,//	是	string	复盘对象种类 1-目标 2-KR
            target_id:this.target_id,//	是	string	复盘对象id
            content:'',//	是	string	问题与不足列表。指定json结构的字符串
            summary:'',//	是	string	价值总结
            joiner_ids:'',//	是	string	参与者id列表,多个参与者以逗号分隔
          };
          this.content='';
          this.reason='';
          this.plan='';
          this.employee_selected_all={ dept: [], employee: [] };
        }
    },
    time(val){
      this.getReplay();
    }
  },
  methods: {
    deleteR(){
      this.$axiosUser('post', '/api/pro/okr/replay/delete', {replay_id:this.form.replay_id}).then(res=>{
        this.getReplay();
        this.isShowFp=false;
      })
    },
    openDetail(id) {
      let url = ""
      if (!this.readonly) url = '/api/pro/okr/replay/info'
      else url = '/api/pro/okr/public/replay/info'
      this.$axiosUser('get', url, {replay_id:id}).then(res=>{
        let data=res.data.data
        this.form={
          replay_id:data.id,
          target_type:this.target_type,//	是	string	复盘对象种类 1-目标 2-KR
          target_id:this.target_id,//	是	string	复盘对象id
          content:data.content[0].problem,//	是	string	问题与不足列表。指定json结构的字符串
          summary:data.summary,//	是	string	价值总结
          joiner_ids:data.joiner_ids,//	是	string	参与者id列表,多个参与者以逗号分隔
        };
        this.content=data.content[0].problem;
        this.reason=data.content[0].reason;
        this.plan=data.content[0].plan;
        this.employee_selected_all.employee=data.joiner_ids.map(e=>{
            return this.$getEmployeeMapItem(e)
        });
        this.isShowFp=true;
      })
    },
    employee_confirm_all(val){
        this.employee_selected_all.employee=val.employee;
        this.form.joiner_ids=val.employee.map(item=>{
          return item.id
        });
    },
    getReplay() {
      let url = "";
      if (!this.readonly) {
        url = '/api/pro/okr/replay/list'
      } else {
        url = '/api/pro/okr/public/replay/list'
      }
      this.$axiosUser('get', url, {target_type:this.target_type,target_id:this.target_id,page:1,page_size:100}).then(res=>{
        let list=res.data.data.list
        this.list=list
      })
    },
    confirm(val) {
      if(!this.form.summary){
        this.$message.error('请输入价值与收获');
        return false
      }
      if(!this.content){
        this.$message.error('请输入问题与不足');
        return false
      }
      if(!this.reason){
        this.$message.error('请输入根本原因');
        return false
      }
      if(!this.plan){
        this.$message.error('请输入相应解决措施');
        return false
      }
      if(this.form.joiner_ids.length==0){
        this.$message.error('请选择复盘参与人员');
        return false
      }


      this.form.joiner_ids=this.form.joiner_ids.toString();
      this.form.content=JSON.stringify([{problem:this.content,reason:this.reason,plan:this.plan}]);
      let url='';
      if(this.form.replay_id){
        url="api/pro/okr/replay"
      }else{
        url="api/pro/okr/replay/create"
      }
      this.$axiosUser('post',url,this.form).then(res=>{
          this.$message.success(this.form.replay_id?  "编辑成功":'已添加');
          this.getReplay();
          this.isShowFp=false;
      })
    }
  },
  mounted() {

    this.getReplay()
  }
};
</script>

<style scoped="scoped" lang="scss">
  .record-list {
    padding: 6px 2px;
    border-radius: 5px;
    margin-bottom: 6px;
  }
  .record-list:hover {
    background-color: #f4f6f9;
  }
  .userItem{
     border-radius: 5px;
     padding: 5px;
     position: relative;
   }
  .userItem i{
     position: absolute;
     right: 0;
     top: 0;
     padding: 0;
     display: none;
   }
   .userItem:hover{
     background-color: #F7F8FA;
   }
   .userItem:hover i{
     display: block !important;
   }
  .blue-btn{
    background-color: #409EFF;
    color: #fff;
    width: 130px;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    border-radius: 3px;
  }
.aite {
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 22px;
  font-size: 22px;
  cursor: pointer;
  color: #409EFF;
  display: inline-block;
  border-radius: 100%;
  background-color: #e9f1fe;
}
.aite:hover {
  color: #409EFF;
}
.add-task-title2{

}
.add-task-title,.add-task-title2{
  padding: 10px;
  position: relative;
  color: #141c28;
  font-weight: 600;
}
.add-task-title::after{
  content: "";
  position: absolute;
  width: 4px;
  height: 14px;
  border-radius: 5px;
  background-color: #409EFF;
  left: 0;
  top: 13px;
}
.add-task {
  width: 120px;
  text-align: center;
  color: #409EFF;
  // background-color: #409EFF;
  padding: 2px 0;
  border: 1px solid #409EFF;
  border-radius: 3px;
  cursor: pointer;
}
.huan {
  position: relative;
  width: 22px;
  height: 16px;
  border-radius: 25px;
  background-color: #e9f1fe;
  box-sizing: border-box;
  text-align: center;
  line-height: 17px;
  margin-right: 11px;
  display: inline-block;
}
.huan span {
  border: 2px solid #409EFF;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  display: inline-block;
}
</style>