@tmagic/form 1.0.0-beta.1

package/src/containers/Tabs.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-tabs
+    v-model="activeTabName"
+    :class="config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'"
+    :type="config.tabType"
+    :editable="config.editable || false"
+    :tab-position="config.tabPosition || 'top'"
+    @tab-click="tabClickHandler"
+    @tab-add="onTabAdd"
+    @tab-remove="onTabRemove"
+  >
+    <template v-for="(tab, tabIndex) in tabs">
+      <el-tab-pane
+        v-if="display(tab.display) && tabItems(tab).length"
+        :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
+        :name="filter(tab.status) || tabIndex.toString()"
+        :label="filter(tab.title)"
+        :lazy="tab.lazy || false"
+      >
+        <m-form-container
+          v-for="item in tabItems(tab)"
+          :key="item[mForm?.keyProp || '__key']"
+          :config="item"
+          :model="config.dynamic ? model[config.name || ''][tabIndex] : tab.name ? model[tab.name] : model"
+          :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
+          :size="size"
+          :label-width="tab.labelWidth || labelWidth"
+          :expand-more="expandMore"
+          @change="changeHandler"
+        ></m-form-container>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script lang="ts">
+/* eslint-disable vue/no-mutating-props */
+import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { FormState, FormValue, TabConfig, TabPaneConfig } from '../schema';
+import { display, filterFunction } from '../utils/form';
+
+const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
+  const { config, model, prop } = props;
+  const { active } = config;
+
+  if (typeof active === 'function') return active(mForm, { model, formValue: mForm?.values, prop });
+  if (+activeTabName >= props.config.items.length) return '0';
+  if (typeof active !== 'undefined') return active;
+
+  return '0';
+};
+
+const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => {
+  const { config, model, prop } = props;
+  if (typeof config.onTabClick === 'function') {
+    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+  }
+
+  const tabConfig = config.items.find((item: TabPaneConfig) => tab.name === item.status);
+  if (tabConfig && typeof tabConfig.onTabClick === 'function') {
+    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+  }
+};
+
+const Tab = defineComponent({
+  name: 'm-form-tab',
+
+  props: {
+    labelWidth: String,
+    expandMore: Boolean,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<TabConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    size: String,
+  },
+
+  emits: {
+    change(values: FormValue) {
+      return values;
+    },
+  },
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+    const activeTabName = ref(getActive(mForm, props, ''));
+
+    const tabs = computed(() => {
+      if (props.config.dynamic) {
+        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+        return props.model[props.config.name] || [];
+      }
+      return props.config.items;
+    });
+
+    const filter = (config: any) => filterFunction(mForm, config, props);
+
+    watchEffect(() => {
+      if (typeof props.config.activeChange === 'function') {
+        props.config.activeChange(mForm, activeTabName.value, {
+          model: props.model,
+          prop: props.prop,
+        });
+      }
+    });
+
+    return {
+      mForm,
+
+      activeTabName,
+
+      tabs,
+
+      filter,
+
+      tabItems: (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items),
+
+      tabClickHandler: (tab: any) => tabClickHandler(mForm, tab, props),
+
+      onTabAdd: () => {
+        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+
+        if (typeof props.config.onTabAdd === 'function') {
+          props.config.onTabAdd(mForm, { model: props.model });
+        } else if (tabs.value.length > 0) {
+          const newObj = cloneDeep(tabs.value[0]);
+          newObj.title = `标签${tabs.value.length + 1}`;
+          props.model[props.config.name].push(newObj);
+        }
+        emit('change', props.model);
+        mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+      },
+
+      onTabRemove: (tabName: string) => {
+        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+
+        if (typeof props.config.onTabRemove === 'function') {
+          props.config.onTabRemove(mForm, tabName, { model: props.model });
+        } else {
+          props.model[props.config.name].splice(+tabName, 1);
+
+          // 防止删除后没有选中的问题
+          if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
+            activeTabName.value = (+activeTabName.value - 1).toString();
+            tabClickHandler(mForm, { name: activeTabName.value }, props);
+          }
+        }
+        emit('change', props.model);
+        mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+      },
+
+      display: (displayConfig: any) => display(mForm, displayConfig, props),
+
+      changeHandler: () => {
+        emit('change', props.model);
+        if (typeof props.config.onChange === 'function') {
+          props.config.onChange(mForm, { model: props.model });
+        }
+      },
+    };
+  },
+});
+
+export default Tab;
+</script>

