1、租赁订单

apps/web-antd/src/views/property/greenPlantRentalManagement/orderManagement/rentalOrder-modal.vue

@@ -18,12 +18,18 @@ import {rentalPlanInfo, rentalPlanList} from "#/api/property/rentalPlan";
 import {getDictOptions} from "#/utils/dict";
 import type {PropertyVO} from "#/api/property/productManagement/model";
 import type {RentalPlanVO} from "#/api/property/rentalPlan/model";
+import {planInfoColumns} from './data';
+import {Table} from "ant-design-vue";
 
 const emit = defineEmits<{ reload: [] }>();
 
 const isUpdate = ref(false);
 const planList = ref<RentalPlanVO[]>([]);
 const plantsList = ref<PropertyVO[]>([]);
+const planProducts = ref<any[]>([]);
+const totalAmount = ref(0);
+const singleAmount = ref(0);
+const plantInfo = ref<PropertyVO>();
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
@@ -104,7 +110,6 @@ const modalSchema = [
       },
       onChange: async (value: string) => {
         await getPlanProducts(value)
-        // const plan= planList.value.find(item => item.id === value);
       },
       showSearch: true,
       filterOption: (input: any, option: any) =>
@@ -114,7 +119,8 @@ const modalSchema = [
   {
     label: '方案详情',
     fieldName: 'planInfo',
-    component: 'Text',
+    component: 'Input',
+    slots: {default: 'planInfo'},
     dependencies: {
       // 仅当 租赁方式 为 2（套餐） 时显示
       show: (formValues: any) => formValues.rentalType === '2' && formValues.planId != null,
@@ -143,22 +149,12 @@ const modalSchema = [
         }));
       },
       onChange: async (value: string) => {
-        const plants = plantsList.value.find(item => item.id === value);
-        if (plants) {
-          formApi.updateSchema([{
-            componentProps: () => ({
-              min: 1,
-              max: plants.inventory,
-              precision: 0,
-            }),
-            fieldName: 'productNum',
-          }])
-        }
-        const formValues = await formApi.getValues();
-        if(formValues.productNum){
-          await formApi.setValues({
-            totalAmount: plants.rent*formValues.productNum,
-          });
+        plantInfo.value = plantsList.value.find(item => item.id === value);
+        if (plantInfo.value) {
+          const formValues = await formApi.getValues();
+          if (formValues.productNum) {
+            singleAmount.value = (plantInfo.value.rent * formValues.productNum).toFixed(2);
+          }
         }
       },
       showSearch: true,
@@ -174,7 +170,12 @@ const modalSchema = [
       min: 1,
       precision: 0,
       step: 1,
-      placeholder: '租赁数量不可超出绿植产品库存数量'
+      placeholder: '租赁数量不可超出绿植产品库存数量',
+      onChange: async (value: number) => {
+        if (plantInfo.value) {
+          singleAmount.value = (plantInfo.value.rent * value).toFixed(2);
+        }
+      },
     },
     dependencies: {
       // 仅当 租赁方式 为 1（单点） 时显示
@@ -184,20 +185,17 @@ const modalSchema = [
     rules: 'required',
   },
   {
-    label: '应付总额',
+    label: '总金额（元）',
     fieldName: 'totalAmount',
     component: 'InputNumber',
+    slots: {default: 'totalAmount'},
     dependencies: {
       // 仅当 租赁方式 为 1（单点） 时显示
-      show: (formValues: any) => formValues.totalAmount,
-      triggerFields: ['totalAmount'],
-      disabled:true,
-    },
-    componentProps: {
-      addonAfter: '元',
-      precision: 2,
-      stringMode: true,
+      show: (formValues: any) => formValues.productNum&&formValues.productId&&formValues.rentalType === '1',
+      triggerFields: ['productNum','rentalType'],
+      disabled: true,
     },
+    labelWidth: 110
   },
   {
     label: '是否续租',
@@ -304,14 +302,18 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     if (data.rentalType == 1) {
       data.planId = undefined;
+      data.totalAmount = singleAmount.value
     } else {
       data.productId = undefined;
       data.productNum = undefined;
+      data.productList = plantsList.value
+      data.totalAmount = totalAmount.value
     }
-    if(data.rentalTime){
-      data.startTime=data.rentalTime[0];
-      data.endTime=data.rentalTime[1];
+    if (data.rentalTime) {
+      data.startTime = data.rentalTime[0];
+      data.endTime = data.rentalTime[1];
     }
+
     await (isUpdate.value ? rentalOrderUpdate(data) : rentalOrderAdd(data));
     resetInitialized();
     emit('reload');
@@ -326,16 +328,19 @@ async function handleConfirm() {
 //获取有库存的绿植
 async function getPlanProducts(id: string) {
   const res = await rentalPlanInfo(id)
-  if (res.productList) {
-  }
-  formApi.updateSchema([{
-    fieldName: 'planInfo',
-    componentProps: {
-      isHtml: true,
-      value: '<div>222222222222222222</div>'
-    },
-  },
-  ]);
+  plantsList.value=res.productList;
+  // planProducts.value = [{
+  //   plantName: '发财树',
+  //   inventory: 3,
+  //   rent: 10,
+  // }, {
+  //   plantName: '绿萝',
+  //   inventory: 5,
+  //   rent: 3,
+  // }
+  // ]
+  totalAmount.value = planProducts.value?.reduce((sum, item: any) => sum + (item.rent * item.inventory), 0).toFixed(2)
+
 }
 
 async function handleClosed() {
@@ -347,7 +352,32 @@ async function handleClosed() {
 
 <template>
   <BasicModal :title="title">
-    <BasicForm/>
+    <BasicForm>
+      <template #planInfo="slotProps">
+        <div v-if="planProducts.length" style="width: 100%">
+          <Table :dataSource="planProducts" :columns="planInfoColumns" :pagination="false"
+                 bordered size="small">
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.field === 'id'">
+                {{ index + 1 }}
+              </template>
+              <template v-else>
+                {{ record[column.field] }}
+              </template>
+            </template>
+            <template #footer>
+              <div style="text-align: right;margin-right: 20px">
+                <b>总金额（元）：</b>
+                {{ totalAmount }}
+              </div>
+            </template>
+          </Table>
+        </div>
+      </template>
+      <template #totalAmount="slotProps">
+        <div>{{ singleAmount }}</div>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>