Merge branch 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui into v_1.0.0

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0",
+    "dingtalk-jsapi": "^2.13.7",
     "echarts": "^4.9.0",
     "element-ui": "^2.13.2",
     "less": "^3.8.1",
@@ -44,6 +45,7 @@
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
     "chromedriver": "^2.27.2",
+    "cli": "^1.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
@@ -84,7 +86,7 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"

src/api/initiateAssessment.js

@@ -1,5 +1,6 @@
 
 import request from '@/utils/request'
+
 //  发起考核
 export function apiInitiateAssessmentInfo (query) {
   return request({

src/api/login.js

@@ -0,0 +1,10 @@
+import requestFuc from '@/utils/request'
+
+// 钉钉免登录
+export function apiDingtalkLogin (query) {
+  return requestFuc({
+    url: '/lz_management/dtlg/login',
+    method: 'post',
+    params: query
+  })
+}

src/api/report.js

@@ -17,3 +17,20 @@ export function getStartsData (query) {
     data: query
   })
 }
+// 获取绩效排名详情
+export function getChartDetail (query) {
+  return requestFuc({
+    url: '/lz_management/performance/chart/detail',
+    method: 'POST',
+    data: query
+  })
+}
+
+// 获取部门信息
+export function getDepList (query) {
+  return requestFuc({
+    url: '/lz_management/staff/structure/deplist',
+    method: 'GET',
+    params: query
+  })
+}

src/api/toDo.js

@@ -0,0 +1,10 @@
+import requestFuc from '@/utils/request'
+
+// 获取考核组列表
+export function apiGetWaitList (query) {
+  return requestFuc({
+    url: '/lz_management/performance/task/list',
+    method: 'POST',
+    data: query
+  })
+}

src/router/config_route.js

@@ -0,0 +1,11 @@
+export default [
+  {
+    path: '/dingTalkLogin',
+    name: 'dingTalkLogin',
+    component: (resolve) => require(['@/views/login/dingTalkLogin.vue'], resolve),
+    meta: {
+      title: '登录',
+      isNav: true
+    }
+  }
+]

src/router/index.js

@@ -1,17 +1,18 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import configRouter from './config_route.js'
 import kpiRouter from './kpi_route.js'
 Vue.use(Router)
 
-const routes = [
+const router = [
   {
     path: '/',
     redirect: kpiRouter.length > 0 ? kpiRouter[0].redirect : '/'
   }
-].concat(kpiRouter)
+]
 
 export default new Router({
   base: '/digitization/',
   mode: 'history',
-  routes
+  routes: [...configRouter, ...kpiRouter, ...router]
 })

src/router/kpi_route.js

@@ -147,6 +147,13 @@ export default [
         title: '智能测试带弹窗',
         pop: true
       }
+    }, {
+      path: 'report-detial',
+      name: 'reportDetial',
+      component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
+      meta: {
+        title: '绩效详情'
+      }
     }
     ]
   }

src/style/common.less

@@ -1,15 +1,28 @@
 @borderColor: #ebebeb;
 @fontBlue: #3ba1ff;
-@headerHeight:60px;
+@headerHeight: 60px;
-.boderAndRadius{
+
+.boderAndRadius {
   border: 1px solid @borderColor;
-  border-radius:6px ;
+  border-radius: 6px;
   background: #fff;
 }
+
 .commonFont {
   font-size: 16px;
   color: #52575b;
 }
+
+.comonPromptFont {
+  font-size: 14px;
+  color: #b1b1b1;
+}
+
+.common-main {
+  background-color: white;
+  padding: 40px 20px;
+}
+
 .noSelect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -18,7 +31,8 @@
   -ms-user-select: none;
   user-select: none;
 }
