@tmagic/table 1.2.0-beta.2 → 1.2.0-beta.21

package/src/ActionsColumn.vue

@@ -1,72 +1,61 @@
 <template>
-  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+  <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
     <template v-slot="scope">
-      <el-button
+      <TMagicButton
         v-for="(action, actionIndex) in config.actions"
         v-show="display(action.display, scope.row) && !editState[scope.$index]"
-        v-html="action.text"
         class="action-btn"
         text
         type="primary"
         size="small"
+        :icon="action.icon"
         :key="actionIndex"
         @click="actionHandler(action, scope.row, scope.$index)"
-      ></el-button>
-      <el-button
+        ><span v-html="formatter(action.text, scope.row)"></span
+      ></TMagicButton>
+      <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
         text
         type="primary"
         size="small"
         @click="save(scope.$index, config)"
-        >保存</el-button
+        >保存</TMagicButton
       >
-      <el-button
+      <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
         text
         type="primary"
         size="small"
         @click="editState[scope.$index] = undefined"
-        >取消</el-button
+        >取消</TMagicButton
       >
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+<script lang="ts" setup name="MTableActionsColumn">
+import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
 
 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 props = withDefaults(
+  defineProps<{
+    columns: any[];
+    config: ColumnConfig;
+    rowkeyName?: string;
+    editState?: any;
+  }>(),
+  {
+    columns: () => [],
+    config: () => ({}),
+    rowkeyName: 'c_id',
+    editState: () => [],
   },
-});
+);
 
-const emit = defineEmits(['afterAction']);
+const emit = defineEmits(['after-action']);
 
 const display = (fuc: boolean | Function | undefined, row: any) => {
   if (typeof fuc === 'function') {
@@ -75,56 +64,16 @@ const display = (fuc: boolean | Function | undefined, row: any) => {
   return true;
 };
 
-const success = (msg: string, action: ColumnActionConfig, row: any) => {
-  ElMessage.success(msg);
-  action.after?.(row);
-};
-
-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, row);
-  } 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, row);
-    } else {
-      error(`复制失败!${res.msg}`);
-    }
-  } catch (e) {
-    error('复制失败!');
+const formatter = (fuc: string | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
   }
+  return fuc;
 };
 
 const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
   await action.before?.(row);
-  if (action.type === 'delete') {
-    await deleteAction(action, row);
-  } else if (action.type === 'copy') {
-    await copyHandler(action, row);
-  } else if (action.type === 'edit') {
+  if (action.type === 'edit') {
     props.editState[index] = row;
   } else {
     await action.handler?.(row);
@@ -150,20 +99,15 @@ const save = async (index: number, config: ColumnConfig) => {
 
   if (res) {
     if (res.ret === 0) {
-      ElMessage.success('保存成功');
+      tMagicMessage.success('保存成功');
       props.editState[index] = undefined;
-      emit('afterAction');
+      emit('after-action');
     } else {
-      ElMessage.error({
-        duration: 10000,
-        showClose: true,
-        dangerouslyUseHTMLString: true,
-        message: res.msg || '保存失败',
-      });
+      tMagicMessage.error(res.msg || '保存失败');
     }
   } else {
     props.editState[index] = undefined;
-    emit('afterAction');
+    emit('after-action');
   }
 };
 </script>

package/src/ExpandColumn.vue

@@ -1,37 +1,43 @@
 <template>
-  <el-table-column type="expand">
+  <TMagicTableColumn type="expand">
     <template #default="scope">
-      <m-table
+      <MTable
         v-if="config.table"
         :show-header="false"
         :columns="config.table"
-        :data="scope.row[config.prop]"
-      ></m-table>
-      <m-form
+        :data="(config.prop && scope.row[config.prop]) || []"
+      ></MTable>
+      <MForm
         v-if="config.form"
         :config="config.form"
-        :init-values="config.values || scope.row[config.prop] || {}"
-      ></m-form>
+        :init-values="config.values || (config.prop && scope.row[config.prop]) || {}"
+      ></MForm>
+      <div v-if="config.expandContent" v-html="config.expandContent(scope.row, config.prop)"></div>
+      <component v-if="config.component" :is="config.component" v-bind="componentProps(scope.row)"></component>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup name="MTableExpandColumn">
+import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
 
-export default defineComponent({
-  components: { MForm },
-
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
+const props = withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
   },
-});
+);
+
+const componentProps = (row: any) => {
+  if (typeof props.config.props === 'function') {
+    return props.config.props(row) || {};
+  }
+  return props.config.props || {};
+};
 </script>

