@hoenergy/hoenergy-template-pc 1.0.0

package/src/components/data/table/FormaxTable/src/components/settings/ColumnSetting.vue

@@ -0,0 +1,248 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <div class="cursor-pointer table-toolbar-right-icon flex items-center">
+        <n-popover trigger="click" class="toolbar-popover" placement="bottom-end">
+          <template #trigger>
+            <n-icon size="18">
+              <SettingOutlined />
+            </n-icon>
+          </template>
+          <template #header>
+            <div class="table-toolbar-inner-popover-title flex flex-row ">
+              <n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll">
+                {{ $at('列展示') }}
+              </n-checkbox>
+              <n-button text type="info" size="small" class="mt-1 ml-auto" @click="resetColumns">
+                {{ $at('重置') }}
+              </n-button>
+            </div>
+          </template>
+          <div class="table-toolbar-inner">
+            <!-- :class="{
+                  'table-toolbar-inner-checkbox-dark': getDarkTheme === true,
+                  'no-draggable': element.draggable === false,
+                }" -->
+            <n-checkbox-group v-model:value="checkList" @update:value="onChange">
+              <div v-for="element in columnsList" :key="element.key">
+                <div class="table-toolbar-inner-checkbox">
+                  <span class="drag-icon">
+                    <n-icon size="18">
+                      <DragOutlined />
+                    </n-icon>
+                  </span>
+                  <n-checkbox :value="element.key" :label="element.title" />
+                </div>
+              </div>
+            </n-checkbox-group>
+          </div>
+        </n-popover>
+      </div>
+    </template>
+    <span>{{ $at('列设置') }}</span>
+  </n-tooltip>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from 'vue'
+import { useTableContext } from '../../hooks/useTableContext'
+import { cloneDeep } from 'lodash-es'
+import { $at } from 'i18n-auto-extractor'
+import {
+  SettingOutlined,
+  DragOutlined,
+} from '@vicons/antd'
+
+export interface Options {
+  title: string;
+  key: string;
+  fixed?: boolean | 'left' | 'right';
+}
+
+export default defineComponent({
+  name: 'ColumnSetting',
+  components: {
+    SettingOutlined,
+    DragOutlined,
+  },
+  setup() {
+    const table: any = useTableContext()
+    const columnsList = ref<Options[]>([])
+    const cacheColumnsList = ref<Options[]>([])
+
+    const state = reactive({
+      selection: false,
+      checkAll: true,
+      checkList: [],
+      defaultCheckList: [],
+    })
+
+    const getSelection = computed(() => {
+      return state.selection
+    })
+
+    watchEffect(() => {
+      if (!table) return
+      const columns = table.getColumns()
+      if (columns.length) {
+        init()
+      }
+    });
+
+    //初始化
+    function init() {
+      if (!table) return
+      const columns: any[] = getColumns()
+      const checkList: any = columns.map((item) => item.key)
+      state.checkList = checkList
+      state.defaultCheckList = checkList
+      const newColumns = columns.filter((item) => item.key != 'action' && item.title != $at('操作'))
+      if (!columnsList.value.length) {
+        columnsList.value = cloneDeep(newColumns)
+        cacheColumnsList.value = cloneDeep(newColumns)
+      }
+    }
+
+    //切换
+    function onChange(checkList: any) {
+      if (state.selection) {
+        checkList.unshift('selection')
+      }
+      setColumns(checkList)
+    }
+
+    //设置
+    function setColumns(columns: any) {
+      if (!table) return
+      table.setColumns(columns)
+    }
+
+    //获取
+    function getColumns() {
+      if (!table) return []
+      const newRet: any[] = []
+      table.getColumns().forEach((item: any) => {
+        newRet.push({ ...item })
+      })
+      return newRet
+    }
+
+    //重置
+    function resetColumns() {
+      if (!table) return
+      state.checkList = [...state.defaultCheckList]
+      state.checkAll = true
+      const cacheColumnsKeys: any[] = table.getCacheColumns()
+      const newColumns = cacheColumnsKeys.map((item) => {
+        return {
+          ...item,
+          fixed: undefined,
+        }
+      })
+      setColumns(newColumns)
+      columnsList.value = newColumns
+    }
+
+    //全选
+    function onCheckAll(e: any) {
+      if (!table) return
+      const checkList = table.getCacheColumns(true)
+      if (e) {
+        setColumns(checkList)
+        state.checkList = checkList
+      } else {
+        setColumns([])
+        state.checkList = []
+      }
+    }
+
+    //勾选列
+    function onSelection(e: any) {
+      if (!table) return
+      const checkList = table.getCacheColumns()
+      if (e) {
+        checkList.unshift({ type: 'selection', key: 'selection' })
+        setColumns(checkList)
+      } else {
+        checkList.splice(0, 1)
+        setColumns(checkList)
+      }
+    }
+
+    return {
+      ...toRefs(state),
+      columnsList,
+      onChange,
+      onCheckAll,
+      onSelection,
+      resetColumns,
+      getSelection,
+      $at,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.table-toolbar {
+  &-inner-popover-title {
+    padding: 3px 0;
+  }
+
+  &-right {
+    &-icon {
+      margin-left: 12px;
+      font-size: 16px;
+      color: var(--text-color);
+      cursor: pointer;
+
+      :hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.table-toolbar-inner {
+  &-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 10px 14px;
+
+    &:hover {
+      background: rgba(19, 180, 151, 0.3);
+    }
+
+    .drag-icon {
+      display: inline-flex;
+      margin-right: 8px;
+      cursor: move;
+
+      &-hidden {
+        visibility: hidden;
+        cursor: default;
+      }
+    }
+
+    .ant-checkbox-wrapper {
+      flex: 1;
+
+      &:hover {
+        color: #1890ff !important;
+      }
+    }
+  }
+
+  &-checkbox-dark {
+    &:hover {
+      background: hsla(0, 0%, 100%, 0.08);
+    }
+  }
+}
+
+.toolbar-popover {
+  .n-popover__content {
+    padding: 0;
+  }
+}
+</style>

package/src/components/data/table/FormaxTable/src/const.ts

@@ -0,0 +1,11 @@
+export const DEFAULTPAGESIZE = 50
+
+export const APISETTING = {
+  pageField: 'pageNum',
+  sizeField: 'pageSize',
+  totalField: 'pages',
+  listField: 'list',
+  countField: 'total',
+}
+
+export const PAGESIZES = [10, 20, 50, 100]

package/src/components/data/table/FormaxTable/src/hooks/useColumns.ts

@@ -0,0 +1,147 @@
+import { ref, Ref, ComputedRef, unref, computed, watch, toRaw, h } from 'vue'
+import type { BasicColumn, BasicTableProps } from '../types/table'
+import { isEqual, cloneDeep } from 'lodash-es'
+import type { ActionItem } from '../types/tableAction'
+import { NTooltip } from 'naive-ui'
+
+const isArray = (val: unknown): val is any[] => Array.isArray(val)
+const isString = (val: unknown): val is string => typeof val === 'string'
+const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean'
+const isFunction = (val: unknown): val is (...args: any[]) => any =>
+  typeof val === 'function'
+
+export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
+  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<
+    BasicColumn[]
+  >
+  let cacheColumns = unref(propsRef).columns
+
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef))
+    handleActionColumn(propsRef, columns)
+    if (!columns) return []
+    return columns
+  })
+
+  function isIfShow(action: ActionItem): boolean {
+    const ifShow = action.ifShow
+    let show = true
+    if (isBoolean(ifShow)) {
+      show = ifShow
+    }
+    if (isFunction(ifShow)) {
+      show = ifShow(action)
+    }
+    return show
+  }
+
+  const renderTooltip = (trigger: any, content: any) => {
+    return h(NTooltip, null, {
+      trigger: () => trigger,
+      default: () => content,
+    })
+  }
+
+  const getPageColumns = computed(() => {
+    const pageColumns = unref(getColumnsRef)
+    const columns = cloneDeep(pageColumns)
+    return columns
+      .filter((column: any) => {
+        return isIfShow(column)
+      })
+      .map((column: any) => {
+        column.ellipsis =
+          typeof column.ellipsis === 'undefined' ? { tooltip: true } : false
+        return column
+      })
+  })
+
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns
+      cacheColumns = columns
+    }
+  )
+
+  function handleActionColumn(
+    propsRef: ComputedRef<BasicTableProps>,
+    columns: BasicColumn[]
+  ) {
+    const { actionColumn } = unref(propsRef)
+    if (!actionColumn) return
+    const actionCol: any = actionColumn
+    if (!actionCol.ellipsis) actionCol.ellipsis = false
+    !columns.find((col) => col.key === 'action') &&
+      columns.push({
+        ...(actionCol as any),
+      })
+  }
+
+  function setColumns(columnList: string[] | BasicColumn[]) {
+    const columns: any[] = cloneDeep(columnList as any)
+    if (!isArray(columns)) return
+
+    if (!columns.length) {
+      columnsRef.value = []
+      return
+    }
+    const cacheKeys = cacheColumns.map((item) => item.key)
+    if (!isString(columns[0])) {
+      columnsRef.value = columns
+    } else {
+      const newColumns: any[] = []
+      cacheColumns.forEach((item) => {
+        if (columnList.includes(item.key)) {
+          newColumns.push({ ...item })
+        }
+      })
+      if (!isEqual(cacheKeys, columns)) {
+        newColumns.sort((prev, next) => {
+          return cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key)
+        })
+      }
+      columnsRef.value = newColumns
+    }
+  }
+
+  function getColumns(): BasicColumn[] {
+    const columns = toRaw(unref(getColumnsRef))
+    return columns.map((item: any) => {
+      return {
+        ...item,
+        title: item.title,
+        key: item.key,
+        fixed: item.fixed || undefined,
+      }
+    })
+  }
+
+  function getCacheColumns(isKey?: boolean): any[] {
+    return isKey ? cacheColumns.map((item) => item.key) : cacheColumns
+  }
+
+  function setCacheColumnsField(
+    key: string | undefined,
+    value: Partial<BasicColumn>
+  ) {
+    if (!key || !value) {
+      return
+    }
+    cacheColumns.forEach((item) => {
+      if (item.key === key) {
+        Object.assign(item, value)
+        return
+      }
+    })
+  }
+
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    setCacheColumnsField,
+    setColumns,
+    getColumns,
+    getPageColumns,
+  }
+}

