fix: 为租赁方案绿植产品组合包添加必选校验

apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-modal.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Button, Table } from 'ant-design-vue';
+import { Button, message, Table } from 'ant-design-vue';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import { rentalPlanAdd, rentalPlanInfo, rentalPlanUpdate } from '#/api/property/rentalPlan';
+import {
+  rentalPlanAdd,
+  rentalPlanInfo,
+  rentalPlanUpdate,
+} from '#/api/property/rentalPlan';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
@@ -19,9 +23,13 @@ const emit = defineEmits<{ reload: [] }>();
 const isUpdate = ref(false);
 const isReadonly = ref(false);
 const title = computed(() => {
-    return isUpdate.value ? $t('pages.common.edit') : isReadonly.value ? '详情' : $t('pages.common.add');
+  return isUpdate.value
+    ? $t('pages.common.edit')
+    : isReadonly.value
+      ? '详情'
+      : $t('pages.common.add');
 });
-const editId = ref<string | number | undefined>('')
+const editId = ref<string | number | undefined>('');
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
@@ -58,12 +66,15 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-    const { id, readonly } = modalApi.getData() as { id?: number | string, readonly?: boolean; };
+    const { id, readonly } = modalApi.getData() as {
+      id?: number | string;
+      readonly?: boolean;
+    };
     editId.value = id || '';
     isReadonly.value = !!readonly;
-    if(isReadonly.value){
+    if (isReadonly.value) {
       isUpdate.value = false;
-    }else{
+    } else {
       isUpdate.value = !!id;
     }
     // 查看与编辑时需要获取详情
@@ -71,7 +82,11 @@ const [BasicModal, modalApi] = useVbenModal({
       const record = await rentalPlanInfo(id);
       // 后端返回绿植产品包列表结构处理
       // detailTable.value = record.productList.map((item:any) => {...item.product,item.productNum,});
-      detailTable.value = record.productList.map((item: any) => ({ ...item.product, productNum: item.productNum,productId: item.productId }));
+      detailTable.value = record.productList.map((item: any) => ({
+        ...item.product,
+        productNum: item.productNum,
+        productId: item.productId,
+      }));
 
       await formApi.setValues(record);
     }
@@ -93,7 +108,13 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     // data.productIds = detailTable.value.map((item:any) => item.productId);
     data.productList = detailTable.value;
-    await (isUpdate.value ? rentalPlanUpdate({...data,id:editId.value}) : rentalPlanAdd(data));
+    if (data.productList.length == 0) {
+      message.error('请添加植物组合包产品');
+      return;
+    }
+    await (isUpdate.value
+      ? rentalPlanUpdate({ ...data, id: editId.value })
+      : rentalPlanAdd(data));
     resetInitialized();
     emit('reload');
     modalApi.close();
@@ -146,18 +167,19 @@ const detailColumns = [
 ];
 function handleAddDetail() {
   // 传递已选产品id列表
-  const selectedIds = detailTable.value.map((item: any) => item.productId || item.plantName);
-  detailModalApi.setData({ selectedIds,add:true });
+  const selectedIds = detailTable.value.map(
+    (item: any) => item.productId || item.plantName,
+  );
+  detailModalApi.setData({ selectedIds, add: true });
   detailModalApi.open();
 }
 //添加植物组合包产品
-function handleDetailReload (data: any) {
+function handleDetailReload(data: any) {
   detailTable.value.push(data);
 }
 // 编辑植物组合包产品
-function handleEditDetailReload (data: any) {
+function handleEditDetailReload(data: any) {
   detailTable.value[data.index] = data;
-
 }
 // 删除植物组合包产品
 function handleDeleteDetail(record: any, index: number) {
@@ -171,14 +193,16 @@ function handleViewDetail(record: any) {
 // 编辑产品详情
 function handleEditDetail(record: any, index: number) {
   // 编辑时，排除当前项id
-  const selectedIds = detailTable.value.filter((_: any, i: number) => i !== index).map((item: any) => item.productId || item.plantName);
-  detailModalApi.setData({ ...record, index, selectedIds,edit:true });
+  const selectedIds = detailTable.value
+    .filter((_: any, i: number) => i !== index)
+    .map((item: any) => item.productId || item.plantName);
+  detailModalApi.setData({ ...record, index, selectedIds, edit: true });
   detailModalApi.open();
 }
 //分类字典
 function getPlantTypeLabel(value: string | number) {
   const opts = getDictOptions('pro_product_classification');
-  const found = opts.find(opt => opt.value == value);
+  const found = opts.find((opt) => opt.value == value);
   return found ? found.label : value;
 }
 </script>
@@ -186,10 +210,18 @@ function getPlantTypeLabel(value: string | number) {
 <template>
   <BasicModal :title="title">
     <BasicForm />
-        <!-- 添加产品部分、 -->
+    <!-- 添加产品部分、 -->
     <div class="mt-4">
       <div class="mb-2 flex items-center justify-between">
-        <h3 class="text-lg font-medium">{{ isUpdate ? '编辑植物组合包产品' : isReadonly ? '查看植物组合包产品' : '添加植物组合包产品' }} </h3>
+        <h3 class="text-lg font-medium">
+          {{
+            isUpdate
+              ? '编辑植物组合包产品'
+              : isReadonly
+                ? '查看植物组合包产品'
+                : '添加植物组合包产品'
+          }}
+        </h3>
         <a-button v-if="!isReadonly" type="primary" @click="handleAddDetail">
           {{ $t('pages.common.add') }}
         </a-button>
@@ -204,16 +236,38 @@ function getPlantTypeLabel(value: string | number) {
             {{ index + 1 }}
           </template>
           <template v-else-if="column.key === 'plantType'">
-            <div>{{getPlantTypeLabel(record.plantType)}}</div>
+            <div>{{ getPlantTypeLabel(record.plantType) }}</div>
           </template>
           <template v-else-if="column.key === 'action'">
-           <template v-if="isReadonly">
-               <Button type="primary" size="small" style="margin-right: 5px;" @click="handleViewDetail(record)">查看</Button>
+            <template v-if="isReadonly">
+              <Button
+                type="primary"
+                size="small"
+                style="margin-right: 5px"
+                @click="handleViewDetail(record)"
+                >查看</Button
+              >
             </template>
-            <template v-else >
-              <Button type="primary" size="small" style="margin-right: 5px;" @click="handleViewDetail(record)">查看</Button>
-              <Button type="primary" size="small" style="margin-right: 5px;" @click="handleEditDetail(record, index)">编辑</Button>
-              <Button danger size="small" @click="handleDeleteDetail(record, index)">
+            <template v-else>
+              <Button
+                type="primary"
+                size="small"
+                style="margin-right: 5px"
+                @click="handleViewDetail(record)"
+                >查看</Button
+              >
+              <Button
+                type="primary"
+                size="small"
+                style="margin-right: 5px"
+                @click="handleEditDetail(record, index)"
+                >编辑</Button
+              >
+              <Button
+                danger
+                size="small"
+                @click="handleDeleteDetail(record, index)"
+              >
                 删除
               </Button>
             </template>
@@ -222,7 +276,10 @@ function getPlantTypeLabel(value: string | number) {
       </Table>
       <!-- <div>费用合计：{{ totalSumPeices }}元</div> -->
     </div>
-    <ProductDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
+    <ProductDetailModal
+      @reload="handleDetailReload"
+      @editReload="handleEditDetailReload"
+    />
   </BasicModal>
 </template>