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

修改页面样式

Browse Source
This commit is contained in:
GGJ
2024-01-05 13:56:33 +08:00
parent b2c3df56dc
commit b65691e062
11 changed files with 135 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,42 +1,41 @@
<template>
<div ref='tableHeader' class='cn-table-header'>
<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 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'>
<div class="table-header ba-scroll-style">
<div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
<el-form
id='header-form'
@submit.prevent=''
@keyup.enter='onComSearch'
label-position='left'
:inline='true'
class='table-com-search-form'
:label-width='90'
id="header-form"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
:inline="true"
class="table-com-search-form"
:label-width="90"
>
<el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'>
<DatePicker ref='Picker'></DatePicker>
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
<DatePicker ref="Picker"></DatePicker>
</el-form-item>
<slot name='select'></slot>
<slot name="select"></slot>
</el-form>
</div>
<template v-if='$slots.select'>
<el-button @click='onComSearch' type='primary'>查询</el-button>
<el-button @click='onResetForm'>重置</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' />
<template v-if="$slots.select">
<el-button @click="onComSearch" type="primary">查询</el-button>
<el-button @click="onResetForm">重置</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>
<slot name="operation"></slot>
</div>
</div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
import type TableStore from '@/utils/tableStore'
import DatePicker from '@/components/form/datePicker/index.vue'
@@ -69,8 +68,11 @@ const resizeObserver = new ResizeObserver(entries => {
})
const showUnfoldButton = ref(false)
onMounted(() => {
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
if (props.datePicker) {
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
tableStore.table.params.timeFlag = Picker.value.timeFlag
}
nextTick(() => {
resizeObserver.observe(tableHeader.value)
const dom = document.getElementById('header-form') as HTMLElement
@@ -102,10 +104,12 @@ const showSelectChange = () => {
}
}
const onComSearch = async () => {
console.log('时间1233123')
if (props.datePicker) {
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
tableStore.table.params.timeFlag = Picker.value.timeFlag
}
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
await tableStore.onTableAction('search', {})
}
const onResetForm = () => {
@@ -117,7 +121,7 @@ const dateChange = () => {
}
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.table-header {
position: relative;
overflow-x: auto;
@@ -148,7 +152,7 @@ const dateChange = () => {
font-size: 14px;
}
.table-com-search-form{
.table-com-search-form {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(5, 1fr);