@tmagic/form 1.4.8 → 1.4.9

package/src/containers/GroupList.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="m-fields-group-list">
+    <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
+    <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
+      <span class="el-table__empty-text">暂无数据</span>
+    </div>
+
+    <MFieldsGroupListItem
+      v-else
+      v-for="(item, index) in model[name]"
+      :key="index"
+      :model="item"
+      :lastValues="getLastValues(lastValues[name], index)"
+      :is-compare="isCompare"
+      :config="config"
+      :prop="prop"
+      :index="index"
+      :label-width="labelWidth"
+      :size="size"
+      :disabled="disabled"
+      :group-model="model[name]"
+      @remove-item="removeHandler"
+      @swap-item="swapHandler"
+      @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
+    ></MFieldsGroupListItem>
+
+    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">新增</TMagicButton>
+
+    <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+
+import { FormState, GroupListConfig } from '../schema';
+import { initValue } from '../utils/form';
+
+import MFieldsGroupListItem from './GroupListItem.vue';
+
+defineOptions({
+  name: 'MFormGroupList',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: GroupListConfig;
+  name: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const addable = computed(() => {
+  if (!props.name) return false;
+
+  if (typeof props.config.addable === 'function') {
+    return props.config.addable(mForm, {
+      model: props.model[props.name],
+      formValue: mForm?.values,
+      prop: props.prop,
+      config: props.config,
+    });
+  }
+
+  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+});
+
+const changeHandler = () => {
+  if (!props.name) return false;
+
+  emit('change', props.model[props.name]);
+};
+
+const addHandler = async () => {
+  if (!props.name) return false;
+
+  let initValues = {};
+
+  if (typeof props.config.defaultAdd === 'function') {
+    initValues = await props.config.defaultAdd(mForm, {
+      model: props.model[props.name],
+      formValue: mForm?.values,
+      prop: props.prop,
+      config: props.config,
+    });
+  } else if (props.config.defaultAdd) {
+    initValues = props.config.defaultAdd;
+  }
+
+  const groupValue = await initValue(mForm, {
+    config: props.config.items,
+    initValues,
+  });
+
+  props.model[props.name].push(groupValue);
+};
+
+const removeHandler = (index: number) => {
+  if (!props.name) return false;
+
+  props.model[props.name].splice(index, 1);
+  changeHandler();
+};
+
+const swapHandler = (idx1: number, idx2: number) => {
+  if (!props.name) return false;
+
+  const [currRow] = props.model[props.name].splice(idx1, 1);
+  props.model[props.name].splice(idx2, 0, currRow);
+  changeHandler();
+};
+
+const toggleMode = () => {
+  props.config.type = 'table';
+  props.config.groupItems = props.config.items;
+  props.config.items = (props.config.tableItems ||
+    props.config.items.map((item: any) => ({
+      ...item,
+      label: item.label || item.text,
+      text: null,
+    }))) as any;
+};
+
+const onAddDiffCount = () => emit('addDiffCount');
+
+const getLastValues = (item: any, index: number) => item?.[index] || {};
+</script>

package/src/containers/GroupListItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="m-fields-group-list-item">
+    <div>
+      <TMagicButton link :disabled="disabled" @click="expandHandler">
+        <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
+      </TMagicButton>
+
+      <TMagicButton
+        v-show="showDelete(parseInt(String(index)))"
+        style="color: #f56c6c"
+        link
+        :icon="Delete"
+        :disabled="disabled"
+        @click="removeHandler"
+      ></TMagicButton>
+
+      <template v-if="movable()">
+        <TMagicButton v-show="index !== 0" link :disabled="disabled" size="small" @click="changeOrder(-1)"
+          >上移<TMagicIcon><CaretTop /></TMagicIcon
+        ></TMagicButton>
+        <TMagicButton v-show="index !== length - 1" :disabled="disabled" link size="small" @click="changeOrder(1)"
+          >下移<TMagicIcon><CaretBottom /></TMagicIcon
+        ></TMagicButton>
+      </template>
+
+      <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+    </div>
+
+    <Container
+      v-if="expand"
+      :config="rowConfig"
+      :model="model"
+      :lastValues="lastValues"
+      :is-compare="isCompare"
+      :labelWidth="labelWidth"
+      :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
+      :size="size"
+      :disabled="disabled"
+      @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
+    ></Container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicIcon } from '@tmagic/design';
+
+import { FormState, GroupListConfig } from '../schema';
+import { filterFunction } from '../utils/form';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormGroupListItem',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues: any;
+  isCompare?: boolean;
+  groupModel: any[];
+  config: GroupListConfig;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  index: number;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['swap-item', 'remove-item', 'change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+const expand = ref(props.config.expandAll || !props.index);
+
+const rowConfig = computed(() => ({
+  type: 'row',
+  span: props.config.span || 24,
+  items: props.config.items,
+  labelWidth: props.config.labelWidth,
+  [mForm?.keyProp || '__key']: `${props.config[mForm?.keyProp || '__key']}${String(props.index)}`,
+}));
+
+const title = computed(() => {
+  if (props.config.titleKey && props.model[props.config.titleKey]) {
+    return props.model[props.config.titleKey];
+  }
+
+  if (props.config.title) {
+    return filterFunction(mForm, props.config.title, props);
+  }
+
+  const titlePrefix = props.config.titlePrefix || '组';
+
+  return `${titlePrefix} ${String(props.index + 1)}`;
+});
+
+const length = computed(() => props.groupModel?.length || 0);
+
+const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, props));
+
+const removeHandler = () => emit('remove-item', props.index);
+
+const changeHandler = () => emit('change');
+
+const expandHandler = () => {
+  expand.value = !expand.value;
+};
+
+// 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
+const showDelete = (index: number) => {
+  const deleteFunc = props.config.delete;
+  if (deleteFunc && typeof deleteFunc === 'function') {
+    return deleteFunc(props.model, index, mForm?.values);
+  }
+  return true;
+};
+
+// 调换顺序
+const changeOrder = (offset = 0) => emit('swap-item', props.index, props.index + offset);
+
+const movable = () => {
+  const { movable } = props.config;
+
+  // 没有设置时，默认可移动
+  if (movable === undefined) return true;
+  if (typeof movable === 'function') {
+    return movable(mForm, props.index || 0, props.model, props.groupModel);
+  }
+  return movable;
+};
+const onAddDiffCount = () => emit('addDiffCount');
+</script>

