first commit

src/views/components/form/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-card class="mb-5">
+    <eo-form ref="formRef" :fieldList="fieldList" :model="model" @submit="handleSubmit" @change="handleChange">
+      <!-- <template #header> 基本表单header </template> -->
+      <!-- <template #footer>基本表单footer</template> -->
+
+      <!-- <template #buttons="{ model, formRef }">
+        <a-button @click="handleSubmit(model, formRef)">提交</a-button>
+      </template> -->
+
+      <!-- <template #relationTable>
+        <div>关系人slot</div>
+      </template> -->
+    </eo-form>
+    <a-space>
+      <a-button type="primary" @click="onSubmit">父组件提交</a-button>
+      <a-button @click="onSwith">启用/禁用</a-button>
+    </a-space>
+  </a-card>
+</template>
+<script lang="ts" setup>
+import EoForm from '@/components/wyg-form/index.vue';
+import { formConfig } from './config';
+import type { Form } from '@/components/wyg-form/interface';
+import type { Ref } from 'vue';
+
+const formRef = ref();
+
+let fieldList: Form.FieldItem[] = formConfig;
+const model = ref<Record<string, any>>({
+  name: '张三',
+  age: 18,
+});
+// 提交按钮在子组件
+const handleSubmit = (model: Record<string, any>) => {
+  console.log(model, 'model====');
+};
+// 提交按钮在父组件
+const onSubmit = async () => {
+  const res = await formRef?.value?.submit();
+  console.log(formRef, 'formRef====');
+  console.log(res, 'res====');
+};
+// 修改Form组件相关属性
+const status = ref(false);
+const onSwith = () => {
+  status.value = !status.value;
+  formRef?.value?.setForm({ disabled: !status.value });
+};
+
+const handleChange = (params: any) => {
+  const { key, val } = params;
+  if (key === 'sex') {
+    const required = val === 'F';
+    // 更新form配置
+    const updateList: any = [
+      {
+        field: 'school',
+        required: required,
+        disabled: !required,
+      },
+    ];
+    formRef?.value?.updateFieldsList(updateList);
+    formRef?.value?.setModel({ age: 26 });
+  }
+};
+</script>