@tmagic/form 1.4.8 → 1.4.9

package/src/containers/Tabs.vue

@@ -0,0 +1,226 @@
+<template>
+  <component
+    v-model="activeTabName"
+    v-bind="
+      tabsComponent?.props({
+        type: config.tabType,
+        editable: config.editable || false,
+        tabPosition: config.tabPosition || 'top',
+      }) || {}
+    "
+    :is="tabsComponent?.component || 'el-tabs'"
+    :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
+    @tab-click="tabClickHandler"
+    @tab-add="onTabAdd"
+    @tab-remove="onTabRemove"
+  >
+    <component
+      v-for="(tab, tabIndex) in tabs"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
+      :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
+      v-bind="
+        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+      "
+    >
+      <template #label>
+        <span>
+          {{ filter(tab.title)
+          }}<TMagicBadge
+            :hidden="!diffCount[tabIndex]"
+            :value="diffCount[tabIndex]"
+            class="diff-count-badge"
+          ></TMagicBadge>
+        </span>
+      </template>
+      <Container
+        v-for="item in tabItems(tab)"
+        :key="item[mForm?.keyProp || '__key']"
+        :config="item"
+        :disabled="disabled"
+        :model="
+          config.dynamic
+            ? (name ? model[name] : model)[tabIndex]
+            : tab.name
+            ? (name ? model[name] : model)[tab.name]
+            : name
+            ? model[name]
+            : model
+        "
+        :last-values="
+          isEmpty(lastValues)
+            ? {}
+            : config.dynamic
+            ? (name ? lastValues[name] : lastValues)[tabIndex]
+            : tab.name
+            ? (name ? lastValues[name] : lastValues)[tab.name]
+            : name
+            ? lastValues[name]
+            : lastValues
+        "
+        :is-compare="isCompare"
+        :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
+        :size="size"
+        :label-width="tab.labelWidth || labelWidth"
+        :expand-more="expandMore"
+        @change="changeHandler"
+        @addDiffCount="onAddDiffCount(tabIndex)"
+      ></Container>
+    </component>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watchEffect } from 'vue';
+import { cloneDeep, isEmpty } from 'lodash-es';
+
+import { getConfig, TMagicBadge } from '@tmagic/design';
+
+import { FormState, TabConfig, TabPaneConfig } from '../schema';
+import { display as displayFunc, filterFunction } from '../utils/form';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormTabs',
+});
+
+type DiffCount = {
+  [tabIndex: number]: number;
+};
+
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
+
+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 tabClick = (mForm: FormState | undefined, tab: any, props: any) => {
+  const { config, model, prop } = props;
+
+  // 兼容vue2的element-ui
+  tab.name = tab.paneName;
+
+  if (typeof config.onTabClick === 'function') {
+    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
+  }
+
+  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, config });
+  }
+};
+
+const props = withDefaults(
+  defineProps<{
+    model: any;
+    lastValues?: any;
+    isCompare?: boolean;
+    config: TabConfig;
+    name: string;
+    size?: string;
+    labelWidth?: string;
+    prop?: string;
+    expandMore?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    lastValues: () => ({}),
+    isCompare: false,
+  },
+);
+
+const emit = defineEmits(['change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+const activeTabName = ref(getActive(mForm, props, ''));
+const diffCount = ref<DiffCount>({});
+
+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.filter((item) => displayFunc(mForm, item.display, props));
+});
+
+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,
+    });
+  }
+});
+
+const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
+
+const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
+
+const onTabAdd = () => {
+  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+
+  if (typeof props.config.onTabAdd === 'function') {
+    props.config.onTabAdd(mForm, {
+      model: props.model,
+      prop: props.prop,
+      config: props.config,
+    });
+  } 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]);
+};
+
+const 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,
+      prop: props.prop,
+      config: props.config,
+    });
+  } 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();
+      tabClick(mForm, { name: activeTabName.value }, props);
+    }
+  }
+  emit('change', props.model);
+  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+};
+
+const changeHandler = () => {
+  emit('change', props.model);
+  if (typeof props.config.onChange === 'function') {
+    props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
+  }
+};
+
+// 在tabs组件中收集事件触发次数，即该tab下的差异数
+const onAddDiffCount = (tabIndex: number) => {
+  if (!diffCount.value[tabIndex]) {
+    diffCount.value[tabIndex] = 1;
+  } else {
+    diffCount.value[tabIndex] += 1;
+  }
+  // 继续抛出给更高层级的组件
+  emit('addDiffCount');
+};
+</script>

