Просмотр исходного кода

feat:修改录入信息品种bug

wangsisi 14 часов назад
Родитель
Сommit
f895e3e0c0

BIN
src/assets/img/map/zhongzhi-point.png


+ 59 - 35
src/views/old_mini/entry_information/components/selectVariety.vue

@@ -57,7 +57,13 @@
                     <el-select v-model="defaultForm.varietyId" class="variety-select" placeholder="选择品种"
                     <el-select v-model="defaultForm.varietyId" class="variety-select" placeholder="选择品种"
                         popper-class="variety-select-popper"
                         popper-class="variety-select-popper"
                         @change="handleDefaultVarietyChange">
                         @change="handleDefaultVarietyChange">
-                        <el-option v-for="item in allVarieties" :key="item.id" :label="item.name" :value="item.id" />
+                        <el-option
+                            v-for="item in currentVarieties"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                            :class="{ 'is-variety-selected': isSelected(item.id) }"
+                        />
                     </el-select>
                     </el-select>
                 </div>
                 </div>
 
 
@@ -112,14 +118,20 @@
                 </div>
                 </div>
             </div>
             </div>
 
 
-            <!-- 已选品种详情卡 -->
-            <div v-for="(item, index) in selectedList" :key="item.uid" class="form-card selected-card">
+            <!-- 已选品种详情卡:只显示当前品类 -->
+            <div v-for="item in visibleSelectedList" :key="item.uid" class="form-card selected-card">
                 <div class="form-card__header">
                 <div class="form-card__header">
                     <img class="title-icon" src="@/assets/img/home/label-icon.png" alt="" />
                     <img class="title-icon" src="@/assets/img/home/label-icon.png" alt="" />
                     <el-select v-model="item.id" class="variety-select" placeholder="选择品种"
                     <el-select v-model="item.id" class="variety-select" placeholder="选择品种"
                         popper-class="variety-select-popper"
                         popper-class="variety-select-popper"
-                        @change="(val) => handleSelectedVarietyChange(index, val)">
-                        <el-option v-for="opt in allVarieties" :key="opt.id" :label="opt.name" :value="opt.id" />
+                        @change="(val) => handleSelectedVarietyChange(item.uid, val)">
+                        <el-option
+                            v-for="opt in getVarietiesByCategory(item.categoryId)"
+                            :key="opt.id"
+                            :label="opt.name"
+                            :value="opt.id"
+                            :class="{ 'is-variety-selected': isSelected(opt.id) }"
+                        />
                     </el-select>
                     </el-select>
                     <span class="delete-btn" @click="removeVariety(item.uid)">删除</span>
                     <span class="delete-btn" @click="removeVariety(item.uid)">删除</span>
                 </div>
                 </div>
@@ -189,7 +201,7 @@ import { ElMessage } from "element-plus";
 import { Search } from "@element-plus/icons-vue";
 import { Search } from "@element-plus/icons-vue";
 import { useRouter } from "vue-router";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { useStore } from "vuex";
-import SelectLocationMap from "../map/selectLocationMap.js";
+import SelectLocationMap, { POINT_ICON } from "../map/selectLocationMap.js";
 
 
 const emit = defineEmits(["prev", "confirm"]);
 const emit = defineEmits(["prev", "confirm"]);
 const router = useRouter();
 const router = useRouter();
