eta_front/src/views/chartRelevance_manage/relevance/components/batchSelectTable.vue

<template>
    <!-- 封装表格跨页多选逻辑 -->
    <div class="batch-select-table">
        <div class="table-box">
            <el-table
                border height="500px"
                v-loading="tableLoading"
                ref="tableRef" 
                :data="tableData"
                @select="selectHandle" 
                @select-all="selectAllHandle"
            >
                <el-table-column type="selection" min-width="50" align="center"/>
                <el-table-column 
                    align="center"
                    v-for="column in tableColumns" 
                    :key="column.key"
                    :label="column.label"
                    :prop="column.key"
                    :width="column.width"
                    :show-overflow-tooltip="column.showOverflowTooltip">
                    <template slot-scope="{row}">
                        <span v-if="column.key==='Frequency'">{{ getFrequencyTrans(row.Frequency) }}</span>
                        <span v-else-if="['UniEn','Unit'].includes(column.key)">{{ getUnitTrans(row.Unit) }}</span>
                        <span v-else>{{ row[column.key] }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <m-page 
                style="margin-top:10px"
                class="table-page" 
                v-show="tableParams.total"
                :total="tableParams.total" 
                :pageSize="tableParams.pageSize"
                :page_no="tableParams.pageNo"
                :pagercount="tableParams.pagerCount"
                @handleCurrentChange="pageNumberChange"
            />
        </div>
        <!-- 加入已选指标 -->
        <el-button type="primary" @click="handleAddSelectData">{{ $t('EtaBasePage.add_to_selections') }}</el-button>
        <div class="select-box" style="align-self: flex-start;">
            <el-table
                border height="500px"
                ref="selectRef" 
                :data="selectData"
            >
            <el-table-column
                align="center"
                :label="tableColumns[0].label"
                :prop="tableColumns[0].key"
             />
             <el-table-column width="50px" align="center" v-if="selectData.length">
                <template slot="header" slot-scope="scope">
                    <img @click="handleDelSelect(_,'all')" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
                </template>
                <template slot-scope="{row,index}">
                    <img @click="handleDelSelect(index,'')" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
                </template>
            </el-table-column>
        </el-table>
        </div>
    </div>
</template>

<script>
import mPage from '@/components/mPage.vue'
export default {
    components:{mPage},
    props:{
        tableData:{
            type:Array,
            default:[]
        },
        tableLoading:{
            type:Boolean,
            default:false
        },
        tableColumns:{
            type:Array,
            default:[]
        },
        tableParams:{
            type:Object,
            default:()=>{
                return {
                    total:0,
                    pageSize:20,
                    pageNo:1,
                    pagerCount:5,
                    uniqueKey:'Id'
                }
            }
        },
        isSelectAll:{
            type:Boolean,
            default:false,
        },
        factorData:{
            type:Object,
            default:{}
        }
    },
    watch:{
        /* isSelectAll(newValue){
            this.listCheckAllChange(newValue)
        }, */
        factorData:{
            handler(newValue){
                this.selectData = newValue.selectList||[]
            },
            immediate:true,
            deep:true
        }
        
    },
    data() {
        return {
            selectList:[],//左侧表格已选择/已剔除的数据
            selectData:[],//右侧表格的数据
            selectionReactCancel:false,
        };
    },
    methods: {
        //点击数据行的checkbox触发 selection:已选择的所有数据行;row:当前点击的数据行
        selectHandle(selection,row){
            const {uniqueKey} = this.tableParams
            //通过判断selection中有无row确定是勾选了checkbox还是取消勾选
            //当为勾选时，判断selectList是否表示已选择的数据(isSelectAll===false)，若不是则不加入
            //当为取消勾选时，判断selectList是否表示已剔除的数据(isSelectAll===true)，若不是则不加入
            let check = selection.some(i=>i[uniqueKey] == row[uniqueKey])?(!this.isSelectAll):(this.isSelectAll)
            if(check){
                this.selectList.push(row[uniqueKey])
            }else{
                this.selectList = this.selectList.filter(i=>i!=row[uniqueKey])
            }
            this.selectionChange()
        },
        //点击表头全选 or 调用toggleAllSelection 触发
        selectAllHandle(selection){
            //当前table的所有数据
            const tableIds = this.tableData.map(it => it[this.tableParams.uniqueKey])
            //通过判断selection中有无数据确定是全选or取消全选
            //当为全选时，判断selectList是否表示已选择的数据(isSelectAll===false)，若不是则从selectList中剔除
            //当为取消全选时，判断selectList是否表示已剔除的数据(isSelectAll===true)，若不是则从selectList中剔除
            let check = selection&&selection.length?(!this.isSelectAll):this.isSelectAll
            if(check){
                this.selectList =  [...this.selectList,...tableIds]
            }else{
                this.selectList = this.selectList.filter(it => !tableIds.includes(it))
            }
            this.selectionChange()
        },
        //当勾选项改变时 处理数据
        selectionChange(){
            //去重 selectList
            let duplicateArr = Array.from(new Set(this.selectList))
            let isCheckAll = false,isIndeterminate = false
            //判断已选择的数据，更改列表全选checkbox的状态
            /**
             * 全选：
             * 1.selectList.length === total && isSelectAll === false （已选择的数据为全部数据）
             * 2.selectList.length === 0 && isSelectAll === true （已剔除的指标为空）
             * 以上两种满足其一即可
             */
            const selectAll = duplicateArr.length===this.tableParams.total && (!this.isSelectAll)
                || duplicateArr.length===0 && this.isSelectAll
            /**
             * 全不选：
             * 1.selectList.length === total && isSelectAll === true （剔除了全部数据）
             * 2.selectList.length === 0 && isSelectAll === false （没选择任何数据）
             * 以上两种满足其一即可
             */
            const selectNone = duplicateArr.length===this.tableParams.total && this.isSelectAll
                || duplicateArr.length===0 && (!this.isSelectAll)
            //其余情况均为半选

            if(selectAll){
                isCheckAll = true
                isIndeterminate = false
            }else if(selectNone){
                isCheckAll = false
                isIndeterminate = false
            }else{
                isCheckAll = false
                isIndeterminate = true
            }

            this.$emit('changeCheckAll',{isCheckAll,isIndeterminate})
        },
        //切换页面时调整勾选项 (在外层组件调用)
        adjustSelection(){
            const {uniqueKey} = this.tableParams
            this.$refs.tableRef.clearSelection()
            this.tableData.forEach(data=>{
                if(this.selectList.includes(data[uniqueKey])){
                    //isSelectAll===false,selectList为已选择的数据，则对应数据行打勾
                    //isSelectAll === true,selectList为已剔除的数据，则对应的数据行取消打勾
                    this.$nextTick(()=>{
                        this.$refs.tableRef.toggleRowSelection(data,!this.isSelectAll)
                    })
                }else{
                    this.$nextTick(()=>{
                        this.$refs.tableRef.toggleRowSelection(data,this.isSelectAll)
                    })
                }
            })
        },
        listCheckAllChange(newValue){
            this.selectList = []
            this.$refs.tableRef && this.tableData.length && this.$refs.tableRef.clearSelection()
            if(newValue){
                //会触发select-all
                this.$refs.tableRef && this.tableData.length && this.$refs.tableRef.toggleAllSelection()
                /* //不会触发select-all
                this.$refs.tableRef && this.tableData.length && this.$refs.tableRef.toggleRowSelection(this.tableData[0],true) */
            }
        },
        pageNumberChange(page){
            this.$emit('pageChange',page)
        },
        handleAddSelectData(){
            //外层组件处理校验和添加逻辑
            this.$emit('addSelectData',{selectList:this.selectList,selectData:this.selectData})

        },
        //外层组件调用
        addSelectData(data){
            this.selectData = [...this.selectData,...data]
            
        },
        handleDelSelect(index,type){
            if(type==='all'){
                return (this.selectData = [])
            }
            this.selectData.splice(index,1)
        },
    },
};
</script>

<style scoped lang="scss">
.batch-select-table{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:0 20px;
    .table-box,.select-box{
        flex:1;
    }
    &::after{
        content:'';
        flex:0 0 auto;
        visibility: hidden;
    }
}
</style>