package/src/fields/Cascader.vue

@@ -0,0 +1,131 @@
+<template>
+  <TMagicCascader
+    v-model="value"
+    ref="tMagicCascader"
+    style="width: 100%"
+    clearable
+    filterable
+    :size="size"
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    :options="options"
+    :popper-class="config.popperClass"
+    :props="{
+      multiple: config.multiple ?? false,
+      emitPath: config.emitPath ?? true,
+      checkStrictly: checkStrictly ?? false,
+    }"
+    @change="changeHandler"
+  ></TMagicCascader>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import { TMagicCascader } from '@tmagic/design';
+
+import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '../schema';
+import { getConfig } from '../utils/config';
+import { filterFunction } from '../utils/form';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormCascader',
+});
+
+const props = defineProps<FieldProps<CascaderConfig>>();
+
+const emit = defineEmits(['change']);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+useAddField(props.prop);
+
+const requestFunc = getConfig('request') as Function;
+
+const tMagicCascader = ref<InstanceType<typeof TMagicCascader>>();
+
+const options = ref<CascaderOption[]>([]);
+const remoteData = ref<any>(null);
+
+const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+
+const value = computed({
+  get() {
+    if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
+      return props.model[props.name].split(valueSeparator.value);
+    }
+    return props.model[props.name];
+  },
+  set(value) {
+    let result = value;
+    if (valueSeparator.value) {
+      result = value.join(valueSeparator.value);
+    }
+    props.model[props.name] = result;
+  },
+});
+
+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: mForm.values,
+        formValues: mForm.values,
+        config: props.config,
+      });
+    }
+    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(() => {
+    typeof props.config.options === 'function' &&
+      Promise.resolve(
+        props.config.options(mForm, {
+          model: props.model,
+          prop: props.prop,
+          formValue: mForm?.values,
+        }),
+      ).then((data) => {
+        options.value = data;
+      });
+  });
+} else if (!props.config.options?.length || props.config.remote) {
+  Promise.resolve(setRemoteOptions());
+} else if (Array.isArray(props.config.options)) {
+  watchEffect(() => {
+    options.value = props.config.options as CascaderOption[];
+  });
+}
+
+const changeHandler = () => {
+  if (!tMagicCascader.value) return;
+  tMagicCascader.value.setQuery('');
+  tMagicCascader.value.setPreviousQuery(null);
+  emit('change', props.model[props.name]);
+};
+</script>

package/src/fields/Checkbox.vue

@@ -0,0 +1,58 @@
+<template>
+  <TMagicCheckbox
+    v-model="model[name]"
+    :size="size"
+    :trueValue="activeValue"
+    :falseValue="inactiveValue"
+    :disabled="disabled"
+    @change="changeHandler"
+    >{{ config.text }}</TMagicCheckbox
+  >
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { TMagicCheckbox } from '@tmagic/design';
+
+import type { CheckboxConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormCheckbox',
+});
+
+const props = defineProps<FieldProps<CheckboxConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const activeValue = computed(() => {
+  if (typeof props.config.activeValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 1;
+    }
+  } else {
+    return props.config.activeValue;
+  }
+
+  return undefined;
+});
+
+const inactiveValue = computed(() => {
+  if (typeof props.config.inactiveValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 0;
+    }
+  } else {
+    return props.config.inactiveValue;
+  }
+
+  return undefined;
+});
+
+const changeHandler = (value: number | boolean) => {
+  emit('change', value);
+};
+</script>

package/src/fields/CheckboxGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
+      >{{ option.text }}
+    </TMagicCheckbox>
+  </TMagicCheckboxGroup>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
+
+import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormCheckGroup',
+});
+
+const props = defineProps<FieldProps<CheckboxGroupConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+// 初始化选项
+if (props.model && !props.model[props.name]) {
+  props.model[props.name] = [];
+}
+
+const changeHandler = (v: Array<string | number | boolean>) => {
+  emit('change', v);
+};
+
+const mForm = inject<FormState | undefined>('mForm');
+const options = computed(() => {
+  if (Array.isArray(props.config.options)) return props.config.options;
+  if (typeof props.config.options === 'function') return filterFunction(mForm, props.config.options, props);
+  return [];
+});
+</script>

