eta_mobile_front/src/views/sheetList/components/MixedSheet.vue

<script setup>
  // import Sheet from '@/components/Sheet.vue'
  import { ref, reactive, computed, onMounted, watch } from 'vue'
  const props = defineProps({
    TableInfo:{
      type:Object,
      default:{}
    }
  })

  const tableHeight = ref(0)
  const disabled = ref(true)
  const cellRef = ref([])
  const tableRef = ref(null);
  const tableData = reactive(props.TableInfo.TableData.Data);
  const freezeData = reactive(props.TableInfo.ExtraConfig.TableFreeze);

  const columnHeader = computed(() => {
    return getColumnHeaderCode(
      props.TableInfo.TableData.Data[0] ? props.TableInfo.TableData.Data[0].length : 0
    );
  });
  const rowHeader = computed(() => {
    let total_length = props.TableInfo.TableData.Data.length;
    return getRowHeaderCode(total_length);
  });
  const minRow = computed(() => {
    return Math.min(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartRow, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndRow)
  });
  const maxRow = computed(() => {
    return Math.max(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartRow, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndRow)
  });
  const maxCol = computed(() => {
    return Math.max(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartCol, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndCol)
  });
  const minCol = computed(() => {
    return Math.min(props.TableInfo.ExtraConfig.TableFreeze.FreezeStartCol, props.TableInfo.ExtraConfig.TableFreeze.FreezeEndCol)
  });

  // watch(
  //   () => props.TableInfo.TableData.Data,  // 假设 config.data 是 props.TableInfo 下的一个属性
  //   (newVal) => {
  //     nextTick(() => {
  //       tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
  //     });
  //   },
  //   { deep: true }
  // );

  //手机端pc端不同样式
  const dynamicSty = computed(()=>{
    return isMobile() ? 'mobile-sty' : 'pc-sty';
  })
  //判断是否是手机设备
 function isMobile() {
		// 判断是否是移动设备的正则表达式
		const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
	
		// 获取用户代理信息
		const userAgent = navigator.userAgent;
	
		// 使用正则表达式检查用户代理信息
		return mobileRegex.test(userAgent);
  }
  
  // 字母列标
  function getColumnHeaderCode(len) {
    let tag_arr = [];
    for(let i=0;i<len;i++) tag_arr.push(String.fromCharCode(65+i));
    return tag_arr;
  }

  // 行标
  function getRowHeaderCode(len) {
    let tag_arr = [];
    for(let i=0;i<len;i++) tag_arr.push(String(1+i));
    return tag_arr;
  }

   // 判断展示小数位数值还是原来的值
   function showCellValue(cell){
      // console.log(cell)
    let Value=''
    if("Decimal" in cell&&cell.Decimal!=-1){
      const multiplier = Math.pow(10, cell.Decimal);
      const cellValue=+cell.Value
      Value= cell.Decimal == 0 ? Math.round(cellValue) : Math.round(cellValue * multiplier) / multiplier;
    }else{
      Value=cell.ShowValue
    }
    return Value
  }

  // 初始化单元格横纵坐标
  function initIndex(rindex, cindex, row, col) {
    props.TableInfo.TableData.Data[rindex][cindex]["cIndex"] = cindex;
    props.TableInfo.TableData.Data[rindex][cindex]["rIndex"] = rindex;
    props.TableInfo.TableData.Data[rindex][cindex]["colIndex"] = col;
    props.TableInfo.TableData.Data[rindex][cindex]["rowIndex"] = row;
  }

  onMounted(() => {
    tableHeight.value = tableRef.value ? tableRef.value.offsetHeight : 35;
  })

  // 设置背景色及字体颜色
  function getShowCss(style, type = '') {
    const styleCss = JSON.parse(style);
    let color = styleCss.glObj ? styleCss.glObj["color"] : styleCss["color"];
    let BackgroundColor = styleCss.glObj
        ? styleCss.glObj["background-color"]
        : styleCss["background-color"];
    let obj = {
        color: color,
        "background-color": BackgroundColor,
        'text-align': styleCss.align ? styleCss.align : 'center',
        'width': styleCss.width ? styleCss.width + 'px' : '140px',
    }
    if (type == 'header') {
        obj = {
            'width': styleCss.width ? styleCss.width + 'px' : '140px',
        }
    }
    return obj;
  }
  // 是否展示小数
  function isShowDecimal(cell) {
    // // console.log(cell,111)
    const styleCss = cell.ShowStyle ? JSON.parse(cell.ShowStyle) : {};
    let tag = !isNaN(parseFloat(cell.ShowValue)) && isFinite(cell.ShowValue)
    return tag ? !isNaN(parseFloat(styleCss.decimal)) && isFinite(styleCss.decimal) : false
  }

  // 由于在showStyle做了背景色及字体颜色处理，解决判断冲突
  function isShowFormat(style, type = "css") {
    const styleCss = style ? JSON.parse(style) : {};
    let tag =
        type === "css"
            ? styleCss.pn > 0 || styleCss.pn < 0 || ["percent"].includes(styleCss.nt)
            : style.EdbInfoId;
    return tag;
  }
  // 展示小数
  function showDecimalValue(cell) {
    const styleCss = cell.ShowStyle ? JSON.parse(cell.ShowStyle) : {};
    let Value = ''
    if (styleCss.nt == 'percent' && cell.ShowFormatValue.indexOf('%') > -1) {
      if (styleCss.last == 'nt') {
        Value = commonDecimalValue(cell.ShowValue * 100, styleCss.decimal) + '%'
      } else {
        Value = (parseFloat(commonDecimalValue(cell.ShowValue, styleCss.decimal) * 100)) + '%'
      }
    } else {
      Value = parseFloat(commonDecimalValue(cell.ShowValue, styleCss.decimal)).toFixed(styleCss.decimal)
    }
    if (getDecimalPlaces(cell.ShowValue) < styleCss.decimal || styleCss.nt == 'percent') {
        Value = transDecimalPlace(cell.ShowValue + '', { ...styleCss, pn: styleCss.decimal - getDecimalPlaces(cell.ShowValue) + (styleCss.nt == 'percent'&&getDecimalPlaces(cell.ShowValue)!=0 ? 2 : 0) })
    }
    // console.log(cell)
    tableData[cell.rIndex][cell.cIndex].ShowFormatValue = Value;
    return Value
  }
  function commonDecimalValue(values, decimal) {
    const multiplier = Math.pow(10, decimal);
    return decimal == 0 ? Math.round(values) : Math.round(values * multiplier) / multiplier;
  }
  /* 计算小数点位数 */
  function getDecimalPlaces(numStr) {
    // 移除百分号，如果有的话
    numStr = numStr.replace('%', '');

    // 如果没有小数点，说明小数点位数为 0
    if (!numStr.includes('.')) {
      return 0;
    }

    // 获取当前小数点后的位数
    const decimalPlaces = numStr.split('.')[1].length;

    return decimalPlaces;
  }
  /* 增加减少小数点位数 */
