@tmagic/form 1.6.1 → 1.7.0-beta.1

package/src/table/Table.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="m-fields-table-wrap">
+    <teleport to="body" :disabled="!isFullscreen">
+      <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>
+        <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+          <TMagicTable
+            v-if="model[modelName]"
+            ref="tMagicTable"
+            style="width: 100%"
+            show-header
+            :row-key="config.rowKey || 'id'"
+            :columns="columns"
+            :data="data"
+            :border="config.border"
+            :max-height="config.maxHeight"
+            :default-expand-all="true"
+            :key="updateKey"
+            @select="selectHandle"
+            @sort-change="sortChangeHandler"
+          ></TMagicTable>
+        </TMagicTooltip>
+
+        <slot></slot>
+
+        <div style="display: flex; justify-content: space-between; margin: 10px 0">
+          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+            >新增一行</TMagicButton
+          >
+
+          <div style="display: flex">
+            <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>
+            <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler"
+              >清空</TMagicButton
+            >
+          </div>
+        </div>
+
+        <div class="bottom" style="text-align: right" v-if="config.pagination">
+          <TMagicPagination
+            layout="total, sizes, prev, pager, next, jumper"
+            :hide-on-single-page="model[modelName].length < pageSize"
+            :current-page="currentPage + 1"
+            :page-sizes="[pageSize, 60, 120, 300]"
+            :page-size="pageSize"
+            :total="model[modelName].length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+          </TMagicPagination>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { FullScreen, Grid } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
+
+import type { SortProp } from '../schema';
+import { sortChange } from '../utils/form';
+
+import type { TableProps } from './type';
+import { useAdd } from './useAdd';
+import { useFullscreen } from './useFullscreen';
+import { useImport } from './useImport';
+import { usePagination } from './usePagination';
+import { useSelection } from './useSelection';
+import { useSortable } from './useSortable';
+import { useTableColumns } from './useTableColumns';
+
+defineOptions({
+  name: 'MFormTable',
+});
+
+const props = withDefaults(defineProps<TableProps>(), {
+  prop: '',
+  sortKey: '',
+  enableToggleMode: true,
+  showIndex: true,
+  lastValues: () => ({}),
+  isCompare: false,
+});
+
+const emit = defineEmits(['change', 'select', 'addDiffCount']);
+
+const modelName = computed(() => props.name || props.config.name || '');
+const tMagicTableRef = useTemplateRef<InstanceType<typeof TMagicTable>>('tMagicTable');
+
+const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentChange } = usePagination(
+  props,
+  modelName,
+);
+
+const { addable, newHandler } = useAdd(props, emit);
+const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
+useSortable(props, emit, tMagicTableRef, modelName);
+const { isFullscreen, toggleFullscreen } = useFullscreen();
+const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
+const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
+
+const updateKey = ref(1);
+
+const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
+
+const toggleMode = () => {
+  const calcLabelWidth = (label: string) => {
+    if (!label) return '0px';
+    const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
+    const chLength = label.length - zhLength;
+    return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
+  };
+
+  // 切换为groupList的形式
+  props.config.type = 'groupList';
+  props.config.enableToggleMode = true;
+  props.config.tableItems = props.config.items;
+  props.config.items =
+    props.config.groupItems ||
+    props.config.items.map((item: any) => {
+      const text = item.text || item.label;
+      const labelWidth = calcLabelWidth(text);
+      return {
+        ...item,
+        text,
+        labelWidth,
+        span: item.span || 12,
+      };
+    });
+};
+
+const sortChangeHandler = (sortOptions: SortProp) => {
+  const modelName = props.name || props.config.name || '';
+  sortChange(props.model[modelName], sortOptions);
+};
+
+defineExpose({
+  toggleRowSelection,
+});
+</script>

package/src/table/type.ts

@@ -0,0 +1,18 @@
+import type { TableConfig } from '@tmagic/form-schema';
+
+export interface TableProps {
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: TableConfig;
+  name: string;
+  prop?: string;
+  labelWidth?: string;
+  sort?: boolean;
+  disabled?: boolean;
+  sortKey?: string;
+  text?: string;
+  size?: string;
+  enableToggleMode?: boolean;
+  showIndex?: boolean;
+}

package/src/table/useAdd.ts

