eas_webadmin/src/views/lesson/group/index.vue

<template>
  <div class="h-full bg-white">
    <fs-crud v-if="!pageType" ref="crudRef" v-bind="crudBinding" />
    <div v-if="pageType" class="wh-full flex-col-center">
      <n-card style="width: 1200px" title="编辑班级学员" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <n-transfer ref="transfer" v-model:value="classStuList" :options="studentsAll" virtual-scroll />
        <n-button-group style="margin-top: 1rem; float: right">
          <n-button type="primary" @click="submitGroupStudent">提交</n-button>
          <n-button type="primary" @click="pageType = !pageType">取消</n-button>
        </n-button-group>
      </n-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { Option, OptionValue } from 'naive-ui/es/transfer/src/interface';
import { useFs } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';
import { queryClassStudentById, getAll, submitGroupStudentForm } from './api';
const pageType = ref<boolean>(false);
const classStuList = ref<number[] | undefined>([]);
const studentsAll = ref<Option[]>();
const groupId = ref<number>(0);
const router = useRouter();
async function submitGroupStudent() {
  await submitGroupStudentForm(groupId.value, classStuList.value);
  window.$message?.success('操作成功!');
  pageType.value = !pageType.value;
}
const context: any = {
  goToSchedule: (classId: number) => {
    router.push({
      path: '/lesson/schedule',
      query: {
        classId
      }
    });
  },
  openModel: async (classId: number) => {
    groupId.value = classId;
    const classStudent = await queryClassStudentById(classId);
    const studentAll = await getAll();
    classStuList.value = classStudent.data?.map(r => r.studentId);
    studentsAll.value = studentAll.data?.map(r => {
      return {
        label: r.studentName ? r.studentName + r.phone : '',
        value: (r.id ?? 0) as OptionValue,
        disabled: false
      };
    });
    pageType.value = true;
  }
};
const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });

onMounted(() => {
  crudExpose.doRefresh();
});
</script>

<style scoped></style>