eta_mobile_front/src/CustomElement/EtaTable.ce.vue

<script setup>
import {ref,nextTick} from 'vue'
import {infoByCode} from './api/getData.js'
import {parseQueryString} from "./utils/index"

const props=defineProps({
    src:'',
    width:'',
    height:'',
    style:''
})

const params=parseQueryString(props.src)
const info=ref({})
const showData = ref(false);

const sheetRef=ref(null)
const sheetFooter=ref(null)

const setDefaultSource=(sourceText)=>{
  return JSON.stringify({
    isShow: true,
    text: sourceText,
    color: "#606266",
    fontSize: 9
  })
}

async function getTableData(){
    const res = await infoByCode({  UniqueCode: params.code, FromScene: Number(params.fromScene||'') });
    if(res.Ret !== 200) return

    info.value=res.Data
    if(!info.value.SourcesFrom){
        info.value.SourcesFrom = res.Data.ExcelSource?setDefaultSource(res.Data.ExcelSource||''):''
    }

    showData.value = true;
    nextTick(()=>{
        console.log(sheetRef.value.clientWidth);
        sheetFooter.value && (sheetFooter.value.style.maxWidth=sheetRef.value?.clientWidth+'px')
    })
}

getTableData()
</script>

<template>
    <div 
        v-if="showData"
        class="sheet-show-wrapper"  
        ref="sheetRef"
    >
        <h3 class="title">{{info.ExcelName}}</h3>
        
        <div class="table-wrapper">
            <table 
                cellpadding="0" 
                cellspacing="0" 
                :style="`font-size: ${info.Config?.FontSize||12}PX`"
            >
                <tbody>
                <tr 
                    v-for="(item,index) in info.TableInfo?.TableDataList"
                    :key="index"
                >
                    <td 
                    :class="['data-cell',{
                        'one-bg':(index+1)%2&&index>0,
                        '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="`
                        color: ${cell.fc};
                        font-weight: ${cell.bl ? 'bold' : 'normal'};
                        font-style: ${cell.it ? 'italic' : 'normal'};
                        background: ${cell.bg};
                    `"
                    >
                    <div class="split-word" v-if="cell.ct.s">
                        <span 
                        v-for="(word,word_index) in cell.ct.s" 
                        :key="`${index}_${cell_index}_${word_index}`"
                        :style="`
                            color: ${word.fc};
                            font-weight: ${word.bl ? 'bold' : 'normal'};
                            font-style: ${word.it ? 'italic' : 'normal'};
                        `"
                        >{{word.v}}</span>
                    </div>
                    <div v-else>{{cell.m}}</div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sheet-source" ref="sheetFooter"
            v-if="info.SourcesFrom&&JSON.parse(info.SourcesFrom).isShow"
            :style="`
                color: ${ JSON.parse(info.SourcesFrom).color };
                font-size: ${ JSON.parse(info.SourcesFrom).fontSize }px;
            `"
        >
          source：<em>{{ JSON.parse(info.SourcesFrom).text}}</em>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.sheet-show-wrapper {
  max-width: 1200PX;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #fff;
  .title {
    font-size: 17PX;
    font-weight: normal;
    padding: 0 10PX;
    margin: 0 0 8PX 0;
  }
.table-wrapper {
    max-width: calc(100vw - 20PX);
    margin: 0 auto;
    overflow: auto;
    table {
        width: 100%;
        font-size: 14PX;
        color: #333;
        table-layout: auto;
        td,
        th {
            width: auto;
            height: auto;
            padding: 0.4em 0;
            word-break: break-all;
            word-wrap: break-word;
            line-height: 1.2em;
            border: 1PX solid #dcdfe6;
            text-align: center;
            background-color: #fff;
            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; }
        }
    }
}
.sheet-source{
    margin-top: 5PX;
    min-width: 150PX;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}
</style>