-.center(){
+
+.center() {
   display: flex;
   align-items: center;
   justify-content: center;

src/utils/request.js

@@ -25,9 +25,9 @@ const service = axios.create({
 const options = {
   fullscreen: true,
   target: document.querySelector('.appamin'),
-  background: 'rgba(255, 255, 255, 0.1)',
+  background: 'rgba(255, 255, 255, 0.8)',
   spinner: 'el-icon-loading',
-  text: '请求加载中。。。'}
+  text: '数据加载中'}
 
 // request拦截器
 service.interceptors.request.use(config => {

src/views/kpi/report/detail.vue

@@ -1,40 +1,121 @@
 <!--  -->
 <template>
-   <div>
+  <div>
-     <div>返回</div>
+    <div class="title_bar">
-     <span></span>
+      <div @click="handleBack">返回</div>
-     <div>等级分布详情<div>
+      <span></span>
-   </div>
+      <div>等级分布详情</div>
-   <div>
+    </div>
-    <el-cascader></el-cascader>
+    <div class="detail_content">
-    <el-table :data="tableData"
+        <el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
+      <el-table :data="tableData"
               border
-              :header-cell-style="{ background:'#F5F7FA'}">
+              :header-cell-style="{ background:'#F5F7FA'}"
-      <el-table-column></el-table-column>
+              style="margin-top:20px">
-      <el-table-column></el-table-column>
+        <el-table-column prop="staffName" label="姓名"></el-table-column>
-      <el-table-column></el-table-column>
+        <el-table-column prop="staffNo" label="工号"></el-table-column>
-      <el-table-column><el-table-column>
+        <el-table-column prop="departmentName" label="部门"></el-table-column>
+        <el-table-column prop="allScore" label="考评结果"></el-table-column>
+        <el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
     </el-table>
+    </div>
    </div>
 </template>
 
 <script>
+import {getChartDetail, getDepList} from '@/api/report'
 export default {
   data () {
     return {
-
+      // 表格数据
+      tableData: [],
+      // 部门数据列表
+      depList: []
     }
   },
   computed: {},
   beforeMount () {},
-  mounted () {},
+  mounted () {
-  methods: {},
+    this.handleDepListReq()
-  watch: {}
+    this.handleDetailReq()
+  },
+  methods: {
+    // 返回上一页
+    handleBack () {
+      this.$router.go(-1)
+    },
+    // 多选框转中处理
+    handleChange (val) {
+      this.handleDetailReq(val[1])
+    },
+    // 请求详情页面信息
+    async handleDetailReq (depId) {
+      let params = {
+        currPage: 1,
+        departmentId: depId,
+        flowProcess: this.$route.query.flowProcess,
+        startId: this.$route.query.startId,
+        pageSize: 20
+      }
+      let result = await getChartDetail(params)
+      this.tableData = result.data.list
+    },
+    // 请求部门信息
+    async handleDepListReq (handleNode) {
+      let params = {
+        type: 0
+      }
+      let result = await getDepList(params)
+      console.log(result)
+      this.depList = this.handleDepResult(result.data)
+    },
+    // 递归生成可用数组
+    handleDepResult (list) {
+      return Array.from(list).map(item => {
+        let resItem = {
+          value: item.departmentId,
+          label: item.departmentName
+        }
+        // 如果有下一级部门则递归调用
+        if (item.list && item.list.length > 0) {
+          let children = this.handleDepResult(item.list)
+          resItem['children'] = children
+        }
+        return resItem
+      })
+    }
+  },
+  watch: {
+
+  }
 
 }
-
 </script>
 
 <style lang='' scoped>
-
+.title_bar{
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.title_bar>:nth-child(1){
+  font-size: 16px;
+  color: #b4b4b4;
+  margin-right: 10px;
+}
+.title_bar>:nth-child(2){
+  height: 15px ;
+  width: 1px;
+  background: #333;
+}
+.title_bar>:nth-child(3){
+  font-size: 16px;
+  color: #333;
+  margin-left: 10px;
+}
+.detail_content{
+  background: white;
+  padding: 40px 20px;
+  border:solid 1px #b4b4b4;
+}
 </style>

src/views/kpi/report/index.vue

@@ -27,61 +27,65 @@
           <div>{{statisticals[4].desc}}</div>
         </div>
         <div>
-          <div>{{statisticals[4].num}}</div>
+          <div>{{statisticals[5].num}}</div>
-          <div>{{statisticals[4].desc}}</div>
+          <div>{{statisticals[5].desc}}</div>
         </div>
         <div>
-          <div>{{statisticals[4].num}}</div>
+          <div>{{statisticals[6].num}}</div>
-          <div>{{statisticals[4].desc}}</div>
+          <div>{{statisticals[6].desc}}</div>
         </div>
       </div>
       <div>
-        <div class="num_title">考核人数分析</div>
+      <div class="num_title">考核人数分析</div>
-        <div class="num_tips">
+      <div class="chart_content">
+        <div class="num_chart">
           <div>考核人数分析</div>
-          <div>参与考核部门人数</div>
+          <div id="num_chart"></div>
         </div>
         <div class="num_report">
-          <div id="num_chart"></div>
+          <div>参与考核部门人数</div>
-          <ul>
+          <ul class="num_report_list">
             <li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
               <div class="rep_list">
-                <div :class="handleliColor(index)">{{ index }}
+                <div style="display:flex">
-                </div>
+                  <div :style="handleliColor(index)">{{index}}</div>
-                <div>{{ assessItem.title }} {{ assessItem.num }}人</div>
+                  <div style="margin-left:10px">{{assessItem.desc}} </div>
                 </div>
+                <div>{{ assessItem.num }}人</div>
+              </div>
             </li>
           </ul>
         </div>
-        <div class="level_title">结果分析</div>
+      </div>
-        <div class="level_tips">等级分布</div>
+      <div class="level_title">结果分析</div>
-        <div class="reslut_display">
+    <div class="level_content">
+        <div class="level_chart">
+          <div class="level_tips">等级分布</div>
           <div id="level_chart"></div>
-          <el-table :data="tableData"
+        </div>
-                    :header-cell-style="{ background:'#F5F7FA'}"
+        <el-table :data="tableData"
-                    border
+                  :header-cell-style="{ background:'#F5F7FA'}"
-                    style="flex:1">
+                  border
-            <el-table-column prop="desc" label="绩效等级" width="200">
+                  style="flex-grow:2;margin-top:20px">
-            </el-table-column>
+          <el-table-column prop="desc" label="绩效等级">
-            <el-table-column prop="num" label="实际分布" width="200">
+          </el-table-column>
-            </el-table-column>
+          <el-table-column prop="num" label="实际分布">
-            <el-table-column label="操作" width="150">
+          </el-table-column>
-              <template slot-scope="scope">
+          <el-table-column label="操作" width="150">
-                <el-button
+            <template slot-scope="scope">
-                  @click.native.prevent="
+              <el-button
-                    handleDetailClick(scope.$index, tableData)
+                @click.native.prevent="handleDetailClick(scope.$index, scope.row)"
-                  "
                   type="text"
                   size="small"
                 >
-                  查看详情
+                查看详情
                 </el-button>
               </template>
             </el-table-column>
-          </el-table>
+        </el-table>
-        </div>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -102,6 +106,8 @@ export default {
       // 当前选择的月份
       pickerTime: '',
       //
+      startId: '',
+      //
       statisticals: [
         {num: '0', desc: '参与人数'},
         {num: '0', desc: '目标制定'},
@@ -249,12 +255,19 @@ export default {
       return {
         width: '20px',
         height: '20px',
+        'text-align': 'center',
+        'line-height': '20px',
+        color: 'white',
         background: color
       }
     },
-    //
+    // 页面跳转
     handleDetailClick (index, rows) {
-
+      this.$router.push({
+        path: ('report-detial'),
+        query: {startId: this.startId, flowProcess: rows.desc}
+      })
+      console.log(this.$router)
     },
     // Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
     handleChartYMul (val) {
@@ -274,7 +287,7 @@ export default {
     },
     //
     handleChange (val) {
-      console.log(val)
+      this.startId = val[1]
       this.handleChartDataReq(val[1])
     },
     // 获取报表内容
@@ -284,7 +297,7 @@ export default {
       }
       try {
         const result = await getChartData(params)
-        result.forEach((val, index) => {
+        result.data.forEach((val, index) => {
           console.log(val)
           if (val.type === 0) {
             // 头部数据
@@ -300,6 +313,7 @@ export default {
             this.assessNum = val.statisticals
             this.option.series[0].data = Array.from(this.assessNum).map(item => (item.num))
             this.option.xAxis[0].data = Array.from(this.assessNum).map(item => (item.desc))
+            console.log(this.option.xAxis[0].data)
             this.handleNumChart()
           }
         })
@@ -316,8 +330,7 @@ export default {
       }
       try {
         let res = await getStartsData(params)
-        res = res.data
+        handleNode(res.data)
-        handleNode(res)
       } catch (error) {
         console.log(error)
       }
@@ -329,10 +342,8 @@ export default {
 
 <style lang='' scoped>
 .report_content {
-  width: fit-content;
-  height: fit-content;
   background: white;
-  border-style: #fcfcfc solid 3px;
+  border: #fcfcfc solid 1px;
   margin-top:20px;
   padding-top:40px;
   padding-left: 20px;
@@ -340,17 +351,13 @@ export default {
 }
 .header {
   background: #fcfcfc;
-  width: fit-content;
+  display: flex;
+  align-items: center;
 }
 .header > div {
-  display: inline-block;
+  flex-grow: 1;
-  width: fit-content;
-  height: fit-content;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 30px;
-  padding-right: 30px;
   text-align: center;
+  padding:20px
 }
 .header > div > div:nth-child(1) {
   color: black;
@@ -366,28 +373,48 @@ export default {
   background: #333333;
   height: 30px;
   width: 1px;
-  margin-top: 20px;
 }
 .num_title{
   margin-top:20px;
   margin-bottom: 25px;
   color: #333333;
 }
-.num_tips > div:nth-child(1) {
+.chart_content{
-  display: inline-block;
+  display: flex;
-  color: #3a3a3a;
-  font-size: 14px;
-  width: fit-content;
-  padding-left: 20px;
-  position: relative;
 }
-.num_tips > div:nth-child(2) {
+.num_tips{
-  display: inline-block;
+  display: flex;
+}
+.num_chart {
+  flex-grow: 1;
+}
+.num_chart>:nth-child(1){
   color: #3a3a3a;
   font-size: 14px;
-  width: fit-content;
+  padding-left: 20px;
-  padding-left: 50%;
+}
-  position: relative;
+.num_report {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.num_report>:nth-child(1){
+  color: #3a3a3a;
+  font-size: 14px;
+}
+.num_report_list{
+  margin-top: 20px;
+  height: 360px;
+  overflow:auto
+}
+.rep_list{
+  width: 200px;
+  display: flex;
+  margin-bottom: 10px;
+  justify-content: space-between;
+}
+.rep_list>:nth-child(2){
+  text-align: start;
 }
 .level_title{
   margin-top:20px;
@@ -404,20 +431,19 @@ export default {
 .num_report{
   display: flex
 }
-.rep_list{
-  display: flex;
-}
 #num_chart {
-  display: inline-block;
+  widows: 500px;
-  width: 600px;
   height: 360px;
 }
-.reslut_display {
+.level_content{
   display: flex;
 }
+.level_chart {
+  display: flex;
+  flex-grow: 1;
+}
 #level_chart {
-  width: 600px;
+  width: 500px;
   height: 360px;
-  flex: 1;
 }
 </style>

src/views/kpi/set/index.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="set-mian commonFont">
+  <div class="set-mian commonFont common-main">
     <el-menu
       :default-active="activeIndex"
       mode="horizontal"
@@ -47,8 +47,7 @@ export default {
 
 <style lang='less' scoped>
 .set-mian {
-    background-color: white;
+  padding-top: 0px;
-    min-height: 600px;
+  min-height: 600px;
-    padding: 25px;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="initiate-assessment commonFont">
+  <div class="initiate-assessment commonFont common-main">
     <el-form
       :model="formData"
       :rules="formRules"
@@ -138,7 +138,7 @@
             </el-table>
             <div
               v-else
-              class="popup-empty"
+              class="popup-empty comonPromptFont"
             >
               <img
                 src=""
@@ -290,7 +290,7 @@ export default {
       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.$router.push({ name: 'assessment-stepList', query: { id: res.data.id, name: 'assessment-homeList' } })
         this.$message({
           message: res.msg,
           type: 'success'
@@ -338,36 +338,34 @@ export default {
 </script>
 <style lang="less" scoped>
 .initiate-assessment {
-    padding: 25px;
+  min-height: 600px;
-    background-color: white;
+  .title {
-    min-height: 600px;
+    margin-bottom: 25px;
-    .title {
+  }
-        margin-bottom: 25px;
+  .choose-group {
+    margin-top: 200px;
+  }
+  .line-space {
+    margin-top: 20px;
+  }
+  .popup {
+    &-search {
+      margin-bottom: 20px;
     }
-    .choose-group {
+    &-empty {
-        margin-top: 150px;
+      padding-top: 100px;
+      height: 500px;
+      width: 410px;
+      font-size: 14px;
+      text-align: center;
+      display: block;
+      align-content: center;
+      justify-content: center;
     }
-    .line-space {
-        margin-top: 20px;
-    }
-    .popup {
-        &-search {
-            margin-bottom: 20px;
-        }
-        &-empty {
-            padding-top: 100px;
-            height: 500px;
-            width: 410px;
-            font-size: 14px;
-            text-align: center;
-            display: block;
-            align-content: center;
-            justify-content: center;
-        }
 
-        &-footer-left {
+    &-footer-left {
-            color: @fontBlue;
+      color: @fontBlue;
-        }
     }
+  }
 }
 </style>

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

@@ -1,18 +1,96 @@
 <!--  -->
 <template>
-    <div class="todo">
+  <div class="todo commonFont">
-      <small-nav />
+    <small-nav />
-      <div class="todo-content boderAndRadius">
+    <div class="todo-content boderAndRadius">
-        待办事项
+      <div class="todo-content-left">
+        <el-menu
+          @select="handleMenuSeledt"
+          :default-active="activeIndex"
+          style=" width: 200px; height: 100%;"
+        >
+          <el-menu-item index="0">待处理{{waitCount>0?'（' +waitCount + '）':''}}</el-menu-item>
+          <el-menu-item index="1">已处理</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="todo-content-right">
+        <div v-if="selectedTableList.length > 0">
+          <el-table
+            :data="selectedTableList"
+            @row-click="handleRowClick"
+            :show-header="false"
+            style="border-top: 1px solid #ebebeb;"
+            max-height="500"
+          >
+            <el-table-column width="100">
+              <template slot-scope="scope">
+                <img
+                  :src="scope.row.avatar"
+                  class="todo-content-right-avatar"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="title"></el-table-column>
+            <el-table-column
+              width="200"
+              align="right"
+            >
+              <template slot-scope="scope">
+                {{scope.row.time}}<i class="el-icon-arrow-right"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :hide-on-single-page="true"
+            :current-page.sync="pageSelectedInfo.currPage"
+            :page-size="pageSelectedInfo.pageSize"
+            :total="pageSelectedInfo.totalCount"
+            :page-count="pageSelectedInfo.totalPage"
+            @current-change="handleCurrentChange"
+            layout="total, prev, pager, next, jumper"
+          ></el-pagination>
+        </div>
+        <div
+          v-else
+          class="todo-content-right-empty comonPromptFont"
+        >
+          <img src="ssss" />
+          <div>暂无代办</div>
+        </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 import SmallNav from '@/components/kpi-layout/SmallNav'
+import { apiGetWaitList } from '@/api/toDo'
 export default {
   data () {
     return {
+      activeIndex: '0',
+      waitCount: 0,
+      // 选中项
+      selectedTableList: [],
+      pageSelectedInfo: {
+        currPage: 1,
+        pageSize: 20,
+        status: 0,
+        totalCount: 1,
+        totalPage: 1
+      },
+      // 待处理
+      waitTableList: [],
+      // 已处理
+      pageWaitInfo: {},
+      processedTableList: [],
+      pageProcessedInfo: {
+        currPage: 1,
+        pageSize: 20,
+        status: 1,
+        totalCount: 1,
+        totalPage: 1
+      }
 
     }
   },
@@ -20,9 +98,59 @@ export default {
     SmallNav
   },
   computed: {},
-  beforeMount () {},
+  beforeMount () { },
-  mounted () {},
+  mounted () {
+    this.handleGetList()
+  },
   methods: {
+    handleGetList () {
+      apiGetWaitList(this.pageSelectedInfo).then(res => {
+        this.pageSelectedInfo.currPage = res.data.currPage
+        this.pageSelectedInfo.totalCount = res.data.totalCount
+        this.pageSelectedInfo.totalPage = res.data.totalPage
+        if (this.activeIndex === '0') {
+          // 待处理事项
+          this.waitCount = res.data.totalCount
+        }
+        this.selectedTableList = res.data.list
+        console.log('待处理', res)
+      })
+    },
+    handleMenuSeledt (val) {
+      console.log('index ======', this.activeIndex)
+      console.log(val)
+      if (this.activeIndex !== val) {
+        console.log('menu 切换')
+        // 待处理 已处理 数据切换
+        if (val === '0') {
+          console.log('menu 0')
+          this.processedTableList = this.selectedTableList
+          this.pageProcessedInfo = this.pageSelectedInfo
+          this.selectedTableList = this.waitTableList
+          this.pageSelectedInfo = this.pageWaitInfo
+        } else {
+          console.log('menu 1')
+          this.waitTableList = this.selectedTableList
+          this.pageWaitInfo = this.pageSelectedInfo
+          this.selectedTableList = this.processedTableList
+          this.pageSelectedInfo = this.pageProcessedInfo
+        }
+        // 如果是第一页 刷新
+        console.log(this.pageSelectedInfo)
+        if (this.pageSelectedInfo.currPage === 1) {
+          this.handleGetList()
+        }
+      }
+      this.activeIndex = val
+    },
+    handleCurrentChange (val) {
+      // 页面变更
+      this.pageSelectedInfo.currPage = val
+      this.handleGetList()
+    },
+    handleRowClick (row) {
+      this.$router.push({ name: 'assessment-stepList', query: { id: row.recordId } })
+    }
   },
   watch: {}
 
@@ -31,11 +159,48 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.todo{
+.todo {
-  &-content{
+  &-content {
     width: 1252px;
-    min-height: 537px;
+    min-height: 278px;
     padding: 28px;
+    display: flex;
+    &-left {
+      width: 200px;
+      float: left;
+      .el-menu-item.is-active {
+        background-color: #ecf4ff !important;
+        border-left: 3px solid #409eff;
+        color: #999;
+        span {
+          color: #999 !important;
+        }
+      }
+    }
+    &-right {
+      // border-left: 2px solid @borderColor;
+      // padding-left: 20px;
+      padding: 20px;
+      flex: 1;
+      &-avatar {
+        width: 34px;
+        height: 34px;
+        border-radius: 17px;
+      }
+      .el-pagination {
+        text-align: right;
+        margin-top: 20px;
+      }
+      &-empty {
+        padding-top: 20px;
+        img {
+          width: 100px;
+          height: 100px;
+        }
+        height: 100%;
+        text-align: center;
+      }
+    }
   }
 }
 </style>

src/views/login/dingTalkLogin.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2 class="brand-info__text">{{dataForm.verify}}</h2>
+  </div>
+</template>
+
+<script>
+import * as dd from 'dingtalk-jsapi'
+import { apiDingtalkLogin } from '@/api/login'
+
+export default {
+  data () {
+    return {
+      dataForm: {
+        verify: '身份验证中...'
+      },
+      dingCode: '' // 获取钉钉授权码
+    }
+  },
+  created () {
+    this.handleGetDingtalkCode()
+  },
+  mounted () {},
+  methods: {
+    // 获取钉钉鉴权码
+    handleGetDingtalkCode () {
+      dd.runtime.permission.requestAuthCode({
+        corpId: 'ding267474e759bbca1c35c2f4657eb6378f',
+        onSuccess (res) {
+          console.log('result===', res)
+          this.dingCode = res
+          this.handleDingtalkLogin(res)
+        },
+        onFail (err) {
+          console.log('err===', err)
+          this.dingCode = err
+        }
+      })
+    },
+    // 钉钉免登录
+    handleDingtalkLogin (res) {
+      apiDingtalkLogin(res).then(res => {
+        if (res && res.code === 0) {
+          this.$cookie.set('token', res.token)
+          this.dataForm.verify = '登录成功，跳转中...'
+          window.open(window.location.protocol + '//' + window.location.host + '/kpi/workbench/home&code=' + this.dingCode.code, '_blank')
+        } else {
+          this.dataForm.verify = '身份验证失败' + res.msg
+          this.$message.error(this.dataForm.verify)
+          this.$router.replace({ name: 'dingTalkLogin' })
+        }
+      })
+    }
+  }
+}
+</script>