gdy_pc_8/src/newPerformance/components/TemplateMixedPublish.vue

<template>
  <el-dialog
    :visible="innerVisible"
    @close="handleClose"
    @open="initData"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    center
    title="通过模板发布考核"
    width="600px"
  >

    <el-carousel
      v-loading="loading"
      :autoplay="false"
      :loop="false"
      :initial-index="0"
      height="500px"
      indicator-position="none"
      arrow="never"
      ref="carousel"
    >
      <el-carousel-item
        style="overflow-y: auto;"
      >
        <el-alert
          :closable="false"
          type="info"
          title="考核基础信息,正确描述考核有助于管理员快速了解考核性质。考核分类可帮助管理员快速找到考核。同一类型的考核更有可比性"
          style="margin-bottom: 10px;"
        />
        <el-form
          :model="publishData"
          label-width="100px"
        >
          <el-form-item label="考核名" prop="title">
            <el-input
              v-model="publishData.title"
              maxlength="20"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="考核分类">
            <el-select v-model="publishData.cateId" >
              <el-option
                v-for="cate in cateList"
                :key="cate.cateId"
                :label="cate.name"
                :value="cate.cateId"
              />
            </el-select>
          </el-form-item>
          <el-card class="card-cycle">
            <el-form-item label="周期种类">
              <el-radio-group
                v-model="publishData.cycleType"
                @change="changeCycle"
              >
                <el-radio-button label="0">自定义</el-radio-button>
                <el-radio-button label="1">年度</el-radio-button>
                <el-radio-button label="2">半年度 </el-radio-button>
                <el-radio-button label="3">季度</el-radio-button>
                <el-radio-button label="4">月度</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="publishData.cycleType === '0'" label="考核时间" prop="startDate">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :key="1"
              />
            </el-form-item>
            <el-form-item v-if="publishData.cycleType === '1'" label="选择年份" prop="year">
              <el-date-picker
                v-model="year"
                type="year"
                value-format="yyyy"
                placeholder="选择年"
                :key="2"
              />
            </el-form-item>

            <el-form-item
              v-if="publishData.cycleType === '2' || publishData.cycleType === '3'"
              label="日期区间"
            >
              <SelectCircle :dateParameter="dateParameter" :dateOptions="dateOptions" @confirm="dateConfirm"
                            :id="1">
                <div class="flex-box-ce cursor">
                  <div>{{ dateParameter.year }}</div>
                  <div style="margin: 0 10px;">{{ dateParameter.name }}</div>
                  <i class="el-icon-caret-bottom fontColorC"></i>
                </div>
              </SelectCircle>
            </el-form-item>

            <el-form-item v-if="publishData.cycleType === '4'" label="选择月份" prop="month">
              <el-date-picker
                v-model="month"
                type="month"
                placeholder="月份"
                value-format="yyyy-MM"
                :key="3"
              />
            </el-form-item>

            <el-form-item label="考核周期">
              <el-link
                v-if="startDate && endDate"
                type="primary"
              >
                {{ startDate }} 至 {{ endDate }}
              </el-link>
              <el-link
                v-else
                type="warning"
              >请指定周期</el-link>
            </el-form-item>
          </el-card>



        </el-form>
      </el-carousel-item>
      <el-carousel-item
        style="overflow-y: auto;"
      >
        <el-alert
          :closable="false"
          type="info"
          title="关联OKR目标可以帮助考核评审进一步跟踪过程，提高考核的准确性"
          style="margin-bottom: 10px;"
        />
        <el-card
          style="height: 450px;"
        >
          <el-row
            style="height: 50px;"
            type="flex"
            justify="space-between"
            align="middle"
          >
            <el-col :span="6">
              <span>关联OKR目标</span>
            </el-col>
            <el-col :span="2">
              <el-button
                type="text"
                icon="el-icon-plus"
                @click.stop="showTargetSearch = true"
              />
            </el-col>
          </el-row>
          <div
            style="height: 400px;overflow-y: auto;padding-bottom: 20px;"
          >
            <el-alert
              v-for="item in selectedOkrs"
              :key="item.id"
              type="success"
              :title="item.name"
              :closable="false"
            />
          </div>
        </el-card>
      </el-carousel-item>
      <el-carousel-item style="overflow-y: auto;">
        <el-alert
          :closable="false"
          type="info"
          style="margin-bottom: 10px;"
          title="按岗位、职能、角色等方式根据团队实际情况定义指标模板，为不同模板指定人员发起考核更灵活"
        />
        <el-row
          type="flex"
          justify="end"
          align="middle"
          style="height: 30px;"
        >
          <el-col :span="2">
            <el-button
              type="text"
              icon="el-icon-plus"
              @click.stop="showTemplateSearch = true"
            />
          </el-col>
        </el-row>
        <el-table
          :data="templateList"
          height="400px"
        >
          <el-table-column
            prop="title"
            label="模板"
          />
          <el-table-column
            prop="employees"
            label="考核人员"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-link
                v-for="employee in scope.row.employees"
                :key="employee.employeeId"
                style="margin: 5px;"
                type="primary"
              >
                {{ employee.name }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="others"
            width="100"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="openEmployeeSelector(scope.row)">绑定人员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-carousel-item>
      <el-carousel-item style="overflow-y: auto;">
        <el-alert
          :closable="false"
          type="info"
          style="margin-bottom: 10px;"
          title="面谈流程可以为每个人考核进行复盘跟进，添加跟踪任务等。对个人提升很有帮助"
        />
        <el-form
          label-width="100px"
        >
          <el-form-item label="启用">
            <el-switch v-model="interviewNode.enable"></el-switch>
          </el-form-item>
          <el-form-item label="处理人">
            <el-radio-group
              v-model="interviewNode.assigneeType"
              :disabled="!interviewNode.enable"
              size="mini"
            >
              <el-radio-button label="leader">管理员</el-radio-button>
              <el-radio-button label="user">指定人员</el-radio-button>
              <el-radio-button label="self">被考核人</el-radio-button>
              <el-radio-button label="post">岗位</el-radio-button>
              <el-radio-button label="deptLeader">部门负责人</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="interviewNode.assigneeType === 'leader'">
            <el-select
              v-model="interviewNode.leaderLevel"
              placeholder="请选择管理员"
              :disabled="!interviewNode.enable"
              key="leader"
              filterable
            >
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="interviewNode.assigneeType === 'user'">
            <el-select
              v-model="assigneeUsers"
              placeholder="请选择指定人员"
              multiple
              key="user"
              :disabled="!interviewNode.enable"
              filterable
              style="width: 400px;"
            >
              <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="interviewNode.assigneeType === 'post'">
            <el-select
              v-model="assigneePosts"
              placeholder="请选择岗位"
              multiple
              key="post"
              :disabled="!interviewNode.enable"
              filterable
              style="width: 400px;"
            >
              <el-option
                v-for="item in postList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="interviewNode.assigneeType === 'deptLeader'">
            <el-cascader
              v-model="assigneeDept"
              size="small"
              :options="deptList"
              :props="{multiple:true,checkStrictly:true,emitPath:false}"
              placeholder="请选择部门"
              filterable
              style="width: 400px;"
            />
          </el-form-item>
        </el-form>
      </el-carousel-item>
    </el-carousel>
    <template #footer>
      <el-button :disabled="!preValidate" @click="prevStep">上一步</el-button>
      <el-button v-if="step <= 2" type="primary" :disabled="!nextValidate" @click="nextStep">下一步</el-button>
      <el-button v-if="step >= 3" type="primary" :disabled="!publishValidate" @click.stop="onPublishSubmit">发布</el-button>
    </template>

    <TargetSearch
      :visible.sync="showTargetSearch"
      :selectedCheckList="okrs"
      :showSelectedData="selectedOkrs"
      @confirm="onOkrSelected"
    />

    <TemplateSelector
      :show-visible.sync="showTemplateSearch"
      :selected-template="templateSelected"
      @confirm="onTemplateConfirm"
    />

    <PerEmployeeSelector
      :show-visible.sync="showEmployeeSearch"
      :selected-employees="employeeSelected"
      :employee-status="1"
      @confirm="onEmployeeConfirm"
    />
  </el-dialog>
</template>


<script>

import Template from "../../examine/components/Template.vue";
import moment from "moment/moment";
import SelectCircle from '@/newPerformance/components/TemplateDetails/SelectCircle';
import TargetSearch from "@/performance/views/assessManagement/TargetSearch";
import TemplateSelector from "./TemplateSelector.vue";
import PerEmployeeSelector from "./PerEmployeeSelector.vue";

export default {
  name: 'TemplateMixedPublish',
  components:{
    PerEmployeeSelector,
    TemplateSelector,
    TargetSearch,
    Template,
    SelectCircle,
  },
  props: {
    showVisible:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      userInfo: this.$userInfo(),
      innerVisible:this.showVisible,
      showTargetSearch:false,
      okrs:[],
      selectedOkrs:[],
      showTemplateSearch:false,
      showEmployeeSearch:false,
      currentTemplate:null,
      step:0,
      dateRange:[],
      year:'',
      month:'',
      publishData:{
        title:'',
        cycleType:'0',
        cateId:0,
      },
      dateOptions: [],
      dateParameter: {
        year: moment().format('YYYY'),
        cycle_type: 0,
        dateId: 1,
        name: '选择年度',
      },
      cateList:[
        { cateId: 0, name: '无分类' },
      ],
      templateList:[],
      loading: false,
      interviewNode:{
        id:'',
        type:'',
        enable:false,
        assigneeType:'',
        leaderLevel:1,
        assigneeIds:'',
        multipleType:'',
        allows:'',
        weight:'',
        children:[],
      },
      levelOptions: [
        {
          value: 1,
          label: '直接管理员'
        },
        {
          value: 2,
          label: '二级管理员'
        },
        {
          value: 3,
          label: '三级管理员'
        },
        {
          value: 4,
          label: '四级管理员'
        },
        {
          value: 5,
          label: '五级管理员'
        },
        {
          value: 6,
          label: '六级管理员'
        }
      ],
      employees: this.$getEmployeeMap(),
      postList: [],
      deptList: [],
      assigneeUsers:[],
      assigneePosts:[],
      assigneeDept:[],
    }
  },
  computed:{
    startDate(){
      switch (this.publishData.cycleType){
        case '0':
          return !this.dateRange || this.dateRange.length !== 2 ? '' : moment(this.dateRange[0]).format('YYYY-MM-DD');
        case '1':
          return !this.year ? '' : moment(`${this.year}-01-01`).startOf('year').format('YYYY-MM-DD');
        case '2':
          return !['上半年','下半年'].includes(this.dateParameter.name) ? '' : (this.dateParameter.name === '上半年' ? moment(this.dateParameter.year).startOf('year').format('YYYY-MM-DD') : moment(this.dateParameter.year).startOf('year').add(6,'months').format('YYYY-MM-DD'));
        case '3':
          if (!['第一季度','第二季度','第三季度','第四季度'].includes(this.dateParameter.name)) return '';
          switch (this.dateParameter.name){
            case '第一季度':
              return this.getQuarterDates(this.dateParameter.year,1).start.format('YYYY-MM-DD');
            case '第二季度':
              return this.getQuarterDates(this.dateParameter.year,2).start.format('YYYY-MM-DD');
            case '第三季度':
              return this.getQuarterDates(this.dateParameter.year,3).start.format('YYYY-MM-DD');
            case '第四季度':
              return this.getQuarterDates(this.dateParameter.year,4).start.format('YYYY-MM-DD');
            default:
              return '';
          }
        case '4':
          if (!this.month) return '';
          let [year,month] = this.month.split('-');
          if (!year || !month) return '';
          return moment(`${year}-${month}-01`).format('YYYY-MM-DD');
        default:
          return '';
      }
    },
    endDate(){
      switch (this.publishData.cycleType){
        case '0':
          return !this.dateRange || this.dateRange.length !== 2 ? '' : moment(this.dateRange[1]).format('YYYY-MM-DD');
        case '1':
          return !this.year ? '' : moment(`${this.year}-01-01`).endOf('year').format('YYYY-MM-DD');
        case '2':
          return !['上半年','下半年'].includes(this.dateParameter.name) ? '' : (this.dateParameter.name === '上半年' ? moment(this.dateParameter.year).startOf('year').add(6,'months').subtract(1,'days').format('YYYY-MM-DD') : moment(this.dateParameter.year).endOf('year').format('YYYY-MM-DD'));
        case '3':
          if (!['第一季度','第二季度','第三季度','第四季度'].includes(this.dateParameter.name)) return '';
          switch (this.dateParameter.name){
            case '第一季度':
              return this.getQuarterDates(this.dateParameter.year,1).end.format('YYYY-MM-DD');
            case '第二季度':
              return this.getQuarterDates(this.dateParameter.year,2).end.format('YYYY-MM-DD');
            case '第三季度':
              return this.getQuarterDates(this.dateParameter.year,3).end.format('YYYY-MM-DD');
            case '第四季度':
              return this.getQuarterDates(this.dateParameter.year,4).end.format('YYYY-MM-DD');
            default:
              return '';
          }
        case '4':
          if (!this.month) return '';
          let [year,month] = this.month.split('-');
          if (!year || !month) return '';
          return moment(`${year}-${month}-01`).endOf('month').format('YYYY-MM-DD');
        default:
          return '';
      }
    },
    templateMap(){
      let map = {}
      this.templateList.forEach(item => {
        map[item.templateId] = item;
      })
      return map;
    },
    templateSelected(){
      return this.templateList.map(item => item.templateId);
    },
    employeeSelected(){
      return !this.currentTemplate ? [] : this.currentTemplate.employees.map(item => item.employeeId);
    },
    preValidate(){
      if (this.loading) return false;
      switch (Number.parseInt(this.step)){
        case 0:
          return false;
        case 1:
        case 2:
        default:
          return true;
      }
    },
    nextValidate(){
      if (this.loading) return false;
      switch (Number.parseInt(this.step)){
        case 0:
          return this.baseValidate();
        case 1:
          return this.baseValidate() && this.okrValidate();
        case 2:
          return this.baseValidate() && this.okrValidate() && this.templateValidate();
        case 3:
        default:
          return false;
      }
    },
    publishValidate(){
      return !this.loading && this.baseValidate() && this.okrValidate() && this.templateValidate() && this.interviewValidate() ;
    },
    interviewFlow(){
      let assigneeMap = {
        leader: [],
        self: [],
        user: this.assigneeUsers,
        post: this.assigneePosts,
        deptLeader: this.assigneeDept
      }
      let node = {
        id:this.interviewNode.id,
        type:this.interviewNode.type,
        enable:this.interviewNode.enable,
        assigneeType:this.interviewNode.assigneeType,
        leaderLevel:this.interviewNode.leaderLevel,
        assigneeIds:assigneeMap[this.interviewNode.assigneeType] || [],
        multipleType:this.interviewNode.multipleType,
        allows:this.interviewNode.allows,
        weight:this.interviewNode.weight,
        children:this.interviewNode.children,
      };
      return {
        nodes:[node]
      }
    },
  },
  watch: {
    showVisible(val){
      this.innerVisible = val
    },
    'interviewNode.assigneeType'(v){
      if (!v) return;
      switch (v){
        case 'self':
          this.interviewNode.leaderLevel = 1;
          this.assigneeUsers = [];
          this.assigneeDept = [];
          this.assigneePosts = [];
          break;
        case 'leader':
          this.assigneeUsers = [];
          this.assigneeDept = [];
          this.assigneePosts = [];
          break;
        case 'user':
          this.assigneeDept = [];
          this.assigneePosts = [];
          this.interviewNode.leaderLevel = 1;
          break;
        case 'post':
          this.assigneeUsers = [];
          this.assigneeDept = [];
          this.interviewNode.leaderLevel = 1;
          break;
        case 'deptLeader':
          this.assigneeUsers = [];
          this.assigneePosts = [];
          this.interviewNode.leaderLevel = 1;
          break;
      }
    }
  },
  methods: {
    matchErrMsg(err){
      return err.toString().replace(/[(Error: )]/g,'');
    },
    // 处理部门树状结构数据
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        data[i].checked = false;
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getQuarterDates(year, quarter) {
      // 计算季度的开始日期（第一个月的第一天）
      const startDate = moment().year(year).quarter(quarter).startOf('quarter');
      // 计算季度的结束日期（最后一个月的最后一天）
      const endDate = moment().year(year).quarter(quarter).endOf('quarter');

      return {
        start: startDate,
        end: endDate
      };
    },
    handleClose(){
      this.dataReset();
      this.$refs['carousel'].setActiveItem(this.step);
      this.$emit('update:showVisible',false);
    },
    dataReset(){
      this.step = 0;
      this.year = moment().format('YYYY');
      this.publishData = {
        title:'',
        cycleType:'0',
        cateId:0,
        templates:[],
      };
      this.okrs = [];
      this.selectedOkrs = [];
      this.templateList = [];
      this.dateRange = [];
      this.interviewNode = {
        id:`IT_${Date.now() + Math.floor(Math.random() * 10000)}`,
        type:'interview',
        enable:false,
        assigneeType:'self',
        leaderLevel:1,
        assigneeIds:[],
        multipleType:'or',
        allows:[],
        weight:0,
        children:[],
      };
      this.assigneeUsers = [];
      this.assigneePosts = [];
      this.assigneeDept = [];
    },
    initData(){
      this.dataReset();
      this.$nextTick(() => {
        this.$refs['carousel'].setActiveItem(this.step);
      });


      if (this.loading) return;
      this.loading = true;

      let result = true;
      Promise.all([
        this.$axiosUser('get',`/performance/cate/list/${this.userInfo.site_id}`),
        this.$axiosUser('get','/org/post'),
        this.$axiosUser('get', '/api/pro/department/tree', '', 'v2')
      ])
        .then(([cateRes,postRes,deptRes]) => {
          if (cateRes.data.code !== 1) throw new Error(cateRes.data.message);
          if (postRes.data.code !== 1) throw new Error(postRes.data.message);
          if (deptRes.data.code !== 1) throw new Error(deptRes.data.msg);

          this.cateList = [{cateId:0,name: '无分类'},...cateRes.data.data.list];
          this.postList = postRes.data.data;
          this.deptList = this.getTreeData(deptRes.data.data.list);
        })
        .catch(err => {
          this.$message.error(this.matchErrMsg(err));
          result = false;
        })
        .finally(() => {
          this.loading = false;
          if (!result) this.handleClose();
        })

      // this.getCateList();
    },
    prevStep(){
      if (this.step <= 0) return;
      this.step--;
      this.$refs['carousel'].prev();
    },
    nextStep(){
      if (this.step >= 3) return;
      this.step++;
      this.$refs['carousel'].next();
    },
    changeCycle(v){
      if (v === '2'){
        this.dateOptions = [
          { name: '上半年', id: 1, cycle_type: 3 },
          { name: '下半年', id: 2, cycle_type: 3 },
        ]
      } else if (v === '3'){
        this.dateOptions = [
          { name: '第一季度', id: 1, cycle_type: 2 },
          { name: '第二季度', id: 2, cycle_type: 2 },
          { name: '第三季度', id: 3, cycle_type: 2 },
          { name: '第四季度', id: 4, cycle_type: 2 }
        ]
      }
    },
    getCateList(){
      if (this.loading) return;
      this.loading = true;
      let url = `/performance/cate/list/${this.userInfo.site_id}`;
      this.$axiosUser('get', url, {})
        .then(res => {
          let { data: { code, data: { list } } } = res
          if (code === 1) this.cateList = [{cateId:0,name:'无分类'} ,...list]
        })
        .finally(() => {
          this.loading = false;
        });
    },
    dateConfirm(date) {
      let { year, name } = date;
      this.dateParameter.year = year;
      this.dateParameter.name = name;
    },
    onOkrSelected(okrs,data){
      this.okrs = okrs;
      this.selectedOkrs = data;
    },
    onTemplateConfirm(data){
      if (!data || data.length <= 0) {
        //清空模板
        this.templateList = [];
        return;
      }

      let dataMap = {}
      data.forEach(item => {
        dataMap[item.templateId] = item;
      });
      //移除模板
      this.templateList = this.templateList.filter(item => !!dataMap[item.templateId]);
      //添加模板
      data.forEach(item => {
        if (this.templateMap[item.templateId]) return;
        this.templateList.push({
          templateId:item.templateId,
          title:item.title,
          employees:[]
        })
      })
    },
    openEmployeeSelector(row){
      this.currentTemplate = row;
      this.showEmployeeSearch = true;
    },
    onEmployeeConfirm(data){
      if (!this.currentTemplate) return;
      if (!data || data.length <= 0) {
        //清空用户
        this.currentTemplate.employees = [];
      }

      let dataMap = {};
      data.forEach(item => {
        dataMap[item.employeeId] = item;
      });
      //移除用户
      this.currentTemplate.employees = this.currentTemplate.employees.filter(item => !!dataMap[item.employeeId]);
      //添加用户

      let employeeMap = {};
      this.currentTemplate.employees.forEach(item => {
        employeeMap[item.employeeId] = item;
      });
      data.forEach(item => {
        if (employeeMap[item.employeeId]) return;
        this.currentTemplate.employees.push({
          employeeId:item.employeeId,
          name:item.name
        });
      });
      this.currentTemplate = null;
    },
    baseValidate(){
      return this.publishData.title && this.publishData.title.length > 0 && this.publishData.title.length <= 20 && this.startDate && this.endDate;
    },
    okrValidate(){
      return true;
    },
    templateValidate(){
      return this.templateList && this.templateList.length > 0 && !this.templateList.some(template => {
        return !template.employees || template.employees.length <= 0
      });
    },
    interviewValidate(){
      let node = this.interviewFlow.nodes[0];
      return node.id && node.id.startsWith("IT_") && node.type === 'interview' && (!node.enable ? true : (node.assigneeType === 'leader' ? node.leaderLevel > 0 : (node.assigneeType === 'self' ? true : (!['post','user','deptLeader'].includes(node.assigneeType) ? false : (node.assigneeIds && node.assigneeIds.length > 0)))));
    },
    onPublishSubmit(){
      if (this.loading) return;
      this.loading = true;

      const params = {
        title: this.publishData.title,
        cateId: this.publishData.cateId,
        cycleType: this.publishData.cycleType,
        startDate: this.startDate,
        endDate: this.endDate,
        okrs: [...this.okrs],
        templates: this.templateList.map(template => {
          return {
            templateId: template.templateId,
            employees: template.employees.map(employee => {
              return {
                employeeId: employee.employeeId,
                ids: [],
                interviewFlow:this.interviewFlow
              }
            })
          }
        })
      }

      let url = `/performance/review/publish/templates/${this.userInfo.site_id}`;
      let result = true;
      this.$http.post(url,params)
        .then(res => {
          if (res.code !== 1) {
            this.$message.error(res.message || '非法请求');
            throw new Error(res.message || '非法请求');
          }
          this.$message.success("考核已发布");
        })
        .catch(err => {
          result = false;
        })
        .finally(() => {
          this.loading = false;
          if (result) this.handleClose();
        })
    },
  }
}

</script>

<style scoped lang="scss">

.selectBox{
  text-align: center;
}

/deep/ .card-cycle .el-card__body{
  padding: 20px 0;
}

</style>