From ec79fa066983ef73462c65c0584a40cc6648fd55 Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Wed, 11 Jan 2023 18:26:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9ESearch=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/FormBuilder.vue |   2 +-
 src/components/Search/Item.vue      | 125 ++++++++++++++++++++++++++++
 src/components/Search/Search.vue    |  71 ++++++++++++++++
 src/components/Search/index.ts      |   3 +
 src/components/Search/util.ts       |   4 +
 src/components/index.ts             |   2 +
 src/router/index.ts                 |   8 +-
 src/router/menu.ts                  |   4 +
 src/views/demo/Form.vue             |   2 +-
 src/views/demo/Search.vue           |  15 ++++
 10 files changed, 233 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Search/Item.vue
 create mode 100644 src/components/Search/Search.vue
 create mode 100644 src/components/Search/index.ts
 create mode 100644 src/components/Search/util.ts
 create mode 100644 src/views/demo/Search.vue

diff --git a/src/components/Form/FormBuilder.vue b/src/components/Form/FormBuilder.vue
index cac91d0a..afcbfa2d 100644
--- a/src/components/Form/FormBuilder.vue
+++ b/src/components/Form/FormBuilder.vue
@@ -241,7 +241,7 @@ watch(props.initValue, (newValue: any) => {
 })
 
 defineExpose({
-  resetModel,
+  reset: resetModel,
   formValidate,
   setItemValue,
   setData
diff --git a/src/components/Search/Item.vue b/src/components/Search/Item.vue
new file mode 100644
index 00000000..6f44c425
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
new file mode 100644
index 00000000..a3908588
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Search/index.ts b/src/components/Search/index.ts
new file mode 100644
index 00000000..4edb3b21
--- /dev/null
+++ b/src/components/Search/index.ts
@@ -0,0 +1,3 @@
+import Search from './Search.vue'
+
+export default Search
\ No newline at end of file
diff --git a/src/components/Search/util.ts b/src/components/Search/util.ts
new file mode 100644
index 00000000..573b0d7d
--- /dev/null
+++ b/src/components/Search/util.ts
@@ -0,0 +1,4 @@
+export const typeOptions = [
+  { label: '或者', value: 'or' },
+  { label: '并且', value: 'and' },
+]
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index d3daf534..fb44f790 100644
--- a/src/components/index.ts
+++ b/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)
     }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 2da56030..389b7053 100644
--- a/src/router/index.ts
+++ b/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) {
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 525ac2e8..2fd19758 100644
--- a/src/router/menu.ts
+++ b/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 运维管理
diff --git a/src/views/demo/Form.vue b/src/views/demo/Form.vue
index cd585a77..41b6f7e0 100644
--- a/src/views/demo/Form.vue
+++ b/src/views/demo/Form.vue
@@ -21,7 +21,7 @@ const submit = () => {
 }
 
 const reset = () => {
-
+  form.value.reset()
 }
 
 const setValue =() => {
diff --git a/src/views/demo/Search.vue b/src/views/demo/Search.vue
new file mode 100644
index 00000000..e7445026
--- /dev/null
+++ b/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>
\ No newline at end of file