@tmagic/table 1.0.0-beta.1

package/dist/types/src/Table.vue.d.ts

@@ -0,0 +1,129 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+declare const _default: DefineComponent<{
+    data: {
+        type: ArrayConstructor;
+        require: boolean;
+    };
+    columns: {
+        type: PropType<any[]>;
+        require: boolean;
+        default: () => never[];
+    };
+    /** 合并行或列的计算方法 */
+    spanMethod: {
+        type: PropType<(data: {
+            row: any;
+            column: any;
+            rowIndex: number;
+            columnIndex: number;
+        }) => [number, number]>;
+    };
+    fetch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    /** 是否显示表头 */
+    showHeader: {
+        type: BooleanConstructor;
+    };
+    /** 空数据时显示的文本内容 */
+    emptyText: {
+        type: StringConstructor;
+    };
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowkeyName: {
+        type: StringConstructor;
+    };
+    /** 是否带有纵向边框 */
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, {
+    editState: any[];
+}, {
+    tableData(): unknown[];
+    selectionColumn(): any;
+    hasBorder(): boolean;
+}, {
+    sortChange(data: any): void;
+    selectHandler(selection: any, row: any): void;
+    selectAllHandler(selection: any): void;
+    selectionChangeHandler(selection: any): void;
+    toggleRowSelection(row: any, selected: boolean): void;
+    toggleRowExpansion(row: any, expanded: boolean): void;
+    clearSelection(): void;
+    objectSpanMethod(data: any): [number, number] | (() => {
+        rowspan: number;
+        colspan: number;
+    });
+}, ComponentOptionsMixin, ComponentOptionsMixin, ("afterAction" | "sort-change" | "select" | "select-all" | "selection-change")[], "afterAction" | "sort-change" | "select" | "select-all" | "selection-change", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    data: {
+        type: ArrayConstructor;
+        require: boolean;
+    };
+    columns: {
+        type: PropType<any[]>;
+        require: boolean;
+        default: () => never[];
+    };
+    /** 合并行或列的计算方法 */
+    spanMethod: {
+        type: PropType<(data: {
+            row: any;
+            column: any;
+            rowIndex: number;
+            columnIndex: number;
+        }) => [number, number]>;
+    };
+    fetch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    /** 是否显示表头 */
+    showHeader: {
+        type: BooleanConstructor;
+    };
+    /** 空数据时显示的文本内容 */
+    emptyText: {
+        type: StringConstructor;
+    };
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowkeyName: {
+        type: StringConstructor;
+    };
+    /** 是否带有纵向边框 */
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onAfterAction?: ((...args: any[]) => any) | undefined;
+    "onSort-change"?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+    "onSelect-all"?: ((...args: any[]) => any) | undefined;
+    "onSelection-change"?: ((...args: any[]) => any) | undefined;
+}, {
+    columns: any[];
+    fetch: boolean;
+    showHeader: boolean;
+    defaultExpandAll: boolean;
+    border: boolean;
+}>;
+export default _default;

package/dist/types/src/TextColumn.vue.d.ts

@@ -0,0 +1,29 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { ColumnConfig } from './schema';
+declare const _default: DefineComponent<{
+    config: {
+        type: PropType<ColumnConfig>;
+        default: () => {};
+        required: true;
+    };
+    editState: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}, {
+    formatter: (item: ColumnConfig, row: any) => any;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    config: {
+        type: PropType<ColumnConfig>;
+        default: () => {};
+        required: true;
+    };
+    editState: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>>, {
+    config: ColumnConfig;
+    editState: Record<string, any>;
+}>;
+export default _default;

package/dist/types/src/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+export { default as MagicTable } from './Table.vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/types/src/schema.d.ts

@@ -0,0 +1,38 @@
+import { FormConfig, FormValue } from '@tmagic/form';
+export interface ColumnActionConfig {
+    type?: 'delete' | 'copy' | 'edit';
+    display?: (vm: any, row: any) => boolean;
+    text: string;
+    name: string;
+    handler?: (row: any) => Promise<any> | any;
+    after?: () => void;
+    action?: (data: {
+        data: any;
+    }) => void;
+}
+export declare type ColumnConfig = {
+    form?: FormConfig;
+    rules?: any;
+    values?: FormValue;
+    selection?: boolean | 'single';
+    selectable?: (row: any, index: number) => boolean;
+    label: string;
+    fixed?: 'left' | 'right' | boolean;
+    width?: number | string;
+    actions?: ColumnActionConfig[];
+    type: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+    text: string;
+    prop: string;
+    showHeader: boolean;
+    table?: ColumnConfig[];
+    formatter?: 'datetime' | ((item: any, row: Record<string, any>) => any);
+    popover: {
+        placement: '';
+        width: '';
+        trigger: '';
+        tableEmbed: '';
+    };
+    sortable?: boolean | 'custom';
+    action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
+    handler: (row: any) => void;
+};

package/dist/types/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/dist/types/src/utils.d.ts

@@ -0,0 +1,2 @@
+import { ColumnConfig } from './schema';
+export declare const formatter: (item: ColumnConfig, row: any) => any;

package/dist/types/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,46 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "@tmagic/table",
+  "main": "dist/magic-table.umd.js",
+  "module": "dist/magic-table.es.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/magic-table.es.js",
+      "require": "./dist/magic-table.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@tmagic/form": "^1.0.0-beta.1",
+    "element-plus": "^2.0.2",
+    "lodash-es": "^4.17.21",
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/color": "^3.0.1",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "@vitejs/plugin-vue": "^1.2.3",
+    "@vue/compiler-sfc": "^3.2.0",
+    "@vue/test-utils": "^2.0.0-rc.12",
+    "sass": "^1.35.1",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.7",
+    "vite-plugin-dts": "^0.9.6",
+    "vue-tsc": "^0.0.24"
+  }
+}

