leaser_front/src/views/setting/system/contract-settings/terms/incremental.vue

<template>
  <div
    class="border-solid border-[1px] border-[#f0f0f0] px-[10px] py-[15px] mt-[20px]"
  >
    <h4 class="text-[14px] text-[#505968] font-extrabold">递增条款</h4>
    <a-form
      ref="formRef"
      class="mt-[15px]"
      :model="increamForm"
      :rules="rules"
      auto-label-width
      layout="vertical"
    >
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="递增间隔" field="num" required>
            <a-input-number
              v-model="increamForm.num"
              :min="1"
              prepend="每隔"
              append="年"
              placeholder="请输入数字"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="单价递增" field="priceIncrease" required>
            <a-input v-model="increamForm.priceIncrease" placeholder="请选择">
              <template #append>
                <a-select
                  v-model="increamForm.priceIncreaseType"
                  style="width: 80px"
                >
                  <a-option :value="1">%</a-option>
                  <a-option :value="2">元</a-option>
                </a-select>
              </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保证金递增" field="bondIncrease" required>
            <a-input v-model="increamForm.bondIncrease" placeholder="请选择">
              <template #append>
                <a-select
                  v-model="increamForm.bondIncreaseType"
                  style="width: 80px"
                >
                  <a-option :value="1">%</a-option>
                  <a-option :value="2">元</a-option>
                </a-select>
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import type { FormInstance } from '@arco-design/web-vue';

  //  表单数据
  const formRef = ref<FormInstance>();
  const defaultForm: any = {
    num: null,
    priceIncrease: null,
    priceIncreaseType: 1,
    bondIncrease: null,
    bondIncreaseType: 1,
  };
  const increamForm = reactive<any>({ ...defaultForm });
  //  校验规则
  const rules = reactive({
    num: [{ required: true, message: '递增间隔不能为空' }],
    priceIncrease: [{ required: true, message: '单价递增不能为空' }],
    bondIncrease: [{ required: true, message: '保证金递增不能为空' }],
  });

  // 向父组件暴露数据与校验方法
  function getData() {
    const isEmptyValue = (v: any) =>
      v === undefined ||
      v === null ||
      (typeof v === 'string' && v.trim() === '');
    const {
      num,
      priceIncrease,
      priceIncreaseType,
      bondIncrease,
      bondIncreaseType,
    } = increamForm;
    if (
      isEmptyValue(num) ||
      isEmptyValue(priceIncrease) ||
      isEmptyValue(bondIncrease)
    ) {
      return {};
    }
    return {
      num: Number(num),
      priceIncrease: Number(priceIncrease),
      priceIncreaseType: Number(priceIncreaseType),
      bondIncrease: Number(bondIncrease),
      bondIncreaseType: Number(bondIncreaseType),
    };
  }
  async function validate() {
    return formRef.value?.validate?.();
  }
  defineExpose({ getData, validate });
</script>
<style lang="less" scoped>
  .options {
    display: flex;
    align-items: center;
    background-color: #f2f3f5;
    width: 100%;
    height: 36px;
    padding: 0 3px;

    .subItem {
      flex: 1;
      text-align: center;
      padding: 4px 0;
      cursor: pointer;

      &.isActive {
        background-color: #fff;
      }
    }
  }
</style>