|
|
@@ -1,57 +1,65 @@
|
|
|
<template>
|
|
|
- <Popup
|
|
|
- v-model:show="show"
|
|
|
- :overlay-style="{ zIndex: 9999 }"
|
|
|
- teleport="body"
|
|
|
- class="farm-info-popup"
|
|
|
- closeable>
|
|
|
+ <Popup v-model:show="show" :overlay-style="{ zIndex: 9999 }" teleport="body" class="farm-info-popup" closeable>
|
|
|
<div class="popup-content-box">
|
|
|
<div class="popup-title">基本信息</div>
|
|
|
<div class="popup-content">
|
|
|
- <div class="map-box">
|
|
|
+ <!-- <div class="map-box">
|
|
|
<div class="map" ref="mapContainer"></div>
|
|
|
- <!-- <div class="map-text" @click="handleEditMap">点击编辑地块</div> -->
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<cell-group inset class="cell-group">
|
|
|
- <field v-model="farmInfo.name" readonly label="农场名称" />
|
|
|
+ <field v-model="farmInfo.subjectName" label="农场名称" />
|
|
|
<field readonly label="农场面积">
|
|
|
<template #input>
|
|
|
- <span>{{ farmInfo.mianji }}亩</span>
|
|
|
+ <span>{{ farmInfo.farmArea }}亩</span>
|
|
|
</template>
|
|
|
</field>
|
|
|
- <field readonly label="种植作物">
|
|
|
+ <field readonly label="种植作物" class="crop-field">
|
|
|
<template #input>
|
|
|
- <span>{{ farmInfo.speciesName }}-{{ farmInfo.typeName }}</span>
|
|
|
+ <template v-if="farmInfo.regionList && farmInfo.regionList.length">
|
|
|
+ <template v-for="(item, index) in farmInfo.regionList" :key="index">
|
|
|
+ <span>{{ item.regionName }}</span>
|
|
|
+ <span v-if="index !== farmInfo.regionList.length - 1">、</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>-</span>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</field>
|
|
|
- <!-- <field v-model="farmInfo.userType" readonly label="客户类型">
|
|
|
+ <field v-model="farmInfo.contactName" label="联系人" />
|
|
|
+ <field
|
|
|
+ ref="contactPhoneFieldRef"
|
|
|
+ v-model="farmInfo.contactPhone"
|
|
|
+ label="联系电话"
|
|
|
+ type="tel"
|
|
|
+ maxlength="11"
|
|
|
+ :rules="contactPhoneRules"
|
|
|
+ />
|
|
|
+ <field class="address-field" v-model="farmInfo.farmAddress" readonly label="农场位置" />
|
|
|
+ <field label="基地类别" class="base-type-field">
|
|
|
<template #input>
|
|
|
- <span>{{ userTypeMap[farmInfo.userType] }}</span>
|
|
|
- </template>
|
|
|
- </field> -->
|
|
|
- <field v-model="farmInfo.fzr" readonly label="联系人" />
|
|
|
- <field v-model="farmInfo.tel" readonly label="联系电话" />
|
|
|
- <field class="address-field" v-model="farmInfo.address" readonly label="农场位置" />
|
|
|
-
|
|
|
- <field v-model="farmInfo.baseType" readonly label="基地类别">
|
|
|
- <template #input>
|
|
|
- <!-- <span>{{ userTypeMap[farmInfo.userType] }}</span> -->
|
|
|
- <span>{{ baseTypeMap[farmInfo?.baseType] }}</span>
|
|
|
+ <el-select
|
|
|
+ v-model="farmInfo.baseType"
|
|
|
+ placeholder="请选择"
|
|
|
+ class="base-type-select"
|
|
|
+ autocomplete="off"
|
|
|
+ teleported
|
|
|
+ popper-class="farm-info-base-type-popper"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="opt in baseTypeOptions"
|
|
|
+ :key="opt.id"
|
|
|
+ :label="opt.name"
|
|
|
+ :value="opt.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</field>
|
|
|
- <checkbox
|
|
|
- v-if="!showBtn"
|
|
|
- class="checkbox"
|
|
|
- icon-size="16px"
|
|
|
- shape="square"
|
|
|
- v-model="farmInfo.defaultOption"
|
|
|
- >是否勾选为默认农场</checkbox
|
|
|
- >
|
|
|
</cell-group>
|
|
|
</div>
|
|
|
- <div class="popup-footer" v-if="!showBtn || showEditBtn">
|
|
|
+ <div class="popup-footer">
|
|
|
<div class="footer-btn no-btn" @click="handleCancel">取消</div>
|
|
|
- <div class="footer-btn yes-btn" @click="handleEdit">去编辑</div>
|
|
|
+ <div class="footer-btn yes-btn" @click="handleEdit">确认修改</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Popup>
|
|
|
@@ -63,17 +71,23 @@ import { ref, nextTick } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import IndexMap from "../map/index.js";
|
|
|
import { useStore } from "vuex";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
|
-const userTypeMap = {
|
|
|
- 1: "普通用户",
|
|
|
- 2: "托管用户",
|
|
|
- 3: "优质客户",
|
|
|
-};
|
|
|
+/** 与 create_farm 联系电话规则一致 */
|
|
|
+const contactPhoneRules = [
|
|
|
+ { required: true, message: "请输入联系电话" },
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9]\d{9}$/,
|
|
|
+ message: "请输入正确的手机号码",
|
|
|
+ },
|
|
|
+];
|
|
|
|
|
|
-const baseTypeMap = {
|
|
|
- 1: "农民专业合作组织",
|
|
|
- 2: "农业企业",
|
|
|
- 3: "家庭农场",
|
|
|
+const baseTypeOptions = ref([]);
|
|
|
+function getBaseTypeList() {
|
|
|
+ return VE_API.farm.fetchBaseTypeList().then(({ data }) => {
|
|
|
+ baseTypeOptions.value = data || [];
|
|
|
+ return data;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -81,89 +95,96 @@ const props = defineProps({
|
|
|
type: [Number, String],
|
|
|
default: null,
|
|
|
},
|
|
|
- showBtn: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- showEditBtn: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
});
|
|
|
|
|
|
const store = useStore();
|
|
|
const router = useRouter();
|
|
|
const show = ref(false);
|
|
|
const mapContainer = ref(null);
|
|
|
+const contactPhoneFieldRef = ref(null);
|
|
|
const indexMap = new IndexMap();
|
|
|
|
|
|
// 农场信息
|
|
|
const farmInfo = ref();
|
|
|
const handleShow = () => {
|
|
|
- VE_API.farm.getFarmDetail({ farmId: props.farmId }).then((res) => {
|
|
|
+ VE_API.basic_farm.fetchFarmSubjectDetail({ subjectId: props.farmId }).then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
farmInfo.value = res.data;
|
|
|
+ getBaseTypeList();
|
|
|
show.value = true;
|
|
|
- nextTick(() => {
|
|
|
- const point = farmInfo.value.pointWkt;
|
|
|
- const geometryArr = farmInfo.value.geomWkt;
|
|
|
-
|
|
|
- // 如果地图已经初始化,则更新中心点和地块;否则初始化地图
|
|
|
- if (indexMap.kmap) {
|
|
|
- indexMap.updateCenter(point);
|
|
|
- // 如果有地块数据,则添加地块
|
|
|
- if (geometryArr && geometryArr.length > 0) {
|
|
|
- indexMap.setAreaGeometry([geometryArr]);
|
|
|
- }
|
|
|
- } else {
|
|
|
- indexMap.initMap(point, mapContainer.value);
|
|
|
- // 初始化地图后,如果有地块数据,则添加地块
|
|
|
- if (geometryArr && geometryArr.length > 0) {
|
|
|
- indexMap.setAreaGeometry([geometryArr]);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ // nextTick(() => {
|
|
|
+ // const point = farmInfo.value.farmLocation;
|
|
|
+ // let geometryArr = [];
|
|
|
+
|
|
|
+ // if (Array.isArray(farmInfo.value.regionList) && farmInfo.value.regionList.length > 0) {
|
|
|
+ // farmInfo.value.regionList.forEach((item) => {
|
|
|
+ // if (item?.geom) {
|
|
|
+ // geometryArr.push(item?.geom)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ // console.log('geometryArr', geometryArr);
|
|
|
+ // // 如果地图已经初始化,则更新中心点和地块;否则初始化地图
|
|
|
+ // if (indexMap.kmap) {
|
|
|
+ // indexMap.updateCenter(point);
|
|
|
+ // // 如果有地块数据,则添加地块
|
|
|
+ // if (geometryArr && geometryArr.length > 0) {
|
|
|
+ // indexMap.setAreaGeometry([geometryArr]);
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // indexMap.initMap(point, mapContainer.value);
|
|
|
+ // // 初始化地图后,如果有地块数据,则添加地块
|
|
|
+ // if (geometryArr && geometryArr.length > 0) {
|
|
|
+ // indexMap.setAreaGeometry([geometryArr]);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const handleEditMap = () => {
|
|
|
- // 在跳转前,将当前农场的地块数据存储到store中
|
|
|
- if (farmInfo.value.geomWkt) {
|
|
|
- const polygonData = {
|
|
|
- geometryArr: [farmInfo.value.geomWkt],
|
|
|
- isConfirmed: false,
|
|
|
- };
|
|
|
- store.commit("home/SET_FARM_POLYGON", polygonData);
|
|
|
- }
|
|
|
-
|
|
|
- router.push(
|
|
|
- `/edit_map?mapCenter=${farmInfo.value.pointWkt}&pointName=${farmInfo.value.address}&pointAddress=${JSON.parse(
|
|
|
- farmInfo.value.district
|
|
|
- )}&type=edit`
|
|
|
- );
|
|
|
-};
|
|
|
+const emit = defineEmits(['success']);
|
|
|
|
|
|
-const handleEdit = () => {
|
|
|
- setTimeout(() => {
|
|
|
- show.value = false;
|
|
|
- }, 150);
|
|
|
-
|
|
|
- // 在跳转前,将当前农场的地块数据存储到store中
|
|
|
- if (farmInfo.value.geomWkt) {
|
|
|
- const polygonData = {
|
|
|
- geometryArr: [farmInfo.value.geomWkt],
|
|
|
- mianji: farmInfo.value.mianji,
|
|
|
- isConfirmed: true, // 编辑模式下标记为已确认
|
|
|
- };
|
|
|
- store.commit("home/SET_FARM_POLYGON", polygonData);
|
|
|
+const handleEdit = async () => {
|
|
|
+ const phoneErr = await contactPhoneFieldRef.value?.validate();
|
|
|
+ if (phoneErr?.message) {
|
|
|
+ return;
|
|
|
}
|
|
|
+ const paramsData = {
|
|
|
+ id: props.farmId,
|
|
|
+ name: farmInfo.value.subjectName,
|
|
|
+ fzr: farmInfo.value.contactName,
|
|
|
+ tel: farmInfo.value.contactPhone,
|
|
|
+ baseType: farmInfo.value.baseType,
|
|
|
+ expertMiniUserId: 81881,
|
|
|
+ }
|
|
|
+ VE_API.basic_farm.saveBasicFarmInfoByExpertV3(paramsData).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success('修改成功');
|
|
|
+ show.value = false;
|
|
|
+ emit('success');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // show.value = false;
|
|
|
+ // }, 150);
|
|
|
+
|
|
|
+ // // 在跳转前,将当前农场的地块数据存储到store中
|
|
|
+ // if (farmInfo.value.geomWkt) {
|
|
|
+ // const polygonData = {
|
|
|
+ // geometryArr: [farmInfo.value.geomWkt],
|
|
|
+ // mianji: farmInfo.value.mianji,
|
|
|
+ // isConfirmed: true, // 编辑模式下标记为已确认
|
|
|
+ // };
|
|
|
+ // store.commit("home/SET_FARM_POLYGON", polygonData);
|
|
|
+ // }
|
|
|
|
|
|
- // 将农场数据存储到store中,供编辑页面使用
|
|
|
- store.commit("home/SET_EDIT_FARM_DATA", farmInfo.value);
|
|
|
+ // // 将农场数据存储到store中,供编辑页面使用
|
|
|
+ // store.commit("home/SET_EDIT_FARM_DATA", farmInfo.value);
|
|
|
|
|
|
- const from = props.showEditBtn ? "details" : "monitor";
|
|
|
- router.push(`/create_farm?type=edit&farmId=${props.farmId}&from=${from}`);
|
|
|
+ // const from = props.showEditBtn ? "details" : "monitor";
|
|
|
+ // router.push(`/create_farm?type=edit&farmId=${props.farmId}&from=${from}`);
|
|
|
};
|
|
|
|
|
|
const handleCancel = () => {
|
|
|
@@ -179,32 +200,39 @@ defineExpose({ handleShow });
|
|
|
border-radius: 8px;
|
|
|
z-index: 9999 !important;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.popup-content-box {
|
|
|
background: url("@/assets/img/home/popup-mask.png") no-repeat center left / 100% 100%;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+
|
|
|
::v-deep {
|
|
|
.van-popup__close-icon {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.popup-title {
|
|
|
text-align: center;
|
|
|
font-size: 24px;
|
|
|
font-family: "PangMenZhengDao";
|
|
|
}
|
|
|
+
|
|
|
.popup-content {
|
|
|
margin: 12px 0;
|
|
|
+
|
|
|
.map-box {
|
|
|
width: 100%;
|
|
|
height: 150px;
|
|
|
position: relative;
|
|
|
+
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
clip-path: inset(0px round 5px);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
+
|
|
|
.map-text {
|
|
|
position: absolute;
|
|
|
right: 6px;
|
|
|
@@ -217,10 +245,34 @@ defineExpose({ handleShow });
|
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.cell-group {
|
|
|
margin: 12px 0 0;
|
|
|
+
|
|
|
+ .crop-field {
|
|
|
+ ::v-deep {
|
|
|
+ .van-field__control--custom {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-type-field {
|
|
|
+ ::v-deep {
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-select__wrapper {
|
|
|
+ min-height: 24px;
|
|
|
+ box-shadow: none;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.address-field {
|
|
|
position: relative;
|
|
|
+
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
box-sizing: border-box;
|
|
|
@@ -235,23 +287,28 @@ defineExpose({ handleShow });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.checkbox {
|
|
|
pointer-events: none;
|
|
|
padding: 12px 14px;
|
|
|
}
|
|
|
+
|
|
|
.popup-footer {
|
|
|
display: flex;
|
|
|
gap: 13px;
|
|
|
+
|
|
|
.footer-btn {
|
|
|
text-align: center;
|
|
|
flex: 1;
|
|
|
padding: 8px 0;
|
|
|
border-radius: 25px;
|
|
|
}
|
|
|
+
|
|
|
.no-btn {
|
|
|
color: #666666;
|
|
|
border: 1px solid #999999;
|
|
|
}
|
|
|
+
|
|
|
.yes-btn {
|
|
|
background: #2199f8;
|
|
|
color: #fff;
|
|
|
@@ -259,3 +316,10 @@ defineExpose({ handleShow });
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<!-- 下拉挂载在 body,需非 scoped 才能盖住 van-popup(z-index: 9999) -->
|
|
|
+<style lang="scss">
|
|
|
+.farm-info-base-type-popper {
|
|
|
+ z-index: 10050 !important;
|
|
|
+}
|
|
|
+</style>
|