wuhuacong(伍華聰)的專欄

<template>
  <div>
    <label>省份：</label>
    <select v-model="province">
      <option :value="null">請選擇</option>
      <option v-for="p in provinces" :key="p.code" :value="p.code">{{ p.name }}</option>
    </select>

    <label>城市：</label>
    <select v-model="city">
      <option :value="null">請選擇</option>
      <option v-for="c in cities" :key="c.code" :value="c.code">{{ c.name }}</option>
    </select>

    <label>區縣：</label>
    <select v-model="area">
      <option :value="null">請選擇</option>
      <option v-for="a in areas" :key="a.code" :value="a.code">{{ a.name }}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 模擬字典數據
const provinces = ref([
  { code: 'gd', name: '廣東' },
  { code: 'bj', name: '北京' }
])

const citiesDict: Record<string, { code: string; name: string }[]> = {
  gd: [
    { code: 'gz', name: '廣州' },
    { code: 'sz', name: '深圳' }
  ],
  bj: [
    { code: 'dc', name: '東城' },
    { code: 'xc', name: '西城' }
  ]
}

const areasDict: Record<string, { code: string; name: string }[]> = {
  gz: [{ code: 'tianhe', name: '天河區' }, { code: 'yuexiu', name: '越秀區' }],
  sz: [{ code: 'nanshan', name: '南山區' }, { code: 'futian', name: '福田區' }],
  dc: [{ code: 'xx', name: '東城區示例' }],
  xc: [{ code: 'yy', name: '西城區示例' }]
}

// 當前選擇
const province = ref<string | null>(null)
const city = ref<string | null>(null)
const area = ref<string | null>(null)

// 下級字典
const cities = ref<{ code: string; name: string }[]>([])
const areas = ref<{ code: string; name: string }[]>([])

// 監聽省份變化 → 更新城市
watch(province, (newVal) => {
  if (newVal) {
    cities.value = citiesDict[newVal] || []
  } else {
    cities.value = []
  }
  city.value = null   // 清空下級選擇
  area.value = null
  areas.value = []
})

// 監聽城市變化 → 更新區縣
watch(city, (newVal) => {
  if (newVal) {
    areas.value = areasDict[newVal] || []
  } else {
    areas.value = []
  }
  area.value = null   // 清空下級選擇
})
</script>

// 監聽省份變化 → 更新城市字典
watch(
  () => form.province,
  async (newVal) => {
    if (!newVal) {
      cities.value = []
      form.city = null
      form.area = null
      return
    }

    cities.value = await fetchCities(newVal)

    // ? 用 nextTick 等 cities 更新后再校驗
    await nextTick()
    if (!cities.value.find(c => c.code === form.city)) {
      form.city = null
      form.area = null
    }
  },
  { immediate: true }
)

const area = ref([]); // 能源區域
const level1 = ref([]); // 一級能耗計量
const level2 = ref([]); // 二級能耗計量
const level3 = ref([]); // 三級能耗計量
const initArea = () => {
  electrecord.GetFieldDict('area').then(data => {
    // console.log(data);
    area.value = data;
  });
};

// 判斷下拉框的值是否有改變
watch(
  () => editForm.area,
  (newValue) => {
    if (!newValue) {
      editForm.level1 = '';
      editForm.level2 = '';
      editForm.level3 = '';
    }
    if (newValue) {
      const whereStr = `area='${newValue}'`;
      electmerter.GetFieldDict('level1', whereStr).then(data => {
        // console.log(data);
        level1.value = data;
      });
    }
  },
  { immediate: true }
);

watch(
  () => editForm.level1,
  (newValue) => {
    if (!newValue) {
      editForm.level2 = '';
      editForm.level3 = '';
      editForm.devicename = '';
      editForm.devicecode = '';
      editForm.lastnumber = 0;
    }
    if (newValue) {
      const whereStr = `level1='${newValue}' and area='${editForm.area}'`;
      electmerter.GetFieldDict('level2', whereStr).then(data => {
        // console.log(data);
        level2.value = data;
      });
    }
  },
  { immediate: true }
);
watch(
  () => editForm.level2,
  (newValue) => {
    if (!newValue) {
      editForm.level3 = '';
      editForm.devicename = '';
      editForm.devicecode = '';
      editForm.lastnumber = 0;
    }
    if (newValue) {
      const whereStr = `level2='${newValue}' and area='${editForm.area}' and level1='${editForm.level1}'`;
      electmerter.GetFieldDict('level3', whereStr).then(data => {
        // console.log(data);
        level3.value = data;
      });
    }
  },
  { immediate: true }
);
watch(
  () => editForm.level3,
  (newValue) => {
    if (!newValue) {
      editForm.devicename = '';
      editForm.devicecode = '';
      editForm.lastnumber = 0;
    }
  },
  { immediate: true }
);

        /// <summary>
        /// 根據字段名稱，獲取對應的字典列表
        /// </summary>
        /// <param name="fieldName">字段名稱</param>
        /// <param name="whereStr">條件字符串，如Age > 20 AND IsActive = true</param>
        /// <returns></returns>
        public virtual async Task<List<CListItem>> GetFieldDict(string fieldName, string whereStr)
        {
            var list = new List<CListItem>();
            if (!fieldName.IsNullOrEmpty())
            {
                //var sql = $"Select distinct {fieldName} from Table";
                var query = this.EntityDb.AsQueryable();
                if (!string.IsNullOrWhiteSpace(whereStr))
                {
                    query = query.Where(whereStr);
                }

                var fieldList = await query.Distinct().Select<string>(fieldName).ToListAsync();
                if(fieldList != null && fieldList.Count >0)
                {
                    var sortedList = fieldList
                        .OrderBy(name => GetSortIndex(name))  // 主排序：數字前綴
                        .ThenBy(name => name)                // 次排序：中文拼音順序
                        .ToList();
                    list = sortedList.Select(s => new CListItem(s)).ToList();
                }
            }
            return list;
        }