user statistic optimize

src/components/StudentCard/index.vue

@@ -1,74 +1,82 @@
-<template>
-  <div class="block" style="cursor: pointer">
-    <el-image
-      style="width: 80px; height: 80px; border-radius: 50%"
-      :src="ensureUserAvatar()"
-    ></el-image>
-    <div class="mt10">
-      {{ name }}
-    </div>
-    <div v-if="state" class="evaluation-card-stateGroup">
-      <span
-        class="evaluation-card-state-item"
-        v-for="opt in stateOptions"
-        :key="opt"
-        :class="{ 'evaluation-card-stateActive': isStateActive(state, opt) }"
-        >{{ opt }}</span
-      >
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    avatar: {
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    stateOptions: {
-      type: Array,
-      default: () => [],
-    },
-    state: {
-      type: String,
-      default: "",
-    },
-    stateMatchFunc: {
-      type: Function,
-      default: (state, option) => state == option,
-    },
-  },
-  data() {
-    return {
-      defaultAvatar:
-        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-    };
-  },
-  methods: {
-    ensureUserAvatar: function () {
-        return this.avatar || this.defaultAvatar;
-    },
-    isStateActive: function (state, option) {
-      return this.stateMatchFunc(state, option);
-    },
-  },
-};
-</script>
-<style scoped>
-.evaluation-card-stateGroup {
-  padding: 10px;
-  font-size: 14px;
-  color: #cccccc;
-  text-align: center;
-}
-.evaluation-card-state-item {
-  margin: 0 5px;
-}
-.evaluation-card-stateActive {
-  color: #30b08f;
-}
-</style>
+<template>
+  <div class="block" style="cursor: pointer">
+    <el-image
+      style="width: 80px; height: 80px; border-radius: 50%"
+      :src="ensureUserAvatar()"
+    ></el-image>
+    <div class="mt10">
+      {{ name }}
+    </div>
+    <div v-if="userName" class="mt5 f14 light">
+      {{ userName }}
+    </div>
+    <div v-if="state" class="evaluation-card-stateGroup">
+      <span
+        class="evaluation-card-state-item"
+        v-for="opt in stateOptions"
+        :key="opt"
+        :class="{ 'evaluation-card-stateActive': isStateActive(state, opt) }"
+      >{{ opt }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    avatar: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    userName: {
+      type: String,
+      default: ''
+    },
+    stateOptions: {
+      type: Array,
+      default: () => []
+    },
+    state: {
+      type: String,
+      default: ''
+    },
+    stateMatchFunc: {
+      type: Function,
+      default: (state, option) => state == option
+    }
+  },
+  data() {
+    return {
+      defaultAvatar:
+        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+    }
+  },
+  methods: {
+    ensureUserAvatar: function() {
+      return this.avatar || this.defaultAvatar
+    },
+    isStateActive: function(state, option) {
+      return this.stateMatchFunc(state, option)
+    }
+  }
+}
+</script>
+<style scoped>
+.evaluation-card-stateGroup {
+  padding: 10px;
+  font-size: 14px;
+  color: #cccccc;
+  text-align: center;
+}
+
+.evaluation-card-state-item {
+  margin: 0 5px;
+}
+
+.evaluation-card-stateActive {
+  color: #30b08f;
+}
+</style>

src/router/index.js

