el-table动态列vue3.0动态列-批量录入体征-修订版2021-12-27

<!--作者：dingwangjun-->
<!--
 界面描述：批量录入界面动态列表，一种新的思路row.list方式设置动态列展示
-->
<template>
    <div class="dwjBatchInput">
        <div class="batch_heard_div">
            <div class="div-inline">
                <div class="div-inline" style="margin-top: -8px">体温标准时间</div>
                <div class="div-inline" style="margin-left: 15px;">
                    <el-checkbox-group v-model="timePoint" size="mini" @change="tiWenTimeChange">
                        <el-checkbox v-for="item in normTime"
                                     :key="item.itemCode"
                                     :label="item.itemCode">
                            {{item.itemName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="div-inline" style="width: 50px"></div>
                <div class="div-inline" style="margin-top: -6px">血压标准时间</div>
                <div class="div-inline" style="margin-left: 15px;">
                    <el-checkbox-group v-model="timePoint" size="mini" @change="tiWenTimeChange">
                        <el-checkbox v-for="item in xueYaTime"
                                     :key="item.itemCode"
                                     :label="item.itemCode">
                            {{item.itemName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="div-inline" style="float: right;margin-right: 20px">
                <el-button size="mini" type="primary" icon="el-icon-collection" @click="saveBatchSign">保存</el-button>
            </div>
        </div>
        <div style="background: #ffd591">
            <el-table
                    size="small"
                    ref="batch_tb"
                    v-loading="loading"
                    height="600"
                    :data="batchList"
                    border empty-text=" "
                    :cell-style="{padding: '0px'}"
                    @row-click="clickRowColor"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="tableHeaderCellStyle">
                <el-table-column label="批量选择人员" align="center">
                    <el-table-column width="50" prop="ch" label="床号" align="center" fixed></el-table-column>
                    <el-table-column width="110" prop="xm" label="姓名" align="center" fixed></el-table-column>
                    <el-table-column width="50" prop="xb" label="性别" align="center" fixed></el-table-column>
                    <el-table-column width="95" prop="zyhErbs" label="患者ID" align="center" fixed></el-table-column>
                </el-table-column>
                <!-- 动态列 -->
                <el-table-column
                        v-for="(item1, key1) in batchList[1].list" :key="key1" align="center">
                    <template #header>
                        <div>{{item1.dto.name}}</div>
                    </template>
                    <el-table-column width="100" v-for="(item2, key2) in item1.list" :key="key2" align="center">
                        <template #header>
                            <div>{{item2.text}}</div>
                        </template>
                        <template v-slot="scope">
                            <el-input size="mini"
                                      v-model="scope.row.list[key1].list[key2].value"
                                      :ref="getRowColId(scope.row.list[key1].dto,scope.$index,scope.row.list[key1].list[key2],scope.column.no)"
                                      @change="InputVueToValue(scope.row.list[key1].dto,scope.$index,scope.row.list[key1].list[key2],scope.column.no)"
                                      @keyup.enter.native="nextInputVue(scope.row.list[key1].dto,scope.$index,scope.row.list[key1].list[key2],scope.column.no)"
                                      @focus="focusSelectText($event)">
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
import { warnMsg } from '@/utils/msgBox.ts'
import { reactive,toRefs,defineComponent,onMounted,onBeforeMount,onBeforeUpdate,nextTick,getCurrentInstance } from 'vue'
export default defineComponent({
    name: '批量录入界面',
    setup (props,content) {
        const { proxy } = getCurrentInstance() as any;
        const state:any = reactive({
            loading: false,
            timePoint: ['2','6','10'],
            xueYaPoint: ['1'],
            tableRowDrug: null,
            normTime: [
                {itemCode: '2',itemName: '2点'},
                {itemCode: '6',itemName: '6点'},
                {itemCode: '10',itemName: '10点'},
                {itemCode: '14',itemName: '14点'},
                {itemCode: '18',itemName: '18点'},
                {itemCode: '22',itemName: '22点'},
            ],
            xueYaTime: [
                {itemCode: '44',itemName: '上午'},
                {itemCode: '99',itemName: '下午'},
            ],
            batchList: [
                {zyhErbs: '001021810',ch:'235',xm:'丁旺军看美女',xb:'男',list:[]},
                {zyhErbs: '001021811',ch:'356',xm:'丁美女看帅哥',xb:'女',list:[]},
            ],
            dataList: [],
            list: [
                {
                    dto: {zyhErbs: '',point: '2',name: '2点'},
                    list: [
                        {text: '体温',value: '2',type: 'number'},
                        {text: '脉搏',value: '',type: 'number'},
                        {text: '呼吸',value: '',type: 'string'},
                    ],
                },
                {
                    dto: {zyhErbs: '',point: '6',name: '6点'},
                    list: [
                        {text: '体温',value: '',type: 'number'},
                        {text: '脉搏',value: '',type: 'number'},
                        {text: '呼吸',value: '',type: 'string'},
                    ],
                },
                {
                    dto: {zyhErbs: '',point: '10',name: '10点'},
                    list: [
                        {text: '体温',value: '',type: 'number'},
                        {text: '脉搏',value: '',type: 'number'},
                        {text: '呼吸',value: '',type: 'string'},
                    ],
                },
                {
                    dto: {zyhErbs: '',point: '44',name: '上午'},
                    list: [
                        {text: '收缩压',value: '',type: 'number'},
                        {text: '舒张压',value: '',type: 'number'},
                    ],
                },
                {
                    dto: {zyhErbs: '',point: '99',name: '下午'},
                    list: [
                        {text: '收缩压',value: '',type: 'number'},
                        {text: '舒张压',value: '',type: 'number'},
                    ],
                },
            ],
        })
        onBeforeMount(()=>{

        })
        onMounted(()=>{
            methods.initListData()
        })
        onBeforeUpdate(()=>{
            nextTick(() => {
                proxy.$refs.batch_tb.doLayout();
            })
        })
        const methods = {
            // 得到焦点选中内容
            focusSelectText(event){
                event.currentTarget.select();
            },
            tableHeaderCellStyle({column}){
                if(column.label=='批量选择人员'){
                    return 'background:#F0FAF0;height:35px;'
                }else if(column.label=='床号'){
                    return 'background:#F0FAF0;height:35px;'
                }else if(column.label=='姓名'){
                    return 'background:#F0FAF0;height:35px;'
                }else if(column.label=='性别'){
                    return 'background:#F0FAF0;height:35px;'
                }else if(column.label=='患者ID'){
                    return 'background:#F0FAF0;height:35px;'
                }else {
                    return 'background:#EEF2FD;height:35px;'
                }
            },
            // 设置el-table偶数行的颜色
            tableRowClassName({row,rowIndex}) {
                row.index = rowIndex
            },
            // 点击当前行
            clickRowColor(row){
                state.tableRowDrug = row
            },
            // 初始化列
            initListData(){
                let orderList = JSON.stringify(state.list)
                for(let i=0; i<state.batchList.length; i++){
                    let selfList = JSON.parse(orderList)
                    state.batchList[i].list = selfList
                    for(let j=0; j<state.batchList[i].list.length; j++){
                        state.batchList[i].list[j].dto.zyhErbs = state.batchList[i].zyhErbs
                    }
                }
                state.dataList = state.batchList
            },
            getRowColId(dto,index,dtCol,colNo){
                // 'Id'+zyhErbs+行号+标准点+动态列号
                let needId = 'Id'+dto.zyhErbs+index+dto.point+colNo
                return needId
            },
            nextInputVue(dto,index,dtCol,colNo){
                debugger
                let verifyType = methods.verifyAuType(dto,index,dtCol)
                if(verifyType==false){
                    return false
                }
                let dtList = state.list.filter(p=>p.dto.point==dto.point)
                let dtListLen= dtList.length>0 ? dtList[0].list.length-1:0
                if(colNo<dtListLen){
                    colNo = colNo+1 //跳转到同一点的下一个
                    let needId = methods.getRowColId(dto,index,dtCol,colNo)
                    proxy.$refs[needId].$el.querySelector('input').focus()
                }else {
                    // 下一个时间点
                    let strFlag = '0'
                    let newPoints:any= []
                    let timePoint = state.timePoint.sort((a,b)=>{return a-b})
                    for(let i=0;i<timePoint.length; i++){
                        if(timePoint[i]==dto.point){
                            strFlag = '1'
                        }else {
                            if(strFlag=='1'){
                                newPoints.push(timePoint[i])
                            }
                        }
                    }
                    debugger
                    let hasNextPt = newPoints.filter(p=>p!=dto.point)
                    if(hasNextPt.length>0){
                        //dto,index,dtCol,colNo
                        let new_point = hasNextPt[0]
                        let new_dto = {zyhErbs: dto.zyhErbs,point: new_point}
                        let new_dtCol = state.list.filter(p=>p.dto.point==new_point)
                        let new_col = new_dtCol[0].list[0]
                        let verifyType = methods.verifyAuType(new_dto,index,new_col)
                        if(verifyType==false){
                            return false
                        }
                        let new_needId = methods.getRowColId(new_dto,index,new_col,0)
                        proxy.$refs[new_needId].$el.querySelector('input').focus()
                    }else {
                        // 下一行的第一个单元格
                        let nextIndex = index + 1
                        let bigListLen = state.batchList.length-1
                        if(nextIndex<=bigListLen){
                            let batchRow = state.batchList[nextIndex]
                            let nextDto = batchRow.list[0].dto
                            let nextCol = batchRow.list[0].list[0]
                            let verifyType = methods.verifyAuType(nextDto,nextIndex,nextCol)
                            if(verifyType==false){
                                return false
                            }
                            let new_needId = methods.getRowColId(nextDto,nextIndex,nextCol,0)
                            proxy.$refs[new_needId].$el.querySelector('input').focus()
                        }
                    }
                }
            },
            verifyAuType(dto,index,dtCol){
                // 是否数字验证
                let reg = /^\d+(\.\d+)?$/;
                let strType = dtCol.type
                let strValue = dtCol.value
                if(strType=='number'&& strValue!=''){
                    if(!reg.test(strValue.trim())) {
                        return false
                    }
                }
            },
            InputVueToValue(dto,index,dtCol,colNo){
                // 是否数字验证
                let verifyType = methods.verifyAuType(dto,index,dtCol)
                if(verifyType==false){
                    dtCol.value = ''
                    warnMsg(dtCol.text+"-应输入数值型数据")
                    let needId = dto.zyhErbs+index+dto.point+colNo
                    proxy.$refs['Id'+needId].$el.querySelector('input').focus()
                    return false
                }
            },
            // 输入数据回显响应
            InputVueToValue2(data){
                debugger
                if(state.tableRowDrug!=null){
                    let index = state.tableRowDrug.index
                    if(state.tableRowDrug.zyhErbs==data.zyhErbs){
                        let rowRow = state.tableRowDrug.list
                        let itemObj1 = rowRow.filter(p=>p.dto.point==data.point)
                        if(itemObj1.length>0 && (itemObj1[0].dto.point==data.point)){
                            let itemObj2 = itemObj1[0].list.filter(p=>p.text==data.text)
                            itemObj2.length>0 ? itemObj2[0].value = data.value : itemObj2[0].value = ''
                        }
                        let itemObj3 = state.dataList[index].list.filter(p=>p.dto.point==data.point)
                        if(itemObj3.length>0 && (itemObj3[0].dto.point==data.point)){
                            let itemObj4 = itemObj3[0].list.filter(p=>p.text==data.text)
                            itemObj4.length>0 ? itemObj4[0].value = data.value : itemObj4[0].value = ''
                        }
                    }
                }
            },
            // 标准体温点变化
            tiWenTimeChange(){
                debugger
                state.batchList = []
                let pointStr=state.timePoint.sort().toString()
                let orderList = JSON.stringify(state.dataList)
                let selfList = JSON.parse(orderList)
                for(let i=0; i<selfList.length; i++){
                    let temp_list = selfList[i]
                    let list = selfList[i].list
                    let dto_List = list.filter(p=> pointStr.includes(p.dto.point))
                    selfList.filter(p=>p.zyhErbs==temp_list.zyhErbs)[0].list = dto_List
                    state.batchList.push(temp_list)
                }
                debugger
                for(let j=0; j<state.batchList.length; j++){
                    debugger
                    let temp_list = state.batchList[j]
                    let list = state.batchList[j].list
                    let outList = state.dataList.filter(p=> p.zyhErbs==temp_list.zyhErbs)
                    let patListList = outList[0].list
                    for(let w=0;w<patListList.length;w++){
                        let outDto = patListList[w].dto
                        let dtoList = list.filter(p=> p.dto.point==outDto.point)
                        patListList[w].list = dtoList[0].list
                    }
                }
            },
            // 保存体征数据
            saveBatchSign(){
                debugger
                state.batchList
            },
        }
        return {
            ...toRefs(state),
            ...methods,
        }
    }
})
</script>
<style lang="scss">
    .batch_heard_div{
        height: 35px;
        line-height: 35px;
        .el-checkbox {
            margin-right: 10px;
        }
    }
</style>