daimp-front/sub-government-affairs-service/src/components/AreaSelect/index.vue

<template>
  <div class="area-select-container" :style="{ width: width + 'px' }">
    <div v-if="label" class="area-select-label">{{ label }}</div>
    <el-cascader
      v-bind="$attrs"
      v-model="selectedAreaPath"
      :options="areaOptions"
      :props="cascaderProps"
      :placeholder="placeholder"
      style="flex: 1"
      clearable
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import request from '@/utils/axios';
import { useUserStore } from '@/store/modules/user';

const props = defineProps({
  inheritAttrs: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  label: {
    type: String,
    default: '所属行政区域：',
  },
  placeholder: {
    type: String,
    default: '请选择行政区域',
  },
  width: {
    type: [Number, String],
    default: 500,
  },
});

const emit = defineEmits(['update:modelValue']);

const userStore = useUserStore();

const areaOptions = ref([]);
const selectedAreaPath = ref([...props.modelValue]);

// 自定义字段映射
const cascaderProps = computed(() => ({
  label: 'areaName',
  value: 'areaCode',
  children: 'areaChildVOS',
  emitPath: true,
  expandTrigger: 'hover',
}));

const fetchAreaData = async () => {
  try {
    const res = await request.get('/system/area/region', {
      params: {
        areaCode: '530000',
      },
    });
    areaOptions.value = res.data ?? [];
    console.log('AreaSelect区域数据', areaOptions.value);
  } catch (err) {
    console.error('加载行政区域失败', err);
  }
};

// // 外部更新 => 内部同步
// watch(
//   () => props.modelValue,
//   (val) => {
//     selectedAreaPath.value = [...val];
//   }
// );

// 内部更新 => 外部同步
watch(selectedAreaPath, (val) => {
  emit('update:modelValue', val);
});

onMounted(() => {
  fetchAreaData();
});
</script>

<style scoped>
.area-select-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.area-select-label {
  font-size: 14px;
  color: #606266;
  width: 120px;
  line-height: 32px;
  text-align: right;
}
</style>