面试题优化

src/components/menus/MyInterview.vue

@@ -23,7 +23,7 @@
 					<div class="red-title" slot="title">批量新增面试问题(多个问题换行填写)</div>
 					<el-form :model="form" class="custom-form">
 						<el-form-item label="面试问题" :label-width="formLabelWidth" class="form-item">
-							<el-input type="textarea" v-model="form.question" autocomplete="off" style="width: 100%"></el-input>
+							<el-input type="textarea" v-model="form.question" autocomplete="off" :rows="5" :cols="30" style="width: 100%"></el-input>
 						</el-form-item>
 					</el-form>
 					<div slot="footer" class="dialog-footer">
@@ -33,13 +33,13 @@
 				</el-dialog>
 				<el-form :inline="true" :model="formInline" class="demo-form-inline">
 					<el-form-item>
-						<el-input clearable v-model="formInline.question" placeholder="请输入问题" @keydown.enter.native="initCartList"></el-input>
+						<el-input clearable v-model="formInline.question" placeholder="请输入问题" @keydown.enter.native="interviewPage"></el-input>
 					</el-form-item>
-					<el-select v-model="questionType" placeholder="请选择" @change="initCartList">
+					<el-select v-model="questionType" placeholder="请选择" @change="interviewPage">
 						<el-option v-for="item in options" :key="item.questionType" :label="item.name" :value="item.questionType"></el-option>
 					</el-select>
 					<el-form-item>
-						<el-button type="primary" @click="initCartList">查询</el-button>
+						<el-button type="primary" @click="interviewPage">查询</el-button>
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="prepareAdd">新增</el-button>
@@ -51,7 +51,14 @@
 				<el-table border :data="userlist" v-loading="loading">
 					<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
 					<el-table-column prop="question" label="面试问题" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="questionTypeName" label="问题类型" show-overflow-tooltip align="center"></el-table-column>
+					<!-- <el-table-column prop="questionTypeName" label="问题类型" show-overflow-tooltip align="center"></el-table-column> -->
+
+					<el-table-column prop="questionTypeName" label="问题类型" show-overflow-tooltip align="center">
+						<template slot-scope="scope">
+							<span :class="getClassForValue(scope.row.questionTypeName)" v-html="scope.row.questionTypeName"></span>
+						</template>
+					</el-table-column>
+
 					<el-table-column label="创建时间" width="170">
 						<template slot-scope="props">
 							{{ props.row.createTime | dateFormat }}
@@ -63,10 +70,10 @@
 							<el-dialog title="编辑面试问题" :visible.sync="editVisible">
 								<el-form :model="form">
 									<el-form-item label="面试问题" :label-width="formLabelWidth">
-										<el-input v-model="form.question" autocomplete="off" style="text-align: left"></el-input>
+										<el-input class="custom-textarea" type="textarea" v-model="form.question" autocomplete="off" :rows="5" :cols="30" style="text-align: left"></el-input>
 									</el-form-item>
 									<el-form-item label="问题类型" :label-width="formLabelWidth">
-										<el-select v-model="form.questionType" placeholder="请选择活动区域" style="text-align: left">
+										<el-select v-model="form.questionType" placeholder="请选择问题类型" style="text-align: left">
 											<el-option v-for="item in options" :key="item.questionType" :label="item.name" :value="item.questionType"></el-option>
 										</el-select>
 									</el-form-item>
@@ -132,15 +139,17 @@ export default {
 			if (newVal === '') {
 				this.currentPage = 1
 				localStorage.setItem('lastPage', this.currentPage)
-				this.initCartList()
+				this.interviewPage()
 			}
 		},
 	},
+	mounted() {},
 	created() {
+		//获取问题类型的枚举
 		this.getQuestionType()
-		this.initCartList()
+		//获取问题列表
+		this.interviewPage()
 	},
