优化

src/components/kpi-layout/AppMain.vue

@@ -28,7 +28,7 @@ export default {
 .appamin{
   flex: 1;
   box-sizing: border-box;
-  padding: 30px 80px 0;
+  padding: 30px 80px;
 }
 
 </style>

src/components/kpi-layout/NavBar.vue

@@ -11,13 +11,13 @@
             >
             {{i.meta.title}}</li>
         </ul>
-        <div class="noNav" v-if="!isNav">
+        <nav-header v-if="!isNav"/>
+        <!-- <div class="noNav" v-if="!isNav">
           <div class="noNav-left">
             <i @click="handleBack" class="el-icon-arrow-left"></i>
           </div>
-            <!-- <svg-icon icon-class="analyze" /> -->
           <div>{{name}}</div>
-        </div>
+        </div> -->
        </transition>
        <div class="navBar-right" v-if="isNav">
           <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
@@ -27,7 +27,7 @@
 
 <script>
 import routeList from '@/router/kpi_route'
-console.log('_route: ', routeList[0].children)
+import NavHeader from './NavHeader'
 export default {
   name: 'NavBar',
   data () {
@@ -37,14 +37,10 @@ export default {
       activeIndex2: '1'
     }
   },
-
+  components: {
+    NavHeader
+  },
   computed: {
-    isPopup () {
-      return !!this.$route.meta.pop
-    },
-    name () {
-      return this.$route.meta.title
-    },
     isNav () {
       return !!this.$route.meta.isNav
     },
@@ -54,32 +50,14 @@ export default {
   },
   beforeMount () {},
   mounted () {
-    console.log('this.$route', this.$route)
   },
   methods: {
-    handleBack () {
-      if (this.isPopup) return this.open()
-      this.$router.go(-1)
-    },
     handleToRouter (item) {
       if (this.title.includes(item)) return
       this.$router.push({name: item})
     },
     handleSelect (key, keyPath) {
       console.log(key, keyPath)
-    },
-    open () {
-      const obj = {
-        popupTitle: this.$route.meta.popupTitle || '有修改的内容未保存，确认离开吗？',
-        popupContent: this.$route.meta.popupContent || '系统可能不会保存您做的更改。'
-      }
-      this.$confirm(obj.popupContent, obj.popupTitle, {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$router.go(-1)
-      }).catch(() => { })
     }
   },
   watch: {
@@ -90,9 +68,19 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.navBar{
+.navBar::before{
+    content: '';
     width: 100%;
-  height: 60px;
+    height: 4px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+.navBar{
+  position: relative;
+  z-index: 4;
+  width: 100%;
+  height: @headerHeight;
   box-sizing: border-box;
   justify-content: space-between;
   display: flex;
@@ -120,23 +108,6 @@ export default {
 .active{
   color: #09f;
 }
-.noNav{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  &-left{
-    width: 60px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    border-right: 1px solid #c0c0c0;
-    margin-right: 20px;
-    i{
-      font-size: 22px;
-      cursor:pointer;
-    }
-  }
-}
 
 </style>
 <style lang='less' scoped>

src/components/kpi-layout/NavHeader.vue

@@ -0,0 +1,74 @@
+<!--  -->
+<template>
+    <div>
+         <div class="noNav">
+          <div class="noNav-left">
+            <i @click="handleBack" class="el-icon-arrow-left"></i>
+          </div>
+            <!-- <svg-icon icon-class="analyze" /> -->
+          <div>{{name}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    isPopup () {
+      return !!this.$route.meta.pop
+    },
+    name () {
+      return this.$route.meta.title
+    }
+  },
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleBack () {
+      if (this.isPopup) return this.open()
+      this.$router.go(-1)
+    },
+    open () {
+      const obj = {
+        popupTitle: this.$route.meta.popupTitle || '有修改的内容未保存，确认离开吗？',
+        popupContent: this.$route.meta.popupContent || '系统可能不会保存您做的更改。'
+      }
+      this.$confirm(obj.popupContent, obj.popupTitle, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$router.go(-1)
+      }).catch(() => { })
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.noNav{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  &-left{
+    width: 60px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #c0c0c0;
+    margin-right: 20px;
+    i{
+      font-size: 22px;
+      cursor:pointer;
+    }
+  }
+}
+</style>

src/components/kpi-layout/index.vue

@@ -12,14 +12,17 @@ import AppMain from './AppMain'
 export default {
   data () {
     return {
-
     }
   },
   components: {
     NavBar,
     AppMain
   },
-  computed: {},
+  computed: {
+    // hiddenHeader () {
+    //   return !!this.$route.meta.hidden
+    // }
+  },
   beforeMount () {},
   mounted () {},
   methods: {},

src/router/kpi_route.js

@@ -39,7 +39,17 @@ export default [
         component: (resolve) => require(['@/views/kpi/workbench/assessmentGroup/index.vue'], resolve),
         meta: {
           title: '考评组设置',
-          isNav: false
+          isNav: false,
+          hidden: true
+        }
+      }, {
+        path: 'edit',
+        name: 'workbench-edit-group',
+        component: (resolve) => require(['@/views/kpi/workbench/assessmentGroup/edit'], resolve),
+        meta: {
+          title: '编辑考评组',
+          isNav: false,
+          hidden: true
         }
       }
       ]
@@ -75,23 +85,22 @@ export default [
         title: '设置',
         isNav: true
       }
+    }, {
+      path: 'home',
+      name: 'home',
+      component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
+      meta: {
+        title: '智能测试'
+      }
+    }, {
+      path: 'home1',
+      name: 'home1',
+      component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
+      meta: {
+        title: '智能测试带弹窗',
+        pop: true
+      }
     }
-    // , {
-    //   path: 'home',
-    //   name: 'home',
-    //   component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
-    //   meta: {
-    //     title: '智能测试'
-    //   }
-    // }, {
-    //   path: 'home1',
-    //   name: 'home1',
-    //   component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
-    //   meta: {
-    //     title: '智能测试带弹窗',
-    //     pop: true
-    //   }
-    // }
     ]
   }
 ]

src/style/common.less

@@ -1,5 +1,6 @@
 @borderColor: #ebebeb;
 @fontBlue: #3ba1ff;
+@headerHeight:60px;
 .boderAndRadius{
   border: 1px solid @borderColor;
   border-radius:6px ;

src/utils/elementConfig.js

@@ -17,12 +17,22 @@ import {
   TimePicker,
   Col,
   Checkbox,
-  Radio
+  Radio,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Dialog,
+  Tree,
+  Tag
 } from 'element-ui'
 
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$alert = MessageBox.alert
+
+Vue.use(Tag)
+Vue.use(Tree)
+Vue.use(Dialog)
 Vue.use(DatePicker)
 Vue.use(Select)
 Vue.use(RadioGroup)
@@ -39,3 +49,6 @@ Vue.use(TimePicker)
 Vue.use(Col)
 Vue.use(Checkbox)
 Vue.use(Radio)
+Vue.use(Dropdown)
+Vue.use(DropdownMenu)
+Vue.use(DropdownItem)

src/views/kpi/assessment/index.vue

@@ -5,7 +5,7 @@
         <el-form ref="form" inline :model="form" >
           <div>
             <el-form-item >
-              <el-select v-model="form.value" placeholder="请选择" style="width:100px">
+              <el-select  size="small"  v-model="form.value" placeholder="请选择" style="width:100px">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -15,21 +15,22 @@
               </el-select>
             </el-form-item>
             <el-form-item >
-              <el-input  prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
+              <el-input  size="small"  clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
             </el-form-item>
           </div>
           <div>
             <el-form-item >
-              <el-button type="primary" @click="handleRight">发起考核</el-button>
+              <el-button type="primary"  size="small"  @click="handleRight">发起考核</el-button>
             </el-form-item>
             <el-form-item >
-              <el-button >导入历史绩效</el-button>
+              <el-button  size="small"  >导入历史绩效</el-button>
             </el-form-item>
           </div>
         </el-form>
       </div>
       <div class="assessment-table">
         <el-table
+        :header-cell-style="{background:'#F5F7FA'}"
         @row-click='handleSelectClick'
         :data="tableData"
         style="width: 100%">
@@ -102,11 +103,11 @@ export default {
         number: '10'
       }, {
         date: '2016-05-03',
-        name: '2020年01月绩效考核',
+        name: '2020年02月绩效考核',
         number: '10'
       }, {
         date: '2016-05-03',
-        name: '2020年01月绩效考核',
+        name: '2020年03月绩效考核',
         number: '10'
       }, {
         date: '2016-05-03',

src/views/kpi/okr/index.vue

@@ -2,8 +2,10 @@
 <template>
     <div>
 
-OKR
+      <div v-for="i in array" :key="i.id">
-
+        <!-- {{i.id}}{{bbb(i)}} -->
+      </div>
+      <el-button @click="aaa">点击</el-button>
     </div>
 </template>
 
@@ -11,13 +13,32 @@ OKR
 export default {
   data () {
     return {
-
+      array: [{
+        id: 1,
+        isTrue: true
+      }, {
+        id: 2,
+        isTrue: true
+      }, {
+        id: 3,
+        isTrue: true
+      }],
+      arr1: [1, 2]
     }
   },
   computed: {},
   beforeMount () {},
   mounted () {},
-  methods: {},
+  methods: {
+    bbb (item) {
+      console.log(145623)
+      return this.arr1.some(i => i === item.id)
+    },
+    aaa () {
+      this.arr1 = []
+      console.log('this.array: ', this.array)
+    }
+  },
   watch: {}
 
 }

src/views/kpi/workbench/assessmentGroup/edit/components/a.js

@@ -0,0 +1,2 @@
+const a = {'msg': '操作成功', 'code': 200, 'data': [{'id': 100, 'name': '霖梓控股', 'children': [{'id': 114, 'name': '其他', 'children': [{'id': 115, 'name': 'qtzy', 'children': [{'id': 117, 'name': '电销'}]}]}, {'id': 102, 'name': '武汉分公司', 'children': [{'id': 109, 'name': '财务部门'}, {'id': 108, 'name': '市场部门'}]}, {'id': 101, 'name': '杭州总公司', 'children': [{'id': 103, 'name': '研发部门', 'children': [{'id': 118, 'name': '研发小组'}, {'id': 119, 'name': '测试二组'}, {'id': 112, 'name': '研发一组', 'children': [{'id': 113, 'name': '测试小组'}]}]}, {'id': 104, 'name': '市场部门'}, {'id': 105, 'name': '测试部门'}, {'id': 106, 'name': '财务部门'}, {'id': 107, 'name': '运维部门'}]}]}]}
+export default a.data

src/views/kpi/workbench/assessmentGroup/edit/components/basis.vue

@@ -0,0 +1,97 @@
+<!--  -->
+<template>
+    <div class="basis">
+        <div class="basis-title commonFont">
+          基本信息
+        </div>
+        <div class="basis-form">
+          <el-form ref="form" :model="form" :rules="rules"  label-width="120px">
+            <el-form-item label="考评组名称：" prop="name">
+              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+            </el-form-item>
+            <el-form-item label="周期类型：">
+              <el-radio-group v-model="form.radio">
+                <el-radio
+                  v-for="(i,index) in zhouqi"
+                  :key="index"
+                  :label="i.id">{{i.name}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="考评组管理员：">
+              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+            </el-form-item>
+            <el-form-item label="被考核人员" prop="name">
+
+            </el-form-item>
+            <el-form-item label="考评员工：">
+              <el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选部门</el-button>
+              <el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选角色</el-button>
+              <el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选人员</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <get-depart v-if="isShow" :isShow.sync='isShow'/>
+    </div>
+</template>
+
+<script>
+import getDepart from './getDepart'
+
+export default {
+  data () {
+    return {
+      isShow: false,
+      zhouqi: [{
+        id: 1,
+        name: '月度'
+      }, {
+        id: 2,
+        name: '季度'
+      }, {
+        id: 3,
+        name: '半年度'
+      }, {
+        id: 4,
+        name: '年度'
+      }, {
+        id: 5,
+        name: '试用期'
+      }],
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  components: {
+    getDepart
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleGetChoose () {
+      this.isShow = true
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.basis{
+  &-title{
+     text-align: center;
+     margin-bottom: 20px;
+  }
+  &-form{
+    margin: 0 auto;
+    width: 50%;
+  }
+}
+</style>

src/views/kpi/workbench/assessmentGroup/edit/components/getDepart.vue

@@ -0,0 +1,210 @@
+<!--  -->
+<template>
+    <div>
+        <el-dialog
+          title="选择参与部门"
+          :visible.sync="show"
+          @close='close'
+          width="800px"
+          center>
+          <div class="popup">
+              <div class="popup-item boderAndRadius">
+                <div class="popup-item-title">全部</div>
+                <div class="popup-item-content">
+                  <div class="popup-item-content-item">
+                    <div class="content">
+                      <el-checkbox>全选</el-checkbox>
+                    </div>
+                  </div>
+                  <div v-for="(i) in showData" :key="i.id" class="popup-item-content-item borderItem">
+                     <div class="content"><el-checkbox :value ='handleCheck(i)' @change='handleChangChoose($event,i)' >{{i.name}}</el-checkbox></div>
+                     <div class="popup-item-content-item-next" :class="{isHasActive:handleCheck(i)}" @click='handleNext(i)'>下级</div>
+                  </div>
+                </div>
+              </div>
+              <div class="popup-item  boderAndRadius">
+                <div class="popup-item-right">
+                  <el-tag
+                    v-for="tag in tags"
+                    :key="tag.name"
+                    @close="handleClose(tag)"
+                    closable>
+                    {{tag.name}}
+                  </el-tag>
+                </div>
+              </div>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button size="mini" @click="xcq">取 消</el-button>
+            <el-button size="mini" @click="xcq1">清空全部</el-button>
+            <el-button size="mini" type="primary" @click="centerDialogVisible">确 定</el-button>
+          </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import bbb from './a'
+console.log('bbb: ', bbb)
+export default {
+  data () {
+    return {
+      show: true,
+      checked: false,
+      data: bbb,
+      showData: [],
+      checkList: [],
+      tags: [{
+        id: 100,
+        name: '霖梓控股'
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: {
+
+  },
+  beforeMount () {},
+  mounted () {
+    this.showData = this.data.length > -1 ? this.data : []
+  },
+  methods: {
+    // 是否勾选
+    handleCheck (item) {
+      return this.tags.some(i => i.id === item.id)
+    },
+    handleChangChoose (event, item) {
+      const isHas = this.tags.some(i => i.id === item.id)
+      if (isHas && !event) {
+        this.tags = this.tags.filter(i => i.id !== item.id)
+      }
+      if (!isHas && event) {
+        this.tags.push(item)
+      }
+    },
+    handleClick (data) {
+    },
+    // 点击下级
+    handleNext (item) {
+      if (this.handleCheck(item)) return
+      this.showData = item.children
+      this.handleGetNextChildren()
+    },
+    // 删除右侧标签
+    handleClose (item) {
+      this.tags = this.tags.filter(i => i.id !== item.id)
+      // this.$forceUpdate()
+    },
+    // 关闭弹窗
+    close () {
+      this.show = true
+      this.$emit('update:isShow', false)
+    },
+    // 关闭弹窗
+    centerDialogVisible () {
+      this.$emit('update:isShow', false)
+    },
+    handleGetNextChildren (children = this.data) {
+      console.log('children: ', children)
+    },
+    xcq () {
+      // const list = this.$refs.tree.getCheckedNodes()
+      // console.log('list: ', list)
+    },
+    xcq1 () {
+      console.log(this.a)
+      // this.$refs.tree.setChecked(100)
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+<style lang="less" scoped>
+.popup{
+  min-height: 100px;
+  display: flex;
+  justify-content: space-between;
+  &-item{
+    width: 48%;
+    box-sizing: border-box;
+    padding: 10px 0;
+    &-right{
+          padding: 10px !important;
+          .el-tag{
+            margin: 5px 6px;
+          }
+    }
+    &-title{
+      color:#9b9b9b;
+      padding-bottom: 4px;
+      border-bottom: 1px solid @borderColor;
+      padding: 10px;
+    }
+    &-content{
+      height: 400px;
+      overflow: auto;
+      .borderItem{
+        border-top: 1px solid @borderColor;
+      }
+      &-item:nth-last-child(1){
+        border-bottom: 1px solid @borderColor;
+      }
+      &-item{
+        width: 100%;
+        height: 40px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        .isHasActive{
+          color: rgba(196, 196, 196, 0.933) !important;
+          border-left: 1px solid  rgba(196, 196, 196, 0.933) !important;
+        }
+        .content{
+          flex: 1;
+          padding:0 10px;
+          height: 100%;
+        }
+        .content:hover{
+           background: rgb(238, 238, 238);
+        }
+        &-next{
+          padding:0 10px;
+          border-left: 1px solid @fontBlue;
+          color: @fontBlue;
+          height: 20px;
+        }
+        .el-checkbox{
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          }
+
+      }
+    }
+  }
+}
+</style>
+<style lang='less'>
+.el-dialog{
+  border-radius: 6px;
+}
+.el-dialog__header{
+  border-bottom: 1px solid @borderColor;
+}
+.el-dialog__footer{
+  border-top: 1px solid @borderColor;
+}
+.el-dialog__title{
+  font-size: 16px;
+}
+.dialog-footer{
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/kpi/workbench/assessmentGroup/edit/components/process.vue

@@ -0,0 +1,30 @@
+<!--  -->
+<template>
+    <div class="process">
+        流程设计
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.process{
+  width: 100%;
+  height: 1000px;
+}
+</style>

src/views/kpi/workbench/assessmentGroup/edit/components/templateSet.vue

@@ -0,0 +1,27 @@
+<!--  -->
+<template>
+    <div>
+        模板设置
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='' scoped>
+
+</style>

src/views/kpi/workbench/assessmentGroup/edit/index.vue

@@ -0,0 +1,90 @@
+<!--  -->
+<template>
+    <div class="eidt">
+         <div class="eidt-header">
+            <div @click="handleChangle(1)" :class="{active:active===1}" class="a commonFont" ><span class="eidt-header-circle">1</span>基础设置</div>
+            <div @click="handleChangle(2)"  :class="{active:active===2}" class="a commonFont"><span class="eidt-header-circle">2</span>模板设计</div>
+            <div @click="handleChangle(3)" :class="{active:active===3}" class="a commonFont"><span class="eidt-header-circle">3</span>流程设计</div>
+        </div>
+        <div class="eidt-content boderAndRadius">
+          <basis v-show="active===1"/>
+          <process v-show="active===2"/>
+          <template-set v-show="active===3"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import basis from './components/basis'
+import process from './components/process'
+import templateSet from './components/templateSet'
+export default {
+  data () {
+    return {
+      active: 1
+    }
+  },
+  components: {
+    basis,
+    process,
+    templateSet
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleChangle (item) {
+      this.active = item
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.eidt{
+  position: relative;
+  &-content{
+    height: 600px;
+    background: #fff;
+    padding: 40px 28px;
+    overflow: auto;
+  }
+  &-header{
+    position: absolute;
+    z-index: 50;
+    width: 420px;
+    height: @headerHeight;
+    top: -(@headerHeight+30px);
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    >div{
+      flex:1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      letter-spacing:1px
+    }
+    .active{
+      background: @fontBlue;
+      color: #fff;
+    }
+    &-circle{
+      margin: 0 4px;
+      display: inline-block;
+      border: 1px solid #eeeeee;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/views/kpi/workbench/assessmentGroup/groundTable.vue

@@ -0,0 +1,149 @@
+<!--  -->
+<template>
+    <div class="assessment">
+      <div class="assessment-form">
+        <el-form ref="form" inline :model="form" >
+          <div>
+            <el-form-item >
+              <el-input   size="small" clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item >
+              <el-dropdown  >
+                <el-button  size="small" type="primary">
+                  新增考评组<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu  slot="dropdown">
+                  <el-dropdown-item @click.native="handleToEidt" >新增考评组</el-dropdown-item>
+                  <el-dropdown-item @click.native="handleToEidt" > 复制考评组</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+        <el-table
+        :header-cell-style="{background:'#F5F7FA'}"
+        @row-click='handleSelectClick'
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          fixed
+          sortable
+          prop="name"
+          label="考核名称">
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          label="时间周期">
+        </el-table-column>
+        <el-table-column
+          prop="number"
+          label="参与人数">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="deleteRow(scope.$index, tableData)"
+              type="text"
+              size="small">
+              查看
+            </el-button>
+            <el-button
+              @click.native.prevent="deleteRow(scope.$index, tableData)"
+              type="text"
+              size="small">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      form: {},
+      tableData: [{
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年02月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年03月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }]
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {
+  },
+  methods: {
+    handleToEidt () {
+      this.$router.push({name: 'workbench-edit-group'})
+    },
+    handleSelectClick (row, column, event) {
+      console.log('event: ', event)
+      console.log('column: ', column)
+      console.log('row: ', row)
+    },
+    deleteRow (index, rows) {
+      rows.splice(index, 1)
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.assessment{
+  .el-form{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &-form{
+    padding: 4px 0;
+  }
+
+  &-table{
+    background: #fff;
+    padding: 20px;
+    border: 1px solid @borderColor;
+  }
+}
+</style>
+<style lang="less">
+  .el-table__row{
+    cursor:pointer;
+  }
+</style>

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

@@ -1,17 +1,21 @@
 <!--  -->
 <template>
-    <div>
+    <div class="boderAndRadius ground">
-        考评组
+        <ground-table />
     </div>
 </template>
 
 <script>
+import groundTable from './groundTable'
 export default {
   data () {
     return {
 
     }
   },
+  components: {
+    groundTable
+  },
   computed: {},
   beforeMount () {},
   mounted () {},
@@ -22,6 +26,10 @@ export default {
 
 </script>
 
-<style lang='' scoped>
+<style lang='less' scoped>
+.ground {
+  padding: 28px;
+  position: relative;
 
+}
 </style>