@tmagic/form 1.6.0 → 1.7.0-beta.0

package/src/table/useTableColumns.ts

@@ -0,0 +1,194 @@
+import { computed, h, inject, type Ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { TableColumnOptions } from '@tmagic/design';
+import type { FormState, TableColumnConfig } from '@tmagic/form-schema';
+
+import Container from '../containers/Container.vue';
+import type { ContainerChangeEventData } from '../schema';
+import { display as displayFunc, getDataByPage, sortArray } from '../utils/form';
+
+import ActionsColumn from './ActionsColumn.vue';
+import SortColumn from './SortColumn.vue';
+import type { TableProps } from './type';
+
+export const useTableColumns = (
+  props: TableProps,
+  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  currentPage: Ref<number>,
+  pageSize: Ref<number>,
+  modelName: Ref<string | number>,
+) => {
+  const mForm = inject<FormState | undefined>('mForm');
+
+  const display = (fuc: any) => displayFunc(mForm, fuc, props);
+
+  const lastData = computed(() =>
+    props.config.pagination
+      ? getDataByPage(props.lastValues[modelName.value], currentPage.value, pageSize.value)
+      : props.lastValues[modelName.value] || [],
+  );
+
+  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 selection = computed(() => {
+    if (typeof props.config.selection === 'function') {
+      return props.config.selection(mForm, { model: props.model[modelName.value] });
+    }
+    return props.config.selection;
+  });
+
+  const getProp = (index: number) => {
+    return `${props.prop}${props.prop ? '.' : ''}${index + 1 + currentPage.value * pageSize.value - 1}`;
+  };
+
+  const makeConfig = (config: TableColumnConfig, row: any) => {
+    const newConfig = cloneDeep(config);
+    if (typeof config.itemsFunction === 'function') {
+      newConfig.items = config.itemsFunction(row);
+    }
+    delete newConfig.display;
+    return newConfig;
+  };
+
+  const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+    emit('change', props.model, eventData);
+  };
+
+  const onAddDiffCount = () => emit('addDiffCount');
+
+  const columns = computed<TableColumnOptions[]>(() => {
+    const columns: TableColumnOptions[] = [];
+
+    if (props.config.itemExtra && !props.config.dropSort) {
+      columns.push({
+        props: {
+          fixed: 'left',
+          width: 30,
+          type: 'expand',
+        },
+        cell: ({ $index }: any) =>
+          h('span', {
+            innerHTML: itemExtra(props.config.itemExtra, $index),
+            class: 'm-form-tip',
+          }),
+      });
+    }
+
+    columns.push({
+      props: {
+        label: '操作',
+        fixed: props.config.fixed === false ? undefined : 'left',
+        width: props.config.operateColWidth || 112,
+        align: 'center',
+      },
+      cell: ({ row, $index }: any) =>
+        h(ActionsColumn, {
+          row,
+          index: $index,
+          model: props.model,
+          config: props.config,
+          prop: props.prop,
+          disabled: props.disabled,
+          sortKey: props.sortKey,
+          name: modelName.value,
+          currentPage: currentPage.value,
+          pageSize: pageSize.value,
+          onChange: (v: any) => {
+            emit('change', v);
+          },
+        }),
+    });
+
+    if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
+      columns.push({
+        props: {
+          label: '排序',
+          width: 80,
+        },
+        cell: ({ $index }: any) =>
+          h(SortColumn, {
+            index: $index,
+            model: props.model,
+            disabled: props.disabled,
+            name: modelName.value,
+            currentPage: currentPage.value,
+            pageSize: pageSize.value,
+            onSwap: (index1: number, index2: number) => {
+              const newData = sortArray(props.model[modelName.value], index1, index2, props.sortKey);
+              emit('change', newData);
+              mForm?.$emit('field-change', newData);
+            },
+          }),
+      });
+    }
+
+    if (selection.value) {
+      columns.push({
+        props: {
+          align: 'center',
+          headerAlign: 'center',
+          type: 'selection',
+          width: 45,
+        },
+      });
+    }
+
+    if (props.showIndex && props.config.showIndex) {
+      columns.push({
+        props: {
+          label: '序号',
+          width: 60,
+        },
+        cell: ({ $index }: any) => h('span', $index + 1 + currentPage.value * pageSize.value),
+      });
+    }
+
+    for (const column of props.config.items) {
+      if (column.type !== 'hidden' && display(column.display)) {
+        columns.push({
+          props: {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            sortable: column.sortable,
+            sortOrders: ['ascending', 'descending'],
+            class: props.config.dropSort === true ? 'el-table__column--dropable' : '',
+          },
+          cell: ({ row, $index }: any) =>
+            h(Container, {
+              labelWidth: '0',
+              disabled: props.disabled,
+              prop: getProp($index),
+              rules: column.rules,
+              config: makeConfig(column, row),
+              model: row,
+              lastValues: lastData.value[$index],
+              isCompare: props.isCompare,
+              size: props.size,
+              onChange: changeHandler,
+              onAddDiffCount,
+            }),
+        });
+      }
+    }
+
+    return columns;
+  });
+
+  return {
+    columns,
+  };
+};

