gdy_app_8/src/performance-07-19/view/myTarget/targetDetail.vue

<template>
  <div style="height: 100%;">
    <van-nav-bar title="目标详情" left-text="返回" left-arrow @click-left="$route_back" />
    <div class="all-box">
      <template v-if="targetDetail.visible==1">
        <header class="header">
          <div class="flex-box">
            <!-- 目标综合状态 1-未开始 2-负责人未接收 3-运行中 4-已延期 5-已达标(进度大于等于100) 6-已结束 -->
<!--            <span class="status" v-if="targetDetail.composite_state==1">未开始</span>
            <span class="status" v-if="targetDetail.composite_state==2">未接收</span>
            <span class="status" v-if="targetDetail.composite_state==3">进行中</span>
            <span class="status" v-if="targetDetail.composite_state==4">已延期</span>
            <span class="status" v-if="targetDetail.composite_state==5">已达标</span> -->
            <span class="status" v-if="targetDetail.composite_state==6">已结束</span>
            <div class="flex-1" style="font-weight: 600;padding: 0 0.2rem;padding-left: 0.1rem;">{{targetDetail.name}}</div>
          </div>
          <div class="flex-box-ce" style="margin: 0.16rem 0;">
            <div class="progress"><div class="progress-inner" :class="{bjYellow:targetDetail.risk_level==2,bjRed:targetDetail.risk_level==3}" :style="{width:targetDetail.process>100? '100%':targetDetail.process+'%'}"></div></div>
            <span style="padding-left: 0.1rem;font-size: 0.24rem;" class="blue" :class="{orange:targetDetail.risk_level==2,red:targetDetail.risk_level==3}">{{ targetDetail.process }}%</span>
            <template v-if="targetDetail.process != targetDetail.process_last">
              <span v-if="targetDetail.isUpdatePro>0" class="green" style="font-size: 12px;"><van-icon name="back-top" />{{ targetDetail.updatePro }}%</span>
              <span v-else class="red" style="font-size: 12px;"><van-icon name="down" />{{ targetDetail.updatePro }}%</span>
            </template>
            <div class="flex-1"></div>
            <div class="orange" v-if="targetDetail.score>=0">{{targetDetail.score}}</div>
          </div>
          <div class="flex-box-ce fontColorC" style="font-size: 0.26rem;">
            <span>{{$getEmployeeMapItem(targetDetail.owner_id).name}}</span>
            <span style="margin: 0 0.1rem;padding: 0 0.1rem;border-left: 1px solid #f1f1f1;border-right: 1px solid #f1f1f1;">

                {{targetDetail.belong_type==2? (dept_tree[targetDetail.dept_id]? dept_tree[targetDetail.dept_id].name:''):getBelongType(targetDetail.belong_type).name}}
            </span>
            <span class="flex-1">{{targetDetail.year}}年 {{targetDetail.dateStr}}</span>
          </div>
          <template v-if="targetDetail.kr_id">
            <div class="flex-box" v-if="targetDetail.p_kr" style="font-size: 0.26rem;margin-top: 0.2rem;border-top: 1px solid #f1f1f1;padding-top: 0.2rem;height: 0.36rem;">
                <span class="fontColorC">对齐目标：</span>
                <div class="flex-1 font-flex-word">{{targetDetail.p_kr.name}}</div>
            </div>
          </template>
          <template v-else-if="targetDetail.o_id">
            <div class="flex-box" v-if="targetDetail.p_objectives" style="font-size: 0.26rem;margin-top: 0.2rem;border-top: 1px solid #f1f1f1;padding-top: 0.2rem;height: 0.36rem;">
                <span class="fontColorC">对齐目标：</span>
                <div class="flex-1 font-flex-word">{{targetDetail.p_objectives.name}}</div>
            </div>
          </template>
        </header>
        <van-tabs v-model="tabActive" class="shadow"><van-tab :title="item" v-for="(item, index) in tabs" :key="index"></van-tab></van-tabs>
        <div class="scroller">
          <scroller ref="scroller">
            <template v-if="tabActive == 0">
              <div class="list-box" v-for="(item, index) in krsList" :key="index" @click="openDetail(item,2)">
                <div class="clamp2" style="margin-bottom: 5px;">{{item.name}}</div>
                <div class="flex-box-ce fontColorC" style="font-size: 0.26rem;">
                  <span>{{$getEmployeeMapItem(item.owner_id).name}}</span>
                  <span class="padding-l-r flex-box-ce">{{item.weight}}%</span>
                  <span class="flex-box-ce" style="padding-right: 0.1rem;border-right: 1px solid #f1f1f1;margin-right: 0.1rem;"><van-icon name="star" class="yellow" />{{item.confident}}分</span>
                  <van-circle :key="item.id" layer-color="#E5E9F2" v-model="item.currentRate" :color="item.risk_level==2? '#FF9600':item.risk_level==3? '#f56c6c':' #2879ff'" :rate="item.process"  :stroke-width="120" size="20px"/>
                  <span style="padding-left: 5px;font-size: 0.24rem;" class="blue" :class="{orange:item.risk_level==2,red:item.risk_level==3}">{{ item.process }}%</span>
                </div>
              </div>

            </template>
            <template v-if="tabActive == 1">
              <div class="list-box" v-for="(item, index) in krsListAll" :key="index">
                <div class="flex-box-ce" style="margin-bottom: 0.2rem;border-bottom: 1px solid #f1f1f1;padding-bottom: 0.2rem;">
                  <div class="blue" style="font-size: 0.26rem;font-weight: 600;margin-right: 0.1rem;">KR{{index+1}}</div>
                  <div class="flex-1 font-flex-word" style="padding-right: 0.2rem;font-size: 0.3rem;">{{item.name}}</div>
                  <!-- <span style="font-size: 0.26rem;" v-if="item.plans.length>0">计划任务<span class="blue">{{returnSum(item.plans)}}</span>/<span>{{item.plans.length}}</span></span> -->
                </div>
                <div style="padding:0 0.1rem;">

                  <template v-if="item.projects.length>0">
                      <div class="flex-box" style="margin-top: 0.2rem;" v-for="(task_item, index3) in item.projects" :key="task_item.id" @click="openDetail(task_item,3)">
                        <van-icon name="paid" class="blue" style="margin-right: 0.2rem;position: relative;top: 3px;"/>
                        <div class="flex-1">
                          <div class="clamp2" style="margin-bottom: 5px;font-size: 0.28rem;">{{task_item.name}}</div>
                          <div class="flex-box-ce fontColorC" style="font-size: 0.26rem;">
                            <span style="padding-right: 0.1rem;border-right: 1px solid #f1f1f1;margin-right: 0.1rem;">{{$getEmployeeMapItem(task_item.owner_id).name}}</span>
                            <span class="flex-1">{{$moment(task_item.end_date).format('MM/DD')}} 截止</span>
                          </div>
                        </div>
                      </div>
                  </template>
                  <template v-if="item.plans.length>0">
                      <div class="flex-box" style="margin-top: 0.2rem;" v-for="(task_item, index2) in item.plans" :key="index2" @click="openDetail(task_item,1)">
                        <van-icon :name="taskStatus(task_item.composite_state).icon"
                        class="blue" style="margin-right: 0.2rem;position: relative;top: 3px;"
                        :class="(task_item.day<=0&&$moment(task_item.end_date).format('YYYY-MM-DD')!=$moment().format('YYYY-MM-DD')) ? 'red':''"
                        />
                        <div class="flex-1">
                          <div class="clamp2" style="margin-bottom: 5px;font-size: 0.28rem;">{{task_item.name}}</div>
                          <div class="flex-box-ce fontColorC" style="font-size: 0.26rem;">
                            <span style="padding-right: 0.1rem;border-right: 1px solid #f1f1f1;margin-right: 0.1rem;">{{$getEmployeeMapItem(task_item.owner_id).name}}</span>
                            <span class="flex-1">{{$moment(task_item.end_date).format('MM/DD HH:mm')}} 截止</span>
                            <template v-if="task_item.statistics.plan_total">
                              <van-icon name="orders-o" />
                              <span style="font-size: 0.26rem;">
                                <span class="blue">{{task_item.statistics.plan_finish}}</span>/<span>{{task_item.statistics.plan_total}}</span>
                              </span>
                            </template>
                          </div>
                        </div>
                      </div>
                  </template>
                  <div v-if="item.projects.length==0&&item.plans.length==0" style="text-align: center;margin: 0.2rem 0;font-size: 0.28rem;" class="fontColorC">用“项目/任务”推动目标达成，合理规划安排工作</div>
                </div>
              </div>
            </template>
            <template v-if="tabActive == 3">
              <div style="height: 100%;background-color: #fff;padding: 0.2rem;border-top: 1px solid #f1f1f1;">
                <div class="flex-box-ce" style="margin-bottom: 0.2rem;">
                  <div class="flex-1">
                    <div class="user-title">发布人</div>
                    <div class="flex-box-v" style="text-align: center;width: 1.06rem">
                      <userImage :id="targetDetail.publisher_id" :user_name="$getEmployeeMapItem(targetDetail.publisher_id).name" width="0.7rem" height="0.7rem"></userImage>
                      <div style="font-size: 0.26rem;padding: 0.1rem 0;" class="font-flex-word">{{ $getEmployeeMapItem(targetDetail.publisher_id).name }}</div>
                    </div>
                  </div>
                  <div class="flex-1">
                    <div class="user-title">负责人</div>
                    <div class="flex-box-ce">
                      <div style="text-align: center;width: 1.06rem">
                        <userImage :img_url="targetDetail.owner_userInfo.img_url" :user_name="targetDetail.owner_userInfo.name" width="0.7rem" height="0.7rem"></userImage>
                        <div style="font-size: 0.26rem;padding: 0.1rem 0;" class="font-flex-word">{{ targetDetail.owner_userInfo.name }}</div>
                      </div>
                      <div class="zj" v-if="isUpdate" @click="openSelectUser(1)">转交</div>
                    </div>
                  </div>
                </div>
                <div style="margin-bottom: 0.2rem;">
                  <div class="user-title">参与人员</div>
                  <div class="flex-box-ce flex-d-wrap">
                    <div class="flex-box-v" style="margin-right: 0.2rem;text-align: center;margin-bottom: 0.2rem;position: relative;"  v-for="(item, index) in targetDetail.joiner_employee_items"  :key="index" >
                      <userImage :img_url="item.img_url" :user_name="item.name" width="0.7rem" height="0.7rem"></userImage>
                      <div style="font-size: 0.26rem;padding: 0.1rem 0;width: 1.06rem" class="font-flex-word">{{ item.name }}</div>
                      <!-- <van-icon name="clear" class="delete-user red" /> -->
                      <div class="zj2" v-if="isUpdate" @click="joinerUpdate(false,item.id)">删除</div>
                    </div>
                    <div class="addUser" v-if="isUpdate" @click="openSelectUser(2)">+</div>
                  </div>
                </div>
                <div style="margin-bottom: 0.2rem;">
                  <div class="user-title">关注人员</div>
                  <div class="flex-box-ce flex-d-wrap">
                    <div class="flex-box-v" style="margin-right: 0.2rem;text-align: center;margin-bottom: 0.2rem;" v-for="(item, index) in targetDetail.follower_employee_items" :key="index">
                      <userImage :img_url="item.img_url" :user_name="item.name" width="0.7rem" height="0.7rem"></userImage>
                      <div style="font-size: 0.26rem;padding: 0.1rem 0;width: 1.06rem" class="font-flex-word">{{ item.name }}</div>
                      <div class="zj2" v-if="isUpdate" @click="deleteFollower(false,item.id)">删除</div>
                    </div>
                    <div class="addUser" v-if="isUpdate" @click="openSelectUser(3)">+</div>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="tabActive == 2">
              <div style="padding: 0.2rem;background-color: #fff;border-top: 1px solid #f1f1f1;">
                <div class="flex-box-ce flex-d-wrap">
                  <div class="search-item" @click="targetType = item.id"  v-for="(item, index) in targetTypeArr" :key="index"  :class="item.id == targetType ? 'searchActive' : ''">{{ item.name }}</div>
                  <div class="flex-1"></div>
                </div>
                <template v-if="targetType==1">
                  <div v-for="(item, index) in processList" :key="index" style="margin-top: 0.24rem;">
                    <div class="flex-box-ce" style="padding-bottom: 0.2rem;">
                      <span class="biaos" :class="{ biaos2: item.risk_level == 2, biaos3: item.risk_level == 3 }"></span>
                      <div class="black flex-1" style="font-weight: 700;font-size: 16px;">
                      {{ item.process }}%
                        <template v-if="item.process != item.process_last">
                          <span v-if="item.isUpdatePro>0" class="green" style="font-size: 12px;"><van-icon name="back-top" />{{ item.updatePro }}%</span>
                          <span v-else class="red" style="font-size: 12px;"><van-icon name="down" />{{ item.updatePro }}%</span>
                        </template>
                      </div>
                      <span class="fontColorC" style="font-size: 0.26rem;">{{ item.create_time }}</span>
                    </div>
                    <div class="flex-box o-content">
                      <pre v-if="item.content" class="flex-1 fontColorB" style="margin: 0px;">{{ item.content }}</pre>
                      <div v-else class="flex-1 fontColorD">暂无内容</div>
                    </div>
                  </div>
                  <div style="text-align: center;margin: 1rem 0;" class="fontColorC" v-if="processList.length==0">目标进展一目了然？赶快更新完成度吧</div>
                </template>
                <template v-if="targetType==2">
                    <div v-for="(item, index) in processData.kr" :key="index" style="margin-top: 0.24rem;">
                      <div class="flex-box-ce" style="padding-bottom: 0.2rem;">
                        <span class="biaos" :class="{biaos2:item.process_info&&item.process_info.risk_level==2,biaos3:item.process_info&&item.process_info.risk_level==3}"></span>
                        <span class="okr-index">KR{{ index + 1 }}</span>
                        <div class="font-flex-word fontColorC flex-1" style="padding-right:0.2rem;font-size: 0.28rem;">{{item.name}}</div>
                        <div class="black" style="font-weight: 700;font-size: 16px;">
                            {{ item.process }}%
                            <template v-if="item.process != item.process_last">
                              <span v-if="item.isUpdatePro>0" class="green" style="font-size: 12px;"><van-icon name="back-top" />{{ item.updatePro }}%</span>
                              <span v-else class="red" style="font-size: 12px;"><van-icon name="down" />{{ item.updatePro }}%</span>
                            </template>
                        </div>
                      </div>
                      <div v-if="item.process_info">
                        <div class="o-content fontColorB">
                            <pre v-if="item.process_info.content" style="margin: 0px;">{{item.process_info.content}}</pre>
                            <span v-else class="fontColorD" style="font-size: 13px;">暂未更新</span>
                        </div>
                        <div style="padding-left: 0.34rem;font-size: 12px;" class="fontColorC">{{item.process_info.create_time}}</div>
                      </div>
                      <div class="pre fontColorD" v-else style="font-size: 13px;padding: 5px 0.5rem;">暂未更新</div>
                    </div>
                    <div style="text-align: center;margin: 1rem 0;" class="fontColorC" v-if="processData.kr==0">暂无进展</div>
                </template>
                <template v-if="targetType==3">
                    <div v-for="(item, index) in processData.objectives" :key="index" style="margin-top: 0.24rem;">
                      <div class="flex-box-ce" style="padding-bottom: 0.2rem;">
                        <span class="biaos" :class="{biaos2:item.process_info&&item.process_info.risk_level==2,biaos3:item.process_info&&item.process_info.risk_level==3}"></span>
                        <div class="huan"><span></span></div>
                        <div class="font-flex-word fontColorC flex-1" style="padding-right:0.2rem;font-size: 0.28rem;">{{item.name}}</div>
                        <div class="black" style="font-weight: 700;font-size: 16px;">
                            {{ item.process }}%
                            <template v-if="item.process != item.process_last">
                              <span v-if="item.isUpdatePro>0" class="green" style="font-size: 12px;"><van-icon name="back-top" />{{ item.updatePro }}%</span>
                              <span v-else class="red" style="font-size: 12px;"><van-icon name="down" />{{ item.updatePro }}%</span>
                            </template>
                        </div>
                      </div>
                      <div v-if="item.process_info">
                        <div class="o-content fontColorB">
                            <per v-if="item.process_info.content" style="margin: 0px;">{{item.process_info.content}}</per>
                            <span v-else class="fontColorD" style="font-size: 13px;">暂未更新</span>
                        </div>
                        <div style="padding-left: 0.34rem;font-size: 12px;" class="fontColorC">{{item.process_info.create_time}}</div>
                      </div>
                      <div class="pre fontColorD" v-else style="font-size: 13px;padding: 5px 0.5rem;">暂未更新</div>
                    </div>
                    <div style="text-align: center;margin: 1rem 0;" class="fontColorC" v-if="processData.objectives==0">暂无进展</div>
                </template>
              </div>
            </template>
            <div style="height: 3rem;"></div>
          </scroller>
          <footer class="footer">
            <div class="flex-box-ce">
               <van-icon name="chat-o" @click="openCommunication" style="margin-left: 0.2rem;font-size:0.6rem;" class="fontColorC"/>
            </div>
          </footer>
        </div>
      </template>

       <van-row type="flex" justify="space-around" class="c" v-else>
          <van-col span="24">
            <div style="text-align: center;margin-top: 2rem;margin-bottom: 1rem;">
              <img src='static/images/noPeople.png' style="width: 3.5rem;"/>
            </div>
            <p class="text_center fontColorC">暂无查看权限</p>
          </van-col>
        </van-row>
    </div>
    <van-dialog v-model="isShowProcess" show-cancel-button :beforeClose="subContent">
      <van-cell-group>
        <van-field v-model="processInfo.content" rows="4"  class="textarea-box" type="textarea" maxlength="500" placeholder="请输入进展与障碍" show-word-limit/>
      </van-cell-group>
    </van-dialog>

    <!-- 进度 -->
    <Progress :visible.sync="isShwoUpdateProgress" :progressData="progressData" @confirm="update"></Progress>
    <!-- 添加KR -->
    <AddKr :o_id="Number(o_id)" :isShowWeight="false" :visible.sync="isShowAddKr" @confirm="confirmAddkr"></AddKr>
    <!-- 详情 -->
    <van-action-sheet v-model="isShowbelong" :actions="scopeArr" @select="activebelong" cancel-text="取消" close-on-click-action/>
    <!-- 修改基本信息 -->
    <UpdateTarget :visible.sync="isShwoUpdateDetail" :targetDetail="targetDetail" :o_id="Number(o_id)" @confirm="getTargetDateil"></UpdateTarget>
    <!-- 关联任务 -->
    <TaskSearch :visible.sync="isShwoTaskSearch" @confirm="ActiveRelevanceTask"></TaskSearch>
    <!-- 人员选择 -->
    <EmployeeSelector :multi="false" :isRequired="true" key="selected_user" title="选择人员" :visible.sync="selectUser" @confirm="confirmUser" :can_select_dept="false" :selected.sync="selected_user"></EmployeeSelector>

    <!-- 可见范围 -->
    <van-action-sheet v-model="isShowV" :actions="vArr" @select="activevArr" cancel-text="取消" close-on-click-action/>

    <!-- 关联KR -->
    <TargetSearch :visible.sync="isShwoKrSearch" :showSelectType="2" @confirm="ActiveRelevanceKr"></TargetSearch>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, Circle,ActionSheet } from 'vant';
