feat: 修改分班页

src/views/attendance/message/index.vue

@@ -2,15 +2,15 @@
   <div class="bg-white m-4">
     <div class="p-4">
       <Tabs v-model:activeKey="activeKey">
-        <Tabs.TabPane key="1" tab="学生消费设置" :forceRender="true">
+        <Tabs.TabPane key="1" tab="学生消息设置" :forceRender="true">
           <BasicForm @register="registerForm">
-            <template #user="{model,field}">
+            <template #user="{ model, field }">
               <div
                 @click="handleSelect(2, field, model[field])"
                 class="selectInput"
-                style="min-height: 30px;"
+                style="min-height: 30px"
               >
-                <div style="display: flex;">
+                <div style="display: flex">
                   <template v-if="model[field]">
                     <div
                       class="selectListGroup"
@@ -31,7 +31,7 @@
                   </template>
                 </div>
 
-                <div style="margin-right: 8px; white-space: nowrap;">
+                <div style="margin-right: 8px; white-space: nowrap">
                   <span>添加+</span>
                 </div>
               </div>
@@ -41,13 +41,13 @@
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="教职工消息" :forceRender="true">
           <BasicForm @register="registerTeacherForm">
-            <template #user="{model,field}">
+            <template #user="{ model, field }">
               <div
                 @click="handleSelect(1, field, model[field])"
                 class="selectInput"
-                style="min-height: 30px;"
+                style="min-height: 30px"
               >
-                <div style="display: flex;">
+                <div style="display: flex">
                   <template v-if="model[field]">
                     <div
                       class="selectListGroup"
@@ -68,7 +68,7 @@
                   </template>
                 </div>
 
-                <div style="margin-right: 8px; white-space: nowrap;">
+                <div style="margin-right: 8px; white-space: nowrap">
                   <span>添加+</span>
                 </div>
               </div>

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

@@ -0,0 +1,83 @@
+<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>

src/views/educational/division/components/DsionStep2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="dsion-step2">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary">导入</a-button>
+        <a-button type="primary" @click="handelAdd">添加</a-button>
+      </template>
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    EditRecordRow,
+    ActionItem,
+    BasicColumn,
+  } from '/@/components/Table';
+  import { table2Columns } from '../data.config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { buildUUID } from '/@/utils/uuid';
+
+  const [registerTable, { insertTableDataRecord, deleteTableDataRecord }] = useTable({
+    // api: getEvaluateTemplatePage,
+    title: '班级列表',
+    rowKey: 'uid',
+    columns: table2Columns,
+    useSearchForm: false,
+    showTableSetting: true,
+    bordered: true,
+    immediate: true,
+    canResize: true,
+    pagination: false,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const currentEditKeyRef = ref('');
+  const { createMessage } = useMessage();
+
+  const handelAdd = () => {
+    insertTableDataRecord({ uid: buildUUID() });
+  };
+
+  const handleEdit = (record: EditRecordRow) => {
+    currentEditKeyRef.value = record.uid;
+    record.onEdit?.(true);
+  };
+
+  const handleCancel = (record: EditRecordRow) => {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  };
+
+  const handleDelete = (record: EditRecordRow) => {
+    deleteTableDataRecord(record.uid);
+  };
+
+  const handleSave = async (record: EditRecordRow) => {
+    const valid = await record.onValid?.();
+    if (valid) {
+      await record.onEdit?.(false, true);
+      currentEditKeyRef.value = '';
+    } else {
+      createMessage.error({ content: '请填写正确的数据', key: 'saving' });
+    }
+  };
+
+  const createActions = (record: EditRecordRow, column: BasicColumn): ActionItem[] => {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.uid : false,
+          onClick: handleEdit.bind(null, record),
+        },
+        {
+          label: '删除',
+          popConfirm: {
+            title: '是否删除',
+            confirm: handleDelete.bind(null, record, column),
+          },
+        },
+      ];
+    }
+    return [
+      {
+        label: '确定',
+        onClick: handleSave.bind(null, record, column),
+      },
+      {
+        label: '取消',
+        popConfirm: {
+          title: '是否取消编辑',
+          confirm: handleCancel.bind(null, record, column),
+        },
+      },
+    ];
+  };
+</script>
+
+<style lang="less" scoped>
+  .dsion-step2 {
+    margin: 24px 0;
+  }
+</style>

src/views/educational/division/data.config.ts