package/src/fields/Cascader.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="m-cascader" style="width: 100%">
+    <el-cascader
+      v-model="model[name]"
+      ref="cascader"
+      style="width: 100%"
+      clearable
+      filterable
+      :size="size"
+      :placeholder="config.placeholder"
+      :disabled="disabled"
+      :options="options"
+      :props="{ multiple: config.multiple }"
+      @change="changeHandler"
+    ></el-cascader>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  ComponentInternalInstance,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  inject,
+  PropType,
+  Ref,
+  ref,
+  watchEffect,
+} from 'vue';
+import { ElCascader, ElDialog } from 'element-plus';
+
+import { CascaderConfig, FormState } from '../schema';
+import { getConfig } from '../utils/config';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-cascader',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<CascaderConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | null>('mForm');
+    const vm = getCurrentInstance() as ComponentInternalInstance;
+
+    useAddField(props.prop);
+
+    const requestFunc = getConfig('request') as Function;
+
+    const cascader: Ref<null | typeof ElCascader> = ref(null);
+    const dialog: Ref<null | typeof ElDialog> = ref(null);
+
+    const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
+    const remoteData: Ref<any> = ref(null);
+
+    const setRemoteOptions = async function () {
+      const { config } = props;
+      const { option } = config;
+      if (!option) return;
+      let { body } = option;
+
+      const postOptions: Record<string, any> = {
+        url: option.url,
+        cache: option.cache,
+        timeout: option.timeout,
+        data: {},
+      };
+
+      if (body && mForm) {
+        if (typeof body === 'function' && props.model && mForm) {
+          body = body(mForm, {
+            model: props.model,
+            formValue: null,
+            formValues: mForm.values,
+          });
+        }
+        postOptions.data = body;
+      }
+
+      const res = await requestFunc(postOptions);
+
+      remoteData.value = res[option.root];
+      if (remoteData.value && typeof option?.item === 'function') {
+        options.value = option.item(res[option.root]);
+      }
+    };
+
+    // 初始化
+    if (typeof props.config.options === 'function' && props.model && mForm) {
+      watchEffect(
+        () =>
+          (options.value = (props.config.options as Function)(vm, { model: props.model, formValues: mForm.values })),
+      );
+    } else if (!props.config.options || !props.config.options.length || props.config.remote) {
+      Promise.resolve(setRemoteOptions());
+    }
+
+    const action = computed(() => {
+      if (props.config.add?.action.method === 'post') {
+        return (options: any) =>
+          requestFunc({
+            ...props.config?.add?.action.body,
+            ...options,
+          });
+      }
+      return null;
+    });
+
+    return {
+      options,
+      remoteData,
+      addButtonStyle: {
+        top: 0,
+        left: 0,
+        width: 'auto',
+      },
+      dialogVisible: false,
+      cascader,
+      dialog,
+      action,
+      setRemoteOptions,
+      changeHandler: (value: any) => {
+        if (!cascader.value) return;
+        cascader.value.query = '';
+        cascader.value.previousQuery = null;
+        emit('change', value);
+      },
+      addHandler: () => {
+        if (!dialog.value) return;
+        dialog.value.dialogVisible = true;
+      },
+      editAfterAction: () => {
+        setRemoteOptions();
+      },
+    };
+  },
+});
+</script>

package/src/fields/Checkbox.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-checkbox
+    v-model="model[name]"
+    :size="size"
+    :trueLabel="activeValue"
+    :falseLabel="inactiveValue"
+    :disabled="disabled"
+    :label="config.text"
+    @change="changeHandler"
+  ></el-checkbox>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import { CheckboxConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-checkbox',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<CheckboxConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change', 'input'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    return {
+      activeValue: computed(() => {
+        if (typeof props.config.activeValue === 'undefined') {
+          if (props.config.filter === 'number') {
+            return 1;
+          }
+        } else {
+          return props.config.activeValue;
+        }
+
+        return 'true';
+      }),
+
+      inactiveValue: computed(() => {
+        if (typeof props.config.inactiveValue === 'undefined') {
+          if (props.config.filter === 'number') {
+            return 0;
+          }
+        } else {
+          return props.config.inactiveValue;
+        }
+
+        return 'false';
+      }),
+
+      changeHandler(value: number | boolean) {
+        emit('change', value);
+      },
+    };
+  },
+});
+</script>

