<template>
|
<div class="main-layout" ref="mainLayout">
|
<div class="header">
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
<el-tab-pane label="日志" name="default"></el-tab-pane>
|
<el-tab-pane label="今日" name="today"></el-tab-pane>
|
<el-tab-pane label="昨日" name="yesterday"></el-tab-pane>
|
<el-tab-pane label="本周" name="this_week"></el-tab-pane>
|
<el-tab-pane label="上周" name="last_week"></el-tab-pane>
|
</el-tabs>
|
|
<div class="search-section" ref="searchSection">
|
<el-form :model="formData" :inline="true" label-width="auto" ref="form" @submit.prevent :rules="rules">
|
<el-form-item label="所属项目" prop="project_id">
|
<el-select v-model="formData.project_id" placeholder="所属项目" clearable filterable class="selectClass">
|
<el-option v-for="item in projectInfoArr" :key="item.id" :label="item.project_name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="用户" prop="create_user_id" class="selectClass">
|
<el-select v-model="formData.create_user_id" placeholder="请选择用户" clearable filterable>
|
<el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="开始" prop="startDate">
|
<el-date-picker
|
v-model="formData.startDate"
|
type="date"
|
placeholder="请选择开始时间"
|
:picker-options="startPickerOptions"
|
value-format="YYYY-MM-DD"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束" prop="endDate">
|
<el-date-picker
|
v-model="formData.endDate"
|
type="date"
|
placeholder="请选择结束时间"
|
:picker-options="endPickerOptions"
|
value-format="YYYY-MM-DD"
|
></el-date-picker>
|
</el-form-item>
|
|
<el-form-item class="submit">
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button @click="resetForm">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="flex-container">
|
<div class="main-content">
|
<!-- 右侧主要内容 -->
|
<!-- 使用 Element Plus 的组件填充内容 -->
|
|
<el-table :data="tableRows" border fit class="dynamic_table" style="width: 100%; overflow-x: auto" height="92%">
|
<!-- 动态生成表格列 -->
|
<el-table-column
|
v-for="column in tableColumns.slice(0, 1)"
|
:key="column.prop"
|
:prop="column.prop"
|
:label="column.label"
|
:width="firstColumnWidth"
|
fixed
|
>
|
<template #default="{ row }">
|
<span v-html="formatColumnContent(row, row[column.prop])"></span>
|
</template>
|
</el-table-column>
|
|
<!-- 动态生成表格列 -->
|
<el-table-column
|
v-for="column in tableColumns.slice(1)"
|
:key="column.prop"
|
:prop="column.prop"
|
:label="column.label"
|
:min-width="minColumnWidth"
|
>
|
<template #default="{ row }">
|
<span v-html="formatColumnContent(row, row[column.prop])"></span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, ref, onMounted, onUnmounted, watchEffect } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import ProjectInfo from '@/model/projectInfo'
|
|
import { getDefaultDate, getYesterdayDate, getStartAndEndOfWeek, getPreviousWeekDates } from '@/utils/dateUtils'
|
import ProjectDaily from '@/model/projectDaily'
|
|
export default {
|
components: {},
|
props: {},
|
setup(props, context) {
|
const windowWidth = ref(window.innerWidth)
|
const mainLayout = ref(null)
|
const searchSection = ref(null)
|
const tableHeight = ref(null)
|
|
// watchEffect(()=>{
|
// // 监听窗口大小变化
|
// windowWidth.value=window.innerWidth;
|
|
// console.log(windowWidth.value)
|
// });
|
|
const handleResize = () => {
|
windowWidth.value = window.innerWidth
|
console.log('窗口大小变化了')
|
console.log(windowWidth.value)
|
console.log('窗口的高度变化了')
|
console.log(window.innerHeight)
|
|
console.log('主体页面窗口变化了')
|
console.log(mainLayout.value.clientWidth)
|
console.log(mainLayout.value.clientHeight)
|
|
console.log('查询窗口变化了')
|
console.log(searchSection.value.clientWidth)
|
console.log(searchSection.value.clientHeight)
|
}
|
|
onMounted(() => {
|
window.addEventListener('resize', handleResize)
|
})
|
|
onUnmounted(() => {
|
window.removeEventListener('resize', handleResize)
|
})
|
|
const loading = ref(false)
|
const form = ref({})
|
|
const activeTab = ref('default')
|
const userList = ref([])
|
const firstColumnWidth = '80px'
|
const minColumnWidth = '350px'
|
const projectInfoArr = ref([])
|
|
const formData = reactive({
|
startDate: '',
|
endDate: '',
|
project_id: '',
|
create_user_id: '',
|
})
|
|
const tableColumns = ref([
|
{ label: '姓名', prop: 'name' },
|
{ label: '年龄', prop: 'age' },
|
// 其他列信息
|
])
|
|
const tableRows = ref([
|
{ name: 'Alice', age: 25 },
|
{ name: 'Bob', age: 30 },
|
// 其他行信息
|
])
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
onMounted(() => {
|
// 列出所有项目信息
|
// getDiaryPage()
|
loadDictDitems()
|
|
// 设置日志的默认时间为当天
|
// alert(getDefaultDate())
|
formData.startDate = getDefaultDate()
|
formData.endDate = getDefaultDate()
|
|
getDiaryBoardList()
|
})
|
|
/**
|
* 表格内容自动换行
|
*/
|
const formatColumnContent = (row, content) => {
|
if (content) {
|
return content.replace(/\n/g, '<br>')
|
}
|
return content
|
}
|
|
/**
|
* 表单规则验证
|
*/
|
const { rules } = getRules()
|
|
const getDiaryBoardList = async () => {
|
try {
|
tableColumns.value = []
|
tableRows.value = []
|
|
loading.value = true
|
const result = await ProjectDaily.getProjectDailyBoardList(formData)
|
// { label: '姓名', prop: 'name' },
|
// console.log(result)
|
|
const dateList = result.date_list
|
const tempTableColumns = []
|
tempTableColumns.push({ label: '用户', prop: 'user_name' })
|
|
for (let i = 0; i < dateList.length; i++) {
|
const tmp = dateList[i]
|
tempTableColumns.push({ label: tmp, prop: tmp })
|
}
|
tableColumns.value = tempTableColumns
|
|
const { result_list } = result
|
const tempTableRows = []
|
for (let i = 0; i < result_list.length; i++) {
|
const tmp = result_list[i]
|
tempTableRows.push(tmp)
|
}
|
|
tableRows.value = tempTableRows
|
|
// 赋值给用户列表
|
userList.value = result.user_list
|
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
if (error.code === 10020) {
|
tableData.value = []
|
}
|
}
|
}
|
|
const handleTabClick = tab => {
|
switch (tab.props.name) {
|
case 'default':
|
formData.startDate = getDefaultDate()
|
formData.endDate = getDefaultDate()
|
break
|
case 'today':
|
formData.startDate = getDefaultDate()
|
formData.endDate = getDefaultDate()
|
break
|
case 'yesterday':
|
formData.startDate = getYesterdayDate()
|
formData.endDate = getYesterdayDate()
|
break
|
case 'this_week':
|
const { startOfWeek, endOfWeek } = getStartAndEndOfWeek()
|
formData.startDate = startOfWeek
|
formData.endDate = endOfWeek
|
break
|
case 'last_week':
|
const { startDate, endDate } = getPreviousWeekDates()
|
|
formData.startDate = startDate
|
formData.endDate = endDate
|
break
|
}
|
|
getDiaryBoardList()
|
}
|
|
const startPickerOptions = {
|
disabledDate: time => {
|
if (formData.endDate) {
|
return time.getTime() > formData.endDate
|
}
|
return false
|
},
|
}
|
|
const endPickerOptions = {
|
disabledDate: time => {
|
if (formData.startDate) {
|
return time.getTime() < formData.startDate
|
}
|
return false
|
},
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const search = formName => {
|
form.value.validate(valid => {
|
if (valid) {
|
if (formData.startDate > formData.endDate) {
|
ElMessage.error('开始时间不能大于结束时间')
|
return
|
}
|
let res = {}
|
res = getDiaryBoardList()
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
// userList.value = await ProjectDaily.getAllUsers()
|
projectInfoArr.value = await ProjectInfo.getProjectInfoList('')
|
}
|
|
const handleCellClassName = ({ row, column, rowIndex, columnIndex }) => 'wrap-text'
|
|
return {
|
activeTab,
|
formData,
|
form,
|
rules,
|
tableColumns,
|
tableRows,
|
|
handleTabClick,
|
search,
|
resetForm,
|
userList,
|
|
startPickerOptions,
|
endPickerOptions,
|
|
formatColumnContent,
|
handleCellClassName,
|
|
firstColumnWidth,
|
minColumnWidth,
|
|
projectInfoArr,
|
|
windowWidth,
|
|
mainLayout,
|
searchSection,
|
tableHeight,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
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;
|
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;
|
}
|
</style>
|
