train-student/src/views/class/achieve.vue

<template>
  <div id="achieve">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <!-- <topInfo></topInfo> -->
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <achieves
            :peaceAchieveList="peaceAchieveList"
            @showBtn="showBtn"
            @showGuan="showGuan"
            @access="clickscore"
            :achieveList="achieveList"
            :show="show"
            :form="form"
            :score="score"
            :formscore="formscore"
            @clickDialog="clickAchieve"
            @submit="submitAchieve"
          ></achieves>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import achieves from '@/layout/class/achieve.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapStudent } = createNamespacedHelpers('student');

export default {
  name: 'achieve',
  props: {},
  components: {
    NavBar, //头部导航
    achieves, //班级学生成绩列表
  },
  data: () => ({
    peaceAchieveList: [],
    // showPicker: false,
    // score: '',
    score: false,
    formscore: {},
    studid: '',
    achieveList: [
      {
        studentid: '刘裕',
        lesson: [
          {
            lessonid: '拓展训练',
            score: '20',
          },
          {
            lessonid: '简历制作',
            score: '20',
          },
        ],
      },
      {
        studentid: '刘裕',
        lesson: [
          {
            lessonid: '拓展训练',
            score: '20',
          },
          {
            lessonid: '简历制作',
            score: '20',
          },
        ],
      },
    ],
    show: false,
    form: {},
    title: '',
    isleftarrow: '',
    transitionName: 'fade',
    navShow: true,
  }),
  created() {
    this.search();
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
  methods: {
    ...mapStudent({ list: 'query', add: 'create', fet: 'fetch', updates: 'update' }),
    async search() {
      let classid = this.user.classid;
      const res = await this.list({ classid });
      this.$set(this, `peaceAchieveList`, res.data);
    },
    showBtn(id) {
      this.$set(this, `studid`, id);
      this.score = true;
    },
    showGuan() {
      this.score = false;
    },
    async clickscore(formscore) {
      this.formscore.id = this.$route.query.id;
      let data = this.formscore;
      const ress = await this.updates(data);
      this.score = false;
    },
    clickAchieve() {
      this.show = true;
    },

    submitAchieve(form) {
      console.log(form);
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #eeeeee;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>