发起考核

src/router/kpi_route.js

@@ -61,6 +61,15 @@ export default [
         title: '考核管理',
         isNav: true
       }
+    }, {
+      path: 'initiate',
+      name: 'initiate',
+      component: (resolve) => require(['@/views/kpi/workbench/initiateAssessment/index.vue'], resolve),
+      meta: {
+        title: '发起考核',
+        isNav: false,
+        hide: true
+      }
     }, {
       path: 'okr',
       name: 'okr',

src/views/kpi/workbench/home/index.vue

@@ -11,7 +11,7 @@
             <div class="home-left-enter-content">
               <div class="boderAndRadius commonFont noSelect" @click="handleGetMoreToDo('assessment')">考核管理</div>
               <div class="boderAndRadius commonFont noSelect" @click="handleGetMoreToDo('workbench-group')" >考评组</div>
-              <div class="boderAndRadius commonFont noSelect">发起考核</div>
+              <div class="boderAndRadius commonFont noSelect" @click="handleGetMoreToDo('initiate')">发起考核</div>
               <div class="boderAndRadius commonFont noSelect">指标库</div>
             </div>
           </div>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="initiate-assessment">
+    <el-form :v-model="formData" :rules="formRules" 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="1">月度</el-radio>
+          <el-radio :label="2">自定义</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="时间周期" required>
+        <!-- month':'daterange -->
+          <el-date-picker v-if="formData.cycleTimeType===1" v-model="formData.rangDate" type="month" key="month"> </el-date-picker>
+          <el-date-picker v-else v-model="formData.rangDate" type="daterange" key="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+      </el-form-item>
+    <div class="choose-group">
+        <div class="title">被考核对象</div>
+        <el-form-item label="参与考评组">
+          <div class="line-space"><el-button @click="handleChooseGroup">请选择</el-button></div>
+          <div class="line-space">
+            <el-table :data="formData.assessmentList"  :header-cell-style="{ 'background-color': '#f5f5f5'}">
+              <el-table-column label="考核组名称" prop="name"></el-table-column>
+              <el-table-column label="周期类型" prop="cycleType"></el-table-column>
+              <el-table-column label="参与人数" prop="personNumber"></el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button type="text" @click.native.prevent="handleGroupDelete(scope.$index, formData.assessmentList)" plain>删除</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>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      showChooseList: false,
+      formData: {
+        cycleTimeType: 1,
+        rangDate: '',
+        assessmentList: [
+          {
+            name: '销售人员',
+            cycleType: '月度',
+            personNumber: '12人'
+          }
+        ] // 考核对象
+      },
+      formRules: {
+        cycleTimeType: { required: true, message: '请选择周期类型', trigger: 'blur' },
+        rangDate: { required: true, message: '请选择时间周期', trigger: 'blur' }
+      }
+    }
+  },
+  watch: {
+    'formData.cycleTimeType': function (newVal, oldVal) {
+      console.log(this.formData.cycleTimeType)
+      this.formData.rangDate = ''
+    }
+  },
+  methods: {
+    handleChooseGroup () {
+      this.showChooseList = !this.showChooseList
+    },
+    handleGroupDelete (index, rows) {
+      rows.splice(index, 1)
+    },
+    handleSubmit () {
+      console.log('提交')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.initiate-assessment {
+  padding: 25px;
+  background-color: white;
+  min-height: 600px;
+  font-size: 14;
+  color: #333;
+  .title {
+    font-size: 22;
+    color:black;
+    margin-bottom: 15px;
+  }
+  .choose-group {
+    margin-top: 150px;
+  }
+  .line-space {
+    margin-top: 10px;
+  }
+}
+
+</style>