@phelan/design 0.0.1

package/packages/components/src/table/src/table.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-table
+    :class="`m-table ${$attrs.height ? 'table-border-bottom' : ''} ${outline ? 'm-table-outline' : ''}`"
+    v-bind="$attrs"
+    :stripe="stripe"
+    :size="size"
+    ref="elTableRef"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+import { tableProps } from './table';
+import { ref } from 'vue';
+
+const props = defineProps(tableProps);
+
+const { stripe = true, size = 'default', outline = true } = props;
+const elTableRef = ref();
+
+defineExpose({
+  getSelectionRows: () => elTableRef.value?.getSelectionRows(),
+  clearSelection: () => elTableRef.value?.clearSelection(),
+  toggleRowSelection: (row: any, selected?: boolean, ignoreSelectable = true) =>
+    elTableRef.value?.toggleRowSelection(row, selected, ignoreSelectable),
+  toggleAllSelection: () => elTableRef.value?.toggleAllSelection(),
+  toggleRowExpansion: (row: any, expanded?: boolean) =>
+    elTableRef.value?.toggleRowExpansion(row, expanded),
+  setCurrentRow: (row: any) => elTableRef.value?.setCurrentRow(row),
+  clearSort: () => elTableRef.value?.clearSort(),
+  clearFilter: (columnKeys?: string[]) => elTableRef.value?.clearFilter(columnKeys),
+  doLayout: () => elTableRef.value?.doLayout(),
+  sort: (prop: string, order: string) => elTableRef.value?.sort(prop, order),
+  scrollTo: (options: number | any, yCoord?: number) => elTableRef.value?.scrollTo(options, yCoord),
+  setScrollTop: (value: number) => elTableRef.value?.setScrollTop(value),
+  setScrollLeft: (value: number) => elTableRef.value?.setScrollLeft(value),
+});
+</script>

package/packages/components/src/table-grid/index.ts

@@ -0,0 +1,7 @@
+import TableGrid from './src/table-grid.vue';
+import type { TableGridColumn, ActionColumn, PaginationConfig } from './src/table-grid';
+
+export const MTableGrid = TableGrid;
+
+// 导出类型
+export type { TableGridColumn, ActionColumn, PaginationConfig };

package/packages/components/src/table-grid/src/render-cell.vue

@@ -0,0 +1,44 @@
+<template>
+  <span v-if="formattedValue !== undefined">{{ formattedValue }}</span>
+  <component
+    v-else-if="renderedValue"
+    :is="renderedValue"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, h } from 'vue';
+import type { TableGridColumn } from './table-grid';
+
+interface Props {
+  row: any;
+  column: any;
+  index: number;
+  col: TableGridColumn;
+}
+
+const props = defineProps<Props>();
+
+// 处理 formatter
+const formattedValue = computed(() => {
+  if (props.col.formatter) {
+    const cellValue = props.row[props.col.prop || ''];
+    return props.col.formatter(props.row, props.column, cellValue, props.index);
+  }
+  return undefined;
+});
+
+// 处理 render 函数
+const renderedValue = computed(() => {
+  if (props.col.render) {
+    const result = props.col.render(props.row, props.column, props.index);
+    // 如果返回的是字符串或数字，使用 h 函数包装
+    if (typeof result === 'string' || typeof result === 'number') {
+      return h('span', String(result));
+    }
+    // 如果返回的是 VNode，直接返回
+    return result;
+  }
+  return null;
+});
+</script>

package/packages/components/src/table-grid/src/table-grid.ts

