feat: 新增Search组件

src/components/Form/FormBuilder.vue

@@ -241,7 +241,7 @@ watch(props.initValue, (newValue: any) => {
 })
 
 defineExpose({
-  resetModel,
+  reset: resetModel,
   formValidate,
   setItemValue,
   setData

src/components/Search/Item.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class='JSearch-item'>
+    <div class='JSearch-item--type'>
+      <a-select
+        v-if='index !== 1 && index !== 4'
+        :options='typeOptions'
+        v-model:value='termsModel.type'
+        style='width: 100%;'
+      />
+      <span v-else>
+        {{
+          index === 1 ? '第一组' : '第二组'
+        }}
+      </span>
+    </div>
+    <a-select
+      class='JSearch-item--column'
+      :options='columnOptions'
+      v-model:value='termsModel.column'
+    />
+    <a-select
+      class='JSearch-item--termType'
+      :options='termTypeOptions'
+      v-model:value='termsModel.termType'
+    />
+    <div class='JSearch-item--value'>
+      <a-input
+        v-if='component === componentType.input'
+        v-model:value='termsModel.value'
+      />
+      <a-select
+        v-else-if='component === componentType.select'
+        v-model:value='termsModel.value'
+        :options='options'
+      />
+      <a-inputnumber
+        v-else-if='component === componentType.inputNumber'
+        v-model:value='termsModel.value'
+      />
+      <a-input-password
+        v-else-if='component === componentType.password'
+        v-model:value='termsModel.value'
+      />
+      <a-switch
+        v-else-if='component === componentType.switch'
+        v-model:checked='termsModel.value'
+      />
+      <a-radio-group
+        v-else-if='component === componentType.radio'
+        v-model:value='termsModel.value'
+      />
+      <a-checkbox-group
+        v-else-if='component === componentType.checkbox'
+        v-model:value='termsModel.value'
+        :options='options'
+      />
+      <a-time-picker
+        v-else-if='component === componentType.time'
+        v-model:value='termsModel.value'
+      />
+      <a-date-picker
+        v-else-if='component === componentType.date'
+        v-model:value='termsModel.value'
+      />
+      <a-tree-select
+        v-else-if='component === componentType.tree'
+        v-model:value='termsModel.value'
+        :tree-data='options'
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='SearchItem'>
+import { componentType } from 'components/Form'
+import { typeOptions } from './util'
+
+const props = defineProps({
+  component: {
+    type: String,
+    default: componentType.input
+  },
+  index: {
+    type: Number,
+    default: 1
+  }
+})
+
+const termsModel = reactive({})
+
+const options = ref([])
+
+const columnOptions = reactive([])
+
+const termTypeOptions = reactive([])
+
+
+</script>
+
+<style scoped lang='less'>
+.JSearch-item {
+  display: flex;
+  gap: 16px;
+
+  .JSearch-item--type {
+    min-width: 120px;
+    > span {
+      line-height: 34px;
+      font-weight: bold;
+    }
+  }
+
+  .JSearch-item--column {
+    min-width: 120px;
+  }
+
+  .JSearch-item--termType {
+    min-width: 120px;
+  }
+
+  .JSearch-item--value {
+    flex: 1 1 auto;
+  }
+}
+</style>

src/components/Search/Search.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class='JSearch-content'>
+    <div class='left'>
+      <SearchItem :index='1' />
+      <SearchItem :index='2' />
+      <SearchItem :index='3' />
+    </div>
+    <div class='center'>
+      <a-select
+        :options='typeOptions'
+      />
+    </div>
+    <div class='right'>
+      <SearchItem :index='4' />
+      <SearchItem :index='5' />
+      <SearchItem :index='6' />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='Search'>
+import SearchItem from './Item.vue'
+import { typeOptions } from './util'
+
+const props = defineProps({
+  defaultParams: {
+    type: Object,
+    default: () => ({})
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  type: {
+    type: String,
+    default: 'advanced'
+  },
+  key: {
+    type: String,
+    default: '',
+    required: true
+  }
+})
+
+const searchParams = reactive({
+  data: {}
+})
+
+</script>
+
+<style scoped lang='less'>
+.JSearch-content {
+  display: flex;
+  gap: 16px;
+  .left, & .right {
+    display: flex;
+    gap: 16px;
+    flex-direction: column;
+    width: 0;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-basis: 120px;
+  }
+}
+</style>

src/components/Search/index.ts

@@ -0,0 +1,3 @@
+import Search from './Search.vue'
+
+export default Search

src/components/Search/util.ts

@@ -0,0 +1,4 @@
+export const typeOptions = [
+  { label: '或者', value: 'or' },
+  { label: '并且', value: 'and' },
+]

src/components/index.ts

@@ -5,6 +5,7 @@ import JTable from './Table/index.vue'
 import TitleComponent from "./TitleComponent/index.vue";
 import Form from './Form';
 import CardBox from './CardBox/index.vue';
+import Search from './Search'
 
 export default  {
     install(app: App) {
@@ -14,5 +15,6 @@ export default  {
             .component('TitleComponent', TitleComponent)
             .component('Form', Form)
             .component('CardBox', CardBox)
+            .component('Search', Search)
     }
 }

src/router/index.ts

@@ -8,9 +8,15 @@ const router = createRouter({
     routes: menus
 })
 
+const filterPath = [
+  '/form',
+  '/search'
+]
+
 router.beforeEach((to, from, next) => {
     const token = LocalStore.get(TOKEN_KEY)
-    if (token) {
+
+    if (token || filterPath.includes(to.path)) {
         next()
     } else {
         if (to.path === LoginPath) {

src/router/menu.ts

@@ -44,6 +44,10 @@ export default [
         path: '/form',
         component: () => import('@/views/demo/Form.vue')
     },
+    {
+        path: '/search',
+        component: () => import('@/views/demo/Search.vue')
+    },
     // end: 测试用, 可删除
 
     // link 运维管理

src/views/demo/Form.vue

@@ -21,7 +21,7 @@ const submit = () => {
 }
 
 const reset = () => {
-
+  form.value.reset()
 }
 
 const setValue =() => {

src/views/demo/Search.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class='search'>
+    <Search />
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+.search {
+  width: calc(100% - 330px);
+}
+</style>