@@ -224,7 +236,7 @@ function utilWktToCoordinate(point) {
 
 
 function createPreviewMap(el, point, showPoint = false) {
 function createPreviewMap(el, point, showPoint = false) {
     if (!el || !point) return null;
     if (!el || !point) return null;
-    const map = new SelectLocationMap();
+    const map = new SelectLocationMap({ iconSrc: POINT_ICON.plant });
     map.initMap(point, el, {
     map.initMap(point, el, {
         enableClick: false,
         enableClick: false,
         padding: MAP_PADDING,
         padding: MAP_PADDING,
@@ -334,10 +346,14 @@ function restoreSelectedListDraft() {
 
 
 const goSelectItemLocation = (item) => {
 const goSelectItemLocation = (item) => {
     sessionStorage.setItem(EDIT_UID_KEY, item.uid);
     sessionStorage.setItem(EDIT_UID_KEY, item.uid);
+    sessionStorage.setItem("ENTRY_INFORMATION_STEP", "3");
     saveSelectedListDraft();
     saveSelectedListDraft();
     router.push({
     router.push({
         path: "/entry_select_location",
         path: "/entry_select_location",
-        query: { mapCenter: item.location || getDefaultPoint() },
+        query: {
+            mapCenter: item.location || getDefaultPoint(),
+            pointType: "plant",
+        },
     });
     });
 };
 };
 
 
@@ -518,22 +534,15 @@ const currentStartingPointQuestion = computed(() =>
     getStartingPointQuestion(activeCategoryId.value)
     getStartingPointQuestion(activeCategoryId.value)
 );
 );
 
 
-const allVarieties = computed(() => {
-    const list = [];
-    for (const tab of categoryTabs.value) {
-        for (const item of tab.varieties || []) {
-            list.push({
-                ...item,
-                categoryId: tab.id,
-                categoryName: tab.name,
-            });
-        }
-    }
-    return list;
-});
+const currentVarieties = computed(() => currentCategory.value?.varieties || []);
+
+const getVarietiesByCategory = (categoryId) => {
+    const tab = categoryTabs.value.find((item) => String(item.id) === String(categoryId));
+    return tab?.varieties || [];
+};
 
 
 const filteredVarieties = computed(() => {
 const filteredVarieties = computed(() => {
-    const list = currentCategory.value?.varieties || [];
+    const list = currentVarieties.value;
     const kw = appliedKeyword.value.trim();
     const kw = appliedKeyword.value.trim();
     if (!kw) return list;
     if (!kw) return list;
     return list.filter((item) => item.name.includes(kw));
     return list.filter((item) => item.name.includes(kw));
@@ -544,6 +553,12 @@ const visibleVarieties = computed(() => {
     return filteredVarieties.value.slice(0, DEFAULT_VISIBLE_COUNT);
     return filteredVarieties.value.slice(0, DEFAULT_VISIBLE_COUNT);
 });
 });
 
 
+const visibleSelectedList = computed(() =>
+    selectedList.value.filter(
+        (item) => String(item.categoryId) === String(activeCategoryId.value)
+    )
+);
+
 watch(activeCategoryId, (id) => {
 watch(activeCategoryId, (id) => {
     searchKeyword.value = "";
     searchKeyword.value = "";
     appliedKeyword.value = "";
     appliedKeyword.value = "";
@@ -589,18 +604,13 @@ const tipSelectVariety = () => {
 /** 顶部「选择品种」:选中后新增下方卡片,顶部表单重置为空 */
 /** 顶部「选择品种」:选中后新增下方卡片,顶部表单重置为空 */
 const handleDefaultVarietyChange = (varietyId) => {
 const handleDefaultVarietyChange = (varietyId) => {
     if (!varietyId) return;
     if (!varietyId) return;
-    const found = allVarieties.value.find((item) => String(item.id) === String(varietyId));
+    const found = currentVarieties.value.find((item) => String(item.id) === String(varietyId));
     if (!found) {
     if (!found) {
         resetDefaultForm();
         resetDefaultForm();
         return;
         return;
     }
     }
     if (!isSelected(found.id)) {
     if (!isSelected(found.id)) {
-        selectedList.value.unshift(
-            createSelectedItem(found, {
-                id: found.categoryId,
-                name: found.categoryName,
-            })
-        );
+        selectedList.value.unshift(createSelectedItem(found, currentCategory.value));
         saveSelectedListDraft();
         saveSelectedListDraft();
     }
     }
     nextTick(() => {
     nextTick(() => {
@@ -608,14 +618,15 @@ const handleDefaultVarietyChange = (varietyId) => {
     });
     });
 };
 };
 
 
-const handleSelectedVarietyChange = (index, varietyId) => {
-    const found = allVarieties.value.find((item) => String(item.id) === String(varietyId));
-    const item = selectedList.value[index];
-    if (!item || !found) return;
+const handleSelectedVarietyChange = (uid, varietyId) => {
+    const item = selectedList.value.find((i) => i.uid === uid);
+    if (!item) return;
+    const found = getVarietiesByCategory(item.categoryId).find(
+        (opt) => String(opt.id) === String(varietyId)
+    );
+    if (!found) return;
     item.id = found.id;
     item.id = found.id;
     item.name = found.name;
     item.name = found.name;
-    item.categoryId = found.categoryId;
-    item.categoryName = found.categoryName;
     item.phenologyId = "";
     item.phenologyId = "";
     saveSelectedListDraft();
     saveSelectedListDraft();
 };
 };
@@ -734,6 +745,7 @@ const clearEntrySession = () => {
     sessionStorage.removeItem("ENTRY_BA_FORM");
     sessionStorage.removeItem("ENTRY_BA_FORM");
     sessionStorage.removeItem(LOCATION_KEY);
     sessionStorage.removeItem(LOCATION_KEY);
     sessionStorage.removeItem(EDIT_UID_KEY);
     sessionStorage.removeItem(EDIT_UID_KEY);
+    sessionStorage.removeItem("ENTRY_INFORMATION_STEP");
 };
 };
 
 
 const submitting = ref(false);
 const submitting = ref(false);
@@ -1151,5 +1163,17 @@ const handleConfirm = async () => {
 .variety-select-popper {
 .variety-select-popper {
     width: auto !important;
     width: auto !important;
     min-width: 100px !important;
     min-width: 100px !important;
+
+    .el-select-dropdown__item.is-variety-selected {
+        color: #2199f8;
+        background: transparent;
+        font-weight: 500;
+
+        &.is-hovering,
+        &:hover {
+            color: #2199f8;
+            background: transparent;
+        }
+    }
 }
 }
 </style>
 </style>

+ 18 - 2
src/views/old_mini/entry_information/index.vue

@@ -10,15 +10,31 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useRouter } from "vue-router";
 import customHeader from "@/components/customHeader.vue";
 import customHeader from "@/components/customHeader.vue";
 import baInformation from "./components/baInformation.vue";
 import baInformation from "./components/baInformation.vue";
 import selectCategory from "./components/selectCategory.vue";
 import selectCategory from "./components/selectCategory.vue";
 import selectVariety from "./components/selectVariety.vue";
 import selectVariety from "./components/selectVariety.vue";
 
 
+const STEP_KEY = "ENTRY_INFORMATION_STEP";
+
 const router = useRouter();
 const router = useRouter();
-const currentStep = ref(1);
+
+function readStep() {
+    const step = Number(sessionStorage.getItem(STEP_KEY));
+    return step >= 1 && step <= 3 ? step : 1;
+}
+
+const currentStep = ref(readStep());
+
+watch(
+    currentStep,
+    (step) => {
+        sessionStorage.setItem(STEP_KEY, String(step));
+    },
+    { immediate: true }
+);
 
 
 const handleNext = () => {
 const handleNext = () => {
     if (currentStep.value < 3) {
     if (currentStep.value < 3) {

+ 9 - 3
src/views/old_mini/entry_information/map/selectLocationMap.js

@@ -12,16 +12,22 @@ export let mapLocation = reactive({
   data: null,
   data: null,
 });
 });
 
 
+export const POINT_ICON = {
+  resident: require("@/assets/img/map/current-point.png"),
+  plant: require("@/assets/img/map/zhongzhi-point.png"),
+};
+
 /**
 /**
- * @description 常驻点位选点地图
+ * @description 选点地图,默认常驻点位图标;传入 iconSrc 可切换种植点位
  */
  */
 class SelectLocationMap {
 class SelectLocationMap {
-  constructor() {
+  constructor(options = {}) {
+    const iconSrc = options.iconSrc || POINT_ICON.resident;
     this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
     this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
       style: () => {
       style: () => {
         return new Style({
         return new Style({
           image: new Icon({
           image: new Icon({
-            src: require("@/assets/img/map/current-point.png"),
+            src: iconSrc,
             scale: 0.45,
             scale: 0.45,
             anchor: [0.5, 1],
             anchor: [0.5, 1],
           }),
           }),

+ 6 - 3
src/views/old_mini/entry_information/selectLocation.vue

@@ -27,7 +27,7 @@ import { useStore } from "vuex";
 import { ElMessage } from "element-plus";
 import { ElMessage } from "element-plus";
 import customHeader from "@/components/customHeader.vue";
 import customHeader from "@/components/customHeader.vue";
 import locationSearch from "@/components/pageComponents/locationSearch.vue";
 import locationSearch from "@/components/pageComponents/locationSearch.vue";
-import SelectLocationMap, { mapLocation } from "./map/selectLocationMap.js";
+import SelectLocationMap, { mapLocation, POINT_ICON } from "./map/selectLocationMap.js";
 import { convertPointToArray } from "@/utils/index";
 import { convertPointToArray } from "@/utils/index";
 
 
 const SESSION_KEY = "ENTRY_RESIDENT_LOCATION";
 const SESSION_KEY = "ENTRY_RESIDENT_LOCATION";
@@ -37,7 +37,10 @@ const router = useRouter();
 const route = useRoute();
 const route = useRoute();
 const store = useStore();
 const store = useStore();
 const mapContainer = ref(null);
 const mapContainer = ref(null);
-const selectLocationMap = new SelectLocationMap();
+const isPlantPoint = route.query.pointType === "plant";
+const selectLocationMap = new SelectLocationMap({
+    iconSrc: isPlantPoint ? POINT_ICON.plant : POINT_ICON.resident,
+});
 
 
 const userLocation = ref(
 const userLocation = ref(
     store.state.home.miniUserLocation || localStorage.getItem("MINI_USER_LOCATION") || "113.61702297075017,23.584863449735067"
     store.state.home.miniUserLocation || localStorage.getItem("MINI_USER_LOCATION") || "113.61702297075017,23.584863449735067"
@@ -84,7 +87,7 @@ const handleLocate = () => {
 const handleSubmit = () => {
 const handleSubmit = () => {
     const coordinate = mapLocation.data;
     const coordinate = mapLocation.data;
     if (!coordinate) {
     if (!coordinate) {
-        ElMessage.warning("请选择常驻点位");
+        ElMessage.warning(isPlantPoint ? "请选择种植点位" : "请选择常驻点位");
         return;
         return;
     }
     }
     const point = toPointWkt(coordinate);
     const point = toPointWkt(coordinate);