gdy_pc_8/src/okr/components/public/CopyTarget.vue

<template>
  <el-dialog :title="title" :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" top="5%" append-to-body @open="openDialog" width="760px">
    <div>
      <div class="flex-box-ce stepNew flex-center-center">
        <div class="stepOneN" :class="{tabActive:tabIndex == 1,accomplish:accomplish==1||accomplish==2 }">
          <div><i class="el-icon-check" style="padding-right: 5px;" v-if="accomplish==1||accomplish==2"></i>复制基本信息</div>
          <span></span>
        </div>
        <div class="stepThreeN" :class="{tabActive:tabIndex == 2,accomplish:accomplish==2||accomplish==3 }">
          <span></span>
          <div><i class="el-icon-check" style="padding-right: 5px;" v-if="accomplish==2||accomplish==3"></i>复制KR</div>
          <span></span>
        </div>
      </div>
      <template v-if="tabIndex==1">
        <el-form ref="form" :model="form" label-width="80px" class="form">
          <el-form-item label="名称">
            <el-input type="textarea" autosize class="noBorder" v-model="form.name" placeholder="最多能输入100字" clearable maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="周期">
              <div class="border flex-box-ce">
                <div class="flex-1" style="color: #606266;">{{addDateParameter2.year}}年 {{addDateParameter2.name}}</div>
                <i class="el-icon-arrow-down icon-right"></i>
                <div class="inputDc" @click="isShowZq=true"></div>
              </div>