package/src/components/data/table/FormaxTable/src/hooks/useDataSource.ts

@@ -0,0 +1,238 @@
+import {
+  ComputedRef,
+  Ref,
+  computed,
+  onMounted,
+  ref,
+  unref,
+  watch,
+  watchEffect,
+} from 'vue'
+import { APISETTING } from '../const'
+import type { PaginationProps } from '../types/pagination'
+import type { BasicTableProps } from '../types/table'
+
+const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean'
+const isFunction = (val: unknown): val is (...args: any[]) => any =>
+  typeof val === 'function'
+const isArray = (val: unknown): val is any[] => Array.isArray(val)
+const isObject = (val: unknown): val is Record<string, any> =>
+  val !== null && typeof val === 'object'
+
+export function useDataSource(
+  propsRef: ComputedRef<BasicTableProps>,
+  {
+    getPaginationInfo,
+    setPagination,
+    setLoading,
+    tableData,
+  }: {
+    getPaginationInfo: ComputedRef<boolean | PaginationProps>
+    setPagination: (info: Partial<PaginationProps>) => void
+    tableData: Ref<any[]>
+    setLoading: (loading: boolean) => void
+  },
+  emit: {
+    (
+      event:
+        | 'fetch-success'
+        | 'fetch-error'
+        | 'update:checked-row-keys'
+        | 'edit-end'
+        | 'edit-cancel'
+        | 'edit-row-end'
+        | 'edit-change',
+      ...args: any[]
+    ): void
+    (arg0: string, arg1: unknown): void
+  }
+) {
+  const dataSourceRef = ref<any[]>([])
+
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef)
+  })
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource }: any = unref(propsRef)
+      dataSource && (dataSourceRef.value = dataSource)
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  const getRowKey = computed(() => {
+    const { rowKey }: any = unref(propsRef)
+    return rowKey
+      ? typeof rowKey === 'function'
+        ? rowKey
+        : (record: any) => record[rowKey]
+      : () => {
+          return 'key'
+        }
+  })
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef)
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef)
+    }
+    return unref(dataSourceRef)
+  })
+  const getKeysList = computed(() => {
+    const rowKey = unref(getRowKey)
+    const dataSource = unref(getDataSourceRef)
+    let keysList: any = []
+    if (dataSource && dataSource.length > 0) {
+      keysList = getIdFromTreeArray(dataSource, rowKey)
+    }
+    return keysList
+  })
+  //获取数组中得key值
+  function getIdFromTreeArray(treeArray: any, rowKey: any) {
+    const { canExpand }: any = unref(propsRef)
+    let ids: any = []
+    function traverse(array: any) {
+      array.forEach((item: any) => {
+        if (item.children) {
+          traverse(item.children)
+        }
+        ids.push(rowKey(item))
+      })
+    }
+    if (canExpand) {
+      traverse(treeArray)
+    }
+    return ids
+  }
+  async function fetch(opt?: any) {
+    try {
+      setLoading(true)
+      const { request, pagination, beforeRequest, afterRequest }: any =
+        unref(propsRef)
+      if (!request) return
+      //组装分页信息
+      const pageField: any = APISETTING.pageField
+      const sizeField: any = APISETTING.sizeField
+      const totalField: any = APISETTING.totalField
+      const listField: any = APISETTING.listField
+      const itemCount: any = APISETTING.countField
+      let pageParams: any = {}
+      const { page = 1, pageSize = 10 } = unref(
+        getPaginationInfo
+      ) as PaginationProps
+
+      if (
+        (isBoolean(pagination) && !pagination) ||
+        isBoolean(getPaginationInfo)
+      ) {
+        pageParams = {}
+      } else {
+        pageParams[pageField] = (opt && opt[pageField]) || page
+        pageParams[sizeField] = pageSize
+      }
+
+      let params = {
+        ...pageParams,
+        ...opt,
+      }
+      if (beforeRequest && isFunction(beforeRequest)) {
+        // The params parameter can be modified by outsiders
+        params = (await beforeRequest(params)) || params
+      }
+      const res: any = await request(params)
+      if (res) {
+        const resultTotal = res[totalField]
+        const currentPage = res[pageField]
+        const total = res[itemCount]
+        // let results = null
+        // if (isObject(res)) {
+        //   results = res[listField] ? res[listField] : [res]
+        // } else if (isArray(res)) {
+        //   results = res[listField] ? res[listField] : res
+        // }
+        // 如果数据异常，需获取正确的页码再次执行
+        if (resultTotal) {
+          const currentTotalPage = Math.ceil(total / pageSize)
+          if (page > currentTotalPage) {
+            setPagination({
+              page: currentTotalPage,
+              itemCount: total,
+            })
+            return await fetch(opt)
+          }
+        }
+        let resultInfo = null
+        if (isObject(res)) {
+          resultInfo =
+            res[listField] || res[listField]?.length === 0
+              ? res[listField]
+              : [res]
+        } else if (isArray(res)) {
+          resultInfo = res[listField] ? res[listField] : res
+        }
+        // let resultInfo = res[listField] ? res[listField] : [res];
+        if (afterRequest && isFunction(afterRequest)) {
+          // can modify the data returned by the interface for processing
+          resultInfo = (await afterRequest(resultInfo)) || resultInfo
+        }
+        dataSourceRef.value = resultInfo
+        setPagination({
+          page: currentPage,
+          pageCount: resultTotal,
+          itemCount: total,
+        })
+        if (opt && opt[pageField]) {
+          setPagination({
+            page: opt[pageField] || 1,
+          })
+        }
+        emit('fetch-success', {
+          items: unref(resultInfo),
+          resultTotal,
+        })
+      } else {
+        return
+      }
+    } catch (error) {
+      emit('fetch-error', error)
+      dataSourceRef.value = []
+      setPagination({
+        pageCount: 0,
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      fetch()
+    }, 16)
+  })
+
+  function setTableData(values: any) {
+    dataSourceRef.value = values
+  }
+
+  function getDataSource(): any[] {
+    return getDataSourceRef.value
+  }
+
+  async function reload(opt?: any) {
+    await fetch(opt)
+  }
+
+  return {
+    fetch,
+    getRowKey,
+    getDataSourceRef,
+    getDataSource,
+    setTableData,
+    getKeysList,
+    reload,
+  }
+}

package/src/components/data/table/FormaxTable/src/hooks/useLoading.ts

@@ -0,0 +1,21 @@
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+export function useLoading(props: ComputedRef<BasicTableProps>) {
+  const loadingRef = ref(unref(props).loading);
+
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
+    }
+  );
+
+  const getLoading = computed(() => unref(loadingRef));
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+
+  return { getLoading, setLoading };
+}