first commit

2026-04-09 15:09:34 +08:00
commit d8e3a63df1
2246 changed files with 352109 additions and 0 deletions
@@ -0,0 +1,90 @@
+<!-- 自定义渲染 -->
+<template>
+  <!-- 自定义表单 -->
+  <BasicForm @register="registerForm" style="margin-top: 20px">
+    <!--  #phone对应的是formSchemas对应slot(phone)插槽    -->
+    <template #phone="{ model, field }">
+      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
+      <a-input v-model:value="model[field]" placeholder="请输入手机号" />
+      <span class="font-color">请输入您的手机号，方便我们联系您</span>
+    </template>
+    <template #feedback="{ model, field }">
+      <JEditor v-model:value="model[field]" placeholder="请输入问题反馈" />
+      <span class="font-color">请您图文并茂，方便我们了解问题并及时反馈</span>
+    </template>
+  </BasicForm>
+</template>
+
+<script lang="ts" setup>
+  //引入依赖
+  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
+  import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
+  import { h } from 'vue';
+  import { Input } from 'ant-design-vue';
+
+  //自定义表单字段
+  const formSchemas: FormSchema[] = [
+    {
+      field: 'productName',
+      label: '商品名称',
+      component: 'Input',
+    },
+    {
+      field: 'price',
+      label: '价格',
+      component: 'InputNumber',
+    },
+    {
+      field: 'buyNums',
+      label: '购买个数',
+      component: 'InputNumber',
+      //model 单签表单对象，field 当前字段
+      render: ({ model, field }) => {
+        //渲染自定义组件，以Input为例
+        return h(Input, {
+          placeholder: '请输入购买个数',
+          value: model[field],
+          style: { width: '100%' },
+          type: 'number',
+          onChange: (e: ChangeEvent) => {
+            model[field] = e.target.value;
+          },
+        });
+      },
+    },
+    {
+      field: 'describe',
+      label: '描述',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      //渲染 values当前表单所有值
+      render: ({ values }) => {
+        let productName = values.productName?values.productName:'';
+        let price = values.price ? values.price : 0;
+        let buyNums = values.buyNums ? values.buyNums : 0;
+        return '购买商品名称：' + productName + ', 总价格: ' + price * buyNums + '元';
+      },
+    },
+  ];
+
+  /**
+   * BasicForm绑定注册;
+   */
+  const [registerForm] = useForm({
+    //注册表单列
+    schemas: formSchemas,
+    showResetButton: false,
+    labelWidth: '150px',
+    submitButtonOptions: { text: '提交', preIcon: '' },
+    actionColOptions: { span: 17 },
+  });
+</script>
+
+<style scoped>
+  /** 数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>