-	mounted() {},
 	methods: {
 		prepareAdd() {
 			this.form.question = ''
@@ -194,7 +203,7 @@ export default {
 				if (res.code === 200) {
 					this.form.question = ''
 					this.form.questionType = 0
-					this.initCartList() // 确保这个方法是有效的
+					this.interviewPage() // 确保这个方法是有效的
 				} else {
 					console.error('Received non-200 status code', res)
 					this.errorMsg(res.message)
@@ -227,7 +236,7 @@ export default {
 					this.form.questionType = 0
 					this.editVisible = false
 					currentRowId: null
-					this.initCartList() // 确保这个方法是有效的
+					this.interviewPage() // 确保这个方法是有效的
 				} else {
 					console.error('Received non-200 status code', res)
 				}
@@ -247,29 +256,23 @@ export default {
 					id: id,
 				},
 			})
-			this.initCartList()
+			this.interviewPage()
 			this.loading = false
 		},
 		refreshPage() {
+			//获取问题类型的枚举
+			this.getQuestionType()
 			location.reload()
 		},
-		gotoDetail(id) {
-			this.$router.push('/home/chatinfo/' + id)
-		},
-		addChat() {
-			this.$router.push('/home/addChat/')
-		},
 
 		async getQuestionType() {
-			this.loading = true
 			const { data: res } = await axios.get('http://localhost:8080/interviewQuestion/questionType', { params: {} })
 			if (res.code === 200) {
 				this.options = res.result
 			}
-			this.loading = false
 		},
 
-		async initCartList() {
+		async interviewPage() {
 			this.loading = true
 			const { data: res } = await axios.get('http://localhost:8080/interviewQuestion/page', {
 				params: {
@@ -280,7 +283,6 @@ export default {
 				},
 			})
 			if (res.code === 200) {
-				this.userlist = res.result.content
 				this.total = res.result.totalElements
 				// 定义一个映射（map）来存储 questionType 到 name 的转换
 				const questionTypeToNameMap = {}
@@ -288,15 +290,51 @@ export default {
 					questionTypeToNameMap[option.questionType] = option.name
 				})
 				// 修改 userlist 中的每一个元素，将 questionType 转换为 name
-				this.userlist.forEach((user) => {
+				res.result.content.forEach((user) => {
 					user.questionTypeName = questionTypeToNameMap[user.questionType] || 'Unknown'
 				})
+				this.userlist = res.result.content
 			}
 			this.loading = false
 		},
+		getClassForValue(value) {
+			// 根据值返回相应的类名
+			// 您可以根据需要编写逻辑来决定何时使用相同的类名
+			// 这里只是一个示例
+			if (value === '基础知识') {
+				return 'reddish-purple-value'
+			} else if (value === '集合') {
+				return 'new-orange-value'
+			} else if (value === 'JVM') {
+				return 'clove-tea-value'
+			} else if (value === '并发编程') {
+				return 'grassy-value'
+			} else if (value === 'MySql') {
+				return 'daylily-value'
+			} else if (value === 'Redis') {
+				return 'balloon-flower-value'
+			} else if (value === '中间件') {
+				return 'pink-value'
+			} else if (value === 'Spring') {
+				return 'purple-value'
+			} else if (value === '微服务') {
+				return 'sapphire-blue-value'
+			} else if (value === '分布式') {
+				return 'green-value'
+			} else if (value === '项目') {
+				return 'black-value'
+			} else if (value === '算法') {
+				return 'rose-hermosa-value'
+			} else if (value === '其他') {
+				return 'magenta-value'
+			} else {
+				return 'dark-blue-value'
+			}
+		},
+
 		handleCurrentChange(currentPage) {
 			this.currentPage = currentPage
-			this.initCartList()
+			this.interviewPage()
 		},
 	},
 }
@@ -342,6 +380,55 @@ export default {
 	cursor: pointer;
 	z-index: 999;
 }
+.reddish-purple-value {
+	color: #eb6ea5; /* 相同值的颜色 */
+}
+.new-orange-value {
+	color: #59b9c6; /* 相同值的颜色 */
+}
+
+.clove-tea-value {
+	color: #b4866b; /* 不同值的颜色 */
+}
+
+.grassy-value {
+	color: #c3d825; /* 不同值的颜色 */
+}
+.daylily-value {
+	color: #f8b862; /* 不同值的颜色 */
+}
+.balloon-flower-value {
+	color: #4d5aaf; /* 不同值的颜色 */
+}
+.pink-value {
+	color: #f47983; /* 不同值的颜色 */
+}
+.purple-value {
+	color: #8d4bbb; /* 不同值的颜色 */
+}
+.sapphire-blue-value {
+	color: #4b5cc4; /* 不同值的颜色 */
+}
+.green-value {
+	// #7367F0
+	color: #ce9ffc; /* 不同值的颜色 */
+}
+.black-value {
+	color: #000000; /* 不同值的颜色 */
+}
+.magenta-value {
+	color: #ff0097; /* 不同值的颜色 */
+}
+.dark-blue-value {
+	color: #3eede7; /* 不同值的颜色 */
+}
+.rose-hermosa-value {
+	color: #ff6fd8; /* 不同值的颜色 */
+}
+.custom-textarea {
+	width: 100%;
+	text-align: left;
+}
 
 .backtop:hover {
 	background-color: #0050a0;