@tmagic/form 1.0.0-beta.1

package/src/fields/DynamicField.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="m-fields-dynamic-field">
+    <el-form size="small">
+      <el-form-item v-for="key in Object.keys(fieldMap.value)" :key="key" :label="fieldLabelMap.value[key]">
+        <el-input
+          v-model="fieldMap.value[key]"
+          :placeholder="fieldLabelMap.value[key]"
+          @change="inputChangeHandler(key)"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 动态表单，目前只支持input类型字段
+ * inputType: 'dynamic-field',
+ * text: '动态表单',
+ * dynamicKey: 'keyname', 如果model[dynamicKey]变化，表单字段变化
+ * returnFields(config,model,request): 函数，返回字段列表[{name:'',label:'',defaultValue:''}]
+ *
+ * 特别注意！！！field的上一级必须extensible: true，才能保存未声明的字段
+ */
+
+import { defineComponent, onBeforeUnmount, PropType, reactive, watch } from 'vue';
+
+import { DynamicFieldConfig } from '../schema';
+import { getConfig } from '../utils/config';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-dynamic-field',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<DynamicFieldConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    const request = getConfig('request') as Function;
+    const fieldMap = reactive<{ [key: string]: any }>({
+      value: {},
+    });
+    const fieldLabelMap = reactive<{ [key: string]: any }>({
+      value: {},
+    });
+
+    const changeFieldMap = async () => {
+      if (typeof props.config.returnFields !== 'function' || !props.model) return;
+      const fields = await props.config.returnFields(props.config, props.model, request);
+      fieldMap.value = {};
+      fieldLabelMap.value = {};
+      fields.forEach((v) => {
+        if (typeof v !== 'object' || v.name === undefined) return;
+        let oldVal = props.model?.[v.name] || '';
+        if (!oldVal && v.defaultValue !== undefined) {
+          oldVal = v.defaultValue;
+          emit('change', oldVal, v.name);
+        }
+        fieldMap.value[v.name] = oldVal;
+        fieldLabelMap.value[v.name] = v.label || '';
+      });
+    };
+
+    const unwatch = watch(
+      () => props.model?.[props.config.dynamicKey],
+      (val) => {
+        if (val !== '') {
+          changeFieldMap();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    onBeforeUnmount(() => {
+      if (typeof unwatch === 'function') {
+        unwatch();
+      }
+    });
+
+    return {
+      request,
+      fieldMap,
+      fieldLabelMap,
+      unwatch,
+
+      changeFieldMap,
+      inputChangeHandler: (key: string) => {
+        emit('change', fieldMap.value[key], key);
+      },
+    };
+  },
+
+  methods: {
+    init() {},
+  },
+});
+</script>

package/src/fields/Hidden.vue

@@ -0,0 +1,29 @@
+<template>
+  <input v-if="model" v-model="model[n]" type="hidden" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import { HiddenConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-hidden',
+});
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  ...fieldProps,
+  config: {
+    type: Object as PropType<HiddenConfig>,
+    required: true,
+  },
+});
+
+const n = computed(() => props.name || props.config.name || '');
+
+useAddField(props.prop);
+</script>

package/src/fields/Link.vue

@@ -0,0 +1,112 @@
+<template>
+  <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
+  <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
+  <div v-else class="m-fields-link">
+    <el-button type="text" @click="editHandler">点击编辑</el-button>
+    <m-form-dialog
+      ref="editor"
+      :title="config.formTitle || '编辑扩展配置'"
+      :width="config.formWidth"
+      :values="formValue"
+      :config="formConfig"
+      :parentValues="values"
+      :fullscreen="config.fullscreen"
+      @submit="action"
+    ></m-form-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
+
+import FormDialog from '../FormDialog.vue';
+import { FormState, LinkConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-link',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<LinkConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    const formValue = ref({});
+    const editor = ref<InstanceType<typeof FormDialog>>();
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const href = computed(() => {
+      if (typeof props.config.href === 'function' && props.model) {
+        return props.config.href(props.model);
+      }
+      return props.config.href || props.model?.[props.name];
+    });
+
+    const init = () => {
+      formValue.value = props.model?.[props.name] || {};
+    };
+
+    return {
+      // ref
+      formValue,
+      editor,
+
+      // computed methods
+      href,
+
+      formConfig: computed(() => {
+        if (typeof props.config.form === 'function') {
+          return props.config.form(mForm, {
+            model: props.model || {},
+            values: props.values || {},
+          });
+        }
+        return props.config.form;
+      }),
+
+      disable: computed(() => {
+        if (typeof props.config.disabled !== 'undefined') {
+          return props.config.disabled;
+        }
+        return !href.value;
+      }),
+
+      displayText: computed(() => {
+        if (typeof props.config.displayText === 'function') {
+          return props.config.displayText(mForm, { model: props.model || {} });
+        }
+        if (props.config.displayText) {
+          return props.config.displayText;
+        }
+        return '跳转';
+      }),
+
+      // methods
+      init,
+
+      editHandler: () => {
+        init();
+        editor.value && (editor.value.dialogVisible = true);
+      },
+
+      action: (data: any) => {
+        if (props.model) {
+          props.model[props.name] = data;
+          formValue.value = data;
+          emit('change', props.model[props.name]);
+        }
+        editor.value && (editor.value.dialogVisible = false);
+      },
+    };
+  },
+});
+</script>

package/src/fields/Number.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-input-number
+    v-if="model"
+    v-model="model[name]"
+    clearable
+    controls-position="right"
+    :size="size"
+    :max="config.max"
+    :min="config.min"
+    :step="config.step"
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    @change="changeHandler"
+    @input="inputHandler"
+  ></el-input-number>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, PropType } from 'vue';
+
+import { FormState, NumberConfig } from '../schema';
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+export default defineComponent({
+  name: 'm-fields-number',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object as PropType<NumberConfig>,
+      required: true,
+    },
+  },
+
+  emits: ['change', 'input'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+
+    const mForm = inject<FormState | null>('mForm');
+    return {
+      mForm,
+      changeHandler: (value: number) => {
+        emit('change', value);
+      },
+      inputHandler: (v: string) => {
+        emit('input', v);
+        mForm?.$emit('field-input', props.prop, v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/RadioGroup.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-radio-group v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <el-radio v-for="option in config.options" :label="option.value" :key="option.value">{{ option.text }}</el-radio>
+  </el-radio-group>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import fieldProps from '../utils/fieldProps';
+import { useAddField } from '../utils/useAddField';
+
+export default defineComponent({
+  name: 'm-fields-radio-group',
+
+  props: {
+    ...fieldProps,
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    useAddField(props.prop);
+    return {
+      changeHandler: (v: string | number | boolean) => emit('change', v),
+    };
+  },
+});
+</script>