使用地区范围

src/views/mall/components/prizeDraw.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="prizeDrawBox">
+    <city @inputChange="null"></city>
     <LuckyGrid
       ref="myLucky"
       width="300px"
@@ -20,6 +21,7 @@
 <script setup>
 defineOptions({ name: 'prizeDraw'})
 import Snackbar from '@/plugins/snackbar'
+import city from './prizeDraw/city.vue'
 import { ref } from 'vue'
 // const props = defineProps({
 //   number: {

src/views/mall/components/prizeDraw/city.vue

@@ -0,0 +1,58 @@
+<!-- 工作城市 -->
+<template>
+  <div class="mb-8 mt-n3">
+    <cascade v-model="selectItems.value" :item="selectItems" @change="selectChange"></cascade>
+  </div>
+</template>
+
+<script setup>
+import { getDict } from '@/hooks/web/useDictionaries'
+import { ref } from 'vue';
+defineOptions({name: 'prizeDraw-city'})
+const emits = defineEmits(['inputChange'])
+
+const selectItems = ref({
+  // key: 'workAreaId',
+  value: null,
+  default: null,
+  label: '使用地区范围：',
+  itemText: 'name',
+  itemValue: 'id',
+  size: 'default', // large default
+  required: false,
+  clearable: true,
+  multiple: true,
+  hideDetails: true,
+  checkStrictly: true,
+  placeholder: '请选择工作城市',
+  items: [],
+})
+
+getDict('areaTreeData', null, 'areaTreeData').then(res => {
+  // .filter(e => e.id !== 10000)
+  const data = res?.data?.length ? res.data : []
+  if (data[0] && data[0].id === 10000) data[0].children = []
+  selectItems.value.items = data
+})
+
+const selectChange = () => {
+  emits('inputChange', {
+    idName: 'areaIds',
+    values: selectItems.value.multiple ? selectItems.value.value : [selectItems.value.value],
+  })
+}
+
+// watch(
+//   () => route.query, 
+//   (newVal) => { // newVal, oldVal
+//     if (!newVal) selectItems.value = []
+//     const str = newVal.areaIds?.split(',')[0]
+//     const arr = str ? str.split('_') : []
+//     selectItems.value = arr?.length? arr.map(e => e = Number(e)) : []
+//   },
+//   { immediate: true },
+//   { deep: true }
+// )
+</script>
+<style lang="scss" scoped>
+</style>