vft 0.0.1

package/src/app/table/demos/index.vue

@@ -0,0 +1,453 @@
+<!--eslint-disable-->
+<script setup lang="tsx">
+import { addUnit } from '@vri/utils';
+import { ConfigProvider, PresudoInsert as VriPresudoInsert, Table as VriTable } from '../..';
+import { Empty } from '../../empty/types';
+import { ColumnsProps } from '../types';
+
+interface Props {
+  /** 年份数据 */
+  yearsData?: number[];
+}
+
+const { yearsData = [2021, 2020, 2019, 2018, 2017, 2016, 2015] } = defineProps<Props>();
+
+const tableData: any[] = $ref([
+  {
+    name: '碳排放量碳排放量碳碳排放量碳排放量碳',
+    unit: ' ',
+    level: 2
+  },
+  {
+    name: '碳排放总量(范围一、二)',
+    unit: '吨CO2e',
+    values: [
+      {
+        year: 2021,
+        value: '159,540,000.00'
+      },
+      {
+        year: 2020,
+        value: '167,440,000.00'
+      },
+      {
+        year: 2019
+      }
+    ]
+  },
+  {
+    name: '碳排放量(范围一)',
+    unit: '碳排放总量(范围一、二)碳排放总量(范围一、二)碳排放总量(范围一、二)',
+    values: [
+      {
+        year: 2021,
+        value: '121,390,000.00'
+      },
+      {
+        year: 2020,
+        value: '127,570,000.00'
+      },
+      {
+        year: 2019,
+        value: '132,170,000.00'
+      }
+    ]
+  },
+  {
+    name: '碳排放强度',
+    unit: ' ',
+    level: 2
+  },
+  {
+    name: '单位营收碳排放量(范围一、二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '610.25'
+      },
+      {
+        year: 2020,
+        value: '865.84'
+      },
+      {
+        year: 2019,
+        value: '691.67'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范围一)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '464.32'
+      },
+      {
+        year: 2020,
+        value: '659.67'
+      },
+      {
+        year: 2019,
+        value: '525.15'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范77围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(66范围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范55围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范44围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范33围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范22围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范11围二)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范围二11)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  },
+  {
+    name: '单位营收碳排放量(范围二331111111)',
+    unit: '千克CO2e/万元',
+    values: [
+      {
+        year: 2021,
+        value: '145.93'
+      },
+      {
+        year: 2020,
+        value: '206.17'
+      },
+      {
+        year: 2019,
+        value: '166.52'
+      }
+    ]
+  }
+]);
+
+let columns = $ref<ColumnsProps[]>([
+  {
+    title: '指标指标指标指标指标指标指标指标指标指标指标',
+    fixed: true,
+    width: 120,
+    sorter: true,
+    // sortDirection: 'asc',
+    align: 'left',
+    dataIndex: 'name',
+    render: (text, record, index) => {
+      // 第一层大标题
+      if (record.level === 1) {
+        return (
+          <>
+            <div class={{ placeholder: !!index }}></div>
+            <div class={['h-21px', 'mt-12px']}>
+              <VriPresudoInsert
+                class={['title', 'absolute ml-[-13px]']}
+                text={text}
+                prseudoCfg={{
+                  color: '#15b4f1',
+                  width: 4,
+                  distance: 9
+                }}
+              />
+            </div>
+          </>
+        );
+      }
+      // 小标题
+      else if (record.level === 2) {
+        return <div class="sub-title">{text}</div>;
+      }
+      return text;
+    }
+  },
+  {
+    title: '单位单位单位单位单位单位单位单位单位单位单位单位',
+    align: 'left',
+    sorter: true,
+    dataIndex: 'unit',
+    cellClassName: 'unit-cell'
+  },
+  {
+    title: '单位单位单位单位单位单位',
+    align: 'left',
+    dataIndex: 'unit',
+    cellClassName: 'unit-cell'
+  }
+]);
+
+yearsData.forEach((item) => {
+  columns.push({
+    title: item + '年' + item + '年' + item + '年' + item + '年',
+    align: 'right',
+    render: (_, record) => {
+      if ([1, 2].includes(record?.level)) {
+        return '';
+      }
+      const data = record?.values?.filter((subItem) => {
+        return subItem.year === item;
+      });
+      return data?.[0]?.value || '-';
+    }
+  });
+});
+
+const tableInitStyle = {
+  // tableHeight: addUnit(800, true),
+
+  theadThHeight: '32px',
+  theadBackground: '#f9f9f9',
+  theadPadding: '7.5px 10px',
+  theadFontSize: '13px',
+  theadColor: '#111',
+
+  tbodyTrHeight: addUnit(100, true) as string,
+  tbodyBackground: '#fff',
+  tbodyPadding: '7.5px 10px',
+  tbodyFontSize: '14px',
+  tbodyColor: '#111',
+  tbodyLineClamp: 4
+};
+
+function onSortChange(data) {
+  console.log(data, '======-');
+}
+
+let test = $ref();
+</script>
+
+<template>
+  <!--<div id="test" ref="test" class="w-90vw ml-5vw border border-red-700 h-500px overflow-auto">-->
+  <button @click="tableData = []">测试</button>
+  <config-provider :themeVars="tableInitStyle" class="h-full">
+    <vri-table
+      headerSticky
+      :autoSize="false"
+      emptyPlaceholder="--"
+      @sortChange="onSortChange"
+      :tableData="tableData"
+      :columns="columns"
+      :emptyCfg="{
+        img: Empty.NO_SEARCH
+      }"
+    >
+      <template v-if="yearsData?.length > 2" #thead-right>
+        <span class="showAngle" />
+      </template>
+    </vri-table>
+  </config-provider>
+  <!--</div>-->
+</template>
+
+<style scoped lang="less">
+#test {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+:deep(.vri-table) {
+  .title {
+    white-space: nowrap;
+    font-weight: bold;
+    font-size: 16px;
+    color: #000;
+  }
+
+  .vri-table__tbody__left {
+    .vri-table__tbody__td {
+      padding: 7.5px 0 7.5px 13px !important;
+    }
+  }
+
+  .sub-title {
+    width: 130px;
+    white-space: nowrap;
+    color: #ee5a00;
+    font-weight: 400;
+    font-size: 15px;
+  }
+
+  .placeholder {
+    min-width: 100% !important;
+    width: 100vw;
+    //position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 8px;
+      display: block;
+      background: #fafafa;
+      left: 0;
+    }
+  }
+
+  .unit-cell {
+    font-size: 12px !important;
+  }
+
+  .showAngle {
+    content: '';
+    background: url('./rightAngle.png');
+    position: absolute;
+    right: 0.04rem;
+    width: 0.12rem;
+    height: 0.16rem;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+}
+</style>