package/src/containers/Panel.vue

@@ -0,0 +1,99 @@
+<template>
+  <TMagicCard
+    v-if="items && items.length"
+    class="box-card m-form-panel"
+    :body-style="{ display: expand ? 'block' : 'none' }"
+  >
+    <template #header>
+      <div style="width: 100%; display: flex; align-items: center">
+        <TMagicButton style="padding: 0" link :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
+        </TMagicButton>
+        <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
+        <slot name="header">{{ filter(config.title) }}</slot>
+      </div>
+    </template>
+
+    <div>
+      <slot></slot>
+
+      <div v-if="config.schematic" style="display: flex">
+        <div style="flex: 1">
+          <Container
+            v-for="(item, index) in items"
+            :key="item[mForm?.keyProp || '__key'] ?? index"
+            :config="item"
+            :model="name ? model[name] : model"
+            :lastValues="name ? lastValues[name] : lastValues"
+            :is-compare="isCompare"
+            :prop="prop"
+            :size="size"
+            :disabled="disabled"
+            :label-width="config.labelWidth || labelWidth"
+            @change="changeHandler"
+            @addDiffCount="onAddDiffCount()"
+          ></Container>
+        </div>
+
+        <img class="m-form-schematic" :src="config.schematic" />
+      </div>
+
+      <template v-else>
+        <Container
+          v-for="(item, index) in items"
+          :key="item[mForm?.keyProp || '__key'] ?? index"
+          :config="item"
+          :model="name ? model[name] : model"
+          :lastValues="name ? lastValues[name] : lastValues"
+          :is-compare="isCompare"
+          :prop="prop"
+          :size="size"
+          :disabled="disabled"
+          :label-width="config.labelWidth || labelWidth"
+          @change="changeHandler"
+          @addDiffCount="onAddDiffCount()"
+        ></Container>
+      </template>
+    </div>
+  </TMagicCard>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicCard } from '@tmagic/design';
+
+import { FormState, PanelConfig } from '../schema';
+import { filterFunction } from '../utils/form';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormPanel',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: PanelConfig;
+  name?: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const expand = ref(props.config.expand !== false);
+
+const items = computed(() => props.config.items);
+
+const filter = (config: any) => filterFunction(mForm, config, props);
+
+const changeHandler = () => emit('change', props.model);
+const onAddDiffCount = () => emit('addDiffCount');
+</script>

