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

<template>
  <el-dialog :title="title" :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" top="5%" append-to-body  width="660px">
    <div style="max-height: 600px;overflow-y: scroll;" class="scroll-bar">
      <el-form label-width="100px" :model="form">
        <div class="add-task-title">基本信息</div>
        <el-form-item label="任务名称">
          <el-input v-model="form.name"  maxlength="100" show-word-limit class="w270" type="textarea" autosize placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
            <div class="flex-box-ce cursor" @click="showSelectorUser(1)">
               <userImage :id="owner_userInfo.id" fontSize="14" width="36px" height="36px" :user_name="owner_userInfo.name"></userImage>
               <span style="margin-left: 10px;font-size: 14px;color: #3F4755;">{{ owner_userInfo.name }}</span>
           </div>
        </el-form-item>
        <el-form-item label="起止时间" style="margin-right: 20px;">
            <el-date-picker :picker-options="instantPickerOptions" v-model="form.date" :clearable="false" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['8:00:00', '18:00:00']"></el-date-picker>
        </el-form-item>
        <el-form-item label="目标值">
            <el-input class="w270" placeholder="请输入数值" v-model="form.target" @input="form.target = form.target.replace(/[^\d]/g, '');">
              <el-select style="width: 100px;" v-model="form.unit" slot="append" placeholder="请选择">
                <el-option  v-for="item in unitList" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-input>
        </el-form-item>
        <template v-if="isShowGl">
          <el-form-item label="母任务">
            <div class="cursor" style="border-radius: 4px;border: 1px solid #dcdfe6;line-height: 34px;width: 400px;padding: 0 15px;">
                <div class="fontColorC" v-if="!target_plan_id" @click="isShowRelevanceTask=true">请选择所属任务</div>
                <div class="showUpdate" v-else ><span class="cursor" @click="isShowRelevanceTask=true">{{motherTaskName}}</span> <i class="el-icon-error cursor"  @click="clearRelevanceTask"></i></div>
            </div>
          </el-form-item>
          <el-form-item label="所属KR/项目">
            <div class="cursor" style="border-radius: 4px;border: 1px solid #dcdfe6;line-height: 34px;width: 400px;padding: 0 15px;">
              <Tooltip preHtml="更改所属KR/项目:请先取消关联母任务" v-if="target_plan_id">
                  <span class="fontColorC">{{krName||'更改所属KR:请先取消关联母任务'}}</span>
              </Tooltip>
              <template v-else>
                <div class="fontColorC" v-if="!target_id" @click="isShowDateSearch=true">请选择所属KR/项目</div>
                <div class="showUpdate" v-else>
                  <span class="blue">{{selectTarget_type==2? 'KR':selectTarget_type==4? '项目':'里程碑'}}:</span>
                  <span class="cursor" @click="isShowDateSearch=true">{{krName}}</span>
                  <i class="el-icon-error cursor"  @click="target_id=0"></i>
                </div>
              </template>
            </div>
          </el-form-item>
        </template>

        <div style="text-align: right;">
          <span class="blue cursor" v-if="!isShowGd" @click="isShowGd=!isShowGd">更多属性<i class="el-icon-arrow-down"></i></span>
          <span class="blue cursor" v-else @click="isShowGd=!isShowGd">收起 <i class="el-icon-arrow-up"></i></span>
        </div>
        <CollapseTransition>
        <!-- 任务要求 -->
          <div v-show="isShowGd">
            <el-form-item label="可见范围">
              <el-select class="w270" v-model="form.visible_type" placeholder="请选择">
                <el-option label="全公司" :value="1"></el-option>
                <el-option label="指定部门" :value="5"></el-option>
                <el-option label="相关成员" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="dept_ids" v-if="form.visible_type==5">
              <div class="w270" style="position: relative;">
                  <el-input auto-complete="off" v-model="deptVisibleName" placeholder="请选择部门"></el-input>
                  <div @click="show_dept_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
              </div>
            </el-form-item>
            <el-form-item label="进展反馈">
              <div class="border flex-box-ce">
                <div class="flex-1"></div>
                 <Feedback @confirm="feedbackTime" style="width: 100%;">
                  <div class="inputDc" :class="isShowGd?'bj':''">
                     <span class="fontColorD" v-if="!form.feedbackTime">请选择反馈时间</span><span v-else>{{form.feedbackTime}}</span>
                  </div>
                 </Feedback>
                 <i class="el-icon-arrow-down icon-right" v-if="!form.feedbackTime"></i>
                 <i class="el-icon-error cursor" v-else @click="form.feedbackTime=''"></i>
              </div>
            </el-form-item>
            <el-form-item label="审批人">
              <div class="flex-box-ce cursor" v-if="reviewer_userInfo.id" @click="showSelectorUser(2)">
                   <userImage :id="reviewer_userInfo.id" fontSize="14" width="36px" height="36px" :user_name="reviewer_userInfo.name"></userImage>
                   <span style="margin-left: 10px;font-size: 14px;color: #3F4755;">{{ reviewer_userInfo.name }}</span>
              </div>
              <i class="el-icon-plus cursor" v-else @click="showSelectorUser(2)"></i>
            </el-form-item>
            <el-form-item label="预估工时">
                <el-input class="w270" placeholder="请输入工时" v-model="form.wh" @input="form.wh = form.wh.replace(/[^\d]/g, '');"><div slot="append">小时</div></el-input>
            </el-form-item>
            <el-form-item label="参与人">
                <div class="cursor" style="border-radius: 4px;border: 1px solid #dcdfe6;line-height: 34px;width: 400px;padding: 0 15px;" @click="show_employee_selector_all=true">
                  <div class="flex-box-ce fontColorB font-flex-word" v-if="employee_selected_all.employee.length>0">
                      <span v-for="item in employee_selected_all.employee" :key="item.id"> {{item.name}},</span>
                  </div>
                  <div v-else style="color: #C0C4CF;">请选择参与人员</div>
                </div>
            </el-form-item>
            <el-form-item label="任务描述">
              <el-input v-model="form.content" placeholder="请输入详情" class="w270"  maxlength="500" show-word-limit type="textarea" clearable></el-input>
            </el-form-item>
            <el-form-item label="附件">
                <uploadOss :file-list="fileList" :headers="$xtoken" :action="$action" :limit="3" :accept="$acceptImgFile" :multiple="true" :on-success="handleSuccess" :before-upload="beforeFilesUpload">
                     <span class="fontColorC"><i class="el-icon-paperclip green" style="padding-right: 5px;"></i>请添加附件</span>
                </uploadOss>
                 <div v-if="files.length>0" class="flex-box-ce flex-d-wrap">
                     <div class="files-box flex-box-ce" v-for="(item,index) in files" :key="index">
                       <el-image v-if="item.type=='img'" style="width: 30px; height: 30px;cursor: pointer;" :src="item.file" :preview-src-list="[item.file]"></el-image>
                       <span v-else ><img  @click="$onFilePreView(item.file)" style="width: 30px; height: 30px;margin-top: 14px;cursor: pointer;" src="static/images/excel_icon.png"/></span>
                       <Tooltip :preHtml="item.name">
                           <div style="margin-left: 10px;width: 120px;">{{item.name}}</div>
                       </Tooltip>
                      <Tooltip preHtml="删除">
                           <i class="el-icon-error cursor" @click="deleteFlie(index)"></i>
                       </Tooltip>
                     </div>
                 </div>
            </el-form-item>
          </div>
        </CollapseTransition >
      </el-form>
    </div>
    <div class="flex-box-ce flex-box-end" style="margin-top: 20px;">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm" :disabled="wait">确 定</el-button>
    </div>

    <!-- 关联任务 -->
    <RelevanceTask :visible.sync="isShowRelevanceTask"  :id="target_plan_id" @confirm="ActiveRelevanceTask"></RelevanceTask>

    <!-- 对齐目标 -->
    <TargetSearch :visible.sync="isShowDateSearch" title="所属KR" :showSelectType="3" :showType="2" @confirm="confirmTarget"></TargetSearch>

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

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

    <ShowImg :visible.sync="isShowImg" :imgUrl="imgUrl"></ShowImg>
    <EmployeeSelector :isChecKedAll="false" :can_select_employee="false" :can_select_dept="true" :multi="true" :selected="dept_selected" :visible.sync="show_dept_selector"@confirm="dept_confirm"/>
  </el-dialog>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';
