|
@@ -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>
|