| | |
| | | <template> |
| | | <div>课时批次</div> |
| | | <div class="app-container"> |
| | | <div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="openDialog('add',{})" |
| | | >新增批次</el-button> |
| | | <span v-if="!data.isAdmin" style="font-size: 19px;font-weight: 600;margin-right: 20px"> |
| | | {{data.companyName}},您的企业当前系统可用课时总计 |
| | | <span style="font-size: 19px;font-weight: 600;color: #1ab394">{{data.remainPeriod}}</span> 分钟。<span @click="openDetail" style="cursor: pointer; font-size: 19px;font-weight: 600;color: #1890ff">[明细]</span> |
| | | </span> |
| | | </div> |
| | | <!-- 表格数据 --> |
| | | <el-table v-loading="loading" :data="dataList" :border="true"> |
| | | <el-table-column label="批次编号" prop="code" align="center" width="135" /> |
| | | <el-table-column label="创建时间" prop="createTime" align="center" width="120" /> |
| | | <el-table-column label="批次名称" prop="name" align="center" /> |
| | | <el-table-column label="创建企业" prop="companyName" align="center" /> |
| | | <el-table-column label="批次级别" prop="level" align="center" > |
| | | <template #default="scope"> |
| | | <span>{{scope.row.level === 1 ? '公司级' : scope.row.level === 2 ? '部门级' : scope.row.level === 3 ? '车间级' : '其他' }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="课程" prop="courseName" align="center" /> |
| | | <el-table-column label="学习人数" prop="studentCount" align="center" /> |
| | | <el-table-column label="总课时" prop="coursePeriodNum" align="center" /> |
| | | <el-table-column label="已完成人数" prop="" align="center" /> |
| | | <el-table-column label="完成率" prop="" align="center" /> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="toStuChoose(scope.row)">学生数据</el-button> |
| | | <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button> |
| | | <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-model:page="queryParams.pageNum" |
| | | v-model:limit="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | <batch-dialog ref="dialogRef" @getList=getList></batch-dialog> |
| | | <class-hour-change ref="classHourRef" @getList=getList></class-hour-change> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import batchDialog from './components/batchDialog.vue' |
| | | import classHourChange from './components/classHourChange.vue' |
| | | import Cookies from "js-cookie"; |
| | | import {useRouter} from 'vue-router' |
| | | const router = useRouter() |
| | | import {delQuestionBank, getQuestionBank} from "@/api/onlineEducation/questionBank"; |
| | | import {delBatch, getBatch} from "@/api/onlineEducation/batch"; |
| | | |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const loading = ref(false); |
| | | const dialogRef = ref(); |
| | | const classHourRef = ref(); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | }, |
| | | total: 0, |
| | | dataList: [], |
| | | isAdmin: false, |
| | | companyName: '', |
| | | remainPeriod: null |
| | | |
| | | }); |
| | | |
| | | const { queryParams, total, dataList } = toRefs(data); |
| | | |
| | | onMounted(async ()=>{ |
| | | const userInfo = JSON.parse(Cookies.get('userInfo')) |
| | | console.log("userInfo",userInfo) |
| | | if(userInfo.userType === 0){ |
| | | data.isAdmin = true; |
| | | }else { |
| | | data.remainPeriod = userInfo.remainPeriod ? (userInfo.remainPeriod /60).toFixed(2).replace(/\.00$/, ''):'' |
| | | data.isAdmin = false; |
| | | data.companyName = userInfo.companyName |
| | | } |
| | | await getList() |
| | | }) |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | const getList = async () => { |
| | | loading.value = true |
| | | const res = await getBatch(data.queryParams) |
| | | if(res.code == 200){ |
| | | data.dataList = res.data.list.map(item => { |
| | | return { |
| | | ...item, |
| | | coursePeriodNum: item.coursePeriod ? (item.coursePeriod /60).toFixed(2).replace(/\.00$/, '') + '分钟':'' |
| | | } |
| | | }) |
| | | data.total = res.data.total |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | loading.value = false |
| | | } |
| | | |
| | | const openDialog = (type, value) => { |
| | | dialogRef.value.openDialog(type, value); |
| | | } |
| | | |
| | | /** 重置新增的表单以及其他数据 */ |
| | | function reset() { |
| | | proxy.resetForm("roleRef"); |
| | | } |
| | | const handleDelete = (val) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | const res = await delBatch(val.id) |
| | | if(res.code == 200){ |
| | | ElMessage.success('数据删除成功') |
| | | await getList() |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | } |
| | | const toStuChoose = (val) => { |
| | | const v = JSON.stringify(val) |
| | | router.push({ path: "/chooseStu", query: { val: v } }); |
| | | } |
| | | |
| | | const openDetail = () => { |
| | | classHourRef.value.openDialog() |
| | | } |
| | | </script> |
| | | |
| | | |
| | | |
| | | <style scoped lang="scss"> |
| | | |
| | | </style> |