update

src/views/trainStudent/index.vue

@@ -1,105 +1,127 @@
-<template>
-  <div id="index">
-    <list-frame title="培训学生管理" @query="onsearch" :total="total" :needFilter="false" :needAdd="false">
-      <el-form :inline="true" size="mini">
-        <el-form-item label="姓名">
-          <el-input size="small" v-model="form.name" placeholder="请输入学校姓名"></el-input>
-        </el-form-item>
-        <el-form-item label="">
-          <el-button type="primary" size="mini" @click="onsearch()"> 查询</el-button>
-        </el-form-item>
-      </el-form>
-      <data-table :fields="fields" :data="list" :opera="opera"> </data-table>
-    </list-frame>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash';
-import listFrame from '@frame/layout/admin/list-frame';
-import dataTable from '@frame/components/data-table';
-import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions } = createNamespacedHelpers('attendance');
-const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
-const { mapActions: student } = createNamespacedHelpers('student');
-const { mapActions: classes } = createNamespacedHelpers('classes');
-export default {
-  metaInfo: { title: '培训学生管理' },
-  name: 'index',
-  props: {},
-  components: {
-    listFrame,
-    dataTable,
-  },
-  data: function() {
-    return {
-      classList: [],
-      termList: [],
-      opera: [],
-      fields: [
-        { label: '姓名', prop: 'name' },
-        { label: '性别', prop: 'gender' },
-        { label: '民族', prop: 'nation' },
-        { label: '身份证号', prop: 'id_number' },
-        { label: '手机号', prop: 'phone' },
-        { label: 'QQ号', prop: 'qq' },
-        { label: '邮箱', prop: 'email' },
-        { label: '培训期间职务', prop: 'job' },
-        // { label: '期', prop: 'termname' },
-        // { label: '批次', prop: 'batchname' },
-        // { label: '班级', prop: 'classname' },
-        { label: '是否优秀', prop: 'is_fine', format: i => (i === '0' ? '否' : i === '1' ? '是' : '无资格') },
-      ],
-      list: [],
-      total: 0,
-      form: {},
-      options: undefined,
-    };
-  },
-  created() {
-    this.onsearch();
-  },
-  methods: {
-    ...trainplan({ schPlanquery: 'query', planFetch: 'fetch' }),
-    ...classes({ classesquery: 'query' }),
-    ...student({ stuquery: 'query' }),
-    async search() {
-      const res = await this.planFetch(this.defaultOption.planid);
-      this.$set(this, `termList`, _.get(res.data, 'termnum'));
-      if (this.defaultOption.termid) this.form.termid = this.defaultOption.termid;
-      this.getClass(this.defaultOption.termid);
-    },
-    async getClass(termid) {
-      const res = await this.classesquery({ termid });
-      if (this.$checkRes(res)) this.$set(this, `classList`, res.data);
-    },
-    async onsearch({ skip = 0, limit = 10, ...info } = {}) {
-      const res = await this.stuquery({ skip, limit, ...info, schid: this.user.code });
-      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
-      this.$set(this, `total`, res.total);
-    },
-  },
-  computed: { ...mapState(['user', 'defaultOption']) },
-  watch: {
-    defaultOption: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!_.get(this, 'options')) {
-          this.$set(this, `options`, _.cloneDeep(val));
-          this.search();
-        } else {
-          let ntermid = _.get(val, 'termid');
-          let otermid = _.get(this.options, 'termid');
-          if (ntermid && !_.isEqual(ntermid, otermid)) {
-            this.$set(this, `options`, _.cloneDeep(val));
-            this.search();
-          }
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped></style>
+<template>
+  <div id="index">
+    <list-frame title="培训学生管理" @query="onsearch" :total="total" :needFilter="false" :needAdd="false">
+      <el-form :inline="true" size="mini">
+        <el-form-item label="姓名">
+          <el-input size="small" v-model="form.name" placeholder="请输入学校姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button type="primary" size="mini" @click="onsearch()"> 查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <span style="margin:0 10px;font-size:18px">本期学生: {{ count.total || 0 }}人</span>
+          <span style="margin:0 10px;font-size:18px;color:red">优秀学生: {{ count.good || 0 }}人</span>
+        </el-form-item>
+      </el-form>
+      <data-table :fields="fields" :data="list" :opera="opera"> </data-table>
+    </list-frame>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import listFrame from '@frame/layout/admin/list-frame';
+import dataTable from '@frame/components/data-table';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('attendance');
+const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
+const { mapActions: student } = createNamespacedHelpers('student');
+const { mapActions: classes } = createNamespacedHelpers('classes');
+export default {
+  metaInfo: { title: '培训学生管理' },
+  name: 'index',
+  props: {},
+  components: {
+    listFrame,
+    dataTable,
+  },
+  data: function() {
+    return {
+      classList: [],
+      termList: [],
+      opera: [],
+      fields: [
+        { label: '姓名', prop: 'name' },
+        { label: '性别', prop: 'gender' },
+        { label: '民族', prop: 'nation' },
+        { label: '身份证号', prop: 'id_number' },
+        { label: '手机号', prop: 'phone' },
+        { label: 'QQ号', prop: 'qq' },
+        { label: '邮箱', prop: 'email' },
+        { label: '培训期间职务', prop: 'job' },
+        { label: '学院', prop: 'faculty' },
+        { label: '专业', prop: 'major' },
+        // { label: '期', prop: 'termname' },
+        // { label: '批次', prop: 'batchname' },
+        // { label: '班级', prop: 'classname' },
+        { label: '是否优秀', prop: 'is_fine', format: i => (i === '0' ? '否' : i === '1' ? '是' : '无资格') },
+      ],
+      list: [],
+      total: 0,
+      form: {},
+      options: undefined,
+      count: {},
+    };
+  },
+  created() {
+    this.onsearch();
+    this.getCount();
+  },
+  methods: {
+    ...trainplan({ schPlanquery: 'query', planFetch: 'fetch' }),
+    ...classes({ classesquery: 'query' }),
+    ...student({ stuquery: 'query' }),
+    async search() {
+      const res = await this.planFetch(this.defaultOption.planid);
+      this.$set(this, `termList`, _.get(res.data, 'termnum'));
+      if (this.defaultOption.termid) this.form.termid = this.defaultOption.termid;
+      this.getClass(this.defaultOption.termid);
+    },
+    async getClass(termid) {
+      const res = await this.classesquery({ termid });
+      if (this.$checkRes(res)) this.$set(this, `classList`, res.data);
+    },
+    async onsearch({ skip = 0, limit = 10, ...info } = {}) {
+      const { termid } = this.defaultOption;
+      const res = await this.stuquery({ skip, limit, ...info, schid: this.user.code, termid });
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
+      this.$set(this, `total`, res.total);
+    },
+    async getCount() {
+      const { termid } = this.defaultOption;
+      const res = await this.stuquery({ schid: this.user.code, termid });
+      if (this.$checkRes(res)) {
+        const { data } = res;
+        this.$set(this.count, `total`, data.length);
+        console.log(data.filter(f => f.is_fine === '1'));
+        const goods = data.filter(f => f.is_fine === '1').length;
+        this.$set(this.count, `good`, goods);
+      }
+    },
+  },
+  computed: { ...mapState(['user', 'defaultOption']) },
+  watch: {
+    defaultOption: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!_.get(this, 'options')) {
+          this.$set(this, `options`, _.cloneDeep(val));
+          this.search();
+        } else {
+          let ntermid = _.get(val, 'termid');
+          let otermid = _.get(this.options, 'termid');
+          if (ntermid && !_.isEqual(ntermid, otermid)) {
+            this.$set(this, `options`, _.cloneDeep(val));
+            this.search();
+            this.onsearch();
+            this.getCount();
+          }
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>