@@ -0,0 +1,159 @@
+import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
+import type { Component } from 'vue';
+
+/**
+ * 表格列配置
+ */
+export interface TableGridColumn extends Partial<TableColumnCtx<any>> {
+  /** 列字段名 */
+  prop?: string;
+  /** 列标题 */
+  label?: string;
+  /** 列类型：selection(多选)、index(序号)、expand(展开) */
+  type?: 'selection' | 'index' | 'expand';
+  /** 自定义渲染函数 */
+  render?: (row: any, column: any, index: number) => any;
+  /** 格式化函数 */
+  formatter?: (row: any, column: any, cellValue: any, index: number) => string;
+}
+
+/**
+ * 操作列按钮配置
+ */
+export interface ActionColumn {
+  /** 按钮文本 */
+  text: string;
+  /** 按钮类型 */
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default';
+  /** 文本类型：text(文本按钮) 或 icon(图标按钮) */
+  textType?: 'text' | 'icon';
+  /** 图标组件 */
+  icon?: Component | string;
+  /** 是否禁用 */
+  disabled?: boolean | ((row: any) => boolean);
+  /** 是否显示 */
+  show?: (row: any) => boolean;
+  /** 点击事件 */
+  onClick: (row: any) => void;
+}
+
+/**
+ * 分页配置
+ */
+export interface PaginationConfig {
+  /** 当前页码 */
+  currentPage?: number;
+  /** 每页条数 */
+  pageSize?: number;
+  /** 总条数 */
+  total?: number;
+  /** 每页条数选项 */
+  pageSizes?: number[];
+  /** 分页布局 */
+  layout?: string;
+}
+
+/**
+ * 导入配置
+ */
+export interface ImportConfig {
+  /** 是否显示导入按钮 */
+  show?: boolean;
+  /** 是否支持多文件上传 */
+  multiple?: boolean;
+  /** 导入模板标识 */
+  importTemplate?: string;
+  /** 导入接口地址 */
+  importUrl?: string;
+  /** 接受类型 */
+  accept?: string;
+  /** 导入成功回调 */
+  onSuccess?: (res: any) => void;
+  /** 导入失败回调 */
+  onError?: (err: any) => void;
+  /** 导入确认回调 */
+  onConfirm?: (fileList: any[]) => void;
+  /** 导入取消回调 */
+  onCancel?: () => void;
+}
+
+export const tableGridProps = {
+  /** 表格数据 */
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  /** 列配置 */
+  columns: {
+    type: Array as () => TableGridColumn[],
+    required: true,
+  },
+  /** 操作列配置 */
+  actionColumns: {
+    type: Array as () => ActionColumn[],
+    default: () => [],
+  },
+  /** 操作列宽度 */
+  actionColumnWidth: {
+    type: Number,
+    default: 130,
+  },
+  /** 表格行 key */
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  /** 是否显示加载状态 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 分页配置 */
+  pagination: {
+    type: Object as () => PaginationConfig | false,
+    default: () => ({
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      pageSizes: [10, 20, 50, 100],
+      layout: 'total, sizes, prev, pager, next, jumper',
+    }),
+  },
+  /** 是否显示表格卡片 */
+  showCard: {
+    type: Boolean,
+    default: true,
+  },
+  /** 卡片阴影效果 */
+  cardShadow: {
+    type: String,
+    default: 'hover',
+  },
+  /** 查询面板默认列宽（基于 24 栅格系统） */
+  defaultSpan: {
+    type: Number,
+    default: 8,
+  },
+  /** 查询面板栅格间距（单位：px） */
+  gutter: {
+    type: Number,
+    default: 16,
+  },
+  /** 查询面板折叠时显示的表单项数量 */
+  visibleCount: {
+    type: Number,
+    default: 6,
+  },
+  /** 查询面板是否可展开收起 */
+  expandable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 导入配置 */
+  importConfig: {
+    type: Object as () => ImportConfig | false,
+    default: () => ({}),
+  },
+};
+
+export type TableGridProps = typeof tableGridProps;

