zhaowenkang
5 months ago
18 changed files with 2032 additions and 402 deletions
-
3work/.vscode/extensions.json
-
520work/package-lock.json
-
3work/package.json
-
17work/src/api/AddWorkApi.js
-
20work/src/api/ClassListApi.js
-
16work/src/api/index.js
-
BINwork/src/assets/login/denglu.png
-
BINwork/src/assets/login/mima.png
-
30work/src/router/index.js
-
359work/src/views/AddWork.vue
-
270work/src/views/AddWorkView.vue
-
110work/src/views/HomeView.vue
-
211work/src/views/HomeWork.vue
-
109work/src/views/Login.vue
-
10work/src/views/LoginView.vue
-
476work/src/views/UpdateWork.vue
-
265work/src/views/WorkDetail.vue
-
15work/vite.config.js
@ -1,3 +0,0 @@ |
|||
{ |
|||
"recommendations": ["Vue.volar"] |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
import service from "."; |
|||
const AddWorkApi={ |
|||
|
|||
//获取关联文章列表（关键字）
|
|||
getArticleList(Name){ |
|||
return service.post("/api/homework_manage/get-article-list",{Name}); |
|||
}, |
|||
//获取关联直播列表
|
|||
getLiveList(){ |
|||
return service.post("/api/homework_manage/get-live-list"); |
|||
}, |
|||
//添加作业
|
|||
addWork(data){ |
|||
return service.post("/api/homework_manage/add-homework",data); |
|||
}, |
|||
} |
|||
export default AddWorkApi; |
|||
@ -0,0 +1,20 @@ |
|||
import service from "."; |
|||
const ClassListApi={ |
|||
//获取作业列表
|
|||
getClassList(PageNo,PageSize){ |
|||
return service.post("/api/homework_manage/get-homework-list",{PageNo,PageSize}) |
|||
}, |
|||
//为了编辑，首先获取单个作业内容
|
|||
getClassListOne(Id){ |
|||
return service.post("/api/homework_manage/get-homework",{Id}) |
|||
}, |
|||
//获取作业详情
|
|||
getWorkDetail(id,pageNo,pageSize){ |
|||
return service.post("/api/homework_manage/getrecordlist",{id,pageNo,pageSize}) |
|||
}, |
|||
//编辑作业
|
|||
editWork(data){ |
|||
return service.post("/api/homework_manage/edit-homework",data) |
|||
}, |
|||
} |
|||
export default ClassListApi; |
|||
@ -0,0 +1,16 @@ |
|||
import axios from "axios"; |
|||
|
|||
const service = axios.create({ |
|||
// baseURL: 'http://192.168.8.191:8080',
|
|||
// baseURL: 'http://localhost:8080',
|
|||
baseURL: '/api', |
|||
}); |
|||
// http://192.168.8.191:8080
|
|||
|
|||
//Axios的响应拦截器..
|
|||
service.interceptors.response.use(resp => { |
|||
return resp.data; |
|||
}, error => { |
|||
return Promise.reject(error); |
|||
}); |
|||
export default service; |
|||
|
After Width: 200 | Height: 200 | Size: 3.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.5 KiB |
@ -0,0 +1,359 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
<div class="main-title-text" style="float: left;"> |
|||
新建作业 |
|||
</div> |
|||
<div> |
|||
<el-button class="main-button" @click="back">返回上一页</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="main-back"> |
|||
<el-form :model="form" label-width="auto" style="max-width: 700px" size="large"> |
|||
<el-form-item label="作业名称"> |
|||
<el-input v-model="form.Name" placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="提交时间" style="width: 70%"> |
|||
<el-date-picker v-model="form.picker" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" /> |
|||
</el-form-item> |
|||
<el-form-item label="作业归属"> |
|||
<el-select v-model="form.ClubType" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="关联文章"> |
|||
<el-autocomplete v-model="articleTitle" :fetch-suggestions="queryArticleList" placeholder="请输入" |
|||
@select="handleSelectArticle" /> |
|||
</el-form-item> |
|||
<el-form-item label="关联直播"> |
|||
<el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="选择类型"> |
|||
<div> |
|||
<el-button type="primary" @click="addSingleChoice">添加单选</el-button> |
|||
<el-button type="primary" @click="addMultipleChoice">添加多选</el-button> |
|||
<el-button type="primary" @click="addBlank">添加单选填空</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<div class="question-container" v-for="(question, index) in questions" :key="index" |
|||
:class="{ 'bg-change': isHovered[index] }" @mouseenter="handleMouseEnter(index)" |
|||
@mouseleave="handleMouseLeave(index)"> |
|||
<div class="question-title"> |
|||
{{ questionPrefix(index) }} {{ getQuestionTypeText(question.type) }} |
|||
</div> |
|||
<div style="width: 600px;"> |
|||
<el-input v-model="question.description" /> |
|||
</div> |
|||
<div class="add" v-if="question.type !== 'blank'"> |
|||
<div class="question-option"> |
|||
<span>设置选项:</span> |
|||
<el-button type="primary" text @click="addOption(index)">添加</el-button> |
|||
</div> |
|||
<div v-for="(option, optionIndex) in question.content" :key="optionIndex"> |
|||
<div class="select" style="display: flex;"> |
|||
<div class="selection-item" style="display: flex;"> |
|||
<div style="width: 550px;"> |
|||
<el-input v-model="question.content[optionIndex].text" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="primary" text @click="removeOption(index, optionIndex)">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="delete" style="margin-left: 50px;"> |
|||
<el-button type="info" plain @click="removeQuestion(index)">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="submit"> |
|||
<el-button type="primary" :disabled="!form.Name||!form.picker" @click="onSubmit">确认</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, computed } from 'vue' |
|||
import AddWorkApi from '../api/AddWorkApi'; |
|||
import _ from 'lodash'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const options = ref([ |
|||
{ id: 1, name: '牧民俱乐部' }, |
|||
{ id: 2, name: '博古论坛' }, |
|||
{ id: 3, name: '神枪手俱乐部' }, |
|||
{ id: 4, name: '环球俱乐部' }, |
|||
{ id: 5, name: '价值投资' }, |
|||
{ id: 6, name: '波段行情' }, |
|||
{ id: 7, name: '抄底卖顶' }, |
|||
{ id: 8, name: '资金及仓位管理' }, |
|||
{ id: 9, name: '财富的游戏' }, |
|||
|
|||
]); |
|||
|
|||
// do not use same name with ref |
|||
const form = ref({ |
|||
Name: '', |
|||
ClubType: '', |
|||
ArticleId: '', |
|||
LiveId: '', |
|||
picker: [], |
|||
StartDate: '', |
|||
EndDate: '', |
|||
Questions: [] |
|||
}); |
|||
const articleTitle = ref(''); |
|||
// 问题列表数据 |
|||
const questions = ref([]); |
|||
const onSubmit = () => { |
|||
// 从picker中获取日期数据并进行格式转换 |
|||
if (form.value.picker && form.value.picker.length === 2) { |
|||
const startDate = dayjs(form.value.picker[0]).format('YYYY-MM-DD HH:mm:00'); |
|||
const endDate = dayjs(form.value.picker[1]).format('YYYY-MM-DD HH:mm:00'); |
|||
form.value.StartDate = startDate; |
|||
form.value.EndDate = endDate; |
|||
} |
|||
form.value.Questions = questions.value; |
|||
AddWorkApi.addWork(form.value) |
|||
console.log(questions.value+'--------------') |
|||
} |
|||
const back = () => { |
|||
window.history.back() |
|||
} |
|||
|
|||
|
|||
|
|||
// 存储根据文章输入内容查询到的关联文章结果列表 |
|||
const articleSearchResults = ref([]); |
|||
// 根据文章输入内容查询关联文章的函数 |
|||
const queryArticleList = async (queryString: string) => { |
|||
try { |
|||
const response = await AddWorkApi.getArticleList(queryString); |
|||
const formattedResults = response.data.map(article => ({ |
|||
value: article.title, |
|||
label: article.id |
|||
})); |
|||
articleSearchResults.value = formattedResults; |
|||
return formattedResults; |
|||
} catch (error) { |
|||
console.error('查询关联文章失败', error); |
|||
return []; |
|||
} |
|||
}; |
|||
// 处理选择文章的函数 |
|||
const handleSelectArticle = (article: { label: string }) => { |
|||
// 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等 |
|||
console.log('选中的文章id', article.label); |
|||
form.value.ArticleId = article.label; // 将选中文章的id赋值给对应表单字段，用于传递给后端 |
|||
const selectedArticle = articleSearchResults.value.find(a => a.label === article.label); |
|||
if (selectedArticle) { |
|||
articleTitle.value = selectedArticle.value; // 更新显示的文章题目 |
|||
} |
|||
}; |
|||
|
|||
//获取直播列表 |
|||
const live = ref([]); |
|||
function getLive() { |
|||
AddWorkApi.getLiveList() |
|||
.then(res => { |
|||
live.value = res.data; |
|||
console.log(live.value); |
|||
}) |
|||
.catch(error => { |
|||
console.error('获取直播列表失败', error) |
|||
}) |
|||
} |
|||
getLive(); |
|||
|
|||
// 根据类型获取对应的题目类型文本显示 |
|||
const getQuestionTypeText = (type) => { |
|||
switch (type) { |
|||
case 1: |
|||
return '作业题目(单选)'; |
|||
case 2: |
|||
return '作业题目(多选)'; |
|||
case 3: |
|||
return '作业题目(简答题)'; |
|||
default: |
|||
return '未知类型题目'; |
|||
} |
|||
}; |
|||
// 从content字符串中解析出选项数组 |
|||
// const getOptionsFromContent = (content) => { |
|||
// return JSON.parse(content); |
|||
// }; |
|||
const addSingleChoice = () => { |
|||
questions.value.push({ |
|||
type: 1, // 假设1代表单选，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" },{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addMultipleChoice = () => { |
|||
questions.value.push({ |
|||
type: 2, // 假设2代表多选，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" },{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addBlank = () => { |
|||
questions.value.push({ |
|||
type: 3, // 假设3代表简答题，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addOption = (questionIndex) => { |
|||
const currentQuestion = questions.value[questionIndex]; |
|||
const currentContent = JSON.parse(currentQuestion.content); |
|||
currentContent.push({ "id": "", "text": "" }); |
|||
currentQuestion.content = JSON.stringify(currentContent); |
|||
}; |
|||
|
|||
const removeOption = (questionIndex, optionIndex) => { |
|||
const currentQuestion = questions.value[questionIndex]; |
|||
const currentContent = JSON.parse(currentQuestion.content); |
|||
currentContent.splice(optionIndex, 1); |
|||
currentQuestion.content = JSON.stringify(currentContent); |
|||
}; |
|||
|
|||
const removeQuestion = (questionIndex) => { |
|||
questions.value.splice(questionIndex, 1); |
|||
}; |
|||
|
|||
// 计算属性，用于生成序号前缀 |
|||
const questionPrefix = computed(() => { |
|||
return (index) => { |
|||
return `${index + 1}、`; |
|||
}; |
|||
}) |
|||
|
|||
// 用于存储每个问题标题是否被鼠标悬停的状态，初始化为false |
|||
const isHovered = ref(Array(questions.value.length).fill(false)); |
|||
const handleMouseEnter = (index) => { |
|||
isHovered.value[index] = true; |
|||
}; |
|||
|
|||
const handleMouseLeave = (index) => { |
|||
isHovered.value[index] = false; |
|||
}; |
|||
|
|||
// 在组件挂载后初始化 `isHovered` 数组长度与 `questions` 数组长度一致 |
|||
onMounted(() => { |
|||
isHovered.value = Array(questions.value.length).fill(false); |
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
.submit { |
|||
margin: 100px 212px; |
|||
} |
|||
|
|||
.submit .el-button { |
|||
padding: 25px 150px; |
|||
} |
|||
|
|||
.question-title { |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
|
|||
.bg-change { |
|||
background-color: rgba(200, 200, 200, 0.3); |
|||
} |
|||
|
|||
.question-title { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.select { |
|||
margin: 10px 0px 0px; |
|||
} |
|||
|
|||
.delete { |
|||
position: absolute; |
|||
right: 10px; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
.add { |
|||
position: relative; |
|||
} |
|||
|
|||
.question-container { |
|||
margin: 20px 0; |
|||
padding: 10px 20px; |
|||
width: 750px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
|
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 212px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 60px; |
|||
border-bottom: 2px solid #ececec; |
|||
padding: 0 15px; |
|||
line-height: 52px; |
|||
} |
|||
|
|||
.main-button { |
|||
margin: 10px 15px 0 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
float: right; |
|||
} |
|||
|
|||
.el-form { |
|||
padding: 30px 78.5px; |
|||
margin: auto; |
|||
} |
|||
|
|||
.el-form-item { |
|||
--font-size: 16px; |
|||
margin: 0 0 25px; |
|||
} |
|||
|
|||
.main-back { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
@ -1,270 +0,0 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
|
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
|
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
<div class="main-title-text" style="float: left;"> |
|||
新建作业 |
|||
</div> |
|||
<div> |
|||
<el-button class="main-button" @click="back">返回上一页</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="main-back"> |
|||
<el-form :model="form" label-width="auto" style="max-width: 700px" size="large"> |
|||
<el-form-item label="作业名称"> |
|||
<el-input placeholder="请输入" /> |
|||
</el-form-item> |
|||
<el-form-item label="提交时间" style="width: 70%"> |
|||
<el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" /> |
|||
</el-form-item> |
|||
<el-form-item label="作业归属"> |
|||
<el-select v-model="value" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="关联文章"> |
|||
<el-input placeholder="请输入" /> |
|||
</el-form-item> |
|||
<el-form-item label="关联直播"> |
|||
<el-select v-model="value" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="选择类型"> |
|||
<div> |
|||
<el-button type="primary" @click="addSingleChoice">添加单选</el-button> |
|||
<el-button type="primary" @click="addMultipleChoice">添加多选</el-button> |
|||
<el-button type="primary" @click="addBlank">添加单选填空</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<div class="question-container" v-for="(question, index) in questions" :key="index"> |
|||
{{ question.type === 'single' ? '作业题目(单选)' : (question.type === 'multiple' ? '作业题目(多选)' : '作业题目(简答题)') |
|||
}} |
|||
<div style="width: 600px;"> |
|||
<el-input v-model="question.title" placeholder="作业题目" /> |
|||
</div> |
|||
|
|||
<div class="add" v-if="question.type !== 'blank'"> |
|||
<el-form-item label="设置选项:"> |
|||
<el-button type="primary" text @click="addOption(index)">添加</el-button> |
|||
</el-form-item> |
|||
|
|||
<div v-for="(option, optionIndex) in question.options" :key="optionIndex"> |
|||
<div class="select" style="display: flex;"> |
|||
<div class="selection-item" style="display: flex;"> |
|||
<div style="width: 550px;"> |
|||
<el-input :value="option" @input="(e) => updateOption(index, optionIndex, e.target.value)" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="primary" text @click="removeOption(index, optionIndex)">删除</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="delete" style="margin-left: 50px;"> |
|||
<el-button type="info" plain @click="removeQuestion(index)">删除</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted } from 'vue' |
|||
|
|||
import axios from 'axios' |
|||
|
|||
import { reactive } from 'vue' |
|||
|
|||
// do not use same name with ref |
|||
const form = reactive({ |
|||
name: '', |
|||
region: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '', |
|||
}) |
|||
|
|||
const onSubmit = () => { |
|||
console.log('submit!') |
|||
} |
|||
const back = () => { |
|||
window.history.back() |
|||
} |
|||
|
|||
const value = ref('') |
|||
|
|||
const options = [ |
|||
{ |
|||
value: '牧民俱乐部', |
|||
label: '牧民俱乐部', |
|||
}, |
|||
{ |
|||
value: '博股论坛', |
|||
label: '博股论坛', |
|||
}, |
|||
{ |
|||
value: '神枪手俱乐部', |
|||
label: '神枪手俱乐部', |
|||
}, |
|||
{ |
|||
value: '环球俱乐部', |
|||
label: '环球俱乐部', |
|||
}, |
|||
{ |
|||
value: '价值投资', |
|||
label: '价值投资', |
|||
}, |
|||
{ |
|||
value: '波段行情', |
|||
label: '波段行情', |
|||
}, |
|||
{ |
|||
value: '抄底卖顶', |
|||
label: '抄底卖顶', |
|||
}, |
|||
{ |
|||
value: '资金及仓位管理', |
|||
label: '资金及仓位管理', |
|||
}, |
|||
{ |
|||
value: '财富的游戏', |
|||
label: '财富的游戏', |
|||
}, |
|||
] |
|||
|
|||
const questions = ref([]); |
|||
|
|||
const addSingleChoice = () => { |
|||
questions.value.push({ |
|||
type: 'single', |
|||
title: '', |
|||
options: [] |
|||
}); |
|||
}; |
|||
|
|||
const addMultipleChoice = () => { |
|||
questions.value.push({ |
|||
type: 'multiple', |
|||
title: '', |
|||
options: [] |
|||
}); |
|||
}; |
|||
|
|||
const addBlank = () => { |
|||
questions.value.push({ |
|||
type: 'blank', |
|||
title: '' |
|||
}); |
|||
}; |
|||
|
|||
const addOption = (questionIndex) => { |
|||
questions.value[questionIndex].options.push(''); |
|||
}; |
|||
|
|||
const removeOption = (questionIndex, optionIndex) => { |
|||
questions.value[questionIndex].options.splice(optionIndex, 1); |
|||
}; |
|||
|
|||
const removeQuestion = (questionIndex) => { |
|||
questions.value.splice(questionIndex, 1); |
|||
}; |
|||
|
|||
const updateOption = (questionIndex, optionIndex, newValue) => { |
|||
questions.value[questionIndex].options[optionIndex] = newValue; |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.select{ |
|||
margin: 20px 0px 0px; |
|||
} |
|||
.delete{ |
|||
position: absolute; |
|||
right: 10px; |
|||
bottom: 0px; |
|||
} |
|||
.add{ |
|||
position: relative; |
|||
} |
|||
.question-container { |
|||
margin: 20px 0; |
|||
padding: 10px 20px; |
|||
width: 750px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
|
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 212px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 60px; |
|||
border-bottom: 2px solid #ececec; |
|||
padding: 0 15px; |
|||
line-height: 52px; |
|||
} |
|||
|
|||
.main-button { |
|||
margin: 10px 15px 0 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
float: right; |
|||
} |
|||
|
|||
.el-form { |
|||
padding: 30px 78.5px; |
|||
margin: auto; |
|||
} |
|||
|
|||
.el-form-item { |
|||
--font-size: 16px; |
|||
margin: 0 0 25px; |
|||
} |
|||
|
|||
.main-back { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
@ -1,110 +0,0 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
|
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
|
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
抢点班作业列表 |
|||
</div> |
|||
<div class="list"> |
|||
|
|||
<el-button class="main-button" type="primary" style="float: left;" @click="newAssignment">新建作业</el-button> |
|||
|
|||
<el-table :data="assignments" style="width: 100%"> |
|||
<el-table-column prop="id" label="序号" width="80"></el-table-column> |
|||
<el-table-column prop="name" label="作业名称"></el-table-column> |
|||
<el-table-column prop="contentSummary" label="内容概要"></el-table-column> |
|||
<el-table-column prop="relatedArticle" label="关联文章"></el-table-column> |
|||
<el-table-column prop="relatedVideo" label="关联直播"></el-table-column> |
|||
<el-table-column prop="submissionCount" label="填写份数"></el-table-column> |
|||
<el-table-column prop="submissionDeadline" label="提交时间"></el-table-column> |
|||
<el-table-column prop="status" label="状态"></el-table-column> |
|||
<el-table-column prop="time" label="发布时间"></el-table-column> |
|||
<el-table-column label="操作"> |
|||
<template #default="scope"> |
|||
<el-button type="text" @click="viewDetails(scope.row)">查看明细</el-button> |
|||
<el-button type="text" @click="editAssignment(scope.row)">编辑</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
|
|||
import axios from 'axios' |
|||
import router from '../router'; |
|||
|
|||
const assignments = ref([]) |
|||
|
|||
const newAssignment = () => { |
|||
router.push('/addwork') |
|||
} |
|||
|
|||
const viewDetails = (row) => { |
|||
console.log(`查看作业 ${row.name} 的明细`) |
|||
} |
|||
|
|||
const editAssignment = (row) => { |
|||
console.log(`编辑作业 ${row.name}`) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
axios.get('/api/assignments') // 假设你的后端API端点是/api/assignments |
|||
.then((response) => { |
|||
assignments.value = response.data |
|||
}) |
|||
.catch((error) => { |
|||
console.error('获取作业列表失败', error) |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
.main { |
|||
padding: 20px 203px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
.list { |
|||
padding: 0 60px; |
|||
background-color: white; |
|||
} |
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 52px; |
|||
border-bottom:2px solid #ececec; |
|||
padding: 0 60px; |
|||
line-height: 52px; |
|||
} |
|||
.main-button { |
|||
margin: 15px 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
抢点班作业列表 |
|||
</div> |
|||
<div class="list"> |
|||
<el-button class="main-button" type="primary" style="float: left;" @click="newAssignment">新建作业</el-button> |
|||
<el-table :data="assignments" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }" |
|||
:cell-style="{ 'text-align': 'center' }"> |
|||
<el-table-column label="序号"> |
|||
<template #default="scope"> |
|||
{{ scope.$index + (PageNo - 1) * PageSize + 1 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="作业名称"></el-table-column> |
|||
<el-table-column label="内容归属"> |
|||
<template v-slot="scope"> |
|||
<span v-if="scope.row.clubType === '1'">牧民俱乐部</span> |
|||
<span v-else-if="scope.row.clubType === '2'">博古论坛</span> |
|||
<span v-else-if="scope.row.clubType === '3'">神枪手俱乐部</span> |
|||
<span v-else-if="scope.row.clubType === '4'">环球俱乐部</span> |
|||
<span v-else-if="scope.row.clubType === '5'">价值投资</span> |
|||
<span v-else-if="scope.row.clubType === '6'">波段行情</span> |
|||
<span v-else-if="scope.row.clubType === '7'">抄底卖顶</span> |
|||
<span v-else-if="scope.row.clubType === '8'">资金及仓位管理</span> |
|||
<span v-else>财富的游戏</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="article" label="关联文章"> |
|||
<template #default="{ row }"> |
|||
<el-tooltip class="tooltip" v-if="row.article" :content="row.article.title" placement="bottom" |
|||
:disabled="row.article.title.length <= 10" effect="light"> |
|||
{{ row.article.title.slice(0, 10) || '—' }} |
|||
</el-tooltip> |
|||
<span v-else>—</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="live" label="关联直播"> |
|||
<template #default="{ row }"> |
|||
<el-tooltip class="tooltip" v-if="row.live" :content="row.live" placement="bottom" |
|||
:disabled="row.live.name.length <= 10" effect="light"> |
|||
{{ row.live.name.slice(0, 10) || '—' }} |
|||
</el-tooltip> |
|||
<span v-else>—</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="count" label="填写份数"></el-table-column> |
|||
<el-table-column label="提交时间"> |
|||
<template v-slot="scope"> |
|||
{{ scope.row.startDate.split(' ')[0] }} 至 {{ scope.row.endDate.split(' ')[0] }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" label="状态"> |
|||
<template #default="{ row }"> |
|||
<span v-if="row.status === 0">未上架</span> |
|||
<span v-else-if="row.status === 1">发布中</span> |
|||
<span v-else-if="row.status === 2">已下架</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createdAt" label="发布时间"></el-table-column> |
|||
<el-table-column label="操作"> |
|||
<template #default="scope"> |
|||
<el-button type="primary" link @click="viewDetails(scope.row)">查看明细</el-button> |
|||
<el-button type="primary" link v-if="scope.row.status != '2'" @click="editAssignment(scope.row)">编辑</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</div> |
|||
<div class="page"> |
|||
<el-pagination v-model:current-page="PageNo" v-model:page-size="PageSize" :page-sizes="[20, 50, 100, 200]" |
|||
:size="size" :disabled="disabled" :background="background" layout="total,prev,next,sizes,jumper" |
|||
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import ClassListApi from '../api/ClassListApi'; |
|||
|
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
|
|||
const assignments = ref([]); |
|||
|
|||
// 初始化页码，这里假设初始页码为1，你可以根据实际需求修改 |
|||
const PageNo = ref(1); |
|||
// 初始化页面大小，这里假设初始页面大小为10，同样可按需修改 |
|||
const PageSize = ref(20); |
|||
const size = ref('default'); |
|||
const disabled = ref(false); |
|||
const background = ref(true); |
|||
const total = ref(0); |
|||
// 处理页面大小改变的事件函数，将新的页面大小赋值给PageSize变量 |
|||
const handleSizeChange = (newPageSize) => { |
|||
PageSize.value = newPageSize; |
|||
getAssignments(PageNo.value, PageSize.value); |
|||
}; |
|||
|
|||
// 处理当前页码改变的事件函数，将新的页码赋值给PageNo变量 |
|||
const handleCurrentChange = (newPageNo) => { |
|||
PageNo.value = newPageNo; |
|||
getAssignments(PageNo.value, PageSize.value); |
|||
}; |
|||
const getAssignments = (PageNo, PageSize) => { |
|||
ClassListApi.getClassList(PageNo, PageSize) |
|||
.then((response) => { |
|||
assignments.value = response.data.list; |
|||
total.value = response.data.total; |
|||
console.log(assignments.value); |
|||
}) |
|||
.catch((error) => { |
|||
console.error('获取作业列表失败', error); |
|||
}); |
|||
}; |
|||
//在组件初始化时（类似mounted生命周期的效果）获取一次初始数据 |
|||
onMounted(() => { |
|||
getAssignments(PageNo.value, PageSize.value); |
|||
}); |
|||
|
|||
const newAssignment = () => { |
|||
router.push('/addwork') |
|||
} |
|||
|
|||
// 查看明细按钮的点击事件处理函数 |
|||
const viewDetails = async(row) => { |
|||
try { |
|||
router.push({ |
|||
name: 'workdetail', |
|||
params: { id: row.id }, |
|||
}); |
|||
console.log(row.id) |
|||
} catch (error) { |
|||
console.log('获取数据出错:', error) |
|||
} |
|||
|
|||
}; |
|||
|
|||
const router = useRouter(); |
|||
// 编辑按钮的点击事件处理函数 |
|||
const editAssignment = async (row) => { |
|||
try { |
|||
router.push({ |
|||
name: 'updatework', |
|||
params: { id: row.id }, |
|||
}); |
|||
console.log(row.id) |
|||
} catch (error) { |
|||
console.log('获取数据出错:', error) |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page { |
|||
margin-left: 70%; |
|||
} |
|||
|
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
|
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 20px 203px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.list { |
|||
padding: 0 60px; |
|||
background-color: white; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 52px; |
|||
border-bottom: 2px solid #ececec; |
|||
padding: 0 60px; |
|||
line-height: 52px; |
|||
} |
|||
|
|||
.main-button { |
|||
margin: 15px 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
<template> |
|||
<div class="login-container"> |
|||
<div class="title1">管理后台</div> |
|||
<div class="login-box"> |
|||
<div class="title2">欢迎登录</div> |
|||
<div class="username"> |
|||
<el-input type="text" v-model="username" placeholder="请输入账号"> |
|||
<template #prefix> |
|||
<img class="img" src="../assets/login/denglu.png" /> |
|||
</template> |
|||
</el-input> |
|||
</div> |
|||
<div class="password"> |
|||
<el-input type="password" v-model="password" placeholder="请输入密码"> |
|||
<template #prefix> |
|||
<img class="img" src="../assets/login/mima.png" /> |
|||
</template> |
|||
</el-input> |
|||
</div> |
|||
<button @click="login">登录</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
|
|||
// 使用ref创建响应式数据 |
|||
const username = ref(''); |
|||
const password = ref(''); |
|||
|
|||
// 定义登录函数 |
|||
const login = () => { |
|||
// 这里可以添加实际的登录逻辑，比如发送API请求到后端验证 |
|||
console.log('用户名:', username.value); |
|||
console.log('密码:', password.value); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title1 { |
|||
font-size: 40px; |
|||
color: #21d3ca; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.title2 { |
|||
font-size: 20px; |
|||
color: #21d3ca; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.username, |
|||
.password { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
background-color: #e6e6e6; |
|||
} |
|||
|
|||
:deep(.el-input__wrapper) { |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.img { |
|||
width: 25px; |
|||
height: 25px; |
|||
} |
|||
|
|||
.login-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.login-box { |
|||
background-color: white; |
|||
border-radius: 5px; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
padding: 50px; |
|||
text-align: center; |
|||
height: 200px; |
|||
width: 250px; |
|||
} |
|||
|
|||
h1 { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
input { |
|||
width: 100%; |
|||
padding: 10px; |
|||
margin-bottom: 10px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
button { |
|||
width: 100%; |
|||
padding: 10px; |
|||
background-color: #21d3ca; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -1,10 +0,0 @@ |
|||
<script> |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
|
|||
</template> |
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,476 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
<div class="main-title-text" style="float: left;"> |
|||
编辑作业 |
|||
</div> |
|||
<div> |
|||
<el-button class="main-button" @click="back">返回上一页</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="main-back"> |
|||
<el-form :model="form" label-width="auto" style="max-width: 700px" size="large"> |
|||
<el-form-item label="作业名称"> |
|||
<el-input v-model="form.Name" placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="提交时间" style="width: 70%"> |
|||
<el-date-picker v-model="form.picker" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" /> |
|||
</el-form-item> |
|||
<el-form-item label="作业归属"> |
|||
<el-select v-model="form.ClubType" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="关联文章"> |
|||
<el-autocomplete v-model="articleTitle" :fetch-suggestions="queryArticleList" placeholder="请输入" |
|||
@select="handleSelectArticle" clearable/> |
|||
</el-form-item> |
|||
<el-form-item label="关联直播"> |
|||
<el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%" clearable> |
|||
<el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="选择类型"> |
|||
<div> |
|||
<el-button type="primary" @click="addSingleChoice">添加单选</el-button> |
|||
<el-button type="primary" @click="addMultipleChoice">添加多选</el-button> |
|||
<el-button type="primary" @click="addBlank">添加单选填空</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<div class="question-container" v-for="(question, index) in questions" :key="index" |
|||
:class="{ 'bg-change': isHovered[index] }" @mouseenter="handleMouseEnter(index)" |
|||
@mouseleave="handleMouseLeave(index)"> |
|||
<div class="question-title"> |
|||
{{ questionPrefix(index) }} {{ getQuestionTypeText(question.type) }} |
|||
</div> |
|||
<div style="width: 600px;"> |
|||
<el-input v-model="question.description" /> |
|||
</div> |
|||
<div class="add" v-if="question.type !== 'blank'"> |
|||
<div class="question-option"> |
|||
<span>设置选项:</span> |
|||
<el-button type="primary" text @click="addOption(index)">添加</el-button> |
|||
</div> |
|||
<div v-for="(option, optionIndex) in question.content" :key="optionIndex"> |
|||
<div class="select" style="display: flex;"> |
|||
<div class="selection-item" style="display: flex;"> |
|||
<div style="width: 550px;"> |
|||
<el-input v-model="question.content[optionIndex].text" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="primary" text @click="removeOption(index, optionIndex)">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="delete" style="margin-left: 50px;"> |
|||
<el-button type="info" plain @click="removeQuestion(index)">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="submit"> |
|||
<el-button type="primary" :disabled="!form.Name||!form.picker" @click="onSubmit">确认</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, computed } from 'vue' |
|||
import { useRouter,useRoute } from 'vue-router'; |
|||
import AddWorkApi from '../api/AddWorkApi'; |
|||
import _ from 'lodash'; |
|||
import dayjs from 'dayjs'; |
|||
import ClassListApi from '../api/ClassListApi'; |
|||
import { ElMessage } from 'element-plus'; |
|||
|
|||
const router = useRouter(); |
|||
const options = ref([ |
|||
{ id: 1, name: '牧民俱乐部' }, |
|||
{ id: 2, name: '博古论坛' }, |
|||
{ id: 3, name: '神枪手俱乐部' }, |
|||
{ id: 4, name: '环球俱乐部' }, |
|||
{ id: 5, name: '价值投资' }, |
|||
{ id: 6, name: '波段行情' }, |
|||
{ id: 7, name: '抄底卖顶' }, |
|||
{ id: 8, name: '资金及仓位管理' }, |
|||
{ id: 9, name: '财富的游戏' }, |
|||
]); |
|||
|
|||
const route = useRoute(); |
|||
const id=ref(route.params.id) |
|||
console.log(id.value+'============') |
|||
|
|||
// 用于存储获取到的作业数据 |
|||
const homeworkData = ref<{ |
|||
name: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
clubType: string; |
|||
article: { |
|||
id: string; |
|||
title: string; |
|||
}; |
|||
live: { |
|||
id: string; |
|||
name: string; |
|||
}; |
|||
form: FormItemType[]; |
|||
}>({ |
|||
name: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
clubType: '', |
|||
article: { |
|||
id: '', |
|||
title: '', |
|||
}, |
|||
live: { |
|||
id: '', |
|||
name: '' |
|||
}, |
|||
form: [] |
|||
}); |
|||
|
|||
// 定义form数组中每个元素的类型接口 |
|||
interface FormItemType { |
|||
id: number; |
|||
type: number; |
|||
description: string; |
|||
content: string; // 这里先定义为string，因为从数据看是JSON字符串格式，后续需要解析 |
|||
groupId: number; |
|||
name: string; |
|||
sort: number; |
|||
status: number; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
|
|||
const form = ref({ |
|||
id: '', |
|||
Name: '', |
|||
ClubType: '', |
|||
ArticleId: '', |
|||
LiveId: '', |
|||
picker: [], |
|||
StartDate: '', |
|||
EndDate: '', |
|||
Questions: [] |
|||
}); |
|||
|
|||
onMounted(async () => { |
|||
try { |
|||
const response = await ClassListApi.getClassListOne(id.value); |
|||
homeworkData.value = response.data; |
|||
console.log(homeworkData.value) |
|||
form.value.Name = homeworkData.value.name; |
|||
|
|||
const start = dayjs(homeworkData.value.startDate).format('YYYY-MM-DD'); |
|||
const end = dayjs(homeworkData.value.endDate).format('YYYY-MM-DD'); |
|||
form.value.picker = [start, end]; |
|||
|
|||
if (homeworkData.value.article && homeworkData.value.article.title) { |
|||
articleTitle.value = homeworkData.value.article.title; |
|||
} else if (homeworkData.value.live && homeworkData.value.live.name) { |
|||
form.value.LiveId = homeworkData.value.live.name; |
|||
} |
|||
form.value.ClubType = homeworkData.value.clubType; |
|||
const processFormData = () => { |
|||
const newQuestions = []; |
|||
homeworkData.value.form.forEach((formItem: FormItemType) => { |
|||
// 解析content字段中的JSON字符串为实际的数组对象 |
|||
const contentArray = JSON.parse(formItem.content) as { id: string, text: string }[]; |
|||
// 创建一个新的符合questions结构的对象 |
|||
const question = { |
|||
id: formItem.id, |
|||
type: formItem.type, |
|||
description: formItem.description, |
|||
content: contentArray, |
|||
groupId: formItem.groupId, |
|||
name: formItem.name, |
|||
sort: formItem.sort, |
|||
status: formItem.status, |
|||
createdAt: formItem.createdAt, |
|||
updatedAt: formItem.updatedAt, |
|||
}; |
|||
newQuestions.push(question); |
|||
}); |
|||
return newQuestions; |
|||
}; |
|||
questions.value = processFormData(); |
|||
} catch (error) { |
|||
console.error('接口请求出现错误:', error); |
|||
} |
|||
}); |
|||
|
|||
|
|||
const articleTitle = ref(''); |
|||
// 问题列表数据 |
|||
const questions = ref([]); |
|||
const onSubmit = () => { |
|||
// 从picker中获取日期数据并进行格式转换 |
|||
if (form.value.picker && form.value.picker.length === 2) { |
|||
const startDate = dayjs(form.value.picker[0]).format('YYYY-MM-DD HH:mm:00'); |
|||
const endDate = dayjs(form.value.picker[1]).format('YYYY-MM-DD HH:mm:00'); |
|||
form.value.StartDate = startDate; |
|||
form.value.EndDate = endDate; |
|||
} |
|||
form.value.Questions = questions.value; |
|||
if (form.value.LiveId) { |
|||
// 如果form.value.liveid有值，优先使用liveid，清空ArticleId（假设后端不接受同时传这两个值且以liveid为准，可根据实际情况调整） |
|||
form.value.ArticleId = ''; |
|||
} else if (form.value.ArticleId) { |
|||
// 如果手动选择了关联文章，使用手动选择后更新的文章id（form.value.ArticleId） |
|||
} else if (homeworkData.value.article && homeworkData.value.article.id) { |
|||
// 如果没有手动选择，使用后端传回的数据中的关联文章id（homeworkData.value.article.id） |
|||
form.value.ArticleId = homeworkData.value.article.id; |
|||
} |
|||
if (typeof id.value === 'string') { |
|||
form.value.id = id.value; |
|||
} |
|||
ClassListApi.editWork(form.value) |
|||
.then((response) => { |
|||
console.log(response); |
|||
ElMessage.success('编辑成功'); |
|||
router.push('/list') |
|||
}) |
|||
.catch((error) => { |
|||
console.error('编辑失败', error); |
|||
ElMessage.error('编辑失败'); |
|||
}); |
|||
console.log(id.value+'--------------') |
|||
console.log(form.value) |
|||
} |
|||
const back = () => { |
|||
window.history.back() |
|||
} |
|||
|
|||
// 存储根据文章输入内容查询到的关联文章结果列表 |
|||
const articleSearchResults = ref([]); |
|||
// 根据文章输入内容查询关联文章的函数 |
|||
const queryArticleList = async (queryString: string) => { |
|||
try { |
|||
const response = await AddWorkApi.getArticleList(queryString); |
|||
const formattedResults = response.data.map(article => ({ |
|||
value: article.title, |
|||
label: article.id |
|||
})); |
|||
articleSearchResults.value = formattedResults; |
|||
return formattedResults; |
|||
} catch (error) { |
|||
console.error('查询关联文章失败', error); |
|||
return []; |
|||
} |
|||
}; |
|||
// 处理选择文章的函数 |
|||
const handleSelectArticle = (article: { label: string }) => { |
|||
// 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等 |
|||
console.log('选中的文章id', article.label); |
|||
form.value.ArticleId = article.label; // 将选中文章的id赋值给对应表单字段，用于传递给后端 |
|||
const selectedArticle = articleSearchResults.value.find(a => a.label === article.label); |
|||
if (selectedArticle) { |
|||
articleTitle.value = selectedArticle.value; // 更新显示的文章题目 |
|||
} |
|||
}; |
|||
|
|||
//获取直播列表 |
|||
const live = ref([]); |
|||
function getLive() { |
|||
AddWorkApi.getLiveList() |
|||
.then(res => { |
|||
live.value = res.data; |
|||
console.log(live.value); |
|||
}) |
|||
.catch(error => { |
|||
console.error('获取直播列表失败', error) |
|||
}) |
|||
} |
|||
getLive(); |
|||
|
|||
// 根据类型获取对应的题目类型文本显示 |
|||
const getQuestionTypeText = (type) => { |
|||
switch (type) { |
|||
case 1: |
|||
return '作业题目(单选)'; |
|||
case 2: |
|||
return '作业题目(多选)'; |
|||
case 3: |
|||
return '作业题目(简答题)'; |
|||
default: |
|||
return '未知类型题目'; |
|||
} |
|||
}; |
|||
|
|||
const addSingleChoice = () => { |
|||
questions.value.push({ |
|||
type: 1, // 假设1代表单选，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" },{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addMultipleChoice = () => { |
|||
questions.value.push({ |
|||
type: 2, // 假设2代表多选，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" },{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addBlank = () => { |
|||
questions.value.push({ |
|||
type: 3, // 假设3代表简答题，和后端格式对应起来 |
|||
description: '', |
|||
content: [{ "id": "", "text": "" }] |
|||
}); |
|||
}; |
|||
|
|||
const addOption = (questionIndex) => { |
|||
const currentQuestion = questions.value[questionIndex]; |
|||
const currentContent = JSON.parse(currentQuestion.content); |
|||
currentContent.push({ "id": "", "text": "" }); |
|||
currentQuestion.content = JSON.stringify(currentContent); |
|||
}; |
|||
|
|||
const removeOption = (questionIndex, optionIndex) => { |
|||
const currentQuestion = questions.value[questionIndex]; |
|||
const currentContent = JSON.parse(currentQuestion.content); |
|||
currentContent.splice(optionIndex, 1); |
|||
currentQuestion.content = JSON.stringify(currentContent); |
|||
}; |
|||
|
|||
const removeQuestion = (questionIndex) => { |
|||
questions.value.splice(questionIndex, 1); |
|||
}; |
|||
|
|||
// 计算属性，用于生成序号前缀 |
|||
const questionPrefix = computed(() => { |
|||
return (index) => { |
|||
return `${index + 1}、`; |
|||
}; |
|||
}) |
|||
|
|||
// 用于存储每个问题标题是否被鼠标悬停的状态，初始化为false |
|||
const isHovered = ref(Array(questions.value.length).fill(false)); |
|||
const handleMouseEnter = (index) => { |
|||
isHovered.value[index] = true; |
|||
}; |
|||
|
|||
const handleMouseLeave = (index) => { |
|||
isHovered.value[index] = false; |
|||
}; |
|||
|
|||
// 在组件挂载后初始化 `isHovered` 数组长度与 `questions` 数组长度一致 |
|||
onMounted(() => { |
|||
isHovered.value = Array(questions.value.length).fill(false); |
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
.submit { |
|||
margin: 100px 212px; |
|||
} |
|||
|
|||
.submit .el-button { |
|||
padding: 25px 150px; |
|||
} |
|||
|
|||
.question-title { |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
|
|||
.bg-change { |
|||
background-color: rgba(200, 200, 200, 0.3); |
|||
} |
|||
|
|||
.question-title { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.select { |
|||
margin: 10px 0px 0px; |
|||
} |
|||
|
|||
.delete { |
|||
position: absolute; |
|||
right: 10px; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
.add { |
|||
position: relative; |
|||
} |
|||
|
|||
.question-container { |
|||
margin: 20px 0; |
|||
padding: 10px 20px; |
|||
width: 750px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
|
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 212px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 60px; |
|||
border-bottom: 2px solid #ececec; |
|||
padding: 0 15px; |
|||
line-height: 52px; |
|||
} |
|||
|
|||
.main-button { |
|||
margin: 10px 15px 0 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
float: right; |
|||
} |
|||
|
|||
.el-form { |
|||
padding: 30px 78.5px; |
|||
margin: auto; |
|||
} |
|||
|
|||
.el-form-item { |
|||
--font-size: 16px; |
|||
margin: 0 0 25px; |
|||
} |
|||
|
|||
.main-back { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,265 @@ |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-header class="header"> |
|||
<el-text class="header-text">抢点班作业后台管理</el-text> |
|||
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button> |
|||
</el-header> |
|||
<el-main class="main"> |
|||
<div class="main-title"> |
|||
<div class="main-title-text" style="float: left;"> |
|||
作业详情 |
|||
</div> |
|||
<div> |
|||
<el-button class="main-button" @click="back">返回上一页</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="table-container"> |
|||
<div class="search-bar"> |
|||
<el-input type="text" placeholder="请输入精网号" v-model="searchCriteria.netNumber" |
|||
style="width: 180px;" size="large" /> |
|||
<el-select v-model="searchCriteria.department" placeholder="选择分店门部" size="large" |
|||
style="width: 180px; margin-left: 15px;"></el-select> |
|||
<el-select v-model="searchCriteria.store" placeholder="--请选择所属门店--" size="large" |
|||
style="width: 180px; margin-left: 15px"></el-select> |
|||
<el-button class="search-btn" type="primary" size="large" @click="searchData">搜索</el-button> |
|||
<div class="export"> |
|||
<el-button class="export-btn" type="primary" size="large">导出数据</el-button> |
|||
</div> |
|||
</div> |
|||
<el-table :data="workdetail" style="width: 100%"> |
|||
<el-table-column label="序号"> |
|||
<template #default="scope"> |
|||
{{ scope.$index + (PageNo - 1) * PageSize + 1 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="姓名"></el-table-column> |
|||
<el-table-column prop="jwcode" label="精网号"></el-table-column> |
|||
<el-table-column label="分布-门店"> |
|||
<template v-slot="scope"> |
|||
{{ scope.row.deptName }} - {{ scope.row.shopName }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="作业详情"> |
|||
<template #default="scope"> |
|||
<a class="look" @click="viewDetails(scope.row)">查看</a> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="submitTime" label="提交时间"> |
|||
<template v-slot="scope"> |
|||
{{ scope.row.Reply[0].submitTime }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="page"> |
|||
<el-pagination v-model:current-page="PageNo" v-model:page-size="PageSize" |
|||
:page-sizes="[20, 50, 100, 200]" :size="size" :disabled="disabled" :background="background" |
|||
layout="sizes,prev,next,jumper" :total="10" @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" /> |
|||
</div> |
|||
</div> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { useRoute } from 'vue-router'; |
|||
import ClassListApi from '../api/ClassListApi'; |
|||
const back = () => { |
|||
window.history.back() |
|||
} |
|||
|
|||
const route = useRoute(); |
|||
const id = ref(route.params.id) |
|||
console.log(id.value + '============') |
|||
|
|||
// 用于存储获取到的作业数据 |
|||
const workdetail = ref < { |
|||
total: number; |
|||
jwcode: number; |
|||
name: string; |
|||
depId:string; |
|||
depName: string; |
|||
shopId: string; |
|||
shopName: string; |
|||
form: FormItemType[]; |
|||
} > ({ |
|||
name: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
clubType: '', |
|||
article: { |
|||
id: '', |
|||
title: '', |
|||
}, |
|||
live: { |
|||
id: '', |
|||
name: '' |
|||
}, |
|||
form: [] |
|||
}); |
|||
|
|||
// 定义form数组中每个元素的类型接口 |
|||
interface FormItemType { |
|||
id: number; |
|||
type: number; |
|||
description: string; |
|||
content: string; // 这里先定义为string，因为从数据看是JSON字符串格式，后续需要解析 |
|||
groupId: number; |
|||
name: string; |
|||
sort: number; |
|||
status: number; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
|
|||
onMounted(async () => { |
|||
try { |
|||
const response = await ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value); |
|||
workdetail.value = response.data; |
|||
console.log(workdetail.value) |
|||
} catch (error) { |
|||
console.error('接口请求出现错误:', error); |
|||
} |
|||
}); |
|||
|
|||
|
|||
//搜索条件 |
|||
const searchCriteria = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
shopName: '' |
|||
}); |
|||
|
|||
// 初始化页码，这里假设初始页码为1，你可以根据实际需求修改 |
|||
const PageNo = ref(1); |
|||
// 初始化页面大小，这里假设初始页面大小为10，同样可按需修改 |
|||
const PageSize = ref(20); |
|||
|
|||
|
|||
// 搜索方法 |
|||
// const searchData = () => { |
|||
// filteredData.value = data.filter(item => { |
|||
// return ( |
|||
// item.jwcode.includes(searchCriteria.value.netNumber) && |
|||
// //item.department.includes(searchCriteria.value.department) && |
|||
// item.store.includes(searchCriteria.value.store) |
|||
// ); |
|||
// }); |
|||
// pagination.value.page = 1; |
|||
// }; |
|||
|
|||
// 查看详情方法（这里只是一个示例，实际可能需要路由跳转等操作） |
|||
const viewDetails = (item) => { |
|||
console.log('查看详情', item); |
|||
}; |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
.look { |
|||
color: rgb(69, 131, 254); |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.table-container { |
|||
margin: 6px 0 0; |
|||
padding: 15px 60px; |
|||
} |
|||
|
|||
.search-bar { |
|||
margin-bottom: 10px; |
|||
position: relative; |
|||
} |
|||
|
|||
.search-btn { |
|||
padding: 10px 20px; |
|||
margin: 0 0 0 15px; |
|||
} |
|||
|
|||
.export { |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 0px; |
|||
} |
|||
|
|||
.export-btn { |
|||
padding: 12px 20px; |
|||
text-align: right; |
|||
} |
|||
|
|||
table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
th, |
|||
td { |
|||
border: 1px solid #ccc; |
|||
padding: 5px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.pagination select { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.pagination button { |
|||
margin-right: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
|
|||
.header { |
|||
height: 100px; |
|||
line-height: 100px; |
|||
padding: 0 80px; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 22px; |
|||
font-weight: 500; |
|||
color: black; |
|||
float: left; |
|||
} |
|||
|
|||
.header-button { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 212px; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 16px; |
|||
background-color: white; |
|||
font-weight: bold; |
|||
height: 60px; |
|||
border-bottom: 2px solid #ececec; |
|||
padding: 0 60px; |
|||
line-height: 52px; |
|||
} |
|||
|
|||
.main-button { |
|||
margin: 10px 15px 0 0; |
|||
padding: 12px 20px; |
|||
height: 40px; |
|||
float: right; |
|||
} |
|||
|
|||
.main-back { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue