Ver Fonte

style(views): 调整表格列宽和样式,优化难度星级显示

- 统一调整表格列宽为固定值
- 为难度列添加星级显示效果
- 为操作按钮添加间距
- 优化选择框宽度
tanshanming há 7 meses atrás
pai
commit
12c51121f5
2 ficheiros alterados com 27 adições e 14 exclusões
  1. 1 1
      src/views/exm/exampaper/index.vue
  2. 26 13
      src/views/exm/question/index.vue

+ 1 - 1
src/views/exm/exampaper/index.vue

@@ -137,7 +137,7 @@
 			title: '学科',
 			dataIndex: 'subjectId',
 			key: 'subjectId',
-			width: 120,
+			width: 200,
 			customRender: ({ text }) => examStore.subjectEnumFormat(text)
 		},
 		{

+ 26 - 13
src/views/exm/question/index.vue

@@ -8,21 +8,27 @@
 				<a-input v-model:value="queryParam.content" allow-clear />
 			</a-form-item>
 			<a-form-item label="年级:">
-				<a-select v-model:value="queryParam.level" placeholder="年级" allow-clear @change="levelChange">
+				<a-select
+					v-model:value="queryParam.level"
+					placeholder="年级"
+					allow-clear
+					@change="levelChange"
+					style="width: 100px"
+				>
 					<a-select-option v-for="item in levelEnum" :key="item.key" :value="item.key">{{
 						item.value
 					}}</a-select-option>
 				</a-select>
 			</a-form-item>
 			<a-form-item label="学科:">
-				<a-select v-model:value="queryParam.subjectId" allow-clear>
+				<a-select v-model:value="queryParam.subjectId" allow-clear style="width: 100px">
 					<a-select-option v-for="item in subjectFilter" :key="item.id" :value="item.id">
 						{{ item.name + ' ( ' + item.levelName + ' )' }}
 					</a-select-option>
 				</a-select>
 			</a-form-item>
 			<a-form-item label="题型:">
-				<a-select v-model:value="queryParam.questionType" allow-clear>
+				<a-select v-model:value="queryParam.questionType" allow-clear style="width: 100px">
 					<a-select-option v-for="item in questionTypeEnum" :key="item.key" :value="item.key">{{
 						item.value
 					}}</a-select-option>
@@ -49,30 +55,36 @@
 			row-key="id"
 			bordered
 			style="margin-top: 16px"
+			tableLayout="fixed"
 		>
-			<a-table-column title="Id" data-index="id" key="id" width="90" />
+			<a-table-column title="Id" data-index="id" key="id" width="90px" />
 			<a-table-column
 				title="学科"
 				data-index="subjectId"
 				key="subjectId"
-				width="120"
+				width="150px"
 				:customRender="subjectFormatter"
 			/>
 			<a-table-column
 				title="题型"
 				data-index="questionType"
 				key="questionType"
-				width="70"
+				width="90px"
 				:customRender="questionTypeFormatter"
 			/>
 			<a-table-column title="题干" data-index="shortTitle" key="shortTitle" ellipsis />
-			<a-table-column title="分数" data-index="score" key="score" width="60" />
-			<a-table-column title="难度" data-index="difficult" key="difficult" width="60" />
-			<a-table-column title="创建时间" data-index="createTime" key="createTime" width="160" />
-			<a-table-column title="操作" key="action" width="220">
+			<a-table-column title="分数" data-index="score" key="score" width="90px" />
+			<a-table-column title="难度" data-index="difficult" key="difficult" width="110px">
+				<template #default="{ text }">
+					<StarFilled v-for="n in Number(text)" :key="n" style="color: #faad14" />
+					<StarOutlined v-for="n in 5 - Number(text)" :key="'empty' + n" style="color: #e8e8e8" />
+				</template>
+			</a-table-column>
+			<a-table-column title="创建时间" data-index="createTime" key="createTime" width="120px" />
+			<a-table-column title="操作" key="action" width="200px">
 				<template #default="{ record }">
-					<a-button size="small" @click="showQuestion(record)">预览</a-button>
-					<a-button size="small" @click="editQuestion(record)">编辑</a-button>
+					<a-button size="small" style="margin-right: 8px" @click="showQuestion(record)">预览</a-button>
+					<a-button size="small" style="margin-right: 8px" @click="editQuestion(record)">编辑</a-button>
 					<a-button size="small" danger @click="deleteQuestion(record)">删除</a-button>
 				</template>
 			</a-table-column>
@@ -129,7 +141,8 @@
 	import { useExamStore } from '@/store/exam'
 	import tQuestionApi from '@/api/exam/question/tQuestionApi'
 	import customPagination from '@/components/customPagination.vue'
-	import { message, Modal } from 'ant-design-vue'
+	import { StarFilled, StarOutlined } from '@ant-design/icons-vue'
+	import { Modal } from 'ant-design-vue'
 
 	const examStore = useExamStore()