style:修改左侧导航及头部导航栏,创建左侧导航相关页面

This commit is contained in:
李晓鸽
2022-10-08 10:20:21 +08:00
parent f416bb7da8
commit 8cb03598cc
31 changed files with 3277 additions and 310 deletions

View File

@@ -1,16 +1,316 @@
<!-- 课程管理页面 -->
<template>
<div class="coursewareManage"></div>
<div class="coursewareManage">
<div
style="width: calc(100% - 76px); margin: 19px 0px 30px 38px"
class="tableBox"
>
<a-table
:columns="columns"
:data-source="tableData"
:row-selection="rowSelection"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700, y: 800 }"
:pagination="{
showSizeChanger: true,
showQuickJumper: true,
hideOnSinglePage: true,
pageSizeOptions: [],
pageSize: pageSize,
current: currentPage,
total: tableDataTotal,
onChange: (page, pageSize) => {
currentPage = page;
// console.log('page', page)
// 加翻页查找代码
// this.setState({
// currentPage: page,
// }, () => {
// this.getMilitaryDeployment()
// })
},
}"
/>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, ref } from "vue";
const columns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 280,
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
},
{
title: "状态",
dataIndex: "state",
// width: "30%",
key: "state",
width: 100,
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
},
{
title: "操作",
dataIndex: "opacation",
key: "opacation",
width: 300,
},
];
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "CoursewareManage",
name: "coursewareManage",
setup() {
const state = reactive({});
const state = reactive({
tableData: [
{
id: 1,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
id: 5,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
id: 7,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 8,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
{
id: 6,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
{
id: 2,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 3,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
hasChildren: true,
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
id: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
currentPage: 1,
tableDataTotal: 20,
pageSize: 10,
});
return {
...toRefs(state),
columns,
rowSelection,
};
},
};
</script>
<style scoped lang="scss"></style>
<style lang="scss">
.coursewareManage {
width: 100%;
height: 100%;
}
</style>