From 06e716834e877565bb636559593bab87b6932be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= Date: Tue, 30 Jan 2024 16:52:13 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/table/header/index.vue | 185 ++++++++---------- src/views/auth/menu/popupApi.vue | 2 +- src/views/auth/menu/popupMenu.vue | 4 +- src/views/govern/device/control/popup.vue | 2 +- .../govern/setting/statisticalType/add.vue | 2 +- .../dictionary/list/popupDetailEdit.vue | 4 +- .../setting/dictionary/list/popupEdit.vue | 4 +- src/views/setting/dictionary/tree/index.vue | 2 +- .../setting/dictionary/tree/popupForm.vue | 4 +- 9 files changed, 96 insertions(+), 113 deletions(-) diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue index 9f57055..8f8c54f 100644 --- a/src/components/table/header/index.vue +++ b/src/components/table/header/index.vue @@ -1,40 +1,48 @@ @@ -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(), { 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 - if (dom.offsetHeight > 50) { - showUnfoldButton.value = true - } + computedSearchRow() }) }) 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 }) @@ -164,59 +195,11 @@ defineExpose({ onComSearch, areaRef }) font-size: 14px; } -.table-com-search-form { - display: grid; - grid-gap: 20px; - grid-template-columns: repeat(5, 1fr); - - :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; - } +#header-form-second, +#header-form { + display: flex; + flex-wrap: wrap; + transition: all 0.3s; } .mlr-12 { diff --git a/src/views/auth/menu/popupApi.vue b/src/views/auth/menu/popupApi.vue index 2ebe565..bc5c3ae 100644 --- a/src/views/auth/menu/popupApi.vue +++ b/src/views/auth/menu/popupApi.vue @@ -52,7 +52,7 @@ const form: any = reactive({ name: '', path: '', type: 1, - sort: '', + sort: 100, remark: '' }) const rules = { diff --git a/src/views/auth/menu/popupMenu.vue b/src/views/auth/menu/popupMenu.vue index 9044889..a65efaf 100644 --- a/src/views/auth/menu/popupMenu.vue +++ b/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) { diff --git a/src/views/govern/device/control/popup.vue b/src/views/govern/device/control/popup.vue index 65fc9e1..776b6fa 100644 --- a/src/views/govern/device/control/popup.vue +++ b/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(null) diff --git a/src/views/govern/setting/statisticalType/add.vue b/src/views/govern/setting/statisticalType/add.vue index 690d8f4..4cdd758 100644 --- a/src/views/govern/setting/statisticalType/add.vue +++ b/src/views/govern/setting/statisticalType/add.vue @@ -43,7 +43,7 @@ const form = reactive({ name: '', code: '', remark: '', - sort: 0, + sort: 100, pid: '', id: '' }) diff --git a/src/views/setting/dictionary/list/popupDetailEdit.vue b/src/views/setting/dictionary/list/popupDetailEdit.vue index 1b51328..cb30019 100644 --- a/src/views/setting/dictionary/list/popupDetailEdit.vue +++ b/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 diff --git a/src/views/setting/dictionary/list/popupEdit.vue b/src/views/setting/dictionary/list/popupEdit.vue index 8eba2a1..712354d 100644 --- a/src/views/setting/dictionary/list/popupEdit.vue +++ b/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 () => { diff --git a/src/views/setting/dictionary/tree/index.vue b/src/views/setting/dictionary/tree/index.vue index 4e1713e..5a425e9 100644 --- a/src/views/setting/dictionary/tree/index.vue +++ b/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: '' diff --git a/src/views/setting/dictionary/tree/popupForm.vue b/src/views/setting/dictionary/tree/popupForm.vue index 5367ec8..ff64a61 100644 --- a/src/views/setting/dictionary/tree/popupForm.vue +++ b/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 }