@tmagic/form 1.3.0-alpha.9 → 1.3.0-beta.1

package/src/containers/Table.vue

@@ -1,162 +1,160 @@
 <template>
   <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
     <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
-    <div class="el-form-item__content">
-      <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
-        <TMagicTable
-          v-if="model[modelName]"
-          ref="tMagicTable"
-          style="width: 100%"
-          :row-key="config.rowKey || 'id'"
-          :data="data"
-          :lastData="lastData"
-          :border="config.border"
-          :max-height="config.maxHeight"
-          :default-expand-all="true"
-          :key="updateKey"
-          @select="selectHandle"
-          @sort-change="sortChange"
+    <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+      <TMagicTable
+        v-if="model[modelName]"
+        ref="tMagicTable"
+        style="width: 100%"
+        :row-key="config.rowKey || 'id'"
+        :data="data"
+        :lastData="lastData"
+        :border="config.border"
+        :max-height="config.maxHeight"
+        :default-expand-all="true"
+        :key="updateKey"
+        @select="selectHandle"
+        @sort-change="sortChange"
+      >
+        <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+          <template v-slot="scope">
+            <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
+          </template>
+        </TMagicTableColumn>
+
+        <TMagicTableColumn
+          label="操作"
+          :width="config.operateColWidth || 55"
+          align="center"
+          :fixed="config.fixed === false ? undefined : 'left'"
         >
-          <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
-            <template v-slot="scope">
-              <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
-            </template>
-          </TMagicTableColumn>
+          <template v-slot="scope">
+            <slot name="operateCol" :scope="scope"></slot>
+            <TMagicIcon
+              v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
+              class="m-table-delete-icon"
+              @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+              ><Delete
+            /></TMagicIcon>
+          </template>
+        </TMagicTableColumn>
+
+        <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
+          <template v-slot="scope">
+            <TMagicTooltip
+              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
+              content="点击上移，双击置顶"
+              placement="top"
+            >
+              <TMagicButton
+                plain
+                size="small"
+                type="primary"
+                :icon="ArrowUp"
+                :disabled="disabled"
+                text
+                @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+              ></TMagicButton>
+            </TMagicTooltip>
+            <TMagicTooltip
+              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
+              content="点击下移，双击置底"
+              placement="top"
+            >
+              <TMagicButton
+                plain
+                size="small"
+                type="primary"
+                :icon="ArrowDown"
+                :disabled="disabled"
+                text
+                @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+              ></TMagicButton>
+            </TMagicTooltip>
+          </template>
+        </TMagicTableColumn>
 
-          <TMagicTableColumn
-            label="操作"
-            :width="config.operateColWidth || 55"
-            align="center"
-            :fixed="config.fixed === false ? undefined : 'left'"
-          >
-            <template v-slot="scope">
-              <slot name="operateCol" :scope="scope"></slot>
-              <TMagicIcon
-                v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                class="m-table-delete-icon"
-                @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ><Delete
-              /></TMagicIcon>
-            </template>
-          </TMagicTableColumn>
+        <TMagicTableColumn
+          v-if="selection"
+          align="center"
+          header-align="center"
+          type="selection"
+          width="45"
+        ></TMagicTableColumn>
 
-          <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
-            <template v-slot="scope">
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
-                content="点击上移，双击置顶"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowUp"
-                  :disabled="disabled"
-                  text
-                  @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
-                content="点击下移，双击置底"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowDown"
-                  :disabled="disabled"
-                  text
-                  @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-            </template>
-          </TMagicTableColumn>
+        <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
+          <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
+        </TMagicTableColumn>
 
+        <template v-for="(column, index) in config.items">
           <TMagicTableColumn
-            v-if="selection"
-            align="center"
-            header-align="center"
-            type="selection"
-            width="45"
-          ></TMagicTableColumn>
-
-          <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
-            <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
+            v-if="column.type !== 'hidden' && display(column.display)"
+            :prop="column.name"
+            :width="column.width"
+            :label="column.label"
+            :sortable="column.sortable"
+            :sort-orders="['ascending', 'descending']"
+            :key="column[mForm?.keyProp || '__key'] ?? index"
+            :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+          >
+            <template #default="scope">
+              <Container
+                v-if="scope.$index > -1"
+                labelWidth="0"
+                :disabled="disabled"
+                :prop="getProp(scope.$index)"
+                :rules="column.rules"
+                :config="makeConfig(column, scope.row)"
+                :model="scope.row"
+                :lastValues="lastData[scope.$index]"
+                :is-compare="isCompare"
+                :size="size"
+                @change="$emit('change', model[modelName])"
+                @addDiffCount="onAddDiffCount()"
+              ></Container>
+            </template>
           </TMagicTableColumn>
