@tmagic/form 1.0.0-beta.1

package/src/containers/Fieldset.vue

@@ -0,0 +1,138 @@
+<template>
+  <fieldset
+    v-if="name ? model[name] : model"
+    class="m-fieldset"
+    :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
+  >
+    <el-checkbox
+      v-if="!show && name"
+      v-model="model[name].value"
+      :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
+      :true-label="1"
+      :false-label="0"
+      @change="change"
+      ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
+    ></el-checkbox>
+    <legend v-else-if="config.checkbox && name">
+      <el-checkbox
+        v-model="model[name].value"
+        :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
+        :true-label="1"
+        :false-label="0"
+        @change="change"
+        ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
+      ></el-checkbox>
+    </legend>
+    <legend v-else>
+      <span v-html="config.legend"></span>
+      <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
+    </legend>
+
+    <div v-if="config.schematic && show" style="display: flex">
+      <div style="flex: 1">
+        <m-form-container
+          v-for="(item, index) in config.items"
+          :key="key(item, index)"
+          :model="name ? model[name] : model"
+          :rules="name ? rules[name] : []"
+          :config="item"
+          :prop="prop"
+          :labelWidth="lWidth"
+          :size="size"
+          @change="change"
+        ></m-form-container>
+      </div>
+
+      <img class="m-form-schematic" :src="config.schematic" />
+    </div>
+
+    <template v-else-if="show">
+      <m-form-container
+        v-for="(item, index) in config.items"
+        :key="key(item, index)"
+        :model="name ? model[name] : model"
+        :rules="name ? rules[name] : []"
+        :config="item"
+        :prop="prop"
+        :labelWidth="lWidth"
+        :size="size"
+        @change="change"
+      ></m-form-container>
+    </template>
+  </fieldset>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+
+import { FieldsetConfig, FormState } from '../schema';
+
+export default defineComponent({
+  name: 'm-form-fieldset',
+
+  props: {
+    labelWidth: String,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<FieldsetConfig>,
+      default: () => ({}),
+    },
+
+    rules: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    prop: {
+      type: String,
+      default: () => '',
+    },
+
+    size: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const name = computed(() => props.config.name || '');
+
+    const show = computed(() => {
+      if (props.config.expand && name.value) {
+        return props.model[name.value]?.value;
+      }
+      return true;
+    });
+
+    const lWidth = computed(() => {
+      if (props.config.items) {
+        return props.config.labelWidth || props.labelWidth;
+      }
+      return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
+    });
+
+    const change = () => {
+      emit('change', props.model);
+    };
+
+    const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
+
+    return {
+      show,
+      name,
+      mForm,
+      lWidth,
+      key,
+      change,
+    };
+  },
+});
+</script>
+
+<style lang="scss"></style>

package/src/containers/GroupList.vue

@@ -0,0 +1,152 @@
+<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>
+
+    <m-fields-group-list-item
+      v-else
+      v-for="(item, index) in model[name]"
+      :key="index"
+      :model="item"
+      :config="config"
+      :prop="prop"
+      :index="index"
+      :label-width="labelWidth"
+      :size="size"
+      :group-model="model[name]"
+      @remove-item="removeHandler"
+      @swap-item="swapHandler"
+      @change="changeHandler"
+    ></m-fields-group-list-item>
+
+    <el-button @click="addHandler" size="small" v-if="addable">添加组</el-button>
+
+    <el-button icon="el-icon-s-grid" size="small" @click="toggleMode" v-if="config.enableToggleMode"
+      >切换为表格</el-button
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+
+import { FormState, GroupListConfig } from '../schema';
+import { initValue } from '../utils/form';
+
+import MFieldsGroupListItem from './GroupListItem.vue';
+
+export default defineComponent({
+  name: 'm-form-group-list',
+
+  components: { MFieldsGroupListItem },
+
+  props: {
+    labelWidth: String,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<GroupListConfig>,
+      default: () => ({}),
+    },
+
+    prop: {
+      type: String,
+      default: '',
+    },
+
+    size: String,
+
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    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,
+        });
+      }
+
+      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,
+        });
+      } 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;
+    };
+    return {
+      addable,
+      toggleMode,
+      removeHandler,
+      swapHandler,
+      changeHandler,
+      addHandler,
+    };
+  },
+});
+</script>

