mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-24 18:22:55 +08:00
771 lines
18 KiB
Vue
771 lines
18 KiB
Vue
<template>
|
|
<!-- 课程! -->
|
|
<div class="curriculum">
|
|
<!-- 以下为顶部搜索框 -->
|
|
<div class="filter">
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入课程名称"
|
|
allowClear
|
|
showSearch
|
|
v-model:value="name"
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div class="select">
|
|
<a-cascader
|
|
:options="option"
|
|
placeholder="请选择组织"
|
|
v-model:value="orgId"
|
|
:allowClear="allowClear"
|
|
style="width: 100%"
|
|
:fieldNames="{
|
|
label: 'name',
|
|
value: 'id',
|
|
children: 'treeChildList',
|
|
}"
|
|
>
|
|
</a-cascader>
|
|
</div>
|
|
<div class="select">
|
|
<a-cascader
|
|
style="width: 100%"
|
|
placeholder="请选择分类"
|
|
allowClear
|
|
v-model:value="type"
|
|
:options="typeOption"
|
|
:fieldNames="{
|
|
label: 'name',
|
|
value: 'name',
|
|
children: 'children',
|
|
}"
|
|
></a-cascader>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入创建者"
|
|
allowClear
|
|
showSearch
|
|
v-model:value="createName"
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div style="display: flex; margin-bottom: 20px">
|
|
<div class="btnn btn1" @click="getTableData">
|
|
<div class="search"></div>
|
|
<div class="btnText">搜索</div>
|
|
</div>
|
|
<div class="btn btn2" @click="resetClick">
|
|
<div class="search"></div>
|
|
<div class="btnText">重置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为导出按钮 -->
|
|
<div class="btns">
|
|
<div class="btn btn3" @click="exportList">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出列表信息</div>
|
|
</div>
|
|
<div class="btn btn3" style="margin-left: 20px" @click="exportDetail">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出详细信息</div>
|
|
</div>
|
|
<div class="btn btn3" style="margin-left: 20px" @click="exportPlanList">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">开课数据导出</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为table表格 -->
|
|
<div class="tableBox">
|
|
<a-table
|
|
rowKey="boeCourseId"
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:loading="tableLoading"
|
|
:scroll="{ x: 700 }"
|
|
:pagination="false"
|
|
:row-selection="{
|
|
selectedRowKeys: selectedRowKeys,
|
|
onChange: onSelectChange,
|
|
}"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'courseType'">
|
|
<span>{{
|
|
record.courseType == "0"
|
|
? "在线"
|
|
: record.courseType == "1"
|
|
? "面授"
|
|
: record.courseType
|
|
}}</span>
|
|
</template>
|
|
<template v-if="column.key === 'publishStatus'">
|
|
<span>{{
|
|
record.publishStatus == "0"
|
|
? "未发布"
|
|
: record.publishStatus == "1"
|
|
? "已发布"
|
|
: ""
|
|
}}</span>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<div class="tableBox">
|
|
<div class="pa">
|
|
<a-pagination
|
|
v-if="tableDataTotal > 10"
|
|
:showSizeChanger="false"
|
|
showQuickJumper="true"
|
|
hideOnSinglePage="true"
|
|
:pageSize="pageSize"
|
|
v-model:current="pageNo"
|
|
:total="tableDataTotal"
|
|
class="pagination"
|
|
@change="changePagination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, toRefs, reactive, onMounted } from "vue";
|
|
import * as api from "../../api/indexProject";
|
|
// import dayjs from "dayjs";
|
|
import axios from "axios";
|
|
import Cookies from "vue-cookies";
|
|
import downLoad from "../../utils/downLoad";
|
|
import { message } from "ant-design-vue";
|
|
export default {
|
|
name: "CurriculuM",
|
|
setup() {
|
|
const state = reactive({
|
|
tableLoading: false, // table加载图标
|
|
tableDataTotal: 0, // 数据总条数
|
|
pageSize: 10, // 每页条数
|
|
pageNo: 1, //当前页码
|
|
orgId: null,
|
|
resetOrgId: null,
|
|
name: "",
|
|
type: null,
|
|
createName: "",
|
|
allowClear: true,
|
|
option: [],
|
|
selectedRowKeys: [],
|
|
typeOption:[]
|
|
});
|
|
// 分类选项接口
|
|
const getOption = async () => {};
|
|
//请求组织接口
|
|
const getOrgList = async () => {
|
|
const result = await api.userGetUserOrg({});
|
|
|
|
if (result) {
|
|
state.option = result.data?.result?.list;
|
|
state.orgId = result.data?.result?.treeNodeList;
|
|
state.resetOrgId = result.data?.result?.treeNodeList;
|
|
result.data?.result?.userType === 1
|
|
? (state.allowClear = true)
|
|
: (state.allowClear = false);
|
|
getTableData();
|
|
}
|
|
};
|
|
const getTableData = async () => {
|
|
state.tableLoading = true;
|
|
const params = {
|
|
name: state.name,
|
|
organizationId: state.orgId
|
|
? state.orgId[state.orgId.length - 1]
|
|
: null,
|
|
pageNo: state.pageNo,
|
|
pageSize: state.pageSize,
|
|
type: state.type ? state.type[state.type.length - 1]:null,
|
|
createName: state.createName,
|
|
};
|
|
const res = await api.boeuCourseListPageV2(params);
|
|
if (res) {
|
|
tableData.value = res.data.rows;
|
|
state.tableDataTotal = res.data.total;
|
|
state.tableLoading = false;
|
|
}
|
|
};
|
|
let tableData = ref([]);
|
|
// table选中
|
|
const onSelectChange = (selectedRowKeys) => {
|
|
state.selectedRowKeys = selectedRowKeys;
|
|
};
|
|
// cloumns 表头
|
|
const columns = ref([
|
|
{
|
|
title: "编号",
|
|
dataIndex: "id",
|
|
ellipsis: true,
|
|
key: "id",
|
|
align: "center",
|
|
width: 80,
|
|
},
|
|
{
|
|
title: "课程名称",
|
|
dataIndex: "name",
|
|
ellipsis: true,
|
|
key: "name",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "类型",
|
|
dataIndex: "courseType",
|
|
ellipsis: true,
|
|
key: "courseType",
|
|
align: "center",
|
|
width: 80,
|
|
},
|
|
{
|
|
title: "归属组织",
|
|
dataIndex: "organizationName",
|
|
ellipsis: true,
|
|
key: "organizationName",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "归属路径图",
|
|
dataIndex: "routerName",
|
|
ellipsis: true,
|
|
key: "routerName",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "归属项目",
|
|
dataIndex: "projectName",
|
|
ellipsis: true,
|
|
key: "projectName",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "一级分类",
|
|
dataIndex: "oneType",
|
|
ellipsis: true,
|
|
key: "oneType",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "二级分类",
|
|
dataIndex: "twoType",
|
|
ellipsis: true,
|
|
key: "twoType",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "三级分类",
|
|
dataIndex: "threeType",
|
|
ellipsis: true,
|
|
key: "threeType",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "授课教师",
|
|
dataIndex: "teacher",
|
|
ellipsis: true,
|
|
key: "teacher",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "开课次数",
|
|
dataIndex: "classTotal",
|
|
ellipsis: true,
|
|
key: "classTotal",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "学习总人数",
|
|
dataIndex: "learnerNumber",
|
|
ellipsis: true,
|
|
key: "learnerNumber",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "评论数",
|
|
dataIndex: "commentTotal",
|
|
ellipsis: true,
|
|
key: "commentTotal",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "点赞数",
|
|
dataIndex: "likesTotal",
|
|
ellipsis: true,
|
|
key: "likesTotal",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "收藏数",
|
|
dataIndex: "collectionsTotal",
|
|
ellipsis: true,
|
|
key: "collectionsTotal",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "平均评分",
|
|
dataIndex: "score",
|
|
ellipsis: true,
|
|
key: "score",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "发布时间",
|
|
dataIndex: "publishTime",
|
|
ellipsis: true,
|
|
key: "publishTime",
|
|
align: "center",
|
|
width: 140,
|
|
},
|
|
{
|
|
title: "课程状态",
|
|
dataIndex: "publishStatus",
|
|
ellipsis: true,
|
|
key: "publishStatus",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "创建人",
|
|
dataIndex: "createName",
|
|
ellipsis: true,
|
|
key: "createName",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
key: "operation",
|
|
width: 150,
|
|
align: "center",
|
|
fixed: "right",
|
|
customRender: (record) => {
|
|
return (
|
|
<a
|
|
onClick={() => {
|
|
exportDetailClick(record.record.boeCourseId);
|
|
}}
|
|
>
|
|
导出详细信息
|
|
</a>
|
|
);
|
|
},
|
|
},
|
|
]);
|
|
//table 分页事件
|
|
const changePagination = (page) => {
|
|
state.pageNo = page;
|
|
getTableData();
|
|
};
|
|
onMounted(() => {
|
|
getType()
|
|
getOrgList();
|
|
state.tableLoading = true;
|
|
});
|
|
const resetClick = () => {
|
|
state.name = "";
|
|
state.orgId = state.resetOrgId;
|
|
state.pageNo = 1;
|
|
state.pageSize = 10;
|
|
state.type = null;
|
|
state.createName = "";
|
|
getTableData();
|
|
};
|
|
const exportList = () => {
|
|
if (state.selectedRowKeys.length > 0) {
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/list/export/v2",
|
|
data: { ids: state.selectedRowKeys },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "课程列表.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
} else {
|
|
const params = {
|
|
name: state.name,
|
|
organizationId: state.orgId
|
|
? state.orgId[state.orgId.length - 1]
|
|
: null,
|
|
pageNo: state.pageNo,
|
|
pageSize: state.pageSize,
|
|
type: state.type ? state.type[state.type.length - 1]:null,
|
|
createName: state.createName,
|
|
};
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/list/export/v2",
|
|
data: params,
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "课程列表.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
}
|
|
};
|
|
const exportDetail = async () => {
|
|
if (state.selectedRowKeys.length > 0) {
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/list/detail/export/v2",
|
|
data: { ids: state.selectedRowKeys },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "课程详细信息.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
} else {
|
|
const params = {
|
|
name: state.name,
|
|
organizationId: state.orgId
|
|
? state.orgId[state.orgId.length - 1]
|
|
: null,
|
|
pageNo: state.pageNo,
|
|
pageSize: state.pageSize,
|
|
type: state.type ? state.type[state.type.length - 1]:null,
|
|
createName: state.createName,
|
|
};
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/list/detail/export/v2",
|
|
data: params,
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "课程详细信息.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
}
|
|
};
|
|
const exportDetailClick = async (id) => {
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/list/detail/export/v2",
|
|
data: { ids: [id] },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "课程详细信息.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
};
|
|
const exportPlanList = async () => {
|
|
if (state.selectedRowKeys.length > 0) {
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/plan/list/export/v2",
|
|
data: { ids: state.selectedRowKeys },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "开课数据.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
} else {
|
|
const params = {
|
|
name: state.name,
|
|
organizationId: state.orgId
|
|
? state.orgId[state.orgId.length - 1]
|
|
: null,
|
|
pageNo: state.pageNo,
|
|
pageSize: state.pageSize,
|
|
type: state.type ? state.type[state.type.length - 1]:null,
|
|
createName: state.createName,
|
|
};
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/course/plan/list/export/v2",
|
|
data: params,
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "开课数据.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
}
|
|
};
|
|
const getType = () => {
|
|
axios({
|
|
method: "get",
|
|
url: "/systemapi/xboe/type/tree-list",
|
|
params: {
|
|
sysResType: "1",
|
|
status: "1",
|
|
},
|
|
headers: {
|
|
"XBOR-Access-token": Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
console.log(res.data.result)
|
|
state.typeOption=res.data.result
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
};
|
|
|
|
return {
|
|
...toRefs(state),
|
|
exportPlanList,
|
|
exportDetail,
|
|
exportList,
|
|
getType,
|
|
getTableData,
|
|
tableData,
|
|
columns,
|
|
changePagination,
|
|
getOrgList,
|
|
resetClick,
|
|
onSelectChange,
|
|
exportDetailClick,
|
|
getOption,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.curriculum {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.filter {
|
|
margin-left: 38px;
|
|
margin-right: 20px;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.select {
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
width: calc((100% - 76px - 240px) / 4);
|
|
}
|
|
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: rgba(64, 158, 255, 0);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(64, 158, 255, 1);
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: #4ea6ff;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn1 {
|
|
.search {
|
|
width: 15px;
|
|
height: 17px;
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
}
|
|
|
|
.btn2 {
|
|
margin-right: 0px !important;
|
|
.search {
|
|
width: 16px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/reset1.png");
|
|
}
|
|
}
|
|
|
|
.btn1:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
|
|
.search {
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
|
|
.btnText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.btn1:active {
|
|
background: #0982ff;
|
|
}
|
|
|
|
.btn2:hover {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
}
|
|
|
|
.btn2:active {
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
margin-left: 38px;
|
|
// flex-wrap: wrap;
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #4ea6ff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn3 {
|
|
margin-right: 0px;
|
|
|
|
.search {
|
|
width: 17px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/add0.png");
|
|
}
|
|
}
|
|
|
|
.btn3:hover {
|
|
// background: rgba(64, 158, 255, 0.76);
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
// .btn3:active {
|
|
// background: #0982ff;
|
|
// }
|
|
}
|
|
.tableBox {
|
|
margin: 20px 38px 30px;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: #eff4fc;
|
|
}
|
|
}
|
|
.tableBox {
|
|
padding-bottom: 20px;
|
|
|
|
.pa {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|