@@ -119,7 +119,8 @@ export const constantRoutes = [{
       name: 'UserStatisticsInfo',
       meta: {
         title: '学生使用详情',
-        icon: 'user'
+        icon: 'user',
+        parentPath: '/user/info/components/record'
       }
     },
       {
@@ -128,7 +129,8 @@ export const constantRoutes = [{
         name: 'PersonInfo',
         meta: {
           title: '学生使用详情-具体',
-          icon: 'user'
+          icon: 'user',
+          parentPath: '/user/info/components/record'
         }
       }
     ]

src/views/system/user/profile/components/PersonInfo.vue

@@ -148,8 +148,8 @@ export default {
     ...mapGetters(['studentParams', 'currentUser'])
   },
   created() {
-    if (this.$route.params.type) {
-      this.routePrams = this.$route.params
+    if (this.$route.query.type) {
+      this.routePrams = this.$route.query
     }
     if (this.routePrams.type === 'login') {
       this.getUserStats()
@@ -167,7 +167,7 @@ export default {
   },
   methods: {
     goBack() {
-      this.$router.push({ name: "UserStatisticsInfo" })
+      this.$router.back()
     },
     getUserStatsTotal() {
       const params = {

src/views/system/user/profile/components/UserStatisticsInfo.vue

@@ -2,7 +2,7 @@
   <el-row :gutter="20" style="margin:10px" v-loading="loading">
     <el-card v-if="totalList.login && userInfo!==null ">
       <div slot="header" style="display: flex;justify-content: space-between;">
-        <span style="color:#47C6A2">{{title}} - {{ isFrontStudent?userInfo.userName:userInfo.customer.name }}</span>
+        <span style="color:#47C6A2">{{title}} - {{ userInfo.userName }}</span>
         <el-button v-if="!isFrontStudent" type="primary" @click="goBack">返回</el-button>
       </div>
       <el-col :span="24" :xs="18" style="text-align: right;margin-bottom: 10px;">
@@ -131,9 +131,9 @@ export default {
       this.selectParams.customerCode = this.currentUser.code;
     } else {
       //当前用户是老师或者校长
-      if (this.studentParams.customerCode) {
-        this.selectParams.customerCode = this.studentParams.customerCode;
-        this.userInfo = this.studentParams;
+      if (this.$route.query.customerCode) {
+        this.selectParams.customerCode = this.$route.query.customerCode;
+        this.userInfo = this.$route.query;
       }
     }
     this.getUserStatsSummary();
@@ -160,7 +160,7 @@ export default {
       });
     },
     detailList(type) {
-      this.$router.push({ name: "PersonInfo", params: { type: type } });
+      this.$router.push({ name: "PersonInfo", query: { type: type } });
     },
     //将中国标准时间转化成年月日的形式
     getDateDetail(date) {

src/views/system/user/profile/components/userRecord.vue

@@ -23,11 +23,12 @@
             @click.native="detail(item)"
             :name="item.customer && item.customer.name"
             :avatar="item.customer && item.customer.photo"
+            :user-name="item.customer && item.customer.username"
           ></student-card>
         </el-col>
       </el-row>
     </el-card>
-    <evaluation-empty v-else />
+    <evaluation-empty v-else/>
     <pagination
       v-show="total > 0"
       :total="total"
@@ -40,56 +41,56 @@
 </template>
 
 <script>
-  import { getStudents } from "@/api/webApi/back";
+import { getStudents } from '@/api/webApi/back'
 
-  export default {
-    data() {
-      return {
-        total: 0,
-        dataList: [],
-        queryParams: { pageNum: 1, pageSize: 50 },
-      };
+export default {
+  data() {
+    return {
+      total: 0,
+      dataList: [],
+      queryParams: { pageNum: 1, pageSize: 50 }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    classGradeChange(data) {
+      this.queryParams = { ...this.queryParams, ...data }
+      if (data.class && !data.clbum) return // 选了年级没有选班级
+      this.queryParams.pageNum = 1
+      this.getList()
     },
-    created() {
-      this.getList();
+    detail(user) {
+      const { customerCode, customer } = user
+      this.$router.push({ name: 'UserStatisticsInfo', query: { customerCode, userName: customer.name } })
     },
-    methods: {
-      classGradeChange(data) {
-        this.queryParams = { ...this.queryParams, ...data };
-        if (data.class && !data.clbum) return; // 选了年级没有选班级
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      detail(user) {
-        this.$store.dispatch('settings/setStudent', user)
-        this.$router.push({ name: "UserStatisticsInfo"});
-      },
-      getList() {
-        //if (!classId) return;
-        getStudents({
-          classId: this.queryParams.clbum,
-          pageNum: this.queryParams.pageNum,
-          pageSize: this.queryParams.pageSize,
-        }).then((rep) => {
-          console.log(
-            "getStudents by classId[" + this.queryParams.clbum + "] rep=",
-            rep
-          );
-          if (rep.code == 200 || rep.code == 0) {
-            this.dataList = rep.rows || rep.data;
-            this.total = rep.total || 0;
-          } else {
-            this.msgError(rep.msg || "getStudents请求异常");
-          }
-          this.loading = false;
-        });
-      },
-    },
-  };
+    getList() {
+      //if (!classId) return;
+      getStudents({
+        classId: this.queryParams.clbum,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize
+      }).then((rep) => {
+        console.log(
+          'getStudents by classId[' + this.queryParams.clbum + '] rep=',
+          rep
+        )
+        if (rep.code == 200 || rep.code == 0) {
+          this.dataList = rep.rows || rep.data
+          this.total = rep.total || 0
+        } else {
+          this.msgError(rep.msg || 'getStudents请求异常')
+        }
+        this.loading = false
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
-  .el-col-99 {
-    width: 10%;
-  }
+.el-col-99 {
+  width: 10%;
+}
 </style>