add area

src/components/Area/index.vue

@@ -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>

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>

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: {