package/packages/components/src/table-grid/src/table-grid.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="m-table-grid">
+    <!-- 查询面板 -->
+    <m-search-panel
+      v-if="$slots.queryParams"
+      class="m-table-grid-search-panel"
+      v-bind="searchPanelProps"
+      @search="handleSearch"
+      @reset="handleReset"
+    >
+      <slot name="queryParams" />
+    </m-search-panel>
+
+    <div class="m-table-grid-container">
+      <!-- 工具栏 -->
+      <el-row
+        v-if="$slots.toolbarLeft || $slots.toolbarRight || showImport"
+        class="m-table-grid-toolbar"
+        :gutter="10"
+      >
+        <el-col
+          v-if="$slots.toolbarLeft"
+          :span="$slots.toolbarRight || showImport ? 12 : 24"
+        >
+          <slot name="toolbarLeft" />
+        </el-col>
+        <el-col
+          v-if="$slots.toolbarRight || showImport"
+          :span="$slots.toolbarLeft ? 12 : 24"
+          style="text-align: right"
+        >
+          <!-- 用户自定义的工具栏按钮 -->
+          <slot name="toolbarRight" />
+
+          <!-- 默认导入按钮 -->
+          <slot name="toolbarImport">
+            <m-button
+              v-if="showImport"
+              icon="Download"
+              @click="handleImport"
+              >{{ t('导入') }}</m-button
+            >
+          </slot>
+        </el-col>
+      </el-row>
+
+      <!-- 表格 -->
+      <m-table
+        v-loading="loading"
+        :data="data"
+        :row-key="rowKey"
+        size="default"
+        @selection-change="handleSelectionChange"
+      >
+        <template
+          v-for="(col, i) in columns"
+          :key="i"
+        >
+          <m-table-column
+            v-if="col.type === 'selection' || col.type === 'index' || col.type === 'expand'"
+            v-bind="col"
+          />
+
+          <m-table-column
+            v-else
+            v-bind="col"
+            show-overflow-tooltip
+          >
+            <template
+              v-if="col.render || col.formatter"
+              #default="scope"
+            >
+              <render-cell
+                :row="scope.row"
+                :column="scope.column"
+                :index="scope.$index"
+                :col="col"
+              />
+            </template>
+
+            <template
+              v-if="$slots[`header-${col.prop}`]"
+              #header="scope"
+            >
+              <slot
+                :name="`header-${col.prop}`"
+                v-bind="scope"
+              />
+            </template>
+          </m-table-column>
+        </template>
+
+        <m-table-column
+          v-if="(actionColumns && actionColumns.length) || $slots.action"
+          label="操作"
+          fixed="right"
+          align="center"
+          :width="actionColumnWidth"
+        >
+          <template #default="{ row }">
+            <slot
+              name="action"
+              :row="row"
+            >
+              <template
+                v-for="(btn, _idx) in actionColumns"
+                :key="_idx"
+              >
+                <el-tooltip
+                  :content="btn.text"
+                  placement="top"
+                  show-after="500"
+                >
+                  <el-button
+                    v-if="btn.textType === 'text'"
+                    :disabled="getDisabled(btn, row)"
+                    :type="btn.type || 'default'"
+                    link
+                    @click="btn.onClick(row)"
+                  >
+                    {{ btn.text }}
+                  </el-button>
+                  <el-button
+                    v-else
+                    :disabled="getDisabled(btn, row)"
+                    :type="btn.type || 'default'"
+                    link
+                    @click="btn.onClick(row)"
+                  >
+                    <el-icon v-if="btn.icon">
+                      <component :is="btn.icon" />
+                    </el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </slot>
+          </template>
+        </m-table-column>
+      </m-table>
+
+      <!-- 分页 -->
+      <div
+        v-if="pagination !== false"
+        class="m-table-grid-pagination"
+      >
+        <m-pagination
+          v-model:current-page="paginationModel.currentPage"
+          v-model:page-size="paginationModel.pageSize"
+          :total="paginationModel.total"
+          :page-sizes="paginationModel.pageSizes"
+          :layout="paginationModel.layout"
+          @change="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- 导入弹窗 -->
+  <m-import-dialog
+    v-if="showImport && importConfig !== false"
+    v-model="importDialogVisible"
+    :importTemplate="(importConfig as ImportConfig).importTemplate || 'dict'"
+    :importUrl="(importConfig as ImportConfig).importUrl || ''"
+    :accept="(importConfig as ImportConfig).accept || '.xls,.xlsx'"
+    :multiple="(importConfig as ImportConfig).multiple || false"
+    @confirm="handleImportConfirm"
+    @download="handleDownload"
+    @cancel="handleImportCancel"
+    @success="handleImportSuccess"
+    @error="handleImportError"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, watch, ref } from 'vue';
+import { MTable, MTableColumn } from '../../table';
+import { MPagination } from '../../pagination';
+import { MSearchPanel } from '../../search-panel';
+import { MImportDialog } from '../../import-dialog';
+import { MButton } from '../../button';
+import { useLocale } from 'element-plus';
+import RenderCell from './render-cell.vue';
+import {
+  tableGridProps,
+  type ActionColumn,
+  type PaginationConfig,
+  type ImportConfig,
+} from './table-grid';
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.tableGrid.${key}`) || key;
+
+defineOptions({
+  name: 'MTableGrid',
+  inheritAttrs: false,
+});
+
+const props = defineProps(tableGridProps);
+
+const emit = defineEmits<{
+  search: [];
+  reset: [];
+  'update:selection': [val: any[]];
+  'page-change': [page: number, size: number];
+  'import-download': [template: string];
+}>();
+
+// SearchPanel 的 props
+const searchPanelProps = computed(() => ({
+  defaultSpan: props.defaultSpan,
+  gutter: props.gutter,
+  visibleCount: props.visibleCount,
+  expandable: props.expandable,
+}));
+
+// 分页模型
+const paginationModel = reactive<PaginationConfig>({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  pageSizes: [10, 20, 50, 100],
+  layout: 'total, sizes, prev, pager, next, jumper',
+});
+
+// 初始化分页配置
+if (props.pagination !== false) {
+  Object.assign(paginationModel, {
+    currentPage: props.pagination?.currentPage ?? 1,
+    pageSize: props.pagination?.pageSize ?? 10,
+    total: props.pagination?.total ?? 0,
+    pageSizes: props.pagination?.pageSizes ?? [10, 20, 50, 100],
+    layout: props.pagination?.layout ?? 'total, sizes, prev, pager, next, jumper',
+  });
+}
+
+// 监听外部传入的分页配置变化
+watch(
+  () => props.pagination,
+  (newVal) => {
+    if (newVal !== false && newVal) {
+      if (newVal.currentPage !== undefined) {
+        paginationModel.currentPage = newVal.currentPage;
+      }
+      if (newVal.pageSize !== undefined) {
+        paginationModel.pageSize = newVal.pageSize;
+      }
+      if (newVal.total !== undefined) {
+        paginationModel.total = newVal.total;
+      }
+    }
+  },
+  { deep: true },
+);
+
+// 处理查询
+const handleSearch = () => {
+  emit('search');
+};
+
+// 处理重置
+const handleReset = () => {
+  emit('reset');
+};
+
+// 处理选择变化
+const handleSelectionChange = (selection: any[]) => {
+  emit('update:selection', selection);
+};
+
+// 处理页码变化
+const handlePageChange = (page: number, size: number) => {
+  paginationModel.currentPage = page;
+  paginationModel.pageSize = size;
+  emit('page-change', page, size);
+};
+
+// 获取按钮禁用状态
+const getDisabled = (btn: ActionColumn, row: any): boolean => {
+  if (typeof btn.disabled === 'function') {
+    return btn.disabled(row);
+  }
+  return btn.disabled ?? false;
+};
+
+// 导入相关
+const importConfig = computed<ImportConfig | false>(() => {
+  return props.importConfig !== false ? props.importConfig || {} : false;
+});
+
+const showImport = computed(() => {
+  return importConfig.value !== false && importConfig.value?.show === true;
+});
+
+// 导入相关
+const importDialogVisible = ref(false);
+
+const handleImport = () => {
+  importDialogVisible.value = true;
+};
+
+const handleImportConfirm = (fileList: any[]) => {
+  if (importConfig.value && importConfig.value.onConfirm) {
+    importConfig.value.onConfirm(fileList);
+  }
+};
+
+const handleDownload = (template: string) => {
+  emit('import-download', template);
+};
+
+const handleImportCancel = () => {
+  importDialogVisible.value = false;
+  if (importConfig.value && importConfig.value.onCancel) {
+    importConfig.value.onCancel();
+  }
+};
+
+const handleImportSuccess = (res: any) => {
+  importDialogVisible.value = false;
+  if (importConfig.value && importConfig.value.onSuccess) {
+    importConfig.value.onSuccess(res);
+  }
+};
+
+const handleImportError = (err: any) => {
+  if (importConfig.value && importConfig.value.onError) {
+    importConfig.value.onError(err);
+  }
+};
+
+// 暴露方法
+defineExpose({
+  getPagination: () => paginationModel,
+});
+</script>

package/packages/components/src/table-head-editor/index.ts

@@ -0,0 +1,5 @@
+import TableHeadEditor from './src/table-head-editor.vue';
+
+export const MTableHeadEditor = TableHeadEditor;
+
+export * from './src/table-head-editor';

package/packages/components/src/table-head-editor/src/table-head-editor.ts

@@ -0,0 +1,59 @@
+import { PropType } from 'vue';
+
+export interface TreeItem {
+  label: string;
+  visible: boolean;
+  fixed?: boolean;
+  fixedPosition?: 'left' | 'right' | undefined;
+  editable?: boolean;
+  children?: TreeItem[];
+  key: string; // 唯一键
+}
+
+export interface TableHeadEditorProps {
+  modelValue?: boolean;
+  title?: string;
+  size?: number | string;
+  data?: TreeItem[];
+}
+
+export const tableHeadEditorProps = {
+  /**
+   * @description 控制显隐
+   */
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description 标题
+   */
+  title: {
+    type: String,
+    default: '自定义列表',
+  },
+  /**
+   * @description 容器宽度
+   */
+  size: {
+    type: [Number, String],
+    default: '700px',
+  },
+  /**
+   * @description 列表项data
+   */
+  data: {
+    type: Array as PropType<TreeItem[]>,
+    default: () => [],
+  },
+};
+
+export const tableHeadEditorEmits = {
+  'update:modelValue': (_value: boolean) => true,
+  cancel: () => true,
+  confirm: (_newData: TreeItem[]) => true,
+  'reset-default': () => true,
+};
+
+export type TableHeadEditorEmits = typeof tableHeadEditorEmits;
+export type TableHeadEditorPropsType = typeof tableHeadEditorProps;