package/src/fields/ColorPicker.vue

@@ -0,0 +1,30 @@
+<template>
+  <TMagicColorPicker
+    v-model="model[name]"
+    :size="size"
+    :disabled="disabled"
+    :showAlpha="true"
+    @change="changeHandler"
+  ></TMagicColorPicker>
+</template>
+
+<script lang="ts" setup>
+import { TMagicColorPicker } from '@tmagic/design';
+
+import type { ColorPickConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormColorPicker',
+});
+
+const props = defineProps<FieldProps<ColorPickConfig>>();
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+useAddField(props.prop);
+
+const changeHandler = (value: string) => emit('change', value);
+</script>

package/src/fields/Date.vue

@@ -0,0 +1,38 @@
+<template>
+  <TMagicDatePicker
+    v-model="model[name]"
+    type="date"
+    :size="size"
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    :format="config.format"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    @change="changeHandler"
+  ></TMagicDatePicker>
+</template>
+
+<script lang="ts" setup>
+import { TMagicDatePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DateConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormDate',
+});
+
+const props = defineProps<FieldProps<DateConfig>>();
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+useAddField(props.prop);
+
+props.model[props.name] = datetimeFormatter(props.model[props.name], '');
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+</script>

package/src/fields/DateTime.vue

@@ -0,0 +1,47 @@
+<template>
+  <TMagicDatePicker
+    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'"
+    :default-time="config.defaultTime"
+    @change="changeHandler"
+  ></TMagicDatePicker>
+</template>
+
+<script lang="ts" setup>
+import { TMagicDatePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DateTimeConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormDateTime',
+});
+
+const props = defineProps<FieldProps<DateTimeConfig>>();
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+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);
+  }
+}
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+</script>

package/src/fields/Daterange.vue

@@ -0,0 +1,99 @@
+<template>
+  <TMagicDatePicker
+    v-model="value"
+    type="datetimerange"
+    range-separator="-"
+    start-placeholder="开始日期"
+    end-placeholder="结束日期"
+    :size="size"
+    :unlink-panels="true"
+    :disabled="disabled"
+    :default-time="config.defaultTime"
+    @change="changeHandler"
+  ></TMagicDatePicker>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { TMagicDatePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DaterangeConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormDateRange',
+});
+
+const props = defineProps<FieldProps<DaterangeConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { names } = props.config;
+const value = ref<(Date | undefined)[] | null>([]);
+
+if (props.model !== undefined) {
+  if (names?.length) {
+    watch(
+      [() => props.model[names[0]], () => props.model[names[1]]],
+      ([start, end], [preStart, preEnd]) => {
+        if (!value.value) {
+          value.value = [];
+        }
+        if (!start || !end) value.value = [];
+        if (start !== preStart) value.value[0] = new Date(start);
+        if (end !== preEnd) value.value[1] = new Date(end);
+      },
+      {
+        immediate: true,
+      },
+    );
+  } else if (props.name && props.model[props.name]) {
+    watch(
+      () => props.model[props.name],
+      (start, preStart) => {
+        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
+      },
+      {
+        immediate: true,
+      },
+    );
+  }
+}
+
+const setValue = (v: Date[] | Date) => {
+  names?.forEach((item, index) => {
+    if (!props.model) {
+      return;
+    }
+    if (Array.isArray(v)) {
+      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+    } else {
+      props.model[item] = undefined;
+    }
+  });
+};
+
+const changeHandler = (v: Date[]) => {
+  const value = v || [];
+
+  if (props.name) {
+    emit(
+      'change',
+      value.map((item?: Date) => {
+        if (item) return datetimeFormatter(item, '');
+        return undefined;
+      }),
+    );
+  } else {
+    if (names?.length) {
+      setValue(value);
+    }
+    emit('change', value);
+  }
+};
+</script>

package/src/fields/Display.vue

@@ -0,0 +1,21 @@
+<template>
+  <span v-if="model">{{ model[name] }}</span>
+</template>
+
+<script setup lang="ts">
+import type { DisplayConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormDisplay',
+});
+
+const props = defineProps<FieldProps<DisplayConfig>>();
+
+if (props.config.initValue && props.model) {
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  props.model[props.name] = props.config.initValue;
+}
+
+useAddField(props.prop);
+</script>