From 6848aaf7f0b2f8bd203642d067e211b2accfe48e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E8=8B=B1=E6=9D=B0?= <327782001@qq.com>
Date: Sat, 7 Oct 2023 15:54:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menus/MyAlgorithmic.vue | 561 ++++++++++++++-----------
 1 file changed, 324 insertions(+), 237 deletions(-)

diff --git a/src/components/menus/MyAlgorithmic.vue b/src/components/menus/MyAlgorithmic.vue
index 8780a38..68fd8e7 100644
--- a/src/components/menus/MyAlgorithmic.vue
+++ b/src/components/menus/MyAlgorithmic.vue
@@ -5,14 +5,28 @@
 				<el-dialog title="新增算法问题" :visible.sync="dialogFormVisible" style="width: 100%">
 					<el-form :model="form" class="custom-form">
 						<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.question" autocomplete="off" style="width: 100%"></el-input>
+							<el-input v-model="form.questionName" autocomplete="off" style="width: 100%"></el-input>
 						</el-form-item>
-						<br />
 						<el-form-item label="问题类型" :label-width="formLabelWidth" class="form-item">
 							<el-select v-model="form.questionType" placeholder="请选择活动区域">
 								<el-option v-for="item in options" :key="item.questionType" :label="item.name" :value="item.questionType"></el-option>
 							</el-select>
 						</el-form-item>
+						<el-form-item label="重要程度" :label-width="formLabelWidth" class="form-item">
+							<el-input v-model="form.degreeOfImportance" autocomplete="off" style="width: 100%"></el-input>
+						</el-form-item>
+						<el-form-item label="难易程度" :label-width="formLabelWidth" class="form-item">
+							<el-input v-model="form.degreeOfDifficulty" autocomplete="off" style="width: 100%"></el-input>
+						</el-form-item>
+						<el-form-item label="难易分数" :label-width="formLabelWidth" class="form-item">
+							<el-input v-model="form.difficultyOfScore" autocomplete="off" style="width: 100%"></el-input>
+						</el-form-item>
+						<el-form-item label="力扣号" :label-width="formLabelWidth" class="form-item">
+							<el-input v-model="form.leetcodeNumber" autocomplete="off" style="width: 100%"></el-input>
+						</el-form-item>
+						<el-form-item label="力扣链接" :label-width="formLabelWidth" class="form-item">
+							<el-input v-model="form.leetcodeLink" autocomplete="off" style="width: 100%"></el-input>
+						</el-form-item>
 					</el-form>
 					<div slot="footer" class="dialog-footer">
 						<el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -23,7 +37,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" :rows="5" :cols="30" style="width: 100%"></el-input>
+							<el-input type="textarea" v-model="form.questionName" autocomplete="off" :rows="5" :cols="30" style="width: 100%"></el-input>
 						</el-form-item>
 					</el-form>
 					<div slot="footer" class="dialog-footer">
@@ -31,6 +45,25 @@
 						<el-button type="primary" @click="handleConfirm(1)">确 定</el-button>
 					</div>
 				</el-dialog>
+				<el-dialog title="随机一题" :visible.sync="randomFormVisible" style="width: 100%">
+					<el-descriptions class="margin-top" title="随机选择的题目如下:" :column="3" border>
+						<el-descriptions-item v-model="randomAlgorithmic.questionName">
+							<template slot="label">题目名称</template>
+							{{ randomAlgorithmic.questionName }}
+						</el-descriptions-item>
+						<el-descriptions-item>
+							<template slot="label">力扣号</template>
+							{{ randomAlgorithmic.leetcodeNumber }}
+						</el-descriptions-item>
+						<el-descriptions-item show-overflow-tooltip>
+							<template slot="label">力扣链接</template>
+							<a :href="randomAlgorithmic.leetcodeLink" target="_blank">{{ randomAlgorithmic.leetcodeLink }}</a>
+						</el-descriptions-item>
+					</el-descriptions>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="randomFormVisible = false">取 消</el-button>
+					</div>
+				</el-dialog>
 				<el-form :inline="true" :model="formInline" class="demo-form-inline">
 					<el-form-item>
 						<el-input clearable v-model="formInline.questionName" placeholder="请输入问题" @keydown.enter.native="interviewPage"></el-input>
