@hoenergy/hoenergy-template-pc 1.0.0

package/src/components/data/table/FormaxTable/src/Table.vue

@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <div class="table-toolbar">
+      <!--顶部左侧区域-->
+      <div v-if="title || $slots.tableTitle" class="flex items-center table-toolbar-left pb-[16px]">
+        <template v-if="title">
+          <div class="table-toolbar-left-title">
+            {{ title }}
+            <n-tooltip trigger="hover" v-if="titleTooltip">
+              <template #trigger>
+                <n-icon size="18" class="ml-1 text-gray-400 cursor-pointer">
+                  <QuestionCircleOutlined />
+                </n-icon>
+              </template>
+              {{ titleTooltip }}
+            </n-tooltip>
+          </div>
+        </template>
+        <slot name="tableTitle"></slot>
+      </div>
+
+      <div class="flex items-center table-toolbar-right pb-[16px]" v-if="toolbarShow">
+        <!--顶部右侧区域-->
+        <slot name="toolbar"></slot>
+
+        <!--斑马纹-->
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <div class="flex items-center table-toolbar-right-icon" @click="setStriped(isStriped)">
+              <n-icon size="18">
+                <PicCenterOutlined />
+              </n-icon>
+            </div>
+          </template>
+          <span>{{ $at('表格斑马纹') }}</span>
+        </n-tooltip>
+
+        <!--刷新-->
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <div class="flex items-center table-toolbar-right-icon" @click="reload">
+              <n-icon size="18">
+                <ReloadOutlined />
+              </n-icon>
+            </div>
+          </template>
+          <span>{{ $at('刷新') }}</span>
+        </n-tooltip>
+
+        <!--密度-->
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <div class="flex items-center table-toolbar-right-icon">
+              <n-dropdown @select="densitySelect" trigger="click" :options="densityOptions" v-model:value="tableSize">
+                <n-icon size="18">
+                  <ColumnHeightOutlined />
+                </n-icon>
+              </n-dropdown>
+            </div>
+          </template>
+          <span>{{ $at('密度') }}</span>
+        </n-tooltip>
+
+        <!--表格设置单独抽离成组件-->
+        <div class="flex items-center h-full">
+          <ColumnSetting />
+        </div>
+
+      </div>
+    </div>
+    <div class="s-table">
+      <n-data-table ref="tableElRef" v-bind="getBindValues" :striped="isStriped" :pagination="pagination"
+        :bordered="getBordered" @update:page="updatePage" @update:page-size="updatePageSize"
+        @update:expanded-row-keys="updateExpendKeys">
+        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+          <slot :name="item" v-bind="data"></slot>
+        </template>
+      </n-data-table>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {
+  ref,
+  defineComponent,
+  reactive,
+  unref,
+  toRaw,
+  computed,
+  toRefs,
+  onMounted,
+  nextTick,
+  watch
+} from 'vue';
+import { ReloadOutlined, PicCenterOutlined, ColumnHeightOutlined, QuestionCircleOutlined } from '@vicons/antd';
+import { createTableContext } from './hooks/useTableContext';
+import { $at } from 'i18n-auto-extractor';
+
+import ColumnSetting from './components/settings/ColumnSetting.vue';
+
+import { useLoading } from './hooks/useLoading';
+import { useColumns } from './hooks/useColumns';
+import { useDataSource } from './hooks/useDataSource';
+import { usePagination } from './hooks/usePagination';
+
+import { basicProps } from './props';
+import { BasicTableProps } from './types/table';
+import { isBoolean, useWindowSizeFn, getViewportOffset } from './utils';
+
+
+const densityOptions = [
+  {
+    type: 'menu',
+    label: $at('紧凑'),
+    key: 'small',
+  },
+  {
+    type: 'menu',
+    label: $at('默认'),
+    key: 'medium',
+  },
+  {
+    type: 'menu',
+    label: $at('宽松'),
+    key: 'large',
+  },
+];
+
+export default defineComponent({
+  name: 'FormaxTable',
+  components: {
+    ReloadOutlined,
+    ColumnHeightOutlined,
+    PicCenterOutlined,
+    ColumnSetting,
+    QuestionCircleOutlined,
+  },
+  props: {
+    ...basicProps,
+  },
+  emits: [
+    'fetch-success',
+    'fetch-error',
+    'update:checked-row-keys',
+    'edit-end',
+    'edit-cancel',
+    'edit-row-end',
+    'edit-change',
+  ],
+  setup(props, { emit }) {
+    const deviceHeight = ref(150);
+    const tableElRef = ref<any>(null);
+    const wrapRef = ref<any>(null);
+    let paginationEl: HTMLElement | null;
+    const isStriped = ref(false);
+    const tableData = ref<any[]>([]);
+    const innerPropsRef = ref<Partial<BasicTableProps>>();
+    const getProps = computed(() => {
+      return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+    });
+
+    const tableHeight = ref<any>(0)
+    const formNum = ref(1)
+    window.addEventListener('resize', () => {
+      tableHeight.value = document.getElementById('basicForm')?.offsetHeight
+    });
+    document.addEventListener("heightChange", e => {
+      setTimeout(() => {
+        tableHeight.value = document.getElementById('basicForm')?.offsetHeight
+      }, 10);
+
+    })
+    watch(() => tableHeight.value, (newVal) => {
+      formNum.value = (newVal / 58)
+    })
+
+    const { getLoading, setLoading } = useLoading(getProps);
+
+    const { getPaginationInfo, setPagination } = usePagination(getProps);
+
+    const { getDataSourceRef, getDataSource, getRowKey, reload, getKeysList } = useDataSource(
+      getProps,
+      {
+        getPaginationInfo,
+        setPagination,
+        tableData,
+        setLoading,
+      },
+      emit
+    );
+
+    const { getPageColumns, setColumns, getColumns, getCacheColumns, setCacheColumnsField } =
+      useColumns(getProps);
+
+    const state = reactive({
+      tableSize: unref(getProps as any).size || 'medium',
+      isColumnSetting: false,
+    });
+
+    //页码切换
+    function updatePage(page: any) {
+      setPagination({ page: page });
+      reload();
+    }
+
+    //分页数量切换
+    function updatePageSize(size: any) {
+      setPagination({ page: 1, pageSize: size });
+      reload();
+    }
+    function updateExpendKeys(keys: any) {
+      expandedKeysList.value = keys
+    }
+
+    //密度切换
+    function densitySelect(e: any) {
+      state.tableSize = e;
+    }
+
+    //选中行
+    function updateCheckedRowKeys(rowKeys: any) {
+      emit('update:checked-row-keys', rowKeys);
+    }
+
+    //获取表格大小
+    const getTableSize = computed(() => state.tableSize);
+
+    //组装表格信息
+    const expandedKeysList = ref([]);
+    const keyList = computed(() => getKeysList.value);
+    watch(keyList,
+      (v) => {
+        // expandedKeysList.value = v
+      }
+    )
+    const getBindValues = computed(() => {
+      const tableData = unref(getDataSourceRef);
+      const maxHeight = tableData.length ? `${unref(deviceHeight)}` : 'auto';
+      return {
+        ...unref(getProps),
+        loading: unref(getLoading),
+        columns: toRaw(unref(getPageColumns)),
+        rowKey: unref(getRowKey),
+        data: tableData,
+        size: unref(getTableSize),
+        expandedRowKeys: expandedKeysList,
+        remote: true,
+        defaultExpandAll: true,
+        'max-height': maxHeight,
+      };
+    });
+    //获取分页信息
+    const pagination = computed(() => toRaw(unref(getPaginationInfo)));
+
+    function setProps(props: Partial<BasicTableProps>) {
+      innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+    }
+
+    const setStriped = (value: boolean) => (isStriped.value = !value);
+
+    const tableAction = {
+      reload,
+      setColumns,
+      setLoading,
+      setProps,
+      getColumns,
+      getPageColumns,
+      getCacheColumns,
+      setCacheColumnsField,
+      emit,
+    };
+
+    const getCanResize = computed(() => {
+      const { canResize } = unref(getProps);
+      return canResize;
+    });
+
+    const getBordered = computed(() => {
+      const { bordered } = unref(getProps);
+      return !!bordered;
+    });
+
+    async function computeTableHeight() {
+      const table = unref(tableElRef);
+      if (!table) return;
+      if (!unref(getCanResize)) return;
+      const tableEl: any = table?.$el;
+      const headEl = tableEl.querySelector('.n-data-table-thead ');
+      const { bottomIncludeBody } = getViewportOffset(headEl);
+      const headerH = 64;
+      let paginationH = 2;
+      let marginH = 24;
+      if (!isBoolean(unref(pagination))) {
+        paginationEl = tableEl.querySelector('.n-data-table__pagination') as HTMLElement;
+        if (paginationEl) {
+          const offsetHeight = paginationEl.offsetHeight;
+          paginationH += offsetHeight || 0;
+        } else {
+          paginationH += 28;
+        }
+      }
+      let height =
+        bottomIncludeBody - (headerH + paginationH + marginH + (props.resizeHeightOffset || 0));
+      const maxHeight = props.maxHeight;
+      height = maxHeight && maxHeight < height ? maxHeight : height;
+      deviceHeight.value = height;
+    }
+
+    useWindowSizeFn(computeTableHeight, 280);
+
+    onMounted(() => {
+      nextTick(() => {
+        computeTableHeight();
+      });
+    });
+
+    createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+    return {
+      ...toRefs(state),
+      tableHeight,
+      formNum,
+      tableElRef,
+      getBindValues,
+      getDataSource,
+      densityOptions,
+      reload,
+      densitySelect,
+      updatePage,
+      updatePageSize,
+      updateExpendKeys,
+      updateCheckedRowKeys,
+      pagination,
+      tableAction,
+      setStriped,
+      isStriped,
+      getBordered,
+      $at
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  // padding: 0 0 16px 0;
+
+  &-left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  &-right {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+
+    &-icon {
+      margin-left: 12px;
+      font-size: 16px;
+      cursor: pointer;
+      color: var(--text-color);
+
+      :hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+::v-deep(.n-data-table-base-table) {
+  height: 95% !important;
+}
+
+// ::v-deep(.n-data-table-thead){
+//   border-radius: 20px ;
+// }
+::v-deep(.n-data-table-base-table-header) {
+  // border-radius: 8px 8px 0 0 !important;
+}
+
+.table-toolbar-inner-popover-title {
+  padding: 2px 0;
+}
+
+.s-table {
+  border-radius: 8px 8px 0 0;
+  // @include fetch-bg-color('s-table');
+  transition: all 0.4s;
+
+  ::v-deep(.n-data-table .n-data-table-th .n-data-table-resize-button::after) {
+    background-color: #6E7D8B;
+  }
+
+  ::v-deep(.n-data-table .n-data-table-th .n-data-table-resize-button:hover::after) {
+    background-color: var(--n-th-icon-color-active) !important;
+  }
+}
+</style>

package/src/components/data/table/FormaxTable/src/components/TableAction.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="tableAction">
+    <div class="flex items-center ">
+      <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+        <n-button v-if="!action.isPopConfirm" v-bind="action" class="mx-1 p-0">
+          {{ action.label }}
+          <template #icon v-if="action.hasOwnProperty('icon')">
+            <n-icon :component="action.icon" />
+          </template>
+        </n-button>
+
+        <n-popconfirm v-else @positive-click="action.confirm" @negative-click="action.cancel">
+          <template #trigger>
+            <n-button v-bind="action" class="mx-1">
+              {{ action.label }}
+              <template #icon v-if="action.hasOwnProperty('icon')">
+                <n-icon :component="action.icon" />
+              </template>
+            </n-button>
+          </template>
+          {{ action.title }}
+        </n-popconfirm>
+      </template>
+
+      <n-dropdown v-if="dropDownActions && getDropdownList.length" trigger="hover" :options="getDropdownList"
+        @select="select">
+        <slot name="more"></slot>
+        <n-button v-bind="getMoreProps" class="mx-1" v-if="!$slots.more" icon-placement="right">
+          <div class="flex items-center">
+            <span>{{ $at('更多') }}</span>
+            <n-icon size="14" class="ml-1">
+              <DownOutlined />
+            </n-icon>
+          </div>
+        </n-button>
+      </n-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, toRaw } from 'vue'
+import type { ActionItem } from '../../types/tableAction'
+import { DownOutlined } from '@vicons/antd'
+import { $at } from 'i18n-auto-extractor'
+
+const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean'
+const isFunction = (val: unknown): val is (...args: any[]) => any => typeof val === 'function'
+
+export default defineComponent({
+  name: 'TableAction',
+  components: { DownOutlined },
+  props: {
+    actions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+      required: true,
+    },
+    dropDownActions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+    },
+    style: {
+      type: String as PropType<string>,
+      default: 'button',
+    },
+    select: {
+      type: Function as PropType<Function>,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const actionType =
+      props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default'
+    const actionText =
+      props.style === 'button' ? undefined : props.style === 'text' ? true : undefined
+
+    const getMoreProps = computed(() => {
+      return {
+        text: actionText,
+        type: actionType,
+        size: 'small',
+      }
+    })
+
+    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 getDropdownList = computed(() => {
+      return (toRaw(props.dropDownActions) || [])
+        .filter((action) => isIfShow(action))
+        .map((action) => {
+          const { popConfirm } = action
+          return {
+            size: 'small',
+            text: actionText,
+            type: actionType,
+            ...action,
+            ...popConfirm,
+            onConfirm: popConfirm?.confirm,
+            onCancel: popConfirm?.cancel,
+          }
+        })
+    })
+
+    const getActions = computed(() => {
+      return (toRaw(props.actions) || [])
+        .filter((action) => isIfShow(action))
+        .map((action) => {
+          const { popConfirm } = action
+          return {
+            size: 'small',
+            text: actionText,
+            type: actionType,
+            ...action,
+            ...(popConfirm || {}),
+            onConfirm: popConfirm?.confirm,
+            onCancel: popConfirm?.cancel,
+            enable: !!popConfirm,
+          }
+        })
+    })
+
+    return {
+      getActions,
+      getDropdownList,
+      getMoreProps,
+      $at,
+    }
+  },
+})
+</script>
+<style lang="scss">
+.n-popconfirm__action {
+  .n-button {
+    height: 24px !important;
+  }
+}
+.n-popover:not(.n-popover--raw):not(.n-popover--scrollable):not(.n-popover--show-header-or-footer){
+  // border: 1px solid #636363!important;
+
+}
+.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow{
+    // background-color:#13B497!important;
+  }
+</style>