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

style: 调整ManageListRemote.vue中的选择器样式，优化课程管理界面的操作按钮布局，增强用户体验；更新index.scss以修正列表项内文本对齐方式。

Browse Source
This commit is contained in:
huweihang
2025-12-12 17:20:29 +08:00
parent 2d06dde984
commit ef926e6418
2 changed files with 198 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/index.scss
View File

@@ -443,7 +443,7 @@ li{
padding: 0 20px; padding: 0 20px;
p{ p{
display: flex; display: flex;
align-items: center; align-items: baseline;
justify-content: center; justify-content: center;
.el-icon-warning-outline{ .el-icon-warning-outline{
margin-right: 6px; margin-right: 6px;

301
src/views/course/ManageListRemote.vue
View File

@@ -12,9 +12,23 @@
</div> </div>
<div class="filter-field filter-field--teacher teacher-filter"> <div class="filter-field filter-field--teacher teacher-filter">
<div class="teacher-select-wrapper"> <div class="teacher-select-wrapper">
<el-select class="creator-select" ref="teacherSelect" v-model="teacherSelected" multiple filterable remote <el-select
clearable reserve-keyword placeholder="授课教师" :multiple-limit="5" :remote-method="remoteSearchTeacher" class="creator-select"
:loading="teacherLoading" @change="handleTeacherChange" @clear="handleTeacherClear"> ref="teacherSelect"
v-model="teacherSelected"
multiple
filterable
remote
clearable
reserve-keyword
placeholder="授课教师"
:multiple-limit="5"
:remote-method="remoteSearchTeacher"
:loading="teacherLoading"
@input.native="limitTeacherInput"
@change="handleTeacherChange"
@clear="handleTeacherClear"
>
<el-option v-for="item in teacherOptions" :key="item.teacherId" :label="item.teacherName" <el-option v-for="item in teacherOptions" :key="item.teacherId" :label="item.teacherName"
:value="item.teacherId"> :value="item.teacherId">
<span>{{ item.teacherName }}</span> <span>{{ item.teacherName }}</span>
@@ -93,9 +107,23 @@
</div> </div>
<div class="filter-field filter-field--creator creator-filter"> <div class="filter-field filter-field--creator creator-filter">
<div class="teacher-select-wrapper"> <div class="teacher-select-wrapper">
<el-select class="creator-select" ref="creatorSelect" v-model="creatorSelected" multiple filterable remote <el-select
clearable reserve-keyword placeholder="创建人" :multiple-limit="5" :remote-method="remoteSearchCreator" class="creator-select"
:loading="creatorLoading" @change="handleCreatorChange" @clear="handleCreatorClear"> ref="creatorSelect"
v-model="creatorSelected"
multiple
filterable
remote
clearable
reserve-keyword
placeholder="创建人"
:multiple-limit="5"
:remote-method="remoteSearchCreator"
:loading="creatorLoading"
@input.native="limitCreatorInput"
@change="handleCreatorChange"
@clear="handleCreatorClear"
>
<el-option v-for="item in creatorOptions" :key="item.userId" :label="item.name" :value="item.userId"> <el-option v-for="item in creatorOptions" :key="item.userId" :label="item.name" :value="item.userId">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span v-if="item.code" class="option-code">（{{ item.code }}）</span> <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
@@ -143,12 +171,12 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="课程名称" prop="name" header-align="center" align="left" min-width="360" <el-table-column label="课程名称" prop="name" header-align="center" align="left" min-width="360"
show-overflow-tooltip fixed="left" sortable> show-overflow-tooltip fixed="left" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="course-name" @click="viewTopic(scope.row)">{{ scope.row.name }}</span> <span class="course-name" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="课程分类" prop="sysType" min-width="180" align="center" sortable show-overflow-tooltip> <el-table-column label="课程分类" prop="sysType" min-width="180" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span> <span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span>
</template> </template>
@@ -158,22 +186,22 @@
<span class="common-cell">{{ scope.row.teacherName }}</span> <span class="common-cell">{{ scope.row.teacherName }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="课程时长" prop="courseDuration" min-width="110" align="center" sortable> <el-table-column label="课程时长" prop="courseDuration" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ formatCourseDuration(scope.row) }}</span> <span class="common-cell">{{ formatCourseDuration(scope.row) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="学习人数" prop="studys" min-width="110" align="center" sortable> <el-table-column label="学习人数" prop="studys" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.studys || '-' }}</span> <span class="common-cell">{{ scope.row.studys || '-' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="课程评分" prop="score" min-width="110" align="center" sortable> <el-table-column label="课程评分" prop="score" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ formatScore(scope.row) }}</span> <span class="common-cell">{{ formatScore(scope.row) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="审核状态" prop="status" min-width="110" align="center" sortable> <el-table-column label="审核状态" prop="status" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell" v-if="scope.row.status == 1">-</span> <span class="common-cell" v-if="scope.row.status == 1">-</span>
<span class="common-cell" v-if="scope.row.status == 2">审核中</span> <span class="common-cell" v-if="scope.row.status == 2">审核中</span>
@@ -181,29 +209,29 @@
<span :class="['common-cell', 'status--reject']" v-if="scope.row.status == 3">审核驳回</span> <span :class="['common-cell', 'status--reject']" v-if="scope.row.status == 3">审核驳回</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发布状态" prop="published" min-width="110" align="center" sortable> <el-table-column label="发布状态" prop="published" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.published == true ? '已发布' : '未发布' }}</span> <span class="common-cell">{{ scope.row.published == true ? '已发布' : '未发布' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="启停用状态" prop="enabled" min-width="130" align="center" sortable> <el-table-column label="启停用状态" prop="enabled" min-width="130" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.enabled == true ? '启用' : '停用' }}</span> <span class="common-cell">{{ scope.row.enabled == true ? '启用' : '停用' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="公开课" prop="openCourse" min-width="110" align="center" sortable> <el-table-column label="公开课" prop="openCourse" min-width="110" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.openCourse == 1 ? '是' : '否' }}</span> <span class="common-cell">{{ scope.row.openCourse == 1 ? '是' : '否' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="资源归属" prop="orgName" min-width="220" align="center" sortable> <el-table-column label="资源归属" prop="orgName" min-width="220" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip :content="scope.row.orgFullName || scope.row.orgName" placement="top" effect="dark"> <el-tooltip :content="scope.row.orgFullName || scope.row.orgName" placement="top" effect="dark">
<span class="common-cell">{{ scope.row.orgName }}</span> <span class="common-cell">{{ scope.row.orgName }}</span>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建人" prop="sysCreateBy" min-width="130" align="center" sortable> <el-table-column label="创建人" prop="sysCreateBy" min-width="130" align="center" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.sysCreateBy }}</span> <span class="common-cell">{{ scope.row.sysCreateBy }}</span>
</template> </template>
@@ -216,57 +244,48 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" min-width="200" show-overflow-tooltip align="center" <el-table-column label="创建时间" prop="sysCreateTime" min-width="200" show-overflow-tooltip align="center"
sortable> sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="common-cell">{{ scope.row.sysCreateTime }}</span> <span class="common-cell">{{ scope.row.sysCreateTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" min-width="280px" fixed="right" header-align="center" align="left"> <el-table-column label="操作" min-width="280px" fixed="right" header-align="center" align="left">
<template slot-scope="scope" class="btn-gl"> <template slot-scope="scope" class="btn-gl">
<!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮--> <template v-if="getInlineActions(scope.row).length">
<!-- v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" --> <span v-for="(action, index) in getInlineActions(scope.row)" :key="action.key">
<template v-if="scope.row.isPermission && scope.row.status != 2"> <el-button
<el-button type="text" size="mini" type="text"
class="action-link--primary" @click="editCurriculum(scope.row)">编辑</el-button> size="mini"
<el-divider direction="vertical"></el-divider> :class="action.className"
@click="handleAction(action.key, scope.row)"
>
{{ action.label }}
</el-button>
<el-divider
v-if="index < getInlineActions(scope.row).length - 1 || (index === getInlineActions(scope.row).length - 1 && getDropdownActions(scope.row).length)"
direction="vertical"
></el-divider>
</span>
</template> </template>
<template v-if="showSetTopFeature && scope.row.published"> <el-dropdown
<el-button type="text" size="mini" v-if="getDropdownActions(scope.row).length"
class="action-link--primary" @click="showQrimage(scope.row)">二维码</el-button> type="text"
<el-divider direction="vertical"></el-divider> size="mini"
</template> style="margin-left:0px"
<template v-if="scope.row.isPermission && !forChoose && scope.row.published"> trigger="click"
<el-button @click="showManageStudy(scope.row)" type="text" size="mini" >
class="action-link--primary">管理</el-button> <el-button type="text" size="mini" class="action-link--more">
<el-divider direction="vertical"></el-divider> 更多<i class="el-icon-arrow-down el-icon--right"></i>
</template> </el-button>
<template v-if="scope.row.isPermission && !forChoose && scope.row.status == 2">
<el-button type="text" size="mini" class="action-link--primary"
@click="withdraw(scope.row)">撤回</el-button>
<el-divider direction="vertical"></el-divider>
</template>
<template v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission && !scope.row.enabled">
<el-button
type="text" class="action-link--danger" size="mini" @click="delItem(scope.row)">删除</el-button>
<el-divider direction="vertical"></el-divider>
</template>
<el-dropdown v-if="scope.row.isPermission && scope.row.published" type="text" size="mini"
style="margin-left:0px">
<el-button type="text" size="mini" class="action-link--more">更多<i
class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="copyCourse(scope.row)" <el-dropdown-item
class="action-link--primary">复制</el-dropdown-item> v-for="action in getDropdownActions(scope.row)"
<el-dropdown-item v-if="scope.row.published" @click.native="isDisable(scope.row)" :key="action.key"
class="action-link--bold">{{ :class="action.className"
scope.row.enabled ? @click.native="handleAction(action.key, scope.row)"
'停用' : '启用' }}</el-dropdown-item> >
{{ action.label }}
<el-dropdown-item v-if="showSetTopFeature && scope.row.published" @click.native="setTop(scope.row)">{{ </el-dropdown-item>
scope.row.isTop ? '取消置顶' : '置顶' }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</template> </template>
@@ -649,6 +668,11 @@ export default {
const limited = (keyword || '').slice(0, 50); const limited = (keyword || '').slice(0, 50);
if (this.$refs.teacherSelect && this.$refs.teacherSelect.query !== limited) { if (this.$refs.teacherSelect && this.$refs.teacherSelect.query !== limited) {
this.$refs.teacherSelect.query = limited; this.$refs.teacherSelect.query = limited;
this.$nextTick(() => {
if (this.$refs.teacherSelect && this.$refs.teacherSelect.$refs && this.$refs.teacherSelect.$refs.input) {
this.$refs.teacherSelect.$refs.input.value = limited;
}
});
} }
const query = limited.trim(); const query = limited.trim();
if (!query || query.length <= 1) { if (!query || query.length <= 1) {
@@ -697,6 +721,11 @@ export default {
const limited = (keyword || '').slice(0, 50); const limited = (keyword || '').slice(0, 50);
if (this.$refs.creatorSelect && this.$refs.creatorSelect.query !== limited) { if (this.$refs.creatorSelect && this.$refs.creatorSelect.query !== limited) {
this.$refs.creatorSelect.query = limited; this.$refs.creatorSelect.query = limited;
this.$nextTick(() => {
if (this.$refs.creatorSelect && this.$refs.creatorSelect.$refs && this.$refs.creatorSelect.$refs.input) {
this.$refs.creatorSelect.$refs.input.value = limited;
}
});
} }
const query = limited.trim(); const query = limited.trim();
if (!query || query.length <= 1) { if (!query || query.length <= 1) {
@@ -740,6 +769,24 @@ export default {
this.creatorSelected = []; this.creatorSelected = [];
this.params.createUserId = ''; this.params.createUserId = '';
}, },
limitTeacherInput(event) {
const limited = (event && event.target && event.target.value ? event.target.value : '').slice(0, 50);
if (event && event.target && event.target.value !== limited) {
event.target.value = limited;
}
if (this.$refs.teacherSelect) {
this.$refs.teacherSelect.query = limited;
}
},
limitCreatorInput(event) {
const limited = (event && event.target && event.target.value ? event.target.value : '').slice(0, 50);
if (event && event.target && event.target.value !== limited) {
event.target.value = limited;
}
if (this.$refs.creatorSelect) {
this.$refs.creatorSelect.query = limited;
}
},
handleTopSort() { handleTopSort() {
if (this.$refs.topSorter) { if (this.$refs.topSorter) {
this.$refs.topSorter.open(); this.$refs.topSorter.open();
@@ -817,7 +864,7 @@ export default {
const hasStart = !!this.params.learningTimeStart; const hasStart = !!this.params.learningTimeStart;
const hasEnd = !!this.params.learningTimeEnd; const hasEnd = !!this.params.learningTimeEnd;
if ((hasStart && !hasEnd) || (!hasStart && hasEnd)) { if ((hasStart && !hasEnd) || (!hasStart && hasEnd)) {
this.$message.warning('请选择完整的培训时间范围'); this.$showMessage('请选择完整的培训时间范围', 'warning');
return false; return false;
} }
return true; return true;
@@ -1004,7 +1051,7 @@ export default {
document.body.removeChild(link); document.body.removeChild(link);
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
} catch (error) { } catch (error) {
this.$message.error(error.message || '导出失败'); this.$showMessage(error.message || '导出失败', 'error');
} finally { } finally {
this.exportLoading = false; this.exportLoading = false;
} }
@@ -1032,30 +1079,21 @@ export default {
// console.log('fa') // console.log('fa')
apiCourse.setTop(params).then(res => { apiCourse.setTop(params).then(res => {
if (res.status === 200 && res.result === true) { if (res.status === 200 && res.result === true) {
this.$message.success('置顶成功！') this.$showMessage('置顶成功！', 'success')
this.searchData(); this.searchData();
} else if (res.status === 500) { } else if (res.status === 500) {
this.$message({ this.$showMessage('已置顶10条课程，若需继续置顶，请对部分课程执行取消置顶操作', 'error');
type: 'error',
message: '已置顶10条课程，若需继续置顶，请对部分课程执行取消置顶操作'
});
} else { } else {
this.$message({ this.$showMessage(res.message, 'error');
type: 'error',
message: res.message
});
} }
}) })
} else if (row.isTop == true) { } else if (row.isTop == true) {
apiCourse.setTop(params).then(res => { apiCourse.setTop(params).then(res => {
if (res.status === 200 && res.result === true) { if (res.status === 200 && res.result === true) {
this.$message.success('取消成功！') this.$showMessage('取消成功！', 'success')
this.searchData(); this.searchData();
} else { } else {
this.$message({ this.$showMessage(res.message, 'error');
type: 'error',
message: res.message
});
} }
}) })
} }
@@ -1077,13 +1115,13 @@ export default {
}; };
apiCourse.copyCourse(reqdata).then(rs => { apiCourse.copyCourse(reqdata).then(rs => {
if (rs.status === 200) { if (rs.status === 200) {
this.$message({ type: 'success', message: '复制成功', duration: 5000 }); this.$showMessage('复制成功', 'success');
this.searchData(); this.searchData();
} else { } else {
this.$message({ type: 'error', message: rs.message || '复制失败', duration: 5000 }); this.$showMessage(rs.message || '复制失败', 'error');
} }
}).catch(() => { }).catch(() => {
this.$message({ type: 'error', message: '复制失败', duration: 5000 }); this.$showMessage('复制失败', 'error');
}); });
}).catch(() => { }); }).catch(() => { });
}, },
@@ -1097,13 +1135,13 @@ export default {
}).then(() => { }).then(() => {
apiCourse.revokeSubmit(row.id).then((res) => { apiCourse.revokeSubmit(row.id).then((res) => {
if (res.status === 200 && res.result) { if (res.status === 200 && res.result) {
this.$message({ type: 'success', message: '撤回成功', duration: 5000 }); this.$showMessage('撤回成功', 'success');
this.searchData(); this.searchData();
} else { } else {
this.$message({ type: 'error', message: res.message || '撤回失败', duration: 5000 }); this.$showMessage(res.message || '撤回失败', 'error');
} }
}).catch(() => { }).catch(() => {
this.$message({ type: 'error', message: '撤回失败', duration: 5000 }); this.$showMessage('撤回失败', 'error');
}); });
}).catch(() => { }); }).catch(() => { });
}, },
@@ -1158,15 +1196,15 @@ export default {
} }
apiCourse.audit(params).then(res => { apiCourse.audit(params).then(res => {
if (res.status === 200) { if (res.status === 200) {
this.$message.success('操作成功！'); this.$showMessage('操作成功！', 'success');
this.dialogVisible = false; this.dialogVisible = false;
this.searchData(); this.searchData();
} else { } else {
this.$message.error(res.message); this.$showMessage(res.message, 'error');
} }
}) })
} else { } else {
this.$message.warning('暂未开放！'); this.$showMessage('暂未开放！', 'warning');
} }
}, },
@@ -1199,13 +1237,13 @@ export default {
try { try {
const { status } = await apiCourse.setEnabled(params); const { status } = await apiCourse.setEnabled(params);
if (status === 200) { if (status === 200) {
this.$message({ type: 'success', message: `${actionText}成功`, duration: 5000 }); this.$showMessage(`${actionText}成功`, 'success');
row.enabled = nextEnabled; row.enabled = nextEnabled;
} else { } else {
this.$message({ type: 'error', message: `${actionText}失败`, duration: 5000 }); this.$showMessage(`${actionText}失败`, 'error');
} }
} catch (error) { } catch (error) {
this.$message({ type: 'error', message: `${actionText}失败`, duration: 5000 }); this.$showMessage(`${actionText}失败`, 'error');
} }
}, },
// 课程查询 // 课程查询
@@ -1225,11 +1263,11 @@ export default {
this.page.count = rs.result.count; this.page.count = rs.result.count;
this.page.pageSize = rs.result.pageSize; this.page.pageSize = rs.result.pageSize;
} else { } else {
return this.$message.error(rs.message); return this.$showMessage(rs.message, 'error');
} }
}).catch(err => { }).catch(err => {
console.error('查询课程列表失败:', err); console.error('查询课程列表失败:', err);
this.$message.error('查询失败，请稍后重试'); this.$showMessage('查询失败，请稍后重试', 'error');
}); });
}, },
@@ -1253,7 +1291,7 @@ export default {
}, },
viewTopic(row) { viewTopic(row) {
if (row.status == 1) { if (row.status == 1) {
return this.$message.warning('请提交课程再预览！') return this.$showMessage('请提交课程再预览！', 'warning')
} }
this.examin = {}; this.examin = {};
this.examin.detailType = row.type; this.examin.detailType = row.type;
@@ -1311,7 +1349,7 @@ export default {
if (!ele) return; if (!ele) return;
ele.select(); ele.select();
document.execCommand('Copy'); document.execCommand('Copy');
this.$message.success('复制成功'); this.$showMessage('复制成功', 'success');
}, },
downloadQrcode() { downloadQrcode() {
const container = document.getElementById('qrcode'); const container = document.getElementById('qrcode');
@@ -1462,10 +1500,10 @@ export default {
// } else { // } else {
// item.isTop = true; // item.isTop = true;
// } // }
// this.$message({ message: msg, type: 'success', offset: 50 }); // this.$showMessage('xxx', 'success');
// }, // },
delItem(row) { delItem(row) {
// this.$message({ type: 'success',customClass: 'custom-message-dialog', message: '删除成功', duration: 10000000 }); // this.$showMessage('删除成功', 'success');
// return false // return false
this.$confirm(`<i class="el-icon-warning-outline"></i>确认删除${row.name}吗？`, '删除确认', { this.$confirm(`<i class="el-icon-warning-outline"></i>确认删除${row.name}吗？`, '删除确认', {
confirmButtonText: '确定', confirmButtonText: '确定',
@@ -1483,7 +1521,7 @@ export default {
// {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注} // {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
const { status } = await apiCourse.del(params); const { status } = await apiCourse.del(params);
if (status === 200) { if (status === 200) {
this.$message({ type: 'success', message: '删除成功', duration: 5000 }); //只是之前发布过的课程删除才可 this.$showMessage('删除成功', 'success'); //只是之前发布过的课程删除才可
// if(!row.erasable){ // if(!row.erasable){
// let event = { // let event = {
// key: "CourseDelete",//被管理员删除 // key: "CourseDelete",//被管理员删除
@@ -1503,11 +1541,11 @@ export default {
this.searchData(); this.searchData();
} }
} catch (error) { } catch (error) {
this.$message({ type: 'error', message: '删除失败', duration: 5000 }); this.$showMessage('删除失败', 'error');
} }
}) })
.catch((err) => { .catch((err) => {
// this.$message({ type: 'info', message: '已取消删除', duration: 5000 }); // this.$showMessage('已取消删除', 'info');
}); });
}, },
showAddCatalogZhang(bal) { showAddCatalogZhang(bal) {
@@ -1516,6 +1554,64 @@ export default {
saveNewCatalogZhang() { saveNewCatalogZhang() {
this.catalogs.addNewZhang = false; this.catalogs.addNewZhang = false;
}, },
handleAction(key, row) {
switch (key) {
case 'edit':
return this.editCurriculum(row);
case 'qrcode':
return this.showQrimage(row);
case 'manage':
return this.showManageStudy(row);
case 'withdraw':
return this.withdraw(row);
case 'delete':
return this.delItem(row);
case 'copy':
return this.copyCourse(row);
case 'toggleEnable':
return this.isDisable(row);
case 'toggleTop':
return this.setTop(row);
default:
return;
}
},
buildActions(row) {
const actions = [];
// 优先级按原有展示顺序
if (row.isPermission && row.status != 2) {
actions.push({ key: 'edit', label: '编辑', className: 'action-link--primary' });
}
if (this.showSetTopFeature && row.published) {
actions.push({ key: 'qrcode', label: '二维码', className: 'action-link--primary' });
}
if (row.isPermission && !this.forChoose && row.published) {
actions.push({ key: 'manage', label: '管理', className: 'action-link--primary' });
}
if (row.isPermission && !this.forChoose && row.status == 2) {
actions.push({ key: 'withdraw', label: '撤回', className: 'action-link--primary' });
}
if ((row.isPermission && row.status != 2 && !row.published) || (row.isPermission && !row.enabled)) {
actions.push({ key: 'delete', label: '删除', className: 'action-link--danger' });
}
// 更多里的动作
if (row.isPermission && row.published) {
actions.push({ key: 'copy', label: '复制', className: 'action-link--primary' });
actions.push({ key: 'toggleEnable', label: row.enabled ? '停用' : '启用', className: 'action-link--bold' });
if (this.showSetTopFeature) {
actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: '' });
}
}
return actions;
},
getInlineActions(row) {
const actions = this.buildActions(row);
return actions.slice(0, 4);
},
getDropdownActions(row) {
const actions = this.buildActions(row);
return actions.length > 4 ? actions.slice(4) : [];
}
} }
}; };
</script> </script>
@@ -1599,8 +1695,6 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
.filter-row--primary .filter-actions {}
.filter-row--advanced { .filter-row--advanced {
margin-top: 10px; margin-top: 10px;
} }
@@ -2003,8 +2097,11 @@ export default {
} }
.action-link--more { .action-link--more {
color: rgba(0, 0, 0, .2); color: #999999;
font-weight: bold; font-weight: bold;
.el-icon-arrow-down {
font-weight: bold;
}
} }
.action-link--bold { .action-link--bold {
@@ -2300,10 +2397,6 @@ export default {
border-color: #4284F7; border-color: #4284F7;
} }
} }
.el-range-input {
// text-align: left;
}
.el-range-separator { .el-range-separator {
line-height: 30px; line-height: 30px;
} }