gi-component 0.0.2 → 0.0.4

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

@@ -1,49 +1,49 @@
-<template>
-  <el-table-column v-bind="columnProps">
-    <!-- 处理render函数 -->
-    <template v-if="column.render" v-slot="scope">
-      <component :is="column.render(scope)" />
-    </template>
-
-    <!-- 处理插槽内容 -->
-    <template v-else-if="column.slotName" #default="scope">
-      <slot :name="column.slotName" v-bind="scope" />
-    </template>
-
-    <!-- 递归渲染子列 -->
-    <template v-if="column.children && column.children.length > 0">
-      <TableColumn
-        v-for="child in column.children"
-        :key="child.prop || child.label"
-        :column="child"
-      >
-        <!-- 将所有插槽传递给子组件 -->
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="scope"
-        >
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </template>
-  </el-table-column>
-</template>
-
-<script lang="ts" setup>
-import type { TableColumnItem } from './type';
-import { computed } from 'vue';
-import TableColumn from './TableColumn.vue';
-
-const props = defineProps<{
-  column: TableColumnItem;
-}>();
-
-// 计算el-table-column需要的属性
-const columnProps = computed(() => {
-  const { slotName, render, children, ...restProps } = props.column;
-  return restProps;
-});
-</script>
-
-<style scoped></style>
+<template>
+  <el-table-column v-bind="columnProps">
+    <!-- 处理render函数 -->
+    <template v-if="column.render" v-slot="scope">
+      <component :is="column.render(scope)" />
+    </template>
+
+    <!-- 处理插槽内容 -->
+    <template v-else-if="column.slotName" #default="scope">
+      <slot :name="column.slotName" v-bind="scope" />
+    </template>
+
+    <!-- 递归渲染子列 -->
+    <template v-if="column.children && column.children.length > 0">
+      <TableColumn
+        v-for="child in column.children"
+        :key="child.prop || child.label"
+        :column="child"
+      >
+        <!-- 将所有插槽传递给子组件 -->
+        <template
+          v-for="(_, slotName) in $slots"
+          :key="slotName"
+          #[slotName]="scope"
+        >
+          <slot :name="slotName" v-bind="scope" />
+        </template>
+      </TableColumn>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnItem } from './type';
+import { computed } from 'vue';
+import TableColumn from './TableColumn.vue';
+
+const props = defineProps<{
+  column: TableColumnItem;
+}>();
+
+// 计算el-table-column需要的属性
+const columnProps = computed(() => {
+  const { slotName, render, children, ...restProps } = props.column;
+  return restProps;
+});
+</script>
+
+<style scoped></style>

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

@@ -1,85 +1,89 @@
-<template>
-  <div>
-    <el-table v-bind="tableProps" :data="props.data as any[]">
-      <TableColumn
-        v-for="item in props.columns"
-        :key="item.prop || item.label"
-        :column="item"
-      >
-        <!-- 将所有插槽传递给子组件 -->
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="scope"
-        >
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </el-table>
-
-    <el-row justify="end" :class="b('table-pagination')">
-      <el-pagination
-        v-bind="paginationProps"
-        v-model:current-page="paginationProps.currentPage"
-        v-model:page-size="paginationProps.pageSize"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </el-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { TableProps } from './type';
-import { computed, useAttrs } from 'vue';
-import { useBemClass } from '../../../hooks';
-import TableColumn from './TableColumn.vue';
-
-const props = withDefaults(defineProps<TableProps>(), {
-  columns: () => [],
-  pagination: () => ({})
-});
-
-const attrs = useAttrs();
-const { b } = useBemClass();
-
-const tableProps = computed(() => {
-  return {
-    ...attrs,
-    ...props,
-    columns: undefined,
-    pagination: undefined
-  };
-});
-
-const paginationProps = computed(() => {
-  return {
-    background: true,
-    layout: 'prev, pager, next, sizes, total',
-    pageSizes: [10, 20, 50, 100],
-    ...props.pagination
-  };
-});
-
-function handleSizeChange(size: number) {
-  // @ts-ignore
-  props.pagination.pageSize = size;
-}
-
-function handleCurrentChange(page: number) {
-  // @ts-ignore
-  props.pagination.currentPage = page;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-pagination__rightwrapper) {
-  flex: auto;
-}
-
-.#{a.$prefix}-table-pagination {
-  margin-top: 10px;
-}
-</style>
+<template>
+  <div :class="b('table')">
+    <el-table v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
+      <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
+        <!-- 将所有插槽传递给子组件 -->
+        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
+          <slot :name="slotName" v-bind="scope" />
+        </template>
+      </TableColumn>
+    </el-table>
+
+    <el-row justify="end" :class="b('table-pagination')">
+      <el-pagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
+        v-model:page-size="paginationProps.pageSize" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableProps } from './type';
+import { computed, useAttrs, useTemplateRef } from 'vue';
+import { useBemClass } from '../../../hooks';
+import TableColumn from './TableColumn.vue';
+
+const props = withDefaults(defineProps<TableProps>(), {
+  columns: () => [],
+  pagination: () => ({})
+});
+
+const attrs = useAttrs();
+const { b } = useBemClass();
+const tableRef = useTemplateRef('tableRef');
+
+const tableProps = computed(() => {
+  return {
+    ...attrs,
+    ...props,
+    columns: undefined,
+    pagination: undefined
+  };
+});
+
+const paginationProps = computed(() => {
+  return {
+    background: true,
+    layout: 'prev, pager, next, sizes, total',
+    pageSizes: [10, 20, 50, 100],
+    ...props.pagination
+  };
+});
+
+function handleSizeChange(size: number) {
+  // @ts-ignore
+  props.pagination.pageSize = size;
+}
+
+function handleCurrentChange(page: number) {
+  // @ts-ignore
+  props.pagination.currentPage = page;
+}
+
+defineExpose({
+  tableRef
+})
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/var.scss' as a;
+
+:deep(.el-pagination__rightwrapper) {
+  flex: auto;
+}
+
+.#{a.$prefix}-table {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-table) {
+    flex: 1;
+  }
+}
+
+.#{a.$prefix}-table-pagination {
+  margin-top: 10px;
+}
+</style>

