数据统计页面开发

src/api/data/data.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+const dataApi = {
+  orgStatistics: 'data/orgStatistics',
+  personalStatistics: 'data/personalStatistics',
+  classHourTop: 'data/personalStatistics/classHourTop'
+}
+
+export function dataOrgStatistics (params) {
+  return request({
+    url: dataApi.orgStatistics,
+    method: 'get',
+    params: params
+  })
+}
+export function dataPersonalStatistics (params) {
+  return request({
+    url: dataApi.personalStatistics,
+    method: 'get',
+    params: params
+  })
+}
+export function dataClassHourTop (params) {
+  return request({
+    url: dataApi.classHourTop,
+    method: 'get',
+    params: params
+  })
+}

src/components/Table/index.js

@@ -163,11 +163,11 @@ export default {
               this.localPagination.pageSize
           }) || false
           // 后端数据rows为null保存修复
-          if (r.rows == null) {
+          // if (r.rows == null) {
-            r.rows = []
+          //   r.rows = []
-          }
+          // }
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-          if (r.rows.length === 0 && this.showPagination && this.localPagination.current > 1) {
+          if (this.showPagination && r.rows.length === 0 && this.localPagination.current > 1) {
             this.localPagination.current--
             this.loadData()
             return

src/views/data/DataStatisticsList.vue

@@ -0,0 +1,365 @@
+<template>
+  <a-card :bordered="false">
+    <a-tabs default-active-key="1" @change="tabsCallback">
+      <a-tab-pane key="1" tab="部门信息统计" v-if="hasPerm('data:statistics:org')">
+        <a-row :gutter="24" >
+          <a-col :md="5" :sm="24">
+            <a-card :bordered="false" :loading="treeLoading">
+              <div v-if="this.orgTree != ''">
+                <a-tree
+                  :treeData="orgTree"
+                  :onLoadData="orgTree"
+                  v-if="orgTree.length"
+                  @select="handleClick"
+                  :defaultExpandAll="true"
+                  :defaultExpandedKeys="defaultExpandedKeys"
+                  :defaultSelectedKeys="defaultSelectedKeys"
+                  :replaceFields="replaceFields" />
+              </div>
+              <div v-else>
+                <a-empty :image="simpleImage" />
+              </div>
+
+            </a-card>
+          </a-col>
+          <a-col :md="19" :sm="24">
+            <a-card :bordered="false">
+              <div class="table-page-search-wrapper">
+                <a-form layout="inline">
+                  <a-row :gutter="48">
+                    <a-col :md="6" :sm="24">
+                      <a-form-item label="部门名称"><a-input v-model="queryParam.orgName" placeholder="请输入部门名称" @pressEnter="loadData1" /></a-form-item>
+                    </a-col>
+                    <a-col :md="8" :sm="24">
+                      <a-button type="primary" @click="$refs.table1.refresh(true)">查询</a-button>
+                      <a-button style="margin-left: 8px" @click="() => {queryParam = {}, this.loadData1()}">重置</a-button>
+                    </a-col>
+                  </a-row>
+                </a-form>
+              </div>
+              <s-table
+                ref="table1"
+                :columns="columns1"
+                :data="loadData1"
+                :rowKey="(record) => record.id"
+              >
+              </s-table>
+
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="个人统计" v-if="hasPerm('data:statistics:personal')" >
+        <a-row :gutter="24" >
+          <a-col :md="5" :sm="24">
+            <a-card :bordered="false" :loading="treeLoading">
+              <div v-if="this.orgTree != ''">
+                <a-tree
+                  :treeData="orgTree"
+                  :onLoadData="orgTree"
+                  v-if="orgTree.length"
+                  @select="handleClick"
+                  :defaultExpandAll="true"
+                  :defaultExpandedKeys="defaultExpandedKeys"
+                  :defaultSelectedKeys="defaultSelectedKeys"
+                  :replaceFields="replaceFields" />
+              </div>
+              <div v-else>
+                <a-empty :image="simpleImage" />
+              </div>
+
+            </a-card>
+          </a-col>
+          <a-col :md="19" :sm="24">
+            <a-card :bordered="false">
+              <div class="table-page-search-wrapper" >
+                <a-form layout="inline">
+                  <a-row :gutter="48">
+                    <a-col :md="6" :sm="24">
+                      <a-form-item label="部门名称"><a-input v-model="queryParam.orgName" placeholder="请输入部门名称" @pressEnter="loadData2" /></a-form-item>
+                    </a-col>
+                    <a-col :md="8" :sm="24">
+                      <a-button type="primary" @click="$refs.table2.refresh(true)">查询</a-button>
+                      <a-button style="margin-left: 8px" @click="() => {queryParam = {}, this.loadData2()}">重置</a-button>
+                    </a-col>
+                  </a-row>
+                </a-form>
+              </div>
+
+              <s-table
+                ref="table2"
+                :columns="columns2"
+                :data="loadData2"
+                :rowKey="(record) => record.id"
+              >
+              </s-table>
+
+            </a-card>
+          </a-col>
+        </a-row>
+
+        <a-divider>前十统计排名</a-divider>
+        <div class="table-operator">
+            <a-button @click="changeTopType(1)" ref="toFocus">公司排名年度学时前十统计</a-button>
+            <a-button @click="changeTopType(2)">公司累计学时学时前十统计</a-button>
+        </div> 
+        <s-table
+          v-show="topType==1"
+          ref="tableTop1"
+          :columns="columnsTop1"
+          :data="loadDataTop1"
+          :showPagination="false"
+          :rowKey="(record) => record.id"
+        >
+        </s-table>
+        
+        <s-table
+          v-show="topType==2"
+          ref="tableTop2"
+          :columns="columnsTop2"
+          :data="loadDataTop2"
+          :showPagination="false"
+          :rowKey="(record) => record.id"
+        >
+        </s-table>      
+      </a-tab-pane>
+    </a-tabs>
+
+  </a-card>
+</template>
+<script>
+  import { STable } from '@/components'
+  import { Empty } from 'ant-design-vue'
+  import { orgList } from '@/api/org/org'
+  import { listToTree } from '@/utils/util'
+  import { dataClassHourTop, dataOrgStatistics, dataPersonalStatistics } from '@/api/data/data'
+
+  export default {
+    components: {
+      STable
+    },
+    data () {
+      return {
+        // 查询参数
+        queryParam: { orgId: undefined, orgName: '' },
+        // 表头1
+        columns1: [
+          {
+            title: '单位名称',
+            dataIndex: 'orgName'
+          },
+          {
+            title: '学员数量',
+            dataIndex: 'studentCount'
+          },
+          {
+            title: '培训人数',
+            dataIndex: 'trainCount'
+          },
+          {
+            title: '培训率',
+            dataIndex: 'trainRate'
+          },
+          {
+            title: '年度学时',
+            dataIndex: 'yearClassHour'
+          },
+          {
+            title: '累计学时',
+            dataIndex: 'sumClassHour'
+          },
+          {
+            title: '人均学时',
+            dataIndex: 'avgClassHour'
+          }
+        ],
+        loadData1: parameter => {
+          return dataOrgStatistics(Object.assign(parameter, this.queryParam)).then((res) => {
+            return res
+          })
+        },
+        // 表头1
+        columns2: [
+          {
+            title: '姓名',
+            dataIndex: 'name'
+          },
+          {
+            title: '人员类型',
+            dataIndex: 'typeName'
+          },
+          {
+            title: '年度计划学时',
+            dataIndex: 'planClassHour'
+          },
+          {
+            title: '年度学时',
+            dataIndex: 'yearClassHour'
+          },
+          {
+            title: '累计学时',
+            dataIndex: 'sumClassHour'
+          },
+          {
+            title: '人均学时',
+            dataIndex: 'avgClassHour'
+          }
+        ],
+        loadData2: parameter => {
+          return dataPersonalStatistics(Object.assign(parameter, this.queryParam)).then((res) => {
+            return res
+          })
+        },
+        columnsTop1: [
+          {
+            title: '序号',
+            dataIndex: 'index',
+            key: 'index',
+            align: 'center',
+            width: 60,
+            customRender: (text,record,index) => `${index+1}`,
+          },
+          {
+            title: '姓名',
+            dataIndex: 'name'
+          },
+          {
+            title: '人员部门',
+            dataIndex: 'orgName'
+          },
+          {
+            title: '人员类型',
+            dataIndex: 'typeName'
+          },
+          {
+            title: '年度计划学时',
+            dataIndex: 'planClassHour'
+          },
+          {
+            title: '年度学时',
+            dataIndex: 'yearClassHour'
+          }
+        ],
+        loadDataTop1: parameter => {
+          return dataClassHourTop(Object.assign(parameter, {type : 1})).then((res) => {
+            return res.data
+          })
+        },
+        columnsTop2: [
+          {
+            title: '序号',
+            dataIndex: 'index',
+            key: 'index',
+            align: 'center',
+            width: 60,
+            customRender: (text,record,index) => `${index+1}`,
+          },
+          {
+            title: '姓名',
+            dataIndex: 'name'
+          },
+          {
+            title: '人员部门',
+            dataIndex: 'orgName'
+          },
+          {
+            title: '人员类型',
+            dataIndex: 'typeName'
+          },
+          {
+            title: '年度计划学时',
+            dataIndex: 'planClassHour'
+          },
+          {
+            title: '累计学时',
+            dataIndex: 'sumClassHour'
+          }
+        ],
+        loadDataTop2: parameter => {
+          return dataClassHourTop(Object.assign(parameter, {type : 2})).then((res) => {
+            return res.data
+          })
+        },
+        orgTree: [],
+        selectedRowKeys: [],
+        selectedRows: [],
+        defaultExpandedKeys: [],
+        defaultSelectedKeys: [],
+        treeLoading: true,
+        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+        replaceFields: {
+          children: 'children',
+          title: 'name',
+          key: 'id',
+          value: 'id'
+        },
+        orgId: '',
+        keyType: '1',
+        topType: 1
+      }
+    },
+    created () {
+      this.getOrgTree()
+    },
+    mounted () {
+      
+    },
+    methods: {
+      tabsCallback (key) {
+        if (key === '1') {
+          this.$refs.table1.refresh(true)
+        }
+        if (key === '2') {
+          this.$nextTick(()=>{
+            // 添加columns事件
+              this.$refs.table2.refresh(true)
+              this.$refs.toFocus.$el.focus()
+          })
+        }
+        this.keyType = key
+      },
+      getOrgTree () {
+        // 默认查询组织类型 1:单位部门
+        orgList({ orgType: 1 }).then(res => {
+          this.treeLoading = false
+          if (!res.code === 200 || !res.data.length) {
+            return
+          }
+          this.defaultExpandedKeys = []
+          this.defaultSelectedKeys = []
+          this.orgTree = listToTree(res.data, [], 0)
+          this.orgId = this.orgTree[0].id
+          this.defaultSelectedKeys.push(this.orgId)
+          for (var item of this.orgTree) {
+            if (item.pid === 0) {
+              this.defaultExpandedKeys.push(item.id)
+            }
+          }
+        })
+      },
+      /**
+       * 点击左侧机构树查询列表
+       */
+      handleClick (e) {
+        this.queryParam.orgId = e.toString()
+        if (this.keyType === '1') {
+          this.$refs.table1.refresh(true)
+        }
+        if (this.keyType === '2') {
+          this.$refs.table2.refresh(true)
+        }
+      },
+      changeTopType (type) {
+        this.topType = type
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .table-operator {
+    margin-bottom: 18px;
+  }
+  button {
+    margin-right: 8px;
+  }
+</style>

src/views/notice/NoticeDetail.vue

@@ -153,7 +153,9 @@ export default {
       }
       if (key === '2') {
         this.queryParam.isRead = 0
+        this.$nextTick(()=>{
           this.$refs.table2.refresh(true)
+        })  
       }
     }
   }

src/views/notice/NoticeList.vue

@@ -148,7 +148,9 @@
       tabsCallback (key) {
         if (key === '1') {
           this.queryParam.noticeRange = 1
+          this.$nextTick(()=>{
             this.$refs.table1.refresh(true)
+          })  
         }
         if (key === '2') {
           this.queryParam.noticeRange = 2

src/views/org/OrgList.vue

@@ -119,7 +119,9 @@
         }
         if (key === '2') {
           this.orgType = 2
+          this.$nextTick(()=>{
             this.$refs.table2.refresh(true)
+          })
         }
       },
       /**