web/src/views/educational/studentScore/index.vue

<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <ClassTree class="w-1/3 xl:w-1/4" @select="handleSelect" />
    <BasicTable @register="registerTable" class="w-2/3 xl:w-3/4" :searchInfo="searchInfo">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看成绩',
              onClick: handleView.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <FormDetail @register="registerModal" />
  </PageWrapper>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import ClassTree from '/@/views/educational/class/components/ClassGroup.vue';
  import { getXjrUserPage } from '/@/api/dev/studentbasemanager';
  import { Recordable } from 'vite-plugin-mock';
  import { useModal } from '/@/components/Modal';
  import FormDetail from './detail.vue';

  const [registerTable, { reload }] = useTable({
    api: getXjrUserPage,
    title: '学生信息列表',
    rowKey: 'id',
    columns: [
      {
        title: '学号',
        dataIndex: 'credentialNumber',
        align: 'left',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'left',
        width: 100,
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        align: 'left',
        width: 120,
      },
      {
        title: '性别',
        dataIndex: 'genderCn',
        align: 'left',
        width: 70,
      },
      {
        title: '班级',
        dataIndex: 'className',
        align: 'left',
        width: 120,
      },
      {
        title: '班主任',
        dataIndex: 'teacherName',
        align: 'left',
        width: 100,
      },
    ],
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'credentialNumber',
          label: '学号',
          component: 'Input',
          colProps: { span: 8 },
        },
        {
          field: 'name',
          label: '姓名',
          component: 'Input',
          colProps: { span: 8 },
        },
        {
          field: 'mobile',
          label: '手机号',
          component: 'Input',
          colProps: { span: 8 },
        },
      ],
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    immediate: true,
    canResize: true,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const searchInfo = reactive<Recordable>({});
  const [registerModal, { openModal }] = useModal();

  function handleSelect(data) {
    searchInfo.treeId = data.id;
    searchInfo.treeType = data.type;
    reload();
  }

  const handleView = (record: any) => {
    openModal(true, {
      baseData: {
        ...record,
      },
    });
  };
</script>

<style scoped lang="less"></style>