lenghui
5 months ago
14 changed files with 720 additions and 435 deletions
-
640work/package-lock.json
-
8work/package.json
-
2work/src/api/index.js
-
BINwork/src/assets/login/denglu.png
-
BINwork/src/assets/login/mima.png
-
24work/src/router/index.js
-
22work/src/stores/token.js
-
22work/src/stores/user.js
-
270work/src/views/AddWorkView.vue
-
3work/src/views/DoHomeworkView.vue
-
110work/src/views/HomeView.vue
-
10work/src/views/LoginView.vue
-
6work/src/views/WorksShowView.vue
-
8work/vite.config.js
|
After Width: 200 | Height: 200 | Size: 3.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.5 KiB |
@ -0,0 +1,22 @@ |
|||||
|
import {defineStore} from 'pinia'; |
||||
|
/* |
||||
|
使用pinia进行状态管理,不能刷新页面 |
||||
|
Vue中将一些全局的数据保存在某个位置，Vue项目的任何一个组件中，都可以访问它 |
||||
|
*/ |
||||
|
export const useTokenStore = defineStore('token',{ |
||||
|
//状态管理
|
||||
|
state:()=>({ |
||||
|
token: sessionStorage.getItem('token'), |
||||
|
}), |
||||
|
actions:{ |
||||
|
changeToken(token){ |
||||
|
this.token = token; |
||||
|
//长久保存token
|
||||
|
sessionStorage.setItem('token', token) |
||||
|
}, |
||||
|
clear(){ |
||||
|
this.token = null; |
||||
|
sessionStorage.removeItem('token'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,22 @@ |
|||||
|
import {defineStore} from 'pinia'; |
||||
|
/* |
||||
|
使用pinia进行状态管理,不能刷新页面 |
||||
|
Vue中将一些全局的数据保存在某个位置，Vue项目的任何一个组件中，都可以访问它 |
||||
|
*/ |
||||
|
export const useUserStore = defineStore('user',{ |
||||
|
//状态管理
|
||||
|
state:()=>({ |
||||
|
user: JSON.parse(sessionStorage.getItem('user')), |
||||
|
}), |
||||
|
actions:{ |
||||
|
changeUser(user){ |
||||
|
this.user = user; |
||||
|
//长久保存token
|
||||
|
sessionStorage.setItem('user', JSON.stringify(user)); //sessionStorage中只能保存字符串
|
||||
|
}, |
||||
|
clear(){ |
||||
|
this.user = null; |
||||
|
sessionStorage.removeItem('user'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -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> |
|
||||
@ -1,10 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
|
|
||||
</template> |
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue