Wangwei
1 year ago
4 changed files with 313 additions and 328 deletions
@ -1,339 +1,320 @@
|
||||
<template> |
||||
|
||||
<div> |
||||
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%" |
||||
@selection-change="handleSelectionChange" row-key="id" default-expand-all lazy |
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> |
||||
|
||||
<el-table-column prop="title" label="目录大纲"> |
||||
<template #default='scope'> |
||||
<span v-if="scope.row.children" class="f18 fw600 col333">{{scope.row.title}}</span> |
||||
<a v-else :href="'/class/play/'+classid+'/'+scope.row.id" target="_blank" class="item-pl f15"> |
||||
<i class="iconfont icon-bofang2 colb3c f14 mrt10"></i>{{scope.row.title}} |
||||
</a> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column fixed="right" label="发布状态" width="100"> |
||||
<template #default="scope"> |
||||
|
||||
<el-switch v-if="!scope.row.children" v-model="scope.row.display" :active-value="1" |
||||
:inactive-value="0" active-color="#0082fc" inactive-color="#dadde5" |
||||
@click="handleClose(scope.row)"> |
||||
</el-switch> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
|
||||
</el-table> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div> |
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" default-expand-all lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
||||
<el-table-column prop="title" label="目录大纲"> |
||||
<template #default="scope"> |
||||
<span v-if="scope.row.children" class="f18 fw600 col333">{{ scope.row.title }}</span> |
||||
<a v-else :href="'/class/play/' + classid + '/' + scope.row.id" target="_blank" class="item-pl f15"> <i class="iconfont icon-bofang2 colb3c f14 mrt10"></i>{{ scope.row.title }} </a> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column fixed="right" label="发布状态" width="100"> |
||||
<template #default="scope"> |
||||
<el-switch v-if="!scope.row.children" v-model="scope.row.display" :active-value="1" :inactive-value="0" active-color="#0082fc" inactive-color="#dadde5" @click="handleClose(scope.row)"> </el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
|
||||
<script> |
||||
import { useRoute } from 'vue-router' |
||||
import { scheduleList, noticeAdd, noticeEdit, scheduleUpdate, studyLog } from "@/api/study_admin"; |
||||
import { ref, toRefs, reactive, getCurrentInstance, nextTick } from 'vue'; |
||||
import store from '@/store' |
||||
import { _debounce } from "@/utils/debounce"; |
||||
export default { |
||||
name: 'class_homework', |
||||
setup() { |
||||
const { proxy } = getCurrentInstance() |
||||
const route = useRoute() |
||||
const classid = route.params.classid; |
||||
const state = reactive({ |
||||
headers: { |
||||
'authentication': store.getters.get_authentication |
||||
}, |
||||
loading: true, |
||||
tableData: [], // 数据列表 |
||||
multipleSelection: [], // 选中项 |
||||
total: 0, // 总条数 |
||||
page: 1, // 当前页 |
||||
perpage: 10, // 分页大小 |
||||
id: '', |
||||
kw: '', |
||||
dialogFormVisible: false, |
||||
dialogEdit: false, |
||||
dialogUidLog: false, |
||||
numbereRef: { |
||||
title: '', |
||||
url: '', |
||||
}, |
||||
rules: { |
||||
title: [ |
||||
{ required: true, message: '请输入公告内容', trigger: 'blur' }, |
||||
], |
||||
url: [ |
||||
{ required: true, type: "url", message: '请输入正确的url', trigger: 'blur' }, |
||||
], |
||||
}, |
||||
rowStudent: {}, |
||||
modEdit: { |
||||
id: '', |
||||
xs_name: '', |
||||
gongsi: '', |
||||
gangwei: '', |
||||
shouji: '', |
||||
fenshu: '', |
||||
beizhu: '', |
||||
}, |
||||
uidLog: [], |
||||
alltime: '', |
||||
username: '', |
||||
}) |
||||
|
||||
// 获取学生列表 |
||||
const getnotice = async () => { |
||||
state.loading = true |
||||
const res = await scheduleList(classid); |
||||
if (res.code === 200) { |
||||
state.tableData = res.data |
||||
state.total = res.data.total |
||||
state.page = res.data.current_page |
||||
state.loading = false |
||||
} |
||||
}; |
||||
getnotice(); |
||||
|
||||
// 观看记录 |
||||
const getUserLog = async (uid) => { |
||||
state.loading = true |
||||
const res = await studyLog(classid, uid); |
||||
if (res.code === 200) { |
||||
state.uidLog = res.data.data; |
||||
state.alltime = res.data.alltime; |
||||
state.username = res.data.username; |
||||
state.dialogUidLog = true; |
||||
state.loading = false |
||||
} |
||||
}; |
||||
|
||||
// 设置当前查看的数据item |
||||
const setItem = (item) => { |
||||
state.item = item |
||||
state.isShowItem = true |
||||
} |
||||
|
||||
const handleOption = () => { |
||||
state.page = 1 |
||||
getnotice() |
||||
} |
||||
|
||||
|
||||
// 选择项 |
||||
const handleSelectionChange = (val) => { |
||||
state.multipleSelection = val |
||||
} |
||||
const changePage = (val) => { |
||||
state.page = val |
||||
getnotice() |
||||
} |
||||
// 每页显示条数 |
||||
const handleSizeChange = (val) => { |
||||
state.perpage = val |
||||
getnotice() |
||||
} |
||||
|
||||
// 更新状态 |
||||
const handleClose = async (row) => { |
||||
const params = { |
||||
data: { |
||||
id: row.id, |
||||
display: row.display, |
||||
title: row.title, |
||||
} |
||||
} |
||||
const res = await scheduleUpdate(classid, params); |
||||
if (res.message === 'success') { |
||||
if (res.data.display == 1) { |
||||
proxy.$notify({ |
||||
title: '发布成功', |
||||
type: 'success', |
||||
message: res.data.title + '【发布成功】', |
||||
}); |
||||
} else { |
||||
proxy.$notify.info({ |
||||
title: '取消发布成功', |
||||
message: res.data.title + '【已取消发布】', |
||||
}); |
||||
} |
||||
} else { |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '服务器错误', |
||||
center: true |
||||
}); |
||||
} |
||||
import { useRoute } from "vue-router"; |
||||
import { scheduleList, noticeAdd, noticeEdit, scheduleUpdate, studyLog } from "@/api/study_admin"; |
||||
import { ref, toRefs, reactive, getCurrentInstance, nextTick } from "vue"; |
||||
import store from "@/store"; |
||||
import { _debounce } from "@/utils/debounce"; |
||||
export default { |
||||
name: "class_homework", |
||||
setup() { |
||||
const { proxy } = getCurrentInstance(); |
||||
const route = useRoute(); |
||||
const classid = route.params.classid; |
||||
const state = reactive({ |
||||
headers: { |
||||
authentication: store.getters.get_authentication, |
||||
}, |
||||
loading: true, |
||||
tableData: [], // 数据列表 |
||||
multipleSelection: [], // 选中项 |
||||
total: 0, // 总条数 |
||||
page: 1, // 当前页 |
||||
perpage: 10, // 分页大小 |
||||
id: "", |
||||
kw: "", |
||||
dialogFormVisible: false, |
||||
dialogEdit: false, |
||||
dialogUidLog: false, |
||||
numbereRef: { |
||||
title: "", |
||||
url: "", |
||||
}, |
||||
rules: { |
||||
title: [{ required: true, message: "请输入公告内容", trigger: "blur" }], |
||||
url: [{ required: true, type: "url", message: "请输入正确的url", trigger: "blur" }], |
||||
}, |
||||
rowStudent: {}, |
||||
modEdit: { |
||||
id: "", |
||||
xs_name: "", |
||||
gongsi: "", |
||||
gangwei: "", |
||||
shouji: "", |
||||
fenshu: "", |
||||
beizhu: "", |
||||
}, |
||||
uidLog: [], |
||||
alltime: "", |
||||
username: "", |
||||
}); |
||||
|
||||
// 获取学生列表 |
||||
const getnotice = async () => { |
||||
state.loading = true; |
||||
const res = await scheduleList(classid); |
||||
if (res.code === 200) { |
||||
state.tableData = res.data; |
||||
state.total = res.data.total; |
||||
state.page = res.data.current_page; |
||||
state.loading = false; |
||||
} |
||||
}; |
||||
getnotice(); |
||||
|
||||
// 观看记录 |
||||
const getUserLog = async (uid) => { |
||||
state.loading = true; |
||||
const res = await studyLog(classid, uid); |
||||
if (res.code === 200) { |
||||
state.uidLog = res.data.data; |
||||
state.alltime = res.data.alltime; |
||||
state.username = res.data.username; |
||||
state.dialogUidLog = true; |
||||
state.loading = false; |
||||
} |
||||
}; |
||||
|
||||
// 设置当前查看的数据item |
||||
const setItem = (item) => { |
||||
state.item = item; |
||||
state.isShowItem = true; |
||||
}; |
||||
|
||||
const handleOption = () => { |
||||
state.page = 1; |
||||
getnotice(); |
||||
}; |
||||
|
||||
// 选择项 |
||||
const handleSelectionChange = (val) => { |
||||
state.multipleSelection = val; |
||||
}; |
||||
const changePage = (val) => { |
||||
state.page = val; |
||||
getnotice(); |
||||
}; |
||||
// 每页显示条数 |
||||
const handleSizeChange = (val) => { |
||||
state.perpage = val; |
||||
getnotice(); |
||||
}; |
||||
|
||||
// 更新状态 |
||||
const handleClose = async (row) => { |
||||
const params = { |
||||
data: { |
||||
id: row.id, |
||||
display: row.display, |
||||
title: row.title, |
||||
}, |
||||
}; |
||||
const res = await scheduleUpdate(classid, params); |
||||
if (res.message === "success") { |
||||
if (res.data.display == 1) { |
||||
proxy.$notify({ |
||||
title: "发布成功", |
||||
type: "success", |
||||
iconClass: "schedule-success", |
||||
message: res.data.title + "【发布成功】", |
||||
}); |
||||
} else { |
||||
proxy.$notify.info({ |
||||
title: "取消发布成功", |
||||
type: "info", |
||||
iconClass: "schedule-info", |
||||
message: res.data.title + "【已取消发布】", |
||||
}); |
||||
} |
||||
} else { |
||||
proxy.$message({ |
||||
type: "error", |
||||
message: "服务器错误", |
||||
center: true, |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
// 添加公告 |
||||
const submitForm = _debounce(() => { |
||||
_submitForm(); |
||||
}, 300); |
||||
const numberValidateRef = ref(null); |
||||
const _submitForm = () => { |
||||
nextTick(() => { |
||||
numberValidateRef.value.validate(async (valid) => { |
||||
if (valid) { |
||||
const params = { |
||||
title: state.numbereRef.title, |
||||
url: state.numbereRef.url, |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
// 添加公告 |
||||
const submitForm = _debounce(() => { |
||||
_submitForm(); |
||||
}, 300) |
||||
const numberValidateRef = ref(null); |
||||
const _submitForm = () => { |
||||
nextTick(() => { |
||||
numberValidateRef.value.validate(async (valid) => { |
||||
if (valid) { |
||||
const params = { |
||||
title: state.numbereRef.title, |
||||
url: state.numbereRef.url, |
||||
} |
||||
const res = await noticeAdd(classid, params) |
||||
if (res.message === 'success') { |
||||
state.dialogFormVisible = false; |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '添加成功', |
||||
center: true |
||||
}); |
||||
setTimeout(function () { |
||||
getnotice() |
||||
}, 100); |
||||
} |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
const noticeValidateRef = ref(null); |
||||
const resnoticeEdit = () => { |
||||
noticeValidateRef.value.validate(async (valid) => { |
||||
if (valid) { |
||||
const params = { |
||||
data: state.modEdit, |
||||
} |
||||
const res = await noticeEdit(classid, params); |
||||
if (res.code === 200) { |
||||
state.dialogEdit = false; |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '编辑成功', |
||||
center: true |
||||
}); |
||||
getnotice() |
||||
} |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
const openStudent = (row) => { |
||||
state.modEdit = row; |
||||
state.dialogEdit = true; |
||||
} |
||||
|
||||
const eidtForm = () => { |
||||
resnoticeEdit(); |
||||
} |
||||
|
||||
// const tableRowClassName = ({ row }) => { |
||||
// if (row.children) { |
||||
// return 'title-row'; |
||||
// } |
||||
// return ''; |
||||
// } |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
classid, |
||||
setItem, |
||||
handleSelectionChange, |
||||
getnotice, |
||||
changePage, |
||||
handleOption, |
||||
handleClose, |
||||
handleSizeChange, |
||||
numberValidateRef, |
||||
submitForm, |
||||
openStudent, |
||||
eidtForm, |
||||
getUserLog, |
||||
noticeValidateRef, |
||||
//tableRowClassName |
||||
const res = await noticeAdd(classid, params); |
||||
if (res.message === "success") { |
||||
state.dialogFormVisible = false; |
||||
proxy.$message({ |
||||
type: "success", |
||||
message: "添加成功", |
||||
center: true, |
||||
}); |
||||
setTimeout(function() { |
||||
getnotice(); |
||||
}, 100); |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
const noticeValidateRef = ref(null); |
||||
const resnoticeEdit = () => { |
||||
noticeValidateRef.value.validate(async (valid) => { |
||||
if (valid) { |
||||
const params = { |
||||
data: state.modEdit, |
||||
}; |
||||
const res = await noticeEdit(classid, params); |
||||
if (res.code === 200) { |
||||
state.dialogEdit = false; |
||||
proxy.$message({ |
||||
type: "success", |
||||
message: "编辑成功", |
||||
center: true, |
||||
}); |
||||
getnotice(); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
const openStudent = (row) => { |
||||
state.modEdit = row; |
||||
state.dialogEdit = true; |
||||
}; |
||||
|
||||
const eidtForm = () => { |
||||
resnoticeEdit(); |
||||
}; |
||||
|
||||
// const tableRowClassName = ({ row }) => { |
||||
// if (row.children) { |
||||
// return 'title-row'; |
||||
// } |
||||
// return ''; |
||||
// } |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
classid, |
||||
setItem, |
||||
handleSelectionChange, |
||||
getnotice, |
||||
changePage, |
||||
handleOption, |
||||
handleClose, |
||||
handleSizeChange, |
||||
numberValidateRef, |
||||
submitForm, |
||||
openStudent, |
||||
eidtForm, |
||||
getUserLog, |
||||
noticeValidateRef, |
||||
//tableRowClassName |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.item-pl:hover{ |
||||
.icon-bofang2{ |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
.item_log { |
||||
width: 120px; |
||||
display: inline-block; |
||||
text-align: right; |
||||
} |
||||
|
||||
.tab-header { |
||||
padding: 24px 0 10px 0; |
||||
} |
||||
|
||||
.ptlist { |
||||
padding: 6px 0; |
||||
overflow-y: auto; |
||||
font-size: 14px; |
||||
|
||||
li { |
||||
padding: 2px 0; |
||||
} |
||||
} |
||||
|
||||
.ifprt { |
||||
padding-right: 10px !important; |
||||
} |
||||
|
||||
.infobox { |
||||
line-height: 24px; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.scrollbar { |
||||
height: 106px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.min-pd { |
||||
padding: 6px 10px; |
||||
} |
||||
|
||||
::v-deep .el-scrollbar__wrap { |
||||
max-height: 300px; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
::v-deep .el-icon-close { |
||||
display: none !important; |
||||
} |
||||
|
||||
::v-deep .el-icon-close-tip { |
||||
display: none !important; |
||||
} |
||||
|
||||
::v-deep .el-button i { |
||||
line-height: 0; |
||||
} |
||||
.item-pl:hover { |
||||
.icon-bofang2 { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
.item_log { |
||||
width: 120px; |
||||
display: inline-block; |
||||
text-align: right; |
||||
} |
||||
|
||||
.tab-header { |
||||
padding: 24px 0 10px 0; |
||||
} |
||||
|
||||
.ptlist { |
||||
padding: 6px 0; |
||||
overflow-y: auto; |
||||
font-size: 14px; |
||||
|
||||
li { |
||||
padding: 2px 0; |
||||
} |
||||
} |
||||
|
||||
.ifprt { |
||||
padding-right: 10px !important; |
||||
} |
||||
|
||||
.infobox { |
||||
line-height: 24px; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.scrollbar { |
||||
height: 106px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.min-pd { |
||||
padding: 6px 10px; |
||||
} |
||||
|
||||
::v-deep .el-scrollbar__wrap { |
||||
max-height: 300px; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
::v-deep .el-icon-close { |
||||
display: none !important; |
||||
} |
||||
|
||||
::v-deep .el-icon-close-tip { |
||||
display: none !important; |
||||
} |
||||
|
||||
::v-deep .el-button i { |
||||
line-height: 0; |
||||
} |
||||
</style> |
||||
|
||||
<style> |
||||
.el-dialog__body { |
||||
padding: 20px 30px 30px 30px; |
||||
} |
||||
/* .title-row td{ |
||||
.el-dialog__body { |
||||
padding: 20px 30px 30px 30px; |
||||
} |
||||
.schedule-success { |
||||
color: #67c23a !important; |
||||
} |
||||
.schedule-info { |
||||
color: #909399 !important; |
||||
} |
||||
/* .title-row td{ |
||||
background-color:#F3F8FF; |
||||
} */ |
||||
</style> |
||||
</style> |
||||
|
Loading…
Reference in new issue