表头修改

src/components/table/header/index.vue

@@ -1,40 +1,48 @@
 <template>
     <div ref="tableHeader" class="cn-table-header">
-        <!-- 通用搜索 -->
-        <transition name="el-zoom-in-bottom" mode="out-in">
-            <div id="table-com-search1" class="table-com-search" v-show="showSelect"></div>
-        </transition>
         <div class="table-header ba-scroll-style">
-            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
+            <el-form
-                <el-form
+                style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
-                    id="header-form"
+                id="header-form"
-                    @submit.prevent=""
+                @submit.prevent=""
-                    @keyup.enter="onComSearch"
+                @keyup.enter="onComSearch"
-                    label-position="left"
+                label-position="left"
-                    :inline="true"
+                :inline="true"
-                    class="table-com-search-form"
+            >
-                    :label-width="labelWidth"
+                <el-form-item label="区域" v-if="area">
-                >
+                    <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
-                    <el-form-item label="区域" v-if="area">
+                </el-form-item>
-                        <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
+                <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                    </el-form-item>
+                    <DatePicker ref="datePickerRef"></DatePicker>
-                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                </el-form-item>
-                        <DatePicker ref="datePickerRef"></DatePicker>
+                <slot name="select"></slot>
-                    </el-form-item>
+            </el-form>
-                    <slot name="select"></slot>
-                </el-form>
-            </div>
             <template v-if="$slots.select || datePicker">
+                <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
+                    <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" type="primary" :icon="Search">查询</el-button>
                 <el-button @click="onResetForm" :icon="RefreshLeft">重置</el-button>
-                <div class="table-search-button-group" v-if="showUnfoldButton">
-                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
-                        <Icon size="14" name="el-icon-Search" />
-                    </el-button>
-                </div>
             </template>
             <slot name="operation"></slot>
         </div>
+        <el-form
+            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            id="header-form-second"
+            @submit.prevent=""
+            @keyup.enter="onComSearch"
+            label-position="left"
+            :inline="true"
+        >
+            <el-form-item label="区域" v-if="area">
+                <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
+            </el-form-item>
+            <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <slot name="select"></slot>
+        </el-form>
     </div>
 </template>
 
@@ -52,7 +60,7 @@ const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
 const areaRef = ref()
-const labelWidth  = ref('')
+
 interface Props {
     datePicker?: boolean
     area?: boolean
@@ -66,9 +74,20 @@ const props = withDefaults(defineProps<Props>(), {
 const resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
         handlerHeight()
+        computedSearchRow()
     }
 })
 const showUnfoldButton = ref(false)
