scd_tools_ui/src/pages/netStructPicture/modalCom/LookScd.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="选择SCD文件" width="40%" @close="handleClose">
            <div class="misBox" v-if="loading" v-loading="loading" element-loading-text="正在比对中，为防止误操作将禁止页面点击"
                element-loading-background="rgba(122, 122, 122, 0.8)">
            </div>
            <el-table ref="multipleTableRef" :data="tableList" style="width: 100%;height: calc(100vh - 520px);" stripe
                @selection-change="handleSelectionChange" @select-all="chooseAll">
                <el-table-column type="selection" width="55" />
                <el-table-column label="比对scd" width="auto" :show-overflow-tooltip="true">
                    <template #default="scope">{{ scope.row.scd_name }}</template>
                </el-table-column>
                <el-table-column property="CREATED_TIME" label="时间" width="auto" :show-overflow-tooltip="true" />
                <!-- <el-table-column fixed="right" label="操作" width="120">
                    <template #default>
                        <el-button link type="primary" size="small"><el-icon>
                                <View />
                            </el-icon>查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancels">取消</el-button>
                    <el-button type="primary" @click="sureLook">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import scd from '@/api/scd';
import scdCheck from '@/api/scdCheck/scdCheck'
import { ElMessage } from 'element-plus';
export default {
    props: {
        lookScdModal: {
            type: Boolean,
            required: true
        },
        aktType: {
            type: Function,
            required: true
        },
        stations: {//变电站id
            type: String,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//模态框开关
        let tableList = ref([])//表格数据
        let alreadyTriggered = ref(false)//全选开关
        let scdid = ref([])//表格选择的scd数组
        let multipleTableRef = ref()
        let flashId = ref("")//本组件变电站id
        let loading = ref(false)//loading动画
        watch(() => props.stations, (newVal) => {
            flashId.value = newVal
        })
        function handleClose() {//模态框关闭方法
            dialogVisible.value = false
            emit("lookScdBack", dialogVisible.value)
        }
        function lastLook() {//确定
            if (scdid.value.length < 2) {
                ElMessage({
                    type: 'warning',
                    message: "请选择两个scd文件后点击"
                })
            } else {
                loading.value = true
                let idArr = scdid.value.map(item => {
                    return item.id
                })
                // idArr = idArr.toString(idArr)
                scdCheck.scdStart({
                    type: 'scd',
                    station_id: flashId.value - 0,
                    source_scd_id: idArr[0] - 0,
                    target_scd_id: idArr[1] - 0,
                    comp_id: 0
                }).then(res => {
                    if (res.code == 0) {
                        loading.value = false
                        props.aktType()
                        dialogVisible.value = false
                        emit("lookScdBack", dialogVisible.value, scdid.value)
                    } else {
                        loading.value = false
                        ElMessage({
                            type: "error",
                            message: "错误"
                        })
                    }
                })
            }
        }
        function motType() {//初始化数据
            dialogVisible.value = props.lookScdModal
            flashId.value = props.stations
            scd.getAllScd({ stationid: flashId.value - 0, pageno: 1, pagesize: 20 }).then(res => {//获取所有scd文件
                tableList.value = res.data
            })
        }
        function handleSelectionChange(e) {//复选
            if (e.length > 2 && !alreadyTriggered.value) {
                alreadyTriggered.value = true;
                let select = e.slice(0, 2);
                ElMessage({
                    type: "warning",
                    message: "默认只会留存前两个选中的scd",
                });
                setTimeout(() => {
                    alreadyTriggered.value = false;
                }, 100);
            } else {
                scdid.value = e
            }
        }
        function chooseAll(e) {//全选
            if (e.length > 2) {
                ElMessage({
                    type: "warning",
                    message: "默认只会选中前两个SCD文件，请手动选择"
                })
                let select = e.slice(2)
                select.forEach((item) => {
                    //取消选择超出的项
                    multipleTableRef.value.toggleRowSelection(item, false);
                });
                scdid.value = e
            }
        }
        onMounted(() => {
            motType()
        })
        return {
            dialogVisible,
            handleClose,//模态框大关闭
            sureLook: lastLook,//确认按钮
            cancels: handleClose,//取消
            motType,//初始化数据
            tableList,//表格数据
            handleSelectionChange,
            chooseAll,
            alreadyTriggered,
            scdid,//选择的scd文件数组
            multipleTableRef,
            loading,
            flashId,//本组件变电站id
        }
    }
}
</script>

<style scoped>
.misBox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    /* background-color: rgba(255, 255, 255, 0.5); */
    z-index: 200 !important;
}
</style>