<template>
|
<el-form-item label="网格组">
|
<el-select
|
:loading="loading"
|
v-model="index"
|
@change="handleChange"
|
placeholder="选择网格组"
|
size="small"
|
class="w-150"
|
>
|
<el-option
|
v-for="(s, i) in gridGroupList"
|
:key="i"
|
:label="s.name"
|
:value="i"
|
/>
|
</el-select>
|
</el-form-item>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
import gridApi from '@/api/gridApi';
|
import { useFetchData } from '@/composables/fetchData';
|
|
defineProps({
|
modelValue: Object
|
});
|
|
const emits = defineEmits(['update:modelValue']);
|
|
const { loading, fetchData } = useFetchData();
|
const gridGroupList = ref([]);
|
const index = ref(null);
|
|
function fetchGridGroup(area) {
|
return fetchData((page, pageSize) => {
|
return gridApi.fetchGridGroup(area, page, pageSize).then((res) => {
|
gridGroupList.value = res.data;
|
if (res.data.length > 0) {
|
index.value = 0;
|
handleChange(0);
|
} else {
|
index.value = null;
|
handleChange(null);
|
}
|
});
|
});
|
}
|
|
function handleChange(value) {
|
emits('update:modelValue', value != null ? gridGroupList.value[value] : null);
|
}
|
|
defineExpose({ fetchGridGroup });
|
</script>
|
