zant-admin 2.0.2 → 2.0.4

package/src/views/demo/region.vue

@@ -1,322 +1,322 @@
-<template>
-  <div class="region-container" >
-    <!-- 数据来源说明 -->
-    <a-card title="数据来源" class="margin-bottom-10">
-      <div class="data-source-content">
-        <a-alert
-          message="数据来源：中华人民共和国国家统计局"
-          description="本页面提供的省市区数据来源于中华人民共和国国家统计局发布的2023年统计用区划代码和城乡划分代码，确保数据的准确性和权威性。"
-          type="info"
-          show-icon
-          :closable="false"
-        />
-        <!-- <div class="source-details">
-          <div class="source-item">
-            <strong>发布机构：</strong>中华人民共和国国家统计局
-          </div>
-          <div class="source-item">
-            <strong>数据版本：</strong>2023年统计用区划代码和城乡划分代码
-          </div>
-          <div class="source-item">
-            <strong>数据说明：</strong>全国省、市、区/县三级行政区划标准数据，支持省市区三级联动选择功能
-          </div>
-        </div> -->
-      </div>
-    </a-card>
-
-    <a-card title="省市区联动选择" class="region-card">
-      <div class="region-selector">
-        <a-form layout="inline">
-          <a-form-item label="省份">
-            <a-select
-              v-model:value="selectedProvince"
-              placeholder="请选择省份"
-              style="width: 150px"
-              @change="handleProvinceChange"
-              :options="provinceOptions"
-              :filter-option="filterOption"
-              show-search
-            />
-          </a-form-item>
-          <a-form-item label="城市">
-            <a-select
-              v-model:value="selectedCity"
-              placeholder="请选择城市"
-              style="width: 150px"
-              @change="handleCityChange"
-              :options="cityOptions"
-              :disabled="!selectedProvince"
-              :filter-option="filterOption"
-              show-search
-            />
-          </a-form-item>
-          <a-form-item label="区县">
-            <a-select
-              v-model:value="selectedArea"
-              placeholder="请选择区县"
-              style="width: 150px"
-              @change="handleAreaChange"
-              :options="areaOptions"
-              :disabled="!selectedCity"
-              :filter-option="filterOption"
-              show-search
-            />
-          </a-form-item>
-        </a-form>
-        <div class="selected-result" v-if="selectedAddress">
-          <a-alert :message="selectedAddress" type="success" show-icon />
-          <div
-            class="code-display"
-            v-if="selectedProvince || selectedCity || selectedArea"
-          >
-            <a-descriptions title="区域代码" :column="3" size="small">
-              <a-descriptions-item label="省份代码">{{
-                selectedProvince || '-'
-              }}</a-descriptions-item>
-              <a-descriptions-item label="城市代码">{{
-                selectedCity || '-'
-              }}</a-descriptions-item>
-              <a-descriptions-item label="区县代码">{{
-                selectedArea || '-'
-              }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-        </div>
-      </div>
-    </a-card>
-
-    <a-card title="省市区组合选择" class="region-card">
-      <div class="region-cascader">
-        <a-form layout="inline">
-          <a-form-item label="地区选择">
-            <a-cascader
-              v-model:value="cascaderValue"
-              :options="cascaderOptions"
-              placeholder="请选择地区"
-              style="width: 300px"
-              @change="handleCascaderChange"
-              :filter-option="filterCascaderOption"
-              show-search
-            />
-          </a-form-item>
-        </a-form>
-        <div class="cascader-result" v-if="cascaderAddress">
-          <a-alert :message="cascaderAddress" type="info" show-icon />
-          <div
-            class="code-display"
-            v-if="cascaderValue && cascaderValue.length > 0"
-          >
-            <a-descriptions title="区域代码" :column="3" size="small">
-              <a-descriptions-item label="省份代码">{{
-                cascaderValue[0] || '-'
-              }}</a-descriptions-item>
-              <a-descriptions-item label="城市代码">{{
-                cascaderValue[1] || '-'
-              }}</a-descriptions-item>
-              <a-descriptions-item label="区县代码">{{
-                cascaderValue[2] || '-'
-              }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-        </div>
-      </div>
-    </a-card>
-
-
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import regionUtils from '@/utils/regionUtils'
-
-// 省市区联动选择相关数据
-const selectedProvince = ref('')
-const selectedCity = ref('')
-const selectedArea = ref('')
-const provinceOptions = ref([])
-const cityOptions = ref([])
-const areaOptions = ref([])
-
-// 组合框相关数据
-const cascaderValue = ref([])
-const cascaderOptions = ref([])
-
-// 计算属性：获取选中的完整地址
-const selectedAddress = computed(() => {
-  return regionUtils.getFullAddressName(
-    selectedProvince.value,
-    selectedCity.value,
-    selectedArea.value,
-  )
-})
-
-// 计算属性：获取组合框选中的完整地址
-const cascaderAddress = computed(() => {
-  if (!cascaderValue.value || cascaderValue.value.length === 0) return ''
-  const [provinceCode, cityCode, areaCode] = cascaderValue.value
-  return regionUtils.getFullAddressName(provinceCode, cityCode, areaCode)
-})
-
-/**
- * 处理省份选择变化
- * @param {string} value - 选中的省份代码
- */
-const handleProvinceChange = value => {
-  // 重置城市和区县选择
-  selectedCity.value = ''
-  selectedArea.value = ''
-
-  // 获取该省份下的城市列表
-  cityOptions.value = regionUtils.getCitiesByProvinceCode(value)
-  areaOptions.value = []
-}
-
-/**
- * 处理城市选择变化
- * @param {string} value - 选中的城市代码
- */
-const handleCityChange = value => {
-  // 重置区县选择
-  selectedArea.value = ''
-
-  // 获取该城市下的区县列表
-  areaOptions.value = regionUtils.getAreasByCityCode(value)
-}
-
-/**
- * 处理区县选择变化
- * @param {string} value - 选中的区县代码
- */
-const handleAreaChange = value => {
-  // 这里可以添加区县选择后的处理逻辑
-  console.log('选中的区县代码:', value)
-}
-
-/**
- * 处理组合框选择变化
- * @param {Array} value - 选中的值数组 [省份代码, 城市代码, 区县代码]
- */
-const handleCascaderChange = value => {
-  console.log('组合框选中的值:', value)
-}
-
-/**
- * 搜索过滤函数
- * @param {string} input - 输入的搜索关键词
- * @param {Object} option - 选项对象
- * @returns {boolean} 是否匹配
- */
-const filterOption = (input, option) => {
-  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-}
-
-/**
- * 级联选择器搜索过滤函数
- * @param {string} inputValue - 输入的搜索关键词
- * @param {Object} pathNode - 路径节点
- * @returns {boolean} 是否匹配
- */
-const filterCascaderOption = (inputValue, pathNode) => {
-  return pathNode.some(
-    option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0,
-  )
-}
-
-/**
- * 构建级联选择器的选项数据
- * @param {Array} provinces - 省份数据
- * @returns {Array} 级联选择器选项数据
- */
-const buildCascaderOptions = provinces => {
-  return provinces.map(province => {
-    // 获取省份下的所有城市
-    const cities = regionUtils.getCitiesByProvinceCode(province.value)
-
-    return {
-      label: province.label,
-      value: province.value,
-      children: cities.map(city => {
-        // 获取城市下的所有区县
-        const areas = regionUtils.getAreasByCityCode(city.value)
-
-        return {
-          label: city.label,
-          value: city.value,
-          children: areas.length > 0 ? areas : undefined,
-        }
-      }),
-    }
-  })
-}
-
-// 组件挂载时初始化数据
-onMounted(async () => {
-  try {
-    // 获取所有省市区数据
-    await regionUtils.fetchAllAddressData()
-
-    // 设置省份数据
-    provinceOptions.value = regionUtils.getAllProvinces()
-
-    // 构建级联选择器数据
-    cascaderOptions.value = buildCascaderOptions(provinceOptions.value)
-  } catch (error) {
-    console.error('初始化省市区数据失败:', error)
-  }
-})
-</script>
-
-<style scoped>
-.region-card {
-  margin-bottom: 20px;
-}
-
-.region-selector,
-.region-cascader {
-  padding: 20px 0;
-}
-
-.selected-result,
-.cascader-result {
-  margin-top: 20px;
-}
-
-.code-display {
-  margin-top: 15px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 6px;
-}
-
-.data-source-card {
-  margin-top: 20px;
-  background-color: #fafafa;
-}
-
-.data-source-content {
-  padding: 10px 0;
-}
-
-.source-details {
-  margin-top: 15px;
-  padding: 15px;
-  background-color: #ffffff;
-  border-radius: 6px;
-  border: 1px solid #d9d9d9;
-}
-
-.source-item {
-  margin-bottom: 8px;
-  line-height: 1.5;
-}
-
-.source-item:last-child {
-  margin-bottom: 0;
-}
-
-.source-item strong {
-  color: #1890ff;
-  font-weight: 600;
-}
-</style>
+<template>
+  <div class="region-container" >
+    <!-- 数据来源说明 -->
+    <a-card title="数据来源" class="margin-bottom-10">
+      <div class="data-source-content">
+        <a-alert
+          message="数据来源：中华人民共和国国家统计局"
+          description="本页面提供的省市区数据来源于中华人民共和国国家统计局发布的2023年统计用区划代码和城乡划分代码，确保数据的准确性和权威性。"
+          type="info"
+          show-icon
+          :closable="false"
+        />
+        <!-- <div class="source-details">
+          <div class="source-item">
+            <strong>发布机构：</strong>中华人民共和国国家统计局
+          </div>
+          <div class="source-item">
+            <strong>数据版本：</strong>2023年统计用区划代码和城乡划分代码
+          </div>
+          <div class="source-item">
+            <strong>数据说明：</strong>全国省、市、区/县三级行政区划标准数据，支持省市区三级联动选择功能
+          </div>
+        </div> -->
+      </div>
+    </a-card>
+
+    <a-card title="省市区联动选择" class="region-card">
+      <div class="region-selector">
+        <a-form layout="inline">
+          <a-form-item label="省份">
+            <a-select
+              v-model:value="selectedProvince"
+              placeholder="请选择省份"
+              style="width: 150px"
+              @change="handleProvinceChange"
+              :options="provinceOptions"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+          <a-form-item label="城市">
+            <a-select
+              v-model:value="selectedCity"
+              placeholder="请选择城市"
+              style="width: 150px"
+              @change="handleCityChange"
+              :options="cityOptions"
+              :disabled="!selectedProvince"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+          <a-form-item label="区县">
+            <a-select
+              v-model:value="selectedArea"
+              placeholder="请选择区县"
+              style="width: 150px"
+              @change="handleAreaChange"
+              :options="areaOptions"
+              :disabled="!selectedCity"
+              :filter-option="filterOption"
+              show-search
+            />
+          </a-form-item>
+        </a-form>
+        <div class="selected-result" v-if="selectedAddress">
+          <a-alert :message="selectedAddress" type="success" show-icon />
+          <div
+            class="code-display"
+            v-if="selectedProvince || selectedCity || selectedArea"
+          >
+            <a-descriptions title="区域代码" :column="3" size="small">
+              <a-descriptions-item label="省份代码">{{
+                selectedProvince || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{
+                selectedCity || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{
+                selectedArea || '-'
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+    <a-card title="省市区组合选择" class="region-card">
+      <div class="region-cascader">
+        <a-form layout="inline">
+          <a-form-item label="地区选择">
+            <a-cascader
+              v-model:value="cascaderValue"
+              :options="cascaderOptions"
+              placeholder="请选择地区"
+              style="width: 300px"
+              @change="handleCascaderChange"
+              :filter-option="filterCascaderOption"
+              show-search
+            />
+          </a-form-item>
+        </a-form>
+        <div class="cascader-result" v-if="cascaderAddress">
+          <a-alert :message="cascaderAddress" type="info" show-icon />
+          <div
+            class="code-display"
+            v-if="cascaderValue && cascaderValue.length > 0"
+          >
+            <a-descriptions title="区域代码" :column="3" size="small">
+              <a-descriptions-item label="省份代码">{{
+                cascaderValue[0] || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{
+                cascaderValue[1] || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{
+                cascaderValue[2] || '-'
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import regionUtils from '@/utils/regionUtils'
+
+// 省市区联动选择相关数据
+const selectedProvince = ref('')
+const selectedCity = ref('')
+const selectedArea = ref('')
+const provinceOptions = ref([])
+const cityOptions = ref([])
+const areaOptions = ref([])
+
+// 组合框相关数据
+const cascaderValue = ref([])
+const cascaderOptions = ref([])
+
+// 计算属性：获取选中的完整地址
+const selectedAddress = computed(() => {
+  return regionUtils.getFullAddressName(
+    selectedProvince.value,
+    selectedCity.value,
+    selectedArea.value,
+  )
+})
+
+// 计算属性：获取组合框选中的完整地址
+const cascaderAddress = computed(() => {
+  if (!cascaderValue.value || cascaderValue.value.length === 0) return ''
+  const [provinceCode, cityCode, areaCode] = cascaderValue.value
+  return regionUtils.getFullAddressName(provinceCode, cityCode, areaCode)
+})
+
+/**
+ * 处理省份选择变化
+ * @param {string} value - 选中的省份代码
+ */
+const handleProvinceChange = value => {
+  // 重置城市和区县选择
+  selectedCity.value = ''
+  selectedArea.value = ''
+
+  // 获取该省份下的城市列表
+  cityOptions.value = regionUtils.getCitiesByProvinceCode(value)
+  areaOptions.value = []
+}
+
+/**
+ * 处理城市选择变化
+ * @param {string} value - 选中的城市代码
+ */
+const handleCityChange = value => {
+  // 重置区县选择
+  selectedArea.value = ''
+
+  // 获取该城市下的区县列表
+  areaOptions.value = regionUtils.getAreasByCityCode(value)
+}
+
+/**
+ * 处理区县选择变化
+ * @param {string} value - 选中的区县代码
+ */
+const handleAreaChange = value => {
+  // 这里可以添加区县选择后的处理逻辑
+  console.log('选中的区县代码:', value)
+}
+
+/**
+ * 处理组合框选择变化
+ * @param {Array} value - 选中的值数组 [省份代码, 城市代码, 区县代码]
+ */
+const handleCascaderChange = value => {
+  console.log('组合框选中的值:', value)
+}
+
+/**
+ * 搜索过滤函数
+ * @param {string} input - 输入的搜索关键词
+ * @param {Object} option - 选项对象
+ * @returns {boolean} 是否匹配
+ */
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+/**
+ * 级联选择器搜索过滤函数
+ * @param {string} inputValue - 输入的搜索关键词
+ * @param {Object} pathNode - 路径节点
+ * @returns {boolean} 是否匹配
+ */
+const filterCascaderOption = (inputValue, pathNode) => {
+  return pathNode.some(
+    option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0,
+  )
+}
+
+/**
+ * 构建级联选择器的选项数据
+ * @param {Array} provinces - 省份数据
+ * @returns {Array} 级联选择器选项数据
+ */
+const buildCascaderOptions = provinces => {
+  return provinces.map(province => {
+    // 获取省份下的所有城市
+    const cities = regionUtils.getCitiesByProvinceCode(province.value)
+
+    return {
+      label: province.label,
+      value: province.value,
+      children: cities.map(city => {
+        // 获取城市下的所有区县
+        const areas = regionUtils.getAreasByCityCode(city.value)
+
+        return {
+          label: city.label,
+          value: city.value,
+          children: areas.length > 0 ? areas : undefined,
+        }
+      }),
+    }
+  })
+}
+
+// 组件挂载时初始化数据
+onMounted(async () => {
+  try {
+    // 获取所有省市区数据
+    await regionUtils.fetchAllAddressData()
+
+    // 设置省份数据
+    provinceOptions.value = regionUtils.getAllProvinces()
+
+    // 构建级联选择器数据
+    cascaderOptions.value = buildCascaderOptions(provinceOptions.value)
+  } catch (error) {
+    console.error('初始化省市区数据失败:', error)
+  }
+})
+</script>
+
+<style scoped>
+.region-card {
+  margin-bottom: 20px;
+}
+
+.region-selector,
+.region-cascader {
+  padding: 20px 0;
+}
+
+.selected-result,
+.cascader-result {
+  margin-top: 20px;
+}
+
+.code-display {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+
+.data-source-card {
+  margin-top: 20px;
+  background-color: #fafafa;
+}
+
+.data-source-content {
+  padding: 10px 0;
+}
+
+.source-details {
+  margin-top: 15px;
+  padding: 15px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+}
+
+.source-item {
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.source-item:last-child {
+  margin-bottom: 0;
+}
+
+.source-item strong {
+  color: #1890ff;
+  font-weight: 600;
+}
+</style>