@ethan1979/jf-lib 0.0.32

package/src/components/v-table/index.vue

@@ -0,0 +1,338 @@
+<template>
+  <a-card
+    :id="tableId"
+    :style="{ width: '100%', ...(config?.style || {}) }"
+    :title="config?.title"
+    :bordered="Boolean(config?.card)"
+    class="v-table"
+    :class="[!config?.card && 'general-card']"
+  >
+    <template #title v-if="config?.cardSlots?.title">
+      <component :is="config?.cardSlots?.title" />
+    </template>
+    <template #extra v-if="config?.cardSlots?.extra">
+      <component :is="config?.cardSlots?.extra" />
+    </template>
+    <!-- 777 -->
+    <v-search
+      v-if="!config?.hiddenSearch"
+      ref="searchRef"
+      :config="config"
+      @search="search"
+    />
+    <v-toolbar
+      v-if="!config?.hiddenToolbar"
+      :config="config"
+      @add="add"
+      @batch-delete="batchDelete"
+    >
+      <template #toolbar-left>
+        <slot name="toolbar-left"></slot>
+      </template>
+      <template #toolbar-left-extend>
+        <slot name="toolbar-left-extend"></slot>
+      </template>
+      <template #toolbar-right>
+        <slot name="toolbar-right"></slot>
+      </template>
+    </v-toolbar>
+    <v-content
+      ref="contentRef"
+      :config="config"
+      @update="update"
+      @delete-data="deleteData"
+      @get="get"
+    />
+  </a-card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch } from 'vue'
+
+  export default defineComponent({
+    name: 'VTable',
+  })
+</script>
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, provide, Ref, ref, toRefs, PropType } from 'vue'
+  // import { number } from 'echarts/core'
+  import { uniqueId } from 'lodash'
+  import { Message } from '@arco-design/web-vue'
+  import { TableConfig } from './typings'
+  import VSearch from './components/search.vue'
+  import VToolbar from './components/toolbar.vue'
+  import VContent from './components/content/index.vue'
+  import { BaseGetData, BaseObj } from '../../types/global'
+  import { setSelectedRowKeys } from './util'
+
+  const tableId = uniqueId('v-table-')
+  provide('tableId', tableId)
+
+  const props = defineProps({
+    config: Object as PropType<TableConfig>,
+  })
+
+  const { config } = toRefs(props)
+
+  // watch(()=>config,(newVal)=>{
+  //   console.log('change',newVal);
+  // },{
+  //   deep:true
+  // })
+
+  provide('config', config && config.value)
+
+  const pagination = computed(() => {
+    return config?.value?.table?.pagination as {
+      size: 'mini' | 'small' | 'medium' | 'large'
+      disabled: boolean
+      defaultCurrent: number
+      total: number
+      defaultPageSize: number
+      hideOnSinglePage: boolean
+      simple: boolean
+      showTotal: boolean
+      showMore: boolean
+      showJumper: boolean
+      showPageSize: boolean
+      pageSizeOptions: number[]
+      baseSize: number
+      bufferSize: number
+      current: number
+      pageSize: number
+    }
+  })
+
+  const setLoading = (bool: boolean) => {
+    if (config?.value?.table) config.value.table.loading = bool
+  }
+
+  const selectedRowKeys = computed({
+    get: () => props.config?.table.rowSelection?.selectedRowKeys || [],
+    set: (val) => {
+      if (props.config?.table.rowSelection?.selectedRowKeys) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.config.table.rowSelection.selectedRowKeys = val
+      }
+    },
+  })
+  provide('selectedRowKeys', selectedRowKeys)
+
+  const searchParams = ref<BaseObj>({})
+  const apis = ref(config?.value?.apis)
+  const get = async () => {
+    if (!config?.value) return
+    if (config.value?.loadingOnGet !== false) setLoading(true)
+    try {
+      if (apis.value?.get) {
+        // const pagination = config.value?.table.pagination as PaginationProps
+        let params = {
+          ...searchParams.value,
+        }
+        if (pagination.value) {
+          const { current, pageSize } = pagination.value
+          params = {
+            current,
+            pageSize,
+            ...params,
+          }
+        }
+        const result = (await apis.value?.get(params as any)) as any
+        const isBaseGetData = !((result?.total ?? true) === true)
+        if (isBaseGetData && pagination.value) {
+          const { data, total } = result as BaseGetData<BaseObj>
+          pagination.value.total = total ?? data.length
+          config.value.table.data = data
+        } else {
+          const data = result as BaseObj[]
+          config.value.table.data = data
+        }
+      }
+    } catch (error) {
+      // console.log('error', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const crud = async (
+    apiName: 'update' | 'delete' | 'add',
+    params: BaseObj | any[]
+  ) => {
+    const map = {
+      update: '编辑',
+      add: '新增',
+      delete: '删除',
+    }
+    const paramsIsArray = params instanceof Array
+    const filterParams: BaseObj = {}
+    if (!paramsIsArray) {
+      const filterThisValue = ['filter this value']
+      Object.keys(params).forEach((key) => {
+        // ''??true ->'' false??true -> false
+        if (
+          (params[key] ?? filterThisValue) !== filterThisValue &&
+          params[key] !== ''
+        )
+          filterParams[key] = params[key]
+      })
+    }
+    if (apis.value && apis.value[apiName]) {
+      // eslint-disable-next-line no-useless-catch
+      try {
+        const requestFunction = apis.value[apiName] as any
+        // await ()(filterParams)
+        if (paramsIsArray) {
+          // console.log('params', params)
+          await requestFunction.call(null, ...params)
+        } else {
+          await requestFunction(filterParams)
+        }
+        Message.success(`${map[apiName]}成功`)
+        get()
+      } catch (error) {
+        // console.trace(`${map[apiName]}失败`)
+        throw error
+      }
+    }
+  }
+
+  const add = async (params: BaseObj) => {
+    // if (apis.value?.add) {
+    //   await apis.value?.add(params)
+    //   get()
+    // }
+    crud('add', params)
+  }
+  const update = async (params: BaseObj) => {
+    // if (apis.value?.update) {
+    //   await apis.value?.update(params)
+    //   get()
+    // }
+    crud('update', params)
+  }
+  const deleteData = async (params: BaseObj) => {
+    // if (apis.value?.delete) {
+    //   await apis.value?.delete(params)
+    //   get()
+    // }
+    // console.log(
+    //   'config?.value?.table?.rowKey',
+    //   config?.value?.table?.rowKey,
+    //   params
+    // )
+    const rowKey =
+      (params[config?.value?.table?.rowKey as string] as number) || null
+    // const rowKey = 12333
+    crud('delete', [rowKey, params]).then(() => {
+      const index = selectedRowKeys.value.indexOf(rowKey as never)
+      if (index !== -1) {
+        selectedRowKeys.value.splice(index, 1)
+        // setSelectedRowKeys((config as Ref<TableConfig>).value, [
+        //   ...(selectedRowKeys.value as string[]),
+        // ])
+      }
+    })
+  }
+
+  const batchDelete = async () => {
+    const keys = selectedRowKeys.value
+    crud('delete', [keys]).then(() => {
+      selectedRowKeys.value = []
+      // setSelectedRowKeys((config as Ref<TableConfig>).value, [])
+    })
+  }
+
+  const search = (params: BaseObj) => {
+    searchParams.value = {}
+    Object.keys(params).forEach((key) => {
+      if ((params[key] ?? '') !== '') {
+        searchParams.value[key] = params[key]
+      }
+    })
+    // searchParams.value = params
+    if (pagination.value) pagination.value.current = 1
+    get()
+  }
+
+  const contentRef = ref<{
+    getTableHeight: () => number
+  }>()
+  const searchRef = ref<{
+    reset: () => void
+    search: () => void
+  }>()
+
+  // setTimeout(()=>{
+  //   console.log('contentRef',contentRef);
+
+  // },1000)
+  // provide('setGetTableHeight', (fn: () => number) => {
+  //   getTableHeight.value = fn
+  //   console.log('getTableHeight', getTableHeight.value)
+  // })
+  const _setSelectedRowKeys = (keys: string[]) =>
+    setSelectedRowKeys((config as Ref<TableConfig>).value, keys)
+  defineExpose({
+    contentRef,
+    searchRef,
+    get,
+    resetSearchParams: searchRef.value?.reset,
+    setSelectedRowKeys: _setSelectedRowKeys,
+    getSelectedRowKeys: () => selectedRowKeys.value,
+  })
+</script>
+
+<style lang="less">
+  .v-table {
+    height: 100%;
+    // height: var(--container-height);
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .arco-card-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding-top: 0 !important;
+    }
+
+    .arco-table-border {
+      .arco-table-container {
+        border-right: 1px solid var(--color-neutral-3);
+      }
+
+      .arco-table-scroll-y
+        .arco-table-body
+        .arco-table-tr:not(.arco-table-tr-empty):last-of-type
+        .arco-table-td,
+      .arco-table-border
+        .arco-table-scroll-y
+        tfoot
+        .arco-table-tr:last-of-type
+        .arco-table-td {
+        border-bottom: 1px solid var(--color-border-2);
+      }
+    }
+
+    .arco-table-border-cell
+      .arco-table-tr
+      .arco-table-td:last-child:not(.arco-table-tr-expand) {
+      border-right: none;
+    }
+
+    // .arco-card-body {
+    //   padding-bottom: 0 !important;
+    // }
+  }
+
+  .table-modal {
+    .arco-modal-title {
+      display: block;
+    }
+  }
+</style>

