src/views/ScoreView.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="成绩管理" sub-title="成绩信息基本操作" />
	<a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
		<a-form-item label="学生名称" name="name">
			<a-input v-model:value="formState.studentName"></a-input>
		</a-form-item>
		<a-form-item label="课程名称" name="no">
			<a-input v-model:value="formState.courseName"></a-input>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" html-type="submit">查询</a-button>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" @click="add">新增</a-button>
		</a-form-item>
	</a-form>
	<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id">
		<template #bodyCell="{ column, text, record }">
			<template v-if="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)">
				<div>{{ text }}</div>
			</template>
			<template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)">
				<div>{{formatDateString(text)}}</div>
			</template>
			<template v-else-if="column.dataIndex === 'operation'">
				<div class="editable-row-operations">
					<a @click="edit(record.id)">Edit</a>
				</div>
			</template>
		</template>
	</a-table>
	<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
	<a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk">
		<div>
			<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="成绩管理" sub-title="新增或编辑成绩" />
			<br />
			<a-form :model="addEditFormState">
				<a-form-item label="学生名称">
					<a-select ref="select" v-model:value="addEditFormState.studentId" style="width: 200px">
						<a-select-option :value="item.id" v-for="(item) in dataStudents" :key="item.id">{{item.name}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="课程名称">
					<a-select ref="select" v-model:value="addEditFormState.courseId" style="width: 200px">
						<a-select-option :value="item.id" v-for="(item) in dataCourses" :key="item.id">{{item.name}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="考试成绩">
					<a-input v-model:value="addEditFormState.score" />
				</a-form-item>
			</a-form>
		</div>
	</a-modal>
</template>
<script lang="ts">
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,