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