front/src/views/system/user/profile/subjectDetail.vue

<template>
  <el-row :gutter="24" class="mb8">
    <el-col :span="24">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="科目" prop="subjectId">
          <el-checkbox-group v-model="form.subjectId">
            <el-checkbox v-for="(item,idx) in userSubjectList" :key="idx" :label="item.subjectid"
                         :disabled="!isFrontTeacher">
              {{ item.subjectname }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-col>
    <div class="text-center" v-if="isFrontTeacher">
      <el-button type="primary" @click="onSubmit" round style="width:150px">提交</el-button>
    </div>
  </el-row>
</template>

<script>
import subjectMixin from '@/components/Cache/modules/mx-subject-translate-mixin'
import { mapActions, mapGetters } from 'vuex'
import { updateUserSubjectsList } from '@/api/webApi/system'

export default {
  mixins: [subjectMixin],
  data() {
    return {
      form: {
        subjectId: []
      },
      rules: {
        subjectId: [{ required: true, message: '至少选择1个科目' }]
      }
    }
  },
  computed: {
    ...mapGetters(['currentUser', 'isFrontTeacher'])
  },
  mounted() {
    this.loadBindSubjects()
  },
  methods: {
    ...mapActions(['GetInfo']),
    loadBindSubjects() {
      this.form.subjectId = this.currentUser.customerSubjects?.map(s => s.subjectId) || []
    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        const commit = this.form.subjectId.map(id => ({ subjectId: id }))
        updateUserSubjectsList({
          customerSubject: commit
        }).then((response) => {
          this.GetInfo()
          this.msgSuccess('保存成功')
        })
      })
    }
  }
}
</script>

<style scoped>
</style>