import Feedback from '@/okr/components/public/Feedback'; //反馈时间组件
import CollapseTransition from '@/okr/utils/collapse-transition';
import uploadOss from '@/components/upload';
import TargetSearch from '@/okr/components/public/TargetSearch'; //反馈时间组件
import ShowImg from '@/okr/components/public/ShowImg'; //反馈时间组件
import Tooltip from '@/components/Tooltip'; //鼠标悬浮显示文字
import RelevanceTask from '@/okr/components/public/RelevanceTask'; //关联任务
import moment from 'moment' // 时间库
export default {
  name: 'AddTask',
  components:{EmployeeSelector,CollapseTransition,uploadOss,Feedback,ShowImg,Tooltip,TargetSearch,RelevanceTask},
  props: {
    title: {
      // 标题
      type: String,
      default: '添加任务'
    },
    visible: {
      // 是否显示组件
      type: Boolean,
      default: false
    },
    target_type:{ //	0-不绑定对象 1-目标 2-KR 3-计划(分解计划下的子计划的时候) 4-项目 5-里程碑
      type: Number,
      default: 2
    },
    isShowGl:{//是否显示关联
      type: Boolean,
      default: false
    },
    id:{ //	绑定的对象id 跟对象种类配对使用
      type: Number,
      default: 0,
    },
    initDate:{
      type: Array,
      default:()=>{
        return [];
      }
    }
  },
  data() {
    return {
      wait:false,
      owner_userInfo: this.$userInfo(),//负责人
      reviewer_userInfo:{},//审批人
      isShowGd:false,
      visible_:false,
      unitList:this.$getCache('unitList'),
      files: [], //文件附件
      fileList:[],

      isShowImg:false,
      imgUrl:'',//显示图片Url
      form: {
          name:	'',//	是 计划名
          owner_id:	 this.$userInfo().id,// 是 integer	负责人id
          level	:	'1',// 是	string	优先等级 1-最高 2-高 3-中 4-低 5-非常低
          visible_type:	1,//是	string	可见范围种类 1-全公司 2-相关成员 5-指定部门可见
          target_type:	this.target_type,//是	string	计划绑定的对象种类 1-目标 2-KR 3-计划(分解计划下的子计划的时候)
          target_id:	this.id,//是	integer	绑定的对象id 跟对象种类配对使用
          date:[`${this.$moment().format('YYYY-MM-DD')} 00:00:00`,`${this.$moment().format('YYYY-MM-DD')} 23:59:00`],
          start_date:	`${this.$moment().format('YYYY-MM-DD')} 00:00:00`,//是	string	计划开始日期 格式:2022-01-01
          end_date:	`${this.$moment().format('YYYY-MM-DD')} 23:59:00`,//是	string	计划结束日期 格式:2022-01-01

          content:	'',//否	string	计划描述,没有的时候不要上传这个字段,空字符也不行
          reviewer_id:	'',//否	integer	审批者id,没有的时候不要上传这个字段,空字符也不行
          wh:	'',//否	string	预估工时,没有填写的时候不要上传这个字段,空字符也不行
          dept_ids:	'',//	否	string	部门id列表,以逗号分割,只有可见范围种类为指定部门可见才需要上传这个字段,没有的时候不要上传这个字段,空字符也不行
          joiner_ids:	'',//	否	string	参与者id列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
          files:	'',//	否	string	附件列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
          target:	'',//	否	integer	量化配置的目标值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行
          unit:	'元',//	否	string	量化配置的单位值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行

          feedbackTime:'',
          scope_type:	'',//	否	string	反馈配置的时间种类 1-每天 2-每个工作日 3-每周 4-每月 5-今天 6-明天
          special_date:	'',//	否	string
          daily_time:	'',//	否	string	当反馈配置的时间种类为每天的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
          work_day_time:	'',//	否	string	当反馈配置的时间种类为每个工作日的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
          week_day:	'',//	否	integer	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-7之间 1-周一 2-周二 3-周三 4-周四 5-周五 6-周六 7-周日
          week_day_time:	'',//	否	string	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
          month_day:	'',//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-31之间,分别代表每月的几号
          month_day_time:	'',//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
      },

      employee_selected: { dept: [], employee: [] },
      show_employee_selector: false,
      employee_selected_all: { dept: [], employee: [] },
      show_employee_selector_all: false,
      selectUserIndex:1,

      // 部门可见
      deptVisibleName: null,
      dept_selected: {dept: [],employee:[]},
      show_dept_selector: false,
      instantPickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", [`${moment().format('YYYY-MM-DD')} 00:00:00`,`${moment().format('YYYY-MM-DD')} 23:59:00`]);
            }
          },
          {
            text: "明天",
            onClick(picker) {
              picker.$emit("pick", [`${moment().add(1, "days").format('YYYY-MM-DD')} 00:00:00`,`${moment().add(1, "days").format('YYYY-MM-DD')} 23:59:00`]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              let start_date=moment().week(moment().week()).startOf('isoweek').format('YYYY-MM-DD 00:00:00')
              let end_date=moment().week(moment().week()).endOf('isoweek').format('YYYY-MM-DD 23:59:00')
              picker.$emit("pick", [start_date, end_date]);
            }
          },
          {
            text: "下周",
            onClick(picker) {
              let start_date=moment().week(moment().week() + 1).startOf('isoweek').format('YYYY-MM-DD 00:00:00')
              let end_date=moment().week(moment().week() + 1).endOf('isoweek').format('YYYY-MM-DD 23:59:00')
              picker.$emit("pick", [start_date, end_date]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              let start_date=moment().startOf('month').format('YYYY-MM-DD 00:00:00')
              let end_date=moment().endOf('month').format('YYYY-MM-DD 23:59:00')
              picker.$emit("pick", [start_date, end_date]);
            }
          },
          {
            text: "下个月",
            onClick(picker) {
              let start_date=moment().add(1, "month").startOf('month').format('YYYY-MM-DD 00:00:00')
              let end_date=moment().add(1, "month").endOf('month').format('YYYY-MM-DD 23:59:00')
              picker.$emit("pick", [start_date, end_date]);
            }
          }
        ]
      },

      //关联母任务
      isShowRelevanceTask:false,
      motherTaskName:'',
      target_plan_id:0,

      //关联KR
      target_id:0,
      krName:'',
      isShowDateSearch:false,
      selectTarget_type:0,//选择的关联的类型
    };
  },
  watch: {
    visible(val) {
      this.visible_ = JSON.parse(JSON.stringify(val));
      if(val){
        this.initData();
      }
    },
    'form.date'(newValue, oldValue) {
        if(newValue){
          this.form.start_date=newValue[0];
          this.form.end_date=newValue[1];
        }else{
          this.form.start_date='';
          this.form.end_date='';
        }
    },
    isShowGd(val){
      if(val){
        this.form.unit='元'
      }
    }
  },
  methods: {
    //获取KR的名称
    getTaskDateil(id){
       this.$axiosUser('get', '/api/pro/okr/plan/info',{plan_id:id}).then(res => {
         let data=res.data.data
         if(data.kr_id){ //kr
           this.krName=data.kr_name;
         }else if(data.milestone_id){ //里程碑
           this.krName=data.milestone_name;
         }else if(data.project_id){ //项目
           this.krName=data.project_name;
         }
       })
    },
    clearRelevanceTask(){
      this.motherTaskName='';
      this.target_plan_id=0;
    },
    //关联母任务
    ActiveRelevanceTask(item){
      this.getTaskDateil(item.id)
      this.motherTaskName=item.name;
      this.target_plan_id=item.id;

      this.target_id=0;
    },
    confirmTarget(item){
      this.krName=item.item.name;
      this.target_id=item.item.id;
      this.selectTarget_type=item.type;
    },
    initData(){
      this.isShowGd=false;
      this.files= []; //文件附件
      this.fileList=[];
      this.krName='';
      this.target_id=0;
      this.selectTarget_type=0;
      this.motherTaskName='';
      this.target_plan_id=0;
      this.isShowImg=false;
      this.imgUrl='';//显示图片Url
      this.form= {
          name:	'',//	是 计划名
          owner_id:	 this.$userInfo().id,// 是 integer	负责人id
          level	:	'1',// 是	string	优先等级 1-最高 2-高 3-中 4-低 5-非常低
          visible_type:	1,//是	string	可见范围种类 1-全公司 2-相关成员 5-指定部门可见
          target_type:	this.target_type,//是	string	计划绑定的对象种类 1-目标 2-KR 3-计划(分解计划下的子计划的时候)
          target_id:	this.id,//是	integer	绑定的对象id 跟对象种类配对使用
          date:[`${this.$moment().format('YYYY-MM-DD')} 00:00:00`,`${this.$moment().format('YYYY-MM-DD')} 23:59:00`],
          start_date:	`${this.$moment().format('YYYY-MM-DD')} 00:00:00`,//是	string	计划开始日期 格式:2022-01-01
          end_date:	`${this.$moment().format('YYYY-MM-DD')} 23:59:00`,//是	string	计划结束日期 格式:2022-01-01

          content:	'',//否	string	计划描述,没有的时候不要上传这个字段,空字符也不行
          reviewer_id:	'',//否	integer	审批者id,没有的时候不要上传这个字段,空字符也不行
          wh:	'',//否	string	预估工时,没有填写的时候不要上传这个字段,空字符也不行
          dept_ids:	'',//	否	string	部门id列表,以逗号分割,只有可见范围种类为指定部门可见才需要上传这个字段,没有的时候不要上传这个字段,空字符也不行
          joiner_ids:	'',//	否	string	参与者id列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
          files:	'',//	否	string	附件列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
          target:	'',//	否	integer	量化配置的目标值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行
          unit:	'元',//	否	string	量化配置的单位值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行

          feedbackTime:'',
          scope_type:	'',//	否	string	反馈配置的时间种类 1-每天 2-每个工作日 3-每周 4-每月 5-今天 6-明天
          special_date:	'',//	否	string
          daily_time:	'',//	否	string	当反馈配置的时间种类为每天的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
          work_day_time:	'',//	否	string	当反馈配置的时间种类为每个工作日的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
          week_day:	'',//	否	integer	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-7之间 1-周一 2-周二 3-周三 4-周四 5-周五 6-周六 7-周日
          week_day_time:	'',//	否	string	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
          month_day:	'',//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-31之间,分别代表每月的几号
          month_day_time:	'',//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
      };
      if(this.initDate.length>0){
        let initDate=this.initDate;
        this.form.date=[`${initDate[0]} 00:00:00`,`${initDate[1]} 23:59:00`];
      }
      this.owner_userInfo=this.$userInfo();//负责人
      this.reviewer_userInfo={};//审批人
      this.employee_selected= { dept: [], employee: [] };
      this.show_employee_selector= false;
      this.employee_selected_all= { dept: [], employee: [] };
      this.show_employee_selector_all= false;
      this.selectUserIndex=1;
      // 部门可见
      this.deptVisibleName= null;
      this.dept_selected= {dept: [],employee:[]};
      this.show_dept_selector= false;
      this.$forceUpdate();
    },
    deleteFlie(index){
      this.files.splice(index,1);
      this.fileList.splice(index,1);
    },
    handleSuccess(response, file, fileList) {
      this.fileList=fileList;
      let files=JSON.parse(JSON.stringify(fileList));
      let fileListData=files.map(e=>{
        let type=e.name.split('.');
        type=type[type.length-1]
        let str='';
        if(type=='jpeg'||type=='png'||type=='jpg'||type=='JPEG'||type=='PNG'||type=='JPG'){
          str='img'
        }else{
          str='file'
        }
        let obj={
          name:e.name,
          file:e.url,
          type:str,
        }
        return obj
      })
      this.files = fileListData;
    },
    // 图片上传
    beforeUpload(file) {
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 <5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpeg|png|jpg 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    beforeFilesUpload(file) {
      if(file.type.indexOf('image')!=-1){
        return this.beforeUpload(file)
      }
      const $ext_list = ['xlsx', 'xls', 'doc', 'docx', 'pdf', 'txt','XLSX','XLS','DOC','DOCX','PDF','TXT'];
      const isLt2M = file.size / 1024 / 1024 < 5;
      let len = file.name.split('.').length - 1;
      const $ext_name = file.name.split('.')[len];
      let isFile=$ext_list.indexOf($ext_name) != -1;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过5MB');
      }
      if (!isFile) {
        this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls,doc,docx,pdf,txt）');
      }
      return isFile && isLt2M;
    },


    //反馈时间
    feedbackTime(item){
      this.form.scope_type=item.scope_type;
      if(item.scope_type==1){ //每日
        this.form[item.timeStr]=item.time
        this.form.feedbackTime='每天 '+item.time
      }else if(item.scope_type==3||item.scope_type==4){ //每周||每月
        this.form[item.dayStr]=item.scope_type_two
        this.form[item.timeStr]=item.time
        this.form.feedbackTime=`${item.scope_type==3? '每周/':'每月'}${this.returnTimeStr(item)} ${item.time}`
      }else{ //其他
        this.form.special_date=item.special_date
        this.form.feedbackTime=item.special_date
      }
    },
    returnTimeStr(item){
        let str='';
        if(item.scope_type==3){
          switch(item.scope_type_two){
            case 1:
              str='周一'
              break
            case 2:
              str='周二'
              break
            case 3:
              str='周三'
              break
            case 4:
              str='周四'
              break
            case 5:
              str='周五'
              break
            case 6:
              str='周六'
              break
            case 7:
              str='周日'
              break
          }
        }else{
          str=item.scope_type_two+'号'
        }
        return str
    },
    showSelectorUser(index){
      if(index==1){ //负责人
          this.employee_selected.employee=[this.owner_userInfo];
      }else if(index==2){ //审批人
          this.employee_selected.employee=[this.reviewer_userInfo];
      }
      this.selectUserIndex=index;
      this.show_employee_selector=true;
    },
    // 部门可见
    dept_confirm(data){
      this.dept_selected = {dept: [],employee:[]};
      let dept_ids = [];
      this.form.dept_ids='';
      this.deptVisibleName = ''
      if (data.dept !== null && data.dept.length != 0) {
        this.dept_selected = data
        data.dept.forEach(element => {
    			dept_ids.push(element.dept_id)
    			this.deptVisibleName += (element.dept_name+',')
        });
      }
      this.form.dept_ids=dept_ids.toString();
    },
    employee_confirm_all(val){
      this.employee_selected_all.employee=val.employee;
      let joiner_ids=val.employee.map(item=>{
        return item.id
      })
      this.form.joiner_ids=joiner_ids.toString()
    },
    employee_confirm(val){
      let user=val.employee[0]
      this.employee_selected.employee=val.employee;
      if(this.selectUserIndex==1){ //创建目标的负责人
          this.owner_userInfo=user;
          this.form.owner_id=user.id
      }else if(this.selectUserIndex==2){ //创建目标的kr负责人
          if(user){
            this.reviewer_userInfo=user;
            this.form.reviewer_id=user.id
          }else{
            this.reviewer_userInfo={};
            this.form.reviewer_id=''
          }
      }
    },
    addTab() {
      this.tabIndex++;
      this.accomplish++;
    },
    close_before(done) {
      this.close();
      done();
    },
    //关闭||清空数据
    close() {
      this.$emit('update:visible', false);
    },
    // 确定
    confirm() {
      if(!this.form.name){
        this.$message.error('请输入任务名称');
        return false;
      }
      if(this.form.visible_type==5&&this.form.dept_ids.length==0){
        this.$message.error('请选择可见部门');
        return false;
      }
      let params={
          name:	this.form.name,//	是 计划名
          owner_id:	 this.form.owner_id,// 是 integer	负责人id
          level	:	'1',// 是	string	优先等级 1-最高 2-高 3-中 4-低 5-非常低
          visible_type:	this.form.visible_type,//是	string	可见范围种类 1-全公司 2-相关成员 5-指定部门可见
          target_type:	this.target_type,//是	string	计划绑定的对象种类 1-目标 2-KR 3-计划(分解计划下的子计划的时候)
          target_id:	this.id,//是	integer	绑定的对象id 跟对象种类配对使用
          start_date:	this.form.start_date,//是	string	计划开始日期 格式:2022-01-01
          end_date:	this.form.end_date,//是	string	计划结束日期 格式:2022-01-01
      }
      if(this.isShowGl){
        if(this.target_id){ //kr
          params.target_id=this.target_id;
          params.target_type=this.selectTarget_type;
        }else{
          params.target_type=0;
        }
        if(this.target_plan_id){ //母任务
           params.target_id=this.target_plan_id;
           params.target_type=3;
        }
      }

      let filterData={
        content:this.form.content,//否	string	计划描述,没有的时候不要上传这个字段,空字符也不行
        reviewer_id:	this.form.reviewer_id,//否	integer	审批者id,没有的时候不要上传这个字段,空字符也不行
        wh:	this.form.wh,//否	string	预估工时,没有填写的时候不要上传这个字段,空字符也不行
        dept_ids:this.form.dept_ids,//	否	string	部门id列表,以逗号分割,只有可见范围种类为指定部门可见才需要上传这个字段,没有的时候不要上传这个字段,空字符也不行
        joiner_ids:	this.form.joiner_ids,//	否	string	参与者id列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
        // files:	this.form.files,//	否	string	附件列表,以逗号分割,没有的时候不要上传这个字段,空字符也不行
        target:	this.form.target,//	否	integer	量化配置的目标值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行
        unit:	this.form.unit,//	否	string	量化配置的单位值,只有配置了量化配置的时候需要上传,没有的时候不要上传这个字段,空字符也不行

        feedbackTime:this.form.feedbackTime,
        scope_type:	this.form.scope_type,//	否	string	反馈配置的时间种类 1-每天 2-每个工作日 3-每周 4-每月 5-今天 6-明天
        special_date:	this.form.special_date? this.form.special_date+':00':'',//	否	string
        daily_time:	this.form.daily_time,//	否	string	当反馈配置的时间种类为每天的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
        work_day_time:	this.form.work_day_time,//	否	string	当反馈配置的时间种类为每个工作日的时候必须传入,否则不要上传这个字段,空字符也不行. 数据格式:23:30:00
        week_day:	this.form.week_day,//	否	integer	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-7之间 1-周一 2-周二 3-周三 4-周四 5-周五 6-周六 7-周日
        week_day_time:	this.form.week_day_time,//	否	string	当反馈配置的时间种类为每周的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
        month_day:	this.form.month_day,//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行. 数值在1-31之间,分别代表每月的几号
        month_day_time:	this.form.month_day_time,//	否	string	当反馈配置的时间种类为每月的时候必须传入,否则不要上传这个字段,空字符也不行.数据格式:23:30:00
      }
      filterData=this.filterData(filterData)
      let files=this.files.map(item=>{
        return item.file
      })
      if(this.files.length>0){
         filterData.files=files.toString();
      }

      params=Object.assign({}, params, JSON.parse(JSON.stringify(filterData)))
      this.wait=true;
      this.$axiosUser('post', 'api/pro/okr/plan/create', params).then(res => {
          this.$message.success('已添加');
          this.$emit('confirm', {});
          this.close();
      }).finally(_=>{
        this.wait=false;
      })
    },
    filterData(item){
      for (let key in item) {
        item[key]=item[key]? item[key]:undefined
      }
      return item
    },
  },
  created() {

  },
};
</script>

