eta_chart_front/src/components/sheet.vue

<script setup lang='ts'>
import { PropType,computed,ref, nextTick } from 'vue';
import { isMobile } from '@/utils/utils';
import { useResizeTable } from '@/hooks/sheet/useResizeTable.js';
import { useRoute } from 'vue-router';

const route = useRoute();
const isCanDrag = computed(() => { //在研报内的研报id
  return route.query.sourceId ? true :false
});

const tableRef = ref(null)
const {
  columnsWArr,
  rowsHArr,
  handleMouseDown,
  handleMouseMove,
  handleMouseOut,
  initTableCellsWid,
  getSize,
  SheetFFType,
} = useResizeTable(tableRef)

const props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    required: true
  },
  config: {
    type: Object
  },
  sceneConfig: {  //应用存储信息
    type: Object
  }
})

//手机端pc端又要不同样式
const dynamicSty = computed(()=>{
  return isMobile() ? 'mobile-sty' : 'pc-sty';
})

const HtObj=ref({
  0:"center",
  1:'left',
  2:'right'
})

const handleCellStyle = (cell) : string => {
    return `
      color: ${cell.fc};
      font-weight: ${cell.bl ? 'bold' : 'normal'};
      font-style: ${cell.it ? 'italic' : 'normal'};
      text-align: ${HtObj.value[cell.HorizontalType]};
      font-family: ${handleFF(cell.ff)};
    `
};

const handleFF = (ff:string|number) : string => {
  return ff ? (typeof ff == 'number' ? SheetFFType[ff] :  ff) : ''
}

initTableCellsWid('init',props.sceneConfig)
</script>

<template>
<div :class="['table-wrapper',dynamicSty ]">
  <table
    cellpadding="0" 
    cellspacing="0" 
    ref="tableRef"
    :class="config.Watermark?'background-watermark':'no-water'"
    :style="{'font-size':(config.FontSize||12)+'px',backgroundImage: 'url('+config.Watermark+')'}"
  >
    <tbody>
      <tr 
        v-for="(item,index) in props.data"
        :key="index"
        :style="`height:${getSize(index,'height')}`"
      >
        <td 
          :class="['data-cell',{
            'one-bg':(index+1)%2&&index>0&&!config.Watermark,
            'tow-bg': (index+1)%2!==0&&index>0,
            'head-column': index === 0,
          }]"
          v-for="(cell,cell_index) in item"
          :key="cell_index"
          :colspan="cell.mc.cs||1"
          :rowspan="cell.mc.rs||1"
          :style="`
            width:${getSize(cell_index,'width')};
            background: ${cell.bg};
            font-size: ${props.config.FontSize||cell.fs||12}px;
            ${!cell.ct.s ? handleCellStyle(cell) : ''}
          `"
          @mousemove="e =>isCanDrag && handleMouseMove(e,index,cell_index)"
          @mousedown="e =>isCanDrag && handleMouseDown(e,index,cell_index)"
        >
          <!-- 单元格拆分 -->
          <div class="split-word" v-if="cell.ct.s" :style="`text-align: ${HtObj[cell.HorizontalType]};`">
            <span 
              v-for="(word,word_index) in cell.ct.s" 
              :key="`${index}_${cell_index}_${word_index}`"
              :style="handleCellStyle(word)"
            >{{word.v}}</span>
          </div>
          <div v-else 
            :style="`text-decoration:${cell.un?'underline':cell.cl?'line-through':'normal'};`">{{cell.m}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<style lang='less' scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #888;
}
::-webkit-scrollbar-corner {
  background: #666;
}
.table-wrapper {
  max-width: calc(100vw - 20px);
  margin: 0 auto;
  // margin-right: -5px;
  overflow: auto;
}
table {
  width: 100%;
  font-size: 14px;
  color: #333;
  border-collapse: collapse;
  td,
  th {
    // min-width: 120px;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.2em;
    border: 1px solid #dcdfe6;
    // height: 40px;
    text-align: center;
    // border-left: none;
    // border-top: none;
    &:first-child {
			border-left: 1px solid #dcdfe6;
		}
  }

  .data-cell{
    color: #333;
    &.one-bg {
      background-color: #EFEEF1;
    }
    &.two-bg {
      background-color: #fff;
    }
  }

  .thead-sticky {
    position: sticky;
    top: 0;
  }

  .head-column {
    background-color: #505B78;
    color: #fff;
  }
  .split-word {
    span { display: inline; }
  }
}

.no-water{
  td,
  th {
    background-color: #fff;
  }
  .head-column {
    background-color: #505B78;
    color: #fff;
  }
}

.pc-sty table {
  table-layout: auto;
  td,th {
    width: auto;
    height: auto;
    padding: 0.4em 0;
  }
}

.mobile-sty table {
  table-layout: auto;
  td,th {
    min-width: 120px;
    height: 40px;
  }
}
.background-watermark{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
</style>