分区-地区-公共组件select

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
+    });
+};

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>