You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
403 lines
12 KiB
403 lines
12 KiB
<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;" @click="logout">退出登录</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 @change="handleArticleChange"/>
|
|
</el-form-item>
|
|
<el-form-item label="关联直播">
|
|
<el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%" clearable @change="handleLiveChange">
|
|
<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';
|
|
import { ElMessage } from 'element-plus'
|
|
import LoginApi from '../api/LoginApi';
|
|
import axios from 'axios';
|
|
import { useRouter } from 'vue-router';
|
|
import { useTokenStore } from '../stores/token';
|
|
import { useUserStore } from '../stores/user';
|
|
|
|
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: '财富的游戏' },
|
|
|
|
]);
|
|
|
|
// 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+'--------------')
|
|
ElMessage.success('添加成功');
|
|
router.push('/list')
|
|
}
|
|
const back = () => {
|
|
window.history.back()
|
|
}
|
|
|
|
|
|
// 存储根据文章输入内容查询到的关联文章结果列表
|
|
const articleSearchResults = ref([]);
|
|
// 根据文章输入内容查询关联文章的函数
|
|
const queryArticleList = async (queryString: string) => {
|
|
if (form.value.LiveId) {
|
|
ElMessage.warning('您已关联直播，暂无法关联文章');
|
|
articleTitle.value = ''; // 清空文章标题输入框
|
|
form.value.LiveId = '';
|
|
return [];
|
|
}
|
|
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 handleLiveChange = () => {
|
|
if (form.value.ArticleId) {
|
|
ElMessage.warning('您已关联文章，暂无法关联直播');
|
|
form.value.LiveId = ''; // 清空关联直播选择框的值
|
|
form.value.ArticleId = '';
|
|
articleTitle.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 addOption = (questionIndex) => {
|
|
const currentQuestion = questions.value[questionIndex];
|
|
// 如果当前题目没有content属性，则初始化一个空数组
|
|
if (!currentQuestion.content) {
|
|
currentQuestion.content = [];
|
|
}
|
|
currentQuestion.content.push({ id: "", text: "" });
|
|
};
|
|
const removeOption = (questionIndex, optionIndex) => {
|
|
const currentQuestion = questions.value[questionIndex];
|
|
currentQuestion.content.splice(optionIndex, 1);
|
|
};
|
|
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);
|
|
});
|
|
|
|
|
|
//退出
|
|
function logout(){
|
|
//清除登录信息
|
|
const tokenStore = useTokenStore();
|
|
const userStore = useUserStore();
|
|
tokenStore.clear();
|
|
userStore.clear();
|
|
LoginApi.logout().then(res => {
|
|
console.log(res)
|
|
})
|
|
router.push('/')
|
|
}
|
|
</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>
|