|
|
@@ -13,37 +13,67 @@
|
|
|
<view class="f-s-26 w-150 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(1)" :style="{ backgroundColor: activeSelect == 1 ? '#37A954' : '', color: activeSelect == 1 ? '#FFF' : '' }">GAP基地</view>
|
|
|
<view class="f-s-26 w-200 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(2)" :style="{ backgroundColor: activeSelect == 2 ? '#37A954' : '', color: activeSelect == 2 ? '#FFF' : '' }">三无一全基地</view>
|
|
|
</view>
|
|
|
- <view class="w-700 d-flex" id="scroll">
|
|
|
- <scroll-view class="w-50% bg-#f7f7f7 c-#fff" :style="`height: calc(100vh - ${top}px)`" scroll-y="true">
|
|
|
- <view v-for="(item, index) in 10" :key="index" class="border-#E6E6E6 pd-20 title" :class="{ activeTitle: activeBase == index }" @click="changeBase(index)">
|
|
|
- <view class="">
|
|
|
- <text class="base">香格里拉市虎跳峡镇宝山村基地 </text>
|
|
|
- <text class="area">12000平方米</text>
|
|
|
- </view>
|
|
|
- <view class="pt-10">
|
|
|
- <view class="label">GAP</view>
|
|
|
+ <view class="w-700 d-flex flex-cln" id="scroll">
|
|
|
+ <view class="d-flex">
|
|
|
+ <scroll-view class="w-50% bg-#f7f7f7 c-#fff" :style="`height: calc(100vh - 70px - ${top}px)`" scroll-y="true" @scrolltolower="scrolltolower">
|
|
|
+ <view v-for="(item, index) in list" :key="index" class="border-#E6E6E6 pd-20 title" :class="{ activeTitle: activeBase == index }" @click="changeBase(index, item)">
|
|
|
+ <view class="">
|
|
|
+ <text class="base">{{ item?.baseName }}</text>
|
|
|
+ <text class="area">{{ item?.gapInfo?.area }}{{ item?.gapInfo?.areaUnit }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="pt-10 d-flex">
|
|
|
+ <view v-if="+item?.gapFlag" class="label mr-10">GAP</view>
|
|
|
+ <view v-if="+item?.swyqRes" class="label">三无一全</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view class="w-50% pd-16" :style="`height: calc(100vh - ${top}px)`" scroll-y="true">
|
|
|
+ <up-checkbox v-if="mixData.length > 0" label="全选" labelColor="#333" name="agree" usedAlone :checked="aloneChecked" @change="handleAllCheckboxChange"></up-checkbox>
|
|
|
+ <!-- 复选框组包含全选框 -->
|
|
|
+ <up-checkbox-group activeColor="#37a954" :modelValue="checkBox" @change="handleCheckboxGroupChange" iconPlacement="right" placement="column">
|
|
|
+ <up-checkbox v-for="(item, index) in mixData" :key="index" :name="item?.id" :label="item?.landName"></up-checkbox>
|
|
|
+ </up-checkbox-group>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view v-if="medicineName || swyqVarietyName" class="w-700 c-primary bg-#EBF6EE f-s-24" style="position: fixed; bottom: 140rpx; right: 0">
|
|
|
+ <view class="pd4-10-20-10-20 d-flex a-c">
|
|
|
+ <view class="">该基地获评:</view>
|
|
|
+ <view class="" v-if="medicineName">{{ medicineName }}GAP基地</view>
|
|
|
+ <view class="" v-if="medicineName && swyqVarietyName">和</view>
|
|
|
+ <view class="" v-if="swyqVarietyName">{{ swyqVarietyName }}三无一全基地 </view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <scroll-view class="w-50% pd-16" :style="`height: calc(100vh - ${top}px)`" scroll-y="true">
|
|
|
- <up-checkbox label="全选" labelColor="#333" name="agree" usedAlone :checked="aloneChecked" @change="handleAllCheckboxChange"></up-checkbox>
|
|
|
- <!-- 复选框组包含全选框 -->
|
|
|
- <up-checkbox-group activeColor="#37a954" :modelValue="checkBox" @change="handleCheckboxGroupChange" iconPlacement="right" placement="column">
|
|
|
- <up-checkbox v-for="(item, index) in mixData" :key="index" :name="item?.name" :label="item?.label"></up-checkbox>
|
|
|
- </up-checkbox-group>
|
|
|
- </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="w-700 bg-#fff h-100 d-flex a-c gap-20 pt-20 pb-20" style="position: fixed; bottom: 0; right: 0">
|
|
|
+ <up-button @click="handleClose" style="margin-left: 20rpx">取消</up-button>
|
|
|
+ <up-button type="primary" @click="confirm" style="margin-right: 20rpx">确定</up-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</up-popup>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
+import { useClientRequest } from '@/utils/request';
|
|
|
import { ref, reactive, watch, computed } from 'vue';
|
|
|
const instance = getCurrentInstance();
|
|
|
-defineProps<{
|
|
|
- modelValue: boolean;
|
|
|
-}>();
|
|
|
+const props = defineProps<{ modelValue: boolean; baseType?: string }>();
|
|
|
const form = ref({
|
|
|
keyword: '',
|
|
|
+ tempFlag: 0,
|
|
|
+ gapFlag: '',
|
|
|
+ swyqRes: '',
|
|
|
+ baseType: '',
|
|
|
});
|
|
|
+// 左侧基地列表数据
|
|
|
+const list = ref<any[]>([]);
|
|
|
+//左侧GAP基地的名称（种植的作物）
|
|
|
+const medicineName = ref<string>('');
|
|
|
+//左侧三无一全基地的名称
|
|
|
+const swyqVarietyName = ref<string>('');
|
|
|
+// 右侧地块数据
|
|
|
+const mixData = ref<any[]>([]);
|
|
|
+// 当前选择基地
|
|
|
+const baseID = ref(-1);
|
|
|
+// 请求的次数
|
|
|
+const pageNum = ref(1);
|
|
|
// 定义emit事件：通知父组件状态变化
|
|
|
const emit = defineEmits<{
|
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
|
@@ -64,7 +94,27 @@ function handleOpen() {
|
|
|
// 处理切换搜索
|
|
|
const activeSelect = ref(0);
|
|
|
const changeSelect = (index: number) => {
|
|
|
+ if (activeSelect.value == index) return;
|
|
|
+ activeBase.value = -1;
|
|
|
activeSelect.value = index;
|
|
|
+ if (index == 0) {
|
|
|
+ form.value.gapFlag = '';
|
|
|
+ form.value.swyqRes = '';
|
|
|
+ } else if (index == 1) {
|
|
|
+ form.value.gapFlag = '1';
|
|
|
+ form.value.swyqRes = '';
|
|
|
+ } else if (index == 2) {
|
|
|
+ form.value.gapFlag = '';
|
|
|
+ form.value.swyqRes = '1';
|
|
|
+ }
|
|
|
+ pageNum.value = 1;
|
|
|
+ list.value = [];
|
|
|
+ medicineName.value = '';
|
|
|
+ swyqVarietyName.value = '';
|
|
|
+ allCheckboxNames.value = [];
|
|
|
+ checkBox.value = [];
|
|
|
+ aloneChecked.value = false;
|
|
|
+ getBaseInfo(pageNum.value, 10);
|
|
|
};
|
|
|
|
|
|
// 处理搜索
|
|
|
@@ -73,34 +123,26 @@ const changeSeach = () => {
|
|
|
// 这里可以添加实际的搜索逻辑
|
|
|
};
|
|
|
// 切换基地>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
|
|
-const activeBase = ref(0);
|
|
|
-const changeBase = (index: number) => {
|
|
|
+const activeBase = ref(-1);
|
|
|
+const changeBase = (index: number, item: any) => {
|
|
|
+ if (activeBase.value == index) return;
|
|
|
activeBase.value = index;
|
|
|
+ baseID.value = item.id;
|
|
|
+ medicineName.value = '';
|
|
|
+ swyqVarietyName.value = '';
|
|
|
+ allCheckboxNames.value = [];
|
|
|
+ checkBox.value = [];
|
|
|
+ aloneChecked.value = false;
|
|
|
+ if (item.gapInfo?.medicineName) {
|
|
|
+ medicineName.value = item.gapInfo.medicineName;
|
|
|
+ }
|
|
|
+ if (item.gapInfo?.swyqVarietyName) {
|
|
|
+ swyqVarietyName.value = item.swyqVarietyName;
|
|
|
+ }
|
|
|
};
|
|
|
// 选择checkbox>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
|
|
// 所有复选框的name值
|
|
|
-//模拟数据
|
|
|
-const mixData = ref([
|
|
|
- {
|
|
|
- name: 'red',
|
|
|
- label: '红色',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'green',
|
|
|
- label: '绿色',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'blue',
|
|
|
- label: '蓝色',
|
|
|
- },
|
|
|
-]);
|
|
|
-let allCheckboxNames: string[] = [];
|
|
|
-setTimeout(() => {
|
|
|
- mixData.value.forEach((item) => {
|
|
|
- allCheckboxNames.push(item.name);
|
|
|
- });
|
|
|
-}, 2000);
|
|
|
-
|
|
|
+let allCheckboxNames = ref<string[]>([]);
|
|
|
let checkBox = ref<string[]>([]);
|
|
|
const aloneChecked = ref(false);
|
|
|
|
|
|
@@ -109,7 +151,7 @@ const handleAllCheckboxChange = (value: boolean) => {
|
|
|
aloneChecked.value = value;
|
|
|
if (value) {
|
|
|
// 全选：将checkBox设置为所有name
|
|
|
- checkBox.value = [...allCheckboxNames];
|
|
|
+ checkBox.value = [...allCheckboxNames.value];
|
|
|
} else {
|
|
|
// 取消全选：清空checkBox
|
|
|
checkBox.value = [];
|
|
|
@@ -120,10 +162,70 @@ const handleAllCheckboxChange = (value: boolean) => {
|
|
|
const handleCheckboxGroupChange = (value: string[]) => {
|
|
|
checkBox.value = value;
|
|
|
// 检查是否所有复选框都被选中
|
|
|
- const allSelected = allCheckboxNames.every((name) => value.includes(name));
|
|
|
+ const allSelected = allCheckboxNames.value.every((name) => value.includes(name));
|
|
|
aloneChecked.value = allSelected;
|
|
|
};
|
|
|
const top = ref(0);
|
|
|
+
|
|
|
+//scroll-view滚动监听
|
|
|
+const scrolltolower = () => {
|
|
|
+ console.log('滚动到底部');
|
|
|
+ pageNum.value += 1;
|
|
|
+ getBaseInfo(pageNum.value, 10);
|
|
|
+};
|
|
|
+// 获取基地信息
|
|
|
+const getBaseInfo = async (pageNum: number, pageSize: number) => {
|
|
|
+ const params = {
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ ...form.value,
|
|
|
+ };
|
|
|
+ const res = await useClientRequest.get('/plt-api/app/base/pageList', params);
|
|
|
+ if (res) {
|
|
|
+ const { rows } = res;
|
|
|
+ list.value.push(...rows);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 提交
|
|
|
+const confirm = () => {
|
|
|
+ if (baseID.value == -1) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择基地',
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ list.value.forEach((item) => {
|
|
|
+ if (item.id == baseID.value) {
|
|
|
+ if (item?.baseType !== props.baseType) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择符合类型的基地',
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ console.log(item, 'item');
|
|
|
+ console.log(checkBox.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+watch(
|
|
|
+ () => baseID.value,
|
|
|
+ async () => {
|
|
|
+ const res = await useClientRequest.get('/plt-api/app/baseLandInfo/pageList', { baseId: baseID.value });
|
|
|
+ console.log(res);
|
|
|
+ const { rows } = res;
|
|
|
+ mixData.value = rows;
|
|
|
+ allCheckboxNames.value = [];
|
|
|
+ checkBox.value = [];
|
|
|
+ aloneChecked.value = false;
|
|
|
+ mixData.value.forEach((item) => {
|
|
|
+ allCheckboxNames.value.push(item.id);
|
|
|
+ });
|
|
|
+ }
|
|
|
+);
|
|
|
onMounted(() => {
|
|
|
const querys = uni.createSelectorQuery().in(instance?.proxy);
|
|
|
querys
|
|
|
@@ -132,6 +234,7 @@ onMounted(() => {
|
|
|
top.value = data.top;
|
|
|
})
|
|
|
.exec();
|
|
|
+ getBaseInfo(pageNum.value, 10);
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -143,6 +246,8 @@ onMounted(() => {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
.area {
|
|
|
font-size: 24rpx;
|
|
|
@@ -166,6 +271,7 @@ onMounted(() => {
|
|
|
font-size: 28rpx;
|
|
|
color: #fff;
|
|
|
font-weight: 500;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
.area {
|
|
|
font-size: 24rpx;
|
