@tmagic/form 1.4.8 → 1.4.10

package/src/containers/Table.vue

@@ -0,0 +1,648 @@
+<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%"
+            :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'"
+            >
+              <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"
+                    link
+                    @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"
+                    link
+                    @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                    @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                  ></TMagicButton>
+                </TMagicTooltip>
+              </template>
+            </TMagicTableColumn>
+
+            <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>
+            </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>
+
+        <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="pagecontext + 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, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
+import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+import Sortable, { SortableEvent } from 'sortablejs';
+
+import {
+  TMagicButton,
+  TMagicIcon,
+  tMagicMessage,
+  TMagicPagination,
+  TMagicTable,
+  TMagicTableColumn,
+  TMagicTooltip,
+  TMagicUpload,
+  useZIndex,
+} from '@tmagic/design';
+import { asyncLoadJs, sleep } from '@tmagic/utils';
+
+import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
+import { display as displayFunc, initValue } from '../utils/form';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormTable',
+});
+
+const props = withDefaults(
+  defineProps<{
+    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;
+  }>(),
+  {
+    prop: '',
+    sortKey: '',
+    enableToggleMode: true,
+    showIndex: true,
+    lastValues: () => ({}),
+    isCompare: false,
+  },
+);
+
+const emit = defineEmits(['change', 'select', 'addDiffCount']);
+
+let timer: any | null = null;
+const mForm = inject<FormState | undefined>('mForm');
+
+const { nextZIndex } = useZIndex();
+
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
+const excelBtn = ref<InstanceType<typeof TMagicUpload>>();
+const mTable = ref<HTMLDivElement>();
+
+const pagesize = ref(10);
+const pagecontext = ref(0);
+const updateKey = ref(1);
+const isFullscreen = ref(false);
+
+const modelName = computed(() => props.name || props.config.name || '');
+
+const data = computed(() =>
+  props.config.pagination
+    ? (props.model[modelName.value] || []).filter(
+        (item: any, index: number) =>
+          index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
+      )
+    : props.model[modelName.value],
+);
+
+const lastData = computed(() =>
+  props.config.pagination
+    ? (props.lastValues[modelName.value] || []).filter(
+        (item: any, index: number) =>
+          index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
+      )
+    : props.lastValues[modelName.value] || [],
+);
+
+const sortChange = ({ prop, order }: SortProp) => {
+  if (order === 'ascending') {
+    props.model[modelName.value] = props.model[modelName.value].sort((a: any, b: any) => a[prop] - b[prop]);
+  } else if (order === 'descending') {
+    props.model[modelName.value] = props.model[modelName.value].sort((a: any, b: any) => b[prop] - a[prop]);
+  }
+};
+
+const foreUpdate = () => {
+  updateKey.value += 1;
+  setTimeout(() => rowDrop());
+};
+
+const swapArray = (index1: number, index2: number) => {
+  props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
+
+  if (props.sortKey) {
+    for (let i = props.model[modelName.value].length - 1, v = 0; i >= 0; i--, v++) {
+      props.model[modelName.value][v][props.sortKey] = i;
+    }
+  }
+  mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+};
+
+const rowDrop = () => {
+  const tableEl = tMagicTable.value?.instance.$el;
+  const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
+  if (tBodyEl) {
+    // eslint-disable-next-line prefer-destructuring
+    const sortable = Sortable.create(tBodyEl, {
+      onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
+        if (typeof newIndex === 'undefined') return;
+        if (typeof oldIndex === 'undefined') return;
+        swapArray(newIndex, oldIndex);
+        emit('change', props.model[modelName.value]);
+        foreUpdate();
+        sortable.destroy();
+        mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+        sleep(1000).then(() => {
+          const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
+          if (elTrs?.[newIndex]) {
+            elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
+            sleep(1000).then(() => {
+              elTrs[newIndex].style.backgroundColor = '';
+            });
+          }
+        });
+      },
+    });
+  }
+};
+
+const newHandler = async (row?: any) => {
+  if (props.config.max && props.model[modelName.value].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.value],
+      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.value];
+  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.value][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.value],
+        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.value][length - 1][props.sortKey] - 1;
+  }
+
+  props.model[modelName.value].push(inputs);
+  emit('change', props.model[modelName.value]);
+};
+
+onMounted(() => {
+  if (props.config.defautSort) {
+    sortChange(props.config.defautSort);
+  } else if (props.config.defaultSort) {
+    sortChange(props.config.defaultSort);
+  }
+
+  if (props.sort && props.sortKey) {
+    props.model[modelName.value].sort((a: any, b: any) => b[props.sortKey] - a[props.sortKey]);
+  }
+});
+
+watchEffect(() => {
+  if (props.config.dropSort) {
+    rowDrop();
+  }
+});
+
+const addable = computed(() => {
+  if (!props.model[modelName.value].length) {
+    return true;
+  }
+  if (typeof props.config.addable === 'function') {
+    return props.config.addable(mForm, {
+      model: props.model[modelName.value],
+      formValue: mForm?.values,
+      prop: props.prop,
+    });
+  }
+  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+});
+
+const selection = computed(() => {
+  if (typeof props.config.selection === 'function') {
+    return props.config.selection(mForm, { model: props.model[modelName.value] });
+  }
+  return props.config.selection;
+});
+
+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 display = (fuc: any) => displayFunc(mForm, fuc, props);
+
+const itemExtra = (fuc: any, index: number) => {
+  if (typeof fuc === 'function') {
+    return fuc(mForm, {
+      values: mForm?.initValues,
+      model: props.model,
+      formValue: mForm ? mForm.values : props.model,
+      prop: props.prop,
+      index,
+    });
+  }
+
+  return fuc;
+};
+
+const removeHandler = (index: number) => {
+  if (props.disabled) return;
+  props.model[modelName.value].splice(index, 1);
+  emit('change', props.model[modelName.value]);
+};
+
+const selectHandle = (selection: any, row: any) => {
+  if (typeof props.config.selection === 'string' && props.config.selection === 'single') {
+    tMagicTable.value?.clearSelection();
+    tMagicTable.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) => {
+  tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
+};
+
+const makeConfig = (config: ColumnConfig, row: any) => {
+  const newConfig = cloneDeep(config);
+  if (typeof config.itemsFunction === 'function') {
+    newConfig.items = config.itemsFunction(row);
+  }
+  delete newConfig.display;
+  return newConfig;
+};
+
+const upHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  timer = setTimeout(() => {
+    swapArray(index, index - 1);
+  }, 300);
+};
+
+const topHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
+  const moveNum = index;
+
+  // 循环出需要一个一个上移的次数
+  for (let i = 0; i < moveNum; i++) {
+    swapArray(index, index - 1);
+    index -= 1;
+  }
+};
+
+const downHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  timer = setTimeout(() => {
+    swapArray(index, index + 1);
+  }, 300);
+};
+
+const bottomHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
+  const moveNum = props.model[modelName.value].length - 1 - index;
+
+  // 循环出需要一个一个上移的次数
+  for (let i = 0; i < moveNum; i++) {
+    swapArray(index, index + 1);
+    index += 1;
+  }
+};
+
+// 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
+const showDelete = (index: number) => {
+  const deleteFunc = props.config.delete;
+  if (deleteFunc && typeof deleteFunc === 'function') {
+    return deleteFunc(props.model[modelName.value], index, mForm?.values);
+  }
+  return true;
+};
+
+const clearHandler = () => {
+  const len = props.model[modelName.value].length;
+  props.model[modelName.value].splice(0, len);
+  mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+};
+
+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 handleSizeChange = (val: number) => {
+  pagesize.value = val;
+};
+
+const handleCurrentChange = (val: number) => {
+  pagecontext.value = val - 1;
+};
+
+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 toggleFullscreen = () => {
+  if (!mTable.value) return;
+
+  if (isFullscreen.value) {
+    mTable.value.classList.remove('fixed');
+    isFullscreen.value = false;
+  } else {
+    mTable.value.classList.add('fixed');
+    mTable.value.style.zIndex = `${nextZIndex()}`;
+    isFullscreen.value = true;
+  }
+};
+
+const getProp = (index: number) => {
+  const { prop } = toRefs(props);
+  return `${prop.value}${prop.value ? '.' : ''}${index + 1 + pagecontext.value * pagesize.value - 1}`;
+};
+
+const onAddDiffCount = () => emit('addDiffCount');
+
+defineExpose({
+  toggleRowSelection,
+});
+</script>