+const headerFormSecondStyleOpen = {
+    opacity: 1,
+    height: 'auto',
+    padding: '13px 15px'
+}
+const headerFormSecondStyleClose = {
+    opacity: 0,
+    height: '0',
+    padding: '0'
+}
 onMounted(() => {
     if (props.datePicker) {
         tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
@@ -82,10 +101,7 @@ onMounted(() => {
     }
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
-        const dom = document.getElementById('header-form') as HTMLElement
+        computedSearchRow()
-        if (dom.offsetHeight > 50) {
-            showUnfoldButton.value = true
-        }
     })
 })
 onUnmounted(() => {
@@ -97,20 +113,39 @@ const handlerHeight = () => {
         tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     ).height as string
 }
+const computedSearchRow = () => {
+    const headerForm = document.getElementById('header-form') as HTMLElement
+    const headerFormSecond = document.getElementById('header-form-second') as HTMLElement
+
+    // 判断是否需要折叠
+    if (headerForm.scrollHeight > 50) {
+        showUnfoldButton.value = true
+    } else {
+        showUnfoldButton.value = false
+    }
+
+    // 清空headerFormSecond下的元素
+    while (headerFormSecond.firstChild) {
+        headerFormSecond.removeChild(headerFormSecond.firstChild)
+    }
+
+    // 获取第一行放了几个表单
+    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as HTMLElement[]
+
+    //  把第一行放不下的复制一份放到headerFormSecond
+    let width = 0
+    for (let i = 0; i < elFormItem.length; i++) {
+        width += elFormItem[i].offsetWidth + 32
+        if (width > headerForm.offsetWidth) {
+            const clonedForm = elFormItem[i].cloneNode(true)
+            headerFormSecond.appendChild(clonedForm)
+        }
+    }
+}
+
 const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
-    // 把dom(id=header-form)插入到table-com-search1或者table-com-search2
-    const dom = document.getElementById('header-form') as HTMLElement
-    if (showSelect.value) {
-        labelWidth.value = '90'
-        const dom1 = document.getElementById('table-com-search1') as HTMLElement
-        dom1.appendChild(dom)
-    } else {
-        labelWidth.value = ''
-        const dom2 = document.getElementById('table-com-search2') as HTMLElement
-        dom2.appendChild(dom)
-    }
 }
 const onComSearch = async () => {
     if (props.datePicker) {
@@ -126,10 +161,6 @@ const onComSearch = async () => {
 const onResetForm = () => {
     tableStore.onTableAction('reset', {})
 }
-const dateChange = () => {
-    // tableStore.table.params.searchBeginTime = date.value[0]
-    // tableStore.table.params.searchEndTime = date.value[1]
-}
 defineExpose({ onComSearch, areaRef })
 </script>
 
@@ -164,59 +195,11 @@ defineExpose({ onComSearch, areaRef })
     font-size: 14px;
 }
 
-.table-com-search-form {
+#header-form-second,
-    display: grid;
+#header-form {
-    grid-gap: 20px;
+    display: flex;
-    grid-template-columns: repeat(5, 1fr);
+    flex-wrap: wrap;
-
+    transition: all 0.3s;
-    :deep(.el-select),
-    :deep(.el-cascader),
-    :deep(.el-input) {
-        width: 100%;
-    }
-
-    :deep(.el-form-item) {
-        max-width: 600px;
-        margin-right: 0;
-        margin-bottom: 0;
-    }
-}
-
-@media screen and (max-width: 2650px) {
-    .table-com-search-form {
-        grid-template-columns: repeat(6, 1fr);
-    }
-}
-
-@media screen and (max-width: 2300px) {
-    .table-com-search-form {
-        grid-template-columns: repeat(5, 1fr);
-    }
-}
-
-@media screen and (max-width: 1950px) {
-    .table-com-search-form {
-        grid-template-columns: repeat(4, 1fr);
-    }
-}
-
-@media screen and (max-width: 1600px) {
-    .table-com-search-form {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media screen and (max-width: 1300px) {
-    .table-com-search-form {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-#table-com-search2 {
-    .table-com-search-form {
-        display: flex;
-        flex-wrap: wrap;
-    }
 }
 
 .mlr-12 {

src/views/auth/menu/popupApi.vue

@@ -52,7 +52,7 @@ const form: any = reactive({
     name: '',
     path: '',
     type: 1,
-    sort: '',
+    sort: 100,
     remark: ''
 })
 const rules = {

src/views/auth/menu/popupMenu.vue

@@ -68,7 +68,7 @@ const form: any = reactive({
     pid: '0',
     remark: '',
     routeName: '',
-    sort: 0,
+    sort: 100,
     type: 0
 })
 
@@ -82,7 +82,7 @@ const open = (text: string, data: anyObj) => {
         form[key] = ''
     }
     form.pid = data.pid || '0'
-    form.sort = 0
+    form.sort = 100
     form.type = 0
 
     if (data.id) {

src/views/govern/device/control/popup.vue

@@ -29,7 +29,7 @@ const form: any = reactive({
     pid: '0',
     remark: '',
     routeName: '',
-    sort: 0,
+    sort: 100,
     type: 0
 })
 const echartsData = ref<any>(null)

src/views/govern/setting/statisticalType/add.vue

@@ -43,7 +43,7 @@ const form = reactive({
     name: '',
     code: '',
     remark: '',
-    sort: 0,
+    sort: 100,
     pid: '',
     id: ''
 })

src/views/setting/dictionary/list/popupDetailEdit.vue

@@ -67,7 +67,7 @@ const form = reactive({
     level: 0,
     name: '',
     value: '',
-    sort: 0,
+    sort: 100,
     typeId: '',
     openLevel: 0,
     openDescribe: 0,
@@ -111,7 +111,7 @@ const open = (text: string, data: anyObj) => {
             form[key] = ''
         }
         form.level = 0
-        form.sort = 0
+        form.sort = 100
         form.typeId = data.typeId
         form.openLevel = data.openLevel
         form.typeName = data.typeName

src/views/setting/dictionary/list/popupEdit.vue

@@ -85,7 +85,7 @@ const form = reactive({
     remark: '',
     name: '',
     code: '',
-    sort: 0,
+    sort: 100,
     id: ''
 })
 const rules = {
@@ -108,7 +108,7 @@ const open = (text: string, data?: anyObj) => {
         }
         form.openLevel = 0
         form.openDescribe = 0
-        form.sort = 0
+        form.sort = 100
     }
 }
 const submit = async () => {

src/views/setting/dictionary/tree/index.vue

@@ -63,7 +63,7 @@ const tableStore = new TableStore({
                             name: '',
                             code: '',
                             remark: '',
-                            sort: 0,
+                            sort: 100,
                             type: 0,
                             pid: row.id,
                             id: ''

src/views/setting/dictionary/tree/popupForm.vue

@@ -40,7 +40,7 @@ const form = reactive({
     name: '',
     code: '',
     remark: '',
-    sort: 0,
+    sort: 100,
     type: 0,
     pid: 0,
     id: ''
@@ -63,7 +63,7 @@ const open = (text: string, data?: anyObj) => {
         for (let key in form) {
             form[key] = ''
         }
-        form.sort = 0
+        form.sort = 100
         form.pid = 0
         form.type = 0
     }