import UpdateTarget from '@/okr/components/public/UpdateTarget';
import TaskSearch from '@/okr/components/public/TaskSearch';
import AddKr from '@/okr/components/public/AddKr';
import EmployeeSelector from '@/components/EmployeeSelector';
import Progress from '@/okr/components/public/Progress';
import TargetSearch from '@/okr/components/public/TargetSearch';

import {taskStatus,getBelongType,getDateStr,getOperation} from '@/okr/utils/auth';
Vue.use(Tabs).use(Tab).use(Circle).use(ActionSheet);
export default {
  components:{UpdateTarget,AddKr,TaskSearch,EmployeeSelector,Progress,TargetSearch},
  data() {
    return {
      targetDetail:{visible:1},
      processInfo:{},
      getBelongType:getBelongType,
      taskStatus:taskStatus,
      userInfo: this.$userInfo(),
      tabActive: 0,
      tabs: ['OKRs', '计划', '进展','成员'],
      targetTypeArr: [{ name: '目标进展', id: 1 }, { name: 'KR进展', id: 2 }, { name: '子目标进展', id: 3 }],
      targetType: 1,
      isShowbelong:false,
      isShwoTaskSearch:false,
      scopeArr:[{value: 0, name:'关注目标', disabled: false},{value: 1, name:'编辑基本信息',disabled: false},{value: 2,name:'结束目标',disabled: false},{value: 4,name:'复制目标',disabled: false},{value: 3,name:'删除目标',color: '#f56c6c',disabled: false}],
      processList: [],
      processData:{kr:[],objectives:[]},
      isShwoUpdateDetail:false,
      isShowAddKr:false,
      userId:0,
      krName:'',
      weight:0,
      o_id:0,
      kr_id:0,
      krsList:[],
      krsListAll:[],//包括任务
      isFollower:false,//是否关注
      isUpdate:false,
      selectUser:false,
      selected_user: { dept: [], employee: [] } ,//传入已选部门
      isShwoUpdateProgress:false,
      progressData:{},
      isShowProcess:false,
      isOperation:true,
      dept_tree:{},

      // 可见范围
      isShowV:false,
      vArr:[{value: 1,name: '添加任务'},{value: 2,name: '添加项目'}],
      addTaskIndex:1,
      selectKr:{},
      isShwoKrSearch:false,
    };
  },
  watch:{
    isFollower(val){
      if(val){
        this.scopeArr.forEach(item=>{
          if(item.value==0){item.name='取消关注'}
        })
      }else{
        this.scopeArr.forEach(item=>{
          if(item.value==0){item.name='关注目标'}
        })
      }
    },
    tabActive(val){
      if(val==0){
        this.getKrList();
      }else if(val==1){
        this.getkrTaskList();
      }else if(val==2){
        this.getProcess();
      }
    }
  },
  methods: {
    //关联项目
    ActiveRelevanceKr(item){
      this.$axiosUser('post', '/api/pro/okr/project/bind',{project_id:item.item.id,kr_id:this.selectKr.id}).then(res => {
       this.getkrTaskList();
      });
    },
    activevArr(item){
      if(this.addTaskIndex==1){
        if(item.value==1){
          let data={
            target_type:	2,//是	string	计划绑定的对象种类 1-目标 2-KR 3-计划(分解计划下的子计划的时候)
            target_id:this.selectKr.id,//是	integer	绑定的对象id 跟对象种类配对使用
          }
          this.$router.push({name: 'addTask', query: data})
        }else{
          this.$router.push({name: 'addProject', query: {kr_id:this.selectKr.id}})
        }
      }else{
        if(item.value==1){
            this.kr_id=this.selectKr.id;
            this.isShwoTaskSearch=true;
        }else{
            this.isShwoKrSearch=true;
        }
      }
    },
    openDetail(item,type){

      if(type==1){
        this.$router.push({name: 'myTargetDetail', query: {id: item.id}})
      }else if(type==2){
        this.$router.push({name: 'myKrDetail', query: {id: item.id}})
      }else if(type==3){
        // this.$router.push({name: 'projectDetail', query: {id: item.id}})
        return
      }
    },
    subContent(action, done){
       if (action == 'confirm') {
         this.$axiosUser('post', '/api/pro/okr/process/content',{p_id: this.processInfo.id, content: this.processInfo.content}).then(res => {
           this.getProcess();
           this.isShowProcess = false;
         })
         done()
       }else{
         done()
       }
    },
    compileContent(item){
      this.processInfo = JSON.parse(JSON.stringify(item));
      this.isShowProcess = true;
    },
    update(){
      this.getTargetDateil();
      this.getProcess();
    },
    // 沟通
    openCommunication(){
      let data = {
        item: JSON.stringify(this.targetDetail),
        target_type: 1,
        readonly: 1
      }
      this.$router.push({name: 'communication', query:data})
    },
    // 处理部门数据
    returnArr(list,arr){
      list.forEach(item=>{
        arr[item.id]=item
        if(item.children.length>0){
          this.returnArr(item.children,arr)
        }
      })
    },
    // 获取部门列表
    get_department_list() {
      this.$axiosUser('get','/api/pro/department/tree','','v2').then((res) => {
          let list = res.data.data.list
          let dept_tree = {};
          this.returnArr(list,dept_tree)
          this.dept_tree = dept_tree
      })
    },
    //更新完成度
    updateProgress(){
      let item=this.targetDetail;
      this.progressData={
        target_type:1,
        id:item.id,
        o_id:item.id,
        process:Number(item.process),
        risk_level:item.risk_level,
        process_conf:item.process_conf,
      }
      this.isShwoUpdateProgress=true;
    },
    //获取最新字段
    getProcess(){
      let axios= this.$axiosUser('get', '/api/pro/okr/public/process/list', {target_type:1,target_id:this.o_id,page:1,page_size:100})
      let axios2= this.$axiosUser('get', '/api/pro/okr/public/process/sub', {target_type:1,target_id:this.o_id})
      Promise.all([axios,axios2]).then(res => {
          let data=res[1].data.data
          data.objectives=this.updatePro(data.objectives);
          data.kr=this.updatePro(data.kr);
          this.processData=data;
          this.processList=this.updatePro(res[0].data.data.list)
      })
    },
    updatePro(arr){
      arr.forEach(item=>{
         item.updatePro=Math.abs(item.process-item.process_last).toFixed(2);
         item.isUpdatePro=item.process-item.process_last
      })
      return arr;
    },
    openSelectUser(index){
      this.selectUserIndex=index;
      this.selectUser=true;
    },
    confirmUser(data) {
      let user=data.employee[0]
      if(this.selectUserIndex==1){
        let params={object_id:this.targetDetail.id,owner_id:user.id,}
        this.$axiosUser('POST', 'api/pro/okr/obj/change_owner', params).then(res => {
            this.getTargetDateil();
        })
      }else if(this.selectUserIndex==2){
        this.joinerUpdate(true,user.id);
      }else{
        this.deleteFollower(true,user.id);
      }
    },
    //参与者
    joinerUpdate(is,id){
      let data={
        object_id:this.o_id,
        joiner_id:id,
        action:is? 'add':'remove',
      }
      this.$axiosUser('post', '/api/pro/okr/obj/change_joiner',data).then(res => {
          this.getTargetDateil();
      })
    },
    //关注者
    deleteFollower(is,id){
      let data={
        object_id:this.o_id,
        employee_id:id,
        action:is? 'add':'remove',
      }
      this.$axiosUser('post', '/api/pro/okr/obj/change_focus',data).then(res => {
          this.getTargetDateil();
      })
    },
    //关联母任务
    ActiveRelevanceTask(item){
        if(item.id){
          this.$axiosUser('POST', '/api/pro/okr/plan/relate/other',{plan_id:item.id,target_type:2,target_id:this.kr_id}).then(res => {
               this.getkrTaskList();
          })
        }
    },
    addTask(item,index){
      this.addTaskIndex=index;
      this.selectKr=item;
      if(index==1){
        this.vArr=[{value: 1,name: '添加任务'},{value: 2,name: '添加项目'}];
      }else{
        this.vArr=[{value: 1,name: '关联任务'},{value: 2,name: '关联项目'}];
      }
      this.isShowV=true;
    },
    confirmAddkr(item){
      this.$axiosUser('POST','api/pro/okr/kr/create',item).then(res => {
         this.$toast("已添加");
         this.getKrList()
      })
    },
    activebelong(item){
      if(item.value==0){//关注
        this.$axiosUser('POST','/api/pro/okr/obj/follow',{o_id:this.o_id}).then(res => {
           this.$toast(this.isFollower? "已取消":'已关注');
           this.getTargetDateil();
        })
      }else if(item.value==1){//编辑
        this.isShwoUpdateDetail=true;
      }else if(item.value==2){//结束目标
        if(item.name=='结束目标'){
          this.$dialog.confirm({ title:'结束', message: '确定要结束目标吗？'}).then(() => {
            this.$axiosUser('post', '/api/pro/okr/obj/to_finish', { object_id: this.o_id }).then(res => {
                this.getTargetDateil()
            });
          });
        }else{
          this.$axiosUser('POST', '/api/pro/okr/obj/to_start',{object_id:this.o_id}).then(res => {
             this.getTargetDateil()
          })
        }
      }else if(item.value==3){//删除
        this.$dialog.confirm({ title:'删除', message: '目标删除操作不可恢复！请谨慎操作'}).then(() => {
          this.$axiosUser('post', '/api/pro/okr/public/obj/d', { o_id: this.o_id }).then(res => {
              this.$toast("已删除");
              setTimeout(()=>{
                this.$route_back()
              },500)
          });
        });
      }else if(item.value==4){//复制目标
        this.$router.push({name: 'copyTarget', query: {id:this.o_id}})
      }
    },
    returnSum(arr){
      if(arr.length==0){return 0};
      let sum=0;
      arr.forEach(item=>{
        if(item.composite_state==6){
          sum++;
        }
      })
      return sum
    },
    //执行
    getkrTaskList(){
	  if(!this.o_id){
		  return false
	  }
      let data={
        o_id:this.o_id,//	是	string	目标id
        plan_calc: 1
      }
      this.$axiosUser('get', '/api/pro/okr/public/plan/list/o',data).then(res => {
        let list=res.data.data.list;
        list.forEach(e=>{
          if(e.plans&&e.plans.length>0){
            e.plans.forEach(item=>{
              item.day=this.$moment(item.end_date).diff(this.$moment().format('YYYY-MM-DD'), 'day')
            })
          }
        })
        this.krsListAll=list;
      })
    },
    //OKRs
    getKrList(){
      this.krsList=[];
      this.$axiosUser('get', '/api/pro/okr/public/kr/list',{o_id:this.o_id}).then(res => {
          let list=res.data.data.list;
          this.krsList=list
      })
    },
    //目标详情
    getTargetDateil(){
      this.isFollower=false;
      this.$axiosUser('get', '/api/pro/okr/public/obj/detail',{object_id:this.o_id}).then(res => {
          let data=res.data.data;
          data.dateStr=getDateStr(data)
          data.owner_userInfo=this.$getEmployeeMapItem(data.owner_id);//负责人
          data.special_employee_items=data.special_employee_ids.map(e=>{ //可见人员
              return this.$getEmployeeMapItem(e)
          })
          data.joiner_employee_items=data.joiner_ids.map(e=>{//参与人员
              return this.$getEmployeeMapItem(e)
          })
          data.follower_employee_items=data.follower_ids.map(e=>{//关注者
              return this.$getEmployeeMapItem(e)
          })
          if(data.follower_ids.length>0){
            data.follower_ids.some(e=>{//关注者
                if(e==this.userInfo.id){
                   this.isFollower=true;
                   return true
                }
            })
          }
          if(data.finish_status!=0){
            this.scopeArr.forEach(item=>{
              if(item.value==2){item.name='重启目标'}
            })
          }else{
            this.scopeArr.forEach(item=>{
              if(item.value==2){ item.name='结束目标' }
            })
          }

          // 权限[{value: 0, name:'关注目标'},{value: 1, name:'编辑基本信息'},{value: 2,name:'结束目标'},{value: 3,name:'删除目标',color: '#f56c6c'}],
          if(!data.can_edit){ //不可编辑
            this.scopeArr.forEach(item=>{
              if(item.value==1){
                item.disabled=true
              }
              if(item.value==2&&item.name=='结束目标'){
                item.disabled=true
              }
              // if(item.value==4){
              //   item.disabled=true
              // }
            })
          }
          if(!data.can_delete){ //不可删除
            this.scopeArr.forEach(item=>{
              if(item.value==3){item.disabled=true}
            })
          }

          this.isOperation=getOperation(data.publisher_id,data.owner_id);
          this.targetDetail=this.updatePro([data])[0];
      })
    },
  },
  mounted() {
    this.get_department_list();
    if(this.$route.query.id){
      this.o_id=this.$route.query.id;
      this.getTargetDateil();
      this.getKrList();
    }
  },
  activated() {
  	 this.getkrTaskList();
  }
};
</script>

