fx-platform-ui 0.0.3 → 0.0.4

package/packages/components/table/src/plat-table-props.ts

@@ -0,0 +1,68 @@
+import { ExtractPropTypes } from 'vue'
+import { tableProps } from 'ant-design-vue/es/table'
+import type { PlatFormProps } from '../../form/src/plat-form-props'
+import type {
+  TableColumn,
+  LoadDataParams,
+  OnChangeCallbackParams
+} from './type'
+
+export const platTableProps = {
+  ...tableProps(),
+  // 是否显示搜索菜单
+  searchShow: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  // 表单属性
+  formProps: {
+    type: Object as PropType<PlatFormProps>,
+    default: () => ({})
+  },
+  // 表格配置
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    default: () => [],
+    required: true
+  },
+  /** 表格数据请求函数 */
+  dataRequest: {
+    // 获取列表数据函数API
+    // todo any 要替换成表格返回类型
+    type: Function as PropType<
+      (
+        params?: LoadDataParams,
+        onChangeParams?: OnChangeCallbackParams
+      ) => Promise<any>
+    >
+  },
+  /** 是否显示索引号 */
+  showIndex: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /** 索引列属性配置 */
+  indexColumnProps: {
+    type: Object as PropType<Partial<TableColumn>>,
+    default: () => ({})
+  },
+  /** 是否显示表格工具栏 */
+  showToolBar: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+export type PlatTableProps = ExtractPropTypes<typeof platTableProps>
+
+// 默认支持的插槽
+export const defaultSlots = [
+  'emptyText',
+  'expandIcon',
+  'title',
+  'footer',
+  'summary',
+  'expandedRowRender',
+  'customFilterIcon',
+  'customFilterDropdown'
+] as const

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

@@ -0,0 +1,29 @@
+import type { TableColumnType } from 'ant-design-vue'
+import type { VNode } from 'vue'
+import type { ActionItem } from './tableAction'
+
+export type ColumnParams<T = any> = {
+  record: T
+  text: string
+  index: number
+  column: TableColumn<T>
+}
+
+export interface TableColumn<T = Indexable>
+  extends Omit<TableColumnType<T>, 'dataIndex' | 'key'> {
+  title: string
+  dataIndex: keyof T | '$action'
+  key?: keyof T | '$action'
+  width?: number
+  /** 指定搜索的字段 */
+  searchField?: string
+  /** 在查询表单中不展示此项 */
+  hideInSearch?: boolean
+  /** 在 Table 中不展示此列 */
+  hideInTable?: boolean
+  // /** 传递给 Form.Item 的配置,可以配置 rules */
+  // formItemProps?: Partial<FormSchema<T>>
+  bodyCell?: (params: ColumnParams<T>) => VNode | string
+  headerCell?: (params: ColumnParams<T>) => VNode | string
+  actions?: (params: ColumnParams<T>) => ActionItem[]
+}

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

@@ -0,0 +1,3 @@
+export * from './column'
+export * from './table'
+export * from './tableAction'

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

@@ -0,0 +1,13 @@
+import type { TablePaginationConfig } from 'ant-design-vue/es/table'
+import type { TableProps } from 'ant-design-vue'
+// 加载表格数据参数
+export type LoadDataParams = TablePaginationConfig & {
+  currentPage?: number
+  pageSize?: number
+}
+
+// 表格onChange回掉参数
+export type OnChangeCallbackParams = any
+
+// 表格onChange回掉函数
+export type OnChangeCallback = TableProps['onChange']

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

@@ -0,0 +1,13 @@
+import type { ColumnParams } from './column'
+import type { ButtonProps } from 'ant-design-vue/es/components'
+
+export interface ActionItem extends Omit<ButtonProps, 'onClick'> {
+  onClick?: Fn<ColumnParams, any>
+  label?: string
+  color?: 'success' | 'error' | 'warning'
+  icon?: string
+  disabled?: boolean
+  divider?: boolean
+  ifShow?: boolean | ((action: ActionItem) => boolean)
+  tooltip?: string
+}

package/lib/packages/components/card/index.d.ts

@@ -1,2 +0,0 @@
-import PlCard from './src/index.vue';
-export default PlCard;

package/lib/packages/components/card/src/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _sfc_main: import("vue").DefineComponent<unknown, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>;
-export default _sfc_main;

package/packages/components/card/index.tsx

@@ -1,11 +0,0 @@
-import { App } from 'vue'
-
-import PlCard from './src/index.vue'
-PlCard.install = function (app: App) {
-  // 组件注册，按需引入
-  console.log(PlCard.name)
-  app.component(PlCard.name, PlCard)
-  return app
-}
-
-export default PlCard

package/packages/components/card/src/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <ACard class="card">
-    我是一个封装组件-- {{ text }} --- {{ message }}
-    <AButton type="primary">test</AButton>
-  </ACard>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'PlCard'
-})
-defineProps({
-  text: String,
-  message: String
-})
-</script>
-
-<style lang="less" scoped>
-.card {
-  color: red;
-}
-</style>