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
}