package/src/components/v-table/typings.d.ts

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CSSProperties, VNode } from 'vue'
+import type _Table from '@arco-design/web-vue/es/table'
+import type _TableColumn from '@arco-design/web-vue/es/table/table-column'
+import { FieldRule } from '@arco-design/web-vue/es/form/interface'
+import { BaseGetData, BaseObj } from '../../types/global'
+import { TableColumnData } from '@arco-design/web-vue/es/table'
+
+// export type TableColumn = InstanceType<typeof _TableColumn>
+
+// export type TableColumnProps = TableColumn['$props']
+type Table = InstanceType<typeof _Table>['$props']
+
+type FormRenderType =
+  | 'a-input'
+  | 'a-input-number'
+  | 'a-time-picker'
+  | 'a-select'
+  | 'v-select'
+
+export type FormRender<T = BaseObj> =
+  | {
+      type: FormRenderType
+      props: {
+        [key: string]: unknown
+      }
+    }
+  | ((params: T | undefined) => VNode)
+
+// export type BaseObj = { [key: string]: unknown }
+
+export type CellRenderFN<T = BaseObj> = (
+  record: T,
+  column: TableColumnData,
+  rowIndex: number
+) => VNode
+
+export type OperationsButtonConfig = {
+  hidden?: boolean
+  disabled?: boolean
+  onClick?: (params?: BaseObj) => void | boolean
+}
+
+export type OperationsProps<T = BaseObj> = {
+  extend?: CellRenderFN<T>
+  extendPostion?: 'center' | 'left' | 'right'
+  updateButton?: OperationsButtonConfig
+  deleteButton?: OperationsButtonConfig
+}
+type CellComponentOperate<T = BaseObj> = {
+  type: 'operations'
+  props?: OperationsProps<T> | ((params: T) => OperationsProps<T>)
+}
+
+type CellComponents<T> = CellComponentOperate<T>
+
+type TableFormItemConfig<T> = {
+  render?: FormRender<T>
+  yIndex?: number
+  rule?: FieldRule | FieldRule[]
+  required?: boolean
+  defaultValue?: unknown
+  tooltip?: string
+  title?: string
+}
+
+export type SearchColSpan =
+  | number
+  | {
+      span: number
+      formItem?: {
+        labelColSpan?: number
+        wrapperColSpan?: number
+      }
+    }
+
+export type Columns<T = BaseObj> = TableColumnData & {
+  dataIndex: string | keyof T 
+  hidden?: boolean
+  titleRender?: () => VNode
+  cellRender?: CellRenderFN<T> | CellComponents<T>
+  children?:Columns<T>[]
+  form?:
+    | ({
+        hiddenSearch?: boolean
+        hiddenAdd?: boolean
+        hiddenUpdate?: boolean
+        searchColSpan?: SearchColSpan
+        // [
+        //   key: 'addConfig' | 'updateConfig' | 'searchConfig'
+        // ]: TableFormItemConfig
+        addConfig?: TableFormItemConfig<T>
+        updateConfig?: TableFormItemConfig<T>
+        searchConfig?: TableFormItemConfig<T>
+      } & TableFormItemConfig<T>)
+    | boolean
+    | (() => VNode)
+}
+
+// type BaseGetData = {
+//   data: Array<BaseObj>
+//   total: number
+//   page: number
+//   pageSize: number
+// }
+
+export interface TableConfig<T = BaseObj> {
+  title?: string
+  card?: boolean
+  batchDelete?: boolean
+  hiddenSearch?: boolean
+  hiddenToolbar?: boolean
+  style?: CSSProperties
+  loadingOnGet?:boolean
+
+  cardSlots?:{
+    [key in 'title'|'extra']?:()=>VNode
+  }
+  
+  toolbar?: {
+    onBeforeAddModalOpen?: () => void | boolean
+  }
+  search?: {
+    hiddenReset?: boolean
+    searchOnchange?:boolean
+    collapsible?: boolean
+    defaultVisibleFields?: string[]
+  }
+  table: Omit<Table, 'columns'> & {
+    data: Array<BaseObj>
+    'v-slots'?:{
+      [key:string]:()=>VNode
+    }
+  }
+  columns: Array<Columns<T>>
+  apis?: {
+    get?: (params: {
+      current: number
+      pageSize: number
+      [key: string]: unknown
+    }) =>
+      | BaseGetData<T>
+      | Promise<T[]>
+      | Promise<BaseGetData<T>>
+      | Promise<BaseGetData<BaseObj>>
+    update?: (formData: T) => void | Promise<unknown>
+    add?: (formData: T) => void | Promise<unknown>
+    delete?: (
+      id: number | number[],
+      formData?: T | T[]
+    ) => void | Promise<unknown>
+  }
+}
+
+export interface FormGenerate {
+  form: Array<{
+    formItem: {
+      title: string
+      dataIndex: string
+    }
+    render: FormRender
+  }>
+  formData: BaseObj
+}