<!--              <el-radio-group v-model="form.cycle_type">
                <el-radio :label="1">年度</el-radio>
                <el-radio :label="3">半年度</el-radio>
                <el-radio :label="2">季度</el-radio>
                <el-radio :label="4">月度</el-radio>
              </el-radio-group>
              <div class="flex-box-ce">
                <el-select v-model="form.year" placeholder="请选择" style="margin-right: 10px;">
                  <el-option v-for="item in yearArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="form.half_year" placeholder="请选择" v-show="form.cycle_type==3">
                  <el-option v-for="item in halfYearArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="form.quarter" placeholder="请选择" v-show="form.cycle_type==2">
                  <el-option v-for="item in seasonArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="form.month" placeholder="请选择" v-show="form.cycle_type==4">
                  <el-option v-for="item in monthArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div> -->
          </el-form-item>
          <el-form-item label="目标类型">
            <div class="border flex-box-ce" @click="isShowTargetType=true">
              <div class="flex-1" style="color: #606266;">{{getBelongType(form.belong_type).label}}</div>
              <i class="el-icon-arrow-down icon-right"></i>
              <TargetType :visible.sync="isShowTargetType" :deptId='form.dept_id' :belong_type="form.belong_type" @confirm="selectTargetType" trigger="manual"><div class="inputDc"></div></TargetType>
            </div>
          </el-form-item>
          <el-form-item label="负责人">
            <div class="flex-box-ce">
              <div class="flex-box-ce cursor" @click="selectUser(1)">
                <userImage :user_name="form.owner_userInfo.name" :img_url="form.owner_userInfo.img_url" width="30px" height="30px" fontSize="12" ></userImage>
                <span style="padding-left: 5px;" >{{form.owner_userInfo.name}}</span>
              </div>

            </div>
          </el-form-item>
          <el-form-item label="参与人">
            <div class="cursor" style="border-radius: 4px;border: 1px solid #dcdfe6;line-height: 34px;width: 300px;padding: 0 15px;" @click="selectUserAll(1)">
              <div class="flex-box-ce fontColorB font-flex-word" v-if="form.joiner_items.length>0">
                  <span v-for="item in form.joiner_items"> {{item.name}},</span>
              </div>
              <div v-else style="color: #C0C4CF;">请选择参与人员</div>
            </div>
          </el-form-item>
          <el-form-item label="可见范围">
              <el-select v-model="form.visible_type" style="width: 300px;" placeholder="请选择">
                <el-option  v-for="item in getScopeArr" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
              <div class="border flex-box-ce" style="margin-top: 5px;" @click="show_dept_selector=true" v-if="form.visible_type==5">
                <div class="flex-1">
                  <div class="fontColorB font-flex-word"  style="width: 230px;" v-if="dept_selected.dept.length>0">
                      <span v-for="item in dept_selected.dept" :key="item.id">{{item.dept_name}},</span>
                  </div>
                  <span v-else class="fontColorC">请选择部门</span>
                </div>
                <i class="el-icon-arrow-down icon-right" style="padding-right:0px ;"></i>
                <div class="inputDc"></div>
              </div>
              <div class="border flex-box-ce" style="margin-top: 5px;" v-if="form.visible_type==4">
                <div class="flex-1">
                  <div class="fontColorB font-flex-word"  style="width: 260px;" v-if="form.special_employee_items.length>0">
                      <span v-for="item in form.special_employee_items" :key="item.id">{{item.name}},</span>
                  </div>
                  <span v-else>请选择成员</span>
                </div>
                <i class="el-icon-arrow-down icon-right"></i>
                <div class="inputDc" @click="selectUserAll(2)"></div>
              </div>
          </el-form-item>
          <el-form-item label="对齐目标">
              <div class="border flex-box-ce">
                <div class="flex-1">
                  <span style="color: #606266;" v-if="alignItem.name">{{alignItem.name}}</span>
                  <span v-else>选择对齐上级目标</span>
                </div>
                <i class="el-icon-error icon-right" v-if="alignItem.name" @click="alignItem={}"></i>
                <i class="el-icon-arrow-down icon-right" v-else></i>
                <div class="inputDc" @click.stop="isShowDateSearch=true" style="right: 30px;"></div>
              </div>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="tabIndex==2">
        <div style="margin: 20px 0">
          <div style="height: 500px;overflow-y: scroll;" class="scroll-bar">
            <div class="flex-box-ce add-task-item" v-for="(item,index) in krs" :key="index">
              <i class="el-icon-delete-solid" @click="deleteKr(index)" style="width: 30px;height: 30px;text-align: center;line-height: 30px;font-size: 16px;opacity: 0;"></i>
              <div class="flex-box-ce flex-1" style="border-bottom: 1px solid #f1f1f1;padding:5px 8px;">
                <div style="font-size: 16px;font-weight: 600;" class="fontColorB">KR{{index+1}}</div>
                <div class="flex-1"><el-input placeholder="请输入可衡量的关键成果" clearable v-model.trim="item.name" maxlength="100" show-word-limit></el-input></div>
                <el-popover placement="bottom" trigger="click">
                    <div>
                      <el-input @input="[(item.weight = isFloor(item.weight))]"  @blur="inputBlur(item)" placeholder="请输入权重(1~100)" v-model="item.weight"><span slot="append">%</span></el-input>
                    </div>
                    <div slot="reference" class="weight"><i class="el-icon-pie-chart"></i><span style="">{{item.weight}}</span>%</div>
                </el-popover>
                <div class="flex-box-ce cursor"  @click="selectUser(2,item,index)">
                  <userImage :user_name="item.userInfo.name" :img_url="item.userInfo.img_url" width="30px" height="30px" fontSize="12"></userImage>
                  <span style="padding-left: 5px;">{{item.userInfo.name}}</span>
                </div>
              </div>
            </div>
            <div class="flex-box-ce flex-box-end" style="margin-top: 20px;padding-left: 36px;">
                <div class="fontColorC hoverBlue" @click="addKr"><i class="el-icon-plus"></i><span style="padding-left: 5px;">添加KR</span></div>
                <div class="flex-1"></div>
