135 lines
3.7 KiB
Vue
135 lines
3.7 KiB
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>
|