1、租赁订单

apps/web-antd/src/views/property/greenPlantRentalManagement/orderManagement/data.ts

@@ -149,170 +149,29 @@ export const columns: VxeGridProps['columns'] = [
   },
 ];
 
-export const modalSchema: FormSchemaGetter = () => [
+export const planInfoColumns: VxeGridProps['columns'] = [
   {
-    label: '主键',
+    title: '序号',
-    fieldName: 'id',
+    field: 'id',
-    component: 'Input',
+    width: 100,
-    dependencies: {
+    align: 'center'
-      show: () => false,
-      triggerFields: [''],
-    },
   },
   {
-    label: '客户名称',
+    title: '产品名称',
-    fieldName: 'customerName',
+    field: 'plantName',
-    component: 'Input',
+    minWidth: 100,
-    rules: 'required',
+    align: 'center'
   },
   {
-    label: '客户类型',
+    title: '产品租金',
-    fieldName: 'customerType',
+    field: 'rent',
-    component: 'Select',
+    minWidth: 100,
-    componentProps: {
+    align: 'center'
-      options: getDictOptions('wy_khlx')
-    },
-    rules: 'selectRequired',
   },
   {
-    label: '租赁周期',
+    title: '产品数量',
-    fieldName: 'rentalPeriod',
+    field: 'inventory',
-    component: 'Select',
+    minWidth: 100,
-    componentProps: {
+    align: 'center'
-      options: getDictOptions('wy_time_unit')
-    },
-    rules: 'selectRequired',
   },
-  {
+]
-    label: '租赁时间',
-    fieldName: 'rentalTime',
-    component: 'RangePicker',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD',
-      valueFormat: 'YYYY-MM-DD',
-    },
-    rules: 'selectRequired',
-  },
-  {
-    label: '租赁方式',
-    fieldName: 'rentalType',
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_zlfs')
-    },
-    rules: 'selectRequired',
-    formItemClass: 'col-span-2'
-  },
-  {
-    label: '租赁方案',
-    fieldName: 'planId',
-    component: 'Select',
-    dependencies: {
-      // 仅当 租赁方式 为 2（套餐） 时显示
-      show: (formValues) => formValues.rentalType === '2',
-      triggerFields: ['rentalType'],
-    },
-    rules: 'selectRequired',
-    formItemClass: 'col-span-2'
-  },
-  {
-    label: '方案详情',
-    fieldName: 'planInfo',
-    component: 'Input',
-    dependencies: {
-      // 仅当 租赁方式 为 2（套餐） 时显示
-      show: (formValues) => formValues.rentalType === '2' && formValues.planId != null,
-      triggerFields: ['rentalType'],
-    },
-    formItemClass: 'col-span-2'
-  },
-  {
-    label: '绿植产品',
-    fieldName: 'productId',
-    component: 'Select',
-    dependencies: {
-      // 仅当 租赁方式 为 1（单点） 时显示
-      show: (formValues) => formValues.rentalType === '1',
-      triggerFields: ['rentalType'],
-    },
-    rules: 'selectRequired',
-    formItemClass: 'col-span-2'
-  },
-  {
-    label: '租赁数量',
-    fieldName: 'productNum',
-    component: 'InputNumber',
-    componentProps: {
-      min: 1,
-      precision: 0,
-      step: 1,
-      placeholder:'租赁数量不可超出绿植产品库存数量'
-    },
-    dependencies: {
-      // 仅当 租赁方式 为 1（单点） 时显示
-      show: (formValues) => formValues.rentalType === '1',
-      triggerFields: ['rentalType', 'productId'],
-    },
-    rules: 'required',
-  },
-  // {
-  //   label: '应付总额',
-  //   fieldName: 'totalAmount',
-  //   component: 'Input',
-  //   rules: 'required',
-  // },
-  // {
-  //   label: '支付状态',
-  //   fieldName: 'paymentStatus',
-  //   component: 'Select',
-  //   componentProps: {
-  //     options: getDictOptions('pro_charging_status'),
-  //   },
-  //   rules: 'selectRequired',
-  // },
-  // {
-  //   label: '是否续租',
-  //   fieldName: 'isRelet',
-  //   component: 'RadioGroup',
-  //   componentProps: {
-  //     buttonStyle: 'solid',
-  //     optionType: 'button',
-  //     options: getDictOptions('wy_sf'),
-  //   },
-  // },
-  {
-    label: '合同状态',
-    fieldName: 'contractStatus',
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_htzt'),
-    },
-    rules: 'selectRequired'
-  },
-  {
-    label: '合同编号',
-    fieldName: 'contractCode',
-    component: 'Input',
-    dependencies: {
-      show: (formValues) => formValues.contractStatus != null && formValues.contractStatus != 1,
-      triggerFields: ['contractStatus'],
-    },
-    rules: 'required'
-  },
-  {
-    label: '签署时间',
-    fieldName: 'signTime',
-    component: 'DatePicker',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD',
-      valueFormat: 'YYYY-MM-DD',
-    },
-    dependencies: {
-      show: (formValues) => formValues.contractStatus != null && formValues.contractStatus != 1,
-      triggerFields: ['contractStatus'],
-    },
-    rules: 'required'
-  },
-];

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

@@ -89,10 +89,10 @@ function handleAdd() {
   modalApi.open();
 }
 
-async function handleEdit(row: Required<RentalOrderForm>) {
+// async function handleEdit(row: Required<RentalOrderForm>) {
-  modalApi.setData({ id: row.id });
+//   modalApi.setData({ id: row.id });
-  modalApi.open();
+//   modalApi.open();
-}
+// }
 
 async function handleDelete(row: Required<RentalOrderForm>) {
   await rentalOrderRemove(row.id);

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);
+        plantInfo.value = plantsList.value.find(item => item.id === value);
-        if (plants) {
+        if (plantInfo.value) {
-          formApi.updateSchema([{
+          const formValues = await formApi.getValues();
-            componentProps: () => ({
+          if (formValues.productNum) {
-              min: 1,
+            singleAmount.value = (plantInfo.value.rent * formValues.productNum).toFixed(2);
-              max: plants.inventory,
+          }
-              precision: 0,
-            }),
-            fieldName: 'productNum',
-          }])
-        }
-        const formValues = await formApi.getValues();
-        if(formValues.productNum){
-          await formApi.setValues({
-            totalAmount: plants.rent*formValues.productNum,
-          });
         }
       },
       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,
+      show: (formValues: any) => formValues.productNum&&formValues.productId&&formValues.rentalType === '1',
-      triggerFields: ['totalAmount'],
+      triggerFields: ['productNum','rentalType'],
-      disabled:true,
+      disabled: true,
-    },
-    componentProps: {
-      addonAfter: '元',
-      precision: 2,
-      stringMode: 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){
+    if (data.rentalTime) {
-      data.startTime=data.rentalTime[0];
+      data.startTime = data.rentalTime[0];
-      data.endTime=data.rentalTime[1];
+      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) {
+  plantsList.value=res.productList;
-  }
+  // planProducts.value = [{
-  formApi.updateSchema([{
+  //   plantName: '发财树',
-    fieldName: 'planInfo',
+  //   inventory: 3,
-    componentProps: {
+  //   rent: 10,
-      isHtml: true,
+  // }, {
-      value: '<div>222222222222222222</div>'
+  //   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>