@@ -41,6 +74,9 @@
 					<el-form-item>
 						<el-button type="primary" @click="interviewPage">查询</el-button>
 					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="prepareRandom">随机一题</el-button>
+					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="prepareAdd">新增</el-button>
 					</el-form-item>
@@ -72,24 +108,38 @@
 					</el-table-column>
 					<el-table-column prop="操作" label="操作" width="180">
 						<template slot-scope="props">
-							<el-button type="success" @click.prevent="preEdit(props.row.id, props.row.question, props.row.questionTypeName)" width="200">编辑</el-button>
+							<el-button type="success" @click.prevent="preEdit(props.row.id, props.row.questionName, props.row.questionTypeName, props.row.degreeOfImportance, props.row.degreeOfDifficulty, props.row.difficultyOfScore, props.row.leetcodeNumber, props.row.leetcodeLink)" width="200">编辑</el-button>
 							<el-dialog title="编辑算法问题" :visible.sync="editVisible">
 								<el-form :model="form">
-									<el-form-item label="算法问题" :label-width="formLabelWidth">
-										<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 label="算法问题" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.questionName" autocomplete="off" style="width: 100%"></el-input>
 									</el-form-item>
-									<el-form-item label="问题类型" :label-width="formLabelWidth">
-										<el-select v-model="form.questionType" placeholder="请选择问题类型" style="text-align: left">
+									<el-form-item label="问题类型" :label-width="formLabelWidth" class="form-item">
+										<el-select v-model="form.questionType" placeholder="请选择活动区域">
 											<el-option v-for="item in options" :key="item.questionType" :label="item.name" :value="item.questionType"></el-option>
 										</el-select>
 									</el-form-item>
+									<el-form-item label="重要程度" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.degreeOfImportance" autocomplete="off" style="width: 100%"></el-input>
+									</el-form-item>
+									<el-form-item label="难易程度" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.degreeOfDifficulty" autocomplete="off" style="width: 100%"></el-input>
+									</el-form-item>
+									<el-form-item label="难易分数" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.difficultyOfScore" autocomplete="off" style="width: 100%"></el-input>
+									</el-form-item>
+									<el-form-item label="力扣号" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.leetcodeNumber" autocomplete="off" style="width: 100%"></el-input>
+									</el-form-item>
+									<el-form-item label="力扣链接" :label-width="formLabelWidth" class="form-item">
+										<el-input v-model="form.leetcodeLink" autocomplete="off" style="width: 100%"></el-input>
+									</el-form-item>
 								</el-form>
 								<div slot="footer" class="dialog-footer">
 									<el-button @click="editVisible = false">取 消</el-button>
 									<el-button type="primary" @click="editConfirm">确 定</el-button>
 								</div>
 							</el-dialog>
-
 							<el-button type="danger" @click="prepareDelete(props.row.id)">删除</el-button>
 							<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
 								<span>确认删除吗</span>
