Browse Source

DP-1750 线上教室学员授权需求

pull/7/head
Wangwei 1 year ago
parent
commit
91f742c2b6
  1. 955
      src/views/class/admin/student_admin_class.vue

955
src/views/class/admin/student_admin_class.vue

@ -1,152 +1,146 @@
<template> <template>
<div>
<div> <div class="tab-header flex-3">
<div class="tab-header flex-3"> <li>
<li> <el-button type="primary" size="medium" icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加学生 </el-button>
<el-button type="primary" size="medium" icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加学生 <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleClose()" class="mrt10">批量删除</el-button>
</el-button> </li>
<el-button type="danger" size="medium" icon="el-icon-delete" @click="handleClose()" class="mrt10">批量删除</el-button> <li>
</li> <el-input style="width: 200px; margin-right: 10px" placeholder="uid / 姓名" v-model="kw" @change="handleOption" size="medium" clearable>
<li> <template #prefix>
<el-input style="width: 200px; margin-right: 10px" placeholder="uid / 姓名" v-model="kw" @change="handleOption" <i class="el-input__icon el-icon-search"></i>
size="medium" clearable>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
<el-button size="medium" type="primary" icon="el-icon-search" @click="handleOption">搜索</el-button>
</li>
</div>
<el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe
@selection-change="handleSelectionChange" @cell-dblclick="openStudent">
<el-table-column type="selection" width="50">
</el-table-column>
<el-table-column prop="id" label="编号" width="80">
</el-table-column>
<el-table-column prop="uid" label="uid" >
<template #default='scope'>
<span>{{scope.row.uid}}</span>
</template>
</el-table-column>
<el-table-column prop="username" label="昵称">
<template #default='scope'>
<div>
<li>{{scope.row.username}}</li>
<a :href="com_shequ_url+'/u/'+scope.row.uid" target="_blank" class="col008 f12">查看主页</a>
</div>
</template>
</el-table-column>
<el-table-column prop="xs_name" label="姓名">
</el-table-column>
<el-table-column prop="gongsi" label="公司">
<template #default='scope'>
<el-popover effect="light" trigger="hover" placement="top" v-if="scope.row.gongsi">
<template #default>
<p>{{scope.row.gongsi}}</p>
</template>
<template #reference>
<div class="name-wrapper">
<span class="hide-txt2">{{scope.row.gongsi}}</span>
</div>
</template>
</el-popover>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column prop="shouji" label="手机号" width="130px">
</el-table-column>
<el-table-column prop="pfenshu" label="学生动态" width="200px">
<template #default='scope'>
<div style="line-height: 28px;">
<a @click="getUserLog(scope.row.uid)" href="javascript:;" class="col008 item_log">观看记录<span
class="colff3">{{scope.row.logNum}}</span></a>
<span class="item_log">已看课时<span class="colff3">{{scope.row.videoNum}}</span></span>
<span class="item_log">已提交作业<span class="colff3">{{scope.row.workNum}}</span></span>
<span class="item_log">作业平均分<span class="colff3">{{scope.row.pfenshu}}</span></span>
</div>
</template>
</el-table-column>
<el-table-column prop="beizhu" label="备注">
<template #default='scope'>
<el-popover effect="light" trigger="hover" placement="top" width="300px" v-if="scope.row.beizhu">
<template #default>
<p style=" padding:6px; line-height: 24px;">{{scope.row.beizhu}}</p>
</template>
<template #reference>
<div class="name-wrapper">
<span class="hide-txt2">{{scope.row.beizhu}}</span>
</div>
</template>
</el-popover>
<span v-else>--</span>
</template> </template>
</el-table-column> </el-input>
<el-button size="medium" type="primary" icon="el-icon-search" @click="handleOption">搜索</el-button>
<el-table-column label="操作" fixed="right" > </li>
<template #default="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" circle @click="openStudent(scope.row)"></el-button>
<el-popconfirm title="确定删除该学生吗?" @confirm="handleClose(scope.row.id)">
<template #reference>
<el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--总数超过一页再展示分页器-->
<div class="myel-pg-lf">
<el-pagination background @size-change="handleSizeChange" layout="total, prev, pager, next,jumper" :total="total"
:page-size="perpage" :current-page="page" @current-change="changePage" />
</div>
</div> </div>
<el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe @selection-change="handleSelectionChange" @cell-dblclick="openStudent">
<!-- 报名弹出层 --> <el-table-column type="selection" width="50"> </el-table-column>
<el-dialog title="添加学生" v-model="dialogFormVisible" width="650px" center custom-class="sign-form"> <el-table-column prop="id" label="编号" width="80"> </el-table-column>
<el-form :model="numbereRef" :rules="rules" label-position="right" ref="numberValidateRef">
<el-form-item label="学生uid" prop="uids"> <el-table-column prop="uid" label="uid">
<el-input type="textarea" v-model="numbereRef.uids" class="key-input" placeholder="输入学生的社区用户uid"></el-input> <template #default="scope">
</el-form-item> <span>{{ scope.row.uid }}</span>
<div class="col7e8" style="line-height: 24px"> </template>
<p>支持批量添加101,102,103多个uid用英文逗号隔开</p> </el-table-column>
</div>
</el-form> <el-table-column prop="username" label="昵称">
<template #default="scope">
<template #footer> <div>
<span class="dialog-footer"> <li>{{ scope.row.username }}</li>
<el-button @click="dialogFormVisible = false"> </el-button> <a :href="com_shequ_url + '/u/' + scope.row.uid" target="_blank" class="col008 f12">查看主页</a>
<el-button type="primary" @click="submitForm"> </el-button> </div>
</span> </template>
</template> </el-table-column>
</el-dialog>
<el-table-column prop="xs_name" label="姓名"> </el-table-column>
<!-- 编辑弹出层 --> <el-table-column prop="gongsi" label="公司">
<el-dialog :title="'编辑学生:'+modEdit.username" v-model="dialogEdit" width="650px" center custom-class="sign-form"> <template #default="scope">
<el-form :model="modEdit" label-position="right" label-width="100px"> <el-popover effect="light" trigger="hover" placement="top" v-if="scope.row.gongsi">
<template #default>
<el-form-item label="姓名" prop="xs_name"> <p>{{ scope.row.gongsi }}</p>
<el-input class="key-input" v-model="modEdit.xs_name"></el-input> </template>
</el-form-item> <template #reference>
<el-form-item label="公司" prop="gongsi"> <div class="name-wrapper">
<el-input class="key-input" v-model="modEdit.gongsi"></el-input> <span class="hide-txt2">{{ scope.row.gongsi }}</span>
</el-form-item> </div>
</template>
</el-popover>
<!-- <el-select v-model="modEdit.gangwei" multiple placeholder="岗位" class="fl"> <span v-else>--</span>
</template>
</el-table-column>
<el-table-column prop="shouji" label="手机号" width="130px"> </el-table-column>
<el-table-column prop="pfenshu" label="学生动态" width="200px">
<template #default="scope">
<div style="line-height: 28px;">
<a @click="getUserLog(scope.row.uid)" href="javascript:;" class="col008 item_log"
>观看记录<span class="colff3">{{ scope.row.logNum }}</span
></a
>
<span class="item_log"
>已看课时<span class="colff3">{{ scope.row.videoNum }}</span
></span
>
<span class="item_log"
>已提交作业<span class="colff3">{{ scope.row.workNum }}</span
></span
>
<span class="item_log"
>作业平均分<span class="colff3">{{ scope.row.pfenshu }}</span></span
>
</div>
</template>
</el-table-column>
<el-table-column prop="beizhu" label="备注">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="300px" v-if="scope.row.beizhu">
<template #default>
<p style=" padding:6px; line-height: 24px;">{{ scope.row.beizhu }}</p>
</template>
<template #reference>
<div class="name-wrapper">
<span class="hide-txt2">{{ scope.row.beizhu }}</span>
</div>
</template>
</el-popover>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template #default="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" circle @click="openStudent(scope.row)"></el-button>
<el-popconfirm title="确定删除该学生吗?" @confirm="handleClose(scope.row.id)">
<template #reference>
<el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--总数超过一页再展示分页器-->
<div class="myel-pg-lf">
<el-pagination background @size-change="handleSizeChange" layout="total, prev, pager, next,jumper" :total="total" :page-size="perpage" :current-page="page" @current-change="changePage" />
</div>
</div>
<!-- 报名弹出层 -->
<el-dialog title="添加学生" v-model="dialogFormVisible" width="650px" center custom-class="sign-form">
<el-form :model="numbereRef" :rules="rules" label-position="right" ref="numberValidateRef">
<el-form-item label="手机号" prop="uids">
<el-input type="textarea" v-model="numbereRef.uids" class="key-input" placeholder="输入学生的手机号"></el-input>
</el-form-item>
<div class="col7e8" style="line-height: 24px">
<p>支持批量添加15900012345,158xxx,...多个手机号用英文逗号隔开</p>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
</span>
</template>
</el-dialog>
<!-- 编辑弹出层 -->
<el-dialog :title="'编辑学生:' + modEdit.username" v-model="dialogEdit" width="650px" center custom-class="sign-form">
<el-form :model="modEdit" label-position="right" label-width="100px">
<el-form-item label="姓名" prop="xs_name">
<el-input class="key-input" v-model="modEdit.xs_name"></el-input>
</el-form-item>
<el-form-item label="公司" prop="gongsi">
<el-input class="key-input" v-model="modEdit.gongsi"></el-input>
</el-form-item>
<!-- <el-select v-model="modEdit.gangwei" multiple placeholder="岗位" class="fl">
<el-option :key="2" label="业务人员" :value="2"></el-option> <el-option :key="2" label="业务人员" :value="2"></el-option>
<el-option :key="3" label="技术人员" :value="3"></el-option> <el-option :key="3" label="技术人员" :value="3"></el-option>
<el-option :key="4" label="CIO或CTO等高层人员" :value="4"></el-option> <el-option :key="4" label="CIO或CTO等高层人员" :value="4"></el-option>
@ -155,353 +149,344 @@
<el-option :key="1" label="其他" :value="1"></el-option> <el-option :key="1" label="其他" :value="1"></el-option>
</el-select> --> </el-select> -->
<el-form-item label="手机" prop="shouji">
<el-form-item label="手机" prop="shouji"> <el-input class="key-input" v-model="modEdit.shouji"></el-input>
<el-input class="key-input" v-model="modEdit.shouji"></el-input> </el-form-item>
</el-form-item>
<el-form-item label="备注" prop="beizhu">
<el-form-item label="备注" prop="beizhu"> <el-input type="textarea" class="key-input" v-model="modEdit.beizhu"> </el-input>
<el-input type="textarea" class="key-input" v-model="modEdit.beizhu"> </el-form-item>
</el-input> <el-input type="hidden" class="key-input" v-model="modEdit.id" :value="modEdit.id"></el-input>
</el-form-item> </el-form>
<el-input type="hidden" class="key-input" v-model="modEdit.id" :value="modEdit.id"></el-input>
<template #footer>
</el-form> <span class="dialog-footer">
<el-button @click="dialogEdit = false"> </el-button>
<template #footer> <el-button type="primary" @click="eidtForm"> </el-button>
<span class="dialog-footer"> </span>
<el-button @click="dialogEdit = false"> </el-button> </template>
<el-button type="primary" @click="eidtForm"> </el-button> </el-dialog>
</span>
</template> <el-dialog :title="username + '的观看记录'" v-model="dialogUidLog" width="1100px">
</el-dialog> <el-table :data="uidLog" v-loading="loading">
<el-table-column property="title" label="课时名称"></el-table-column>
<el-dialog :title="username+'的观看记录'" v-model="dialogUidLog" width="1100px"> <el-table-column property="videotime1" label="课时时长">
<el-table :data="uidLog" v-loading="loading"> <template #default="scope">
<el-table-column property="title" label="课时名称"></el-table-column> <span v-if="scope.row.videotime1">{{ scope.row.videotime1 }}:</span>
<el-table-column property="videotime1" label="课时时长"> <span v-else>{{ scope.row.videotime2 }}:{{ scope.row.videotime3 }}</span>
<template #default='scope'> </template>
<span v-if="scope.row.videotime1">{{scope.row.videotime1}}:</span> </el-table-column>
<span v-else>{{scope.row.videotime2}}:{{scope.row.videotime3}}</span> <el-table-column property="sum" label="观看总时长"></el-table-column>
</template> <el-table-column property="id" label="开始观看时间">
</el-table-column> <template #default="scope">
<el-table-column property="sum" label="观看总时长"></el-table-column> <div v-for="(item, i) in scope.row.item" :key="i">
<el-table-column property="id" label="开始观看时间"> {{ item.startTime }}
<template #default='scope'> </div>
<div v-for="(item, i) in scope.row.item" :key="i"> </template>
{{item.startTime}} </el-table-column>
</div> <el-table-column property="id" label="本次观看时长">
</template> <template #default="scope">
</el-table-column> <div v-for="(item, i) in scope.row.item" :key="i">
<el-table-column property="id" label="本次观看时长"> {{ item.onetime }}
<template #default='scope'> </div>
<div v-for="(item, i) in scope.row.item" :key="i"> </template>
{{item.onetime}} </el-table-column>
</div> </el-table>
</template> </el-dialog>
</el-table-column> </template>
</el-table>
</el-dialog> <script>
import { useRoute } from "vue-router";
</template> import { studentList, addStudent, getStudent, editStudent, delStudent, studyLog } from "@/api/study_admin";
import { ref, toRefs, reactive, getCurrentInstance, nextTick } from "vue";
import store from "@/store";
import { _debounce } from "@/utils/debounce";
<script> export default {
import { useRoute } from 'vue-router' name: "class_homework",
import { studentList, addStudent, getStudent, editStudent, delStudent,studyLog } from "@/api/study_admin"; setup() {
import { ref, toRefs, reactive, getCurrentInstance, nextTick } from 'vue'; const { proxy } = getCurrentInstance();
import store from '@/store' const route = useRoute();
import { _debounce } from "@/utils/debounce"; const classid = route.params.classid;
export default { const state = reactive({
name: 'class_homework', headers: {
setup() { authentication: store.getters.get_authentication,
const { proxy } = getCurrentInstance() },
const route = useRoute() loading: true,
const classid = route.params.classid; tableData: [], //
const state = reactive({ multipleSelection: [], //
headers: { total: 0, //
'authentication': store.getters.get_authentication page: 1, //
}, perpage: 10, //
loading: true, id: "",
tableData: [], // kw: "",
multipleSelection: [], // dialogFormVisible: false,
total: 0, // dialogEdit: false,
page: 1, // dialogUidLog: false,
perpage: 10, // numbereRef: {
id: '', uids: "",
kw: '', },
dialogFormVisible: false, rules: {
dialogEdit: false, uids: [{ required: true, message: "请输入学生手机号", trigger: "blur" }],
dialogUidLog: false, },
numbereRef: { rowStudent: {},
uids: '' modEdit: {
}, id: "",
rules: { xs_name: "",
uids: [ gongsi: "",
{ required: true, message: '请输入学生uid', trigger: 'blur' }, gangwei: "",
], shouji: "",
}, fenshu: "",
rowStudent: {}, beizhu: "",
modEdit: { },
id: '', uidLog: [],
xs_name: '', alltime: "",
gongsi: '', username: "",
gangwei: '', });
shouji: '',
fenshu: '', //
beizhu: '', const getStudentList = async () => {
}, state.loading = true;
uidLog:[], const params = {
alltime:'', page: state.page,
username:'', perpage: state.perpage,
}) id: state.id,
kw: state.kw,
// };
const getStudentList = async () => { const res = await studentList(classid, params);
state.loading = true if (res.code === 200) {
const params = { state.tableData = res.data.data;
page: state.page, state.total = res.data.total;
perpage: state.perpage, state.page = res.data.current_page;
id: state.id, state.loading = false;
kw: state.kw, }
} };
const res = await studentList(classid, params); getStudentList();
if (res.code === 200) {
state.tableData = res.data.data //
state.total = res.data.total const getUserLog = async (uid) => {
state.page = res.data.current_page state.loading = true;
state.loading = false 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;
getStudentList();
};
//
const handleSelectionChange = (val) => {
state.multipleSelection = val;
};
const changePage = (val) => {
state.page = val;
getStudentList();
};
//
const handleSizeChange = (val) => {
state.perpage = val;
getStudentList();
};
//
const resdelStudent = async (params) => {
const res = await delStudent(classid, params);
if (res.code === 200) {
proxy.$message({
type: "success",
message: "删除成功",
center: true,
});
getStudentList(); getStudentList();
}
// };
const getUserLog = async (uid) => {
state.loading = true const handleClose = (id) => {
const res = await studyLog(classid, uid); let params;
if (res.code === 200) { if (id) {
state.uidLog = res.data.data; params = [id];
state.alltime = res.data.alltime; } else {
state.username = res.data.username; if (!state.multipleSelection.length) {
state.dialogUidLog=true; proxy.$message({
state.loading = false type: "error",
} message: "请选择编号",
}; center: true,
});
// item return;
const setItem = (item) => {
state.item = item
state.isShowItem = true
}
const handleOption = () => {
state.page = 1
getStudentList()
}
//
const handleSelectionChange = (val) => {
state.multipleSelection = val
}
const changePage = (val) => {
state.page = val
getStudentList()
}
//
const handleSizeChange = (val) => {
state.perpage = val
getStudentList()
} }
params = state.multipleSelection.map((i) => i.id);
}
// proxy
const resdelStudent = async (params) => { .$confirm("此操作将永久删除, 是否继续?", "提示", {
const res = await delStudent(classid, params); confirmButtonText: "确定",
if (res.code === 200) { cancelButtonText: "取消",
proxy.$message({ type: "warning",
type: 'success', })
message: '删除成功', .then(() => {
center: true resdelStudent(params);
}); })
getStudentList() .catch(() => {});
} };
};
//
const handleClose = (id) => { const submitForm = _debounce(() => {
let params _submitForm();
if (id) { }, 300);
params = [id] const numberValidateRef = ref(null);
} else { const _submitForm = () => {
if (!state.multipleSelection.length) { nextTick(() => {
numberValidateRef.value.validate(async (valid) => {
if (valid) {
const params = {
uids: state.numbereRef.uids,
};
const res = await addStudent(classid, params);
if (res.message === "success") {
state.dialogFormVisible = false;
proxy.$message({ proxy.$message({
type: 'error', type: "success",
message: '请选择编号', message: "添加成功",
center: true center: true,
}); });
return setTimeout(function() {
getStudentList();
}, 100);
} }
params = state.multipleSelection.map(i => i.id)
} }
});
proxy.$confirm('此操作将永久删除, 是否继续?', '提示', { });
confirmButtonText: '确定', };
cancelButtonText: '取消',
type: 'warning' //
}).then(() => { const resgetStudent = async (id) => {
resdelStudent(params); const res = await getStudent(classid, id);
}).catch(() => { if (res.code === 200) {
}); state.modEdit = res.data;
}
//
const submitForm = _debounce(() => {
_submitForm();
}, 300)
const numberValidateRef = ref(null);
const _submitForm = () => {
nextTick(() => {
numberValidateRef.value.validate(async (valid) => {
if (valid) {
const params = {
uids: state.numbereRef.uids,
}
const res = await addStudent(classid, params)
if (res.message === 'success') {
state.dialogFormVisible = false;
proxy.$message({
type: 'success',
message: '添加成功',
center: true
});
setTimeout(function () {
getStudentList()
}, 100);
}
}
});
})
}
//
const resgetStudent = async (id) => {
const res = await getStudent(classid, id);
if (res.code === 200) {
state.modEdit = res.data
state.dialogEdit = true
}
};
//
const reseditStudent = async () => {
const params = {
data: state.modEdit,
}
const res = await editStudent(classid, params);
if (res.code === 200) {
state.dialogEdit = false;
proxy.$message({
type: 'success',
message: '编辑成功',
center: true
});
getStudentList()
}
};
const getid = (id) => {
resgetStudent(id);
}
const eidtForm = () => {
reseditStudent();
}
const openStudent = (row) => {
state.modEdit = row;
state.dialogEdit = true; state.dialogEdit = true;
} }
};
return {
...toRefs(state), //
classid, const reseditStudent = async () => {
setItem, const params = {
handleSelectionChange, data: state.modEdit,
getStudentList, };
changePage, const res = await editStudent(classid, params);
handleOption, if (res.code === 200) {
handleClose, state.dialogEdit = false;
handleSizeChange, proxy.$message({
numberValidateRef, type: "success",
submitForm, message: "编辑成功",
getid, center: true,
eidtForm, });
getUserLog, getStudentList();
openStudent,
}
}
}
</script>
<style lang="scss" scoped>
.item_log {
width: 120px;
display: inline-block;
}
.tab-header {
padding: 24px 0 10px 0;
}
.ptlist {
padding: 6px 0;
overflow-y: auto;
font-size: 14px;
li {
padding: 2px 0;
} }
} };
.ifprt { const getid = (id) => {
padding-right: 10px !important; resgetStudent(id);
} };
const eidtForm = () => {
.infobox { reseditStudent();
line-height: 24px; };
padding: 0 20px;
} const openStudent = (row) => {
state.modEdit = row;
.scrollbar { state.dialogEdit = true;
height: 106px; };
overflow: hidden;
} return {
...toRefs(state),
.min-pd { classid,
padding: 6px 10px; setItem,
} handleSelectionChange,
getStudentList,
::v-deep .el-scrollbar__wrap { changePage,
max-height: 300px; handleOption,
overflow-x: hidden; handleClose,
} handleSizeChange,
numberValidateRef,
::v-deep .el-icon-close { submitForm,
display: none !important; getid,
} eidtForm,
getUserLog,
::v-deep .el-icon-close-tip { openStudent,
display: none !important; };
} },
};
::v-deep .el-button i { </script>
line-height: 0;
} <style lang="scss" scoped>
</style> .item_log {
width: 120px;
<style> display: inline-block;
.el-dialog__body { }
padding: 20px 30px 30px 30px;
} .tab-header {
</style> 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;
}
</style>

Loading…
Cancel
Save