package/src/components/v-table/util.ts

@@ -0,0 +1,14 @@
+import { TableConfig } from './typings'
+
+export const setSelectedRowKeys = (
+  config: TableConfig,
+  value: string[] | undefined
+) => {
+  if (config?.table.rowSelection) {
+    const rowSelection = config?.table.rowSelection
+    // console.log('rowSelection', rowSelection)
+    if (rowSelection) {
+      rowSelection.selectedRowKeys = value
+    }
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+interface Window {
+  containerHeight?: number
+}

package/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import ArcoVue from '@arco-design/web-vue'
+import ArcoVueIcon from '@arco-design/web-vue/es/icon'
+import '@arco-design/web-vue/dist/arco.css'
+
+const app=createApp(App)
+
+app.use(ArcoVue, {})
+app.use(ArcoVueIcon)
+
+app.mount('#app')

package/src/types/global.ts

@@ -0,0 +1,48 @@
+export interface AnyObject {
+  [key: string]: unknown
+}
+
+export interface Options {
+  value: unknown
+  label: string
+}
+
+export interface NodeOptions extends Options {
+  children?: NodeOptions[]
+}
+
+export interface GetParams {
+  body: null
+  type: string
+  url: string
+}
+
+export interface PostData {
+  body: string
+  type: string
+  url: string
+}
+
+export interface Pagination {
+  current: number
+  pageSize: number
+  total?: number
+}
+
+export type TimeRanger = [string, string]
+
+export interface GeneralChart {
+  xAxis: string[]
+  data: Array<{ name: string; value: number[] }>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BaseObj = { [key: string]: any }
+
+export type BaseGetData<T = BaseObj> = {
+  data: Array<T>
+  total: number
+  page?: number
+  pageSize?: number
+  idList?: number[]
+}

package/src/utils/utils.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FormRender } from '../components/v-table/typings'
+
+const clearAndUpper = (text: string) => text.replace(/-/, '').toUpperCase()
+
+export const toPascalCase = (text: string) =>
+  text.replace(/(^\w|-\w)/g, clearAndUpper)
+
+export const filterTree = (
+  _tree: any[],
+  filterValue: string | boolean | number,
+  fields: {
+    filterField: string
+    children: string
+    key?: string
+  }
+) => {
+  const getTreeKey = (data: any) => {
+    const key = fields.key as string
+    const keys: any[] = []
+    keys.push(data[key])
+    if (data[fields.children]?.length > 0) {
+      data[fields.children].forEach((item: any) => {
+        keys.push(...getTreeKey(item))
+      })
+    }
+    return keys
+  }
+  const isMatch = (value: any) => {
+    if (typeof filterValue === 'string') return value.includes(filterValue)
+    return value === filterValue
+  }
+  const tree: any[] = []
+  const keys: any[] = []
+  _tree.forEach((item) => {
+    if (isMatch(item[fields.filterField])) {
+      tree.push(item)
+      if (fields.key) {
+        keys.push(...getTreeKey(item))
+      }
+    } else if (item[fields.children]?.length > 0) {
+      const { tree: fTree, keys: fKeys } = filterTree(
+        item[fields.children],
+        filterValue,
+        fields
+      )
+      if (fTree.length > 0) {
+        tree.push(...fTree)
+        keys.push(...fKeys)
+      }
+    }
+  })
+
+  return {
+    tree,
+    keys,
+  }
+}
+
+export const getFormInput = (props: string | any): FormRender => {
+  let baseProps: any = {
+    allowClear: true,
+    maxLength: 100,
+  }
+  if (typeof props === 'string') {
+    baseProps.placeholder = props
+  } else {
+    baseProps = {
+      ...baseProps,
+      ...props,
+    }
+  }
+  return {
+    type: 'a-input',
+    props: baseProps,
+  }
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "allowJs": true,
+    "outDir": "dist",
+    "declaration": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}