mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-23 17:55:39 +08:00
feat: 三期报表管理页面编写
This commit is contained in:
mx00085@163.com
@@ -1,17 +1,207 @@
|
||||
<template>
|
||||
<!-- 学习路径图! -->
|
||||
<!-- 学习路径图! -->
|
||||
<div class="learningpathmap">
|
||||
<div class="box">
|
||||
学习路径图页面!
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<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">
|
||||
@@ -20,5 +210,197 @@ export default {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user