@@ -111,242 +161,279 @@
 <script>
 import axios from 'axios'
 export default {
-    name: 'MyInterview',
-
-    data() {
-        return {
-            // 用户列表数据
-            algorithmicList: [],
-            loading: false,
-            elementui_page_component_key: 0,
-            currentPage: Number(localStorage.getItem('lastPage')) || 1,
-            pageSize: 9,
-            total: 0,
-            formInline: {
-                questionName: '',
-            },
-            options: [],
-            questionType: 0,
-            // 新增的内容
-            dialogFormVisible: false,
-            dialogMutiFormVisible: false,
-            form: {
-                question: '',
-                questionType: 0,
-            },
-            formLabelWidth: '120px',
-            dialogVisible: false,
-            editVisible: false,
-            currentRowId: null,
-        }
-    },
-    watch: {
-        'formInline.question'(newVal) {
-            if (newVal === '') {
-                this.currentPage = 1
-                localStorage.setItem('lastPage', this.currentPage)
-                this.interviewPage()
-            }
-        },
-    },
-    created() {
-        //获取问题类型的枚举
-        this.getQuestionType()
-        //获取问题列表
-        this.interviewPage()
-    },
-    mounted() {},
-    methods: {
-        prepareAdd() {
-            this.form.question = ''
-            this.form.questionType = 0
-            this.dialogFormVisible = true
-        },
-        prepareMutiAdd() {
-            this.form.question = ''
-            this.form.questionType = 0
-            this.dialogMutiFormVisible = true
-        },
-
-        prepareDelete(id) {
-            this.currentRowId = id
-            this.dialogVisible = true
-        },
-        preEdit(id, question, questionTypeName) {
-            this.form.question = question
+	name: 'MyInterview',
 
-            // 定义一个映射（map）来存储 questionType 到 name 的转换
-            const questionTypeToNameMap = {}
-            this.options.forEach((option) => {
-                questionTypeToNameMap[option.name] = option.questionType
-            })
-            this.form.questionType = questionTypeToNameMap[questionTypeName]
-            this.currentRowId = id
-            this.editVisible = true
-        },
-        handleClose(done) {
-            this.$confirm('确认关闭？')
-                .then((_) => {
-                    done()
-                })
-                .catch((_) => {})
-        },
-        handleConfirm(addType) {
-            this.dialogFormVisible = false // 关闭对话框
-            this.dialogMutiFormVisible = false
-            this.addQuestion(addType) // 发送请求
-        },
+	data() {
+		return {
+			// 用户列表数据
+			algorithmicList: [],
+			randomAlgorithmic: {
+				questionName: '',
+				leetcodeNumber: '',
+				leetcodeLink: '',
+			},
+			loading: false,
+			elementui_page_component_key: 0,
+			currentPage: Number(localStorage.getItem('lastPage')) || 1,
+			pageSize: 9,
+			total: 0,
+			formInline: {
+				questionName: '',
+			},
+			options: [],
+			questionType: 0,
+			// 新增的内容
+			dialogFormVisible: false,
+			randomFormVisible: false,
+			dialogMutiFormVisible: false,
+			form: {
+				questionName: '',
+				questionType: 0,
+				degreeOfImportance: 5,
+				degreeOfDifficulty: 1,
+				difficultyOfScore: 1200,
+				leetcodeNumber: '',
+				leetcodeLink: '',
+			},
+			formLabelWidth: '120px',
+			dialogVisible: false,
+			editVisible: false,
+			currentRowId: null,
+		}
+	},
+	watch: {
+		'formInline.questionName'(newVal) {
+			if (newVal === '') {
+				this.currentPage = 1
+				localStorage.setItem('lastPage', this.currentPage)
+				this.interviewPage()
+			}
+		},
+	},
+	created() {
+		//获取问题类型的枚举
+		this.getQuestionType()
+		//获取问题列表
+		this.interviewPage()
+	},
+	mounted() {},
+	methods: {
+		prepareAdd() {
+			this.form.questionName = ''
+			this.form.questionType = 0
+			this.dialogFormVisible = true
+		},
+		prepareRandom() {
+			this.randomAlgorithmic = []
+			this.randomFormVisible = true
+			this.interviewRandom()
+		},
+		prepareMutiAdd() {
+			this.form.questionName = ''
+			this.form.questionType = 0
+			this.dialogMutiFormVisible = true
+		},
 
-        async addQuestion(addType) {
-            try {
-                this.loading = true
+		prepareDelete(id) {
+			this.currentRowId = id
+			this.dialogVisible = true
+		},
+		preEdit(id, questionName, questionTypeName, degreeOfImportance, degreeOfDifficulty, difficultyOfScore, leetcodeNumber, leetcodeLink) {
+			this.form.questionName = questionName
+			this.form.degreeOfImportance = degreeOfImportance
+			this.form.degreeOfDifficulty = degreeOfDifficulty
+			this.form.difficultyOfScore = difficultyOfScore
+			this.form.leetcodeNumber = leetcodeNumber
+			this.form.leetcodeLink = leetcodeLink
 
-                const { data: res } = await axios.post('http://localhost:8888/algorithmicProblem/add', {
-                    addType: addType,
-                    question: this.form.question,
-                    questionType: this.form.questionType,
-                })
-                if (res.code === 200) {
-                    this.form.question = ''
-                    this.form.questionType = 0
-                    this.interviewPage() // 确保这个方法是有效的
-                } else {
-                    console.error('Received non-200 status code', res)
-                    this.errorMsg(res.message)
-                }
-            } catch (error) {
-                console.error('An error occurred while adding the question:', error)
-                // 异常处理逻辑
-            } finally {
-                this.loading = false
-            }
-        },
-        errorMsg(msg) {
-            this.$message({
-                showClose: true,
-                message: msg,
-                type: 'error',
-            })
-        },
-        async editConfirm() {
-            try {
-                this.loading = true
+			// 定义一个映射（map）来存储 questionType 到 name 的转换
+			const questionTypeToNameMap = {}
+			this.options.forEach((option) => {
+				questionTypeToNameMap[option.name] = option.questionType
+			})
+			this.form.questionType = questionTypeToNameMap[questionTypeName]
+			this.currentRowId = id
+			this.editVisible = true
+		},
+		handleClose(done) {
+			this.$confirm('确认关闭？')
+				.then((_) => {
+					done()
+				})
+				.catch((_) => {})
+		},
+		handleConfirm(addType) {
+			this.dialogFormVisible = false // 关闭对话框
+			this.dialogMutiFormVisible = false
+			this.addQuestion(addType) // 发送请求
+		},
 
-                const { data: res } = await axios.post('http://localhost:8888/algorithmicProblem/update', {
-                    id: this.currentRowId,
-                    question: this.form.question,
-                    questionType: this.form.questionType,
-                })
-                if (res.code === 200) {
-                    this.form.question = ''
-                    this.form.questionType = 0
-                    this.editVisible = false
-                    currentRowId: null
-                    this.interviewPage() // 确保这个方法是有效的
-                } else {
-                    console.error('Received non-200 status code', res)
-                }
-            } catch (error) {
-                console.error('An error occurred while adding the question:', error)
-                // 异常处理逻辑
-            } finally {
-                this.loading = false
-            }
-        },
+		async addQuestion(addType) {
+			try {
+				this.loading = true
+				const { data: res } = await axios.post('http://localhost:8888/algorithmicProblem/add', {
+					addType: addType,
+					questionName: this.form.questionName,
+					questionType: this.form.questionType,
+					degreeOfImportance: this.form.degreeOfImportance,
+					degreeOfDifficulty: this.form.degreeOfDifficulty,
+					difficultyOfScore: this.form.difficultyOfScore,
+					leetcodeNumber: this.form.leetcodeNumber,
+					leetcodeLink: this.form.leetcodeLink,
+				})
+				if (res.code === 200) {
+					this.form.questionName = ''
+					this.form.questionType = 0
+					this.interviewPage() // 确保这个方法是有效的
+				} else {
+					console.error('Received non-200 status code', res)
+					this.errorMsg(res.message)
+				}
+			} catch (error) {
+				console.error('An error occurred while adding the questionName:', error)
+				// 异常处理逻辑
+			} finally {
+				this.loading = false
+			}
+		},
+		errorMsg(msg) {
+			this.$message({
+				showClose: true,
+				message: msg,
+				type: 'error',
+			})
+		},
+		async editConfirm() {
+			try {
+				this.loading = true
+				const { data: res } = await axios.post('http://localhost:8888/algorithmicProblem/update', {
+					id: this.currentRowId,
+					questionName: this.form.questionName,
+					questionType: this.form.questionType,
+					degreeOfImportance: this.form.degreeOfImportance,
+					degreeOfDifficulty: this.form.degreeOfDifficulty,
+					difficultyOfScore: this.form.difficultyOfScore,
+					leetcodeNumber: this.form.leetcodeNumber,
+					leetcodeLink: this.form.leetcodeLink,
+				})
+				if (res.code === 200) {
+					this.form.questionName = ''
+					this.form.questionType = 0
+					this.editVisible = false
+					currentRowId: null
+					this.interviewPage() // 确保这个方法是有效的
+				} else {
+					console.error('Received non-200 status code', res)
+				}
+			} catch (error) {
+				console.error('An error occurred while adding the questionName:', error)
+				// 异常处理逻辑
+			} finally {
+				this.loading = false
+			}
+		},
 
-        async onDelete(id) {
-            this.dialogVisible = false
-            this.loading = true
-            const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/delete', {
-                params: {
-                    id: id,
-                },
-            })
-            this.interviewPage()
-            this.loading = false
-        },
-        refreshPage() {
-            //获取问题类型的枚举
-            this.getQuestionType()
-            location.reload()
-        },
+		async onDelete(id) {
+			this.dialogVisible = false
+			this.loading = true
+			const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/delete', {
+				params: {
+					id: id,
+				},
+			})
+			this.interviewPage()
+			this.loading = false
+		},
+		refreshPage() {
+			//获取问题类型的枚举
+			this.getQuestionType()
+			location.reload()
+		},
 