<style scoped lang="less">
  .textarea-box /deep/ .van-field__control{
    max-height: 400px;
  }
  .footer {
    padding: 0.14rem 0.2rem;
    border-top: 0.02rem solid #f1f1f1;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    box-shadow: 0px -3px 0.15rem #f7f8fa;
  }
  .footer .gt {
    border-radius: 0.5rem;
    padding:0.18rem 0.14rem;
    border: 0.02rem solid #f1f1f1;
    font-size: 0.32rem;
  }
  .footer i{
    font-size: 0.6rem;
  }
  .footer .btn {
    border-radius: 0.5rem;
    padding:0.18rem 0.14rem;
    // border: 0.02rem solid #26A2FF;
    color: #fff;
    text-align: center;
    background: #26A2FF;
    font-size: 0.32rem;
  }
  .huan{
    position: relative;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    background-color: #E9F1FE;
    box-sizing: border-box;
    text-align: center;
    margin-right: 0.1rem;
  }
  .huan span{
    border: 2px solid #26A2FF;
    border-radius: 100%;
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block;
  }
  .status{
    position: relative;
    // top: 1px;
    font-size: 0.24rem;
    border-radius: 15px;
    line-height:0.32rem;
    color: #26A2FF;
    height: 0.32rem;
    padding: 0px 0.04rem;
    border: 1px solid #26A2FF;
  }
  .aite{
      width: 1rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      font-size: 0.6rem;
      cursor: pointer;
      display: inline-block;
      box-shadow: 0 0 3px #89919f;
      border-radius: 100%;
      background-color: #fff;
      position: absolute;
      z-index: 2;
      bottom: 0.4rem;
      right: 0.4rem;
  }
  .aite i{
    font-size: 0.36rem;
  }
