Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表头修改

Browse Source
This commit is contained in:
仲么了
2024-01-30 16:52:13 +08:00
parent 1a970f3e84
commit 06e716834e
9 changed files with 96 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/components/table/header/index.vue
View File

@@ -1,19 +1,13 @@
<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
style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
id="header-form"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
: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" />
@@ -23,18 +17,32 @@
</el-form-item>
<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
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 })
</script>
@@ -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 {
#header-form-second,
#header-form {
display: flex;
flex-wrap: wrap;
}
transition: all 0.3s;
}
.mlr-12 {

2
src/views/auth/menu/popupApi.vue
View File

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

4
src/views/auth/menu/popupMenu.vue
View File

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

2
src/views/govern/device/control/popup.vue
View File

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

2
src/views/govern/setting/statisticalType/add.vue
View File

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

4
src/views/setting/dictionary/list/popupDetailEdit.vue
View File

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

4
src/views/setting/dictionary/list/popupEdit.vue
View File

@@ -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 () => {

2
src/views/setting/dictionary/tree/index.vue
View File

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

4
src/views/setting/dictionary/tree/popupForm.vue
View File

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