联调前置数据补招接口

src/components/table/header/index.vue

@@ -1,16 +1,25 @@
 <template>
     <div ref="tableHeader" class="cn-table-header">
         <div class="table-header ba-scroll-style">
-            <el-form style="flex: 1; height: 28px;  display: flex; flex-wrap: wrap" ref="headerForm"
-                @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
-
+            <el-form
+                style="flex: 1; height: 28px; display: flex; flex-wrap: wrap"
+                ref="headerForm"
+                @submit.prevent=""
+                @keyup.enter="onComSearch"
+                label-position="left"
+                :inline="true"
+            >
                 <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>
+                    <DatePicker
+                        ref="datePickerRef"
+                        v-if="timeAll"
+                        :nextFlag="nextFlag"
+                        :theCurrentTime="theCurrentTime"
+                    ></DatePicker>
                 </el-form-item>
 
                 <el-form-item label="区域" v-if="area">
@@ -23,19 +32,43 @@
                     <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
                     <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
                 </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"
-                    :icon="RefreshLeft">重置</el-button>
-                <el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
-                    icon="el-icon-Download">导出</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"
+                    :icon="RefreshLeft"
+                >
+                    重置
+                </el-button>
+                <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>
-        <el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            ref="headerFormSecond" @submit.prevent="" @keyup.enter="onComSearch" label-position="left"
-            :inline="true"></el-form>
+        <el-form
+            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            ref="headerFormSecond"
+            @submit.prevent=""
+            @keyup.enter="onComSearch"
+            label-position="left"
+            :inline="true"
+        ></el-form>
     </div>
 </template>
 
@@ -48,7 +81,7 @@ import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
 import { Search, RefreshLeft } from '@element-plus/icons-vue'
 import { defineProps } from 'vue'
-const emit = defineEmits(['selectChange',])
+const emit = defineEmits(['selectChange'])
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
 const datePickerRef = ref()
@@ -66,7 +99,6 @@ interface Props {
     showReset?: boolean //是否显示重置按钮
     showExport?: boolean //导出控制
     showTimeAll?: boolean //控制时间是否显示
-
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -78,7 +110,6 @@ const props = withDefaults(defineProps<Props>(), {
     showReset: true,
     showExport: false,
     showTimeAll: false
-
 })
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -101,20 +132,19 @@ const headerFormSecondStyleClose = {
 
 watch(
     () => tableStore.table.params.deptIndex,
-    (newVal) => {
+    newVal => {
         setTimeout(() => {
-            areaRef.value.change()
-        }, 0);
+            areaRef.value && areaRef.value.change()
+        }, 0)
     }
 )
 watch(
     () => timeAll.value,
-    (newVal) => {
+    newVal => {
         tableStore.timeAll = newVal
-     setTimeout(() => {
-        computedSearchRow()
-     },500)
-
+        setTimeout(() => {
+            computedSearchRow()
+        }, 500)
     }
 )
 onMounted(() => {
@@ -131,9 +161,9 @@ onMounted(() => {
     }
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
-     setTimeout(() => {
-        computedSearchRow()
-     },500)
+        setTimeout(() => {
+            computedSearchRow()
+        }, 500)
     })
 })
 onUnmounted(() => {
@@ -147,30 +177,30 @@ 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)
-}
-// 获取第一行放了几个表单
-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 (!headerForm.value.$el) return
+    // 清空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')
 
-// 判断是否需要折叠
-if (headerFormSecond.value.$el.scrollHeight > 0) {
-    showUnfoldButton.value = true
-} else {
-    showUnfoldButton.value = false
-}
+    //  把第一行放不下的复制一份放到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)
@@ -179,7 +209,6 @@ const showSelectChange = () => {
     emit('selectChange', showSelect.value)
 }
 const onComSearch = async () => {
-
     if (props.datePicker && timeAll.value) {
         tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
         tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
@@ -206,7 +235,16 @@ const onExport = () => {
     tableStore.onTableAction('export', { showAllFlag: true })
 }
 
-defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow,onExport })
+defineExpose({
+    onComSearch,
+    areaRef,
+    setDatePicker,
+    setTheDate,
+    datePickerRef,
+    showSelectChange,
+    computedSearchRow,
+    onExport
+})
 </script>
 
 <style scoped lang="scss">
@@ -255,7 +293,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, s
     margin-left: 12px;
 }
 
-.mlr-12+.el-button {
+.mlr-12 + .el-button {
     margin-left: 12px;
 }
 
@@ -290,7 +328,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, s
         border-radius: 0;
     }
 
-    .el-button+.el-button {
+    .el-button + .el-button {
         margin: 0;
     }
 
@@ -301,7 +339,6 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, s
 
 html.dark {
     .table-search-button-group {
-
         button:focus,
         button:active {
             background-color: var(--el-color-info-dark-2);