@tmagic/form 1.4.8 → 1.4.10

package/src/fields/DynamicField.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="m-fields-dynamic-field">
+    <TMagicForm size="small">
+      <TMagicFormItem v-for="key in Object.keys(fieldMap.value)" :key="key" :label="fieldLabelMap.value[key]">
+        <TMagicInput
+          v-model="fieldMap.value[key]"
+          :placeholder="fieldLabelMap.value[key]"
+          @change="inputChangeHandler(key)"
+        ></TMagicInput>
+      </TMagicFormItem>
+    </TMagicForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * 动态表单，目前只支持input类型字段
+ * inputType: 'dynamic-field',
+ * text: '动态表单',
+ * dynamicKey: 'keyname', 如果model[dynamicKey]变化，表单字段变化
+ * returnFields(config,model,request): 函数，返回字段列表[{name:'',label:'',defaultValue:''}]
+ *
+ * 特别注意！！！field的上一级必须extensible: true，才能保存未声明的字段
+ */
+
+import { onBeforeUnmount, reactive, watch } from 'vue';
+
+import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
+
+import type { DynamicFieldConfig, FieldProps } from '../schema';
+import { getConfig } from '../utils/config';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormDynamicField',
+});
+
+const props = defineProps<FieldProps<DynamicFieldConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const request = getConfig<Function>('request');
+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();
+  }
+});
+
+const inputChangeHandler = (key: string) => {
+  emit('change', fieldMap.value[key], key);
+};
+</script>

package/src/fields/Hidden.vue

@@ -0,0 +1,16 @@
+<template>
+  <input v-if="model" v-model="model[name]" type="hidden" />
+</template>
+
+<script setup lang="ts">
+import type { FieldProps, HiddenConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormHidden',
+});
+
+const props = defineProps<FieldProps<HiddenConfig>>();
+
+useAddField(props.prop);
+</script>

package/src/fields/Link.vue

@@ -0,0 +1,86 @@
+<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">
+    <TMagicButton link type="primary" @click="editHandler">点击编辑</TMagicButton>
+    <FormDialog
+      ref="editor"
+      :title="config.formTitle || '编辑扩展配置'"
+      :width="config.formWidth"
+      :values="formValue"
+      :config="formConfig"
+      :parentValues="values"
+      :fullscreen="config.fullscreen"
+      @submit="action"
+    ></FormDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton } from '@tmagic/design';
+
+import FormDialog from '../FormDialog.vue';
+import type { FieldProps, FormState, LinkConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormLink',
+});
+
+const props = defineProps<FieldProps<LinkConfig>>();
+
+const emit = defineEmits(['change']);
+
+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] || {};
+};
+
+const formConfig = computed(() => {
+  if (typeof props.config.form === 'function') {
+    return props.config.form(mForm, {
+      model: props.model || {},
+      values: props.values || {},
+    });
+  }
+  return props.config.form;
+});
+
+const 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 '跳转';
+});
+
+const editHandler = () => {
+  init();
+  editor.value && (editor.value.dialogVisible = true);
+};
+
+const 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,49 @@
+<template>
+  <TMagicInputNumber
+    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"
+  ></TMagicInputNumber>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import { TMagicInputNumber } from '@tmagic/design';
+
+import type { FieldProps, FormState, NumberConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormNumber',
+});
+
+const props = defineProps<FieldProps<NumberConfig>>();
+
+const emit = defineEmits<{
+  change: [values: number];
+  input: [values: number];
+}>();
+
+useAddField(props.prop);
+
+const mForm = inject<FormState | null>('mForm');
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+const inputHandler = (v: number) => {
+  emit('input', v);
+  mForm?.$emit('field-input', props.prop, v);
+};
+</script>

package/src/fields/NumberRange.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="m-fields-number-range">
+    <TMagicInput
+      v-model="model[name][0]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="minChangeHandler"
+    ></TMagicInput>
+    <span class="split-tag">-</span>
+    <TMagicInput
+      v-model="model[name][1]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="maxChangeHandler"
+    ></TMagicInput>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TMagicInput } from '@tmagic/design';
+
+import type { FieldProps, NumberRangeConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormNumberRange',
+});
+
+const props = defineProps<FieldProps<NumberRangeConfig>>();
+
+const emit = defineEmits<{
+  change: [values: [number, number]];
+}>();
+
+useAddField(props.prop);
+
+if (!Array.isArray(props.model[props.name])) {
+  props.model[props.name] = [];
+}
+
+const minChangeHandler = (v: string) => {
+  emit('change', [Number(v), props.model[props.name][1]]);
+};
+
+const maxChangeHandler = (v: string) => {
+  emit('change', [props.model[props.name][0], Number(v)]);
+};
+</script>

package/src/fields/RadioGroup.vue

@@ -0,0 +1,28 @@
+<template>
+  <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <TMagicRadio v-for="option in config.options" :value="option.value" :key="`${option.value}`">{{
+      option.text
+    }}</TMagicRadio>
+  </TMagicRadioGroup>
+</template>
+
+<script lang="ts" setup>
+import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
+
+import type { FieldProps, RadioGroupConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormRadioGroup',
+});
+
+const props = defineProps<FieldProps<RadioGroupConfig>>();
+
+const emit = defineEmits(['change']);
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+useAddField(props.prop);
+</script>