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
-
36work/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