package/packages/components/table/src/type.ts

@@ -1,22 +1,22 @@
-import type {
-  TableProps as ElTableProps,
-  PaginationProps,
-  TableColumnCtx,
-  TableColumnInstance
-} from 'element-plus';
-import type { ExtractPropTypes, VNode } from 'vue';
-
-export interface TableColumnItem
-  extends Omit<TableColumnInstance['$props'], never> {
-  slotName?: string;
-  children?: TableColumnItem[];
-  render?: (scope: TableColumnCtx<any>) => VNode | VNode[] | string;
-}
-
-export interface TableProps
-  extends ExtractPropTypes<
-    ElTableProps<Record<string | number | symbol, any>>
-  > {
-  columns?: TableColumnItem[];
-  pagination?: Partial<PaginationProps>;
-}
+import type {
+  TableProps as ElTableProps,
+  PaginationProps,
+  TableColumnCtx,
+  TableColumnInstance
+} from 'element-plus';
+import type { ExtractPropTypes, VNode } from 'vue';
+
+export interface TableColumnItem
+  extends Omit<TableColumnInstance['$props'], never> {
+  slotName?: string;
+  children?: TableColumnItem[];
+  render?: (scope: TableColumnCtx<any>) => VNode | VNode[] | string;
+}
+
+export interface TableProps
+  extends ExtractPropTypes<
+    ElTableProps<Record<string | number | symbol, any>>
+  > {
+  columns?: TableColumnItem[];
+  pagination?: Partial<PaginationProps>;
+}

package/packages/hooks/useTable.ts

@@ -0,0 +1,3 @@
+export function useTable() {
+
+}

package/packages/utils/createSelectDialog.ts

@@ -1,14 +1,12 @@
 import type { Component } from 'vue';
 import { ElMessage } from 'element-plus';
 import { h, ref } from 'vue';
-import { Dialog } from '../index';
+import { Dialog, type DialogOptions } from '../index';
 
-type CreateSelectDialogParams = {
-  title: string;
+interface CreateSelectDialogParams extends Omit<DialogOptions, 'content' | 'onOk' | 'onBeforeOk'> {
   component: Component;
   componentProps?: Record<string, any>;
   tip?: string;
-  bodyClass?: string;
 };
 
 interface DefOption {
@@ -35,6 +33,8 @@ export const createSelectDialog = <T, Q extends DefOption = DefOption>(
     const DialogTableRef = ref<any>();
 
     Dialog.open({
+      bodyClass: 'gi-p0',
+      ...{ ...params, component: undefined, componentProps: undefined, tip: undefined },
       title: params.title || options.title,
       content: () =>
         h(params.component, {
@@ -43,8 +43,7 @@ export const createSelectDialog = <T, Q extends DefOption = DefOption>(
           queryParams,
           ...params.componentProps
         }),
-      style: { maxWidth: '960px' },
-      bodyClass: params.bodyClass,
+      style: { maxWidth: '1000px', ...params.style },
       onBeforeOk: async () => {
         if (!DialogTableRef.value.getSelectedData) {
           ElMessage.error('组件必须暴露getSelectedData方法');