@tmagic/form 1.0.0-beta.1

package/src/Form.vue

@@ -0,0 +1,188 @@
+<template>
+  <ElForm
+    v-if="initialized && Array.isArray(config)"
+    class="m-form"
+    ref="elForm"
+    :model="values"
+    :label-width="labelWidth"
+    :disabled="disabled"
+    :style="`height: ${height}`"
+    :inline="inline"
+    :label-position="labelPosition"
+  >
+    <MContainer
+      v-for="(item, index) in config"
+      :key="item[keyProp] ?? index"
+      :config="item"
+      :model="values"
+      :label-width="item.labelWidth || labelWidth"
+      :step-active="stepActive"
+      :size="size"
+      @change="changeHandler"
+    ></MContainer>
+  </ElForm>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, provide, reactive, ref, watchEffect } from 'vue';
+import { ElForm } from 'element-plus';
+import { cloneDeep } from 'lodash-es';
+
+import MContainer from './containers/Container.vue';
+import { getConfig } from './utils/config';
+import { initValue } from './utils/form';
+import { FormConfig, FormState, FormValue } from './schema';
+
+export interface ValidateError {
+  message: string;
+  field: string;
+}
+
+export interface FieldErrorList {
+  [field: string]: ValidateError[];
+}
+
+export default defineComponent({
+  name: 'm-form',
+
+  components: { ElForm, MContainer },
+
+  props: {
+    // 表单初始化值
+    initValues: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+
+    parentValues: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    // 表单配置
+    config: {
+      type: Array as PropType<FormConfig>,
+      required: true,
+      default: () => [],
+    },
+
+    labelWidth: {
+      type: String,
+      default: () => '200px',
+    },
+
+    disabled: {
+      type: Boolean,
+      default: () => false,
+    },
+
+    height: {
+      type: String,
+      default: () => 'auto',
+    },
+
+    stepActive: {
+      type: [String, Number],
+      default: () => 1,
+    },
+
+    size: {
+      type: String,
+      default: 'small',
+    },
+
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+
+    labelPosition: {
+      type: String,
+      default: 'right',
+    },
+
+    keyProp: {
+      type: String,
+      default: '__key',
+    },
+  },
+
+  emits: ['change', 'field-input', 'field-change'],
+
+  setup(props, { emit }) {
+    const elForm = ref<InstanceType<typeof ElForm>>();
+    const initialized = ref(false);
+    const values = ref<FormValue>({});
+    const fields = new Map<string, any>();
+
+    const requestFuc = getConfig('request') as Function;
+
+    const formState: FormState = reactive<FormState>({
+      keyProp: props.keyProp,
+      config: props.config,
+      initValues: props.initValues,
+      parentValues: props.parentValues,
+      values,
+      $emit: emit as (event: string, ...args: any[]) => void,
+      fields,
+      setField: (prop: string, field: any) => fields.set(prop, field),
+      getField: (prop: string) => fields.get(prop),
+      deleteField: (prop: string) => fields.delete(prop),
+      post: (options: any) => {
+        if (requestFuc) {
+          return requestFuc({
+            ...options,
+            method: 'POST',
+          });
+        }
+      },
+    });
+
+    provide('mForm', formState);
+
+    watchEffect(() => {
+      initialized.value = false;
+      initValue(formState, {
+        initValues: props.initValues,
+        config: props.config,
+      }).then((value) => {
+        values.value = value;
+        initialized.value = true;
+      });
+    });
+
+    return {
+      initialized,
+      values,
+      elForm,
+
+      formState,
+
+      changeHandler: () => {
+        emit('change', values.value);
+      },
+
+      resetForm: () => elForm.value?.resetFields(),
+
+      submitForm: async (native?: boolean): Promise<any> => {
+        try {
+          await elForm.value?.validate();
+          return native ? values.value : cloneDeep(values.value);
+        } catch (invalidFields: any) {
+          const error: string[] = [];
+
+          Object.entries(invalidFields).forEach(([, ValidateError]) => {
+            (ValidateError as ValidateError[]).forEach(({ field, message }) => {
+              if (field && message) error.push(`${field} -> ${message}`);
+              if (field && !message) error.push(`${field} -> 出现错误`);
+              if (!field && message) error.push(`${message}`);
+            });
+          });
+          throw new Error(error.join('<br>'));
+        }
+      },
+    };
+  },
+});
+</script>