<!--                <div class="fontColorC" style="font-size: 12px;margin-right: 20px;">总权重:{{getKrWeight}}%</div>
                <el-button round type="primary" size="mini" @click="pingJun">平均权重</el-button> -->
            </div>
          </div>
        </div>
      </template>
      <template v-if="tabIndex==3">
        <div style="margin: 20px 0">
          <div class="flex-box-ce" style="background-color: #FEF2DF;padding:5px 10px;margin-bottom: 20px;">
            <span style="padding-right: 20px;">是否复制目标下的任务</span>
            <el-radio-group v-model="isCopyTask">
              <el-radio :label="1">复制一级任务</el-radio>
              <el-radio :label="2">复制全部任务</el-radio>
              <el-radio :label="2">不复制</el-radio>
            </el-radio-group>
          </div>
          <div style="height: 500px;overflow-y: scroll;" class="scroll-bar">
            <div style="background-color: #F5F8FA;padding: 10px;border-radius: 5px;margin-bottom: 10px;" v-for="(item,index) in [1,2,3]">
              <div class="flex-box-ce flex-d-center" style="margin-bottom: 10px;">
                <div class="flex-box-ce">
                  <userImage :id="userInfo.id" width="40px" height="40px" :user_name="userInfo.name"></userImage>
                  <span style="margin-left: 10px;font-size: 14px;color: #3F4755;">{{ userInfo.name }}</span>
                </div>
                <el-date-picker :clearable="false" size="small" v-model="date" type="daterange" range-separator="~" start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>
              </div>
              <el-input type="textarea" autosize class="noBorder noBj" v-model="form.name" placeholder="最多能输入300字" clearable></el-input>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex-box-ce flex-box-end" style="margin-top: 20px;">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="addTab(true)" v-if="tabIndex<2">下一步</el-button>
      <el-button type="primary" @click="addTab(false)" v-else>上一步</el-button>
      <el-button type="primary" @click="confirmAddTarget" v-if="tabIndex==2">确 定</el-button>
    </div>


    <EmployeeSelector :isRequired="true" :isChecKedAll="false" :can_select_employee="false" :can_select_dept="true" :multi="true" :selected="dept_selected" :visible.sync="show_dept_selector"@confirm="dept_confirm"/>

    <!-- 对齐目标 -->
    <TargetSearch :visible.sync="isShowDateSearch" @confirm="confirmTarget" :id="alignItem.id"></TargetSearch>

    <!-- 选择负责人 -->
    <EmployeeSelector :is_filtration_creator="false" title="选择人员" :isChecKedAll="false" :isRequired="true" :multi="false" :selected="employee_selected" :visible.sync="show_employee_selector" @confirm="employee_confirm"/>
    <!-- 选择负责人 -->
    <EmployeeSelector :is_filtration_creator="false" title="选择人员" :isRequired="isRequired" :selected="employee_selected_all" :visible.sync="show_employee_selector_all" @confirm="employee_confirm_all"/>

    <!-- 创建周期 -->
    <el-dialog title="选择周期" :visible.sync="isShowZq" :append-to-body="true" width="500px">
      <div style="margin: 15px 0;">
        <div class="flex-box-ce" style="margin-bottom: 16px;">
          <div class="black" style="width: 60px;">周期</div>
          <div class="border flex-box-ce">
           <div class="flex-1" style="color: #606266;">{{addDateParameter.year}}年 {{addDateParameter.name}}</div>
            <i class="el-icon-arrow-down icon-right"></i>
            <SelectPeriod :dateParameter="addDateParameter" @confirm="dateConfirm" :id="2" :isShowAll="false"><div class="inputDc"></div></SelectPeriod>
          </div>
        </div>
        <div class="flex-box-ce">
          <div class="black" style="width: 60px;">日期</div>
          <div>
              <el-date-picker
                v-model="monthDateVal"
                type="daterange"
                range-separator="至"
                :clearable="false"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
          </div>
        </div>
      </div>
      <div class="flex-box-end" style="margin-top: 50px;">
      	<el-button @click="isShowZq=false">取消</el-button>
      	<el-button type="primary" plain @click="activeZq">确定</el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