package/src/PopoverColumn.vue

@@ -1,40 +1,39 @@
 <template>
-  <el-table-column :label="config.label" :width="config.width" :fixed="config.fixed">
+  <TMagicTableColumn :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
+      <TMagicPopover
+        v-if="config.popover"
+        :placement="config.popover.placement"
+        :width="config.popover.width"
+        :trigger="config.popover.trigger"
+      >
+        <MTable
           v-if="config.popover.tableEmbed"
           :show-header="config.showHeader"
           :columns="config.table"
-          :data="scope.row[config.prop]"
-        ></m-table>
+          :data="(config.prop && scope.row[config.prop]) || []"
+        ></MTable>
         <template #reference>
-          <el-button text type="primary"> {{ config.text || formatter(config, scope.row) }}</el-button>
+          <TMagicButton text type="primary"> {{ config.text || formatter(config, scope.row) }}</TMagicButton>
         </template>
-      </el-popover>
+      </TMagicPopover>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup name="MTablePopoverColumn">
+import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
+import MTable from './Table.vue';
 import { formatter } from './utils';
 
-export default defineComponent({
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
   },
-
-  setup() {
-    return {
-      formatter,
-    };
-  },
-});
+);
 </script>

package/src/Table.vue

@@ -1,15 +1,15 @@
 <template>
-  <el-table
+  <TMagicTable
     tooltip-effect="dark"
     class="m-table"
-    ref="table"
+    ref="tMagicTable"
     v-loading="loading"
     :data="tableData"
     :show-header="showHeader"
     :max-height="bodyHeight"
     :default-expand-all="defaultExpandAll"
     :border="hasBorder"
-    :row-key="rowkeyName || 'c_id'"
+    :row-key="rowkeyName || 'id'"
     :tree-props="{ children: 'children' }"
     :empty-text="emptyText || '暂无数据'"
     :span-method="objectSpanMethod"
@@ -17,190 +17,174 @@
     @select="selectHandler"
     @select-all="selectAllHandler"
     @selection-change="selectionChangeHandler"
+    @cell-click="cellClickHandler"
+    @expand-change="expandChange"
   >
     <template v-for="(item, columnIndex) in columns">
       <template v-if="item.type === 'expand'">
-        <expand-column :config="item" :key="columnIndex"></expand-column>
+        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
       <template v-else-if="item.selection">
-        <el-table-column type="selection" :key="columnIndex" width="40" :selectable="item.selectable"></el-table-column>
+        <component
+          width="40"
+          type="selection"
+          :is="tableColumnComponent.component"
+          :key="columnIndex"
+          :selectable="item.selectable"
+        ></component>
       </template>
 
       <template v-else-if="item.actions">
-        <actions-column
+        <ActionsColumn
           :columns="columns"
           :config="item"
           :rowkey-name="rowkeyName"
           :edit-state="editState"
           :key="columnIndex"
-          @afterAction="$emit('afterAction')"
-        ></actions-column>
+          @after-action="$emit('after-action')"
+        ></ActionsColumn>
       </template>
 
       <template v-else-if="item.type === 'popover'">
-        <popover-column :key="columnIndex" :config="item"></popover-column>
+        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
       </template>
 
       <template v-else>
-        <text-column :key="columnIndex" :config="item" :edit-state="editState"></text-column>
+        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
       </template>
     </template>
-  </el-table>
+  </TMagicTable>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ElTable } from 'element-plus';
+<script lang="ts" setup name="MTable">
+import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import { getConfig, TMagicTable } from '@tmagic/design';
+
 import ActionsColumn from './ActionsColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
