first commit

src/views/components/form/config.ts

@@ -0,0 +1,158 @@
+import type { Form } from '@/components/wyg-form/interface';
+export const options = [
+  {
+    value: 'beijing',
+    label: 'Beijing',
+    children: [
+      {
+        value: 'chaoyang',
+        label: 'ChaoYang',
+        children: [
+          {
+            value: 'datunli',
+            label: 'Datunli',
+          },
+        ],
+      },
+      {
+        value: 'haidian',
+        label: 'Haidian',
+      },
+      {
+        value: 'dongcheng',
+        label: 'Dongcheng',
+      },
+      {
+        value: 'xicheng',
+        label: 'Xicheng',
+        children: [
+          {
+            value: 'jinrongjie',
+            label: 'Jinrongjie',
+          },
+          {
+            value: 'tianqiao',
+            label: 'Tianqiao',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'shanghai',
+    label: 'Shanghai',
+    children: [
+      {
+        value: 'huangpu',
+        label: 'Huangpu',
+      },
+    ],
+  },
+];
+
+export const formConfig: Form.FieldItem[] = [
+  {
+    field: 'basic',
+    label: '基本信息',
+    component: 'title',
+  },
+  {
+    field: 'name',
+    label: '姓名',
+    required: true,
+    component: 'input',
+    allowClear: true,
+    colProps: {
+      span: 20,
+      offset: 100,
+    },
+    rules: [{ required: true, message: 'name is required' }],
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    required: true,
+    component: 'input',
+    allowClear: true,
+  },
+  {
+    field: 'hobby',
+    label: '爱好',
+    required: true,
+    component: 'input',
+  },
+  {
+    field: 'school',
+    label: '学校',
+    required: true,
+    component: 'input',
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    required: true,
+    component: 'select',
+    lists: [
+      {
+        label: '男',
+        value: 'M',
+      },
+      {
+        label: '女',
+        value: 'F',
+      },
+    ],
+  },
+  {
+    field: 'birthTime',
+    label: '时间',
+    component: 'time',
+  },
+  {
+    field: 'birthDate',
+    label: '出生日期',
+    component: 'date',
+  },
+  {
+    field: 'rangeDate',
+    label: '日期范围',
+    component: 'rangeDate',
+  },
+  {
+    field: 'address',
+    label: '地址',
+    component: 'cascader',
+    options,
+  },
+  {
+    field: 'desc',
+    label: '自我介绍',
+    required: true,
+    component: 'input',
+  },
+  {
+    field: 'contact',
+    label: '联系信息',
+    component: 'title',
+  },
+  {
+    field: 'tel',
+    label: '联系电话',
+    component: 'input',
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'input',
+  },
+  {
+    field: 'relation',
+    label: '关系信息',
+    component: 'title',
+  },
+  {
+    field: 'relationTable',
+    label: '关系信息',
+    component: 'slot',
+  },
+];

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>