import {getYearArr,getScopeArr,getBelongType,getDateStr} from '@/okr/utils/auth';
import EmployeeSelector from '@/components/EmployeeSelector';
import TargetType from '@/okr/components/public/TargetType'; //目标类型
import TargetSearch from '@/okr/components/public/TargetSearch'; //对齐目标
import SelectPeriod from '@/okr/components/public/SelectPeriod'; //input组件
export default {
  name: 'CopyTarget',
  components:{TargetSearch,EmployeeSelector,TargetType,SelectPeriod},
  props: {
    title: {
      // 标题
      type: String,
      default: '复制目标'
    },
    visible: {
      // 是否显示组件
      type: Boolean,
      default: false
    },
    id:{ //id  o_id或者kr_Id
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      userInfo: this.$userInfo(),
      getScopeArr:getScopeArr(),
      getBelongType:getBelongType,
      form: {owner_userInfo:{},joiner_userInfos:[],joiner_items:[],special_employee_items:[]},

      isShowDateSearch:false,
      alignItem:{},
      employee_selected_all: { dept: [], employee: [] },
      show_employee_selector_all: false,
      selectUserIndex:0,//选人组件 区分不同地方调用组件的标识
      employee_selected: { dept: [], employee: [] },
      show_employee_selector: false,
      isShowTargetType:false,
      isCopyKr:true,
      isCopyTask:true,
      krs:[],
      selectKrIndex:'',
      selectUserIndex2:0,//选人组件 区分不同地方调用组件的标识

      date:'',
      tabIndex: 1,
      accomplish:0,
      visible_: false,
      yearArr:getYearArr(),
      seasonArr:[{value: 1,label: '第一季度'},{value: 2,label: '第二季度'},{value: 3,label: '第三季度'},{value: 4,label: '第四季度'}],
      halfYearArr:[{value: 1,label: '上半年'},{value: 2,label: '下半年'}],
      monthArr:[],
      sumWeight:0,
      // 部门可见
      deptVisibleName: null,
      dept_selected: {dept: [],employee:[]},
      show_dept_selector: false,
      dept_tree:[],
      depts:[],
      isRequired:true,

      isShowZq:false,
      addDateParameter:{year:this.$moment().format('YYYY'),cycle_type:4,dateId:this.$moment().format('M'),name:`${this.$moment().format('M')}月`},
      monthDateVal:[this.$moment().startOf('month').format('YYYY-MM-DD'),this.$moment().endOf('month').format('YYYY-MM-DD')],//添加目标周期日期

      addDateParameter2:{year:this.$moment().format('YYYY'),cycle_type:4,dateId:this.$moment().format('M'),name:`${this.$moment().format('M')}月`},
      monthDateVal2:[this.$moment().startOf('month').format('YYYY-MM-DD'),this.$moment().endOf('month').format('YYYY-MM-DD')],//添加目标周期日期
    };
  },
  computed:{
    getKrWeight(){
      let sumWeight=0;
      this.krs.forEach(item=>{
        sumWeight+=Number(item.weight)
      })
      this.sumWeight= Math.round(sumWeight)
      return this.sumWeight;
    }
  },
  watch: {
    visible(val) {
      this.visible_ = JSON.parse(JSON.stringify(val));
      if(this.id){
        this.tabIndex= 1;
        this.accomplish=1;
        this.getTargetDateil()
      }
    },
    isShowZq(val){
      if(val){
          this.addDateParameter=JSON.parse(JSON.stringify(this.addDateParameter2));
          this.monthDateVal=JSON.parse(JSON.stringify(this.monthDateVal2));
      }
    },
  },
  methods: {
    activeZq(){
      this.addDateParameter2=JSON.parse(JSON.stringify(this.addDateParameter));
      this.monthDateVal2=JSON.parse(JSON.stringify(this.monthDateVal));
      this.isShowZq=false;
    },
    //选择周期
    dateConfirm(item){
        this.addDateParameter=item;
        let startDate='',endDate=''
        if(item.cycle_type==1){
           startDate = `${item.year}-01-01`
           endDate = `${item.year}-12-31`
        }
        if(item.cycle_type==3){// 上半年，下半年
           let dateStr=item.year+'-'
           startDate = item.year+'-'+(item.dateId==1? '01-01':'07-01')
           endDate = item.year+'-'+(item.dateId==1? '06-30': '12-31')
        }
        if(item.cycle_type==2){// 指定年指定季度的开始结束时间：（某年某季度的开始结束时间）
           let dateStr=item.year+'-'
           let str=item.dateId==1? '01-01':item.dateId==2? '04-01':item.dateId==3? '07-01':item.dateId==4? '10-01':''
           startDate = dateStr+str;
           endDate = this.$moment(this.$moment().format(dateStr+str)).endOf('quarter').format("YYYY-MM-DD")
        }
        if(item.cycle_type==4){// 指定年指定季度的开始结束时间：（某年某季度的开始结束时间）
            startDate = this.$moment(`${item.dateId}/${item.year}`, 'MM/YYYY').add(0, 'M').format('YYYY-MM-DD');
            endDate = this.$moment(`${item.dateId}/${item.year}`, 'MM/YYYY').endOf('M').add(0, 'M').format('YYYY-MM-DD');
        }
        this.monthDateVal=[startDate,endDate]
    },
    isAllEqual(array) {
        if (array.length > 0) {
            return !array.some(function(value, index) {
                return value !== array[0];
            });
        } else {
            return true;
        }
    },
    deleteKr(index){
      this.krs.splice(index,1);
      // this.$nextTick(()=>{
      //   let weights=this.krs.map(item=>{
      //       return Number(item.weight)
      //   })
      //   if(this.isAllEqual(weights)){
      //      let weight=(100/(this.krs.length)).toFixed(2)
      //      this.krs.forEach(item=>{
      //         item.weight=weight
      //      })
      //   }
      // })
    },
    addKr(){
      let sumWeight=0;
      let weights=this.krs.map(item=>{
          sumWeight+=Number(item.weight)
          return Number(item.weight)
      })
      let weight=Math.floor((100/(this.krs.length+1)) * 100) / 100
      let obj={name:'',weight:100,owner_id:this.userInfo.id,userInfo:this.userInfo};
      // if(this.isAllEqual(weights)){
      //     this.krs.forEach(item=>{
      //        item.weight=weight
      //     })
      //     obj.weight=weight;
      // }else{
      //   obj.weight=100-sumWeight>0? 100-sumWeight:0;
      // }
      this.$nextTick(()=>{
        this.krs.push(obj)
      })

    },
    // 部门可见
    dept_confirm(data){
      let dept_ids = [];
      this.dept_selected = data
      data.dept.forEach(element => {
        dept_ids.push(element.dept_id)
      });
      this.form.special_dept_ids=dept_ids;
    },
    pingJun(){
      let weight=Math.floor((100/(this.krs.length)) * 100) / 100
      this.krs.forEach(item=>{
         item.weight=weight
      })
    },
    inputBlur(item) {
      if (item.weight === null||item.weight === undefined||item.weight === '') {
        item.weight = 0;
      }
    },
    isFloor(el) {
      var obj = event.target;
      el = el
        .replace('.', '$#$') //把第一个字符'.'替换成'$#$'
        .replace(/\./g, '') //把其余的字符'.'替换为空
        .replace('$#$', '.') //把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, '') //只能输入数字和'.'
        .replace(/^\./g, '') //不能以'.'开头
        .replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1'); //只保留2位小数
      if(el=='01'||el=='02'||el=='03'||el=='04'||el=='05'||el=='06'||el=='07'||el=='08'||el=='09'){
        el=el[1]
      }
      return el || null;
    },
    employee_confirm_all(val){
      let users=val.employee
      if(this.selectUserIndex==1){
        this.form.joiner_items=users;
        this.form.joiner_ids=users.map(item=>{
          return item.id
        })
      }else if(this.selectUserIndex==2){
        this.form.special_employee_items=users;
        this.form.special_employee_ids=users.map(item=>{
          return item.id
        })
      }
    },
    selectUserAll(index){
      if(index==1){//参与者
         this.isRequired=false;
         this.employee_selected_all.employee=this.form.joiner_items
      }else if(index==2){//可见范围
         this.isRequired=true;
         this.employee_selected_all.employee=this.form.special_employee_items
      }
      this.selectUserIndex=index;//选人组件 区分不同地方调用组件的标识
      this.show_employee_selector_all=true;
    },
    selectUser(type,item,index){
      if(type==2){
        this.employee_selected.employee=[item.userInfo];
        this.selectKrIndex=index;
      }else{
        this.employee_selected.employee=[this.form.owner_userInfo];
      }
      this.selectUserIndex2=type;
      this.show_employee_selector=true;
    },
    employee_confirm(val){
      let user=val.employee[0]
      if(this.selectUserIndex2==1){
        this.form.owner_userInfo=user;
        this.form.owner_id=user.id;
      }else{
        this.krs[this.selectKrIndex].userInfo=user
        this.krs[this.selectKrIndex].owner_id=user.id
      }
    },
    confirmAddTarget(){
        let isError=false;
        let krs=[];
        this.krs.some(item=>{
            krs.push({
              name:item.name,
              owner_id:item.owner_id,
              weight:item.weight*100,
            })
            if(!item.name){
              this.$message.error("KR关键成果不能为空");
              isError=true;
              return true
            }
        })
        if(isError){return false}
        // if(this.sumWeight!=100){
        //    this.$message.error("KR权重之和必须为100%");
        //    return false
        // }
        let params={
          obj_name:this.form.name, //目标名称 最多100个字符
          obj_owner_id:this.form.owner_id, //负责人ID
          kr:JSON.stringify(krs), //见下面json示例
          cycle_type:this.addDateParameter2.cycle_type, //循环周期 1年 2 季度 3半年 4月度
          visible_type:this.form.visible_type, //可见范围 1 全公司 2 相关人员 3 下属 4指定人员
          special_employee_ids:JSON.stringify(this.form.special_employee_ids), //相关人员可见时，必填，由员工ID组成的json数组
          special_dept_ids:JSON.stringify(this.form.special_dept_ids), //相关人员可见时，必填，由员工ID组成的json数组
          join_ids:this.form.joiner_ids.toString(),
          belong_type:this.form.belong_type, //归属类型 1 公司 2 部门 3 团队 4 个人
          dept_id:this.form.dept_id,//belong_type为2时
          start_time:this.monthDateVal2[0], //开始时间 格式示例2022-05-06
          end_time:this.monthDateVal2[1], //结束时间 格式示例2022-05-06
        }
        if(this.alignItem.id&&this.form.kr_id){
          params.kr_id=this.form.kr_id; //对齐的KR的ID
        }
        if(this.alignItem.id&&this.form.o_id){
          params.o_id=this.form.o_id; //对齐的KR的ID
        }
        if(this.addDateParameter2.cycle_type==1){
          params.year=this.addDateParameter2.year
          params.quarter=0
        }
        if(this.addDateParameter2.cycle_type==2){
          params.year=this.addDateParameter2.year
          params.quarter=this.addDateParameter2.dateId
        }
        if(this.addDateParameter2.cycle_type==3){
          params.year=this.addDateParameter2.year
          params.half_year=this.addDateParameter2.dateId
        }
        if(this.addDateParameter2.cycle_type==4){
          params.year=this.addDateParameter2.year
          params.month=this.addDateParameter2.dateId
        }
        // console.log(params)
        // return false
        this.$axiosUser('POST', '/api/pro/okr/obj/create', params).then(res => {
          this.$message.success("复制成功");
           this.$emit('confirm', {});
           this.close();
        }).finally(()=>{
           this.isShowAdd=false;
        });
    },
    confirmTarget(e){
        this.form.o_id='';
        this.form.kr_id='';
        this.alignItem=e.item;
        if(e.type==1){
          this.form.o_id=e.item.id
        }else if(e.type==2){
          this.form.kr_id=e.item.id
        }
    },
    getTargetDateil(){
      this.$axiosUser('get', '/api/pro/okr/obj/detail', {object_id:this.id}).then(res => {
          let data=res.data.data;
          data.owner_userInfo=this.$getEmployeeMapItem(data.owner_id);
          data.half_year=data.half_year||1
          data.quarter=data.quarter||1
          data.month=data.month||1
          data.dateStr=getDateStr(data)
          if(data.visible_type==5){//部门可见
            this.dept_tree = this.$getCache('dept_tree');
            data.special_dept_ids.forEach(id=>{
                this.getDept(id,this.dept_tree);
            })
          }
          this.dept_selected.dept = this.depts
          data.joiner_items=data.joiner_ids.map(id=>{
            return this.$getEmployeeMapItem(id);
          })
          data.special_employee_items=data.special_employee_ids.map(id=>{
            return this.$getEmployeeMapItem(id);
          })
          data.krs.map(item=>{
            item.userInfo=this.$getEmployeeMapItem(item.owner_id)
          })
          this.addDateParameter2={year:data.year,cycle_type:data.cycle_type,dateId:getDateStr(data,true),name:data.dateStr};
          this.monthDateVal2=[data.start_time,data.end_time]
          this.krs=data.krs;
          this.form=data
      })
    },
    //设置默认部门
    getDept(id, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (id == arr[i].id) {
          this.depts.push({
            dept_id: arr[i].id,
            dept_name: arr[i].name
          })
          break;
        } else if (arr[i].children) {
          this.getDept(id, arr[i].children);
        }
      }
    },
    selectTargetType(item){
      this.form.belong_type=item.id; //归属类型 1 公司 2 部门 3 团队 4 个人
      this.form.dept_id=item.dept_id
    },
    //打开Dialog的回调，用刷每次打开都初始化selected
    openDialog() {
      let month=[];
      for (let i = 1; i < 13; i++) {
        month.push({ value: i, label: i+'月'})
      }
      this.monthArr=month;
    },
    addTab(is){
      if(is){
        if(!this.form.name){
           this.$message.error("目标名称不能为空");
           return false
        }
        if(this.form.visible_type==4&&this.form.special_employee_ids.length==0){
            this.$message.error("请选择指定成员");
            return false
        }
        if(this.form.visible_type==5&&this.form.special_dept_ids.length==0){
            this.$message.error("请选择指定部门");
            return false
        }

        this.tabIndex++;
        this.accomplish++;
      }else{
        this.tabIndex--;
        this.accomplish--;
      }
    },
    close_before(done) {
      this.close();
      done();
    },
    //关闭||清空数据
    close() {
      this.$emit('update:visible', false);
      this.alignItem={};
      this.employee_selected_all= { dept: [], employee: [] };
      this.show_employee_selector_all= false;
      this.selectUserIndex=0;//选人组件 区分不同地方调用组件的标识
      this.employee_selected= { dept: [], employee: [] };
    },
  }
};
</script>

