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

<template>
    <div>
        <div class="bigBox" style="position: relative;">
            <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" :search="search" @alBack="alBack"></AddLine>
                <LookLine v-if="lookModal" :lookModal="lookModal" :needList="needList" :search="search" @lookBack="lookBack"
                    :listNum="listNum"></LookLine>
                <DelLine v-if="delModal" :delModal="delModal" :needList="needList" :search="search" @delBack=delBack>
                </DelLine>
                <PicLook v-if="picModal" :picModal="picModal" :needList="needList" @picBack="picBack"></PicLook>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } 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
        }
    },
    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)//总条数
        watch(() => props.fuckList, (newVal) => {
            lineList.value = newVal
        })
        function search() {
            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                if (res.data != null) {
                    lineList.value = res.data
                    totals.value = res.count
                } else {
                    lineList.value = []
                    totals.value = 0
                }
            })
        }
        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) {
            litLine.getAllLine({ pageno: no - 0, pagesize: index - 0 }).then(res => {
                if (res.data != null) {
                    lineList.value = res.data
                    totals.value = res.count
                } else {
                    lineList.value = []
                    totals.value = 0
                }
            })
        }
        // 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返回数据
        }
    },
    components: {
        AddLine,
        LookLine,
        DelLine,
        PicLook,
        Pagination,
    }
}
</script>

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