myxiaowei
/
fanruan-edu-cas
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

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

pull/7/head
Wangwei 1 year ago
parent
c245dbcf9c
commit
91f742c2b6
1 changed files with 470 additions and 485 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 259
      src/views/class/admin/student_admin_class.vue

259
src/views/class/admin/student_admin_class.vue
Unescape View File

@ -1,15 +1,12 @@
<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 type="primary" size="medium" icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加学生 </el-button>
</el-button>
<el-button type="danger" size="medium" icon="el-icon-delete" @click="handleClose()" class="mrt10">批量删除</el-button> <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleClose()" class="mrt10">批量删除</el-button>
</li> </li>
<li> <li>
<el-input style="width: 200px; margin-right: 10px" placeholder="uid / 姓名" v-model="kw" @change="handleOption" <el-input style="width: 200px; margin-right: 10px" placeholder="uid / 姓名" v-model="kw" @change="handleOption" size="medium" clearable>
size="medium" clearable>
<template #prefix> <template #prefix>
<i class="el-input__icon el-icon-search"></i> <i class="el-input__icon el-icon-search"></i>
</template> </template>
@ -18,22 +15,18 @@
</li> </li>
</div> </div>
<el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe <el-table v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe @selection-change="handleSelectionChange" @cell-dblclick="openStudent">
@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 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"> <el-table-column prop="uid" label="uid">
<template #default='scope'> <template #default="scope">
<span>{{ scope.row.uid }}</span> <span>{{ scope.row.uid }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="username" label="昵称"> <el-table-column prop="username" label="昵称">
<template #default='scope'> <template #default="scope">
<div> <div>
<li>{{ scope.row.username }}</li> <li>{{ scope.row.username }}</li>
<a :href="com_shequ_url + '/u/' + scope.row.uid" target="_blank" class="col008 f12">查看主页</a> <a :href="com_shequ_url + '/u/' + scope.row.uid" target="_blank" class="col008 f12">查看主页</a>
@ -41,11 +34,10 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="xs_name" label="姓名"> <el-table-column prop="xs_name" label="姓名"> </el-table-column>
</el-table-column>
<el-table-column prop="gongsi" label="公司"> <el-table-column prop="gongsi" label="公司">
<template #default='scope'> <template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" v-if="scope.row.gongsi"> <el-popover effect="light" trigger="hover" placement="top" v-if="scope.row.gongsi">
<template #default> <template #default>
<p>{{ scope.row.gongsi }}</p> <p>{{ scope.row.gongsi }}</p>
@ -60,24 +52,32 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="shouji" label="手机号" width="130px"> <el-table-column prop="shouji" label="手机号" width="130px"> </el-table-column>
</el-table-column>
<el-table-column prop="pfenshu" label="学生动态" width="200px"> <el-table-column prop="pfenshu" label="学生动态" width="200px">
<template #default='scope'> <template #default="scope">
<div style="line-height: 28px;"> <div style="line-height: 28px;">
<a @click="getUserLog(scope.row.uid)" href="javascript:;" class="col008 item_log">观看记录（<span <a @click="getUserLog(scope.row.uid)" href="javascript:;" class="col008 item_log"
class="colff3">{{scope.row.logNum}}</span>）</a> >观看记录（<span class="colff3">{{ scope.row.logNum }}</span
<span class="item_log">已看课时（<span class="colff3">{{scope.row.videoNum}}</span>）</span> >）</a
<span class="item_log">已提交作业（<span class="colff3">{{scope.row.workNum}}</span>）</span> >
<span class="item_log">作业平均分：<span class="colff3">{{scope.row.pfenshu}}</span></span> <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> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="beizhu" label="备注"> <el-table-column prop="beizhu" label="备注">
<template #default='scope'> <template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="300px" v-if="scope.row.beizhu"> <el-popover effect="light" trigger="hover" placement="top" width="300px" v-if="scope.row.beizhu">
<template #default> <template #default>
<p style=" padding:6px; line-height: 24px;">{{ scope.row.beizhu }}</p> <p style=" padding:6px; line-height: 24px;">{{ scope.row.beizhu }}</p>
@ -103,25 +103,22 @@
</el-popconfirm> </el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--总数超过一页，再展示分页器--> <!--总数超过一页，再展示分页器-->
<div class="myel-pg-lf"> <div class="myel-pg-lf">
<el-pagination background @size-change="handleSizeChange" layout="total, prev, pager, next,jumper" :total="total" <el-pagination background @size-change="handleSizeChange" layout="total, prev, pager, next,jumper" :total="total" :page-size="perpage" :current-page="page" @current-change="changePage" />
:page-size="perpage" :current-page="page" @current-change="changePage" />
</div> </div>
</div> </div>
<!-- 报名弹出层 --> <!-- 报名弹出层 -->
<el-dialog title="添加学生" v-model="dialogFormVisible" width="650px" center custom-class="sign-form"> <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 :model="numbereRef" :rules="rules" label-position="right" ref="numberValidateRef">
<el-form-item label="学生uid" prop="uids"> <el-form-item label="手机号" prop="uids">
<el-input type="textarea" v-model="numbereRef.uids" class="key-input" placeholder="输入学生的社区用户uid"></el-input> <el-input type="textarea" v-model="numbereRef.uids" class="key-input" placeholder="输入学生的手机号"></el-input>
</el-form-item> </el-form-item>
<div class="col7e8" style="line-height: 24px"> <div class="col7e8" style="line-height: 24px">
<p>支持批量添加，例：101,102,103（多个uid用英文逗号隔开）</p> <p>支持批量添加，例：15900012345,158xxx,...（多个手机号用英文逗号隔开）</p>
</div> </div>
</el-form> </el-form>
@ -133,11 +130,9 @@
</template> </template>
</el-dialog> </el-dialog>
<!-- 编辑弹出层 --> <!-- 编辑弹出层 -->
<el-dialog :title="'编辑学生：' + modEdit.username" v-model="dialogEdit" width="650px" center custom-class="sign-form"> <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 :model="modEdit" label-position="right" label-width="100px">
<el-form-item label="姓名" prop="xs_name"> <el-form-item label="姓名" prop="xs_name">
<el-input class="key-input" v-model="modEdit.xs_name"></el-input> <el-input class="key-input" v-model="modEdit.xs_name"></el-input>
</el-form-item> </el-form-item>
@ -145,7 +140,6 @@
<el-input class="key-input" v-model="modEdit.gongsi"></el-input> <el-input class="key-input" v-model="modEdit.gongsi"></el-input>
</el-form-item> </el-form-item>
<!-- <el-select v-model="modEdit.gangwei" multiple placeholder="岗位" class="fl"> <!-- <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>
@ -155,17 +149,14 @@
<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 type="textarea" class="key-input" v-model="modEdit.beizhu"> </el-input>
</el-input>
</el-form-item> </el-form-item>
<el-input type="hidden" class="key-input" v-model="modEdit.id" :value="modEdit.id"></el-input> <el-input type="hidden" class="key-input" v-model="modEdit.id" :value="modEdit.id"></el-input>
</el-form> </el-form>
<template #footer> <template #footer>
@ -180,21 +171,21 @@
<el-table :data="uidLog" v-loading="loading"> <el-table :data="uidLog" v-loading="loading">
<el-table-column property="title" label="课时名称"></el-table-column> <el-table-column property="title" label="课时名称"></el-table-column>
<el-table-column property="videotime1" label="课时时长"> <el-table-column property="videotime1" label="课时时长">
<template #default='scope'> <template #default="scope">
<span v-if="scope.row.videotime1">{{ scope.row.videotime1 }}:</span> <span v-if="scope.row.videotime1">{{ scope.row.videotime1 }}:</span>
<span v-else>{{ scope.row.videotime2 }}:{{ scope.row.videotime3 }}</span> <span v-else>{{ scope.row.videotime2 }}:{{ scope.row.videotime3 }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="sum" label="观看总时长"></el-table-column> <el-table-column property="sum" label="观看总时长"></el-table-column>
<el-table-column property="id" label="开始观看时间"> <el-table-column property="id" label="开始观看时间">
<template #default='scope'> <template #default="scope">
<div v-for="(item, i) in scope.row.item" :key="i"> <div v-for="(item, i) in scope.row.item" :key="i">
{{ item.startTime }} {{ item.startTime }}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="id" label="本次观看时长"> <el-table-column property="id" label="本次观看时长">
<template #default='scope'> <template #default="scope">
<div v-for="(item, i) in scope.row.item" :key="i"> <div v-for="(item, i) in scope.row.item" :key="i">
{{ item.onetime }} {{ item.onetime }}
</div> </div>
@ -202,26 +193,23 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
import { studentList, addStudent, getStudent, editStudent, delStudent, studyLog } from "@/api/study_admin"; import { studentList, addStudent, getStudent, editStudent, delStudent, 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: [], // 数据列表
@ -229,137 +217,134 @@
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: {
uids: '' uids: "",
}, },
rules: { rules: {
uids: [ uids: [{ required: true, message: "请输入学生手机号", trigger: "blur" }],
{ required: true, message: '请输入学生uid', trigger: 'blur' },
],
}, },
rowStudent: {}, rowStudent: {},
modEdit: { modEdit: {
id: '', id: "",
xs_name: '', xs_name: "",
gongsi: '', gongsi: "",
gangwei: '', gangwei: "",
shouji: '', shouji: "",
fenshu: '', fenshu: "",
beizhu: '', beizhu: "",
}, },
uidLog: [], uidLog: [],
alltime:'', alltime: "",
username:'', username: "",
}) });
// 获取学生列表 // 获取学生列表
const getStudentList = async () => { const getStudentList = async () => {
state.loading = true state.loading = true;
const params = { const params = {
page: state.page, page: state.page,
perpage: state.perpage, perpage: state.perpage,
id: state.id, id: state.id,
kw: state.kw, kw: state.kw,
} };
const res = await studentList(classid, params); const res = await studentList(classid, params);
if (res.code === 200) { if (res.code === 200) {
state.tableData = res.data.data state.tableData = res.data.data;
state.total = res.data.total state.total = res.data.total;
state.page = res.data.current_page state.page = res.data.current_page;
state.loading = false state.loading = false;
} }
}; };
getStudentList(); getStudentList();
// 观看记录 // 观看记录
const getUserLog = async (uid) => { const getUserLog = async (uid) => {
state.loading = true state.loading = true;
const res = await studyLog(classid, uid); const res = await studyLog(classid, uid);
if (res.code === 200) { if (res.code === 200) {
state.uidLog = res.data.data; state.uidLog = res.data.data;
state.alltime = res.data.alltime; state.alltime = res.data.alltime;
state.username = res.data.username; state.username = res.data.username;
state.dialogUidLog = true; state.dialogUidLog = true;
state.loading = false state.loading = false;
} }
}; };
// 设置当前查看的数据item // 设置当前查看的数据item
const setItem = (item) => { const setItem = (item) => {
state.item = item state.item = item;
state.isShowItem = true state.isShowItem = true;
} };
const handleOption = () => { const handleOption = () => {
state.page = 1 state.page = 1;
getStudentList() getStudentList();
} };
// 选择项 // 选择项
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {
state.multipleSelection = val state.multipleSelection = val;
} };
const changePage = (val) => { const changePage = (val) => {
state.page = val state.page = val;
getStudentList() getStudentList();
} };
// 每页显示条数 // 每页显示条数
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
state.perpage = val state.perpage = val;
getStudentList() getStudentList();
} };
// 删除学生 // 删除学生
const resdelStudent = async (params) => { const resdelStudent = async (params) => {
const res = await delStudent(classid, params); const res = await delStudent(classid, params);
if (res.code === 200) { if (res.code === 200) {
proxy.$message({ proxy.$message({
type: 'success', type: "success",
message: '删除成功', message: "删除成功",
center: true center: true,
}); });
getStudentList() getStudentList();
} }
}; };
const handleClose = (id) => { const handleClose = (id) => {
let params let params;
if (id) { if (id) {
params = [id] params = [id];
} else { } else {
if (!state.multipleSelection.length) { if (!state.multipleSelection.length) {
proxy.$message({ proxy.$message({
type: 'error', type: "error",
message: '请选择编号', message: "请选择编号",
center: true center: true,
}); });
return return;
} }
params = state.multipleSelection.map(i => i.id) params = state.multipleSelection.map((i) => i.id);
} }
proxy.$confirm('此操作将永久删除, 是否继续?', '提示', { proxy
confirmButtonText: '确定', .$confirm("此操作将永久删除, 是否继续?", "提示", {
cancelButtonText: '取消', confirmButtonText: "确定",
type: 'warning' cancelButtonText: "取消",
}).then(() => { type: "warning",
})
.then(() => {
resdelStudent(params); resdelStudent(params);
}).catch(() => { })
}); .catch(() => {});
};
}
// 添加学生 // 添加学生
const submitForm = _debounce(() => { const submitForm = _debounce(() => {
_submitForm(); _submitForm();
}, 300) }, 300);
const numberValidateRef = ref(null); const numberValidateRef = ref(null);
const _submitForm = () => { const _submitForm = () => {
nextTick(() => { nextTick(() => {
@ -367,30 +352,30 @@
if (valid) { if (valid) {
const params = { const params = {
uids: state.numbereRef.uids, uids: state.numbereRef.uids,
} };
const res = await addStudent(classid, params) const res = await addStudent(classid, params);
if (res.message === 'success') { if (res.message === "success") {
state.dialogFormVisible = false; state.dialogFormVisible = false;
proxy.$message({ proxy.$message({
type: 'success', type: "success",
message: '添加成功', message: "添加成功",
center: true center: true,
}); });
setTimeout(function() { setTimeout(function() {
getStudentList() getStudentList();
}, 100); }, 100);
} }
} }
}); });
}) });
} };
// 获取学生列表 // 获取学生列表
const resgetStudent = async (id) => { const resgetStudent = async (id) => {
const res = await getStudent(classid, id); const res = await getStudent(classid, id);
if (res.code === 200) { if (res.code === 200) {
state.modEdit = res.data state.modEdit = res.data;
state.dialogEdit = true state.dialogEdit = true;
} }
}; };
@ -398,30 +383,30 @@
const reseditStudent = async () => { const reseditStudent = async () => {
const params = { const params = {
data: state.modEdit, data: state.modEdit,
} };
const res = await editStudent(classid, params); const res = await editStudent(classid, params);
if (res.code === 200) { if (res.code === 200) {
state.dialogEdit = false; state.dialogEdit = false;
proxy.$message({ proxy.$message({
type: 'success', type: "success",
message: '编辑成功', message: "编辑成功",
center: true center: true,
}); });
getStudentList() getStudentList();
} }
}; };
const getid = (id) => { const getid = (id) => {
resgetStudent(id); resgetStudent(id);
} };
const eidtForm = () => { const eidtForm = () => {
reseditStudent(); reseditStudent();
} };
const openStudent = (row) => { const openStudent = (row) => {
state.modEdit = row; state.modEdit = row;
state.dialogEdit = true; state.dialogEdit = true;
} };
return { return {
...toRefs(state), ...toRefs(state),
@ -439,9 +424,9 @@
eidtForm, eidtForm,
getUserLog, getUserLog,
openStudent, openStudent,
} };
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save