-
-          <template v-for="(column, index) in config.items">
-            <TMagicTableColumn
-              v-if="column.type !== 'hidden' && display(column.display)"
-              :prop="column.name"
-              :width="column.width"
-              :label="column.label"
-              :sortable="column.sortable"
-              :sort-orders="['ascending', 'descending']"
-              :key="column[mForm?.keyProp || '__key'] ?? index"
-              :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
-            >
-              <template #default="scope">
-                <Container
-                  v-if="scope.$index > -1"
-                  labelWidth="0"
-                  :disabled="disabled"
-                  :prop="getProp(scope.$index)"
-                  :rules="column.rules"
-                  :config="makeConfig(column, scope.row)"
-                  :model="scope.row"
-                  :lastValues="lastData[scope.$index]"
-                  :is-compare="isCompare"
-                  :size="size"
-                  @change="$emit('change', model[modelName])"
-                  @addDiffCount="onAddDiffCount()"
-                ></Container>
-              </template>
-            </TMagicTableColumn>
-          </template>
-        </TMagicTable>
-      </TMagicTooltip>
-      <slot></slot>
-      <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-        >新增一行</TMagicButton
-      >
-      &nbsp;
-      <TMagicButton
-        :icon="Grid"
-        size="small"
-        type="primary"
-        @click="toggleMode"
-        v-if="enableToggleMode && !isFullscreen"
-        >展开配置</TMagicButton
-      >
-      <TMagicButton
-        :icon="FullScreen"
-        size="small"
-        type="primary"
-        @click="toggleFullscreen"
-        v-if="config.enableFullscreen !== false"
-      >
-        {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
-      </TMagicButton>
-      <TMagicUpload
-        v-if="importable"
-        style="display: inline-block"
-        ref="excelBtn"
-        action="/noop"
-        :disabled="disabled"
-        :on-change="excelHandler"
-        :auto-upload="false"
-      >
-        <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
-      >&nbsp;
-      <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
-        >清空</TMagicButton
-      >
-    </div>
+        </template>
+      </TMagicTable>
+    </TMagicTooltip>
+    <slot></slot>
+    <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+      >新增一行</TMagicButton
+    >
+    &nbsp;
+    <TMagicButton
+      :icon="Grid"
+      size="small"
+      type="primary"
+      @click="toggleMode"
+      v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
+      >展开配置</TMagicButton
+    >
+    <TMagicButton
+      :icon="FullScreen"
+      size="small"
+      type="primary"
+      @click="toggleFullscreen"
+      v-if="config.enableFullscreen !== false"
+    >
+      {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+    </TMagicButton>
+    <TMagicUpload
+      v-if="importable"
+      style="display: inline-block"
+      ref="excelBtn"
+      action="/noop"
+      :disabled="disabled"
+      :on-change="excelHandler"
+      :auto-upload="false"
+    >
+      <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
+    >&nbsp;
+    <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+      >清空</TMagicButton
+    >
 
     <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination

package/src/fields/Cascader.vue

@@ -19,7 +19,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
 
-import { CascaderConfig, FormState } from '../schema';
+import type { CascaderConfig, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -27,17 +27,7 @@ defineOptions({
   name: 'MFormCascader',
 });
 
-const props = defineProps<{
-  config: CascaderConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CascaderConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Checkbox.vue

@@ -15,24 +15,14 @@ import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { CheckboxConfig } from '../schema';
+import type { CheckboxConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormCheckbox',
 });
 
-const props = defineProps<{
-  config: CheckboxConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CheckboxConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/CheckboxGroup.vue

@@ -16,7 +16,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import { CheckboxGroupConfig, FormState } from '../schema';
+import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
 import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -24,17 +24,7 @@ defineOptions({
   name: 'MFormCheckGroup',
 });
 
-const props = defineProps<{
-  config: CheckboxGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CheckboxGroupConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/ColorPicker.vue

@@ -11,26 +11,18 @@
 <script lang="ts" setup>
 import { TMagicColorPicker } from '@tmagic/design';
 
-import { ColorPickConfig } from '../schema';
+import type { ColorPickConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormColorPicker',
 });
 
-const props = defineProps<{
-  config: ColorPickConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<ColorPickConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Date.vue

@@ -6,7 +6,7 @@
     :placeholder="config.placeholder"
     :disabled="disabled"
     :format="config.format"
-    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
@@ -15,26 +15,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateConfig } from '../schema';
+import type { DateConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDate',
 });
 
-const props = defineProps<{
-  config: DateConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DateConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/DateTime.vue

@@ -6,8 +6,8 @@
     :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'"
+    :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>
@@ -17,26 +17,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateTimeConfig } from '../schema';
+import type { DateTimeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateTime',
 });
 
-const props = defineProps<{
-  config: DateTimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DateTimeConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Daterange.vue

@@ -19,24 +19,14 @@ import { ref, watch } from 'vue';
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DaterangeConfig } from '../schema';
+import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateRange',
 });
 
-const props = defineProps<{
-  config: DaterangeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DaterangeConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Display.vue

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { DisplayConfig } from '../schema';
+import type { DisplayConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDisplay',
 });
 
-const props = defineProps<{
-  config: DisplayConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DisplayConfig>>();
 
 if (props.config.initValue && props.model) {
   // eslint-disable-next-line vue/no-setup-props-destructure

package/src/fields/DynamicField.vue

@@ -27,7 +27,7 @@ import { onBeforeUnmount, reactive, watch } from 'vue';
 
 import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
-import { DynamicFieldConfig } from '../schema';
+import type { DynamicFieldConfig, FieldProps } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -35,23 +35,13 @@ defineOptions({
   name: 'MFormDynamicField',
 });
 
-const props = defineProps<{
-  config: DynamicFieldConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DynamicFieldConfig>>();
 
 const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-const request = getConfig('request') as Function;
+const request = getConfig<Function>('request');
 const fieldMap = reactive<{ [key: string]: any }>({
   value: {},
 });

package/src/fields/Hidden.vue

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { HiddenConfig } from '../schema';
+import type { FieldProps, HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormHidden',
 });
 
-const props = defineProps<{
-  config: HiddenConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<HiddenConfig>>();
 
 useAddField(props.prop);
 </script>

package/src/fields/Link.vue

@@ -22,24 +22,14 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
-import { FormState, LinkConfig } from '../schema';
+import type { FieldProps, FormState, LinkConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormLink',
 });
 
-const props = defineProps<{
-  config: LinkConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<LinkConfig>>();
 
 const emit = defineEmits(['change']);