From 4ecc22a175fb114cd852467162a50dfb1ea9029b Mon Sep 17 00:00:00 2001
From: zhangtao <1176193409@qq.com>
Date: Tue, 5 Jul 2022 14:10:23 +0800
Subject: [PATCH 1/2] add area

---
 src/components/Area/index.vue   | 96 +++++++++++++++++++++++++++++++++
 src/components/Search/index.vue | 23 +++++++-
 2 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Area/index.vue

diff --git a/src/components/Area/index.vue b/src/components/Area/index.vue
new file mode 100644
index 0000000..abbca66
--- /dev/null
+++ b/src/components/Area/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <n-dropdown
+    trigger="click"
+    :options="getOptions"
+    class="dropdown-icon"
+    @select="handleSelect"
+  >
+    <n-input placeholder="" readonly>
+      <template #prefix>
+        <!-- <n-icon
+          v-for="(item,index) in getOptions"
+          v-show="item.key === selectIcon"
+          :key="index"
+          color="#111111"
+          :component="item.component"
+          size="24"
+        /> -->
+      </template>
+    </n-input>
+  </n-dropdown>
+</template>
+
+<script>
+import { reactive, toRefs, h, computed } from 'vue'
+import { NIcon } from 'naive-ui'
+import Area from './tools/area.js'
+export default {
+  name: 'AreaSelect',
+  props: {
+    selected: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['update:selected'],
+
+  setup(props, { emit }) {
+    const data = reactive({
+      selectIcon: props.selected
+    })
+    const renderOption = ({ node, option }) => {
+      return h('div', {
+        onClick: () => {
+          console.log(option.label)
+        }
+      },
+      { default: () => h(option.label) })
+    }
+
+    const getOptions = computed(() => {
+      const options = Area.map((item) => {
+        if (item.children) {
+          item.props = {
+            onClick: (option) => {
+              console.log(option)
+            }
+          }
+        }
+        return item
+      })
+      console.log(options)
+      return options
+    })
+
+    function handleSelect(key) {
+      data.selectIcon = key
+      emit('update:selected', key)
+    }
+
+    return {
+      ...toRefs(data),
+      Area,
+      renderOption,
+      getOptions,
+      handleSelect
+    }
+  }
+}
+
+</script>
+<style lang='scss'>
+// .v-binder-follower-content{
+//   .dropdown-icon{
+//     width: 510px;
+//     padding: 5px 15px;
+//     .n-dropdown-option{
+//       display: inline-block;
+//       padding: 6px;
+//     }
+//     .n-dropdown-option-body__suffix{
+//       display: none !important;
+//     }
+//   }
+// }
+
+</style>
diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue
index e14aaa0..31e919e 100644
--- a/src/components/Search/index.vue
+++ b/src/components/Search/index.vue
@@ -8,6 +8,9 @@
         <n-form-item v-if="['select'].includes(item.type) " :label="item.label">
           <n-select v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
         </n-form-item>
+        <n-form-item v-if="['cascader'].includes(item.type) " :label="item.label">
+          <Cascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
+        </n-form-item>
         <n-form-item v-if="['date'].includes(item.type) " :label="item.label">
           <n-date-picker v-model="getFormOptions.form[item.key]" v-bind="item.props" />
         </n-form-item>
@@ -28,8 +31,10 @@
 <script>
 import { computed, reactive, ref, unref, toRaw } from 'vue'
 import { NForm } from 'naive-ui'
+import Cascader from '@/components/Cascader/index.vue'
 export default {
   name: 'SearchPage',
+  components: { Cascader },
   props: {
     ...NForm.props,
     info: {
@@ -41,6 +46,7 @@ export default {
   setup(props, { emit }) {
     const showItemNum = ref(3)
     const len = ref(props.info.length - 1)
+    const itemRefs = ref([])
     const showButton = ref(!!(showItemNum.value < len.value))
     /* 获取传递的props */
     const data = reactive({
@@ -50,10 +56,18 @@ export default {
     /* 初始化搜索表单信息 */
     function initForm() {
       data.info.forEach((item) => {
-        form.value[item.key] = null
+        if (item.key) form.value[item.key] = ''
+      })
+      itemRefs.value.forEach((item) => {
+        item.clearValue()
       })
     }
-
+    function handleSelect(data) {
+      form.value = {
+        ...form.value,
+        ...data
+      }
+    }
     const getFormOptions = computed(() => {
       return {
         form: unref(form),
@@ -79,6 +93,8 @@ export default {
       getFormOptions,
       handleSearch,
       handleReset,
+      handleSelect,
+      itemRefs,
       showMoreItem
     }
   }
@@ -96,6 +112,9 @@ export default {
   .n-select{
     width: 200px;
   }
+  .n-cascader{
+    width: 200px;
+  }
   transition: all 10s;
 }
 .form__button{

From a833ff0cfebc7ff80cf76e8798401f5720592930 Mon Sep 17 00:00:00 2001
From: zhangtao <1176193409@qq.com>
Date: Tue, 5 Jul 2022 14:12:18 +0800
Subject: [PATCH 2/2] add area

---
 src/components/Area/index.vue         | 96 ---------------------------
 src/components/AreaCascader/index.vue | 53 +++++++++++++++
 src/components/Search/index.vue       |  6 +-
 3 files changed, 56 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/Area/index.vue
 create mode 100644 src/components/AreaCascader/index.vue

diff --git a/src/components/Area/index.vue b/src/components/Area/index.vue
deleted file mode 100644
index abbca66..0000000
--- a/src/components/Area/index.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <n-dropdown
-    trigger="click"
-    :options="getOptions"
-    class="dropdown-icon"
-    @select="handleSelect"
-  >
-    <n-input placeholder="" readonly>
-      <template #prefix>
-        <!-- <n-icon
-          v-for="(item,index) in getOptions"
-          v-show="item.key === selectIcon"
-          :key="index"
-          color="#111111"
-          :component="item.component"
-          size="24"
-        /> -->
-      </template>
-    </n-input>
-  </n-dropdown>
-</template>
-
-<script>
-import { reactive, toRefs, h, computed } from 'vue'
-import { NIcon } from 'naive-ui'
-import Area from './tools/area.js'
-export default {
-  name: 'AreaSelect',
-  props: {
-    selected: {
-      type: String,
-      default: null
-    }
-  },
-  emits: ['update:selected'],
-
-  setup(props, { emit }) {
-    const data = reactive({
-      selectIcon: props.selected
-    })
-    const renderOption = ({ node, option }) => {
-      return h('div', {
-        onClick: () => {
-          console.log(option.label)
-        }
-      },
-      { default: () => h(option.label) })
-    }
-
-    const getOptions = computed(() => {
-      const options = Area.map((item) => {
-        if (item.children) {
-          item.props = {
-            onClick: (option) => {
-              console.log(option)
-            }
-          }
-        }
-        return item
-      })
-      console.log(options)
-      return options
-    })
-
-    function handleSelect(key) {
-      data.selectIcon = key
-      emit('update:selected', key)
-    }
-
-    return {
-      ...toRefs(data),
-      Area,
-      renderOption,
-      getOptions,
-      handleSelect
-    }
-  }
-}
-
-</script>
-<style lang='scss'>
-// .v-binder-follower-content{
-//   .dropdown-icon{
-//     width: 510px;
-//     padding: 5px 15px;
-//     .n-dropdown-option{
-//       display: inline-block;
-//       padding: 6px;
-//     }
-//     .n-dropdown-option-body__suffix{
-//       display: none !important;
-//     }
-//   }
-// }
-
-</style>
diff --git a/src/components/AreaCascader/index.vue b/src/components/AreaCascader/index.vue
new file mode 100644
index 0000000..4fdda43
--- /dev/null
+++ b/src/components/AreaCascader/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <n-cascader v-bind="getProps" @update:value="handleUpdate" />
+</template>
+
+<script>
+import { NCascader } from 'naive-ui'
+import { computed } from 'vue'
+export default {
+  name: 'AreaCascader',
+  props: {
+    ...NCascader.props,
+    showCheckbox: {
+      type: Boolean,
+      default: true
+    },
+    field: {
+      type: Array,
+      default: () => {
+        return ['province', 'city', 'distance']
+      }
+    }
+  },
+  emits: ['selectd'],
+  setup(props, { emit }) {
+    const getProps = computed(() => {
+      return {
+        ...props
+      }
+    })
+    function handleUpdate(value, option, pathValues) {
+      const field = props.field
+      const valueField = props.valueField
+      const filedJson = {}
+      field.forEach((item, index) => {
+        filedJson[item] = pathValues?.[index]?.[valueField] || ''
+      })
+      emit('selectd', filedJson)
+    }
+    function clearValue() {
+      handleUpdate(null, null, [])
+    }
+
+    return {
+      getProps,
+      handleUpdate,
+      clearValue
+    }
+  }
+}
+
+</script>
+<style scoped lang='scss'>
+</style>
diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue
index 31e919e..965342d 100644
--- a/src/components/Search/index.vue
+++ b/src/components/Search/index.vue
@@ -9,7 +9,7 @@
           <n-select v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
         </n-form-item>
         <n-form-item v-if="['cascader'].includes(item.type) " :label="item.label">
-          <Cascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
+          <AreaCascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
         </n-form-item>
         <n-form-item v-if="['date'].includes(item.type) " :label="item.label">
           <n-date-picker v-model="getFormOptions.form[item.key]" v-bind="item.props" />
@@ -31,10 +31,10 @@
 <script>
 import { computed, reactive, ref, unref, toRaw } from 'vue'
 import { NForm } from 'naive-ui'
-import Cascader from '@/components/Cascader/index.vue'
+import AreaCascader from '@/components/AreaCascader/index.vue'
 export default {
   name: 'SearchPage',
-  components: { Cascader },
+  components: { AreaCascader },
   props: {
     ...NForm.props,
     info: {