冀北需求变更整改

src/components/table/header/index.vue

@@ -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 })