<template>
|
<div class="app-container">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="课程" name="first" />
|
<el-tab-pane label="教师" name="fourth" />
|
<el-tab-pane label="场地" name="xxx" />
|
</el-tabs>
|
<div>
|
<div style="width: 300px">
|
<el-date-picker v-model="timeData" type="date" placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div style="display: flex">
|
<div class="timetable-b w100">
|
<table class="timetable-content w100">
|
<thead>
|
<tr>
|
<th></th>
|
<th v-for="(item1, index1) in weeks" :key="index1">
|
xxx
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item2, index2) in maxCourseLength" :key="index2">
|
<td>
|
<p>{{ xxx }}</p>
|
</td>
|
<template v-for="(item3, index3) in weeks">
|
<td
|
:key="index3"
|
:rowspan="
|
showData(index3, index2 + 1).subject &&
|
showData(index3, index2).subject ===
|
showData(index3, index2 + 1).subject
|
? 2
|
: ''
|
"
|
:style="[
|
{
|
display:
|
showData(index3, index2 - 1).subject &&
|
showData(index3, index2 - 1).subject ===
|
showData(index3, index2).subject
|
? 'none'
|
: '',
|
},
|
]"
|
>
|
<div
|
class="dmsjandjs-b"
|
:style="[
|
{
|
background: showData(index3, index2).index
|
? getRandomColor()
|
: '#FFFFFF',
|
},
|
{ color: '#fff' },
|
{ borderRadius: '15px' },
|
{ padding: '12px' },
|
{ height: '100%' },
|
]"
|
>
|
<p>
|
{{ showData(index3, index2).startTime }}
|
{{ showData(index3, index2).startTime ? "-" : "" }}
|
{{ showData(index3, index2).endTime }}
|
</p>
|
<p>{{ showData(index3, index2).subject }}</p>
|
<p>{{ showData(index3, index2).major }}</p>
|
<p>{{ showData(index3, index2).class }}</p>
|
</div>
|
</td>
|
</template>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getList } from "@/api/table";
|
|
export default {
|
filters: {
|
statusFilter(status) {
|
const statusMap = {
|
published: "success",
|
draft: "gray",
|
deleted: "danger",
|
};
|
return statusMap[status];
|
},
|
},
|
data() {
|
return {
|
list: null,
|
listLoading: true,
|
activeName: "first",
|
timeData: new Date(),
|
};
|
},
|
created() {
|
this.fetchData();
|
},
|
methods: {
|
fetchData() {
|
this.listLoading = true;
|
getList().then((response) => {
|
this.list = response.data.items;
|
this.listLoading = false;
|
});
|
},
|
//随机获取颜色
|
getRandomColor() {
|
let colorList = this.colorList;
|
let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
|
let color;
|
for (let i = 0; colorList.length > i; i++) {
|
if (i == colorRandom) {
|
color = colorList[i];
|
}
|
}
|
return color;
|
},
|
},
|
};
|
</script>
|