.o-content {
  border-radius: 5px;
  padding: 5px;
  margin-left: 0.24rem;
  margin-bottom: 5px;
  font-size: 0.28rem;
}
.o-content:hover {
  background-color: #f7f8fa;
}
.o-content:hover .fontColorC {
  display: block !important;
  cursor: pointer;
}
.biaos {
  width: 0.14rem;
  height: 0.14rem;
  background-color: #26a2ff;
  border: 1px solid #fff;
  border-radius: 100%;
  box-shadow: 0 0 0.14rem #26a2ff;
  display: inline-block;
  margin-right: 0.14rem;
}
.biaos2 {
  background-color: #ff9600;
  box-shadow: 0 0 0.14rem #ff9600;
}
.biaos3 {
  background-color: #f56c6c;
  box-shadow: 0 0 0.14rem #f56c6c;
}
.add-jz {
  width: 1.4rem;
  text-align: center;
  padding: 0.04rem 0.08rem;
  color: #26a2ff;
  border: 1px solid #26a2ff;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.26rem;
}
.search-item {
  padding: 0.06rem 0.1rem;
  background-color: #f7f8fa;
  color: #89919f;
  width: 1.3rem;
  text-align: center;
  margin-right: 0.2rem;
  border-radius: 3px;
  font-size: 0.3rem;
  border-radius: 25px;
  font-size: 0.26rem;
}
.searchActive {
  color: #26A2FF;
  background-color: #e9f0fd;
}
.delete-user {
  position: absolute;
  right: -4px;
  top: -4px;
  padding: 0;
}
.btns span {
  width: 1.4rem;
  text-align: center;
  padding: 0.04rem 0.1rem;
  color: #26A2FF;
  margin-right: 0.2rem;
  border: 0.02rem solid #26A2FF;
  border-radius: 0.06rem;
  font-size: 0.26rem;
}
.user-title {
  font-size: 0.28rem;
  // font-weight: 700;
  color: #89919f;
  margin: 0.2rem 0;
}
.addUser {
  font-size: 0.6rem;
  padding: 0.2rem;
  border: 1px dashed #89919f;
  text-align: center;
  height: 0.4rem;
  width: 0.4rem;
  line-height: 0.4rem;
  color: #89919f;
  border-radius: 100px;
}
.zj {
  width: 1rem;
  text-align: center;
  color: #26A2FF;
  border: 0.02rem solid #26A2FF;
  border-radius: 0.04rem;
  font-size: 0.24rem;
}
.zj2 {
  width: 1rem;
  text-align: center;
  color: #f56c6c;
  border: 0.02rem solid #f56c6c;
  border-radius: 0.04rem;
  font-size: 0.24rem;
}
.addKr {
  padding: 0.2rem;
  font-size: 0.3rem;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  margin: 0 0.2rem;
  margin-top: 0.2rem;
}
.padding-l-r {
  padding: 0 0.1rem;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  margin: 0 0.1rem;
}
.scroller {
  height: calc(100% - 3.58rem) !important;
  position: relative !important;
}
.list-box {
  padding: 0.2rem;
  font-size: 0.32rem;
  background-color: #fff;
  border-radius: 5px;
  margin: 0 0.2rem;
  margin-top: 0.2rem;
}
.shadow {
  border-bottom: 1px solid #f5f7fa;
}
/deep/ .van-tabs__line {
  width: 20px !important;
  background-color: #26A2FF;
}
/deep/ .van-tab--active {
  color: #26A2FF;
}
.all-box {
  height: calc(100% - 0.92rem) !important;
  position: relative !important;
}
.progress {
  border-radius: 100px;
  background-color: #ebeef5;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  height: 0.2rem;
  width: 3rem;
}
.progress-inner {
  width: 0%;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 1px;
  height: 100%;
  background-image: linear-gradient(to right, #99bbff 0%, #2879ff 100%);
  border-radius: 100px;
  color: #fff;
  white-space: nowrap;
  transition: width 0.6s ease;
}
  .bjYellow{
    background-image: linear-gradient(to right, #fedf86 0%, #FF9600 100%);
  }
  .bjRed{
    background-image: linear-gradient(to right, #FEA2A2 0%, #F16060 100%);
  }
.header {
  padding: 0.24rem;
  background-color: #fff;
  z-index: 9999;
  // background-image: linear-gradient(to bottom, #26A2FF 0%, #99BBFF 100%);
}
</style>