@@ -0,0 +1,79 @@
+
+import { requestMagicApi } from '/@/api/magicApi';
+import { getMajorSetOption } from '/@/api/userMagic';
+import { BasicColumn } from '/@/components/Table';
+
+export const table2Columns: BasicColumn[] = [
+  {
+    title: '专业方向',
+    dataIndex: 'majorSetId',
+    align: 'left',
+    width: 250,
+    editRow: true,
+    editRule: true,
+    editComponent: 'ApiSelect',
+    editComponentProps: {
+      api: getMajorSetOption,
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    title: '班级名称',
+    dataIndex: 'name',
+    align: 'left',
+    editRow: true,
+    editRule: true,
+    editComponent: 'Input',
+  },
+  {
+    title: '班级人数',
+    dataIndex: 'count',
+    align: 'left',
+    width: 80,
+    editRow: true,
+    editRule: true,
+    editComponent: 'InputNumber',
+    editComponentProps: {
+      min: 0,
+    },
+  },
+  {
+    title: '班主任',
+    dataIndex: 'teacherId',
+    align: 'left',
+    editRow: true,
+    editRule: true,
+    editComponent: 'ApiSelect',
+    editComponentProps: {
+      api: requestMagicApi,
+      params: { url: 'baseData/user/list?type=1' },
+      getPopupContainer: () => document.body,
+    },
+    width: 200,
+  },
+  {
+    title: '固定教室',
+    dataIndex: 'classroomId',
+    align: 'left',
+    editRow: true,
+    editRule: true,
+    editComponent: 'ApiSelect',
+    editComponentProps: {
+      api: requestMagicApi,
+      params: { url: 'baseData/classroom/option' },
+      getPopupContainer: () => document.body,
+    },
+    width: 150,
+  },
+  {
+    title: '是否订单班',
+    dataIndex: 'isOrder',
+    align: 'left',
+    width: 100,
+    editRow: true,
+    editComponent: 'Checkbox',
+    editValueMap: (value) => {
+      return value ? '是' : '否';
+    },
+  },
+];

src/views/educational/division/index.vue

@@ -1,14 +1,38 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <div class="h-full">
-      <div class="h-[100px]">
-        <Steps :current="state.stepIndex" :items="state.stepItems">
+    <div class="page-dsion">
+      <div class="page-dsion-header">
+        <Steps :percent="60" :current="state.stepIndex" :items="state.stepItems" type="navigation">
           <Steps.Step v-for="(item, index) in state.stepItems" :key="index">
             <template #title>{{ item.title }}</template>
           </Steps.Step>
         </Steps>
       </div>
-      <div class="h-full"> asdf </div>
+      <div class="page-dsion-body">
+        <DsionStep1 v-show="state.stepIndex === 0" />
+        <DsionStep2 v-show="state.stepIndex === 1" />
+      </div>
+      <div class="page-dsion-floor">
+        <a-button v-show="state.stepIndex !== 0" @click="handleStep(0)" class="ml-[24px]">
+          上一步
+        </a-button>
+        <a-button
+          v-show="state.stepIndex !== 4"
+          type="primary"
+          @click="handleStep(1)"
+          class="ml-[24px]"
+        >
+          下一步
+        </a-button>
+        <a-button
+          v-show="state.stepIndex === 4"
+          type="primary"
+          class="ml-[24px]"
+          @click="handleSubmit"
+        >
+          提交
+        </a-button>
+      </div>
     </div>
   </PageWrapper>
 </template>
@@ -16,7 +40,9 @@
 <script setup lang="ts">
   import { PageWrapper } from '/@/components/Page';
   import { Steps } from 'ant-design-vue';
-  import { reactive } from 'vue';
+  import { reactive, onMounted } from 'vue';
+  import DsionStep1 from './components/DsionStep1.vue';
+  import DsionStep2 from './components/DsionStep2.vue';
 
   const state = reactive({
     stepIndex: 0,
@@ -28,4 +54,44 @@
       { title: '分班确认' },
     ],
   });
+
+  const handleSubmit = () => {};
+
+  const handleStep = (type) => {
+    if (type == 1) {
+      state.stepIndex += 1;
+    } else {
+      state.stepIndex -= 1;
+    }
+  };
+
+  onMounted(async () => {});
 </script>
+
+<style lang="less" scoped>
+  .page-dsion {
+    width: 100%;
+    height: 100%;
+
+    &-header {
+      margin: 0 auto;
+      background-color: @component-background;
+      padding: 8px 16px;
+      border-radius: 16px;
+    }
+
+    &-body {
+      height: calc(100% - 80px - 60px);
+      display: flex;
+    }
+
+    &-floor {
+      height: 60px;
+      background-color: @component-background;
+      align-items: center;
+      display: flex;
+      justify-content: end;
+      padding-right: 16px;
+    }
+  }
+</style>