feat: 增加点击菜地作物可编辑功能

src/components/CropPopup.vue

@@ -5,6 +5,7 @@
     :safe-area-inset-bottom="true"
     :close-on-click-modal="true"
     custom-style="border-radius: 32rpx 32rpx 0 0; padding: 40rpx 32rpx"
+    @close="handeClosePopup"
   >
     <view class="mb-5 text-center text-base text-gray-700 font-semibold">
       {{ patchStore.cropApiType === 'ADD' ? '新增作物' : '编辑作物' }}
@@ -59,7 +60,7 @@
     </view>
 
     <wd-datetime-picker
-        :model-value="new Date(patchStore.recordForm.date).getTime()"
+        :model-value="new Date(patchStore.cropForm.date).getTime()"
         v-model:visible="showTimePicker"
         type="date"
         :max-date="Date.now()"
@@ -77,14 +78,21 @@ import { formatDate } from "@/utils";
 const patchStore = usePatchStore()
 const showTimePicker = ref(false)
 
-
 function onDateConfirm({ value }){
-  patchStore.recordForm.date = formatDate(new Date(value))
+  patchStore.cropForm.date = formatDate(new Date(value))
   showTimePicker.value = false
 }
 
+function handeClosePopup() {
+  setTimeout(() => {
+    patchStore.showPatchFab = true
+    patchStore.showRecordFab = true
+  }, 300)
+}
+
 function cancelClick() {
-  patchStore.showRecordPopup = false
+  patchStore.showCropPopup = false
+  handeClosePopup()
 }
 
 async function deleteClick() {
@@ -112,13 +120,16 @@ async function saveClick() {
   if (patchStore.cropApiType === 'ADD') {
     await patchStore.addCropApi()
     await patchStore.queryPatch(patchStore.currentPatch.id)
+    await patchStore.queryPatchList()
     uni.showToast({ title: '新增作物成功', icon: 'none' })
   } else if (patchStore.cropApiType === 'UPDATE') {
     await patchStore.updateCropApi(patchStore.cropForm.id)
     await patchStore.queryPatch(patchStore.currentPatch.id)
+    await patchStore.queryPatchList()
     uni.showToast({ title: '更新作物成功', icon: 'none' })
   }
 
   patchStore.showCropPopup = false
+  handeClosePopup()
 }
 </script>

src/pages/index/index.vue

@@ -15,10 +15,14 @@
 
     <view class="p-3">
       <wd-search v-model="patchStore.patchSearch"
-                 :maxlength="20" :placeholder-left="true" :hide-cancel="true"
+                 :maxlength="20" :placeholder-left="true"
                  placeholder="请输入菜地名称或者菜地地点"
                  @change="patchStore.queryPatchList()"
-                 @clear="patchStore.queryPatchList()"/>
+                 @clear="patchStore.queryPatchList()">
+        <template #suffix>
+          <wd-button type="primary" icon="refresh" round @click="patchStore.queryPatchList()"/>
+        </template>
+      </wd-search>
     </view>
 
     <wd-card v-for="(item, index) in patchStore.patchList" :key="item.id">
@@ -38,7 +42,7 @@
 
       <template #footer>
         <view class="flex-1 flex justify-between items-center">
-          <view v-if="item.crop" class="flex flex-col gap-1">
+          <view v-if="item.crop" class="flex flex-col gap-1" @click="updateCropClick(item)">
             <view class="text-base font-medium">
               {{ item.crop.name }}
               <text class="text-sm text-gray-400 font-normal ml-1">{{ item.crop.variety }}</text>
@@ -65,6 +69,7 @@
     </liu-drag-button>
 
     <patch-popup />
+    <crop-popup />
     <view class="h-[10px]"></view>
   </view>
 </template>
@@ -76,6 +81,7 @@ import appLogo from '@/static/logo.png'
 import { usePatchStore } from "@/stores/patch";
 import type { ICrop, IPatch } from "@/types";
 import PatchPopup from "@/components/PatchPopup.vue";
+import CropPopup from "@/components/CropPopup.vue";
 
 defineOptions({ name: 'Home' })
 
@@ -144,4 +150,12 @@ function handlePreview(crop: ICrop) {
   const fullUrls = crop.images?.map(url => `${patchStore.baseUrl}/${url}`) as string[]
   uni.previewImage({ urls: fullUrls, current: fullUrls[0] })
 }
+
+function updateCropClick(patch: IPatch) {
+  patchStore.currentPatch = patch
+  patchStore.showPatchFab = false
+  patchStore.cropForm = JSON.parse(JSON.stringify(patch.crop))
+  patchStore.cropApiType = 'UPDATE'
+  patchStore.showCropPopup = true
+}
 </script>

src/stores/patch.ts

@@ -38,12 +38,14 @@ export const usePatchStore = defineStore('patch', {
   }),
   actions: {
     async queryPatchList() {
+      this.patchList = []
       this.patchList = await this.queryPatchListApi()
     },
     async queryPatch(patchId: number) {
       this.currentPatch = await this.queryPatchApi(patchId)
     },
     async queryRecordList(cropId: number) {
+      this.recordList = []
       this.recordList = await this.queryRecordListApi(cropId)
     },
     async queryPatchListApi() {