function transDecimalPlace(str,{pn,nt}) {

  if(!isNumberVal(str)) return '';

  let s = str.replace(/%/,''),
      decimalPlaces = getDecimalPlaces(str),
      decimalNum=pn;

  //是否是原数字后设置百分比的
  let transPercent = (nt==='percent'&&!str.endsWith('%')) ? true : false;

  //原百分比设置为数字的
  let transDecimal = (nt==='number'&&str.endsWith('%')) ? true : false

  //后缀 百分号
  let suffix = ((str.endsWith('%')&&nt!=='number')||transPercent) ? '%' : '';

  let num = parseFloat(s);

  if(decimalPlaces===0) { //整数
    if(transPercent) {
      return decimalNum > 0 
        ? `${multiply(num,100)}.${'0'.repeat(decimalNum)}${suffix}`
        : `${multiply(num,100)}${suffix}`;
    }

    if(transDecimal) {
      return decimalNum > 0 
        ? `${divide(num,100)}${'0'.repeat(decimalNum)}`
        : `${divide(num,100)}`;
    }

    // 补零
    return decimalNum > 0 
      ? `${s}.${'0'.repeat(decimalNum)}${suffix}`
      : `${s}${suffix}`;
  }

  if(decimalNum > 0) {
    let addPointStr = `${s}${'0'.repeat(decimalNum)}`;
    
    return transPercent 
      ? `${parseFloat(multiply(num,100)).toFixed(decimalPlaces+decimalNum-2)}${suffix}`
      : transDecimal
        ? `${parseFloat(divide(num,100)).toFixed(decimalPlaces+decimalNum+2)}`
        : `${addPointStr}${suffix}`
  }else {
    let maxDecimal = Math.max(0,decimalNum+decimalPlaces);
    let maxDecimalPercent = Math.max(0,maxDecimal-2);

    return transPercent 
      ? `${parseFloat(multiply(num,100)).toFixed(maxDecimalPercent)}${suffix}`
      : transDecimal
        ? `${parseFloat(divide(num,100)).toFixed(maxDecimal+2)}`
        : `${parseFloat(num.toFixed(maxDecimal))}${suffix}`
  }
}
/* 判断值是否是一个数字或数字字符串 */
function isNumberVal(value) {
  let reg = /^[-]?(?:\d*\.?\d+|\d+%|\d*\.\d+%)$/;
  
  return reg.test(value);
}

  // 是否固定列
  function isWithinColRange (index) {
    return rowHeader.value[index] >= minCol.value &&  rowHeader.value[index] <= maxCol.value
  }
   // 获取某一列的宽度
  function getColumnHeaderWidth (index) {
    return cellRef.value && cellRef.value ? cellRef.value.offsetWidth : 104
  }
