scd_tools_ui/src/pages/setting/components/SystemCode.vue

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox">
                <h2>系统代码管理</h2>
            </div>
            <div class="tableBox">
                <el-button type="primary" plain @click="openModal(0)">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增系统字典
                </el-button>
                <el-table :data="systemList" style="width: 100%;height: calc(100vh - 260px);" :stripe="true">
                    <el-table-column fixed prop="code" label="字典代码" width="auto" />
                    <el-table-column prop="name" label="字典名称" width="auto" />
                    <el-table-column prop="parentcode" label="上级字典代码" width="auto" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="openModal(1, scope.row)">
                                <el-icon>
                                    <EditPen />
                                </el-icon>编辑</el-button>
                            <el-button style="color: red;" link type="primary" size="small" @click="delItem(scope.row)">
                                <el-icon style="color: red;">
                                    <Delete />
                                </el-icon>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBox">
                <Pagination :key="reloadKey" :tLength="totals" :pages="pages" :sizes="sizes" @getBack="getBack"></Pagination>
            </div>
            <!-- 模态框盒子 -->
            <div class="modalBox">
                <AddSc v-if="setModal" :setModal="setModal" :addOrEdit="addOrEdit" :searchSystem="searchSystem" :editRow="editRow" @getModal="getModal">
                </AddSc>
                <DelSc v-if="delModal" :delModal="delModal" :delId="delId" :searchSystem="searchSystem" @delBack="delBack">
                </DelSc>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import systemRow from '@/api/systemRow';
import Pagination from './Pagination.vue';
import AddSc from '../modalComp/AddSc.vue';
import DelSc from '../modalComp/DelSc.vue'
export default {
    setup() {
        let systemList = ref([])//系统字典列表数据
        let pages = ref(0)//页码
        let sizes = ref(0)//条数
        let totals = ref(0)//总条数
        let setModal = ref(false)//控制打开或关闭新增编辑模态框
        let delModal = ref(false)//控制删除模态框
        let delId = ref('')//需要删除的字典id
        let addOrEdit = ref(0)//控制编辑或新增tips
        let editRow = ref({})//编辑回显
        let reloadKey = ref(0)//重载组件
        function searchSystem() {//查询所有字典
            systemRow.getAllRow({ pageindex: 1, pagesize: 10 }).then(res => {
                systemList.value = res.data
                totals.value = res.count
            })
        }
        function openModal(num, row) {//打开新增或编辑模态框
            editRow.value = row
            addOrEdit.value = num
            setModal.value = true
        }
        function delItem(row) {//控制删除模态框打开
            delId.value = row.id
            delModal.value = true
        }
        function getModal(data) {//新增，编辑模态框返回数据
            setModal.value = data
        }
        function getBack(index, size) {//分页组件返回的数据
            pages.value = index
            sizes.value = size
            systemRow.getAllRow({ pageindex: pages.value, pageSize: sizes.value }).then(res => {
                systemList.value = res.data
                totals.value = res.count
            })
        }
        function delBack(data,num) {//确认删除模态框返回的数据
            delModal.value = data
            reloadKey.value = num
        }
        onMounted(() => {
            searchSystem()
        })
        return {
            systemList,//系统字典列表
            searchSystem,//查询所有字典
            pages, //页码
            sizes, //条数
            totals,//总条数
            setModal,//控制打开或关闭新增编辑模态框
            openModal,//打开新增或编辑模态框
            getModal,//新增，编辑模态框返回数据
            getBack,//分页组件返回数据
            addOrEdit,//控制编辑或新增tips
            delModal,//控制删除模态框
            delItem,//控制删除模态框打开
            delId,//需要删除的字典id
            delBack,//确认删除模态框返回的数据
            editRow,//编辑回显
            reloadKey,
        }
    },
    components: {
        Pagination,
        AddSc,
        DelSc,
    }
}
</script>

<style scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 15px;
    /* margin-top: 10px; */
}

.settingBox {
    width: 100%;
    height: auto;
    text-align: center;
}
</style>