package/src/fields/CheckboxGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-checkbox-group v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <el-checkbox v-for="option in config.options" :label="option.value" :key="option.value"
+      >{{ option.text }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { CheckboxGroupConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-checkbox-group',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<CheckboxGroupConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    // 初始化选项
+    if (props.model && !props.model[props.name]) {
+      // eslint-disable-next-line no-param-reassign
+      props.model[props.name] = [];
+    }
+    return {
+      changeHandler: (v: Array<string | number | boolean>) => {
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/ColorPicker.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="model">
+    <el-color-picker
+      v-model="model[name]"
+      :size="size"
+      :disabled="disabled"
+      :showAlpha="true"
+      @change="changeHandler"
+    ></el-color-picker>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { ColorPickConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+export default defineComponent({
+  name: 'm-fields-color-picker',
+});
+</script>
+
+<script lang="ts" setup>
+const emit = defineEmits(['change']);
+
+const props = defineProps({
+  ...fieldProps,
+  config: {
+    type: Object as PropType<ColorPickConfig>,
+    required: true,
+  },
+});
+
+useAddField(props.prop);
+
+const changeHandler = (value: string) => emit('change', value);
+</script>

package/src/fields/Date.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="model">
+    <el-date-picker
+      v-model="model[modelName]"
+      type="date"
+      :size="size"
+      :placeholder="config.placeholder"
+      :disabled="disabled"
+      :format="config.format"
+      :value-format="config.format || 'YYYY-MM-DD HH:mm:ss'"
+      @change="changeHandler"
+    ></el-date-picker>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import { datetimeFormatter } from '@tmagic/utils';
+
+import { DateConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-date',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<DateConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change', 'input'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    const modelName = computed(() => props.prop || props.config.name || '');
+    props.model[modelName.value] = datetimeFormatter(props.model[modelName.value], '');
+    return {
+      modelName,
+      changeHandler(v: string) {
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/DateTime.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="model">
+    <el-date-picker
+      v-model="model[name]"
+      popper-class="magic-datetime-picker-popper"
+      type="datetime"
+      :size="size"
+      :placeholder="config.placeholder"
+      :disabled="disabled"
+      :format="config.format || 'YYYY-MM-DD HH:mm:ss'"
+      :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+      @change="changeHandler"
+    ></el-date-picker>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { datetimeFormatter } from '@tmagic/utils';
+
+import { DateTimeConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-datetime',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<DateTimeConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    const value = props.model?.[props.name].toString();
+    if (props.model) {
+      if (value === 'Invalid Date') {
+        props.model[props.name] = '';
+      } else {
+        props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
+      }
+    }
+
+    return {
+      value,
+      changeHandler: (v: Date) => {
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/Daterange.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="value"
+      type="datetimerange"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :size="size"
+      :unlink-panels="true"
+      :disabled="disabled"
+      @change="changeHandler"
+    ></el-date-picker>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+
+import { datetimeFormatter } from '@tmagic/utils';
+
+import { DaterangeConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-daterange',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<DaterangeConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    const { names } = props.config;
+    const value = ref<(string | number)[]>([]);
+
+    if (props.model !== undefined) {
+      if (names?.length) {
+        value.value = names.map((item) => datetimeFormatter(props.model?.[item], ''));
+      } else if (props.name && props.model[props.name]) {
+        value.value = props.model[props.name].map((item: string) => datetimeFormatter(item, ''));
+      }
+    }
+
+    const setValue = (v: Date[] | Date) => {
+      if (names?.length && v instanceof Array) {
+        names.forEach((item, index) => {
+          if (props.model) {
+            props.model[item] = datetimeFormatter(v[index].toString(), '');
+          }
+        });
+      } else if (props.model && props.name && v instanceof Date) {
+        props.model[props.name] = datetimeFormatter(v.toString(), '');
+      }
+    };
+
+    return {
+      value,
+      changeHandler(v: Date[]) {
+        setValue(v);
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/Display.vue

@@ -0,0 +1,34 @@
+<template>
+  <span v-if="model">{{ model[n] }}</span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import { DisplayConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-display',
+});
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  ...fieldProps,
+  config: {
+    type: Object as PropType<DisplayConfig>,
+    required: true,
+  },
+});
+
+const n = computed(() => props.name || props.config.name || '');
+
+if (props.config.initValue && n.value && props.model) {
+  // eslint-disable-next-line no-param-reassign,vue/no-setup-props-destructure
+  props.model[n.value] = props.config.initValue;
+}
+
+useAddField(props.prop);
+</script>