</script>

<template>
  <div class="sheet-show-wrapper">
    <div :class="['table-wrapper',dynamicSty ]" >
      <table
        border="0"
        class="table el-table__body"
        id="myTable"
        :style="disabled ? 'width:100%' : ''"
        ref="tableRef"
        style="position: relative;width: auto;"
      >
        <thead>
          <tr ref="rowTable">
            <!-- 行头 -->
            <th class="th-tg sm"  style="width:36px" ref="cellRef"></th>

            <!-- 列头 -->
            <th 
              :style="TableInfo.TableData.Data[0][index].ShowStyle?getShowCss(TableInfo.TableData.Data[0][index].ShowStyle,'header'):{}"
              v-for="(item, index) in columnHeader"
              :key="index"
              class="th-tg th-col"
              :data-cindex="item"
              :data-rindex="-1"
            >
              {{ item }}
            </th>
          </tr>
        </thead>

        <tbody>
          <tr ref="rowTable" v-for="(row, index) in TableInfo.TableData.Data" :key="index" :style="freezeData ? `top: ${(index- minRow+1)*tableHeight}px;` : ''" :class="freezeData && rowHeader[index] >= minRow &&  rowHeader[index] <= maxRow ? 'fix' : ''">
            <td
              v-for="(cell, cell_index) in row"
              :key="`${index}_${cell_index}`"
              :data-rindex="rowHeader[index]"
              :data-cindex="columnHeader[cell_index]"
              :data-datarindex="index"
              :data-datacindex="cell_index"
              :style="[cell.ShowStyle?getShowCss(cell.ShowStyle):{}, freezeData && isWithinColRange(cell_index) ? {left: (cell_index- minCol+1)*getColumnHeaderWidth(cell_index) + 'px'} : '']"
              :class="[freezeData && isWithinColRange(cell_index) ? 'fix-col' : '']"
              :initIndex="initIndex(index,cell_index,rowHeader[index],columnHeader[cell_index])"
              :data-key="cell.Uid"
              v-show="!cell.merData || cell.merData.type!=='merged'"
              :colspan="(cell.merData && cell.merData.type=='merge' && cell.merData.mer)?cell.merData.mer.colspan || 1:1"
              :rowspan="(cell.merData && cell.merData.type=='merge' && cell.merData.mer)?cell.merData.mer.rowspan || 1:1"
            >
            <!-- 插入单元格禁止编辑 -->
            <!-- [4,5,6,7,8].includes(cell.DataType)&&!cell.CanEdit -->
            <template 
              v-if="!cell.CanEdit
              ||disabled
              ||(cell.DataType===1&&[1,2].includes(cell.DataTimeType))"
            >
            <!-- 数字格式化显示 -->
            <span 
              v-if="cell.ShowStyle"
              :data-rindex="rowHeader[index]"
              :data-cindex="columnHeader[cell_index]"
              :data-datarindex="index"
              :data-datacindex="cell_index"
              :data-key="cell.Uid"
            >
              {{isShowDecimal(cell)?showDecimalValue(cell):isShowFormat(cell.ShowStyle)?cell.ShowFormatValue:cell.DataTime?cell.ShowValue:[8,7,6,5,1].includes(cell.DataType)?cell.ShowValue?cell.ShowValue:'-':cell.Value}}
            </span>

            <span
              :data-rindex="rowHeader[index]"
              :data-cindex="columnHeader[cell_index]"
              :data-datarindex="index"
              :data-datacindex="cell_index"
              :data-key="cell.Uid"
              v-else
            >{{ cell.ShowValue }}</span>
          </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>


    <div class="tool sheet-bottom">
      <div class="sheet-source" 
        v-if="TableInfo.SourcesFrom&&JSON.parse(TableInfo.SourcesFrom).isShow"
        :style="`
          color: ${ JSON.parse(TableInfo.SourcesFrom).color };
          font-size: ${ JSON.parse(TableInfo.SourcesFrom).fontSize }px;
        `"
      >
          source：<em>{{ JSON.parse(TableInfo.SourcesFrom).text}}</em>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.sheet-show-wrapper {
  max-width: 1200px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #fff;
  .tool{
    // text-align: right;
    margin-top: 5px;
    span{
        cursor: pointer;
    }
  }
  .sheet-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    padding: 0 10px;
    .sheet-source{
      width: 30%;
      min-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .right-btns {
      display: flex;
      align-items: center;
      gap:15px;
      color: #666;
    }
  }
}
</style>
<style scoped lang="scss">
.table td,th {
  width: 104px;
  min-width: 104px;
  height: 35px;
  background: #fff;
  text-align: center;
  word-break: break-all;
  border: none;
  outline-color: #dcdfe6;
  outline-style: solid;
  outline-width: 1px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;

  &.td-chose::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    outline: 0;
    border: 2px solid #0033FF;
    box-shadow: 0 0 5px rgba(73, 177, 249, .5)
  }
  // &.td-col-select::after {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   content: "";
  //   display: block;
  //   outline: 0;
  //   border: 1px solid rgb(24, 173, 24);
  //   border-bottom: none;
  //   border-top: none;
  // }
  // &.td-row-select::after {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   content: "";
  //   display: block;
  //   outline: 0;
  //   border: 1px solid rgb(24, 173, 24);
  //   border-left: none;
  //   border-right: none;
  // }
  &.insert {
    background: #FFEFDD;
  }
  .edbname-td {
    &:hover {
      text-decoration: underline;
    }
  }
  &.fix-col {
    position:sticky;
    left: 0;
    z-index: 98; // 表格右键操作弹窗为99
  }
}

.th-tg {
  background: #EBEEF5;
  &:hover {
    cursor: pointer;
    background: #ddd;
    /* border: 2px solid #409eff; */
  }
  &.sm {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
  }
}
//整行选中
tr {
  // position: relative;
  // &.choose-all::after {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   content: "";
  //   display: block;
  //   outline: 0;
  //   border: 2px solid #5897fb;
  //   box-shadow: 0 0 5px rgba(73, 177, 249, .5)
  // }
  &.fix {
    position:sticky;
    top: 0;
    z-index: 98; // 表格右键操作弹窗为99
  }
} 

.el-icon-sort {
  color: #409eff;
  cursor: pointer;
  font-size: 16px;
}

</style>
<style lang='scss' 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);
  height: calc(100vh - 400px);
  margin: 0 auto;
  // margin-right: -5px;
  overflow: auto;
}
table {
  width: 100%;
  font-size: 14px;
  color: #333;
  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>