package/src/theme/container.scss

@@ -3,3 +3,20 @@
     display: inline-flex;
   }
 }
+
+.m-form-container {
+  &.has-tip {
+    display: flex;
+    align-items: baseline;
+
+    .tmagic-design-form-item {
+      flex: 1;
+    }
+  }
+
+  .tmagic-design-form-item {
+    &.show-diff {
+      background: #f7dadd;
+    }
+  }
+}

package/src/theme/form.scss

@@ -19,17 +19,21 @@
     height: 100%;
   }
 
-  .el-table {
+  .tmagic-design-table {
     .cell > div.m-form-container {
       display: block;
+
+      &.has-tip {
+        display: flex;
+      }
     }
   }
 
-  .el-tabs {
+  .tmagic-design-tabs {
     margin-bottom: 10px;
   }
 
-  .el-form-item.tmagic-form-hidden {
+  .tmagic-design-form-item.tmagic-form-hidden {
     > .el-form-item__label {
       display: none;
     }
@@ -39,5 +43,13 @@
     > .t-form__label {
       display: none;
     }
+
+    > .t-form__controls {
+      margin-left: 0 !important;
+    }
+  }
+
+  &.t-form:not(.t-form-inline) .t-form__item:last-of-type {
+    margin-bottom: var(--td-comp-margin-xxl);
   }
 }

package/src/theme/text.scss

@@ -1,3 +1,9 @@
+.m-fields-text {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .m-form-validate__warning {
   color: var(--el-color-warning);
   font-size: 12px;

package/src/utils/form.ts

@@ -21,6 +21,8 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
+import { getValueByKeyPath } from '@tmagic/utils';
+
 import {
   ChildConfig,
   ContainerCommonConfig,
@@ -31,6 +33,7 @@ import {
   FormValue,
   HtmlField,
   Rule,
+  SortProp,
   TabPaneConfig,
   TypeFunction,
 } from '../schema';
@@ -89,8 +92,13 @@ const setValue = (mForm: FormState | undefined, value: FormValue, initValue: For
 
   // 如果fieldset配置checkbox，checkbox的值保存在value中
   if (type === 'fieldset' && checkbox) {
-    if (typeof value[name] === 'object') {
-      value[name].value = typeof initValue[name] === 'object' ? initValue[name].value || 0 : 0;
+    const checkboxName = typeof checkbox === 'object' && typeof checkbox.name === 'string' ? checkbox.name : 'value';
+    const checkboxFalseValue =
+      typeof checkbox === 'object' && typeof checkbox.falseValue !== 'undefined' ? checkbox.falseValue : 0;
+
+    if (name && typeof value[name] === 'object') {
+      value[name][checkboxName] =
+        typeof initValue[name] === 'object' ? initValue[name][checkboxName] || checkboxFalseValue : checkboxFalseValue;
     }
   }
 };
@@ -136,6 +144,18 @@ const initValueItem = function (
 
   setValue(mForm, value, initValue, item);
 
+  if (type === 'table') {
+    if (item.defautSort) {
+      sortChange(value[name], item.defautSort);
+    } else if (item.defaultSort) {
+      sortChange(value[name], item.defaultSort);
+    }
+
+    if (item.sort && item.sortKey) {
+      value[name].sort((a: any, b: any) => b[item.sortKey] - a[item.sortKey]);
+    }
+  }
+
   return value;
 };
 
@@ -197,6 +217,7 @@ export const filterFunction = <T = any>(
       prop: props.prop,
       config: props.config,
       index: props.index,
+      getFormValue: (prop: string) => getValueByKeyPath(prop, mForm?.values || props.model),
     });
   }
 
@@ -297,3 +318,36 @@ export const datetimeFormatter = (
   }
   return defaultValue;
 };
+
+export const getDataByPage = (data: any[] = [], pagecontext: number, pagesize: number) =>
+  data.filter(
+    (item: any, index: number) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize,
+  );
+
+export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortKey?: string) => {
+  if (newIndex === oldIndex) {
+    return data;
+  }
+
+  if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
+    return data;
+  }
+
+  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+
+  if (sortKey) {
+    for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
+      newData[v][sortKey] = i;
+    }
+  }
+
+  return newData;
+};
+
+export const sortChange = (data: any[], { prop, order }: SortProp) => {
+  if (order === 'ascending') {
+    data = data.sort((a: any, b: any) => a[prop] - b[prop]);
+  } else if (order === 'descending') {
+    data = data.sort((a: any, b: any) => b[prop] - a[prop]);
+  }
+};