package/src/containers/GroupListItem.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="m-fields-group-list-item">
+    <div>
+      <el-icon style="margin-right: 7px" @click="expandHandler"
+        ><caret-bottom v-if="expand" /><caret-right v-else
+      /></el-icon>
+
+      <el-button type="text" @click="expandHandler">{{ title }}</el-button>
+
+      <el-button
+        v-show="showDelete(parseInt(String(index)))"
+        type="text"
+        :icon="Delete"
+        style="color: #f56c6c"
+        @click="removeHandler"
+      ></el-button>
+
+      <template v-if="movable()">
+        <el-button v-show="index !== 0" type="text" size="small" @click="changeOrder(-1)"
+          >上移<el-icon><CaretRight /></el-icon
+        ></el-button>
+        <el-button v-show="index !== length - 1" type="text" size="small" @click="changeOrder(1)"
+          >下移<el-icon><CaretBottom /></el-icon
+        ></el-button>
+      </template>
+
+      <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+    </div>
+
+    <m-form-container
+      v-if="expand"
+      :config="rowConfig"
+      :model="model"
+      :labelWidth="labelWidth"
+      :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
+      :size="size"
+      @change="changeHandler"
+    ></m-form-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+import { CaretBottom, CaretRight, Delete } from '@element-plus/icons';
+
+import { FormState, GroupListConfig } from '../schema';
+import { filterFunction } from '../utils/form';
+
+export default defineComponent({
+  name: 'm-form-group-list-item',
+
+  components: { CaretRight, CaretBottom },
+
+  props: {
+    labelWidth: String,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<GroupListConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    size: String,
+
+    index: {
+      type: [Number, String, Symbol],
+      default: 0,
+    },
+
+    groupModel: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  emits: ['swap-item', 'remove-item', 'change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+    const expand = ref(false);
+
+    watchEffect(() => {
+      expand.value = !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];
+      }
+
+      return `组 ${String(props.index)}`;
+    });
+
+    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, `${String(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;
+    };
+
+    return {
+      expand,
+      expandHandler,
+      title,
+      showDelete,
+      removeHandler,
+      movable,
+      changeOrder,
+      itemExtra,
+      rowConfig,
+      changeHandler,
+      length,
+      Delete,
+    };
+  },
+});
+</script>

package/src/containers/Panel.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-card
+    v-if="items && items.length"
+    class="box-card m-form-panel"
+    :body-style="{ display: expand ? 'block' : 'none' }"
+  >
+    <template #header>
+      <div class="clearfix">
+        <a href="javascript:" style="width: 100%; display: block" @click="expand = !expand">
+          <el-icon><caret-bottom v-if="expand" /><caret-right v-else /></el-icon> {{ filter(config.title) }}
+          <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
+        </a>
+      </div>
+    </template>
+
+    <div>
+      <slot></slot>
+
+      <div v-if="config.schematic" style="display: flex">
+        <div style="flex: 1">
+          <m-form-container
+            v-for="(item, index) in items"
+            :key="item[mForm?.keyProp || '__key'] ?? index"
+            :config="item"
+            :model="name ? model[name] : model"
+            :prop="prop"
+            :size="size"
+            :label-width="config.labelWidth || labelWidth"
+            @change="changeHandler"
+          ></m-form-container>
+        </div>
+
+        <img class="m-form-schematic" :src="config.schematic" />
+      </div>
+
+      <template v-else>
+        <m-form-container
+          v-for="(item, index) in items"
+          :key="item[mForm?.keyProp || '__key'] ?? index"
+          :config="item"
+          :model="name ? model[name] : model"
+          :prop="prop"
+          :size="size"
+          :label-width="config.labelWidth || labelWidth"
+          @change="changeHandler"
+        ></m-form-container>
+      </template>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
+import { CaretBottom, CaretRight } from '@element-plus/icons';
+
+import { FormState, PanelConfig } from '../schema';
+import { filterFunction } from '../utils/form';
+
+export default defineComponent({
+  name: 'm-form-panel',
+
+  components: { CaretBottom, CaretRight },
+
+  props: {
+    labelWidth: String,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<PanelConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    size: String,
+
+    name: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    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);
+
+    return {
+      mForm,
+      expand,
+      items,
+      filter,
+      changeHandler,
+    };
+  },
+});
+</script>

package/src/containers/Row.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-row :gutter="10">
+    <el-col
+      v-for="(col, index) in config.items"
+      :style="!display(col) || col.type === 'hidden' ? 'display: none' : ''"
+      :key="col[mForm?.keyProp || '__key'] ?? index"
+      :span="col.span || config.span || 24 / config.items.length"
+    >
+      <m-form-container
+        :model="name ? model[name] : model"
+        :config="col"
+        :prop="prop"
+        :label-width="config.labelWidth || labelWidth"
+        :expand-more="expandMore"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, PropType } from 'vue';
+
+import { FormState, RowConfig } from '../schema';
+import { display as displayFunction } from '../utils/form';
+
+export default defineComponent({
+  name: 'm-form-row',
+
+  props: {
+    labelWidth: String,
+    expandMore: Boolean,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<RowConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    name: String,
+
+    size: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+
+    return {
+      mForm,
+      display(config: any) {
+        return displayFunction(mForm, config.display, props);
+      },
+      changeHandler,
+    };
+  },
+});
+</script>

package/src/containers/Step.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-steps :active="active" align-center :space="config.space">
+      <el-step
+        v-for="(item, index) in config.items"
+        :key="item.__key"
+        :title="item.title"
+        :active="active"
+        @click="stepClick(index)"
+      ></el-step>
+    </el-steps>
+
+    <template v-for="(step, index) in config.items">
+      <template v-for="item in step.items">
+        <m-form-container
+          v-if="item"
+          v-show="active - 1 === index"
+          :key="item[mForm?.keyProp || '__key']"
+          :config="item"
+          :model="step.name ? model[step.name] : model"
+          :prop="step.name"
+          :size="size"
+          :label-width="config.labelWidth || labelWidth"
+          @change="changeHandler"
+        ></m-form-container>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+
+import { FormState, StepConfig } from '../schema';
+
+export default defineComponent({
+  name: 'm-form-step',
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<StepConfig>,
+      default: () => ({}),
+    },
+
+    stepActive: {
+      type: Number,
+      default: () => 1,
+    },
+
+    size: String,
+
+    labelWidth: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    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);
+    };
+
+    return { mForm, active, stepClick, changeHandler };
+  },
+});
+</script>