management_UI/src/views/kpi/workbench/initiateAssessment/index.vue

<template>
  <div class="initiate-assessment commonFont common-main">
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formData"
      label-width="150px"
      label-position="left"
      label-suffix="："
      size="mini"
    >
      <div class="title">基本信息</div>
      <el-form-item
        label="周期类型"
        prop="cycleTimeType"
      >
        <el-radio-group v-model="formData.cycleTimeType">
          <el-radio :label="0">月度</el-radio>
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="时间周期"
        required
        prop="rangDate"
      >
        <el-date-picker
          @change="handleChangeRangDate"
          v-model="formData.rangDate"
          :type="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
          :key="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="formData.rangDate"
        label="考核合并"
        prop="mergeType.name"
      >
        <el-radio
          v-model="formData.mergeType.type"
          :label="1"
        >新发起考核
          <el-input
            v-model="formData.mergeType.name"
            :disabled="formData.cycleTimeType===0"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-radio>
      </el-form-item>

      <div class="choose-group">
        <div class="title">被考核对象</div>
        <el-form-item
          label="参与考评组"
          prop="assessmentList"
        >
          <div>
            <el-button @click="handleChooseGroup">请选择</el-button>
          </div>
          <div class="line-space">
            <el-table
              v-if="formData.assessmentList.length>0"
              :data="formData.assessmentList"
              :header-cell-style="{ 'background-color': '#f5f5f5' }"
              max-height="440px"
            >
              <el-table-column
                label="考核组名称"
                prop="name"
              ></el-table-column>
              <el-table-column
                label="参与人数"
                prop="counts"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="handleGroupDelete(scope.$index, formData.assessmentList)"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="line-space">
            <el-button
              type="primary"
              @click="handleSubmit"
            >确定</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <ChooseInitiate
        @cb='handleCallBackChoose'
        subumitText='确定'
        :popupRightTitle='popupTitle'
        :oldSelectedList='formData.assessmentList'
        :showChooseList.sync='showChooseList'
      />

      <el-dialog
        title="发起考核"
        :visible.sync="dialogSendVisible"
        width="30%"
      >
        <span>确认发起{{this.formData.mergeType.name}}绩效考核？</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="handleDialogSend"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import ChooseInitiate from '@/components/ChooseInitiate'
import { apiInitiateAssessmentInfo } from '@/api/initiateAssessment'
export default {
  data () {
    return {
      dialogSendVisible: false,
      popupTitle: '选择考评组（月度）考核',
      showChooseList: false,
      formData: {
        cycleTimeType: 0,
        rangDate: '',
        assessmentList: [], // 考核对象
        mergeType: { // 考核合并类型
          type: 1,
          name: '' // 合并 id  新发起无效
        }
      },
      formRules: {
        cycleTimeType: [{ required: true, message: '请选择周期类型', trigger: 'blur' }],
        rangDate: [{ required: true, message: '请选择时间周期', trigger: 'change' }],
        assessmentList: [{ type: 'array', required: true, message: '请选择参与考评组', trigger: 'change' }],
        'mergeType.name': [{ required: true, message: '请填写新建考核名称', trigger: 'blur' }]
      }
    }
  },
  components: {
    ChooseInitiate
  },
  watch: {
    'formData.cycleTimeType': function (newVal, oldVal) {
      this.formData.rangDate = ''
    }
  },
  created () {
  },
  methods: {
    handleChangeRangDate (chgVal) {
      this.popupTitle = '选择考评组（月度）考核'
      let nameStr = this.$format(chgVal, 'yyyy年MM月绩效考核')
      if (this.formData.cycleTimeType === 1) {
        // 自定义
        this.popupTitle = '选择考评组（自定义）考核'
        nameStr = chgVal[0] + '至' + chgVal[1] + '绩效考核'
      }
      this.formData.mergeType.name = nameStr
    },
    hundlePopupHide () {
      this.$refs.popupMultipleTable.clearSelection()
      this.showChooseList = false
    },
    handleChooseGroup () {
      this.showChooseList = !this.showChooseList
    },
    handleGetRowKeys (row) {
      return row.id
    },
    handleGroupDelete (index, rows) {
      rows.splice(index, 1)
    },
    handleSubmit () {
      this.$refs['formData'].validate((val) => {
        this.dialogSendVisible = val
      })
    },
    handleDialogSend () {
      // 发起考核
      const groupIdList = this.formData.assessmentList.map((item, index) => {
        return item.id
      })
      let para = {
        cycleType: this.formData.cycleTimeType,
        groupIds: groupIdList.join(),
        // groupIds: 24, // 目前可用
        name: this.formData.mergeType.name
      }
      if (this.formData.cycleTimeType === 0) {
        para['startTime'] = this.$format(this.formData.rangDate, 'yyyy-MM-dd hh:mm:ss')
      } else {
        para['startTime'] = this.$format(this.formData.rangDate[0], 'yyyy-MM-dd hh:mm:ss')
        para['endTime'] = this.$format(this.formData.rangDate[1], 'yyyy-MM-dd hh:mm:ss')
      }
      apiInitiateAssessmentInfo(para).then(res => {
        this.dialogSendVisible = false
        console.log('发起考核成功', res)
        this.$router.push({ name: 'assessment-stepList', query: { id: res.data.id, name: 'assessment-homeList' } })
        this.$message({
          message: res.msg,
          type: 'success'
        })
      })
    },
    handleCallBackChoose (val) {
      // 选择数据
      this.formData.assessmentList = val.list
      this.showChooseList = false
    }
  }
}
</script>
<style lang="less" scoped>
.initiate-assessment {
  min-height: 600px;
  .title {
    margin-bottom: 25px;
  }
  .choose-group {
    margin-top: 200px;
  }
  .line-space {
    margin-top: 20px;
  }
}
</style>