mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 19:06:45 +08:00
407 lines
9.0 KiB
Vue
407 lines
9.0 KiB
Vue
<template>
|
||
<!-- 学习路径图! -->
|
||
<div class="learningpathmap">
|
||
<!-- 以下为顶部搜索框 -->
|
||
<div class="filter">
|
||
<div class="select addTimeBox">
|
||
<div class="addTime">创建时间：</div>
|
||
<a-range-picker
|
||
style="width: 100%"
|
||
format="YYYY-MM-DD"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
/>
|
||
</div>
|
||
<div class="select">
|
||
<a-select
|
||
style="width: 100%"
|
||
placeholder="请选择归属组织"
|
||
allowClear
|
||
></a-select>
|
||
</div>
|
||
<div class="select">
|
||
<a-input
|
||
style="width: 100%; height: 40px; border-radius: 8px"
|
||
placeholder="请输入路径名称"
|
||
allowClear
|
||
showSearch
|
||
>
|
||
</a-input>
|
||
</div>
|
||
<div class="select">
|
||
<a-input
|
||
style="width: 100%; height: 40px; border-radius: 8px"
|
||
placeholder="请输入创建者"
|
||
allowClear
|
||
showSearch
|
||
>
|
||
</a-input>
|
||
</div>
|
||
<div style="display: flex; margin-bottom: 20px">
|
||
<div class="btnn btn1">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="btn btn2">
|
||
<div class="search"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 以下为导出按钮 -->
|
||
<div class="btns">
|
||
<div class="btn btn3">
|
||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||
<div class="btnText">导出列表信息</div>
|
||
</div>
|
||
<div class="btn btn3" style="margin-left: 20px">
|
||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||
<div class="btnText">导出详细信息</div>
|
||
</div>
|
||
</div>
|
||
<!-- 以下为table表格 -->
|
||
<div class="tableBox">
|
||
<a-table
|
||
:columns="columns"
|
||
:data-source="tableData"
|
||
:loading="tableLoading"
|
||
:scroll="{ x: 700 }"
|
||
:pagination="false"
|
||
>
|
||
</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 } from "vue";
|
||
export default {
|
||
name: "LearningPathMap",
|
||
setup() {
|
||
const state = reactive({
|
||
tableLoading: false, // table加载图标
|
||
tableDataTotal: 12, // 数据总条数
|
||
pageSize: 10, // 每页条数
|
||
pageNo: 1, //当前页码
|
||
});
|
||
// 表格数据
|
||
let tableData = ref([
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
{ name: "0000255", manager: "565656" },
|
||
]);
|
||
// cloumns 表头
|
||
const columns = ref([
|
||
{
|
||
title: "编号",
|
||
dataIndex: "name",
|
||
key: "name",
|
||
ellipsis: true,
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "路径名称",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "归属组织",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "关卡数",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "任务数",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "学习人数",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "完成人数",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "发布时间",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "路径状态",
|
||
dataIndex: "manager",
|
||
ellipsis: true,
|
||
key: "manager",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
dataIndex: "operation",
|
||
key: "operation",
|
||
width: 150,
|
||
align: "center",
|
||
fixed: "right",
|
||
customRender: () => {
|
||
return <a>导出历史记录</a>;
|
||
},
|
||
},
|
||
]);
|
||
//table 分页事件
|
||
const changePagination = (page) => {
|
||
state.pageNo = page;
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
tableData,
|
||
columns,
|
||
changePagination,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.learningpathmap {
|
||
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 - 360px) / 4);
|
||
}
|
||
|
||
.addTimeBox {
|
||
width: calc((100% - 76px - 360px) / 4 + 120px) !important;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.addTime {
|
||
position: absolute;
|
||
z-index: 10;
|
||
margin-left: 10px;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.ant-picker {
|
||
padding-left: 85px;
|
||
}
|
||
|
||
.ant-picker-range .ant-picker-active-bar {
|
||
margin-left: 85px;
|
||
}
|
||
}
|
||
|
||
.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>
|