gengxin

src/layout/class/classInfo.vue

@@ -0,0 +1,180 @@
+<template>
+  <div id="classInfo">
+    <el-col :span="24" class="messageInfo">
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">班级名称</p>
+          <p class="name">{{ classinfo.name }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">班级人数</p>
+          <p class="name">{{ classinfo.number }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">批次</p>
+          <p class="name">{{ classinfo.batch }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">期</p>
+          <p class="name">{{ classinfo.term }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">礼仪课老师</p>
+          <p class="name">{{ classinfo.lyteacher }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">用餐地点</p>
+          <p class="name">{{ classinfo.yclocation }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">拓展计划地点</p>
+          <p class="name">{{ classinfo.kzjhlocation }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">开班仪式地点</p>
+          <p class="name">{{ classinfo.kbyslocation }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">教室位置</p>
+          <p class="name">{{ classinfo.jslocation }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="mess">
+        <el-col :span="22" class="info">
+          <p class="title">班级类型</p>
+          <p class="name">{{ classinfo.type }}</p>
+        </el-col>
+        <el-col :span="2" class="icon">
+          <van-icon name="arrow" />
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: classes } = createNamespacedHelpers('classes');
+const { mapActions: location } = createNamespacedHelpers('location');
+const { mapActions: teacher } = createNamespacedHelpers('teacher');
+const { mapActions: director } = createNamespacedHelpers('director');
+export default {
+  name: 'classInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    classinfo: {},
+  }),
+  created() {
+    this.search();
+  },
+  computed: {
+    ...mapState(['user', 'classid']),
+  },
+  methods: {
+    ...classes(['fetch']),
+    ...location({ locationFetch: 'fetch' }),
+    ...teacher({ teaFetch: 'fetch' }),
+    ...director({ dirFetch: 'fetch' }),
+    async search() {
+      const classinfo = (await this.fetch(this.classid)).data;
+      if (classinfo.yclocationid) {
+        classinfo.yclocation = (await this.locationFetch(classinfo.yclocationid)).data.name;
+      }
+      if (classinfo.kzjhlocationid) {
+        classinfo.kzjhlocation = (await this.locationFetch(classinfo.kzjhlocationid)).data.name;
+      }
+      if (classinfo.kbyslocationid) {
+        classinfo.kbyslocation = (await this.locationFetch(classinfo.kbyslocationid)).data.name;
+      }
+      if (classinfo.jslocationid) {
+        classinfo.jslocation = (await this.locationFetch(classinfo.jslocationid)).data.name;
+      }
+      if (classinfo.lyteacherid) {
+        let res = await this.teaFetch(classinfo.lyteacherid);
+        if (res.length < 1) {
+          res = await this.dirFetch(classinfo.lyteacherid);
+        }
+        classinfo.lyteacher = res.data.name;
+      }
+      this.$set(this, `classinfo`, classinfo);
+      console.log(classinfo);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.messageInfo {
+  margin: 0 0 10px 0;
+}
+.mess {
+  min-height: 50px;
+  border-bottom: 1px solid #efeff4;
+}
+.info {
+  padding: 0 15px;
+}
+.info .title {
+  font-size: 14px;
+  color: #92a1b1;
+  padding: 4px 0;
+}
+.info .name {
+  font-size: 16px;
+  color: #000;
+}
+.icon {
+  padding: 11px 0;
+  font-size: 20px;
+  color: #ccc;
+}
+</style>