feat: 合同文档模板设置

2025-10-12 15:08:29 +08:00
parent fc07ed06d5
commit 8e43e1835f
38 changed files with 4560 additions and 1410 deletions
@@ -0,0 +1,134 @@
+<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>