package/src/FormDialog.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      custom-class="m-form-dialog"
+      top="20px"
+      :title="title"
+      :appendToBody="true"
+      :width="width"
+      :fullscreen="fullscreen"
+      :close-on-click-modal="false"
+      @close="closeHandler"
+    >
+      <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
+        <m-form
+          v-model="stepActive"
+          ref="form"
+          :config="config"
+          :init-values="values"
+          :label-width="labelWidth"
+          @change="changeHandler"
+        ></m-form>
+        <slot></slot>
+      </div>
+
+      <template #footer>
+        <el-row class="dialog-footer">
+          <el-col :span="12" style="text-align: left">
+            <div style="min-height: 1px">
+              <slot name="left"></slot>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <slot name="footer">
+              <el-button @click="cancel" size="small">取 消</el-button>
+              <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
+              <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+                >下一步</el-button
+              >
+              <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+                confirmText
+              }}</el-button>
+            </slot>
+          </el-col>
+        </el-row>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue';
+
+import Form from './Form.vue';
+import { FormConfig, StepConfig } from './schema';
+
+export default defineComponent({
+  name: 'm-form-dialog',
+
+  props: {
+    values: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    width: [Number, String],
+
+    fullscreen: Boolean,
+
+    title: String,
+
+    config: {
+      type: Array as PropType<FormConfig>,
+      required: true,
+      default: () => [],
+    },
+
+    labelWidth: [Number, String],
+
+    confirmText: {
+      type: String,
+      default: '确定',
+    },
+  },
+
+  emits: ['close', 'submit', 'error', 'change'],
+
+  setup(props, { emit }) {
+    const form = ref<InstanceType<typeof Form>>();
+    const dialogVisible = ref(false);
+    const saveFetch = ref(false);
+    const stepActive = ref(1);
+    const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
+
+    const stepCount = computed(() => {
+      const { length } = props.config;
+      for (let index = 0; index < length; index++) {
+        if (props.config[index].type === 'step') {
+          return (props.config[index] as StepConfig).items.length;
+        }
+      }
+      return 0;
+    });
+
+    const hasStep = computed(() => {
+      const { length } = props.config;
+      for (let index = 0; index < length; index++) {
+        if (props.config[index].type === 'step') {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    const cancel = () => {
+      dialogVisible.value = false;
+    };
+
+    const closeHandler = () => {
+      stepActive.value = 1;
+      emit('close');
+    };
+
+    const save = async () => {
+      try {
+        const values = await form.value?.submitForm();
+        emit('submit', values);
+      } catch (e) {
+        emit('error', e);
+      }
+    };
+
+    const preStep = () => {
+      stepActive.value -= 1;
+    };
+
+    const nextStep = () => {
+      stepActive.value += 1;
+    };
+
+    const changeHandler = (value: any) => {
+      emit('change', value);
+    };
+
+    return {
+      form,
+      saveFetch,
+      stepActive,
+      dialogVisible,
+      bodyHeight,
+      stepCount,
+      hasStep,
+      cancel,
+      closeHandler,
+      save,
+      preStep,
+      nextStep,
+      changeHandler,
+    };
+  },
+});
+</script>

package/src/containers/Container.vue

@@ -0,0 +1,263 @@
+<template>
+  <div v-if="config" :style="config.tip ? 'display: flex' : ''" :class="config.className" class="m-form-container">
+    <m-fields-hidden
+      v-if="type === 'hidden'"
+      :model="model"
+      :config="config"
+      :name="config.name"
+      :disabled="disabled"
+      :prop="itemProp"
+    ></m-fields-hidden>
+
+    <component
+      v-else-if="items && !config.text && type && display"
+      :key="key(config)"
+      :size="size"
+      :is="tagName"
+      :model="model"
+      :config="config"
+      :name="name"
+      :prop="itemProp"
+      :step-active="stepActive"
+      :expand-more="expand"
+      :label-width="config.labelWidth || labelWidth"
+      @change="onChangeHandler"
+    ></component>
+
+    <template v-else-if="type && display">
+      <el-form-item
+        :style="config.tip ? 'flex: 1' : ''"
+        :prop="itemProp"
+        :label-width="config.text ? config.labelWidth || labelWidth : '0'"
+        :rules="rule"
+      >
+        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <el-tooltip v-if="tooltip">
+          <component
+            :key="key(config)"
+            :size="size"
+            :is="tagName"
+            :model="model"
+            :config="config"
+            :name="name"
+            :disabled="disabled"
+            :prop="itemProp"
+            @change="onChangeHandler"
+          ></component>
+          <template #content>
+            <div v-html="tooltip"></div>
+          </template>
+        </el-tooltip>
+
+        <component
+          v-else
+          :key="key(config)"
+          :size="size"
+          :is="tagName"
+          :model="model"
+          :config="config"
+          :name="name"
+          :disabled="disabled"
+          :prop="itemProp"
+          @change="onChangeHandler"
+        ></component>
+
+        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
+      </el-form-item>
+
+      <el-tooltip v-if="config.tip" placement="top" style="line-height: 40px; margin-left: 5px">
+        <i class="el-icon-warning"></i>
+        <template #content>
+          <div v-html="config.tip"></div>
+        </template>
+      </el-tooltip>
+    </template>
+
+    <template v-else-if="items && display">
+      <template v-if="name || name === 0 ? model[name] : model">
+        <m-form-container
+          v-for="item in items"
+          :key="key(item)"
+          :model="name || name === 0 ? model[name] : model"
+          :config="item"
+          :size="size"
+          :step-active="stepActive"
+          :expand-more="expand"
+          :label-width="config.labelWidth || labelWidth"
+          :prop="itemProp"
+          @change="onChangeHandler"
+        ></m-form-container>
+      </template>
+    </template>
+
+    <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
+      <el-button type="text" @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref, resolveComponent, watchEffect } from 'vue';
+
+import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
+import { display as displayFunction, filterFunction, getRules } from '../utils/form';
+
+export default defineComponent({
+  name: 'm-form-container',
+
+  props: {
+    labelWidth: String,
+    expandMore: Boolean,
+
+    model: {
+      type: [Object, Array] as PropType<FormValue>,
+      required: true,
+    },
+
+    config: {
+      type: Object as PropType<ChildConfig>,
+      required: true,
+    },
+
+    prop: {
+      type: String,
+      default: () => '',
+    },
+
+    stepActive: {
+      type: [String, Number],
+    },
+
+    size: {
+      type: String,
+      default: 'small',
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const expand = ref(false);
+
+    const name = computed(() => props.config.name || '');
+
+    const items = computed(() => (props.config as ContainerCommonConfig).items);
+
+    const itemProp = computed(() => (name.value ? `${props.prop}${props.prop ? '.' : ''}${name.value}` : props.prop));
+
+    const tagName = computed(() => {
+      const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
+      if (typeof component !== 'string') return component;
+      return 'm-fields-text';
+    });
+
+    const disabled = computed(() => filterFunction(mForm, props.config.disabled, props));
+
+    const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
+
+    const extra = computed(() => filterFunction(mForm, props.config.extra, props));
+
+    const rule = computed(() => getRules(mForm, props.config.rules, props));
+
+    const type = computed((): string => {
+      let { type } = props.config;
+      if (typeof type === 'function') {
+        type = type(mForm, {
+          model: props.model,
+        });
+      }
+      if (type === 'form') return '';
+      return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
+    });
+
+    const display = computed((): boolean => {
+      if (props.config.display === 'expand') {
+        return expand.value;
+      }
+
+      return displayFunction(mForm, props.config.display, props);
+    });
+
+    watchEffect(() => {
+      expand.value = props.expandMore;
+    });
+
+    const expandHandler = () => (expand.value = !expand.value);
+
+    const key = (config: any) => config[mForm?.keyProps];
+
+    const filterHandler = (filter: any, value: FormValue | number | string) => {
+      if (typeof filter === 'function') {
+        return filter(mForm, value, {
+          model: props.model,
+          values: mForm?.initValues,
+          formValue: mForm?.values,
+          prop: itemProp.value,
+        });
+      }
+
+      if (filter === 'number') {
+        return +value;
+      }
+
+      return value;
+    };
+
+    const changeHandler = (onChange: any, value: FormValue | number | string) => {
+      if (typeof onChange === 'function') {
+        return onChange(mForm, value, {
+          model: props.model,
+          values: mForm?.initValues,
+          formValue: mForm?.values,
+          prop: itemProp.value,
+        });
+      }
+    };
+
+    const trimHandler = (trim: any, value: FormValue | number | string) => {
+      if (typeof value === 'string' && trim) {
+        return value.replace(/^\s*/, '').replace(/\s*$/, '');
+      }
+    };
+
+    const onChangeHandler = async function (v: FormValue, key?: string) {
+      const { filter, onChange, trim, name, dynamicKey } = props.config as any;
+      let value: FormValue | number | string = filterHandler(filter, v);
+
+      value = (await changeHandler(onChange, value)) ?? value;
+      value = trimHandler(trim, value) ?? value;
+
+      // field内容下包含field-link时，model===value, 这里避免循环引用
+      if ((name || name === 0) && props.model !== value && (v !== value || props.model[name] !== value)) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.model[name] = value;
+      }
+      // 动态表单类型，根据value和key参数，直接修改model
+      if (key !== undefined && dynamicKey) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.model[key] = value;
+      }
+      emit('change', props.model);
+    };
+
+    return {
+      expand,
+      name,
+      type,
+      disabled,
+      itemProp,
+      items,
+      display,
+      tagName,
+      rule,
+      tooltip,
+      extra,
+      key,
+      onChangeHandler,
+      expandHandler,
+    };
+  },
+});
+</script>