hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-20 00:06:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

教师端1期需求ui优化

Browse Source
This commit is contained in:
赵依梦
2025-12-11 12:01:08 +08:00
parent 2bd430aee2
commit bc8c0004f8
10 changed files with 140 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/course/TeacherList.vue
View File

@@ -6,38 +6,56 @@
3.建设课程邀请人流程，提交审核流程都需要讨论！！！！！ <br/>
4.有哪种几状态和哪几种操作，需要讨论定一下 。在哪种状态下可以有哪些操作<br/>
</Remark> -->
<div style="display: flex;justify-content:space-between;position: relative;">
<div style="display: flex;justify-content: flex-start; padding: 12px 32px 10px 12px;">
<div style="margin-left:10px"><el-input :maxlength="50" v-model="params.name" placeholder="课程名称" clearable></el-input></div>
<div style="padding-left: 10px;">
<el-select style="width: 120px;" v-model="params.publish" clearable placeholder="发布状态">
<!-- <el-option label="全部" :value="null"></el-option> -->
<el-option label="未发布" :value="false"></el-option>
<el-row style="margin: 0 20px 20px 15px;" :gutter="8">
<el-col :span="8">
<div class="grid-content bg-purple"><el-input :maxlength="50" v-model="params.name" clearable placeholder="课程名称" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content bg-purple">
<el-select v-model="params.publish" placeholder="发布状态" clearable>
<el-option label="未发布" :value="false"></el-option>
<el-option label="已发布" :value="true"></el-option>
</el-select>
</div>
<div style="padding-left: 10px;">
<el-select style="width: 120px;" v-model="params.enabled" clearable placeholder="启停用状态">
<!-- <el-option label="全部" :value="null"></el-option> -->
<el-option label="停用" :value="false"></el-option>
<el-option label="启用" :value="true"></el-option>
</el-select>
</div>
<div style="padding-left: 10px;">
<el-select style="width: 120px;" v-model="params.status" clearable placeholder="审核状态">
<!-- <el-option label="全部" :value="null"></el-option> -->
<!-- <el-option label="无审核状态" :value="1"></el-option> -->
</el-select>
</div>
</el-col>
<el-col :span="3">
<div class="grid-content bg-purple">
<el-select v-model="params.enabled" placeholder="启停用状态" clearable>
<el-option label="未发布" :value="false"></el-option>
<el-option label="已发布" :value="true"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="3">
<div class="grid-content bg-purple">
<el-select v-model="params.status" placeholder="审核状态" clearable>
<el-option label="审核中" :value="2"></el-option>
<el-option label="审核驳回" :value="3"></el-option>
<el-option label="审核通过" :value="5"></el-option>
</el-select>
</div>
<div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="findList">查询</el-button></div>
<div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" @click="reset">重置</el-button></div>
</el-select>
</div>
</el-col>
<el-col :span="2">
<div class="grid-content bg-purple">
<el-button type="primary" @click="findList">查 询</el-button>
</div>
</el-col>
<el-col :span="2">
<div class="grid-content bg-purple">
<el-button @click="reset">重 置</el-button>
</div>
</el-col>
<el-col :span="2" >
<div class="grid-content bg-purple" style="text-align: right;">
<el-button type="primary" icon="el-icon-plus" @click="addNewCourse">新建课程</el-button>
</div>
</el-col>
</el-row>
<div class="Create-coures"><el-button type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button></div>
</div>
</div>
<!--课程列表内容-->
<div v-infinite-scroll="load" style="overflow:auto;height:1000px" infinite-scroll-distance="50" :infinite-scroll-immediate="false" :infinite-scroll-disabled="disabled">
<div class="uc-course" v-for="(item, idx) in couresList" :key="idx" @click="jumpRouter(item)">
@@ -60,12 +78,16 @@
<div class="status-item">审核状态：<el-link :type="getStatusLabel(item.status).type" @click.stop="" :underline="false">{{getStatusLabel(item.status).label}}</el-link></div>
</div>
<div class="btn-container">
<el-link class="btn-item" v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false" type="primary" @click.stop="it.handler(item)"><svg-icon style="margin-right: 5px;font-size:19px;padding-top: 4px;" :icon-class="it.icon"></svg-icon>{{it.label}}</el-link>
<el-link class="btn-item" @mouseenter.native="$set(hoverStates, it.uniqueKey, true )" @mouseleave.native="$set(hoverStates, it.uniqueKey, false )" :style="{color: it.labelColor ? it.labelColor : (hoverStates[it.uniqueKey] ? '#4284F7' : '#000000')}" v-for="(it, idx) in availableActions(item)" :key="idx" :underline="false" type="primary" @click.stop="it.handler(item)"><svg-icon style="margin-right: 5px;font-size:19px;padding-top: 4px;color:#000000" :icon-class="hoverStates[it.uniqueKey] ? it.hoverIcon : it.icon"></svg-icon>{{it.label}}</el-link>
</div>
</div>
</div>
<p v-if="loading" class="page-tip">加载中...</p>
<p v-if="noMore" class="page-tip">没有更多了</p>
<div v-if="couresList.length == 0 && !loading">
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
<div v-else class="zan-wu">暂无数据</div>
</div>
<p v-else-if="noMore" class="page-tip">没有更多了</p>
</div>
<!-- <div v-if="couresList.length > 0" style="text-align: center; margin-top:57px;">
<el-pagination
@@ -80,10 +102,7 @@
></el-pagination>
</div>
<div v-else>
<div v-if="couresList.length == 0">
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
<div v-else class="zan-wu">暂无数据</div>
</div>
</div> -->
<div></div>
@@ -179,14 +198,14 @@ const STATUS_PERMISSIONS = {
// 操作配置映射表
const ACTION_CONFIG = {
edit: { label: '编辑', handler: 'editCourse', icon: 'edit' },
manage: { label: '管理', handler: 'handleManage', icon: 'manage' },
edit: { label: '编辑', handler: 'editCourse', icon: 'edit', hoverIcon: 'editHover' },
manage: { label: '管理', handler: 'handleManage', icon: 'manage', hoverIcon: 'manageHover'},
// withdraw: { label: '撤回', handler: 'handleWithdraw' },
auditRecord: { label: '审核记录', handler: 'toExamine', icon: 'edit' },
qrcode: { label: '二维码', handler: 'handleQrcode', icon: 'ercode' },
auditRecord: { label: '审核记录', handler: 'toExamine', icon: 'check', hoverIcon: 'checkHover' },
qrcode: { label: '二维码', handler: 'handleQrcode', icon: 'ercode', hoverIcon: 'ercodeHover' },
// offShelfApply: { label: '下架申请', handler: 'handleOffShelfApply' },
// viewCurrent: { label: '查看当前版本', handler: 'handleViewCurrent', icon: 'detail' },
delete: { label: '删除', handler: 'delItem', icon: 'del' },
delete: { label: '删除', labelColor: '#FF1718', handler: 'delItem', icon: 'del', hoverIcon: 'del' },
}
export default {
@@ -221,6 +240,7 @@ export default {
2: '审核不通过',
9: '审核通过'
},
hoverStates: {}
};
},
mounted() {
@@ -237,6 +257,9 @@ export default {
// }
},
methods: {
handleM(){
console.log('handleM')
},
load() {
this.loading = true
this.params.pageIndex++
@@ -261,7 +284,6 @@ export default {
},
// 获取可用的操作配置
availableActions(item) {
debugger
const { status, published, enabled } = item
let actionKeys = []
@@ -274,11 +296,14 @@ export default {
actionKeys = STATUS_PERMISSIONS.published[stateKey][status] || []
}
return actionKeys.map(key => ({
return actionKeys.map((key,index) => ({
name: key,
label: ACTION_CONFIG[key].label,
handler: this[ACTION_CONFIG[key].handler],
icon: ACTION_CONFIG[key].icon
icon: ACTION_CONFIG[key].icon,
hoverIcon: ACTION_CONFIG[key].hoverIcon,
labelColor: ACTION_CONFIG[key].labelColor,
uniqueKey: `${item.id}-${key}-${index}`
})).filter(Boolean)
},
handleManage(item) {
@@ -556,6 +581,7 @@ export default {
this.getNewList();
},
getList() {
this.noMore = false;
this.params.teacherId = this.userInfo.aid;
apiCourse.courseList(this.params).then(res => {
this.loading = false;
@@ -563,6 +589,7 @@ export default {
this.couresList = [...this.couresList, ...res.result.list];
this.count = res.result.count;
console.log(this.couresList.length, 'this.count', this.count);
if (this.couresList.length >= this.count){
this.noMore = true;
}