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

<template>
    <div>
        <div class="bigBox" v-loading="loading">
            <div class="settingBox">
                <h2>系统代码管理</h2>
            </div>
            <div class="tableBox">
                <div style="width: 30%;">
                    <el-tree :data="treeFather" accordion node-key="id" :props="defaultProps" @node-click="handleNodeClick">
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <svg t="1709689483117" class="icon" viewBox="0 0 1180 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1524" width="20" height="20">
                                    <path
                                        d="M1099.433546 289.842983h-1.08787v-99.462424a128.679511 128.679511 0 0 0-93.246023-126.65918v-3.263611A60.454505 60.454505 0 0 0 944.023508 0.003264H729.246837A60.454505 60.454505 0 0 0 668.326102 59.836128H122.526051A126.65918 126.65918 0 0 0 0.062941 190.380559V890.502778a12.277393 12.277393 0 0 0 2.331151 6.216401v1.243281c0 72.110257 46.623011 126.03754 113.760147 126.03754H969.821575c67.603366 0 105.212595-68.225006 122.463109-130.544431L1174.652004 419.610365c18.182974-75.063048-7.459682-129.767381-75.218458-129.767382z m-897.337556 0a160.072339 160.072339 0 0 0-132.253942 78.637479v-124.32803a73.198128 73.198128 0 0 1 46.623011-54.859743H668.326102a60.609915 60.609915 0 0 1 60.454505-59.988274h215.242901a60.609915 60.609915 0 0 1 60.454505 60.609914v3.108201a126.50377 126.50377 0 0 1 90.604052 97.908324z"
                                        fill="#FF892A" p-id="1525"></path>
                                </svg>
                                <span>{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </div>
                <div style="width: 70%;">
                    <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>
            <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'
import { ElMenu, ElMessage } from 'element-plus';
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)//重载组件
        let treeFather = ref([])//树形组件父级
        let defaultProps = ref({
            label: "name",
            codes: "code",
            ids: 'id',
            children: 'children'
        })
        let loading = ref(false)//加载动画
        let pageCode = ref("")//分页组件需要的code
        function searchSystem() {//查询所有字典
            loading.value = true
            systemList.value = []
            systemRow.getChildren({}).then(res => {
                // 拿到所有父级节点
                if (res.data) {
                    //赋值给树形节点
                    treeFather.value = res.data.map(item => ({ ...item, children: [] }));
                    //再调用接口拿下级
                    systemRow.getAllRow({ pageindex: 1, pagesize: 9999999 }).then(oss => {
                        // 遍历所有父级节点
                        treeFather.value.forEach(parentNode => {
                            // 遍历所有系统列表对象
                            oss.data.forEach(childNode => {
                                // 如果系统列表对象的 parentcode 等于当前父级节点的 code，则将系统列表对象添加到当前父级节点的 children 数组中
                                if (childNode.parentcode === parentNode.code) {
                                    // 确保当前父级节点有 children 数组，如果没有则创建
                                    if (!parentNode.children) {
                                        parentNode.children = [];
                                    }
                                    // 将系统列表对象添加到当前父级节点的 children 数组中
                                    parentNode.children.push(childNode);
                                }
                            });
                        });
                    })
                    loading.value = false
                } else {
                    loading.value = false
                    messageFun(res.msg)
                }
            })
        }
        // 公共提示窗
        function messageFun(msg) {
            ElMessage({
                message: msg,
                type: "error"
            })
        }
        function handleNodeClick(e) {
            pageCode.value = e.code
            systemRow.getChildren({ code: pageCode.value }).then(res => {
                if (res.data) {
                    systemList.value = res.data
                    totals.value = res.data.length
                } else {
                    messageFun('未找到相关数据')
                }
            })
        }
        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, code: pageCode.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,
            treeFather,//树形父级
            messageFun,//公共msg
            defaultProps,//树形现实的数据key
            handleNodeClick,//树形组件点击节点方法
            loading,//加载方法
            pageCode,//分页组件需要的code 
        }
    },
    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;
}

.el-tree {
    width: calc(90%);
    height: 72vh;
    overflow-y: auto;
}

.tableBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>