wip: 招生计划界面写完一半

src/views/educational/enrollment/components/data.config.ts

@@ -0,0 +1,214 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { requestMagicApi } from '/@/api/magicApi';
+import { getDataOption } from '/@/api/system/dic';
+const statusMap = {
+  1: '待发布',
+  2: '已发布',
+  3: '已过期',
+};
+export const tableColumns: BasicColumn[] = [
+  {
+    title: '计划名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '招生类型',
+    dataIndex: 'semesterName',
+  },
+  {
+    title: '招生年级',
+    dataIndex: 'assessmentAddress',
+  },
+  {
+    title: '招生工作起始日期',
+    dataIndex: 'behaviorCategoryName',
+  },
+  {
+    title: '总的招生专业方向个数',
+    dataIndex: 'assessmentDate',
+  },
+  {
+    title: '总计划招生人数',
+    dataIndex: 'assessmentUserName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    customRender({ text }) {
+      return statusMap[text];
+    },
+  },
+];
+
+export const searchForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '招生计划名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'gradeId',
+    label: '年级',
+    component: 'ApiSelect',
+    componentProps: ({}) => {
+      return {
+        getPopupContainer: () => document.body,
+        api: requestMagicApi,
+        params: { url: 'baseData/grade/option' },
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return (
+            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          );
+        },
+      };
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '招生计划名称',
+    component: 'Input',
+    colProps: { span: 24 },
+    required: true,
+  },
+  {
+    field: 'type',
+    label: '招生类型',
+    component: 'ApiSelect',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      api: getDataOption,
+      params: { code: 'enroll_type' },
+    },
+    colProps: { span: 24 },
+    required: true,
+  },
+  {
+    field: 'gradeId',
+    label: '招生年级',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: ({}) => {
+      return {
+        getPopupContainer: () => document.body,
+        api: requestMagicApi,
+        params: { url: 'baseData/grade/option' },
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return (
+            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          );
+        },
+      };
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: 'startDate',
+    label: '招生工作开始时间',
+    component: 'DatePicker',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    colProps: { span: 24 },
+    required: true,
+  },
+  {
+    field: 'endDate',
+    label: '招生工作结束时间',
+    component: 'DatePicker',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    colProps: { span: 24 },
+    required: true,
+  },
+];
+
+export const planTableColumns: BasicColumn[] = [
+  {
+    title: '专业方向名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '所属校区',
+    dataIndex: 'semesterName',
+  },
+  {
+    title: '所属专业部',
+    dataIndex: 'm',
+  },
+  {
+    title: '层级',
+    dataIndex: 'level',
+  },
+];
+
+export const maintenanceSearchFormSchema: FormSchema[] = [
+  {
+    field: 'orgId',
+    label: '专业部',
+    component: 'ApiSelect',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      api: requestMagicApi,
+      params: { url: '/educational/six-dept-ooas/option' },
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'name',
+    label: '专业方向名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const maintenanceTableColumns: BasicColumn[] = [
+  {
+    title: '层次',
+    dataIndex: 'level',
+  },
+  {
+    title: '招生专业方向名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '所属校区',
+    dataIndex: 'orgName',
+  },
+  {
+    title: '所属专业部',
+    dataIndex: 'orgName',
+  },
+  {
+    title: '招生毕业中学数',
+    dataIndex: 'number',
+  },
+  {
+    title: '专业方向计划招生人数',
+    dataIndex: 'sum',
+    slots: { customRender: 'sum' },
+  },
+  {
+    title: '专业方向最大招生人数',
+    dataIndex: 'maxSum',
+    slots: { customRender: 'maxSum' },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+];

src/views/educational/enrollment/components/edit.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '/@/components/Modal';
+  import { ref } from 'vue';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  import { useForm } from '/@/components/Form';
+  import { formSchema } from './data.config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const emits = defineEmits(['success', 'register']);
+  const title = ref('');
+  const [modalReg, { setModalProps, closeModal }] = useModalInner((data) => {
+    title.value = data.isEdit ? '编辑招生计划' : '新增招生计划';
+  });
+  const [formReg, { validate, resetFields }] = useForm({
+    schemas: formSchema,
+    layout: 'vertical',
+    showActionButtonGroup: false,
+  });
+  const handleCancel = () => {
+    resetFields();
+    closeModal();
+  };
+  const { createMessage } = useMessage();
+  const handleSubmit = async () => {
+    const values = await validate();
+    setModalProps({
+      confirmLoading: true,
+    });
+    createMessage.success('新增成功');
+    await resetFields();
+    closeModal();
+    try {
+    } catch {
+      createMessage.warning('新增失败');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    width="600px"
+    @register="modalReg"
+    v-bind="$attrs"
+    :title="title"
+  >
+    <BasicForm @register="formReg" />
+  </BasicModal>
+</template>
+
+<style scoped lang="less"></style>

src/views/educational/enrollment/components/maintenance.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '/@/components/Modal';
+  import BasicTable from '/@/components/Table/src/BasicTable.vue';
+  import { useTable } from '/@/components/Table';
+  import { Checkbox } from 'ant-design-vue';
+  import {
+    maintenanceSearchFormSchema,
+    maintenanceTableColumns,
+    planTableColumns,
+  } from './data.config';
+  import { requestMagicApi } from '/@/api/magicApi';
+  import { ref, watch } from 'vue';
+  const CheckboxGroup = Checkbox.Group;
+  const indeterminate = ref(false);
+  const schoolList = ref<any>([]);
+  const selectCheckList = ref<any>([]);
+  const checkAll = ref<boolean>(false);
+  const [tableReg, { reload }] = useTable({
+    rowKey: 'id',
+    columns: planTableColumns,
+    title: '选择专业方向',
+    showTableSetting: true,
+    bordered: true,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: maintenanceSearchFormSchema,
+    },
+  });
+  const [selectTable, {}] = useTable({
+    title: '已生成招生专业方向+毕业中学关系',
+    useSearchForm: true,
+    columns: maintenanceTableColumns,
+    showTableSetting: true,
+    bordered: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: maintenanceSearchFormSchema,
+    },
+  });
+  const [modalReg, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    schoolList.value = await requestMagicApi({ url: '/baseData/graduateSchool/option' } as any);
+  });
+  const handleCheckChange = () => {
+    if (checkAll.value) {
+      selectCheckList.value = schoolList.value.map((item) => item.value);
+    } else {
+      selectCheckList.value = [];
+    }
+  };
+  watch(
+    () => selectCheckList.value,
+    (val) => {
+      indeterminate.value = !!val.length && val.length < schoolList.value.length;
+      checkAll.value = val.length === schoolList.value.length;
+    },
+  );
+</script>
+
+<template>
+  <BasicModal @register="modalReg" :canFullscreen="false" defaultFullscreen>
+    <div class="flex flex-col">
+      <div class="flex flex-row w-full">
+        <BasicTable class="w-1/2" @register="tableReg" />
+        <div
+          class="w-1/2 ml-[12px] border-solid border-1 border-[#ccc] rounded-lg p-4 flex flex-col justify-between"
+        >
+          <div class="flex flex-col justify-between">
+            <span class="text-[16px] font-bold ml-[8px]">选择毕业中学</span>
+            <div class="flex flex-col">
+              <div class="ml-[8px] mt-[12px]">
+                <Checkbox
+                  @change="handleCheckChange"
+                  :indeterminate="indeterminate"
+                  v-model:checked="checkAll"
+                >
+                  选择所有毕业学校
+                </Checkbox>
+              </div>
+              <CheckboxGroup v-model:value="selectCheckList">
+                <div class="flex flex-row flex-wrap">
+                  <Checkbox
+                    class="w-[150px]"
+                    :class="index === 0 ? 'isFirst' : ''"
+                    v-for="(item, index) in schoolList"
+                    :key="index"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </Checkbox>
+                </div>
+              </CheckboxGroup>
+            </div>
+          </div>
+          <div>
+            <a-button type="primary">生成招生专业方向+毕业中学关系</a-button>
+          </div>
+        </div>
+      </div>
+      <div class="mt-[24px]">
+        <BasicTable @register="selectTable">
+          <template #toolbar>
+            <a-button type="primary">预览</a-button>
+            <a-button type="primary">删除</a-button>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<style scoped lang="less">
+  .isFirst {
+    padding-left: 8px;
+    margin-right: 8px;
+  }
+</style>

src/views/educational/enrollment/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import { PageWrapper } from '/@/components/Page';
+  import { useTable } from '/@/components/Table';
+  import BasicTable from '/@/components/Table/src/BasicTable.vue';
+  import { searchForm, tableColumns } from './components/data.config';
+  import edit from './components/edit.vue';
+  import { useModal } from '/@/components/Modal';
+  import maintenance from './components/maintenance.vue';
+  const [modelReg, { openModal }] = useModal();
+  const [maintenanceReg, { openModal: openMaintenanceReg }] = useModal();
+  const [tableReg, { reload }] = useTable({
+    title: '招生计划名称',
+    columns: tableColumns,
+    useSearchForm: true,
+    showTableSetting: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchForm,
+    },
+  });
+  const handleEdit = (record: any, isEdit: boolean) => {
+    openModal(true, { ...record, isEdit: isEdit });
+  };
+  const handleMaintenance = () => {
+    openMaintenanceReg(true, {});
+  };
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="tableReg">
+      <template #toolbar>
+        <a-button @click="handleMaintenance">维护</a-button>
+        <a-button type="primary" @click="handleEdit(null, false)">新增</a-button>
+      </template>
+    </BasicTable>
+    <edit @register="modelReg" @success="reload()" />
+    <maintenance @register="maintenanceReg" />
+  </PageWrapper>
+</template>
+
+<style scoped lang="less"></style>