@@@@@@

library/components/VabQueryForm/components/VabQueryFormBottomPanel.vue

@@ -0,0 +1,7 @@
+<template>
+  <el-col :span="24">
+    <div class="bottom-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>

library/components/VabQueryForm/components/VabQueryFormLeftPanel.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+    <div class="left-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  span: {
+    type: Number,
+    default: 14,
+  },
+})
+</script>

library/components/VabQueryForm/components/VabQueryFormRightPanel.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+    <div class="right-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  span: {
+    type: Number,
+    default: 10,
+  },
+})
+</script>

library/components/VabQueryForm/components/VabQueryFormTopPanel.vue

@@ -0,0 +1,7 @@
+<template>
+  <el-col :span="24">
+    <div class="top-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>

library/components/VabQueryForm/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-row class="vab-query-form" :gutter="0">
+    <slot></slot>
+  </el-row>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VabQueryForm',
+})
+</script>
+
+<style lang="scss" scoped>
+@mixin panel {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(-el-input-height);
+  margin: 0 0 calc(var(--el-margin) / 2) 0;
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
+  }
+
+  > .el-button {
+    margin: 0 10px calc(var(--el-margin) / 2) 0 !important;
+  }
+}
+
+.vab-query-form {
+  :deep() {
+    .el-input,
+    .el-select {
+      width: 175px;
+    }
+
+    .el-form-item:first-child {
+      margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
+    }
+
+    .el-form-item + .el-form-item {
+      margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
+
+      .el-button {
+        margin: 0 0 0 10px !important;
+      }
+    }
+
+    .top-panel {
+      @include panel;
+    }
+
+    .bottom-panel {
+      @include panel;
+      border-top: 1px solid #dcdfe6;
+    }
+
+    .left-panel {
+      @include panel;
+    }
+
+    .right-panel {
+      @include panel;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>