front/src/views/system/user/profile/apply-headteacher.vue

<template>
  <div class="app-container">
    <el-card>
      <template #header>申请班主任</template>
      <headteacher-form ref="header" :status="latestApplyStatus" @formCompleted="handleFormCompleted"></headteacher-form>
    </el-card>
    <el-card class="mt20">
      <template #header>
        <div class="fx-row fx-bet-cen">
          <span>申请列表</span>
          <!--    暂时不开放时间选择，因为在取第一项为表单项状态    -->
          <mx-date-range-picker v-if="false" v-model="dateRange">
          </mx-date-range-picker>
        </div>
      </template>
      <headteacher-form-list ref="formList" :options="sharedOptions" @statusComputed="handleStatusChanged"></headteacher-form-list>
    </el-card>
  </div>
</template>

<script>
import HeadteacherForm from '@/views/system/user/profile/components/headteacher-form'
import HeadteacherFormList from '@/views/system/user/profile/components/headteacher-form-list'
import { mapActions } from 'vuex'
import * as ext from '@/utils'
import { getUserForms } from '@/api/webApi/form'
import consts from '@/common/mx-const'

export default {
  name: 'apply-headteacher',
  components: { HeadteacherFormList, HeadteacherForm },
  data() {
    return {
      latestApplyStatus: '',
      dateRange: ext.getDefaultDateRange(1),
      queryFormTypes: [
        consts.enum.formType.addClassMaster,
        consts.enum.formType.delClassMaster,
        consts.enum.formType.updateClassMaster
      ],
    }
  },
  computed: {
    pageTitle() {
      return this.$route.name == 'Apply-headteacher' ? '申请班主任' : '更换班主任'
    },
    sharedOptions() {
      return {
        queryApi: getUserForms,
        queryParams: {
          begin: this.dateRange.first(),
          end: this.dateRange.last(),
          formType: this.queryFormTypes.toString()
        }
      }
    }
  },
  methods: {
    ...mapActions(['GetInfo']),
    handleFormCompleted() {
      this.GetInfo()
      this.$refs.formList.resetQuery()
    },
    handleStatusChanged(val) {
      this.latestApplyStatus = val
    }
  }
}
</script>

<style scoped>

</style>