vue3+ts el-table动态计算合并列(24小时内排班初始构建)-原创计算

<template>
    <div class="dwj_ss_pb_div" style="width: 100%;height: 800px;">
        <el-table ref="multipleTable"
                  class="theme-el-table"
                  :data="tableData"
                  :height="500" border
                  :row-style="{height: '150px'}"
                  :cell-style="tableCellStyle"
                  :span-method="arraySpanMethod"
                  :row-class-name="tableRowClassName"
                  highlight-current-row>
            <el-table-column label="手术间" prop="itemName" width="100" align="center"/>
            <el-table-column v-for="itemCol in tbSetColList"
                             :key="itemCol.value"
                             :index="itemCol.value"
                             :property="itemCol.value"
                             :label="itemCol.value"
                             show-overflow-tooltip
                             width="70" align="center">
                <template v-slot="scope">
                    <div style="
                                width: 100%;
                                height: 145px;
                                border: 1px solid #4884F0;
                                border-radius: 5px">
                        <span>{{itemCol.value}}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
    import { useStore } from 'vuex';
    import { useRoute,useRouter} from 'vue-router';
    import { toRefs,reactive,onMounted,onBeforeMount,getCurrentInstance } from 'vue';
    export default {
        setup(props,content) {
            const {proxy} = getCurrentInstance() as any;
            const route = useRoute()
            const state:any = reactive({
                tableData: [
                    {
                        itemeCode: '01',
                        itemName: '第一手术间',
                        surgeryList: [],
                    },
                    {
                        itemeCode: '02',
                        itemName: '第二手术间',
                        surgeryList: [],
                    },
                ],
                tbSetColList: [
                    {value:'00:00',},
                    {value:'01:00',},
                    {value:'02:00',},
                    {value:'03:00',},
                    {value:'04:00',},
                    {value:'05:00',},
                    {value:'06:00',},
                    {value:'07:00',},
                    {value:'08:00',},
                    {value:'09:00',},
                    {value:'10:00',},
                    {value:'11:00',},
                    {value:'12:00',},
                ],
                tbSetColList2: [
                    {value:'00:00',},
                    {value:'00:30',},
                    {value:'01:00',},
                    {value:'01:30',},
                    {value:'02:00',},
                    {value:'02:30',},
                    {value:'03:00',},
                    {value:'03:30',},
                    {value:'04:00',},
                    {value:'04:30',},
                    {value:'05:00',},
                    {value:'05:30',},
                    {value:'06:00',},
                    {value:'06:30',},
                    {value:'07:00',},
                    {value:'07:30',},
                    {value:'08:00',},
                    {value:'08:30',},
                    {value:'09:00',},
                    {value:'09:30',},
                    {value:'10:00',},
                    {value:'10:30',},
                    {value:'11:00',},
                    {value:'11:30',},
                    {value:'12:00',},
                ],
                SS_TIME_DIFF: 60,
            })
            const router = useRouter()
            // 全局登录者信息user
            const user = useStore().getters.user;
            onBeforeMount(() => {
                state.tbSetColList = state.tbSetColList
            });
            // 页面加载时
            onMounted(() => {
                state.tableData[0].surgeryList = [
                    {
                        kssj: '2023-10-13 00:00',
                        jssj: '2023-10-13 02:00',
                    },
                    {
                        kssj: '2023-10-13 03:00',
                        jssj: '2023-10-13 05:00',
                    }
                ]
                state.tableData[1].surgeryList = [
                    {
                        kssj: '2023-10-13 01:00',
                        jssj: '2023-10-13 05:00',
                    },
                    {
                        kssj: '2023-10-13 06:00',
                        jssj: '2023-10-13 07:00',
                    },
                    {
                        kssj: '2023-10-13 09:00',
                        jssj: '2023-10-13 11:00',
                    }
                ]
                methods.getTimeArray(state.SS_TIME_DIFF)
            });
            const methods = {
                getTimeArray(step) {
                    // step:以分钟为步调
                    // 比如:15分30分60分
                    /**Mr.丁计算排班动态列*/
                    let timeArray :any= [];
                    for(let h = 0; h <= 24; h++){
                        for(let m = 0; m < 60; m += step){
                            let hour = String(h).padStart(2,'0');
                            let minute = String(m).padStart(2,'0');
                            let hourMinute:any = `${hour}:${minute}`
                            timeArray.push({ value:  hourMinute});
                        }
                    }
                    state.tbSetColList = timeArray
                    return timeArray;
                },
                tableRowClassName({row, rowIndex}){
                    row.index = rowIndex
                },
                computeColDiffByDwj(row,i){
                    /**Mr.丁dingwangjun原创动态计算跨列数*/
                    // 中间间距60分钟|30分钟|15分钟
                    /**dwj:根据参数设置差距//设置的时间差*/
                    let midValue = state.SS_TIME_DIFF
                    // 获取一个手术计算手术开始时间位置
                    let hasSurgery = row.surgeryList[i]
                    if(row.surgeryList[i]!=undefined){
                        let kssj :any= row.surgeryList[i].kssj
                        let jssj :any= row.surgeryList[i].jssj
                        let jsrq = new Date(jssj).getTime()
                        let ksrq = new Date(kssj).getTime()
                        // 结束时间-开始时间的时间数,例如90分钟
                        let timeNo = (jsrq-ksrq)/(3600*1000)
                        // 列数:需要横跨几列(不同配置不同跨列)
                        let colNums = timeNo * 60 / midValue
                        // 开始时间的时:分;例如08:00
                        let ksValue = kssj.substring(11)
                        // 获取开始时间列的索引startNo
                        let list = state.tbSetColList
                        let startNo = list.findIndex(p=>p.value==ksValue)
                        return {
                            colNums: colNums,
                            startNo: startNo,
                        }
                    }else {
                        return {
                            colNums: 9999999,
                            startNo: 9999999,
                        }
                    }
                },
                arraySpanMethod({row,column,rowIndex,columnIndex}){
                    debugger
                    /**Mr.丁dingwangjun原创动态计算跨列方法*/
                    // 根据每一个手术间手术计算手术开始时间的位置
                    let opsList = row.surgeryList
                    for(let i=0;i<opsList.length;i++){
                        let dwjObj = methods.computeColDiffByDwj(row,i)
                        // dwjObj.colNums 列数需要横跨几列
                        // dwjObj.startNo 获取开始时间列的索引
                        let startIn = dwjObj.startNo+1
                        if(columnIndex===startIn){
                            // 横穿马路跨几列:colNum列
                            return [1, dwjObj.colNums];
                        }
                        let list :any= []
                        if(dwjObj.colNums>=2){
                            for(let i=0;i<dwjObj.colNums;i++){
                                list.push(startIn+i)
                            }
                            // 那几列需要合并为一列:list列
                            if(list.includes(columnIndex)){
                                return [1, 0];
                            }
                        }
                    }
                },
                tableCellStyle({row,column,rowIndex,columnIndex}){
                    let dwjObj = methods.computeColDiffByDwj(row,0)
                },
            };
            return {
                ...toRefs(state),
                ...methods,
            };
        }
    }
</script>

<style lang="scss">
    .dwj_ss_pb_div{
        /*table中单元格内边距-调整到靠近边框*/
        .el-table .cell, .el-table th div, .el-table--border .cell {
            padding-left: 0px;
            padding-right: 0px;
        }
    }
</style>