优化

src/api/assessment.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 考核任务列表
+export function apiGetAssessList (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/list',
+    method: 'post',
+    data: query
+  })
+}
+
+// 删除考核任务
+export function apiDeleteAssessList (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/delete',
+    method: 'get',
+    params: query
+  })
+}

src/components/kpi-layout/AppMain.vue

@@ -26,9 +26,10 @@ export default {
 </script>
 <style lang='less' scoped>
 .appamin{
-  flex: 1;
+  // flex: 1;
+  background: #f4f4f4;
   box-sizing: border-box;
-  padding: 30px 80px;
+  padding: 90px 80px 30px;
 }
 
 </style>

src/components/kpi-layout/NavBar.vue

@@ -77,7 +77,7 @@ export default {
     left: 0;
   }
 .navBar{
-  position: relative;
+  position: fixed;
   z-index: 4;
   width: 100%;
   height: @headerHeight;

src/components/kpi-layout/SmallNav.vue

@@ -1,13 +1,20 @@
 <!--  -->
 <template>
     <div class="smallNav">
-      <span @click="handleBack" class="smallNav-back">返回</span>
+      <span @click="handleBack" class="smallNav-back a">返回</span>
-      <span class="commonFont smallNav-title a">{{title}}</span>
+      <span v-if="showTitle" class="commonFont smallNav-title commonFont">{{title}}</span>
+      <slot name='content'></slot>
     </div>
 </template>
 
 <script>
 export default {
+  props: {
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
 
@@ -34,7 +41,10 @@ export default {
 <style lang='less' scoped>
 .smallNav{
   height: 40px;
+  display: flex;
+  align-items: center;
   &-back{
+    padding-right: 10px;
     margin-right: 10px;
     color: #aaaaaa;
     cursor: pointer;
@@ -44,16 +54,19 @@ export default {
     position: relative;
 
   }
+  .a{
+    position: relative;
+  }
   .a::before{
       content:"";
       position: absolute;
-      left: 0;
+      right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
-      height: 70%;
+      height: 80%;
       // background: red;
-      border-left: 1px solid #aaaaaa;
+      border-right: 1px solid #aaaaaa;
     }
 }
 </style>

src/router/kpi_route.js

@@ -61,7 +61,35 @@ export default [
       meta: {
         title: '考核管理',
         isNav: true
+      },
+      redirect: 'assessment/homeList',
+      children: [{
+        path: 'homeList',
+        name: 'assessment-homeList',
+        component: (resolve) => require(['@/views/kpi/assessment/homeList/index.vue'], resolve),
+        meta: {
+          title: '考核管理',
+          isNav: true
+        }
+      }, {
+        path: 'stepList',
+        name: 'assessment-stepList',
+        component: (resolve) => require(['@/views/kpi/assessment/stepList/index.vue'], resolve),
+        meta: {
+          title: '考核管理',
+          isNav: true
+        }
+      },
+      {
+        path: 'performance',
+        name: 'assessment-performance',
+        component: (resolve) => require(['@/views/kpi/assessment/performance/index.vue'], resolve),
+        meta: {
+          title: '员工绩效详情',
+          isNav: true
+        }
       }
+      ]
     }, {
       path: 'initiate',
       name: 'initiate',

src/utils/elementConfig.js

@@ -26,14 +26,15 @@ import {
   Tag,
   Tooltip,
   Popover,
-  Pagination
+  Pagination,
-
+  Cascader
 } from 'element-ui'
 
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$alert = MessageBox.alert
 
+Vue.use(Cascader)
 Vue.use(Pagination)
 Vue.use(Popover)
 Vue.use(Tooltip)

src/views/kpi/assessment/homeList/index.vue

@@ -0,0 +1,236 @@
+<!--  -->
+<template>
+    <div class="assessment">
+      <div class="assessment-form">
+        <el-form ref="form" inline :model="form" >
+          <div>
+            <el-form-item >
+              <el-select  size="small"  v-model="form.cycleType" placeholder="请选择" style="width:100px">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item >
+              <el-input @change="handleChange" @keyup.enter="handleChange"   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"  size="small"  @click="handlePush">发起考核</el-button>
+            </el-form-item>
+            <!-- <el-form-item >
+              <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%">
+        <el-table-column
+          fixed
+          prop="name"
+          label="考核名称">
+        </el-table-column>
+        <el-table-column
+          prop="cycleTime"
+          label="时间周期">
+        </el-table-column>
+        <el-table-column
+          prop="joinNum"
+          label="参与人数">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+               @click="handlePush(scope.row.id)"
+              type="text"
+              size="small">
+              编 辑
+            </el-button>
+            <el-button
+              @click="handleDelete(scope.row.id)"
+              type="text"
+              size="small">
+              删 除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="footer">
+        <el-pagination
+            small
+            @current-change="handleChangePage"
+            layout="prev, pager, next"
+            :page-size.sync='params.pageSize'
+            :total="params.totalCount">
+          </el-pagination>
+      </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import {apiGetAssessList, apiDeleteAssessList} from '@/api/assessment'
+console.log('apiGetAssessList: ', apiGetAssessList)
+export default {
+  components: {
+  },
+  data () {
+    return {
+      params: {
+        'currPage': 1,
+        'pageSize': 5
+      },
+      show: false,
+      options: [ {
+        value: '',
+        label: '全部'
+      }, {
+        value: 0,
+        label: '月度'
+      },
+      {
+        value: 1,
+        label: '自定义'
+      }
+      ],
+      form: {
+        cycleType: ''
+      },
+      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 () {
+    this.form.value = this.options[0].value
+    this.handleGetData()
+  },
+  methods: {
+    async handleDelete (item) {
+      try {
+        await apiDeleteAssessList({assessId: item})
+        this.handleGetData()
+        this.$message({
+          message: '成功',
+          type: 'success'
+        })
+      } catch (error) {
+        this.$message.error(error.msg)
+      }
+    },
+    handleChange (value) {
+      this.params.currPage = 1
+      console.log(' this.form: ', this.form)
+      this.handleGetData(Object.assign({}, this.form, this.params))
+    },
+    handlePush (id) {
+      this.$router.push({name: 'assessment-stepList', query: {id}})
+    },
+    async handleGetData (parmas = this.params) {
+      try {
+        const res = await apiGetAssessList(parmas)
+        console.log('res: ', res)
+        this.tableData = res.list
+        this.params.totalCount = res.totalCount
+        this.params.currPage = res.currPage
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+    handleChangePage (value) {
+      this.params.currPage = value
+      this.handleGetData()
+    },
+    handleRight () {
+      this.show = true
+    },
+    handleSelectClick (row, column, event) {
+      console.log('event: ', event)
+      console.log('column: ', column)
+      console.log('row: ', row)
+    },
+    handleToHome (i) {
+      this.$router.push({name: i})
+    },
+    deleteRow (index, rows) {
+      rows.splice(index, 1)
+    }
+  },
+  watch: {
+    'form.cycleType' (n, o) {
+      this.handleChange()
+    }
+  }
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.assessment{
+
+  .footer{
+    text-align: right;
+    margin: 20px 0 0 0;
+  }
+  .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/assessment/index.vue

@@ -1,180 +1,27 @@
 <!--  -->
 <template>
-    <div class="assessment">
+    <div>
-      <div class="assessment-form">
+        <router-view></router-view>
-        <el-form ref="form" inline :model="form" >
-          <div>
-            <el-form-item >
-              <el-select  size="small"  v-model="form.value" placeholder="请选择" style="width:100px">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <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-button type="primary"  size="small"  @click="handleRight">发起考核</el-button>
-            </el-form-item>
-            <el-form-item >
-              <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%">
-        <el-table-column
-          fixed
-          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>
-          </template>
-        </el-table-column>
-      </el-table>
-      </div>
-      <popup-set :show.sync='show'></popup-set>
-      <!-- 考核管理
-      <el-button type="success" @click="handleToHome('home')">去二级页面</el-button>
-      <el-button type="success" @click="handleToHome('home1')">去二级页面带弹窗</el-button> -->
     </div>
 </template>
 
 <script>
-import popupSet from './components/popup'
 export default {
-  components: {
-    popupSet
-  },
   data () {
     return {
-      show: false,
+
-      options: [
-        {
-          value: '1',
-          label: '全部'
-        }, {
-          value: '2',
-          label: '月度'
-        }, {
-          value: '3',
-          label: '季度'
-        }, {
-          value: '4',
-          label: '半年度'
-        }, {
-          value: '5',
-          label: '年度'
-        }
-      ],
-      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 () {
+  mounted () {},
-    this.form.value = this.options[0].value
+  methods: {},
-  },
-  methods: {
-    handleRight () {
-      this.show = true
-    },
-    handleSelectClick (row, column, event) {
-      console.log('event: ', event)
-      console.log('column: ', column)
-      console.log('row: ', row)
-    },
-    handleToHome (i) {
-      this.$router.push({name: i})
-    },
-    deleteRow (index, rows) {
-      rows.splice(index, 1)
-    }
-  },
   watch: {}
 
 }
 
 </script>
 
-<style lang='less' scoped>
+<style lang='' 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/assessment/performance/index.vue

@@ -0,0 +1,148 @@
+<!--  -->
+<template>
+    <div class="performance">
+        <SmallNav />
+        <div class="performance-content boderAndRadius">
+          <div class="performance-content-top">
+            <div class="performance-content-top-left">
+               <el-select size="small" v-model="form.value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+            </div>
+            <div class="performance-content-top-right">
+               <el-button size="small" plain>沟通管理</el-button>
+               <el-button size="small" plain>管理</el-button>
+            </div>
+          </div>
+          <div class="performance-content-center">
+              <div class="performance-content-center-item" v-for="i in 10"></div>
+          </div>
+          <div class="performance-content-bottom">
+              <el-table
+                :data="tableData"
+                :header-cell-style="{background:'#F5F7FA'}"
+                border
+                style="width: 100%">
+                <el-table-column
+                  prop="date"
+                  label="日期"
+                  align="center"
+                  width="180">
+                  <template slot-scope="scope">
+                    <div>
+                      <div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="姓名"
+                  align="center"
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="address"
+                  align="center"
+                  label="地址">
+                </el-table-column>
+              </el-table>
+          </div>
+          <div class="performance-content-jilu">
+            ss
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+export default {
+  data () {
+    return {
+      form: {},
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.performance{
+  overflow: auto;
+  &-content{
+    padding: 28px;
+    margin: 10px 0;
+    // height: 700px;
+    // overflow: auto;
+    &-top{
+      border-bottom: 1px solid @borderColor;
+      padding-bottom: 20px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-center{
+      display: flex;
+      flex-wrap: wrap;
+      margin: 20px 0;
+      &-item{
+        width: 20%;
+        height: 20px;
+        background: #09f;
+        position: relative;
+      }
+    }
+    &-jilu{
+
+    }
+  }
+}
+</style>

src/views/kpi/assessment/stepList/index.vue

@@ -0,0 +1,190 @@
+<!--  -->
+<template>
+    <div class="step">
+         <small-nav :showTitle='false'>
+           <div slot="content">
+            <el-cascader size="small" :props="props"></el-cascader>
+           </div>
+         </small-nav>
+         <div class="step-content boderAndRadius">
+            <div class="step-content-top">
+              <div class="step-content-top-left">
+                <el-button size="small" plain>选择部门<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
+                <el-button size="small" plain>选择考评组<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
+                <el-input size="small" style="margin-left:10px;" v-model="formInline.user"  prefix-icon="el-icon-search" placeholder="请输入姓名搜索"></el-input>
+              </div>
+              <div class="step-content-top-right">
+                <el-button size="small"  type="primary">开始评分</el-button>
+                <el-button size="small" plain>更多</el-button>
+              </div>
+            </div>
+            <div  class="step-content-center boderAndRadius">
+              <div class="step-content-center-item commonFont" v-for="(i,index) in titleList" :key="i.id">
+                <span class="hover" style="cursor: pointer;">{{i.name}}({{i.number}})</span>
+                <div v-if="index<titleList.length-1" class="step-content-center-item-img">
+                  <img v-if="titleList.length>2 && index===0"  src="./img/shu.jpg" alt="">
+                  <img v-else  src="./img/right.jpg" alt="">
+                </div>
+              </div>
+            </div>
+            <div>
+              <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                  prop="date"
+                  label="日期"
+                  align='center'
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="姓名"
+                  align='center'
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="address"
+                  align='center'
+                  label="地址">
+                   <template slot-scope="scope">
+                    <div>
+                      {{scope.row}}
+                    </div>
+                  </template>
+                </el-table-column>
+
+              </el-table>
+            </div>
+         </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+let id = 0
+export default {
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+      formInline: {},
+      titleList: [{
+        id: 10,
+        name: '全部',
+        number: 5
+      }, {
+        id: 11,
+        name: '全部',
+        number: 5
+      }, {
+        id: 12,
+        name: '全部',
+        number: 5
+      }, {
+        id: 13,
+        name: '全部',
+        number: 5
+      }, {
+        id: 14,
+        name: '全部',
+        number: 5
+      }, {
+        id: 15,
+        name: '全部',
+        number: 5
+      }, {
+        id: 10,
+        name: '全部',
+        number: 5
+      }],
+      props: {
+        lazy: true,
+        lazyLoad (node, resolve) {
+          const { level } = node
+          setTimeout(() => {
+            const nodes = Array.from({ length: level + 1 })
+              .map(item => ({
+                value: ++id,
+                label: `选项${id}`,
+                leaf: level >= 2
+              }))
+              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+            resolve(nodes)
+          }, 1000)
+        }
+      }
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.step-content{
+  padding: 28px;
+  width: 100%;
+  margin: 20px 0;
+  height: 537px;
+  background: #fff;
+  &-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &-left{
+      display: flex;
+      align-items: center;
+    }
+  }
+  &-center{
+    margin: 30px 0;
+    padding: 0 40px;
+    min-height: 40px;
+    background: #f6f6f6;
+    display: flex;
+    flex-wrap: wrap;
+    &-item{
+      height: 40px;
+      .hover:hover{
+        color: @fontBlue;
+      }
+      .active{
+        color: @fontBlue;
+      }
+      .center();
+      &-img{
+        height: 20px;
+        margin: 0 56px;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -92,6 +92,7 @@ export default {
       this.$message({
         message: '保存成功',
         type: 'success',
+        duration: 1000,
         onClose: () => {
           this.$router.replace({name: 'workbench-group'})
         }

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

@@ -59,7 +59,7 @@
             small
             @current-change="handleChangePage"
             layout="prev, pager, next"
-            page-size.sync='params.pageSize'
+            :page-size.sync='params.pageSize'
             :total="params.totalCount">
           </el-pagination>
       </div>