<style scoped lang="scss">
   .add-task-item{
     position: relative;
   }
   .add-task-item ::v-deep input {
       border: none;
       padding-right: 80px;
   }
   .add-task-item:hover i{
     cursor: pointer;
     opacity: 1 !important;
   }
  .weight{
    width: 90px;
    margin-right: 5px;
    padding: 5px;
    border: 1px dotted #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .weight:hover{
    border: 1px dotted #ccc;
  }
  .weight span{
    display: inline-block;
    width: 50px;
    text-align: center;
    color: #e6a23c;
  }
  .form{
    margin: 30px 0;
  }
  .inputDc {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    cursor: pointer;
  }

/* 方法二 */
.tabActive{
  background-color: #409EFF !important;
  color: #fff !important;
}
.accomplish{
  background-color: #67c23a !important;
  color: #fff !important;
}
.stepNew {
  margin: 0px auto;
}
.stepNew div {
  width: 240px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  vertical-align: text-bottom;
  font-size: 15px;
}
.border {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #C0C4CF;
  font-size: inherit;
  height: auto;
  outline: 0;
  padding: 0 15px;
  padding-right: 10px;
  line-height: 34px;
  width: 300px;
  position: relative;
  cursor: pointer;
}
.border .font-flex-word{
  color: #606266;
}
.border:hover{
  border: 1px solid #c0c4cc;
}
/*  */
.stepOneN {
  position: relative;
  background: #edeff5;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.stepOneN span:nth-of-type(1) {
  border-width: 18px 0 18px 18px;
  border-style: solid;
  border-color: #fff transparent #fff transparent;
  position: absolute;
  top: 0;
  right: 0;
}

/*  */
.stepTwoN {
  position: relative;
  background: #edeff5;
}

.stepTwoN span:nth-of-type(1) {
  border-width: 18px 0 18px 18px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.stepTwoN span:nth-of-type(2) {
  border-width: 18px 0 18px 18px;
  border-style: solid;
  border-color: #fff transparent #fff transparent;
  position: absolute;
  top: 0;
  right: 0;
}
/*  */
.stepThreeN {
  position: relative;
  background: #edeff5;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.stepThreeN span:nth-of-type(1) {
  border-width: 18px 0 18px 18px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.noBj ::v-deep .el-input__inner,.noBj ::v-deep .el-textarea__inner {
  background-color: #F5F8FA;
}
::v-deep .el-input-group__append {
  padding: 0 10px;
}
::v-deep .el-collapse-item__header {
  padding: 10px;
  height: auto;
  line-height: normal;
}
::v-deep .el-collapse-item__content {
  padding: 0;
}

::v-deep .el-dialog__body {
  padding: 20px;
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}
.noBorder ::v-deep .el-input__inner, ::v-deep .el-textarea__inner {
  border: none;
  border-bottom: 1px solid #DCDFE6;
  border-radius: 0px;
}
</style>