|
|
|
|
@@ -3,8 +3,14 @@
|
|
|
|
|
<div class="table-header ba-scroll-style">
|
|
|
|
|
<el-form style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap" ref="headerForm"
|
|
|
|
|
@submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
|
|
|
|
|
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
|
|
|
|
|
<DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
|
|
|
|
|
|
|
|
|
|
<el-form-item v-if="datePicker" style="grid-column: span 2; max-width: 590px">
|
|
|
|
|
<template #label>
|
|
|
|
|
<el-checkbox v-if="showTimeAll" v-model="timeAll" label="时间" />
|
|
|
|
|
<span v-else>时间</span>
|
|
|
|
|
</template>
|
|
|
|
|
<DatePicker ref="datePickerRef" v-if="timeAll" :nextFlag="nextFlag"
|
|
|
|
|
:theCurrentTime="theCurrentTime"></DatePicker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="区域" v-if="area">
|
|
|
|
|
@@ -19,11 +25,11 @@
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="onComSearch" v-if="showSearch" :loading="tableStore.table.loading" type="primary"
|
|
|
|
|
:icon="Search">查询</el-button>
|
|
|
|
|
<el-button @click="onResetForm" v-if="showSearch && showReset" :loading="tableStore.table.loading"
|
|
|
|
|
<el-button @click="onResetForm" v-if="showSearch && showReset" :loading="tableStore.table.loading"
|
|
|
|
|
:icon="RefreshLeft">重置</el-button>
|
|
|
|
|
<el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
|
|
|
|
|
<el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
|
|
|
|
|
icon="el-icon-Download">导出</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<slot name="operation"></slot>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -34,7 +40,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { inject, ref, onMounted, nextTick, onUnmounted,watch } from 'vue'
|
|
|
|
|
import { inject, ref, onMounted, nextTick, onUnmounted, watch } from 'vue'
|
|
|
|
|
import type TableStore from '@/utils/tableStore'
|
|
|
|
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
|
|
|
import Area from '@/components/form/area/index.vue'
|
|
|
|
|
@@ -50,7 +56,7 @@ const dictData = useDictData()
|
|
|
|
|
const areaRef = ref()
|
|
|
|
|
const headerForm = ref()
|
|
|
|
|
const headerFormSecond = ref()
|
|
|
|
|
|
|
|
|
|
const timeAll = ref(true)
|
|
|
|
|
interface Props {
|
|
|
|
|
datePicker?: boolean
|
|
|
|
|
area?: boolean
|
|
|
|
|
@@ -59,6 +65,7 @@ interface Props {
|
|
|
|
|
theCurrentTime?: boolean //控制时间前3天展示上个月时间
|
|
|
|
|
showReset?: boolean //控制时间前3天展示上个月时间
|
|
|
|
|
showExport?: boolean //导出控制
|
|
|
|
|
showTimeAll?: boolean //控制时间是否显示
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -69,7 +76,9 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
nextFlag: false,
|
|
|
|
|
theCurrentTime: false,
|
|
|
|
|
showReset: true,
|
|
|
|
|
showExport:false
|
|
|
|
|
showExport: false,
|
|
|
|
|
showTimeAll: false
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
// 动态计算table高度
|
|
|
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
|
|
|
@@ -89,6 +98,7 @@ const headerFormSecondStyleClose = {
|
|
|
|
|
height: '0',
|
|
|
|
|
padding: '0'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => tableStore.table.params.deptIndex,
|
|
|
|
|
(newVal) => {
|
|
|
|
|
@@ -97,8 +107,19 @@ watch(
|
|
|
|
|
}, 0);
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => timeAll.value,
|
|
|
|
|
(newVal) => {
|
|
|
|
|
tableStore.timeAll = newVal
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
computedSearchRow()
|
|
|
|
|
},500)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
if (props.datePicker) {
|
|
|
|
|
timeAll.value = props.showTimeAll ? false : true
|
|
|
|
|
if (props.datePicker && timeAll.value) {
|
|
|
|
|
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
|
|
|
|
|
tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
|
|
|
|
|
tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
|
|
|
|
|
@@ -123,30 +144,34 @@ const handlerHeight = () => {
|
|
|
|
|
).height as string
|
|
|
|
|
}
|
|
|
|
|
const computedSearchRow = () => {
|
|
|
|
|
if (!headerForm.value.$el) return
|
|
|
|
|
|
|
|
|
|
// 清空headerFormSecond.value.$el下的元素
|
|
|
|
|
while (headerFormSecond.value.$el.firstChild) {
|
|
|
|
|
headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
|
|
|
|
|
}
|
|
|
|
|
if (!headerForm.value.$el) return
|
|
|
|
|
|
|
|
|
|
// 获取第一行放了几个表单
|
|
|
|
|
const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
|
|
|
|
|
// 把第一行放不下的复制一份放到headerFormSecond.value.$el
|
|
|
|
|
let width = 0
|
|
|
|
|
for (let i = 0; i < elFormItem.length; i++) {
|
|
|
|
|
width += elFormItem[i].offsetWidth + 32
|
|
|
|
|
if (width > headerForm.value.$el.offsetWidth) {
|
|
|
|
|
headerFormSecond.value.$el.appendChild(elFormItem[i])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 判断是否需要折叠
|
|
|
|
|
if (headerFormSecond.value.$el.scrollHeight > 0) {
|
|
|
|
|
showUnfoldButton.value = true
|
|
|
|
|
} else {
|
|
|
|
|
showUnfoldButton.value = false
|
|
|
|
|
// 清空headerFormSecond.value.$el下的元素
|
|
|
|
|
while (headerFormSecond.value.$el.firstChild) {
|
|
|
|
|
headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取第一行放了几个表单
|
|
|
|
|
const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
|
|
|
|
|
|
|
|
|
|
// 把第一行放不下的复制一份放到headerFormSecond.value.$el
|
|
|
|
|
let width = 0
|
|
|
|
|
for (let i = 0; i < elFormItem.length; i++) {
|
|
|
|
|
width += elFormItem[i].offsetWidth + 32
|
|
|
|
|
if (width > headerForm.value.$el.offsetWidth) {
|
|
|
|
|
headerFormSecond.value.$el.appendChild(elFormItem[i])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 判断是否需要折叠
|
|
|
|
|
if (headerFormSecond.value.$el.scrollHeight > 0) {
|
|
|
|
|
showUnfoldButton.value = true
|
|
|
|
|
} else {
|
|
|
|
|
showUnfoldButton.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const showSelect = ref(false)
|
|
|
|
|
@@ -154,7 +179,7 @@ const showSelectChange = () => {
|
|
|
|
|
showSelect.value = !showSelect.value
|
|
|
|
|
}
|
|
|
|
|
const onComSearch = async () => {
|
|
|
|
|
if (props.datePicker) {
|
|
|
|
|
if (props.datePicker && timeAll.value) {
|
|
|
|
|
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
|
|
|
|
|
tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
|
|
|
|
|
tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
|
|
|
|
|
@@ -177,7 +202,7 @@ const setTheDate = (val: any) => {
|
|
|
|
|
}
|
|
|
|
|
// 导出
|
|
|
|
|
const onExport = () => {
|
|
|
|
|
tableStore.onTableAction('export', {showAllFlag:true})
|
|
|
|
|
tableStore.onTableAction('export', { showAllFlag: true })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange })
|
|
|
|
|
|