🚀快速开发（学生管理前端端篇）

<template>
  <div class="padding30px">
    <a-card>
      <!-- 搜索区域 -->
      <a-form :model="searchForm" layout="inline" @submit.prevent="handleSearch">

        <a-form-item label="学号">
          <a-input v-model:value="searchForm.studentId" placeholder="学号，业务唯一标识，如" />
        </a-form-item>
        <a-form-item label="学生姓名">
          <a-input v-model:value="searchForm.name" placeholder="学生姓名" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" htmlType="submit">搜索</a-button>
        </a-form-item>

        <a-form-item>
          <a-button @click="resetSearch">重置</a-button>
        </a-form-item>
      </a-form>

    </a-card>
    <a-card title="查询列表">
      <!-- 操作按钮 -->
      <a-button type="primary" @click="openAddModal" style="margin-bottom: 16px">新增</a-button>
      <a-button @click="deleteSelect" style="margin-left: 16px"
        :disabled="rowSelectionSelecRow.length == 0">批量删除</a-button>
      <!-- 表格 -->
      <a-table :dataSource="dataSourceT" :columns="columns" :pagination="pagination" :row-selection="rowSelection"
        :scroll="{ x: true }" rowKey="id" bordered @change="handleTableChange">
        <!-- 自定义列渲染 -->
        <template #bodyCell="{ column, record }">
          <!-- 操作列 -->
          <template v-if="column.dataIndex === 'edit'">
            <a-button @click="openEditModal(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑模态框 -->
    <a-modal :title="isEditMode ? '编辑' : '新增'" :open="modalVisible" @ok="handleSubmit" @cancel="handleCancel">
      <a-form ref="formRef" :model="currentFormData" :rules="formRules" layout="vertical">

        <a-form-item label="学号，业务唯一标识，如" name="studentId">
          <a-input v-model:value="currentFormData.studentId" />
        </a-form-item>
        <a-form-item label="学生姓名" name="name">
          <a-input v-model:value="currentFormData.name" />
        </a-form-item>
        <a-form-item label="性别：M-男," name="gender">
          <a-input v-model:value="currentFormData.gender" />
        </a-form-item>
        <a-form-item label="出生日期" name="dateOfBirth">
          <a-input v-model:value="currentFormData.dateOfBirth" />
        </a-form-item>
        <a-form-item label="电子邮箱" name="email">
          <a-input v-model:value="currentFormData.email" />
        </a-form-item>
        <a-form-item label="手机号码" name="phone">
          <a-input v-model:value="currentFormData.phone" />
        </a-form-item>
        <a-form-item label="家庭住址" name="address">
          <a-input v-model:value="currentFormData.address" />
        </a-form-item>
        <a-form-item label="入学日期" name="enrollmentDate">
          <a-input v-model:value="currentFormData.enrollmentDate" />
        </a-form-item>
        <a-form-item label="年级，如" name="grade">
          <a-input v-model:value="currentFormData.grade" />
        </a-form-item>
        <a-form-item label="专业名称，如" name="major">
          <a-input v-model:value="currentFormData.major" />
        </a-form-item>
        <a-form-item label="学籍状态：0-在读," name="status">
          <a-input v-model:value="currentFormData.status" />
        </a-form-item>
        <a-form-item label="记录创建时间" name="createdAt">
          <a-input v-model:value="currentFormData.createdAt" />
        </a-form-item>
        <a-form-item label="记录最后更新时间" name="updatedAt">
          <a-input v-model:value="currentFormData.updatedAt" />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  listApi,
  addApi,
  updateApi,
  updateBatchApi,
  deleteApi
} from '#/api/stu/student.ts'


// 通用 CRUD 钩子
import { crud } from '#/components/crud'

// 图片上传组件（此处暂时未用到，保留未来扩展可能）
// import ImageUpload from '#/components/ImageUpload.vue'

// 初始化搜索表单
const initSearchForm = {
  roleName: '',
}

// 使用 useCrud 管理数据和操作
const {
  dataSource: dataSourceT,
  pagination,
  searchForm,
  selectedRowKeys: rowSelectionSelecRow,
  modalVisible,
  isEditMode,
  formData: currentFormData,
  loadData,
  handleTableChange,
  handleSearch,
  resetSearch,
  deleteSelected: deleteSelect,
  openAddModal,
  openEditModal,
  handleSubmit,
  handleCancel,
} = crud({
  getList: listApi,
  create: addApi,
  update: updateApi,
  delete: deleteApi,
}, initSearchForm)

// 表单验证规则
const formRules = {
  studentId: [
    { required: true, message: '请输入学号，业务唯一标识，如' }
  ],
  name: [
    { required: true, message: '请输入学生姓名' }
  ],
  gender: [
    { required: true, message: '请输入性别：M-男,' }
  ],
  dateOfBirth: [
    { required: true, message: '请输入出生日期' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱' }
  ],
  phone: [
    { required: true, message: '请输入手机号码' }
  ],
  address: [
    { required: true, message: '请输入家庭住址' }
  ],
  enrollmentDate: [
    { required: true, message: '请输入入学日期' }
  ],
  grade: [
    { required: true, message: '请输入年级，如' }
  ],
  major: [
    { required: true, message: '请输入专业名称，如' }
  ],
  status: [
    { required: true, message: '请输入学籍状态：0-在读,' }
  ],
  createdAt: [
    { required: true, message: '请输入记录创建时间' }
  ],
  updatedAt: [
    { required: true, message: '请输入记录最后更新时间' }
  ],
}

// 表格列配置
const columns = [
  { title: '主键ID', dataIndex: 'id', key: 'id', align: 'center' },
  { title: '学号', dataIndex: 'studentId', key: 'studentId', align: 'center' },
  { title: '学生姓名', dataIndex: 'name', key: 'name', align: 'center' },
  { title: '性别', dataIndex: 'gender', key: 'gender', align: 'center' },
  { title: '出生日期', dataIndex: 'dateOfBirth', key: 'dateOfBirth', align: 'center' },
  { title: '电子邮箱', dataIndex: 'email', key: 'email', align: 'center' },
  { title: '手机号码', dataIndex: 'phone', key: 'phone', align: 'center' },
  { title: '家庭住址', dataIndex: 'address', key: 'address', align: 'center' },
  { title: '入学日期', dataIndex: 'enrollmentDate', key: 'enrollmentDate', align: 'center' },
  { title: '年级，如', dataIndex: 'grade', key: 'grade', align: 'center' },
  { title: '专业名称，如', dataIndex: 'major', key: 'major', align: 'center' },
  { title: '学籍状态', dataIndex: 'status', key: 'status', align: 'center' },
  { title: '记录创建时间', dataIndex: 'createdAt', key: 'createdAt', align: 'center' },
  { title: '记录最后更新时间', dataIndex: 'updatedAt', key: 'updatedAt', align: 'center' },
  { title: '操作', dataIndex: 'edit', key: 'edit', align: 'center' },
]

// 行选择配置
const rowSelection = {
  onChange: (selectedRowKeys) => {
    rowSelectionSelecRow.value = selectedRowKeys
  }
}

// 页面挂载时加载数据
onMounted(() => {
  loadData()
})


</script>