<template>
|
<div class="main-layout" ref="mainLayout">
|
<div class="header" ref="headerLayout">
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
<el-tab-pane label="月" name="month">
|
<project-board-month v-if="activeTab == 'month'"></project-board-month>
|
</el-tab-pane>
|
<el-tab-pane label="日" name="day">
|
<project-board-day v-if="activeTab == 'day'"></project-board-day>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
import { getDefaultDate, getYesterdayDate, getStartAndEndOfWeek, getPreviousWeekDates } from '@/utils/dateUtils'
|
import { debounce } from 'lodash'
|
|
import ProjectBoardMonth from '@/view/project-board/project-board-list-month'
|
import ProjectBoardDay from '@/view/project-board/project-board-list-day'
|
|
export default {
|
components: {
|
ProjectBoardMonth,
|
ProjectBoardDay,
|
},
|
props: {},
|
setup(props, context) {
|
// 防抖函数，避免动态表格数据变化时产生的抖动
|
const resizeObserver = window.ResizeObserver
|
|
window.ResizeObserver = class extends resizeObserver {
|
constructor(callback) {
|
const debouncedCallback = debounce(callback, 100)
|
super(debouncedCallback)
|
}
|
}
|
|
const activeTab = ref('month')
|
|
return {
|
activeTab,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
|
const checkDate = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
|
callback()
|
}
|
|
const rules = {
|
startDate: [{ validator: checkDate, trigger: 'blur', required: true }],
|
endDate: [{ validator: checkDate, trigger: 'blur', required: true }],
|
}
|
return { rules }
|
}
|
</script>
|
|
<style scoped>
|
.main-layout {
|
display: flex;
|
flex-direction: column;
|
padding: 10px;
|
height: 100%;
|
/* height: 100vh; */
|
}
|
|
.header {
|
/* padding-left: 10px; */
|
/* background-color: #f0f0f0; */
|
text-align: center;
|
}
|
|
.flex-container {
|
flex: 1;
|
display: flex;
|
overflow: hidden;
|
}
|
|
.sidebar {
|
flex: 0 0 300px;
|
/* 左侧宽度固定为300px */
|
background-color: #f7f7f7;
|
overflow-y: auto;
|
padding: 20px;
|
}
|
|
.main-content {
|
flex: 1;
|
background-color: #ffffff;
|
overflow-x: auto;
|
padding: 10px;
|
overflow-y: hidden;
|
}
|
|
.dynamic_table {
|
overflow-x: auto;
|
width: 100%;
|
}
|
|
.wrap-text {
|
white-space: pre-line !important;
|
/* 使用 pre-line 属性实现自动换行 */
|
}
|
|
.search-section {
|
/* margin-bottom: 10px; */
|
padding: 10px;
|
/* background-color: #f5f5f5; */
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
display: flex;
|
justify-content: flex-start;
|
height: 60px;
|
overflow-y: scroll;
|
}
|
|
.selectClass {
|
width: 220px;
|
}
|
|
.el-table .plan-row {
|
background: #7c9ac0;
|
}
|
|
.el-table .actual-row {
|
background: #575280;
|
}
|
|
.planActualClass {
|
width: 100%;
|
height: 100%;
|
background: #7c9ac0;
|
}
|
|
.el-table .planActualClass {
|
width: 100%;
|
height: 100%;
|
background: #7c9ac0;
|
}
|
|
.el-table .cell {
|
border: none !important;
|
}
|
|
.el-form-item {
|
width: 260px !important;
|
}
|
|
.fake-form {
|
margin-right: 10px;
|
}
|
</style>
|
