el-form-renderer-vue3 1.0.0

package/src/view/HomeView.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">submit</el-button>
+      <el-button @click="resetForm">reset</el-button>
+    </el-form-item>
+  </el-form-renderer>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+  {
+    type: "input",
+    id: "name",
+    label: "name",
+    attrs: { "data-name": "form1" },
+    el: {
+      size: "default",
+      placeholder: "test placeholder",
+    },
+    rules: [
+      { required: true, message: "miss name", trigger: "blur" },
+      { min: 3, max: 5, message: "length between 3 to 5", trigger: "blur" },
+    ],
+  },
+  {
+    type: "select",
+    id: "region",
+    label: "area",
+    el: {
+      valueKey: "id",
+    },
+    options: [
+      {
+        label: "area1",
+        value: {
+          id: "shanghai",
+          name: "shanghai",
+        },
+      },
+      {
+        label: "area2",
+        value: {
+          id: "beijing",
+          name: "beijing",
+        },
+      },
+    ],
+    rules: [{ required: true, message: "miss area", trigger: "change" }],
+  },
+  {
+    type: "date-picker",
+    id: "date",
+    label: "date",
+    el: {
+      type: "datetime",
+      placeholder: "select date",
+      teleported: false,
+    },
+
+    rules: [{ type: "date", required: true, message: "miss date", trigger: "change" }],
+  },
+  {
+    type: "switch",
+    id: "delivery",
+    label: "delivery",
+  },
+  {
+    type: "checkbox-group",
+    id: "type",
+    label: "type",
+    default: [],
+    options: [
+      {
+        label: "typeA",
+        value: "A",
+      },
+      {
+        label: "typeB",
+        value: "B",
+      },
+      {
+        label: "typeC",
+        value: "C",
+      },
+    ],
+    rules: [{ type: "array", required: true, message: "miss type", trigger: "change" }],
+  },
+  {
+    type: "radio-group",
+    id: "resource",
+    label: "resource",
+    options: [
+      {
+        label: "resourceA",
+      },
+      {
+        label: "resourceB",
+      },
+    ],
+    rules: [{ required: true, message: "miss resource", trigger: "change" }],
+  },
+  {
+    type: "input",
+    id: "desc",
+    label: "desc",
+    el: {
+      type: "textarea",
+    },
+    rules: [{ required: true, message: "miss desc", trigger: "blur" }],
+  },
+]);
+const ruleForm = ref();
+
+const submitForm = () => {
+  try {
+    ruleForm.value.methods.validate((valid) => {
+      if (valid) {
+        console.log("OK");
+      } else {
+        console.log("error submit!!");
+        return false;
+      }
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+const resetForm = () => {
+  ruleForm.value.methods.resetFields();
+};
+</script>

package/src/view/MyInput.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-form-renderer :content="content" />
+</template>
+<script setup>
+import { reactive, markRaw } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+import MyInput from "../your-component.vue";
+const content = reactive([
+  {
+    component: markRaw(MyInput),
+    id: "myInput",
+    label: "label",
+    // 传入组件属性
+    el: {
+      placeholder: "请输入一个 title",
+      type: "input", // submit button
+      title: "这是一个标题", // custom defined props
+    },
+    // 可以通过 overrideRules: true 来覆盖自定义组件内置的校验规则
+    overrideRules: true,
+    rules: [
+      {
+        required: true,
+        trigger: "blur",
+        message: "不能为空！",
+      },
+    ],
+    // 传入组件事件
+    on: {
+      focus: ([event], updateForm) => {
+        console.log(event.target.value); // output: input value
+      },
+      customEvent: ([value, msg], updateForm) => {
+        console.log(value, msg); // output: 'message'
+      },
+    },
+  },
+]);
+</script>
+<style scoped>
+.box {
+  margin: 20px 0;
+  font-size: 20px;
+}
+</style>

package/src/view/checkboxGroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="box">checkboxGroup</div>
+
+  <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
+  </el-form-renderer>
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+  {
+    id: "city",
+    type: "checkbox-group",
+    /**
+     * sytle 属性是为了满足 el-checkbox-button属性而设置,如果不需要使用el-radio-button这可不设置
+     */
+    style: "button",
+    label: "city",
+    default: ["new york"],
+    options: [{ label: "new york" }, { label: "guangzhou" }, { label: "tokyo" }],
+  },
+]);
+</script>
+<style scoped>
+.box {
+  margin: 20px 0;
+  font-size: 20px;
+}
+</style>

package/src/view/content.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-form-renderer
+    label-width="100px"
+    :content="content"
+    v-model:FormData="FormData"
+    ref="form"
+  >
+    <template #id:region>
+      <div>requestRemoteCount: {{ requestRemoteCount }}</div>
+    </template>
+    <el-form-item>
+      <el-button @click="resetForm">resetForm</el-button>
+      <el-button @click="disableName"
+        >{{ content[0].disabled ? "启" : "禁" }}用第一项</el-button
+      >
+      <el-button @click="setOptions">更新 region 的 options</el-button>
+      <el-button @click="addFormItem">随机插入表单项</el-button>
+      <el-button @click="removeFormItem">随机移除表单项</el-button>
+    </el-form-item>
+    <pre>{{ FormData }}</pre>
+  </el-form-renderer>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let requestRemoteCount = ref(0);
+const form = ref();
+let id = ref(0);
+let FormData = reactive({
+  name: "1111",
+  region: [],
+  type: [],
+  startDate: "2019-01-01",
+  endDate: "2019-01-02",
+});
+const content = reactive([
+  {
+    type: "input",
+    id: "name",
+    label: "name",
+    attrs: { "data-name": "form1" },
+    el: {
+      size: "default",
+      placeholder: "test placeholder",
+    },
+    rules: [
+      { required: true, message: "miss name", trigger: "blur" },
+      { min: 3, max: 5, message: "length between 3 to 5", trigger: "blur" },
+    ],
+  },
+  {
+    type: "select",
+    id: "region",
+    label: "region",
+    remote: {
+      // url: 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-form-renderer?q=remote',
+      request: () => {
+        const data = [
+          {
+            label: "shanghai",
+            value: "shanghai",
+          },
+          {
+            label: "beijing",
+            value: "beijing",
+          },
+          {
+            label: "guangzhou",
+            value: "guangzhou",
+          },
+        ];
+        requestRemoteCount.value++;
+        return new Promise((r) => setTimeout(() => r(data), 2000));
+      },
+    },
+    el: { filterable: true, multiple: true, multipleLimit: 2 },
+    rules: [{ required: true, message: "miss area", trigger: "change" }],
+  },
+  {
+    type: "date-picker",
+    id: "date",
+    label: "date",
+    el: {
+      type: "daterange",
+      valueFormat: "yyyy-MM-dd",
+    },
+    rules: [{ required: true, message: "miss date", trigger: "change" }],
+    inputFormat: (row) => {
+      if (row.startDate && row.endDate) {
+        return [row.startDate, row.endDate];
+      }
+    },
+    outputFormat: (val) => {
+      if (!val) {
+        return { startDate: "", endDate: "" };
+      }
+      return {
+        startDate: val[0],
+        endDate: val[1],
+      };
+    },
+  },
+  {
+    type: "switch",
+    id: "delivery",
+    label: "delivery",
+  },
+  {
+    type: "checkbox-group",
+    id: "type",
+    label: "type",
+    default: [],
+    options: [
+      {
+        label: "typeA",
+      },
+      {
+        label: "typeB",
+      },
+      {
+        label: "typeC",
+      },
+    ],
+    rules: [{ type: "array", required: true, message: "miss type", trigger: "change" }],
+  },
+  {
+    type: "radio-group",
+    id: "resource",
+    label: "resource",
+    options: [
+      {
+        label: "resourceA",
+      },
+      {
+        label: "resourceB",
+      },
+    ],
+    rules: [{ required: true, message: "miss resource", trigger: "change" }],
+  },
+  {
+    type: "input",
+    id: "desc",
+    label: "desc",
+    el: {
+      type: "textarea",
+    },
+    rules: [{ required: true, message: "miss desc", trigger: "blur" }],
+  },
+]);
+const resetForm = () => {
+  form.value.methods.resetFields();
+};
+const disableName = () => {
+  content[0].disabled = !content[0].disabled;
+};
+const setOptions = () => {
+  const region = content.find((item) => item.id === "region");
+  if (!region) return;
+  region.options = [{ label: "广州", value: "广州" }];
+};
+const addFormItem = () => {
+  const i = Math.floor(Math.random() * (content.length + 1));
+  id.value++;
+  content.splice(i, 0, {
+    id: `name${id.value}`,
+    label: `表单项${id.value}`,
+    type: "input",
+  });
+};
+const removeFormItem = () => {
+  if (content.length <= 1) return;
+  const i = Math.floor(Math.random() * content.length);
+  content.splice(i, 1);
+};
+</script>

package/src/view/deprecated.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="box">deprecated</div>
+    <div>这里是些过时的写法，但仍要保留兼容性</div>
+    <el-form-renderer ref="form" label-width="100px" :content="content">
+        <el-button @click="getFormValue">getFormValue</el-button>
+    </el-form-renderer>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+const form = ref();
+
+
+const content = reactive(
+    [
+        {
+            type: 'radioGroup', // 推荐写作 radio-group
+            $id: 'resource', // 推荐不加 $
+            label: 'resource',
+            options: [{
+                label: 'resourceA'
+            }, {
+                label: 'resourceB'
+            }],
+            rules: [
+                { required: true, message: 'miss resource', trigger: 'change' }
+            ]
+        }
+    ]);
+const getFormValue = () => {
+    let v = form.value.getFormValue();
+    console.log(v);
+};
+
+</script>

package/src/view/disabled.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="box">disabled</div>
+    <ul>
+        <li>作为 el-form-renderer 的 prop 传入，禁用整个表单项，优先级最高 </li>
+        <li> 作为 el 的属性传入，作用于单个表单项组件</li>
+        <li> 与 el 平级传入，效果和 2 相同（因历史原因存在）</li>
+    </ul>
+    <el-form-renderer label-width="140px" ref="form" :content="content" :disabled="disabledAll">
+        <el-checkbox v-model="disabledAll">禁用全部</el-checkbox>
+        <el-checkbox v-model="disabledArea">禁用 area</el-checkbox>
+    </el-form-renderer>
+    <div style="margin-top: 16px;">
+        <el-button type="primary" @click="submit">提交，在控制台查看表单数据</el-button>
+    </div>
+</template>
+<script setup>
+import { reactive, ref, watch } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let disabledAll = ref(false)
+let disabledArea = ref(false)
+let form = ref()
+const content = reactive([
+    {
+        type: 'input',
+        id: 'name',
+        label: 'name',
+        attrs: { 'data-name': 'form1' },
+        el: {
+            size: 'default',
+            placeholder: 'test placeholder'
+        },
+        rules: [
+            { required: true, message: 'miss name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'length between 3 to 5', trigger: 'blur' }
+        ]
+    }, {
+        type: 'select',
+        id: 'region',
+        label: 'area',
+        disabled: false,
+        options: [{
+            label: 'area1',
+            value: 'shanghai'
+        }, {
+            label: 'area2',
+            value: 'beijing'
+        }],
+        rules: [
+            { required: true, message: 'miss area', trigger: 'change' }
+        ]
+    },
+    {
+        type: 'switch',
+        id: 'delivery',
+        label: '禁用开关',
+        default: true,
+    }, {
+        type: 'checkbox-group',
+        id: 'type',
+        label: '根据开关值禁用',
+        disabled: form => form.delivery,
+        options: [{
+            label: 'typeA'
+        }, {
+            label: 'typeB'
+        }, {
+            label: 'typeC'
+        }],
+        rules: [
+            { type: 'array', required: true, message: 'miss type', trigger: 'change' }
+        ]
+    },
+    {
+        type: 'input',
+        id: 'desc',
+        label: 'desc',
+        default: '使用el禁用',
+        el: {
+            disabled: true,
+            type: 'textarea',
+        },
+        rules: [
+            { required: true, message: 'miss desc', trigger: 'blur' }
+        ]
+    }
+]);
+watch(
+    disabledArea,
+    (val) => {
+        content[1].disabled = val
+    },
+);
+const submit = () => {
+    form.value.methods.validate(valid => {
+        if (valid) console.log(form.value.getFormValue())
+    })
+}
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/el.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="box">el</div>
+    <div>可以对表单组件传入 props，使用 el 传入 例如配合 el-input，设置文本框</div>
+    <el-form-renderer :content="content" inline />
+</template>
+
+<script setup>
+import { reactive, } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+
+
+const content = reactive(
+    [
+        {
+            id: 'document',
+            type: 'input',
+            el: {
+                type: 'textarea'
+            }
+        }
+    ]);
+
+</script>

package/src/view/format.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="box">value-format</div>
+    <div class="format">
+        <el-form-renderer :content="content" inline ref="formRender">
+            <el-form-item>
+                <el-button @click="setValue">set value</el-button>
+                <el-button type="primary" @click="getValue">log value</el-button>
+            </el-form-item>
+        </el-form-renderer>
+        <div>{{ form }}</div>
+    </div>
+</template>
+<script setup>
+
+import { reactive, ref } from "vue";
+const formRender = ref()
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+let form = ref()
+const content = reactive([
+    {
+        el: {
+            type: 'daterange',
+            valueFormat: 'yyyy-MM-dd'
+        },
+        type: 'date-picker',
+        id: 'date',
+        label: 'date',
+        inputFormat: (row) => {
+            if (row.startDate && row.endDate) {
+                return [row.startDate, row.endDate]
+            }
+        },
+        outputFormat: (val) => {
+            if (!val) {
+                return { startDate: '', endDate: '' }
+            }
+            return {
+                startDate: val[0],
+                endDate: val[1]
+            }
+        }
+    }
+]);
+const getValue = () => {
+    const value = formRender.value.getFormValue()
+
+    form.value = JSON.stringify(value)
+
+}
+const setValue = () => {
+    formRender.value.updateForm({
+        startDate: '2019-01-01',
+        endDate: '2019-01-02'
+    })
+}
+
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>

package/src/view/getcomponent.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <el-form-renderer inline :content="content" ref="form">
+        </el-form-renderer>
+        <el-button @click="getComponent('id')">获取id input</el-button>
+        <el-button @click="getComponent('first')">获取first name input</el-button>
+    </div>
+</template>
+<script setup>
+import { reactive, ref, } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+
+const form = ref()
+const content = reactive([
+    {
+        id: 'id',
+        type: 'input',
+        label: 'id',
+        el: {
+            placeholder: 'id'
+        }
+    },
+    {
+        type: 'group',
+        label: 'name',
+        id: 'name',
+        items: [
+            {
+                id: 'first',
+                label: 'first name',
+                type: 'input'
+            },
+            {
+                id: 'last',
+                label: 'last name',
+                type: 'input'
+            }
+        ]
+    }
+]);
+const getComponent = (id) => {
+    console.log(form.value.getComponentById(id));
+
+}
+</script>
+<style scoped>
+.box {
+    margin: 20px 0;
+    font-size: 20px;
+}
+</style>