|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" scroll-with-animation>
|
|
|
<template #top>
|
|
|
- <up-navbar title="添加基地" :fixed="false"></up-navbar>
|
|
|
+ <ut-navbar title="添加基地" :fixed="false" border></ut-navbar>
|
|
|
<view class="bg-fff mb-20">
|
|
|
<view class="pd-5"></view>
|
|
|
<ut-tabs v-model="activeTab" :tabs="tabs" mode="btw" @change="changeActiveTab"></ut-tabs>
|
|
|
@@ -9,7 +9,7 @@
|
|
|
</template>
|
|
|
<up-form class="p-rtv" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
|
|
|
<!-- 基本信息 -->
|
|
|
- <view class="pd-24" id="base12345">
|
|
|
+ <view ref="baseRef" class="pd-24" id="base12345">
|
|
|
<view class="startline-title">基本信息</view>
|
|
|
</view>
|
|
|
<view class="pd-24 bg-#fff mb-10">
|
|
|
@@ -22,25 +22,25 @@
|
|
|
</up-form-item>
|
|
|
<!-- 基地名称 -->
|
|
|
<view class="h-1" id="baseNamepppp"></view>
|
|
|
- <up-form-item borderBottom label="基地名称" required prop="baseName">
|
|
|
+ <up-form-item borderBottom label="基地名称" required prop="baseInfo.baseName">
|
|
|
<up-input v-model="form.baseInfo.baseName" placeholder="请输入基地名称" border="none" clearable></up-input>
|
|
|
</up-form-item>
|
|
|
<!-- 基地编号 -->
|
|
|
<view class="h-1" id="baseCodepppp"></view>
|
|
|
- <up-form-item borderBottom label="基地编号" prop="baseCode">
|
|
|
+ <up-form-item borderBottom label="基地编号" prop="baseInfo.baseCode">
|
|
|
<up-input v-model="form.baseInfo.baseCode" placeholder="请输入基地编号" border="none" clearable></up-input>
|
|
|
</up-form-item>
|
|
|
<!-- 校验定位:建设时间 -->
|
|
|
<view class="h-1" id="buildDatepppp"></view>
|
|
|
<ut-datetime-picker v-model="form.baseInfo.buildDate" mode="date" dateFields="month">
|
|
|
- <up-form-item borderBottom label="建设时间" required prop="buildDate">
|
|
|
+ <up-form-item borderBottom label="建设时间" required prop="baseInfo.buildDate">
|
|
|
<up-input v-model="form.baseInfo.buildDate" placeholder="请选择基地建设年份" border="none" clearable></up-input>
|
|
|
</up-form-item>
|
|
|
</ut-datetime-picker>
|
|
|
<!-- 选择基地组织方式 -->
|
|
|
<view class="h-1" id="orgTypepppp"></view>
|
|
|
<ut-action-sheet v-model="form.baseInfo.orgType" :tabs="pt_org_type" title="选择基地组织方式">
|
|
|
- <up-form-item borderBottom label="基地组织方式" required prop="orgType">
|
|
|
+ <up-form-item borderBottom label="基地组织方式" required prop="baseInfo.orgType">
|
|
|
<view v-if="form.baseInfo.orgType" class="f-s-30 c-333 f-w-5 flex1">{{ selectDictLabel(pt_org_type, form.baseInfo.orgType) }}</view>
|
|
|
<view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择基地组织方式</view>
|
|
|
<template #right>
|
|
|
@@ -51,7 +51,7 @@
|
|
|
<!-- 选择基地负责人 -->
|
|
|
<!-- 校验定位:基地负责人 -->
|
|
|
<view class="h-1" id="contactIdpppp"></view>
|
|
|
- <up-form-item @click="selectCpyMember" borderBottom label="基地负责人" required prop="contactId">
|
|
|
+ <up-form-item @click="selectCpyMember" borderBottom label="基地负责人" required prop="baseInfo.contactId">
|
|
|
<view v-if="form.baseInfo.contactId" class="f-s-30 c-333 f-w-5 flex1">{{ form.baseInfo.contactName }}</view>
|
|
|
<view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择基地负责人</view>
|
|
|
<template #right>
|
|
|
@@ -60,12 +60,12 @@
|
|
|
</up-form-item>
|
|
|
<!-- 填写基地联系电话 -->
|
|
|
<view class="h-1" id="contactTelpppp"></view>
|
|
|
- <up-form-item borderBottom label="基地联系电话" required prop="contactTel">
|
|
|
+ <up-form-item borderBottom label="基地联系电话" required prop="baseInfo.contactTel">
|
|
|
<up-input v-model="form.baseInfo.contactTel" placeholder="请输入基地联系电话" border="none" clearable></up-input>
|
|
|
</up-form-item>
|
|
|
<!-- 是否Gap基地 -->
|
|
|
<view class="h-1" id="gapFlagpppp"></view>
|
|
|
- <up-form-item borderBottom label="是否为Gap基地" required prop="gapFlag">
|
|
|
+ <up-form-item borderBottom label="是否为Gap基地" required prop="baseInfo.gapFlag">
|
|
|
<up-radio-group v-model="form.baseInfo.gapFlag">
|
|
|
<up-radio :customStyle="{ marginRight: '60rpx' }" v-for="(item, index) in yes_no" :key="index" :label="item.label" :name="item.value"></up-radio>
|
|
|
</up-radio-group>
|
|
|
@@ -82,7 +82,7 @@
|
|
|
<up-form-item borderBottom prop="baseInfo.gapInfo.address">
|
|
|
<up-input v-model="form.baseInfo.gapInfo.address" placeholder="请填写村级以下的具体地址信息" border="none" clearable></up-input>
|
|
|
</up-form-item>
|
|
|
- <up-form-item borderBottom>
|
|
|
+ <up-form-item borderBottom prop="baseInfo.gapInfo.basePic" required>
|
|
|
<view class="flex1 ov-hd">
|
|
|
<view class="d-flex a-c mb-10" style="margin-bottom: 5px">
|
|
|
<view class="f-s-30 c-#666">基地范围</view>
|
|
|
@@ -105,17 +105,22 @@
|
|
|
</template>
|
|
|
</up-form-item>
|
|
|
<!-- 基地经纬度 -->
|
|
|
- <view class="h-1" id="lnglatpppp"></view>
|
|
|
- <up-form-item required label="基地经纬度" prop="lnglat">
|
|
|
- <view class="flex1 d-flex a-c">
|
|
|
- <up-input v-model="form.baseInfo.gapInfo.lng" border="bottom" placeholder="70-150内的经度数值" clearable></up-input>
|
|
|
+ <view class="h-1" id="lngpppp"></view>
|
|
|
+ <view class="h-1" id="latpppp"></view>
|
|
|
+ <up-form-item required label="基地经纬度" class="form-item-wrap-column">
|
|
|
+ <view class="d-flex" style="margin-top: -10px">
|
|
|
+ <up-form-item prop="baseInfo.gapInfo.lng">
|
|
|
+ <up-input v-model="form.baseInfo.gapInfo.lng" border="bottom" placeholder="70-150内的经度数值" clearable></up-input>
|
|
|
+ </up-form-item>
|
|
|
<view class="pd-5"></view>
|
|
|
- <up-input v-model="form.baseInfo.gapInfo.lat" placeholder="4-53内的纬度数值" border="bottom" clearable></up-input>
|
|
|
+ <up-form-item prop="baseInfo.gapInfo.lat">
|
|
|
+ <up-input v-model="form.baseInfo.gapInfo.lat" placeholder="4-53内的纬度数值" border="bottom" clearable></up-input>
|
|
|
+ </up-form-item>
|
|
|
</view>
|
|
|
</up-form-item>
|
|
|
</view>
|
|
|
<!-- 地块/圈舍/组培架信息 -->
|
|
|
- <view class="h-1" id="plot12345"></view>
|
|
|
+ <view ref="plotRef" class="h-1" id="plot12345"></view>
|
|
|
<template v-if="form.baseInfo.baseType == '1'">
|
|
|
<view class="pd-24">
|
|
|
<view class="startline-title">地块信息</view>
|
|
|
@@ -132,6 +137,23 @@
|
|
|
<view class="startline-title">圈舍信息</view>
|
|
|
</view>
|
|
|
<view class="pd-24 bg-#fff">
|
|
|
+ <up-swipe-action>
|
|
|
+ <template v-for="(item, index) in form.landInfoList" :key="index">
|
|
|
+ <up-swipe-action-item class="mb-20" :options="options" @click="clickPlotSwipe($event, item, index, '编辑圈舍信息')">
|
|
|
+ <view class="plot-item pd-24">
|
|
|
+ <view class="d-flex mb-16">
|
|
|
+ <view class="f-s-30 f-w-5 c-#333 flex1 mr-10">{{ item?.landName || '-' }}</view>
|
|
|
+ <view v-if="item?.contactName" class="f-s-24 c-#333">负责人:{{ item?.contactName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="f-s-28 c-#666">
|
|
|
+ <span class="">面积:</span>
|
|
|
+ <span class="c-#333">{{ item?.area || '-' }}{{ item?.areaUnit || '-' }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-swipe-action-item>
|
|
|
+ </template>
|
|
|
+ </up-swipe-action>
|
|
|
+
|
|
|
<up-button @click="addPlot({ landType: form.baseInfo.baseType, areaUnit: form.baseInfo.gapInfo.areaUnit }, '添加圈舍')" type="primary" text="确定" plain>
|
|
|
<up-icon class="mr-10" name="plus" color="#37A954"></up-icon>
|
|
|
<span>添加圈舍信息</span>
|
|
|
@@ -387,15 +409,16 @@
|
|
|
</template>
|
|
|
</z-paging>
|
|
|
<ut-picker-area v-model:show="showArea" v-model="form.baseInfo.gapInfo.adcode" @confirm="confirmArea"></ut-picker-area>
|
|
|
- <FormPlot v-if="showPlot" v-model:show="showPlot" v-model="rowForm" :title="plotTitle" :dict="{ pt_light_type, pt_capacity_unit }"></FormPlot>
|
|
|
+ <FormPlot v-if="showPlot" v-model:show="showPlot" v-model="rowForm" :title="plotTitle" :dict="{ pt_light_type, pt_capacity_unit }" @submit="submitFormPlotAdd"></FormPlot>
|
|
|
+ <FormPlot v-if="showPlotEdit" v-model:show="showPlotEdit" v-model="rowFormEdit" :title="plotTitle" :dict="{ pt_light_type, pt_capacity_unit }" @submit="submitFormPlotEdit"></FormPlot>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { useUserStore } from '@/store';
|
|
|
import { useClientRequest } from '@/utils/request';
|
|
|
-import { isOpenSetting } from '@/utils/common';
|
|
|
+import { getRect, isOpenSetting } from '@/utils/common';
|
|
|
import { generateUniqueId } from '@/utils/public';
|
|
|
import FormPlot from './models/form-plot.vue';
|
|
|
-
|
|
|
+// import { $uGetRect } from 'uview-plus'
|
|
|
const tabs = reactive([
|
|
|
{ label: '基本信息', value: 'base' },
|
|
|
{ label: '地块信息', value: 'plot' },
|
|
|
@@ -408,8 +431,11 @@ const paging = ref<any>(null);
|
|
|
const upFormRef = ref<any>(null);
|
|
|
const showArea = ref(false);
|
|
|
const showPlot = ref(false);
|
|
|
+const showPlotEdit = ref(false);
|
|
|
const plotTitle = ref('添加地块信息');
|
|
|
+const rowEidtIdx = ref<number | string>(-1);
|
|
|
const rowForm = ref<any>(null);
|
|
|
+const rowFormEdit = ref<any>(null);
|
|
|
const form = ref<any>({
|
|
|
baseInfo: {
|
|
|
baseType: '',
|
|
|
@@ -433,7 +459,38 @@ const form = ref<any>({
|
|
|
landInfoList: [], // 地块/圈舍/组培架信息
|
|
|
environmentInfo: {}, // 基地环境信息
|
|
|
});
|
|
|
-const rules = reactive({});
|
|
|
+const options = ref([
|
|
|
+ {
|
|
|
+ text: '编辑',
|
|
|
+ name: 'edit',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#37a954',
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '删除',
|
|
|
+ name: 'delete',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#FF3B30',
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+]);
|
|
|
+const rules = reactive({
|
|
|
+ 'baseInfo.baseName': [{ required: true, message: '请输入基地名称' }],
|
|
|
+ 'baseInfo.baseCode': [{ required: true, message: '请输入基地编号' }],
|
|
|
+ 'baseInfo.buildDate': [{ required: true, message: '请选择建设时间' }],
|
|
|
+ 'baseInfo.orgType': [{ required: true, message: '请选择基地组织方式' }],
|
|
|
+ 'baseInfo.contactId': [{ required: true, message: '请选择基地负责人' }],
|
|
|
+ 'baseInfo.contactTel': [{ required: true, message: '请输入基地联系电话' }],
|
|
|
+ 'baseInfo.gapInfo.adcode': [{ required: true, message: '请选择基地具体地址' }],
|
|
|
+ 'baseInfo.gapFlag': [{ required: true, message: '请选择是否为Gap基地' }],
|
|
|
+ 'baseInfo.gapInfo.basePic': [{ required: true, message: '请绘制基地范围' }],
|
|
|
+ 'baseInfo.gapInfo.area': [{ required: true, message: '请输入基地面积' }],
|
|
|
+ 'baseInfo.gapInfo.lng': [{ required: true, message: '请输入基地经纬度' }],
|
|
|
+ 'baseInfo.gapInfo.lat': [{ required: true, message: '请输入基地经纬度' }],
|
|
|
+});
|
|
|
// saveInfo和submitForm防抖
|
|
|
// 暂存基地信息
|
|
|
const saveBaseInfo = async () => {
|
|
|
@@ -465,11 +522,10 @@ const submitForm = async () => {
|
|
|
try {
|
|
|
await upFormRef.value?.validate();
|
|
|
} catch (error: any) {
|
|
|
- console.log(form.value);
|
|
|
-
|
|
|
- console.log(error, '++++++++');
|
|
|
// 滚动到第一个错误字段
|
|
|
- const firstErrorField = error && error[0].prop;
|
|
|
+ console.log(error);
|
|
|
+
|
|
|
+ const firstErrorField = error && error[0].field + 'pppp';
|
|
|
paging.value?.scrollIntoViewById(firstErrorField, 30, true);
|
|
|
return;
|
|
|
}
|
|
|
@@ -536,7 +592,27 @@ const mapDrawArea = async () => {
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
+const clickPlotSwipe = (e: any, item: any, idx: number | string, title = '编辑地块') => {
|
|
|
+ console.log(e, item);
|
|
|
+ const index = e.index;
|
|
|
+ if (index == 0) {
|
|
|
+ // 编辑
|
|
|
+ plotTitle.value = title;
|
|
|
+ rowFormEdit.value = item;
|
|
|
+ rowEidtIdx.value = idx;
|
|
|
+ showPlotEdit.value = true;
|
|
|
+ }
|
|
|
+ if (index == 1) {
|
|
|
+ // 删除
|
|
|
+ form.value.landInfoList.splice(idx, 1);
|
|
|
+ }
|
|
|
+};
|
|
|
+const submitFormPlotEdit = (data: any) => {
|
|
|
+ if (rowEidtIdx.value === -1) return;
|
|
|
+ form.value.landInfoList[rowEidtIdx.value] = {
|
|
|
+ ...data,
|
|
|
+ };
|
|
|
+};
|
|
|
const selectCpyMember = () => {
|
|
|
uni.$on('selectCpyMember', (item: any) => {
|
|
|
form.value.baseInfo.contactId = item.userInfo?.id;
|
|
|
@@ -557,12 +633,16 @@ const changeActiveTab = (value: any) => {
|
|
|
let scrollId = `${value.value}12345`;
|
|
|
paging.value?.scrollIntoViewById(scrollId, 30, true);
|
|
|
};
|
|
|
-onLoad((optins: any) => {
|
|
|
- if (optins.id) {
|
|
|
+
|
|
|
+onLoad((options: any) => {
|
|
|
+ form.value.baseInfo.baseType = options.baseType || '1';
|
|
|
+ form.value.baseInfo.gapInfo.areaUnit = mapUnitByBaseType[options.baseType || '1'];
|
|
|
+ if (options.id) {
|
|
|
} else {
|
|
|
getLocationByAddress();
|
|
|
}
|
|
|
});
|
|
|
+onMounted(() => {});
|
|
|
// 获取当前经纬度返回地址
|
|
|
const getLocationByAddress = async () => {
|
|
|
const info = await uni.getSystemInfo();
|
|
|
@@ -587,25 +667,24 @@ const getLocationByAddress = async () => {
|
|
|
};
|
|
|
};
|
|
|
const addPlot = (rowItem: any, title = '添加地块') => {
|
|
|
- console.log(rowItem, '+dadas');
|
|
|
-
|
|
|
rowForm.value = {
|
|
|
...rowItem,
|
|
|
};
|
|
|
plotTitle.value = title;
|
|
|
showPlot.value = true;
|
|
|
};
|
|
|
+const submitFormPlotAdd = (data: any) => {
|
|
|
+ form.value.landInfoList.push({
|
|
|
+ ...data,
|
|
|
+ });
|
|
|
+};
|
|
|
const mapUnitByBaseType: any = {
|
|
|
'1': '亩',
|
|
|
'2': '平方米',
|
|
|
'3': '平方米',
|
|
|
};
|
|
|
-onLoad((options: any) => {
|
|
|
- form.value.baseInfo.baseType = options.baseType || '1';
|
|
|
- form.value.baseInfo.gapInfo.areaUnit = mapUnitByBaseType[options.baseType || '1'];
|
|
|
- console.log(options, mapUnitByBaseType[options.baseType || '1']);
|
|
|
-
|
|
|
-});
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.z-paging-wrap {
|
|
|
@@ -623,4 +702,8 @@ onLoad((options: any) => {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
+.plot-item {
|
|
|
+ border: 1rpx solid rgba($u-primary, 0.4);
|
|
|
+ border-radius: 10rpx;
|
|
|
+}
|
|
|
</style>
|