add area

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>

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{