|
|
@@ -141,40 +141,33 @@ const farmList = ref([]);
|
|
|
const searchFarm = ref("");
|
|
|
const regionVal = ref("");
|
|
|
const typeVal = ref("");
|
|
|
-
|
|
|
-const regionOptions = computed(() => {
|
|
|
- const set = new Set();
|
|
|
- farmList.value.forEach((farm) => {
|
|
|
+/** 筛选项从历次接口结果累计,避免筛选后下拉变空 */
|
|
|
+const regionOptionSet = ref(new Set());
|
|
|
+const typeOptionSet = ref(new Set());
|
|
|
+let searchTimer = null;
|
|
|
+
|
|
|
+const regionOptions = computed(() =>
|
|
|
+ Array.from(regionOptionSet.value).map((value) => ({ label: value, value }))
|
|
|
+);
|
|
|
+
|
|
|
+const typeOptions = computed(() =>
|
|
|
+ Array.from(typeOptionSet.value).map((value) => ({ label: value, value }))
|
|
|
+);
|
|
|
+
|
|
|
+/** 列表由接口按 farm_name / region / crop 筛选 */
|
|
|
+const filteredFarmList = computed(() => farmList.value);
|
|
|
+
|
|
|
+function collectFilterOptions(list) {
|
|
|
+ const nextRegions = new Set(regionOptionSet.value);
|
|
|
+ const nextTypes = new Set(typeOptionSet.value);
|
|
|
+ (list || []).forEach((farm) => {
|
|
|
const region = farm.city || farm.farm_city || "";
|
|
|
- if (region) set.add(region);
|
|
|
- });
|
|
|
- return Array.from(set).map((value) => ({ label: value, value }));
|
|
|
-});
|
|
|
-
|
|
|
-const typeOptions = computed(() => {
|
|
|
- const set = new Set();
|
|
|
- farmList.value.forEach((farm) => {
|
|
|
- if (farm.categoryLabel) set.add(farm.categoryLabel);
|
|
|
- });
|
|
|
- return Array.from(set).map((value) => ({ label: value, value }));
|
|
|
-});
|
|
|
-
|
|
|
-const filteredFarmList = computed(() => {
|
|
|
- const keyword = searchFarm.value.trim().toLowerCase();
|
|
|
- return farmList.value.filter((farm) => {
|
|
|
- if (keyword && !(farm.name || "").toLowerCase().includes(keyword)) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (regionVal.value) {
|
|
|
- const region = farm.city || farm.farm_city || "";
|
|
|
- if (region !== regionVal.value) return false;
|
|
|
- }
|
|
|
- if (typeVal.value && farm.categoryLabel !== typeVal.value) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
+ if (region) nextRegions.add(region);
|
|
|
+ if (farm.categoryLabel) nextTypes.add(farm.categoryLabel);
|
|
|
});
|
|
|
-});
|
|
|
+ regionOptionSet.value = nextRegions;
|
|
|
+ typeOptionSet.value = nextTypes;
|
|
|
+}
|
|
|
|
|
|
function resolveFarmPointWkt(farm) {
|
|
|
if (farm.geom_wkt && /^POINT\s*\(/i.test(String(farm.geom_wkt).trim())) {
|
|
|
@@ -259,11 +252,18 @@ function getFarmList() {
|
|
|
farmList.value = [];
|
|
|
return;
|
|
|
}
|
|
|
+ const params = { id };
|
|
|
+ const farmName = searchFarm.value.trim();
|
|
|
+ if (farmName) params.farm_name = farmName;
|
|
|
+ if (regionVal.value) params.region = regionVal.value;
|
|
|
+ if (typeVal.value) params.crop = typeVal.value;
|
|
|
+
|
|
|
VE_API.questionnaire
|
|
|
- .getFarms({ id })
|
|
|
+ .getFarms(params)
|
|
|
.then((res) => {
|
|
|
const list = Array.isArray(res?.data) ? res.data : [];
|
|
|
farmList.value = normalizeFarmList(list);
|
|
|
+ collectFilterOptions(farmList.value);
|
|
|
nextTick(() => {
|
|
|
ensureMap();
|
|
|
});
|
|
|
@@ -301,6 +301,17 @@ watch(filteredFarmList, () => {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+watch([regionVal, typeVal], () => {
|
|
|
+ getFarmList();
|
|
|
+});
|
|
|
+
|
|
|
+watch(searchFarm, () => {
|
|
|
+ if (searchTimer) clearTimeout(searchTimer);
|
|
|
+ searchTimer = setTimeout(() => {
|
|
|
+ getFarmList();
|
|
|
+ }, 300);
|
|
|
+});
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getFarmList();
|
|
|
nextTick(() => {
|