el-form-renderer-vue3 1.0.0

package/src/components/femessage/components/render-form-item.vue

@@ -0,0 +1,328 @@
+<template>
+  <div>
+    <!-- 绑定显示，校验匹配规则字段，label，rules校验规则，attrs（原生属性）， -->
+    <el-form-item
+      v-if="_show"
+      :prop="prop"
+      :label="typeof data.label === 'string' ? data.label : ''"
+      :rules="!readonly && Array.isArray(data.rules) ? data.rules : undefined"
+      v-bind="data.attrs"
+      class="render-form-item"
+    >
+      <!-- label插槽 -->
+      <template #label>
+        <v-node
+          v-if="typeof data.label !== 'string'"
+          slot="label"
+          :content="data.label"
+        />
+      </template>
+      <!-- 处理之只读input select -->
+      <template v-if="readonly && hasReadonlyContent">
+        <el-input
+          v-if="data.type === 'input'"
+          v-bind="componentProps"
+          :modelValue="itemValue"
+          readonly
+          v-on="listeners"
+        />
+
+        <div v-else-if="data.type === 'select'">
+          {{ multipleValue }}
+        </div>
+      </template>
+      <!-- 处理 date-picker,cascader,动态渲染不显示文字 bug-->
+      <component
+        v-else-if="data.type === 'date-picker' || data.type === 'cascader'"
+        ref="customComponent"
+        v-bind:is="data.component || `el-${data.type || 'input'}`"
+        v-bind="componentProps"
+        :modelValue="itemValue"
+        :disabled="disabled || componentProps.disabled || readonly"
+        v-on="listeners"
+        :loading="loading"
+        :remote-method="data.remoteMethod || componentProps.remoteMethod || remoteMethod"
+      >
+      </component>
+      <!-- 绑定 模板引用 动态组件 props value值 是否禁用 事件 lodding 远端搜索方法 -->
+      <component
+        v-else
+        ref="customComponent"
+        v-bind:is="data.component || `el-${data.type || 'input'}`"
+        v-bind="componentProps"
+        :modelValue="itemValue"
+        :disabled="disabled || componentProps.disabled || readonly"
+        v-on="listeners"
+        :loading="loading"
+        :remote-method="data.remoteMethod || componentProps.remoteMethod || remoteMethod"
+      >
+        <!-- 插槽处理  选项-->
+        <template v-for="(opt, index) in options">
+          <el-option
+            v-if="data.type === 'select'"
+            :key="optionKey(opt) || index"
+            v-bind="opt"
+          />
+          <el-checkbox-button
+            v-if="data.type === 'checkbox-group' && data.style === 'button'"
+            :key="opt.value"
+            v-bind="opt"
+            :label="'value' in opt ? opt.value : opt.label"
+          >
+            {{ opt.label }}
+          </el-checkbox-button>
+          <el-checkbox
+            v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
+            :key="opt.value"
+            v-bind="opt"
+            :label="'value' in opt ? opt.value : opt.label"
+          >
+            {{ opt.label }}
+          </el-checkbox>
+          <el-radio-button
+            v-else-if="data.type === 'radio-group' && data.style === 'button'"
+            :key="opt.label"
+            v-bind="opt"
+            :label="'value' in opt ? opt.value : opt.label"
+            >{{ opt.label }}</el-radio-button
+          >
+          <el-radio
+            v-else-if="data.type === 'radio-group' && data.style !== 'button'"
+            :key="opt.label"
+            v-bind="opt"
+            :label="'value' in opt ? opt.value : opt.label"
+            >{{ opt.label }}</el-radio
+          >
+        </template>
+      </component>
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, inject, nextTick, ref, watch } from "vue";
+import { noop } from "../util/utils";
+import getEnableWhenStatus from "../util/enable-when";
+import _includes from "lodash.includes";
+import _topairs from "lodash.topairs";
+import _frompairs from "lodash.frompairs";
+import _get from "lodash.get";
+// 改用 动态组件 方便获取 ref
+// import CustomComponent from "../util/CustomComponent";
+import VNode from "../util/VNode";
+import axios from "axios";
+let customComponent = ref();
+
+let props = defineProps({
+  data: Object,
+  prop: {
+    type: String,
+    default(rawProps) {
+      return rawProps.data.id;
+    },
+  },
+
+  itemValue: {},
+  value: Object,
+  disabled: Boolean,
+  readonly: Boolean,
+  options: Array,
+});
+
+// 更新表单方法
+const emit = defineEmits(["updateValue"]);
+let propsInner = reactive({});
+
+const loading = ref(false);
+
+let dataRef = ref(props.data);
+// 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
+// 父组件提供 element ui的方法
+let methods = inject("methods");
+//  父组件提供的 更新 options的方法
+let setOptions = inject("setOptions");
+// 是否校验
+const isBlurTrigger =
+  props.data.rules &&
+  props.data.rules.some((rule) => {
+    return rule.required && rule.trigger === "blur";
+  });
+
+// 计算props
+const componentProps = computed(() => ({ ...props.data.el, ...propsInner }));
+// 计算是否为只读 input select
+const hasReadonlyContent = computed(() => ["input", "select"].includes(props.data.type));
+//执行传入的hidden
+const hiddenStatus = computed(() => {
+  const hidden = props.data.hidden || (() => false);
+  return hidden(props.value, props.data);
+});
+// 弃用
+const enableWhenStatus = computed(() =>
+  getEnableWhenStatus(props.data.enableWhen, props.data.value)
+);
+// 处理组件的显示与隐藏
+const _show = computed(() => !hiddenStatus.value && enableWhenStatus.value);
+// 处理事件监听 vue3实现 v-model  props：modelValue   event：update:modelValue
+const listeners = computed(() => {
+  const data = props.data;
+  const id = data.id;
+  const atChange = data.atChange || noop;
+  const on = data.on || {};
+  const originOnInput = on.input || noop;
+  const originOnChange = on.change || noop;
+  const trim = data.trim !== undefined ? data.trim : true;
+
+  let updateForm = inject("updateForm");
+  return {
+    ..._frompairs(
+      _topairs(on).map(([eName, handler]) => [
+        eName,
+        (...args) => handler(args, updateForm),
+      ])
+    ),
+    // 手动更新表单数据
+    "update:modelValue": (value, ...rest) => {
+      if (typeof value === "string" && trim) value = value.trim();
+      emit("updateValue", { id, value });
+      // FIXME: rules 的 trigger 只写了 blur，依然会在 change 的时候触发校验！
+      triggerValidate(id);
+    },
+  };
+});
+// el-select 显示对应的 label；（只读）
+const multipleValue = computed(() => {
+  const multipleSelectValue =
+    _get(props.data, "el.multiple") && Array.isArray(props.itemValue)
+      ? props.itemValue
+      : [props.itemValue];
+  return multipleSelectValue
+    .map((val) => (props.options.find((op) => op.value === val) || {}).label)
+    .join();
+});
+// 处理服务器获取 options
+const makingRequest = (remoteConfig, query) => {
+  const isOptionsCase =
+    ["select", "checkbox-group", "radio-group"].indexOf(props.data.type) > -1;
+  const {
+    request, //request：用于发起远程请求的函数
+    prop = "options", // 处理响应数据时的属性名称，默认为 "options" 默认处理 el-cascader 的情况
+    dataPath = "", //用于指定响应数据中的路径，默认为空字符串
+    onResponse = (resp) => {
+      //响应成功时的回调函数，默认为一个函数，用于处理响应数据。
+      if (dataPath) resp = _get(resp, dataPath);
+      if (isOptionsCase) {
+        return resp?.map((item) => ({
+          label: item[label],
+          value: item[value],
+        }));
+      } else {
+        return resp;
+      }
+    },
+    onError = (error) => {
+      //发生错误时的回调函数，默认为一个函数，用于打印错误信息并将 loading.value 设置为 false
+      console.error(error.message);
+      loading.value = false;
+    },
+    label = "label", //用于选项中的标签属性，默认为 "label"。
+    value = "value", //用于选项中的值属性，默认为 "value"
+  } = remoteConfig;
+  //，表示开始加载数据。
+  loading.value = true;
+  //Promise.resolve(request(query))：这里使用 Promise.resolve 包装了 request(query)，以确保始终返回一个 Promise 对象。
+  Promise.resolve(request(query))
+    // 当请求成功时执行 onResponse 函数，当请求失败时执行 onError 函数。
+    .then(onResponse, onError)
+    // .then((resp) => { ... })：在请求完成后，无论成功或失败，都会执行这个 .then 块。在这里，根据 isOptionsCase 的值，对响应数据 resp 进行不同的处理。
+    .then((resp) => {
+      // 如果 isOptionsCase 为 true，则将响应数据中的每个元素映射为包含 "label" 和 "value" 属性的对象，并将结果传递给 setOptions 函数（如果存在）。
+      if (isOptionsCase) {
+        setOptions && setOptions(props.prop, resp);
+      } else {
+        // 如果 isOptionsCase 为 false，则将响应数据存储在 propsInner 中，属性名为 prop。
+        propsInner = Object.assign(propsInner, { [prop]: resp });
+      }
+      // ，表示加载完成。
+      loading.value = false;
+    });
+};
+// 监听 是否有 data
+watch(dataRef, (data) => {
+  if (!data) {
+    throw new Error("data must be an Object.");
+  } else if (!data.id) {
+    throw new Error("`id` is unvalidated.");
+  } else if (!data.type && !data.component) {
+    throw new Error("`type` and `component` cannot both be null.");
+  }
+});
+// 处理服务器获取options
+watch(
+  /**
+   * 这里其实用 remote 处理了两件事。有机会是可以拆分的
+   * 1. 基本用法，配置 url 后即可从远程获取某个 prop 注入到组件
+   * 2. 针对 select、checkbox-group & radio-group 组件，会直接将 resp 作为 options 处理；label & value 也是直接为这个场景而生的
+   */
+  () => props.data.remote?.request,
+  (newValue, oldValue) => {
+    // 不应该用 watch data.remote，因为对象引用是同一个 https://cn.vuejs.org/v2/api/#vm-watch (估计当初这样写是为了方便)
+    // 现改写成：分开处理 remote.request，remote.url
+    // 至于为什么判断新旧值相同则返回，是因为 form 的 content 是响应式的，防止用户直接修改 content 其他内容时，导致 remote.request 重新发请求
+
+    if (!newValue || typeof newValue !== "function" || newValue === oldValue) return;
+
+    makingRequest(props.data.remote);
+  },
+  { immediate: true }
+);
+// 处理服务器获取options
+watch(
+  () => props.data.remote?.url,
+  (url, oldV) => {
+    // 第三个判断条件：防止 url 与 request 同时存在时，发送两次请求
+    if (!url || url === oldV || (!oldV && props.data.remote.request)) return;
+    const request =
+      props.data.remote.request || (() => axios.get(url).then((resp) => resp.data));
+    makingRequest(Object.assign({}, props.data.remote, { request }));
+  },
+  { immediate: true }
+);
+
+// 校验表单项目
+const triggerValidate = async (id) => {
+  try {
+    if (!props.data.rules || !props.data.rules.length) return;
+    if (isBlurTrigger) return;
+    await nextTick();
+
+    (await methods) && methods.validateField(id);
+  } catch (error) {
+    console.log(error);
+  }
+};
+// 远端搜索方法
+const remoteMethod = (query) => {
+  if (
+    _get(props.data, "type") === "select" &&
+    _get(props.data, "el.filterable") &&
+    _get(props.data, "el.remote")
+  ) {
+    makingRequest(props.data.remote, query);
+  }
+};
+// 初始化 optios key
+const optionKey = (opt) => {
+  if (opt.value instanceof Object) {
+    if (!props.data.el || !props.data.el.valueKey) {
+      return;
+    }
+
+    return opt.value[props.data.el.valueKey];
+  } else {
+    return opt.value;
+  }
+};
+// 暴露 element ui 模版引用
+defineExpose({ customComponent });
+</script>

