adminBigData/src/views/school/authConfig.vue

<template>
  <el-dialog v-model="authData.showDialog" :title="`${authData.schoolName} 权限管理`" width="620px">
    <div>
      <div class="page_tag">
        <el-radio-group v-model="authType" @change="ChangeTab">
          <el-radio-button value="1">开通年级</el-radio-button>
          <el-radio-button value="2" disabled>开通模块</el-radio-button>
        </el-radio-group>
      </div>
      <div class="page_jg_20"></div>
      <div v-if="authType == '1'" class="grade_content">
        <div v-for="(grade, index) in gradeList" :key="grade.levelCode" class="grade_level">
          <el-checkbox v-model="checkAll[index]" :indeterminate="!checkAll[index] && selectedGrades[index]?.length > 0" :label="grade.levelName" @click="CheckAllChange(index)" />
          <el-checkbox-group v-model="selectedGrades[index]" @change="(val: string[]) => handleGradeChange(val, index)">
            <el-checkbox v-for="item in grade.gradeList" :key="item.gradeCode" :label="item.gradeName" :value="item.gradeCode" />
          </el-checkbox-group>
          <!-- <div>
            <el-checkbox v-model="selectedGrades[index]" :label="item.gradeName" v-for="item in grade.gradeList" :key="item.gradeCode" @change="(val) =>handleGradeChange(val, item)" />
          </div> -->
        </div>
      </div>
    </div>
    <template #footer>
      <el-button class="button_border_gray cancel" @click="authData.showDialog = false">取消</el-button>
      <el-button class="button_background" :loading="submitLoading" @click="SubmitForm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: 'AuthConfig'
}
</script>
<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllGrade, addGrade } from '@/api/school'
interface AuthData {
  showDialog: boolean
  schoolName: string
  tenantCode: string
  id: string
}
let authData = inject<AuthData>('authData', {
  showDialog: false,
  schoolName: '',
  tenantCode: '',
  id: ''
})
interface GradeData {
  gradeName: string
  gradeCode: string
  schoolId: string
  gradeList: any[]
  levelCode: string
  levelName: string
  levelNumder?: number 
}
const gradeList = ref<GradeData[]>([])
const authType = ref('1')
const submitLoading = ref(false)
const checkAll = ref<boolean[]>([])
const selectedGrades = ref<string[][]>([])
onMounted (() => {
  GetAllGrade()
})
const GetAllGrade = () => {
  getAllGrade(authData.id).then((res: any) => {
    if(res.code == 200 && res.data) {
      const { data } = res
      gradeList.value = data
      gradeList.value.forEach((item, index) => {
        checkAll.value[index] = item.gradeList.length ? item.gradeList.every(i => i.schoolGradeId) : false
        if(item.gradeList.length) {
          selectedGrades.value[index] = item.gradeList.some(i => i.schoolGradeId) ? item.gradeList.map(i => {
            if(i.schoolGradeId) {
              return i.gradeCode
            }
          }) : []
        } else {
          selectedGrades.value[index] = []
        }
      })
    }
  })
}
const ChangeTab = (val: any) => {
  console.log(val)
}
const CheckAllChange = (index: number) => {
  if(!checkAll.value[index]) {
    selectedGrades.value[index] = gradeList.value[index].gradeList.map(item => item.gradeCode)
  }else {
    selectedGrades.value[index] = []
  }
}
const handleGradeChange = (val: any[], index: number) => {
  console.log(index)
  console.log(val)
  if(gradeList.value[index].gradeList.length == val.length) {
    checkAll.value[index] = true
  } else if(val.length == 0) {
    checkAll.value[index] = false
  } else {
    checkAll.value[index] = false
  }
}
const SubmitForm = async () => {
  if(!authData) {
    return
  }
  try {
    submitLoading.value = true
    let arrList = gradeList.value.map((item: any, index: number) => {
      let arr = item.gradeList.filter((i: any) => selectedGrades.value[index].includes(i.gradeCode))
      return {
        levelCode: item.levelCode,
        levelName: item.levelName,
        levelNumder: item.levelNumder,
        gradeList: arr
      }
    }).filter(item => item.gradeList.length)
    console.log(arrList)
    const res = await addGrade({
      tenantCode: authData.tenantCode,
      schoolInfoId: authData.id,
      adminLevelInfo: arrList
    })
    if(res.code == 200) {
      ElMessage.success(res.msg)
      authData.showDialog = false
    } else {
      ElMessage.error(res.msg)
    }
  } catch {} finally {
    submitLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.page_tag {
  padding: 0 20px;
}
.grade_content {
  padding: 0 20px;
  .grade_level {
    margin-bottom: 10px;
  }
}
</style>