From 1e395953604b5381224a9cb8774e802ab101f36c Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Mon, 16 Jan 2023 11:05:17 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E4=BC=98=E5=8C=96Search=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6options=E5=A4=84=E7=90=86?=
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      | 70 +++++++++++++++++++++++++----
 src/components/Search/Search.vue    |  2 +-
 src/views/demo/Search.vue           | 43 +++++++++++++++++-
 4 files changed, 104 insertions(+), 13 deletions(-)

diff --git a/src/components/Form/FormBuilder.vue b/src/components/Form/FormBuilder.vue
index afcbfa2d..e93696d7 100644
--- a/src/components/Form/FormBuilder.vue
+++ b/src/components/Form/FormBuilder.vue
@@ -31,7 +31,7 @@
               v-model:value='formData.data[item.name]'
               :options='item.options'
             />
-            <a-inputnumber
+            <a-input-number
               v-else-if='item.component === componentType.inputNumber'
               v-bind='item.componentProps'
               v-model:value='formData.data[item.name]'
diff --git a/src/components/Search/Item.vue b/src/components/Search/Item.vue
index bc3e5c70..9fad5b5f 100644
--- a/src/components/Search/Item.vue
+++ b/src/components/Search/Item.vue
@@ -27,54 +27,64 @@
       <a-input
         v-if='component === componentType.input'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-select
         v-else-if='component === componentType.select'
         v-model:value='termsModel.value'
         :options='options'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
-      <a-inputnumber
+      <a-input-number
         v-else-if='component === componentType.inputNumber'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-input-password
         v-else-if='component === componentType.password'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-switch
         v-else-if='component === componentType.switch'
         v-model:checked='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-radio-group
         v-else-if='component === componentType.radio'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-checkbox-group
         v-else-if='component === componentType.checkbox'
         v-model:value='termsModel.value'
         :options='options'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-time-picker
         v-else-if='component === componentType.time'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-date-picker
         v-else-if='component === componentType.date'
         v-model:value='termsModel.value'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
       <a-tree-select
-        v-else-if='component === componentType.tree'
+        v-else-if='component === componentType.treeSelect'
         v-model:value='termsModel.value'
         :tree-data='options'
+        style='width: 100%'
         @change='(v) => valueChange(v)'
       />
     </div>
@@ -85,11 +95,13 @@
 import { componentType } from 'components/Form'
 import { typeOptions, termType } from './util'
 import { PropType } from 'vue'
-import type { SearchItemProps, SearchItemData } from './types'
-import { cloneDeep } from 'lodash-es'
+import type { SearchItemProps, SearchItemData, SearchProps } from './types'
+import { cloneDeep, isArray, isFunction } from 'lodash-es'
 
 type ItemDataProps = Omit<SearchItemData, 'title'>
 
+type ItemType = SearchProps['type']
+
 interface Emit {
   (e: 'change', data: ItemDataProps): void
 }
@@ -121,14 +133,14 @@ const termsModel = reactive<ItemDataProps>({
 
 const component = ref(componentType.input)
 
-const options = ref([])
+const options = ref<any[]>([])
 
 const columnOptions = ref<({ label: string, value: string})[]>([])
 const columnOptionMap = new Map()
 
 const termTypeOptions = reactive(termType)
 
-const getTermType = (type: string) => {
+const getTermType = (type?: ItemType) => {
   switch (type) {
     case 'select':
     case 'treeSelect':
@@ -141,13 +153,46 @@ const getTermType = (type: string) => {
   }
 }
 
+const getComponent = (type?: ItemType) => {
+  switch (type) {
+    case 'select':
+      component.value = componentType.select
+      break;
+    case 'treeSelect':
+      component.value = componentType.treeSelect
+      break;
+    case 'date':
+      component.value = componentType.date
+      break;
+    case 'time':
+      component.value = componentType.time
+      break;
+    case 'number':
+      component.value = componentType.inputNumber
+      break;
+    default:
+      component.value = componentType.input
+      break;
+  }
+}
+
+const handleItemOptions = (option?: any[] | Function) => {
+  options.value = []
+  if (isArray(option)) {
+    options.value = option
+  } else if (isFunction(option)) {
+    option().then((res: any[]) => {
+      options.value = res
+    })
+  }
+}
+
 const handleItem = () => {
   columnOptionMap.clear()
   columnOptions.value = []
   if (!props.columns.length) return
 
   // 获取第一个值
-
   const sortColumn = cloneDeep(props.columns)
   sortColumn?.sort((a, b) => a.sortIndex! - b.sortIndex!)
 
@@ -155,9 +200,16 @@ const handleItem = () => {
   const _itemColumn = sortColumn[_index - 1]
 
   termsModel.column = _itemColumn.column
-  termsModel.termType = _itemColumn.defaultTermType || getTermType(_itemColumn.type as string)
+  termsModel.termType = _itemColumn.defaultTermType || getTermType(_itemColumn.type)
 
-  columnOptions.value = props.columns.map(item => {
+  getComponent(_itemColumn.type) // 处理Item的组件类型
+
+  // 处理options 以及 request
+  if ('options' in _itemColumn) {
+    handleItemOptions(_itemColumn.options)
+  }
+
+  columnOptions.value = props.columns.map(item => { // 对columns进行Map处理以及值处理
     columnOptionMap.set(item.column, item)
     return {
       label: item.title,
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index 90992988..f9153b69 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -54,7 +54,7 @@
     <div v-else class='JSearch-content simple big'>
       <div class='JSearch-items'>
         <div class='left'>
-          <SearchItem :expand='false' :index='1' />
+          <SearchItem :expand='false' :index='1' :columns='searchItems' />
         </div>
       </div>
       <div class='JSearch-footer'>
diff --git a/src/views/demo/Search.vue b/src/views/demo/Search.vue
index b6ed09c0..2f2c249d 100644
--- a/src/views/demo/Search.vue
+++ b/src/views/demo/Search.vue
@@ -3,7 +3,7 @@
     <Search
       :columns='columns'
     />
-    <Search type='simple' />
+    <Search type='simple' :columns='columns' />
   </div>
 </template>
 
@@ -17,20 +17,59 @@ const columns = [
     search: {
       rename: 'deviceId',
       type: 'select',
+      options: [
+        {
+          label: '测试1',
+          value: 'test1'
+        },
+        {
+          label: '测试2',
+          value: 'test2'
+        },
+        {
+          label: '测试3',
+          value: 'test3'
+        },
+      ],
       handValue: (v) => {
         return '123'
       }
     }
   },
+  {
+    title: '序号',
+    dataIndex: 'sortIndex',
+    key: 'sortIndex',
+    scopedSlots: true,
+    search: {
+      type: 'number',
+    }
+  },
   {
     title: 'ID',
     dataIndex: 'id',
     key: 'id',
-    scopedSlots: true,
     search: {
       type: 'string',
     }
   },
+  {
+    title: '时间',
+    dataIndex: 'date',
+    key: 'date',
+    search: {
+      type: 'date',
+    }
+  },
+  {
+    title: '时间2',
+    dataIndex: 'date2',
+    key: 'date2',
+    search: {
+      type: 'time',
+      defaultTermType: 'lt'
+    }
+  },
   {
     title: '分类',
     dataIndex: 'classifiedName',