package/src/components/femessage/el-form-renderer.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <el-form ref="myelForm" v-bind="$attrs" :model="value" class="el-form-renderer">
+      <template v-for="item in innerContent" :key="item.id">
+        <slot :name="`id:${item.id}`" />
+        <slot :name="`$id:${item.id}`" />
+
+        <component
+          :is="item.type === GROUP ? RenderFormGroup : RenderFormItem"
+          :ref="
+            (el) => {
+              customComponent[item.id] = el;
+            }
+          "
+          :data="item"
+          :value="value"
+          :item-value="value[item.id]"
+          :disabled="
+            disabled ||
+            (typeof item.disabled === 'function' ? item.disabled(value) : item.disabled)
+          "
+          :readonly="readonly || item.readonly"
+          :options="options[item.id]"
+          @updateValue="updateValue"
+        />
+      </template>
+      <slot />
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import RenderFormGroup from "./components/render-form-group.vue";
+import RenderFormItem from "./components/render-form-item.vue";
+import {
+  reactive,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  provide,
+  getCurrentInstance,
+} from "vue";
+import transformContent from "./util/transform-content";
+import _set from "lodash.set";
+import _isequal from "lodash.isequal";
+import _clonedeep from "lodash.clonedeep";
+import {
+  collect,
+  mergeValue,
+  transformOutputValue,
+  transformInputValue,
+  correctValue,
+} from "./util/utils";
+let GROUP = "group";
+/**
+ * inputFormat 让整个输入机制复杂了很多。value 有以下输入路径:
+ * 1. 传入的 form => inputFormat 处理
+ * 2. updateForm => inputFormat 处理
+ * 3. 但 content 中的 default 没法经过 inputFormat 处理，因为 inputFormat 要接受整个 value 作为参数
+ * 4. 组件内部更新 value，不需要走 inputFormat
+ */
+let value = reactive({}); // 表单数据对象
+let options = reactive({});
+let initValue = reactive({});
+let myelForm = ref();
+let methods = {};
+const customComponent = ref([]);
+let emit = defineEmits(["update:FormData"]);
+// 注入 element ui form 方法
+/**
+ * 与 element 相同，在 mounted 阶段存储 initValue
+ * @see https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/packages/form/src/form-item.vue#L304
+ */
+onMounted(async () => {
+  initValue = _clonedeep(value);
+  await nextTick();
+  // 检查 myelForm 是否已经初始化
+  if (myelForm && myelForm.value) {
+    Object.keys(myelForm.value).forEach((item) => {
+      // 检查属性是否存在于 methods 对象中
+      if (myelForm.value[item] && !(item in methods)) {
+        methods[item] = myelForm.value[item];
+      }
+    });
+  }
+  /**
+   * 有些组件会 created 阶段更新初始值为合法值，这会触发 validate。目前已知的情况有：
+   * - el-select 开启 multiple 时，会更新初始值 undefined 为 []
+   * @hack
+   */
+  methods.clearValidate();
+});
+
+let props = defineProps({
+  //表单项
+  content: {
+    type: Array,
+    required: true,
+  },
+  // 禁用
+  disabled: {
+    type: [Boolean, Function],
+    default: false,
+  },
+  //只读
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * v-model 的值。传入后会优先使用
+   */
+  FormData: {
+    type: Object,
+    default: undefined,
+  },
+});
+//兼容处理
+let innerContent = computed(() => transformContent(props.content));
+// 初始化默认值
+let setValueFromModel = () => {
+  if (innerContent.length) return;
+  /**
+   * 没使用 v-model 时才从 default 采集数据
+   * default 值没法考虑 inputFormat
+   * 参考 value-format.md 的案例。那种情况下，default 该传什么？
+   */
+  let newValue = props.FormData
+    ? transformInputValue(props.FormData, innerContent.value)
+    : collect(innerContent.value, "default");
+  correctValue(newValue, innerContent.value);
+  if (!_isequal(value, newValue)) value = Object.assign(value, newValue);
+};
+// v-model初始化默认数据
+watch(
+  () => props.FormData,
+  (newForm) => {
+    if (!newForm) return;
+    setValueFromModel();
+  },
+  { immediate: true, deep: true }
+);
+// 初始化默认数据
+watch(
+  innerContent,
+  (newContent) => {
+    try {
+      if (!newContent) return;
+
+      // 如果 content 没有变动 remote 的部分，这里需要保留之前 remote 注入的 options
+      Object.assign(options, collect(newContent, "options"));
+      setValueFromModel();
+    } catch (error) {
+      console.log(error);
+    }
+  },
+  { immediate: true }
+);
+
+// v-model 传递值
+watch(value, (newValue, oldValue) => {
+  try {
+    if (!newValue) return;
+    if (props.FormData) {
+      let data = Object.assign(
+        props.FormData,
+        transformOutputValue(newValue, innerContent)
+      );
+      emit("update:FormData", data);
+    }
+  } catch (error) {
+    console.log(error, "-----");
+  }
+  // deep: true, // updateValue 是全量更新，所以不用
+});
+
+/**
+ * 更新表单数据
+ * @param  {String} options.id 表单ID
+ * @param  {All} options.value 表单数据
+ */
+let updateValue = ({ id, value: v }) => {
+  value[id] = v;
+};
+/**
+ * 重置表单为初始值
+ *
+ * @public
+ */
+let resetFields = async () => {
+  /**
+   * 之所以不用 el-form 的 resetFields 机制，有以下原因：
+   * - el-form 的 resetFields 无视 el-form-renderer 的自定义组件
+   * - el-form 的 resetFields 不会触发 input & change 事件，无法监听
+   * - bug1: https://github.com/FEMessage/el-data-table/issues/176#issuecomment-587280825
+   * - bug2:
+   *   0. 建议先在监听器 watch.value 里 console.log(v.name, oldV.name)
+   *   1. 打开 basic 示例
+   *   2. 在 label 为 name 的输入框里输入 1，此时 log：'1' ''
+   *   3. 点击 reset 按钮，此时 log 两条数据： '1' '1', '' ''
+   *   4. 因为 _isequal(v, oldV)，所以没有触发 v-model 更新
+   */
+  value = _clonedeep(initValue);
+  await nextTick();
+  methods.clearValidate();
+};
+/**
+ * 当 strict 为 true 时，只返回设置的表单项的值, 过滤掉冗余字段, 更多请看 update-form 示例
+ * @param {{strict: Boolean}} 默认 false
+ * @return {object} key is item's id, value is item's value
+ * @public
+ */
+let getFormValue = ({ strict = false } = {}) => {
+  return transformOutputValue(value, innerContent, { strict });
+};
+/**
+ * update form values
+ * @param {object} newValue - key is item's id, value is the new value
+ * @public
+ */
+let updateForm = (newValue) => {
+  newValue = transformInputValue(newValue, innerContent);
+  mergeValue(value, newValue, innerContent);
+};
+/**
+ * update select options
+ * @param {string} id<br>
+ * @param {array} options
+ * @public
+ */
+let setOptions = (id, O) => {
+  _set(options, id, O);
+  options = Object.assign(options); // 设置之前不存在的 options 时需要重新设置响应式更新
+};
+
+/**
+ * get custom component
+ * @param {string} id<br>
+ * @public
+ */
+const getComponentById = (id) => {
+  let content = [];
+  props.content.forEach((item) => {
+    if (item.type === GROUP) {
+      const items = item.items.map((formItem) => {
+        formItem.groupId = item.id;
+        return formItem;
+      });
+      content.push(...items);
+    } else {
+      content.push(item);
+    }
+  });
+  const itemContent = content.find((item) => item.id === id);
+  if (!itemContent) {
+    return undefined;
+  }
+  if (!itemContent.groupId) {
+    return customComponent.value[id].customComponent;
+  } else {
+    const componentRef = customComponent.value[itemContent.groupId].customComponent;
+    return componentRef[`formItem-${id}`].customComponent;
+  }
+};
+provide("methods", methods);
+provide("updateForm", updateForm);
+provide("setOptions", setOptions);
+defineExpose({
+  updateValue,
+  resetFields,
+  getFormValue,
+  updateForm,
+  setOptions,
+  methods,
+  getComponentById,
+});
+</script>
+<script>
+export default {
+  name: "ElFormRenderer",
+};
+</script>

