feat: 搜索栏布局
This commit is contained in:
WANGFan
parent
a893345f1e
commit
ca691461ea
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
@ -17,6 +17,7 @@ declare module 'vue' {
|
|||||||
SFullPage: typeof import('./components/s-full-page/index.vue')['default']
|
SFullPage: typeof import('./components/s-full-page/index.vue')['default']
|
||||||
SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
|
SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
|
||||||
SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
|
SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
|
||||||
|
SLayoutTools: typeof import('./components/s-layout-tools/index.vue')['default']
|
||||||
SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
|
SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
|
||||||
SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
|
SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
|
||||||
SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
|
SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
|
||||||
|
|||||||
20
src/components/s-layout-tools/index.vue
Normal file
20
src/components/s-layout-tools/index.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tools">
|
||||||
|
<a-space>
|
||||||
|
<slot name="left"> </slot>
|
||||||
|
</a-space>
|
||||||
|
<a-space>
|
||||||
|
<slot name="right"> </slot>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tools {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
src/views/component/common-layouts/head-page.vue
Normal file
163
src/views/component/common-layouts/head-page.vue
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<a-space direction="vertical" fill size="medium">
|
||||||
|
<a-card title="头部工具栏">
|
||||||
|
<s-layout-tools>
|
||||||
|
<template #left>
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-plus />
|
||||||
|
</template>
|
||||||
|
新增
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" status="danger">
|
||||||
|
<template #icon>
|
||||||
|
<icon-delete />
|
||||||
|
</template>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<a-input-search :style="{ width: '200px' }" placeholder="请输入关键字" search-button />
|
||||||
|
<a-button type="primary" status="success">
|
||||||
|
<template #icon>
|
||||||
|
<icon-download />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</s-layout-tools>
|
||||||
|
</a-card>
|
||||||
|
<a-card title="搜索栏布局">
|
||||||
|
<a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">姓名</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">手机号</span>
|
||||||
|
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">邮箱</span>
|
||||||
|
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">状态</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">类型</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||||
|
<span style="white-space: nowrap">机构</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入机构" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item suffix>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button>
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" @click="collapsed = !collapsed">
|
||||||
|
<template #icon>
|
||||||
|
<icon-down />
|
||||||
|
</template>
|
||||||
|
<span>展开</span>
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-grid-item>
|
||||||
|
</a-grid>
|
||||||
|
<!-- <a-row :gutter="12">
|
||||||
|
<a-col flex="auto">
|
||||||
|
<a-grid :cols="3" :colGap="12">
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; align-items: center; column-gap: 12px">
|
||||||
|
<span style="white-space: nowrap">姓名</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; align-items: center; column-gap: 12px">
|
||||||
|
<span style="white-space: nowrap">手机号</span>
|
||||||
|
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div style="display: flex; align-items: center; column-gap: 12px">
|
||||||
|
<span style="white-space: nowrap">邮箱</span>
|
||||||
|
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
</a-grid>
|
||||||
|
</a-col>
|
||||||
|
<a-col flex="none">
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button>
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text">
|
||||||
|
<template #icon>
|
||||||
|
<icon-down />
|
||||||
|
</template>
|
||||||
|
<span>展开</span>
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
</a-row> -->
|
||||||
|
</a-card>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const form = ref<any>({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
address: "",
|
||||||
|
status: null
|
||||||
|
});
|
||||||
|
|
||||||
|
const collapsed = ref<boolean>(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tools-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,13 +2,16 @@
|
|||||||
<s-full-page>
|
<s-full-page>
|
||||||
<s-fold-page v-model:width="siderWidth">
|
<s-fold-page v-model:width="siderWidth">
|
||||||
<template #sider>
|
<template #sider>
|
||||||
<a-menu :style="{ width: '100%', height: '100%' }" :selected-keys="[currentMenu]">
|
<a-menu :style="{ width: '100%', height: '100%' }" :selected-keys="[currentMenu]" @menu-item-click="onMenuItem">
|
||||||
<a-menu-item v-for="item in menuData" :key="item.id">{{ item.title }}</a-menu-item>
|
<a-menu-item v-for="item in menuData" :key="item.id">{{ item.title }}</a-menu-item>
|
||||||
</a-menu>
|
</a-menu>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="content">
|
<div class="content" v-if="currentMenu == 1">
|
||||||
<FoldPage v-if="currentMenu == 1" />
|
<head-page />
|
||||||
|
</div>
|
||||||
|
<div class="content" v-if="currentMenu == 2">
|
||||||
|
<fold-page />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</s-fold-page>
|
</s-fold-page>
|
||||||
@ -17,13 +20,20 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import FoldPage from "@/views/component/common-layouts/fold-page.vue";
|
import FoldPage from "@/views/component/common-layouts/fold-page.vue";
|
||||||
|
import HeadPage from "@/views/component/common-layouts/head-page.vue";
|
||||||
interface MenuData {
|
interface MenuData {
|
||||||
id: number;
|
id: number;
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
const siderWidth = ref<number>(250);
|
const siderWidth = ref<number>(250);
|
||||||
const menuData = ref<MenuData[]>([{ id: 1, title: "可折叠布局" }]);
|
const menuData = ref<MenuData[]>([
|
||||||
|
{ id: 1, title: "头部布局" },
|
||||||
|
{ id: 2, title: "可折叠布局" }
|
||||||
|
]);
|
||||||
const currentMenu = ref<number>(1);
|
const currentMenu = ref<number>(1);
|
||||||
|
const onMenuItem = (e: number) => {
|
||||||
|
currentMenu.value = e;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user