package/src/containers/Row.vue

@@ -0,0 +1,54 @@
+<template>
+  <TMagicRow :gutter="10">
+    <Col
+      v-for="(col, index) in config.items"
+      :key="col[mForm?.keyProp || '__key'] ?? index"
+      :span="col.span || config.span || 24 / config.items.length"
+      :config="col"
+      :labelWidth="config.labelWidth || labelWidth"
+      :expandMore="expandMore"
+      :model="name ? model[name] : model"
+      :lastValues="name ? lastValues[name] : lastValues"
+      :is-compare="isCompare"
+      :prop="prop"
+      :size="size"
+      :disabled="disabled"
+      @change="changeHandler"
+      @add-diff-count="onAddDiffCount"
+    />
+  </TMagicRow>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { TMagicRow } from '@tmagic/design';
+
+import { FormState, RowConfig } from '../schema';
+
+import Col from './Col.vue';
+
+defineOptions({
+  name: 'MFormRow',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: RowConfig;
+  name: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  expandMore?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const onAddDiffCount = () => emit('addDiffCount');
+</script>

package/src/containers/Step.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <TMagicSteps :active="active" align-center :space="config.space">
+      <TMagicStep
+        v-for="(item, index) in config.items"
+        :key="item.__key"
+        :title="item.title"
+        :active="active"
+        @click="stepClick(index)"
+      ></TMagicStep>
+    </TMagicSteps>
+
+    <template v-for="(step, index) in config.items">
+      <template v-for="item in step.items">
+        <Container
+          v-if="item"
+          v-show="active - 1 === index"
+          :key="item[mForm?.keyProp || '__key']"
+          :config="item"
+          :model="step.name ? model[step.name] : model"
+          :lastValues="step.name ? lastValues[step.name] : lastValues"
+          :is-compare="isCompare"
+          :prop="`${step.name}`"
+          :size="size"
+          :disabled="disabled"
+          :label-width="config.labelWidth || labelWidth"
+          @change="changeHandler"
+          @addDiffCount="onAddDiffCount()"
+        ></Container>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect } from 'vue';
+
+import { TMagicStep, TMagicSteps } from '@tmagic/design';
+
+import { FormState, StepConfig } from '../schema';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormStep',
+});
+
+const props = withDefaults(
+  defineProps<{
+    model: any;
+    lastValues?: any;
+    isCompare?: boolean;
+    config: StepConfig;
+    stepActive?: number;
+    labelWidth?: string;
+    size?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    stepActive: 1,
+  },
+);
+
+const emit = defineEmits(['change', 'addDiffCount']);
+
+const mForm = inject<FormState | undefined>('mForm');
+const active = ref(1);
+
+watchEffect(() => {
+  active.value = props.stepActive;
+});
+
+const stepClick = (index: number) => {
+  active.value = index + 1;
+  mForm?.$emit('update:stepActive', active.value);
+};
+
+const changeHandler = () => {
+  emit('change', props.model);
+};
+const onAddDiffCount = () => emit('addDiffCount');
+</script>