package/src/components/femessage/util/CustomComponent.js

@@ -0,0 +1,28 @@
+import { h, resolveComponent } from "vue";
+
+// Vue3 中函数式组件需要提供一个渲染函数
+const CustomComponent = (props, context) => {
+  let dom =
+    typeof props.component == "string"
+      ? resolveComponent(hyphenToPascal(props.component))
+      : "Input";
+
+  // 返回一个渲染函数，可以使用 h 函数创建虚拟节点
+  return h(dom, props, context.slots);
+};
+
+function hyphenToPascal(str) {
+  let arr = str.split("-");
+
+  let resStr = arr.reduce(function (prev, cur) {
+    let str = prev + cur.slice(0, 1).toUpperCase() + cur.slice(1);
+    return str;
+  });
+
+  // 转小驼峰这一行不需要
+  resStr = resStr.slice(0, 1).toUpperCase() + resStr.slice(1);
+
+  return resStr;
+}
+
+export default CustomComponent;

package/src/components/femessage/util/VNode.js

@@ -0,0 +1,9 @@
+
+
+// Vue3 中函数式组件需要提供一个渲染函数
+const VNode = (props, content) => {
+
+    return (props.content)
+};
+
+export default VNode;

package/src/components/femessage/util/enable-when.js

@@ -0,0 +1,26 @@
+import _get from "lodash.get";
+import _has from "lodash.has";
+
+/**
+ * 处理 enableWhen
+ *
+ * 与条件: 简单依赖关系存在2种情况：简单对象 || 字符串
+ * 或条件: 即使用 [] 包裹所有与条件 enableWhen: [{ a: 1 }, { a: 2 }]
+ */
+export default function getEnableWhenStatus(enableWhen, value) {
+  if (!enableWhen) return true;
+  // 处理一个与条件
+  const handleCondition = (condition) => {
+    // 简单字符串(ID), 只要有值即为true
+    if (typeof condition === "string") return _has(value, condition);
+    // 简单对象判断: 是否所有依赖条件都通过
+    return Object.keys(condition).every((path) => {
+      const v = _get(value, path);
+      return v !== undefined && v === condition[path];
+    });
+  };
+
+  return Array.isArray(enableWhen)
+    ? enableWhen.some(handleCondition)
+    : handleCondition(enableWhen);
+}