scd_tools_ui/src/pages/system/components/LitLine.vue

<template>
    <div>
        <div class="bigBox" style="position: relative;" v-loading="loading">
            <div style="text-align: center;">
                <h2>接线方式管理</h2>
            </div>
            <div>
                <el-button type="primary" plain @click="createType">
                    <el-icon>
                        <Plus />
                    </el-icon>添加新接线方式</el-button>
            </div>
            <div>
                <el-table ref="multipleTableRef" :stripe="true" :data="lineList"
                    style="width: 100%;height: calc(100vh - 300px);" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="编号" prop="id" width="auto">
                        <!-- <template #default="scope">{{ scope.row.cr }}</template> -->
                    </el-table-column>
                    <el-table-column label="电压等级" prop="vol_level_name" width="auto" />
                    <el-table-column label="接线方式名称" prop="name" width="auto" />
                    <el-table-column width="auto" label="线路图" prop="pic">
                        <template #default="scope">
                            <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;"
                                @click="lookPic(scope.row)">查看</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="ct" width="auto" show-overflow-tooltip />
                    <el-table-column label="操作" width="320">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="editLine(scope.row)"><el-icon>
                                    <EditPen />
                                </el-icon>编辑</el-button>
                            <el-button link type="primary" size="small" @click="lookLine(scope.row)"><el-icon>
                                    <View />
                                </el-icon>查看</el-button>
                            <el-button link type="danger" size="small" @click="delLine(scope.row)"><el-icon>
                                    <Delete />
                                </el-icon>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="position: absolute;right: 0px;bottom: 0px;">
                <Pagination :totals="totals" @pageBack="pageBack"></Pagination>
            </div>
            <div>
                <AddLine v-if="alModal" :alModal="alModal" :sunSearch="sunSearch" @alBack="alBack"></AddLine>
                <LookLine v-if="lookModal" :lookModal="lookModal" :flashId="flashId" :checkFlash="checkFlash" :needList="needList" :search="search"
                    @lookBack="lookBack" :listNum="listNum"></LookLine>
                <DelLine v-if="delModal" :delModal="delModal" :flashId="flashId" :checkFlash="checkFlash" :needList="needList" :sunSearch="sunSearch"
                    @delBack=delBack>
                </DelLine>
                <PicLook v-if="picModal" :picModal="picModal" :needList="needList" @picBack="picBack"></PicLook>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch, onBeforeUnmount } from 'vue';
import litLine from "../../../api/litLine"
import AddLine from '../modalComp/AddLine.vue';
import LookLine from '../modalComp/LookLine.vue';
import DelLine from '../modalComp/DelLine.vue';
import PicLook from '../modalComp/PicLook.vue';
import Pagination from './Pagination.vue';
export default {
    props: {
        fuckList: {
            type: Array,
            required: true
        },
        moduleTotal: {
            type: Number,
            required: true
        },
        lineId:{
            type:String,
            required:true,
        },//电压等级的id
    },
    setup(props, { emit }) {
        let lineList = ref([])//
        let result = props.fuckList
        let alModal = ref(false)
        let needList = ref([])
        let lookModal = ref(false)
        let delModal = ref(false)
        let picModal = ref(false)
        let listNum = ref(0)//0为查看，1为编辑
        let totals = ref(0)//总条数
        let loading = ref(false)
        let flashId = ref("")//本组件电压等级id
        watch(() => props.fuckList, (newVal) => {
            lineList.value = newVal
        })
        watch(() => props.moduleTotal, (newVal) => {
            totals.value = newVal
        })
        watch(()=>props.lineId,(newVal)=>{
            flashId.value = newVal
        })
        function checkFlash(num){
            loading.value = true
            litLine.getAllLine({ pageno: 1, pagesize: 20, vol_id: num - 0 }).then(res => {
                if (res.code == 0) {
                    loading.value = false
                    lineList.value = res.data
                    totals.value = res.count
                    // counts.value = res.count
                    // emit("lineBack", loading.value)
                    // emit("listBack", res.data, e.id, counts.value)
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function search() {
            flashId.value = props.lineId
            if (totals.value) {
                console.log('调用了search的if');
                totals.value = props.moduleTotal
                loading.value = true
                litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                    if (res.data != null) {
                        lineList.value = res.data
                        totals.value = res.count
                        loading.value = false
                    } else {
                        lineList.value = []
                        totals.value = 0
                        loading.value = false
                    }
                })
            } else {
                console.log('调用了search的else');
                loading.value = true
                litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                    if (res.data != null) {
                        lineList.value = res.data
                        totals.value = res.count
                        loading.value = false
                    } else {
                        lineList.value = []
                        totals.value = 0
                        loading.value = false
                    }
                })
            }
        }
        function sunSearch() {
            loading.value = true
            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                if (res.data != null) {
                    lineList.value = res.data
                    totals.value = res.count
                    loading.value = false
                } else {
                    lineList.value = []
                    totals.value = 0
                    loading.value = false
                }
            })
        }
        function handleSelectionChange(val) {
            console.log(val, 'val');
        }
        function createType() {
            alModal.value = true
        }
        function alBack(data) {
            alModal.value = data
        }
        function editLine(row) {
            needList.value = row
            listNum.value = 1
            lookModal.value = true
        }
        function lookLine(row) {
            needList.value = row
            listNum.value = 0
            lookModal.value = true
        }
        function delLine(row) {
            needList.value = row
            delModal.value = true
        }
        function lookPic(row) {
            needList.value = row
            picModal.value = true
        }
        function moduleLine(row) {
            needList.value = row
        }
        function lookBack(data) {
            lookModal.value = data
        }
        function delBack(data) {
            delModal.value = data
        }
        function picBack(data) {
            picModal.value = data
        }
        function pageBack(no, index) {
            loading.value = true
            litLine.getAllLine({ pageno: no - 0, pagesize: index - 0 }).then(res => {
                if (res.data != null) {
                    lineList.value = res.data
                    totals.value = res.count
                    loading.value = false
                } else {
                    lineList.value = []
                    totals.value = 0
                    loading.value = false
                }
            })
        }
        // watch(() => props.fuckList, (newVal) => {
        //     lineList.value = newVal
        // });
        onMounted(() => {
            search()
        })
        return {
            lineList,
            handleSelectionChange,
            alModal,
            createType,
            alBack,
            result,
            search,
            lookLine,
            editLine,
            delLine,
            moduleLine,
            needList,
            lookModal,
            lookBack,
            listNum,
            delModal,
            delBack,
            picModal,
            lookPic,
            picBack,
            totals,//总条数
            pageBack,//Pagination.vue返回数据
            loading,
            sunSearch,//DelLine.VUE需要的刷新
            flashId,//本组件变电站id
            checkFlash,//便于刷新的函数
        }
    },
    components: {
        AddLine,
        LookLine,
        DelLine,
        PicLook,
        Pagination,
    }
}
</script>

<style scoped>
.bigBox {
    width: 100%;
    height: calc(100vh - 175px);
    margin-top: 10px;
    position: relative;
}
</style>