feat: 搜索布局第一版

src/components.d.ts

@@ -5,26 +5,29 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
+    copy: (typeof import("./components/s-layout-search/index copy.vue"))["default"];
-    RouterView: typeof import('vue-router')['RouterView']
+    "Index copy": (typeof import("./components/s-layout-search/index copy.vue"))["default"];
-    SBarcodeDraw: typeof import('./components/s-barcode-draw/index.vue')['default']
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
-    SCodeView: typeof import('./components/s-code-view/index.vue')['default']
+    RouterView: (typeof import("vue-router"))["RouterView"];
-    SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"]
+    SBarcodeDraw: (typeof import("./components/s-barcode-draw/index.vue"))["default"];
-    SExternalLinkPage: typeof import('./components/s-external-link-page/index.vue')['default']
+    SCodeView: (typeof import("./components/s-code-view/index.vue"))["default"];
-    SFoldPage: typeof import('./components/s-fold-page/index.vue')['default']
+    SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
-    SFullPage: typeof import('./components/s-full-page/index.vue')['default']
+    SExternalLinkPage: (typeof import("./components/s-external-link-page/index.vue"))["default"];
-    SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
+    SFoldPage: (typeof import("./components/s-fold-page/index.vue"))["default"];
-    SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
+    SFullPage: (typeof import("./components/s-full-page/index.vue"))["default"];
-    SLayoutTools: typeof import('./components/s-layout-tools/index.vue')['default']
+    SInternalLinkPage: (typeof import("./components/s-internal-link-page/index.vue"))["default"];
-    SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
+    SLangProvider: (typeof import("./components/s-lang-provider/index.vue"))["default"];
-    SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
+    SLayoutSearch: (typeof import("./components/s-layout-search/index.vue"))["default"];
-    SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
+    SLayoutTools: (typeof import("./components/s-layout-tools/index.vue"))["default"];
-    SRecorderPcm: typeof import('./components/s-recorder-pcm/index.vue')['default']
+    SMainTransition: (typeof import("./components/s-main-transition/index.vue"))["default"];
-    SSelectIcon: typeof import('./components/s-select-icon/index.vue')['default']
+    SPinyinPro: (typeof import("./components/s-pinyin-pro/index.vue"))["default"];
-    SSvgAndIcon: typeof import('./components/s-svg-and-icon/index.vue')['default']
+    SQrcodeDraw: (typeof import("./components/s-qrcode-draw/index.vue"))["default"];
-    SSvgIcon: typeof import('./components/s-svg-icon/index.vue')['default']
+    SRecorderPcm: (typeof import("./components/s-recorder-pcm/index.vue"))["default"];
-    SVerifyCode: typeof import('./components/s-verify-code/index.vue')['default']
+    SSelectIcon: (typeof import("./components/s-select-icon/index.vue"))["default"];
+    SSvgAndIcon: (typeof import("./components/s-svg-and-icon/index.vue"))["default"];
+    SSvgIcon: (typeof import("./components/s-svg-icon/index.vue"))["default"];
+    SVerifyCode: (typeof import("./components/s-verify-code/index.vue"))["default"];
   }
 }

src/components/s-layout-search/index copy.vue

@@ -0,0 +1,86 @@
+<template>
+  <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 class="row-center-gap">
+        <span class="text-nowrap">姓名</span>
+        <a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
+      </div>
+    </a-grid-item>
+    <a-grid-item>
+      <div class="row-center-gap">
+        <span class="text-nowrap">手机号</span>
+        <a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
+      </div>
+    </a-grid-item>
+    <a-grid-item>
+      <div class="row-center-gap">
+        <span class="text-nowrap">邮箱</span>
+        <a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
+      </div>
+    </a-grid-item>
+    <a-grid-item>
+      <div class="row-center-gap">
+        <span class="text-nowrap">状态</span>
+        <a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
+      </div>
+    </a-grid-item>
+    <a-grid-item>
+      <div class="row-center-gap">
+        <span class="text-nowrap">类型</span>
+        <a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
+      </div>
+    </a-grid-item>
+    <a-grid-item>
+      <div class="row-center-gap">
+        <span class="text-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 v-if="collapsed" />
+            <icon-up v-else />
+          </template>
+          <span>{{ collapsed ? "展开" : "收起" }}</span>
+        </a-button>
+      </a-space>
+    </a-grid-item>
+  </a-grid>
+</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>
+.row-center-gap {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  .text-nowrap {
+    white-space: nowrap;
+  }
+}
+</style>

src/components/s-layout-search/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
+    <slot name="form"></slot>
+    <a-grid-item suffix>
+      <a-space>
+        <a-button type="primary" @click="onSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          查询
+        </a-button>
+        <a-button @click="onReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          重置
+        </a-button>
+        <a-button type="text" @click="collapsed = !collapsed">
+          <template #icon>
+            <icon-down v-if="collapsed" />
+            <icon-up v-else />
+          </template>
+          <span>{{ collapsed ? "展开" : "收起" }}</span>
+        </a-button>
+      </a-space>
+    </a-grid-item>
+  </a-grid>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["search", "reset"]);
+const collapsed = ref<boolean>(true);
+
+const onSearch = () => emit("search");
+
+const onReset = () => emit("reset");
+</script>
+
+<style lang="scss" scoped></style>

src/views/component/common-layouts/head-page.vue

@@ -31,113 +31,41 @@
         </template>
       </s-layout-tools>
     </a-card>
-    <a-card title="搜索栏布局">
+    <a-card title="搜索栏布局-按钮沉底">
-      <a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
+      <s-layout-search @search="onSearch" @reset="onReset">
+        <template #form>
           <a-grid-item>
-          <div style="display: flex; column-gap: 12px; align-items: center">
+            <div class="row-center-gap">
-            <span style="white-space: nowrap">姓名</span>
+              <span class="text-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">
+            <div class="row-center-gap">
-            <span style="white-space: nowrap">邮箱</span>
+              <span class="text-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">
+            <div class="row-center-gap">
-            <span style="white-space: nowrap">状态</span>
+              <span class="text-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">
+            <div class="row-center-gap">
-            <span style="white-space: nowrap">类型</span>
+              <span class="text-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">
+            <div class="row-center-gap">
-            <span style="white-space: nowrap">机构</span>
+              <span class="text-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>
-              查询
+      </s-layout-search>
-            </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>
@@ -145,13 +73,25 @@
 <script setup lang="ts">
 const form = ref<any>({
   name: "",
-  phone: "",
+  age: null,
-  email: "",
+  select: null,
-  address: "",
+  adderss: "",
-  status: null
+  hobby: null,
+  date: "",
+  time: "",
+  gender: null,
+  score: null,
+  rate: null,
+  state: null,
+  multiple: null,
+  treeSelect: null
 });
-
+const onSearch = () => {
-const collapsed = ref<boolean>(false);
+  arcoMessage("success", "搜索");
+};
+const onReset = () => {
+  arcoMessage("success", "重置");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -160,4 +100,12 @@ const collapsed = ref<boolean>(false);
   align-items: center;
   justify-content: space-between;
 }
+.row-center-gap {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  .text-nowrap {
+    white-space: nowrap;
+  }
+}
 </style>