test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-11 01:23:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

重构 SearchBar 组件

Browse Source
This commit is contained in:
Hooray Hu 2023-04-19 16:36:25 +08:00
parent a6c46ea7d4
commit f0b1551530
2 changed files with 462 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/SearchBar/index.vue
View File

@ -1,40 +1,48 @@
<script lang="ts" setup name="SearchBar">
const props = defineProps({
showMore: {
fold: {
type: Boolean,
default: false,
default: true,
},
unfold: {
showToggle: {
type: Boolean,
default: true,
},
background: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['toggle'])
const emit = defineEmits<{
(event: 'update:fold', value: boolean): void
(event: 'toggle', value: boolean): void
}>()
const isUnfold = ref(!props.unfold)
const isFold = ref(props.fold)
watch(() => props.unfold, () => toggle(), {
immediate: true,
watch(() => props.fold, (value) => {
isFold.value = value
emit('update:fold', value)
})
function toggle() {
isUnfold.value = !isUnfold.value
emit('toggle', isUnfold.value)
isFold.value = !isFold.value
emit('toggle', isFold.value)
}
</script>
<template>
<div class="search-container">
<slot />
<div v-if="showMore" class="more">
<div class="search-container" :class="{ 'has-bg': background }">
<slot :fold="isFold" />
<div v-if="showToggle" class="toggle">
<el-button text size="small" @click="toggle">
<template #icon>
<el-icon>
<svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
<svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
</el-icon>
</template>
{{ isUnfold ? '收起' : '展开' }}
{{ isFold ? '展开' : '收起' }}
</el-button>
</div>
</div>
@ -43,17 +51,11 @@ function toggle() {
<style lang="scss" scoped>
.search-container {
position: relative;
margin: 20px 0;
padding: 20px;
background-color: var(--el-fill-color-lighter);
transition: background-color 0.3s;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
&.has-bg {
padding: 20px;
background-color: var(--el-fill-color-lighter);
transition: background-color 0.3s;
}
:deep(.el-form) {
@ -68,7 +70,7 @@ function toggle() {
}
}
.more {
.toggle {
position: relative;
text-align: center;
margin-bottom: -10px;

565
src/views/component_extend_example/searchbar.demo.vue
View File

@ -4,6 +4,8 @@ meta:
</route>
<script lang="ts" setup name="ComponentExampleSearchbar">
import { ElMessage } from 'element-plus'
const search = ref({
name: '',
department_id: '',
@ -12,146 +14,449 @@ const search = ref({
check1: true,
check2: false,
})
const searchMore = ref(false)
const searchMore2 = ref(false)
const isFold = ref(false)
const isFold2 = ref(true)
const isFold3 = ref(true)
function toggle(fold: boolean) {
ElMessage({
message: fold ? '收起' : '展开',
})
}
</script>
<template>
<div>
<page-header title="搜索面板" content="SearchBar" />
<page-main>
<search-bar show-more @toggle="searchMore = $event">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item v-auth="'supplay.department.browse'" label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.department_job.browse'" label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.role.browse'" label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="searchMore">
<el-col :span="24">
<el-form-item label="角色">
<el-checkbox :value="true">
备选项
</el-checkbox>
<el-checkbox :value="false">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
<search-bar>
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="6">
<el-form-item label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="24">
<el-form-item label="角色">
<el-checkbox :value="true">
备选项
</el-checkbox>
<el-checkbox :value="false">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
</template>
</search-bar>
</page-main>
<page-main title="默认展开">
<search-bar show-more unfold @toggle="searchMore2 = $event">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item v-auth="'supplay.department.browse'" label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.department_job.browse'" label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.role.browse'" label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="searchMore2">
<el-col :span="24">
<el-form-item label="角色">
<el-checkbox v-model="search.check1">
备选项
</el-checkbox>
<el-checkbox v-model="search.check2">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
<search-bar :fold="isFold">
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="6">
<el-form-item label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="24">
<el-form-item label="复选框">
<el-checkbox v-model="search.check1">
备选项
</el-checkbox>
<el-checkbox v-model="search.check2">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
</template>
</search-bar>
</page-main>
<page-main title="显示背景">
<search-bar background>
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="6">
<el-form-item label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="24">
<el-form-item label="复选框">
<el-checkbox :value="true">
备选项
</el-checkbox>
<el-checkbox :value="false">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
</template>
</search-bar>
</page-main>
<page-main title="切换事件">
<search-bar @toggle="toggle">
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="6">
<el-form-item label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="!fold">
<el-col :span="24">
<el-form-item label="复选框">
<el-checkbox :value="true">
备选项
</el-checkbox>
<el-checkbox :value="false">
备选项
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button>导出</el-button>
<el-button type="primary" link>
查看已导出记录
</el-button>
</el-form-item>
</el-form>
</template>
</search-bar>
</page-main>
<page-main title="自定义切换按钮（搭配自定义 flex 布局）">
<search-bar :fold="isFold2" :show-toggle="false">
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px" inline class="search-form">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
<el-form-item v-show="!fold" label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
<el-form-item v-show="!fold" label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
<el-form-item v-show="!fold" label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
<el-form-item v-show="!fold" label="复选框">
<el-checkbox v-model="search.check1">
备选项
</el-checkbox>
<el-checkbox v-model="search.check2">
备选项
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button link @click="isFold2 = !fold">
<template #icon>
<el-icon>
<svg-icon :name="fold ? 'ep:caret-bottom' : 'ep:caret-top' " />
</el-icon>
</template>
{{ fold ? '展开' : '收起' }}
</el-button>
</el-form-item>
</el-form>
</template>
</search-bar>
</page-main>
<page-main title="自定义切换按钮（搭配 el-row 组件）">
<search-bar :fold="isFold3" :show-toggle="false">
<template #default="{ fold }">
<el-form :model="search" size="default" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
<el-col v-show="!fold" :span="6">
<el-form-item label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col v-show="!fold" :span="6">
<el-form-item label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col v-show="!fold" :span="6">
<el-form-item label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col v-show="!fold" :span="6">
<el-form-item label="复选框">
<el-checkbox v-model="search.check1">
备选项
</el-checkbox>
<el-checkbox v-model="search.check2">
备选项
</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="6" :offset="6">
<el-form-item label-width="0" class="action-box">
<el-button type="primary">
<template #icon>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
</template>
筛选
</el-button>
<el-button link @click="isFold3 = !fold">
<template #icon>
<el-icon>
<svg-icon :name="fold ? 'epcaret-bottom' : 'ep:caret-top' " />
</el-icon>
</template>
{{ fold ? '展开' : '收起' }}
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</search-bar>
</page-main>
</div>
</template>
<style lang="scss" scoped>
.search-form {
display: flex;
flex-wrap: wrap;
:deep(.el-form-item) {
width: calc(25% - 32px);
&:last-child {
margin-left: auto;
.el-form-item__content {
justify-content: flex-end;
}
}
}
}
.action-box {
:deep(.el-form-item__content) {
justify-content: flex-end;
}
}
</style>