<style scoped lang="scss">
  .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;
  }
  .showUpdate .el-icon-error:hover{
    color: #f56c6c;
  }
  .el-icon-plus{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px dashed #909399;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    color: #909399;
  }
  .bj{
    background-color: #fff;
  }
  .inputDc {
    color: #606266;
    position: absolute;
    border-radius: 4px;
    padding: 0 15px;
    top: 0;
    right: 30px;
    left: 0;
    bottom: 0;
    z-index: 9;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .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;
    height: 34px;
    width: 400px;
    position: relative;
    cursor: pointer;
  }
  .border .font-flex-word{
    color: #606266;
  }
  .border:hover{
    border: 1px solid #c0c4cc;
  }
 .w270{
   width: 400px;
 }
// ::v-deep .el-form-item__label{
//     line-height: 14px;
//     padding-bottom: 8px;
//     font-weight: 500;
//     color: #909399;
//     padding-left: 3px;
// }
.add-task-title{
  padding: 10px;
  position: relative;
  color: #141c28;
}
.add-task-title::after{
  content: "";
  position: absolute;
  width: 4px;
  height: 14px;
  border-radius: 5px;
  background-color: #409EFF;
  left: 0;
  top: 13px;
}
.form {
  // margin: 30px 0;
}
::v-deep .el-form-item {
  margin-bottom: 16px;
}
::v-deep .el-dialog__body {
  padding: 20px;
  padding-right: 14px;
}
::v-deep .el-textarea__inner{
  min-height: 36px !important;
}
</style>