-        async getQuestionType() {
-            const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/questionType', { params: {} })
-            if (res.code === 200) {
-                this.options = res.result
-            }
-        },
+		async getQuestionType() {
+			const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/questionType', { params: {} })
+			if (res.code === 200) {
+				this.options = res.result
+			}
+		},
 
-        async interviewPage() {
-            this.loading = true
-            const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/page', {
-                params: {
-                    page: this.currentPage,
-                    pageSize: this.pageSize,
-                    questionName: this.formInline.questionName,
-                    questionType: this.questionType,
-                },
-            })
-            if (res.code === 200) {
-                this.total = res.result.totalElements
-                // 定义一个映射（map）来存储 questionType 到 name 的转换
-                const questionTypeToNameMap = {}
-                this.options.forEach((option) => {
-                    questionTypeToNameMap[option.questionType] = option.name
-                })
-                console.log(res.result.content)
-                console.log(questionTypeToNameMap)
-                // 修改 algorithmicList 中的每一个元素，将 questionType 转换为 name
-                res.result.content.forEach((item) => {
-                    item.questionTypeName = questionTypeToNameMap[item.questionType] || 'Unknown'
-                })
-                this.algorithmicList = 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 'white-dress-value'
-            // } else if (value === '设计模式') {
-            //     return 'prunus-gracilis-value'
-            // } else if (value === '其他') {
-            //     return 'magenta-value'
-            // } else {
-            //     return 'dark-blue-value'
-            // }
-        },
+		async interviewPage() {
+			this.loading = true
+			const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/page', {
+				params: {
+					page: this.currentPage,
+					pageSize: this.pageSize,
+					questionName: this.formInline.questionName,
+					questionType: this.questionType,
+				},
+			})
+			if (res.code === 200) {
+				this.total = res.result.totalElements
+				// 定义一个映射（map）来存储 questionType 到 name 的转换
+				const questionTypeToNameMap = {}
+				this.options.forEach((option) => {
+					questionTypeToNameMap[option.questionType] = option.name
+				})
+				// 修改 algorithmicList 中的每一个元素，将 questionType 转换为 name
+				res.result.content.forEach((item) => {
+					item.questionTypeName = questionTypeToNameMap[item.questionType] || 'Unknown'
+				})
+				this.algorithmicList = res.result.content
+			}
+			this.loading = false
+		},
+		async interviewRandom() {
+			this.loading = true
+			const { data: res } = await axios.get('http://localhost:8888/algorithmicProblem/random', { params: {} })
+			if (res.code === 200) {
+				this.randomAlgorithmic.questionName = res.result.questionName
+				this.randomAlgorithmic.leetcodeNumber = res.result.leetcodeNumber
+				this.randomAlgorithmic.leetcodeLink = res.result.leetcodeLink
+			}
+			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 'white-dress-value'
+			// } else if (value === '设计模式') {
+			//     return 'prunus-gracilis-value'
+			// } else if (value === '其他') {
+			//     return 'magenta-value'
+			// } else {
+			//     return 'dark-blue-value'
+			// }
+		},
 
-        handleCurrentChange(currentPage) {
-            this.currentPage = currentPage
-            this.interviewPage()
-        },
-    },
+		handleCurrentChange(currentPage) {
+			this.currentPage = currentPage
+			this.interviewPage()
+		},
+	},
 }
 </script>
 
-- 
GitLab