package/src/app/table/header.vue

@@ -0,0 +1,203 @@
+<script setup lang="tsx">
+import { addUnit, createNamespace } from '@vri/utils';
+import type { ColumnsProps } from './types';
+
+interface Props {
+  /** 表头数据 */
+  columns: ColumnsProps[];
+}
+
+const { columns } = defineProps<Props>();
+
+const emit = defineEmits(['SortChange']);
+
+const [name, bem] = /* hoist-static*/ createNamespace('thead');
+
+defineOptions({
+  name
+});
+
+let theadRight = ref();
+
+// const [thNoWidthRefs, setThNoWidthRefs] = useRefs();
+
+const slots = useSlots();
+
+const _style = $computed(() => {
+  return (item) => {
+    const alignType = item?.align === 'left' ? 'flex-start' : item?.align === 'right' ? 'flex-end' : 'center';
+    const _align = { justifyContent: alignType || 'center', textAlign: item?.align || 'center' };
+    return item.width ? { width: addUnit(item.width, true), ..._align } : _align;
+  };
+});
+
+// 当前排序的索引
+const activeIndex = $computed(() => {
+  const _columns = columns as ColumnsProps[] & { activeIndex?: number };
+  return _columns?.activeIndex
+    ? _columns?.activeIndex
+    : columns.findIndex((item) => {
+        return item.sorter === true;
+      });
+});
+
+const sortClass = $computed(() => {
+  return (item, index) => {
+    return ['translate-x-2px', bem('sort'), { 'rotate-180': item.sortDirection === 'asc' }, activeIndex === index ? 'opacity-100' : 'opacity-0'];
+  };
+});
+
+// 排序事件
+function onSortChange(item, index, columns) {
+  item.sortDirection = item.sortDirection === 'asc' ? 'desc' : 'asc';
+  columns.activeIndex = index;
+  columns.scrollLeft = theadRight.value.scrollLeft;
+  emit('SortChange', {
+    sortDirection: item.sortDirection,
+    dataIndex: item?.dataIndex,
+    index,
+    item
+  });
+}
+
+// 渲染表头单元格
+const renderItem = (isFixed?) => {
+  return (
+    <div class={bem('tr')}>
+      {columns.map((item, index) => {
+        return (isFixed && item.fixed) || (!isFixed && !item.fixed) ? (
+          <span
+            class={[bem('th'), item?.headerClassName, { [bem('th__custom_width') as string]: !item.width }, { 'translate-x-7px': item?.sorter }]}
+            key={index}
+            style={_style(item)}
+            onClick={item?.sorter ? () => onSortChange(item, index, columns) : () => {}}
+          >
+            <span class={bem('cell')}>{item.title}</span>
+            {item?.sorter ? <span class={sortClass(item, index)}>&emsp;</span> : null}
+          </span>
+        ) : null;
+      })}
+    </div>
+  );
+};
+
+// 表头内容
+const renderHeader = () => {
+  return (
+    <div id={`${namespace}-thead`} class={bem()}>
+      <div class={bem('left')}>{renderItem(true)}</div>
+      <div ref={theadRight} class={bem('right')}>
+        {renderItem()}
+      </div>
+      {slots.default?.()}
+    </div>
+  );
+};
+
+// function handleScroll(e) {
+//   console.log('currentScrollName', currentScrollName);
+//   const tbody = document.querySelector(`#${namespace}-tbody .${namespace}-table__tbody__right`);
+//   if (tbody && currentScrollName === 'thead') {
+//     console.log(e.target.scrollLeft, tbody.scrollLeft);
+//     tbody.scrollLeft = e.target.scrollLeft;
+//   }
+// }
+
+defineRender(() => {
+  return renderHeader();
+});
+
+defineExpose({
+  theadRight
+});
+</script>
+
+<style lang="less">
+@prefix-cls: ~'@{pro-namespace}-thead';
+@prefix-var: ~'--@{prefix-cls}';
+@prefix-var-table: ~'--@{pro-namespace}-table';
+
+body {
+  @{prefix-var}-height: 40px;
+  @{prefix-var}-background: white;
+  @{prefix-var}-color: black;
+  @{prefix-var}-font-size: 14px;
+  @{prefix-var}-font-weight: 500;
+  @{prefix-var}-padding: 10px 5px;
+  @{prefix-var}-line-clamp: 4;
+  @{prefix-var}-border-bottom-color: #eee;
+  @{prefix-var}-show-border-bottom: none;
+}
+
+.@{prefix-cls} {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  background: var(~'@{prefix-var}-background');
+  box-sizing: border-box;
+
+  &::after {
+    display: var(~'@{prefix-var}-show-border-bottom');
+    .hairline-bottom(var(~'@{prefix-var}-border-bottom-color'));
+  }
+
+  .@{prefix-cls}__right {
+    flex: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+
+    .@{prefix-cls}__th:last-child {
+      padding-right: var(~'@{prefix-var-table}-last-col-padding-right');
+    }
+  }
+
+  .@{prefix-cls}__left {
+    box-sizing: border-box;
+
+    .@{prefix-cls}__th:first-child {
+      padding-left: var(~'@{prefix-var-table}-first-col-padding-left');
+    }
+  }
+
+  .@{prefix-cls}__tr {
+    display: flex;
+    color: var(~'@{prefix-var}-color');
+    font-size: var(~'@{prefix-var}-font-size');
+    font-weight: var(~'@{prefix-var}-font-weight');
+
+    .@{prefix-cls}__th {
+      box-sizing: border-box;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      padding: var(~'@{prefix-var}-padding');
+      width: var(~'@{prefix-var-table}-base-th-width');
+
+      .@{prefix-cls}__cell {
+        word-break: break-all;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(~'@{prefix-var}-line-clamp');
+        //width: 100%;
+      }
+    }
+
+  }
+
+  .@{prefix-cls}__sort {
+    display: inline-block;
+    width: 7px;
+    height: 10px;
+    background: url(./assets/sort_triangle.png) no-repeat;
+    background-size: cover;
+  }
+}
+</style>