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

<script setup lang="ts">
import {computed, ref} from 'vue';

import {useVbenModal} from '@vben/common-ui';
import {$t} from '@vben/locales';
import {cloneDeep} from '@vben/utils';

import {useVbenForm} from '#/adapter/form';
import {
  rentalOrderAdd,
  rentalOrderInfo,
  rentalOrderUpdate
} from '#/api/property/rentalOrder';
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';

import {plantsProductList} from "#/api/property/productManagement";
import {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";
const emit = defineEmits<{ reload: [] }>();

const isUpdate = ref(false);
const planList = ref<RentalPlanVO[]>([]);
const plantsList = ref<PropertyVO[]>([]);
const title = computed(() => {
  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const modalSchema = [
  {
    label: '主键',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '客户名称',
    fieldName: 'customerName',
    component: 'Input',
    rules: 'required',
  },
  {
    label: '客户类型',
    fieldName: 'customerType',
    component: 'Select',
    componentProps: {
      options: getDictOptions('wy_khlx')
    },
    rules: 'selectRequired',
  },
  {
    label: '租赁周期',
    fieldName: 'rentalPeriod',
    component: 'Select',
    componentProps: {
      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: any) => formValues.rentalType === '2',
      triggerFields: ['rentalType'],
    },
    rules: 'selectRequired',
    formItemClass: 'col-span-2'
  },
  {
    label: '方案详情',
    fieldName: 'planInfo',
    component: 'Input',
    dependencies: {
      // 仅当 租赁方式 为 2（套餐） 时显示
      show: (formValues: any) => formValues.rentalType === '2' && formValues.planId != null,
      triggerFields: ['rentalType'],
    },
    formItemClass: 'col-span-2',
    componentProps: {}

  },
  {
    label: '绿植产品',
    fieldName: 'productId',
    component: 'ApiSelect',
    dependencies: {
      // 仅当 租赁方式 为 1（单点） 时显示
      show: (formValues: any) => formValues.rentalType === '1',
      triggerFields: ['rentalType'],
    },
    rules: 'selectRequired',
    formItemClass: 'col-span-2',
    componentProps: {
      api: async () => {
        const res = await plantsProductList({pageNum: 1, pageSize: 1000, inventory: 1});
        plantsList.value = res.rows || [];
        return plantsList.value.map(item => ({
          label: item.plantName + '-' + item.plantCode + '\xa0\xa0租金（元）：' + item.rent + '\xa0\xa0库存数量：' + item.inventory,
          value: item.id,
        }));
      },
      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',
          }])
        }
      },
      showSearch: true,
      filterOption: (input: any, option: any) =>
        option.label.toLowerCase().includes(input.toLowerCase()),
    }
  },
  {
    label: '租赁数量',
    fieldName: 'productNum',
    component: 'InputNumber',
    componentProps: {
      min: 1,
      precision: 0,
      step: 1,
      placeholder: '租赁数量不可超出绿植产品库存数量'
    },
    dependencies: {
      // 仅当 租赁方式 为 1（单点） 时显示
      show: (formValues: any) => formValues.rentalType === '1',
      triggerFields: ['rentalType', 'productId'],
    },
    rules: 'required',
  },
  {
    label: '应付总额',
    fieldName: 'totalAmount',
    component: 'span',
    dependencies: {
      // 仅当 租赁方式 为 1（单点） 时显示
      show: (formValues: any) => formValues.totalAmount,
      triggerFields: ['totalAmount'],
    },
  },
  // {
  //   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: any) => 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: any) => formValues.contractStatus != null && formValues.contractStatus != 1,
      triggerFields: ['contractStatus'],
    },
    rules: 'required'
  },
];
const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    // 默认占满两列
    formItemClass: 'col-span-1',
    // 默认label宽度 px
    labelWidth: 80,
    // 通用配置项 会影响到所有表单项
    componentProps: {
      class: 'w-full',
    }
  },
  schema: modalSchema,
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});


const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
  {
    initializedGetter: defaultFormValueGetter(formApi),
    currentGetter: defaultFormValueGetter(formApi),
  },
);

const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
  class: 'w-[70%]',
  fullscreenButton: false,
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: handleConfirm,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const {id} = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;
    await getPlanList()
    // await getPlantsList()
    if (isUpdate.value && id) {
      const record = await rentalOrderInfo(id);
      await formApi.setValues(record);
    }
    await markInitialized();

    modalApi.modalLoading(false);
  },
});

async function handleConfirm() {
  try {
    modalApi.lock(true);
    const {valid} = await formApi.validate();
    if (!valid) {
      return;
    }
    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
    const data = cloneDeep(await formApi.getValues());
    if (data.rentalType == 1) {
      data.planId = undefined;
    } else {
      data.productId = undefined;
      data.productNum = undefined;
    }
    await (isUpdate.value ? rentalOrderUpdate(data) : rentalOrderAdd(data));
    resetInitialized();
    emit('reload');
    modalApi.close();
  } catch (error) {
    console.error(error);
  } finally {
    modalApi.lock(false);
  }
}

//获取有库存的绿植
async function getPlantsList() {
  let params = {
    pageNum: 1,
    pageSize: 1000,
    inventory: 0
  }
  const res = await plantsProductList(params)
  plantsList.value = res.rows
  // formApi.updateSchema([
  //   {
  //     componentProps: () => ({
  //       class: 'w-full',
  //       options: res.rows.map(item => ({
  //         label: item.plantName + '-' + item.plantCode + '\xa0\xa0租金（元）：' + item.rent + '\xa0\xa0库存数量：' + item.inventory,
  //         value: item.id,
  //       })),
  //       placeholder: '请选择绿植',
  //       showSearch: true,
  //       filterOption: (input: any, option: any) =>
  //         option.label.toLowerCase().includes(input.toLowerCase()),
  //     }),
  //     fieldName: 'productId',
  //   },
  // ]);
}

//获取绿植租赁方案
async function getPlanList() {
  let params = {
    pageNum: 1,
    pageSize: 1000,
    state: 0,
  }
  const res = await rentalPlanList(params)
  planList.value = res.rows
  formApi.updateSchema([
    {
      componentProps: () => ({
        class: 'w-full',
        options: res.rows.map(item => ({
          label: item.planName,
          value: item.id,
        })),
        placeholder: '请选择绿植',
        showSearch: true,
        filterOption: (input: any, option: any) =>
          option.label.toLowerCase().includes(input.toLowerCase()),
      }),
      fieldName: 'planId',
    },
  ]);
}

async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
}

</script>

<template>
  <BasicModal :title="title">
    <BasicForm/>
  </BasicModal>
</template>