web/src/views/educational/division/components/DsionStep1.vue

<template>
  <div class="dsion-step1">
    <div style="padding: 24px" class="flex">
      <div class="w-1/2">
        <div class="text-[20px] text-bold">分班学生范围</div>
        <div class="flex mt-8 items-center">
          <div class="w-[100px]">
            <span class="text-[#ff0000]">*</span>
            年级：
          </div>
          <Select style="width: 100%" v-model:value="state.gradeId" :options="state.gradeOptions" />
        </div>
        <div class="flex mt-4 items-center">
          <div class="w-[100px]">
            <span class="text-[#ff0000]">*</span>
            招生类型：
          </div>
          <Select
            style="width: 100%"
            v-model:value="state.enrollType"
            :options="state.enrollTypeOptions"
          />
        </div>
        <div class="flex mt-8">
          <div class="w-[100px]"> </div>
          <div> 已录取学生人数“xxx”人；已分班学生人数“xxx”人 </div>
        </div>
      </div>
      <div class="w-1/2 ml-4">
        <div class="text-[20px] text-bold">分班基本规则</div>
        <div class="flex mt-8">
          <Checkbox.Group v-model:value="state.checkboxItem" :options="state.checkedOptions" />
        </div>
        <div class="flex mt-2">
          <Radio.Group v-model:value="state.radioItem" :options="state.radioOptions" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Select, Checkbox, Radio } from 'ant-design-vue';
  import { onMounted, reactive } from 'vue';
  import { requestMagicApi } from '/@/api/magicApi';
  import { getDataOption } from '/@/api/system/dic';

  const state = reactive({
    gradeId: '',
    enrollType: '',
    checkboxItem: [],
    gradeOptions: [],
    enrollTypeOptions: [],
    radioItem: '',
    checkedOptions: [
      { label: '使每班的男女生性别比例比较均衡', value: '0' },
      { label: '使每班的学生成绩/年龄比例比较均衡', value: '1' },
      { label: '使每班的学生来源比例比较均衡', value: '2' },
      { label: '使每班的住宿类型比例比较均衡', value: '3' },
      { label: '使姓名相同的学生分到不同的班级', value: '4' },
      { label: '专业分班有限制条件时按高值分配', value: '5' },
    ],
    radioOptions: [
      { label: '使同专业班级人数比例比较均衡', value: '0' },
      { label: '使同专业班级一个班级排满在排下一个班级', value: '1' },
    ],
  });

  onMounted(async () => {
    state.gradeOptions = await requestMagicApi({ url: 'baseData/grade/option' });

    state.enrollTypeOptions = await getDataOption({ code: 'enroll_type' });
  });
</script>

<style lang="less" scoped>
  .dsion-step1 {
    margin: 24px auto;
    background-color: @component-background;
    border-radius: 16px;
    width: 1000px;
  }
</style>