youhua

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view class="main"/>
   </div>
 </template>
 

src/components/kpi-layout/AppMain.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="appamin">
       <transition name="fade" mode="out-in">
-        <router-view ></router-view>
+        <router-view  class="mainContent"></router-view>
       </transition>
     </div>
 </template>
@@ -31,6 +31,10 @@ export default {
   box-sizing: border-box;
   padding: 90px 80px 30px;
 }
+.mainContent{
+  width: 1360px;
+  margin: 0 auto;
+}
 
 </style>
 <style lang="less">

src/router/kpi_route.js

@@ -88,6 +88,15 @@ export default [
           title: '员工绩效详情',
           isNav: true
         }
+      },
+      {
+        path: 'goals',
+        name: 'assessment-goals',
+        component: (resolve) => require(['@/views/kpi/assessment/goals/index.vue'], resolve),
+        meta: {
+          title: '制定目标',
+          isNav: true
+        }
       }
       ]
     }, {

src/utils/elementConfig.js

@@ -27,13 +27,17 @@ import {
   Tooltip,
   Popover,
   Pagination,
-  Cascader
+  Cascader,
+  Tabs,
+  TabPane
 } from 'element-ui'
 
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$alert = MessageBox.alert
 
+Vue.use(Tabs)
+Vue.use(TabPane)
 Vue.use(Cascader)
 Vue.use(Pagination)
 Vue.use(Popover)

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

@@ -0,0 +1,81 @@
+<!--  -->
+<template>
+    <div class="goals">
+        <SmallNav />
+        <div class="goals-content boderAndRadius">
+          <div class="goals-content-title">
+            <div class="goals-content-title-img">
+              <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
+            </div>
+            <div class="goals-content-title-right commonFont">
+              <span style="font-size:14px;">熊成强</span>
+              <span style="font-size:12px;">技术部门</span>
+            </div>
+          </div>
+          <div class="goals-content-tabbar">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+              <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+              <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+              <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+export default {
+  data () {
+    return {
+      activeName: 'second'
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleClick (tab, event) {
+      console.log(tab, event)
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.goals{
+  &-content{
+    padding: 28px;
+    &-title{
+      margin: 0 0 10PX 0;
+      display: flex;
+      align-items: center;
+      &-img{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &-right{
+        margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &-tabbar{
+
+    }
+  }
+}
+</style>

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

@@ -15,7 +15,7 @@
                 </el-select>
             </div>
             <div class="performance-content-top-right">
-               <el-button size="small" plain>沟通管理</el-button>
+               <el-button size="small" @click="handleChangeTtitle" plain>沟通管理</el-button>
                <el-button size="small" plain>管理</el-button>
             </div>
           </div>
@@ -106,7 +106,12 @@ export default {
   computed: {},
   beforeMount () {},
   mounted () {},
-  methods: {},
+  methods: {
+    handleChangeTtitle () {
+      // this.$route
+      console.log('this.$route: ', this.$route.meta.title = '123')
+    }
+  },
   watch: {}
 
 }

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

@@ -115,7 +115,9 @@ export default {
       }],
       props: {
         lazy: true,
-        lazyLoad (node, resolve) {
+        lazyLoad: (node, resolve) => {
+          console.log(this)
+          console.log('node: ', node)
           const { level } = node
           setTimeout(() => {
             const nodes = Array.from({ length: level + 1 })
@@ -151,6 +153,7 @@ export default {
   margin: 20px 0;
   height: 537px;
   background: #fff;
+  width: 100%;
   &-top{
     display: flex;
     align-items: center;