From 81065e2e4c933db33e95e6a8183bf62c5e731643 Mon Sep 17 00:00:00 2001
From: khalil <khalil@chuhaiwl2023.com>
Date: Fri, 30 May 2025 16:36:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=8C=BA-=E5=9C=B0=E5=8C=BA-=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E7=BB=84=E4=BB=B6select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/partition/regionInfo.js            |  16 +++
 src/views/common/partitionRegionSelect.vue | 108 +++++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 src/api/partition/regionInfo.js
 create mode 100644 src/views/common/partitionRegionSelect.vue

diff --git a/src/api/partition/regionInfo.js b/src/api/partition/regionInfo.js
new file mode 100644
index 0000000..67418cf
--- /dev/null
+++ b/src/api/partition/regionInfo.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request';
+
+export const listByPartitionId = query => {
+    return request({
+        url: '/admin/regionInfo/listByPartitionId',
+        method: 'get',
+        params: query
+    });
+};
+export const listAll = query => {
+    return request({
+        url: '/admin/regionInfo/list',
+        method: 'get',
+        params: query
+    });
+};
\ No newline at end of file
diff --git a/src/views/common/partitionRegionSelect.vue b/src/views/common/partitionRegionSelect.vue
new file mode 100644
index 0000000..f4625d3
--- /dev/null
+++ b/src/views/common/partitionRegionSelect.vue
@@ -0,0 +1,108 @@
+<template>
+  <!-- 使用 el-select 组件，并绑定 v-model 到 partitionId -->
+  <el-select v-model="regionIdValue" :placeholder="placeholder" @change="handleChangeEvent">
+    <!-- 遍历 partitionInfoList 数组，为每个 item 生成一个 el-option 组件 -->
+    <el-option v-for="item in regionInfoList" :key="item.id" :label="item.name" :value="item.id">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { ref, watch, onMounted } from "vue";
+import { listByPartitionId } from "@/api/partition/regionInfo";
+
+export default {
+  name: "partitionRegionSelect",
+  // 定义组件的 props
+  props: {
+    partitionId: {
+      type: Number,
+      default: 0,
+      required: true,
+    },
+    regionId: {
+      type: Number,
+      default: undefined,
+    },
+    regionInfos: {
+      type: Array,
+      default: () => [],
+    },
+    needAll: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "请选择地区",
+    },
+    handleChange: {
+      type: Function,
+      default: () => { },
+    },
+    afterInit: {
+      type: Function,
+      default: () => { },
+    },
+  },
+  // 明确声明触发的事件
+  emits: ["update:regionId", "update:regionInfos"],
+  setup(props, { emit }) {
+    // 定义响应式变量 internalValue 用于内部管理 partitionId 的值
+    const partitionIdValue = ref(props.partitionId);
+    // 定义响应式变量 internalValue 用于内部管理 partitionId 的值
+    const regionIdValue = ref(props.regionId);
+    // 定义响应式变量 partitionInfoList 用于存储分区信息列表
+    const regionInfoList = ref(props.regionInfos);
+
+    // 监听外部传入的 partitionId 变化，并同步到 internalValue
+    watch(
+      () => props.partitionId,
+      (newVal) => {
+        partitionIdValue.value = newVal;
+
+        if (newVal == undefined){
+          return
+        }
+
+        loadRegionInfos()
+      }
+    );
+
+    const loadRegionInfos = () => {
+      const partitionId = partitionIdValue.value;
+      const needAll = props.needAll;
+      const params = { partitionId, "containAll": needAll};
+      listByPartitionId(params).then((res) => {
+        setRegionInfos(res.data)
+      }).finally(() => {
+        props.afterInit()
+      });
+    };
+
+    const setRegionInfos = (data) => {
+      regionInfoList.value = data;
+      regionIdValue.value = data[0].id;
+
+      emit("update:regionId", regionIdValue.value);
+      emit("update:regionInfos", regionInfoList.value);
+    };
+
+    // 处理选择变化时触发的事件，并通过 emit 通知父组件
+    const handleChangeEvent = (value) => {
+      regionIdValue.value = value
+      emit("update:regionId", value);
+
+      props.handleChange(value);
+    };
+
+    // 返回需要暴露给模板使用的变量和方法
+    return {
+      partitionIdValue,
+      regionIdValue,
+      regionInfoList,
+      handleChangeEvent,
+    };
+  },
+};
+</script>
\ No newline at end of file