package/src/ActionsColumn.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+    <template v-slot="scope">
+      <el-button
+        v-for="(action, actionIndex) in config.actions"
+        v-show="display(action.display, scope.row) && !editState[scope.$index]"
+        v-html="action.text"
+        class="action-btn"
+        type="text"
+        size="small"
+        :key="actionIndex"
+        @click="actionHandler(action, scope.row, scope.$index)"
+      ></el-button>
+      <el-button
+        class="action-btn"
+        v-show="editState[scope.$index]"
+        type="text"
+        size="small"
+        @click="save(scope.$index, config)"
+        >保存</el-button
+      >
+      <el-button
+        class="action-btn"
+        v-show="editState[scope.$index]"
+        type="text"
+        size="small"
+        @click="editState[scope.$index] = undefined"
+        >取消</el-button
+      >
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { ColumnActionConfig, ColumnConfig } from './schema';
+</script>
+
+<script lang="ts" setup>
+const props = defineProps({
+  columns: {
+    type: Array as PropType<any[]>,
+    require: true,
+    default: () => [],
+  },
+
+  config: {
+    type: Object as PropType<ColumnConfig>,
+    require: true,
+    default: () => {},
+  },
+
+  rowkeyName: {
+    type: String,
+    default: 'c_id',
+  },
+
+  editState: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits(['afterAction']);
+
+const display = (fuc: boolean | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc.call(this, this, row);
+  }
+  return true;
+};
+
+const success = (msg: string, action: ColumnActionConfig) => {
+  ElMessage.success(msg);
+  action.after?.();
+};
+
+const error = (msg: string) => ElMessage.error(msg);
+
+const deleteAction = async (action: ColumnActionConfig, row: any) => {
+  await ElMessageBox.confirm(`确认删除${row[action.name || 'c_name']}(${row[props.rowkeyName]})?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  const res = await action.handler?.(row);
+
+  if (res.ret === 0) {
+    success('删除成功!', action);
+  } else {
+    error(res.msg || '删除失败');
+  }
+};
+
+const copyHandler = async (action: ColumnActionConfig, row: any) => {
+  await ElMessageBox.confirm(`确定复制${row[action.name || 'c_name']}(${row.c_id})?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  try {
+    const res = await action.handler?.(row);
+
+    if (res.ret === 0) {
+      success('复制成功!', action);
+    } else {
+      error(`复制失败!${res.msg}`);
+    }
+  } catch (e) {
+    error('复制失败!');
+  }
+};
+
+const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
+  if (action.type === 'delete') {
+    await deleteAction(action, row);
+  } else if (action.type === 'copy') {
+    await copyHandler(action, row);
+  } else if (action.type === 'edit') {
+    props.editState[index] = row;
+  } else {
+    await action.handler?.(row);
+    action.after?.();
+  }
+};
+
+const save = async (index: number, config: ColumnConfig) => {
+  const action = config.actions?.find((item) => item.type === 'edit')?.action;
+  if (!action) return;
+
+  const data: any = {};
+  const row = props.editState[index];
+  props.columns
+    .filter((item) => item.type)
+    .forEach((column) => {
+      data[column.prop] = row[column.prop];
+    });
+
+  const res: any = await action({
+    data,
+  });
+
+  if (res) {
+    if (res.ret === 0) {
+      ElMessage.success('保存成功');
+      props.editState[index] = undefined;
+      emit('afterAction');
+    } else {
+      ElMessage.error({
+        duration: 10000,
+        showClose: true,
+        dangerouslyUseHTMLString: true,
+        message: res.msg || '保存失败',
+      });
+    }
+  } else {
+    props.editState[index] = undefined;
+    emit('afterAction');
+  }
+};
+</script>

package/src/ExpandColumn.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-table-column type="expand">
+    <template #default="scope">
+      <m-table
+        v-if="config.table"
+        :show-header="false"
+        :columns="config.table"
+        :data="scope.row[config.prop]"
+      ></m-table>
+      <m-form
+        v-if="config.form"
+        :config="config.form"
+        :init-values="config.values || scope.row[config.prop] || {}"
+      ></m-form>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { MForm } from '@tmagic/form';
+
+import { ColumnConfig } from './schema';
+
+export default defineComponent({
+  components: { MForm },
+
+  props: {
+    config: {
+      type: Object as PropType<ColumnConfig>,
+      default: () => ({}),
+      required: true,
+    },
+  },
+});
+</script>

package/src/PopoverColumn.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+    <template v-slot="scope">
+      <el-popover :placement="config.popover.placement" :width="config.popover.width" :trigger="config.popover.trigger">
+        <m-table
+          v-if="config.popover.tableEmbed"
+          :show-header="config.showHeader"
+          :columns="config.table"
+          :data="scope.row[config.prop]"
+        ></m-table>
+        <template #reference>
+          <el-button type="text"> {{ config.text || formatter(config, scope.row) }}</el-button>
+        </template>
+      </el-popover>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { ColumnConfig } from './schema';
+import { formatter } from './utils';
+
+export default defineComponent({
+  props: {
+    config: {
+      type: Object as PropType<ColumnConfig>,
+      default: () => ({}),
+      required: true,
+    },
+  },
+
+  setup() {
+    return {
+      formatter,
+    };
+  },
+});
+</script>