@@ -0,0 +1,111 @@
+import { computed, inject } from 'vue';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { FormState } from '@tmagic/form-schema';
+
+import { initValue } from '../utils/form';
+
+import type { TableProps } from './type';
+
+export const useAdd = (
+  props: TableProps,
+  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+) => {
+  const mForm = inject<FormState | undefined>('mForm');
+
+  const addable = computed(() => {
+    const modelName = props.name || props.config.name || '';
+    if (!props.model[modelName].length) {
+      return true;
+    }
+    if (typeof props.config.addable === 'function') {
+      return props.config.addable(mForm, {
+        model: props.model[modelName],
+        formValue: mForm?.values,
+        prop: props.prop,
+      });
+    }
+    return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+  });
+
+  const newHandler = async (row?: any) => {
+    const modelName = props.name || props.config.name || '';
+
+    if (props.config.max && props.model[modelName].length >= props.config.max) {
+      tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
+      return;
+    }
+
+    if (typeof props.config.beforeAddRow === 'function') {
+      const beforeCheckRes = props.config.beforeAddRow(mForm, {
+        model: props.model[modelName],
+        formValue: mForm?.values,
+        prop: props.prop,
+      });
+      if (!beforeCheckRes) return;
+    }
+
+    const columns = props.config.items;
+    const enumValues = props.config.enum || [];
+    let enumV = [];
+    const { length } = props.model[modelName];
+    const key = props.config.key || 'id';
+    let inputs: any = {};
+
+    if (enumValues.length) {
+      if (length >= enumValues.length) {
+        return;
+      }
+      enumV = enumValues.filter((item) => {
+        let i = 0;
+        for (; i < length; i++) {
+          if (item[key] === props.model[modelName][i][key]) {
+            break;
+          }
+        }
+        return i === length;
+      });
+
+      if (enumV.length > 0) {
+        // eslint-disable-next-line prefer-destructuring
+        inputs = enumV[0];
+      }
+    } else if (Array.isArray(row)) {
+      columns.forEach((column, index) => {
+        column.name && (inputs[column.name] = row[index]);
+      });
+    } else {
+      if (typeof props.config.defaultAdd === 'function') {
+        inputs = await props.config.defaultAdd(mForm, {
+          model: props.model[modelName],
+          formValue: mForm?.values,
+        });
+      } else if (props.config.defaultAdd) {
+        inputs = props.config.defaultAdd;
+      }
+
+      inputs = await initValue(mForm, {
+        config: columns,
+        initValues: inputs,
+      });
+    }
+
+    if (props.sortKey && length) {
+      inputs[props.sortKey] = props.model[modelName][length - 1][props.sortKey] - 1;
+    }
+
+    emit('change', [...props.model[modelName], inputs], {
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${props.model[modelName].length}`,
+          value: inputs,
+        },
+      ],
+    });
+  };
+
+  return {
+    addable,
+    newHandler,
+  };
+};

package/src/table/useFullscreen.ts

@@ -0,0 +1,28 @@
+import { ref, useTemplateRef } from 'vue';
+
+import { useZIndex } from '@tmagic/design';
+
+export const useFullscreen = () => {
+  const isFullscreen = ref(false);
+  const mTableEl = useTemplateRef<HTMLDivElement>('mTable');
+
+  const { nextZIndex } = useZIndex();
+
+  const toggleFullscreen = () => {
+    if (!mTableEl.value) return;
+
+    if (isFullscreen.value) {
+      mTableEl.value.classList.remove('fixed');
+      isFullscreen.value = false;
+    } else {
+      mTableEl.value.classList.add('fixed');
+      mTableEl.value.style.zIndex = `${nextZIndex()}`;
+      isFullscreen.value = true;
+    }
+  };
+
+  return {
+    isFullscreen,
+    toggleFullscreen,
+  };
+};

package/src/table/useImport.ts

@@ -0,0 +1,68 @@
+import { computed, inject, useTemplateRef } from 'vue';
+
+import type { TMagicUpload } from '@tmagic/design';
+import type { FormState } from '@tmagic/form-schema';
+import { asyncLoadJs } from '@tmagic/utils';
+
+import type { TableProps } from './type';
+
+export const useImport = (
+  props: TableProps,
+  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  newHandler: (row: any) => void,
+) => {
+  const mForm = inject<FormState | undefined>('mForm');
+  const modelName = computed(() => props.name || props.config.name || '');
+  const importable = computed(() => {
+    if (typeof props.config.importable === 'function') {
+      return props.config.importable(mForm, {
+        formValue: mForm?.values,
+        model: props.model[modelName.value],
+      });
+    }
+    return typeof props.config.importable === 'undefined' ? false : props.config.importable;
+  });
+
+  const excelBtn = useTemplateRef<InstanceType<typeof TMagicUpload>>('excelBtn');
+
+  const excelHandler = async (file: any) => {
+    if (!file?.raw) {
+      return false;
+    }
+
+    if (!(globalThis as any).XLSX) {
+      await asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      const data = reader.result;
+      const pdata = (globalThis as any).XLSX.read(data, { type: 'array' });
+      pdata.SheetNames.forEach((sheetName: string) => {
+        const arr = (globalThis as any).XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
+        if (arr?.[0]) {
+          arr.forEach((row: any) => {
+            newHandler(row);
+          });
+        }
+        setTimeout(() => {
+          excelBtn.value?.clearFiles();
+        }, 300);
+      });
+    };
+    reader.readAsArrayBuffer(file.raw);
+
+    return false;
+  };
+
+  const clearHandler = () => {
+    emit('change', []);
+    mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+  };
+
+  return {
+    importable,
+    excelHandler,
+    clearHandler,
+  };
+};

package/src/table/usePagination.ts

@@ -0,0 +1,30 @@
+import { computed, type Ref, ref } from 'vue';
+
+import { getDataByPage } from '../utils/form';
+
+import type { TableProps } from './type';
+
+export const usePagination = (props: TableProps, modelName: Ref<string | number>) => {
+  const pageSize = ref(10);
+  /**
+   * 当前页码
+   */
+  const currentPage = ref(0);
+
+  const paginationData = computed(() => getDataByPage(props.model[modelName.value], currentPage.value, pageSize.value));
+  const handleSizeChange = (val: number) => {
+    pageSize.value = val;
+  };
+
+  const handleCurrentChange = (val: number) => {
+    currentPage.value = val - 1;
+  };
+
+  return {
+    pageSize,
+    currentPage,
+    paginationData,
+    handleSizeChange,
+    handleCurrentChange,
+  };
+};

package/src/table/useSelection.ts

@@ -0,0 +1,34 @@
+import { inject, type ShallowRef } from 'vue';
+
+import type { TMagicTable } from '@tmagic/design';
+import type { FormState } from '@tmagic/form-schema';
+
+import type { TableProps } from './type';
+
+export const useSelection = (
+  props: TableProps,
+  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
+) => {
+  const mForm = inject<FormState | undefined>('mForm');
+
+  const selectHandle = (selection: any, row: any) => {
+    if (typeof props.config.selection === 'string' && props.config.selection === 'single') {
+      tMagicTableRef.value?.clearSelection();
+      tMagicTableRef.value?.toggleRowSelection(row, true);
+    }
+    emit('select', selection, row);
+    if (typeof props.config.onSelect === 'function') {
+      props.config.onSelect(mForm, { selection, row, config: props.config });
+    }
+  };
+
+  const toggleRowSelection = (row: any, selected: boolean) => {
+    tMagicTableRef.value?.toggleRowSelection.call(tMagicTableRef.value?.getTableRef(), row, selected);
+  };
+
+  return {
+    selectHandle,
+    toggleRowSelection,
+  };
+};

package/src/table/useSortable.ts

@@ -0,0 +1,48 @@
+import { inject, type Ref, type ShallowRef, watchEffect } from 'vue';
+import Sortable, { type SortableEvent } from 'sortablejs';
+
+import { type TMagicTable } from '@tmagic/design';
+import type { FormState } from '@tmagic/form-schema';
+
+import { sortArray } from '../utils/form';
+
+import type { TableProps } from './type';
+
+export const useSortable = (
+  props: TableProps,
+  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
+  modelName: Ref<string | number>,
+) => {
+  const mForm = inject<FormState | undefined>('mForm');
+
+  let sortable: Sortable | undefined;
+  const rowDrop = () => {
+    sortable?.destroy();
+    const tableEl = tMagicTableRef.value?.getEl();
+    const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
+    if (!tBodyEl) {
+      return;
+    }
+    sortable = Sortable.create(tBodyEl, {
+      draggable: '.tmagic-design-table-row',
+      filter: 'input', // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
+      preventOnFilter: false, // 允许选字
+      direction: 'vertical',
+      onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
+        if (typeof newIndex === 'undefined') return;
+        if (typeof oldIndex === 'undefined') return;
+        const newData = sortArray(props.model[modelName.value], newIndex, oldIndex, props.sortKey);
+
+        emit('change', newData);
+        mForm?.$emit('field-change', newData);
+      },
+    });
+  };
+
+  watchEffect(() => {
+    if (props.config.dropSort) {
+      rowDrop();
+    }
+  });
+};