-export default defineComponent({
-  name: 'm-table',
-
-  components: { ExpandColumn, ActionsColumn, PopoverColumn, TextColumn },
-
-  props: {
-    data: {
-      type: Array,
-      require: true,
-    },
-
-    columns: {
-      type: Array as PropType<any[]>,
-      require: true,
-      default: () => [],
-    },
-
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns?: any[];
     /** 合并行或列的计算方法 */
-    spanMethod: {
-      type: Function as PropType<
-        (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number]
-      >,
-    },
+    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];
+    loading?: boolean;
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight?: string | number;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 空数据时显示的文本内容 */
+    emptyText?: string;
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll?: boolean;
+    rowkeyName?: string;
+    /** 是否带有纵向边框 */
+    border?: boolean;
+  }>(),
+  {
+    columns: () => [],
+    loading: false,
+    showHeader: true,
+    defaultExpandAll: false,
+    border: false,
+  },
+);
+
+const emit = defineEmits([
+  'sort-change',
+  'after-action',
+  'select',
+  'select-all',
+  'selection-change',
+  'expand-change',
+  'cell-click',
+]);
+
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
+
+const editState = ref([]);
+
+const tableColumnComponent = getConfig('components').tableColumn;
+const selectionColumn = computed(() => {
+  const column = props.columns.filter((item) => item.selection);
+  return column.length ? column[0] : null;
+});
 
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+const tableData = computed(() => {
+  if (selectionColumn.value) {
+    return props.data || [];
+  }
 
-    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
-    bodyHeight: {
-      type: [String, Number],
-    },
+  return cloneDeep(props.data) || [];
+});
 
-    /** 是否显示表头 */
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
+const hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));
 
-    /** 空数据时显示的文本内容 */
-    emptyText: {
-      type: String,
-    },
+const sortChange = (data: any) => {
+  emit('sort-change', data);
+};
 
-    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
+const selectHandler = (selection: any, row: any) => {
+  const column = selectionColumn.value;
+  if (!column) {
+    return;
+  }
 
-    rowkeyName: {
-      type: String,
-    },
+  if (column.selection === 'single') {
+    // this.clearSelection()
+    // this.toggleRowSelection(row, true)
+  }
+  emit('select', selection, row);
+};
 
-    /** 是否带有纵向边框 */
-    border: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const selectAllHandler = (selection: any) => {
+  emit('select-all', selection);
+};
 
-  emits: ['sort-change', 'afterAction', 'select', 'select-all', 'selection-change'],
+const selectionChangeHandler = (selection: any) => {
+  emit('selection-change', selection);
+};
 
-  data(): {
-    editState: any[];
-  } {
-    return {
-      editState: [],
-    };
-  },
+const cellClickHandler = (...args: any[]) => {
+  emit('cell-click', ...args);
+};
 
-  computed: {
-    tableData() {
-      if (this.selectionColumn) {
-        return this.data || [];
-      }
+const expandChange = (...args: any[]) => {
+  emit('expand-change', ...args);
+};
 
-      return cloneDeep(this.data) || [];
-    },
+const toggleRowSelection = (row: any, selected: boolean) => {
+  tMagicTable.value?.toggleRowSelection(row, selected);
+};
 
-    selectionColumn() {
-      const column = this.columns.filter((item) => item.selection);
-      return column.length ? column[0] : null;
-    },
+const toggleRowExpansion = (row: any, expanded: boolean) => {
+  tMagicTable.value?.toggleRowExpansion(row, expanded);
+};
 
-    hasBorder() {
-      return typeof this.border !== 'undefined' ? this.border : true;
-    },
-  },
+const clearSelection = () => {
+  tMagicTable.value?.clearSelection();
+};
 
-  methods: {
-    sortChange(data: any) {
-      this.$emit('sort-change', data);
-    },
-
-    selectHandler(selection: any, row: any) {
-      const column = this.selectionColumn;
-      if (!column) {
-        return;
-      }
-
-      if (column.selection === 'single') {
-        // this.clearSelection()
-        // this.toggleRowSelection(row, true)
-      }
-      this.$emit('select', selection, row);
-    },
-
-    selectAllHandler(selection: any) {
-      this.$emit('select-all', selection);
-    },
-
-    selectionChangeHandler(selection: any) {
-      this.$emit('selection-change', selection);
-    },
-
-    toggleRowSelection(row: any, selected: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowSelection.bind(table)(row, selected);
-    },
-
-    toggleRowExpansion(row: any, expanded: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowExpansion.bind(table)(row, expanded);
-    },
-
-    clearSelection() {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.clearSelection.bind(table)();
-    },
-
-    objectSpanMethod(data: any) {
-      if (typeof this.spanMethod === 'function') {
-        return this.spanMethod(data);
-      }
-      return () => ({
-        rowspan: 0,
-        colspan: 0,
-      });
-    },
-  },
+const objectSpanMethod = (data: any) => {
+  if (typeof props.spanMethod === 'function') {
+    return props.spanMethod(data);
+  }
+  return () => ({
+    rowspan: 0,
+    colspan: 0,
+  });
+};
+
+defineExpose({
+  toggleRowSelection,
+  toggleRowExpansion,
+  clearSelection,
 });
 </script>