update

gaoshp

2024-06-16 5be78f8d80e78ad76f5f322a0ea1f47105fffe6f

update

 src/components/scFileSelect/index.vue

@@ -3,41 +3,47 @@
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年10月11日16:01:40
 * @LastEditors:
 * @LastEditTime:
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-16 16:16:25
-->

<template>
    <div class="sc-file-select">
        <div class="sc-file-select__side" v-loading="menuLoading">
            <div class="sc-file-select__side-menu">
                <el-tree ref="group" class="menu" :data="menu" :node-key="treeProps.key" :props="treeProps" :current-node-key="menu.length>0?menu[0][treeProps.key]:''" highlight-current @node-click="groupClick">
                <el-tree :expand-on-click-node="false" ref="group" class="menu" :data="menu" :node-key="treeProps.key"
                    :props="treeProps" :current-node-key="menu.length > 0 ? menu[0][treeProps.key] : ''" highlight-current
                    @node-click="groupClick">
                    <template #default="{ node }">
                        <span class="el-tree-node__label">
                            <el-icon class="icon"><el-icon-folder /></el-icon>{{node.label}}
                            <el-icon class="icon"><el-icon-folder /></el-icon>{{ node.label }}
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="sc-file-select__side-msg" v-if="multiple">
                已选择 <b>{{value.length}}</b> / <b>{{max}}</b> 项
                已选择 <b>{{ value.length }}</b> / <b>{{ max }}</b> 项
            </div>
        </div>
        <div class="sc-file-select__files" v-loading="listLoading">
            <div class="sc-file-select__top">
                <div class="upload" v-if="!hideUpload">
                    <el-upload class="sc-file-select__upload" action="" multiple :show-file-list="false" :accept="accept" :on-change="uploadChange" :before-upload="uploadBefore" :on-progress="uploadProcess" :on-success="uploadSuccess" :on-error="uploadError" :http-request="uploadRequest">
                    <el-upload class="sc-file-select__upload" action="" multiple :show-file-list="false"
                        :accept="accept" :on-change="uploadChange" :before-upload="uploadBefore"
                        :on-progress="uploadProcess" :on-success="uploadSuccess" :on-error="uploadError"
                        :http-request="uploadRequest">
                        <el-button type="primary" icon="el-icon-upload">本地上传</el-button>
                    </el-upload>
                    <span class="tips"><el-icon><el-icon-warning /></el-icon>大小不超过{{maxSize}}MB</span>
                    <span class="tips"><el-icon><el-icon-warning /></el-icon>大小不超过{{ maxSize }}MB</span>
                </div>
                <div class="keyword">
                    <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="文件名搜索" clearable @keyup.enter="search" @clear="search"></el-input>
                    <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="文件名搜索" clearable
                        @keyup.enter="search" @clear="search"></el-input>
                </div>
            </div>
            <div class="sc-file-select__list">
                <el-scrollbar ref="scrollbar">
                    <el-empty v-if="fileList.length==0 && data.length==0" description="无数据" :image-size="80"></el-empty>
                    <el-empty v-if="fileList.length == 0 && data.length == 0" description="无数据" :image-size="80"></el-empty>
                    <div v-for="(file, index) in fileList" :key="index" class="sc-file-select__item">
                        <div class="sc-file-select__item__file">
                            <div class="sc-file-select__item__upload">
@@ -45,9 +51,10 @@
                            </div>
                            <el-image :src="file.tempImg" fit="contain"></el-image>
                        </div>
                        <p>{{file.name}}</p>
                        <p>{{ file.name }}</p>
                    </div>
                    <div v-for="item in data" :key="item[fileProps.key]" class="sc-file-select__item" :class="{active: value.includes(item[fileProps.url]) }" @click="select(item)">
                    <div v-for="item in data" :key="item[fileProps.key]" class="sc-file-select__item"
                        :class="{ active: value.includes(item[fileProps.url]) }" @click="select(item)">
                        <div class="sc-file-select__item__file">
                            <div class="sc-file-select__item__checkbox" v-if="multiple">
                                <el-icon><el-icon-check /></el-icon>
@@ -56,228 +63,402 @@
                                <el-icon><el-icon-check /></el-icon>
                            </div>
                            <div class="sc-file-select__item__box"></div>
                            <el-image v-if="_isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain" lazy></el-image>
                            <el-image v-if="_isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain"
                                lazy></el-image>
                            <div v-else class="item-file item-file-doc">
                                <i v-if="files[_getExt(item[fileProps.url])]" :class="files[_getExt(item[fileProps.url])].icon" :style="{color:files[_getExt(item[fileProps.url])].color}"></i>
                                <i v-if="files[_getExt(item[fileProps.url])]"
                                    :class="files[_getExt(item[fileProps.url])].icon"
                                    :style="{ color: files[_getExt(item[fileProps.url])].color }"></i>
                                <i v-else class="sc-icon-file-list-fill" style="color: #999;"></i>
                            </div>
                        </div>
                        <p :title="item[fileProps.fileName]">{{item[fileProps.fileName]}}</p>
                        <p :title="item[fileProps.fileName]">{{ item[fileProps.fileName] }}</p>
                    </div>
                </el-scrollbar>
            </div>
            <div class="sc-file-select__pagination">
                <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
                <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
            </div>
            <div class="sc-file-select__do">
                <slot name="do"></slot>
                <el-button type="primary" :disabled="value.length<=0" @click="submit">确 定</el-button>
                <el-button type="primary" :disabled="value.length <= 0" @click="submit">确 定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import config from "@/config/fileSelect"
import config from "@/config/fileSelect"

    export default {
        props: {
            modelValue: null,
            hideUpload: { type: Boolean, default: false },
            multiple: { type: Boolean, default: false },
            max: {type: Number, default: config.max},
            onlyImage: { type: Boolean, default: false },
            maxSize: {type: Number, default: config.maxSize},
export default {
    props: {
        modelValue: null,
        hideUpload: { type: Boolean, default: false },
        multiple: { type: Boolean, default: false },
        max: { type: Number, default: config.max },
        onlyImage: { type: Boolean, default: false },
        maxSize: { type: Number, default: config.maxSize },
    },
    data() {
        return {
            keyword: null,
            pageSize: 20,
            total: 0,
            currentPage: 1,
            data: [],
            menu: [],
            menuId: '',
            value: this.multiple ? [] : '',
            fileList: [],
            accept: this.onlyImage ? "image/gif, image/jpeg, image/png" : "",
            listLoading: false,
            menuLoading: false,
            treeProps: config.menuProps,
            fileProps: config.fileProps,
            files: config.files
        }
    },
    watch: {
        multiple() {
            this.value = this.multiple ? [] : ''
            this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.value)));
        }
    },
    mounted() {
        this.getMenu()
        this.getData()
    },
    methods: {
        //获取分类数据
        async getMenu() {
            this.menuLoading = true
            var res = await config.menuApiObj.get()
            this.menu = res.data
            this.menuLoading = false
        },
        data() {
            return {
                keyword: null,
                pageSize: 20,
                total: 0,
                currentPage: 1,
                data: [],
                menu: [],
                menuId: '',
                value: this.multiple ? [] : '',
                fileList: [],
                accept: this.onlyImage ? "image/gif, image/jpeg, image/png" : "",
                listLoading: false,
                menuLoading: false,
                treeProps: config.menuProps,
                fileProps: config.fileProps,
                files: config.files
        //获取列表数据
        async getData() {
            this.listLoading = true
            var reqData = {
                [config.request.menuKey]: this.menuId,
                [config.request.page]: this.currentPage,
                [config.request.pageSize]: this.pageSize,
                [config.request.keyword]: this.keyword
            }
        },
        watch: {
            multiple(){
                this.value = this.multiple ? [] : ''
                this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.value)));
            if (this.onlyImage) {
                reqData.type = 'image'
            }
            var res = await config.listApiObj.get(reqData)
            var parseData = config.listParseData(res)
            this.data = parseData.rows
            this.total = parseData.total
            this.listLoading = false
            this.$refs.scrollbar.setScrollTop(0)
        },
        mounted() {
            this.getMenu()
        //树点击事件
        groupClick(data) {
            this.menuId = data.id
            this.currentPage = 1
            this.keyword = null
            this.getData()
        },
        methods: {
            //获取分类数据
            async getMenu(){
                this.menuLoading = true
                var res = await config.menuApiObj.get()
                this.menu = res.data
                this.menuLoading = false
            },
            //获取列表数据
            async getData(){
                this.listLoading = true
                var reqData = {
                    [config.request.menuKey]: this.menuId,
                    [config.request.page]: this.currentPage,
                    [config.request.pageSize]: this.pageSize,
                    [config.request.keyword]: this.keyword
        //分页刷新表格
        reload() {
            this.getData()
        },
        search() {
            this.currentPage = 1
            this.getData()
        },
        select(item) {
            const itemUrl = item[this.fileProps.url]
            if (this.multiple) {
                if (this.value.includes(itemUrl)) {
                    this.value.splice(this.value.findIndex(f => f == itemUrl), 1)
                } else {
                    this.value.push(itemUrl)
                }
                if(this.onlyImage){
                    reqData.type = 'image'
            } else {
                if (this.value.includes(itemUrl)) {
                    this.value = ''
                } else {
                    this.value = itemUrl
                }
                var res = await config.listApiObj.get(reqData)
                var parseData = config.listParseData(res)
                this.data = parseData.rows
                this.total = parseData.total
                this.listLoading = false
                this.$refs.scrollbar.setScrollTop(0)
            },
            //树点击事件
            groupClick(data){
                this.menuId = data.id
                this.currentPage = 1
                this.keyword = null
                this.getData()
            },
            //分页刷新表格
            reload(){
                this.getData()
            },
            search(){
                this.currentPage = 1
                this.getData()
            },
            select(item){
                const itemUrl = item[this.fileProps.url]
                if(this.multiple){
                    if(this.value.includes(itemUrl)){
                        this.value.splice(this.value.findIndex(f => f == itemUrl), 1)
                    }else{
                        this.value.push(itemUrl)
                    }
                }else{
                    if(this.value.includes(itemUrl)){
                        this.value = ''
                    }else{
                        this.value = itemUrl
                    }
                }
            },
            submit(){
                const value = JSON.parse(JSON.stringify(this.value))
                this.$emit('update:modelValue', value);
                this.$emit('submit', value);
            },
            //上传处理
            uploadChange(file, fileList){
                file.tempImg = URL.createObjectURL(file.raw);
                this.fileList = fileList
            },
            uploadBefore(file){
                const maxSize = file.size / 1024 / 1024 < this.maxSize;
                if (!maxSize) {
                    this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
                    return false;
                }
            },
            uploadRequest(param){
                var apiObj = config.apiObj;
                const data = new FormData();
                data.append("file", param.file);
                data.append([config.request.menuKey], this.menuId);
                apiObj.post(data, {
                    onUploadProgress: e => {
                        param.onProgress(e)
                    }
                }).then(res => {
                    param.onSuccess(res)
                }).catch(err => {
                    param.onError(err)
                })
            },
            uploadProcess(event, file){
                file.progress = Number((event.loaded / event.total * 100).toFixed(2))
            },
            uploadSuccess(res, file){
                this.fileList.splice(this.fileList.findIndex(f => f.uid == file.uid), 1)
                var response = config.uploadParseData(res);
                this.data.unshift({
                    [this.fileProps.key]: response.id,
                    [this.fileProps.fileName]: response.fileName,
                    [this.fileProps.url]: response.url
                })
                if(!this.multiple){
                    this.value = response.url
                }
            },
            uploadError(err){
                this.$notify.error({
                    title: '上传文件错误',
                    message: err
                })
            },
            //内置函数
            _isImg(fileUrl){
                const imgExt = ['.jpg', '.jpeg', '.png', '.gif', '.bmp']
                const fileExt = fileUrl.substring(fileUrl.lastIndexOf("."))
                return imgExt.indexOf(fileExt) != -1
            },
            _getExt(fileUrl){
                return fileUrl.substring(fileUrl.lastIndexOf(".") + 1)
            }
        },
        submit() {
            const value = JSON.parse(JSON.stringify(this.value))
            this.$emit('update:modelValue', value);
            this.$emit('submit', value);
        },
        //上传处理
        uploadChange(file, fileList) {
            file.tempImg = URL.createObjectURL(file.raw);
            this.fileList = fileList
        },
        uploadBefore(file) {
            const maxSize = file.size / 1024 / 1024 < this.maxSize;
            if (!maxSize) {
                this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
                return false;
            }
        },
        uploadRequest(param) {
            var apiObj = config.apiObj;
            const data = new FormData();
            data.append("file", param.file);
            data.append([config.request.menuKey], this.menuId);
            apiObj.post(data, {
                onUploadProgress: e => {
                    param.onProgress(e)
                }
            }).then(res => {
                param.onSuccess(res)
            }).catch(err => {
                param.onError(err)
            })
        },
        uploadProcess(event, file) {
            file.progress = Number((event.loaded / event.total * 100).toFixed(2))
        },
        uploadSuccess(res, file) {
            this.fileList.splice(this.fileList.findIndex(f => f.uid == file.uid), 1)
            var response = config.uploadParseData(res);
            this.data.unshift({
                [this.fileProps.key]: response.id,
                [this.fileProps.fileName]: response.fileName,
                [this.fileProps.url]: response.url
            })
            if (!this.multiple) {
                this.value = response.url
            }
        },
        uploadError(err) {
            this.$notify.error({
                title: '上传文件错误',
                message: err
            })
        },
        //内置函数
        _isImg(fileUrl) {
            const imgExt = ['.jpg', '.jpeg', '.png', '.gif', '.bmp']
            const fileExt = fileUrl.substring(fileUrl.lastIndexOf("."))
            return imgExt.indexOf(fileExt) != -1
        },
        _getExt(fileUrl) {
            return fileUrl.substring(fileUrl.lastIndexOf(".") + 1)
        }
    }
}
</script>

<style scoped>
    .sc-file-select {display: flex;}
    .sc-file-select__files {flex: 1;}
.sc-file-select {
    display: flex;
}

    .sc-file-select__list {height:400px;}
    .sc-file-select__item {display: inline-block;float: left;margin:0 15px 25px 0;width:110px;cursor: pointer;}
    .sc-file-select__item__file {width:110px;height:110px;position: relative;}
    .sc-file-select__item__file .el-image {width:110px;height:110px;}
    .sc-file-select__item__box {position: absolute;top:0;right:0;bottom:0;left:0;border: 2px solid var(--el-color-success);z-index: 1;display: none;}
    .sc-file-select__item__box::before {content: '';position: absolute;top:0;right:0;bottom:0;left:0;background: var(--el-color-success);opacity: 0.2;display: none;}
    .sc-file-select__item:hover .sc-file-select__item__box {display: block;}
    .sc-file-select__item.active .sc-file-select__item__box {display: block;}
    .sc-file-select__item.active .sc-file-select__item__box::before {display: block;}
    .sc-file-select__item p {margin-top: 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;text-align: center;}
    .sc-file-select__item__checkbox {position: absolute;width: 20px;height: 20px;top:7px;right:7px;z-index: 2;background: rgba(0,0,0,0.2);border: 1px solid #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;}
    .sc-file-select__item__checkbox i {font-size: 14px;color: #fff;font-weight: bold;display: none;}
    .sc-file-select__item__select {position: absolute;width: 20px;height: 20px;top:0px;right:0px;z-index: 2;background: var(--el-color-success);display: none;flex-direction: column;align-items: center;justify-content: center;}
    .sc-file-select__item__select i {font-size: 14px;color: #fff;font-weight: bold;}
    .sc-file-select__item.active .sc-file-select__item__checkbox {background: var(--el-color-success);}
    .sc-file-select__item.active .sc-file-select__item__checkbox i {display: block;}
    .sc-file-select__item.active .sc-file-select__item__select {display: flex;}
    .sc-file-select__item__file .item-file {width:110px;height:110px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
    .sc-file-select__item__file .item-file i {font-size: 40px;}
    .sc-file-select__item__file .item-file.item-file-doc {color: #409eff;}
.sc-file-select__files {
    flex: 1;
}

    .sc-file-select__item__upload {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;background: rgba(255,255,255,0.7);display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-file-select__list {
    height: 400px;
}

    .sc-file-select__side {width: 200px;margin-right: 15px;border-right: 1px solid rgba(128,128,128,0.2);display: flex;flex-flow: column;}
    .sc-file-select__side-menu {flex: 1;}
    .sc-file-select__side-msg {height:32px;line-height: 32px;}
.sc-file-select__item {
    display: inline-block;
    float: left;
    margin: 0 15px 25px 0;
    width: 110px;
    cursor: pointer;
}

    .sc-file-select__top {margin-bottom: 15px;display: flex;justify-content: space-between;}
    .sc-file-select__upload {display: inline-block;}
    .sc-file-select__top .tips {font-size: 12px;margin-left: 10px;color: #999;}
    .sc-file-select__top .tips i {font-size: 14px;margin-right: 5px;position: relative;bottom: -0.125em;}
    .sc-file-select__pagination {margin:15px 0;}
.sc-file-select__item__file {
    width: 110px;
    height: 110px;
    position: relative;
}

    .sc-file-select__do {text-align: right;}
.sc-file-select__item__file .el-image {
    width: 110px;
    height: 110px;
}

.sc-file-select__item__box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid var(--el-color-success);
    z-index: 1;
    display: none;
}

.sc-file-select__item__box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--el-color-success);
    opacity: 0.2;
    display: none;
}

.sc-file-select__item:hover .sc-file-select__item__box {
    display: block;
}

.sc-file-select__item.active .sc-file-select__item__box {
    display: block;
}

.sc-file-select__item.active .sc-file-select__item__box::before {
    display: block;
}

.sc-file-select__item p {
    margin-top: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-overflow: ellipsis;
    text-align: center;
}

.sc-file-select__item__checkbox {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 7px;
    right: 7px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-file-select__item__checkbox i {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    display: none;
}

.sc-file-select__item__select {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    right: 0px;
    z-index: 2;
    background: var(--el-color-success);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-file-select__item__select i {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

.sc-file-select__item.active .sc-file-select__item__checkbox {
    background: var(--el-color-success);
}

.sc-file-select__item.active .sc-file-select__item__checkbox i {
    display: block;
}

.sc-file-select__item.active .sc-file-select__item__select {
    display: flex;
}

.sc-file-select__item__file .item-file {
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-file-select__item__file .item-file i {
    font-size: 40px;
}

.sc-file-select__item__file .item-file.item-file-doc {
    color: #409eff;
}

.sc-file-select__item__upload {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-file-select__side {
    width: 200px;
    margin-right: 15px;
    border-right: 1px solid rgba(128, 128, 128, 0.2);
    display: flex;
    flex-flow: column;
}

.sc-file-select__side-menu {
    flex: 1;
}

.sc-file-select__side-msg {
    height: 32px;
    line-height: 32px;
}

.sc-file-select__top {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.sc-file-select__upload {
    display: inline-block;
}

.sc-file-select__top .tips {
    font-size: 12px;
    margin-left: 10px;
    color: #999;
}

.sc-file-select__top .tips i {
    font-size: 14px;
    margin-right: 5px;
    position: relative;
    bottom: -0.125em;
}

.sc-file-select__pagination {
    margin: 15px 0;
}

.sc-file-select__do {
    text-align: right;
}
</style>

 src/views/console/basic-data/material-warehousing-data/material-storage.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-07 22:46:30
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-11 20:53:42
 * @LastEditTime: 2024-06-16 16:17:13
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/material-storage.vue
-->
<template>
@@ -14,8 +14,8 @@
                <el-main>
                    <el-container>
                        <el-aside width="200px" v-loading="showGrouploading">
                            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="props"
                                @node-click="nodeClick">
                            <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id"
                                :data="treeData" :props="props" @node-click="nodeClick">
                                <template #default="{ node, data }">
                                    <span class="custom-tree-node">
                                        <span :class="data.isArea ? 'treedisabled' : ''">{{

 src/views/console/basic-data/material-warehousing-data/reservoir-location/reservoir-location.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-07 22:51:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-12 13:14:41
 * @LastEditTime: 2024-06-16 16:17:19
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/reservoir-location/reservoir-location.vue
-->
<template>
@@ -11,8 +11,9 @@
                <el-aside width="200px" v-loading="showGrouploading">
                    <el-container>
                        <el-main>
                            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="props"
                                @node-click="nodeClick" highlight-current :current-node-key="params.areaId">
                            <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id"
                                :data="treeData" :props="props" @node-click="nodeClick" highlight-current
                                :current-node-key="params.areaId">
                                <template #default="{ node, data }">
                                    <div class="custom-tree-node">
                                        <span :class="data.isArea ? 'treedisabled' : ''">{{

 src/views/console/system/vision-component-modify.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:18:47
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 22:10:21
 * @LastEditTime: 2024-06-16 16:17:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/system/vision-component-modify.vue
-->
<template>
@@ -9,8 +9,8 @@
        <el-card shadow="never">
            <el-container>
                <el-aside width="220px">
                    <el-tree default-expand-all style="max-width: 600px" :data="treeData" :props="defaultProps"
                        @node-click="handleNodeClick" />
                    <el-tree :expand-on-click-node="false" default-expand-all style="max-width: 600px" :data="treeData"
                        :props="defaultProps" @node-click="handleNodeClick" />
                </el-aside>
                <el-container>
                    <el-header style="justify-content: flex-start;">

 src/views/console/tooling/Tray.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-12 20:02:31
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-19 13:57:46
 * @LastEditTime: 2024-06-16 16:18:18
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/Tray.vue
-->
<template>
@@ -9,10 +9,11 @@
        <el-aside width="200px">
            <el-container>
                <el-main>
                    <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
                        label: 'name',
                        disabled: 'isGroup'
                    }" @node-click="nodeClick">
                    <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id" :data="treeData"
                        :props="{
                            label: 'name',
                            disabled: 'isGroup'
                        }" @node-click="nodeClick">
                        <template #default="{ node, data }">
                            <div :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                                <span>{{ node.label || data.code }}</span>

 src/views/console/tooling/fixture.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-12 20:02:31
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-16 16:12:24
 * @LastEditTime: 2024-06-16 16:17:58
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/fixture.vue
-->
<template>
@@ -9,10 +9,11 @@
        <el-aside width="200px">
            <el-container>
                <el-main>
                    <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
                        label: 'name',
                        disabled: 'isGroup'
                    }" @node-click="nodeClick">
                    <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id" :data="treeData"
                        :props="{
                            label: 'name',
                            disabled: 'isGroup'
                        }" @node-click="nodeClick">
                        <template #default="{ node, data }">
                            <div :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                                <span>{{ node.label || data.code }}</span>

 src/views/console/tooling/tray-fixturePreview.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-05-12 20:02:31
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-16 22:38:31
 * @LastEditTime: 2024-06-16 16:18:09
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/tray-fixturePreview.vue
-->
<template>
    <el-container>
        <el-aside width="200px">
            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
            <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id" :data="treeData" :props="{
                label: 'name',
                disabled: 'isGroup'
            }" @node-click="nodeClick">

 src/views/console/workstation/index.vue

@@ -7,11 +7,10 @@
                        <el-aside width="200px" v-loading="showGrouploading">
                            <el-container>
                                <el-main class="nopadding">
                                    <el-tree ref="group" class="menu" node-key="id" :data="group"
                                        :current-node-key="treeCheckKey" :highlight-current="true"
                                        :expand-on-click-node="false" :check-on-click-node="true"
                                        :default-expanded-keys="[1]" :render-content="renderContent"
                                        @node-click="groupClick1"></el-tree>
                                    <el-tree :expand-on-click-node="false" ref="group" class="menu" node-key="id"
                                        :data="group" :current-node-key="treeCheckKey" :highlight-current="true"
                                        :check-on-click-node="true" :default-expanded-keys="[1]"
                                        :render-content="renderContent" @node-click="groupClick1"></el-tree>
                                </el-main>
                            </el-container>
                        </el-aside>

 src/views/dnc/craft/catalog/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-21 22:46:05
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-22 00:02:25
 * @LastEditTime: 2024-06-16 16:18:35
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/craft/catalog/index.vue
-->
<template>
@@ -9,7 +9,7 @@
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container>
                <el-aside width="200px">
                    <el-tree ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"

 src/views/dnc/craft/document/File.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-06-12 22:07:23
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-13 00:07:27
 * @LastEditTime: 2024-06-16 16:18:43
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/craft/document/File.vue
-->
<template>
@@ -16,9 +16,10 @@
                                    <el-input style="width: 180px;" v-model="filterText" placeholder="请输入关键词进行过滤" />
                                </el-col>
                                <el-col style="margin-top: 8px;">
                                    <el-tree ref="treeRef" default-expand-all node-key="id" :data="treeData" :props="{
                                        label: 'name',
                                    }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                    <el-tree ref="treeRef" :expand-on-click-node="false" default-expand-all
                                        node-key="id" :data="treeData" :props="{
                                            label: 'name',
                                        }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                        :current-node-key="selectNode?.id">
                                        <template #default="{ node, data }">
                                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
@@ -61,10 +62,11 @@
                                    <el-input style="width: 180px;" v-model="filterText" placeholder="请输入关键词进行过滤" />
                                </el-col>
                                <el-col style="margin-top: 8px;">
                                    <el-tree :load="loadNode" ref="treeRef" default-expand-all node-key="id" :props="{
                                        label: 'name',
                                        hasChildren: 'id'
                                    }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                    <el-tree :expand-on-click-node="false" :load="loadNode" ref="treeRef"
                                        default-expand-all node-key="id" :props="{
                                            label: 'name',
                                            hasChildren: 'id'
                                        }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                        :current-node-key="selectNode?.id" lazy>
                                        <template #default="{ node, data }">
                                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
@@ -104,10 +106,11 @@
                                    <el-input style="width: 180px;" v-model="filterText" placeholder="请输入关键词进行过滤" />
                                </el-col>
                                <el-col style="margin-top: 8px;">
                                    <el-tree :load="loadNode1" ref="treeRef" default-expand-all node-key="id" :props="{
                                        label: 'name',
                                        hasChildren: 'id'
                                    }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                    <el-tree :expand-on-click-node="false" :load="loadNode1" ref="treeRef"
                                        default-expand-all node-key="id" :props="{
                                            label: 'name',
                                            hasChildren: 'id'
                                        }" @node-click="nodeClick" :filter-node-method="filterNode" highlight-current
                                        :current-node-key="selectNode?.id" lazy>
                                        <template #default="{ node, data }">
                                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">

 src/views/dnc/craft/document/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-26 16:12:09
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-13 00:04:32
 * @LastEditTime: 2024-06-16 16:19:02
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/craft/document/index.vue
-->
<!--
@@ -15,7 +15,7 @@
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container>
                <el-aside width="200px">
                    <el-tree ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"

 src/views/dnc/document/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-16 22:40:01
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-16 15:35:03
 * @LastEditTime: 2024-06-16 16:19:08
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/document/index.vue
-->
<template>
@@ -11,8 +11,8 @@
                <el-aside width="200px">
                    <el-container>
                        <el-main>
                            <el-tree expand-on-click-node default-expand-all ref="tree" node-key="id" :data="treeData"
                                :props="{
                            <el-tree :expand-on-click-node="false" default-expand-all ref="tree" node-key="id"
                                :data="treeData" :props="{
                                    label: 'name',
                                }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                <template #default="{ node, data }">

 src/views/dnc/file/admin/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-20 21:43:10
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-16 15:35:21
 * @LastEditTime: 2024-06-16 16:19:14
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/file/admin/index.vue
-->
<template>
@@ -9,7 +9,7 @@
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container>
                <el-aside width="200px">
                    <el-tree ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" :load="loadNode" @node-click="nodeClick" lazy></el-tree>

 src/views/dnc/file/catalog/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-21 22:46:05
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-21 23:55:40
 * @LastEditTime: 2024-06-16 16:19:19
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/file/catalog/index.vue
-->
<template>
@@ -9,7 +9,7 @@
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container>
                <el-aside width="200px">
                    <el-tree ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"

 src/views/dnc/setting/FTP.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-26 22:26:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-02 21:20:21
 * @LastEditTime: 2024-06-16 16:19:27
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/setting/FTP.vue
-->
<template>
@@ -61,10 +61,11 @@
                            </el-icon> -->
                        </div>
                    </div>
                    <el-tree v-if="rootNodeId && showTree" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"
                    <el-tree :expand-on-click-node="false" v-if="rootNodeId && showTree" ref="group" node-key="id"
                        :props="{
                            label: 'name',
                            hasChildren: 'id'
                        }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"
                        lazy>
                        <template #default="{ node, data }">
                            <div class="custom-tree-node">

 src/views/dnc/station-file/File.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-22 23:37:07
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-05 22:52:06
 * @LastEditTime: 2024-06-16 16:19:33
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/station-file/File.vue
-->
<template>
@@ -73,13 +73,13 @@
        <scDialog v-model="visible">
            <el-tabs v-model="activeName" type="card" class="demo-tabs">
                <el-tab-pane label="归档目录" name="1">
                    <el-tree v-if="activeName === '1'" ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" v-if="activeName === '1'" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" show-checkbox :load="loadNode" lazy></el-tree>
                </el-tab-pane>
                <el-tab-pane label="工艺管理" name="2">
                    <el-tree v-if="activeName === '2'" ref="group" node-key="id" :props="{
                    <el-tree :expand-on-click-node="false" v-if="activeName === '2'" ref="group" node-key="id" :props="{
                        label: 'name',
                        hasChildren: 'id'
                    }" show-checkbox :load="loadNode1" lazy></el-tree>

 src/views/dnc/transport/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-26 21:59:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-13 23:17:58
 * @LastEditTime: 2024-06-16 16:19:49
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/transport/index.vue
-->
<template>
@@ -13,9 +13,10 @@
                        <el-col :span="8" :gutter="20">
                            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                                <el-tab-pane label="我的文档" name="1">
                                    <el-tree default-expand-all ref="tree" node-key="id" :data="treeData" :props="{
                                        label: 'name',
                                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                    <el-tree default-expand-all ref="tree" :expand-on-click-node="false" node-key="id"
                                        :data="treeData" :props="{
                                            label: 'name',
                                        }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                        <template #default="{ node, data }">
                                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                                                <span>{{
@@ -25,11 +26,12 @@
                                    </el-tree>
                                </el-tab-pane>
                                <el-tab-pane label="工艺管理" name="2">
                                    <el-tree default-expand-all ref="tree" node-key="id" :data="treeData1" :props="{
                                        label: (data, node) => {
                                            return data.name || data.artName
                                        },
                                    }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                    <el-tree default-expand-all :expand-on-click-node="false" ref="tree" node-key="id"
                                        :data="treeData1" :props="{
                                            label: (data, node) => {
                                                return data.name || data.artName
                                            },
                                        }" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id">
                                        <template #default="{ node, data }">
                                            <span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
                                                <span>{{

 src/views/master/frock/tray-deposit/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-07 22:46:30
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-12 17:50:26
 * @LastEditTime: 2024-06-16 16:20:01
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/frock/tray-deposit/index.vue
-->
<template>
@@ -14,8 +14,8 @@
                <el-main>
                    <el-container>
                        <el-aside width="200px" v-loading="showGrouploading">
                            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="props"
                                @node-click="nodeClick">
                            <el-tree :expand-on-click-node="false" default-expand-all ref="group" node-key="id"
                                :data="treeData" :props="props" @node-click="nodeClick">
                                <template #default="{ node, data }">
                                    <span class="custom-tree-node">
                                        <span :class="data.isArea ? 'treedisabled' : ''">{{
@@ -75,10 +75,11 @@
            </el-containter>
        </el-card>
        <el-dialog v-model="dialogVisible" title="添加" width="500">
            <el-tree show-checkbox default-expand-all ref="group1" node-key="id" :data="todoList" :props="{
                label: 'name',
                disabled: 'isGroup'
            }">
            <el-tree :expand-on-click-node="false" show-checkbox default-expand-all ref="group1" node-key="id"
                :data="todoList" :props="{
                    label: 'name',
                    disabled: 'isGroup'
                }">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{

 src/views/mdc/MYTree.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-04-18 19:53:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-05 21:46:20
 * @LastEditTime: 2024-06-16 16:21:59
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue
-->
<template>
    <el-tree ref="treeRef" v-bind="$attrs" :show-checkbox="showCheckbox" :current-node-key="currentNodeKey"
        node-key="id" :props="defalutProps" :data="data" @check-change="checkChange" @node-click="handleNodeClick"
        highlight-current default-expand-all :expand-on-click-node="false" :render-content="renderContent"></el-tree>
    <el-tree :expand-on-click-node="false" ref="treeRef" v-bind="$attrs" :show-checkbox="showCheckbox"
        :current-node-key="currentNodeKey" node-key="id" :props="defalutProps" :data="data" @check-change="checkChange"
        @node-click="handleNodeClick" highlight-current default-expand-all :render-content="renderContent"></el-tree>
</template>

<script>

 src/views/setting/dic/index.vue

@@ -6,15 +6,19 @@
                    <el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
                        <template #default="{node, data}">
                    <el-tree :expand-on-click-node="false" ref="dic" class="menu" node-key="id" :data="dicList"
                        :props="dicProps" :highlight-current="true" :filter-node-method="dicFilterNode"
                        @node-click="dicClick">
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span class="label">{{ node.label }}</span>
                                <span class="code">{{ data.code }}</span>
                                <span class="do">
                                    <el-button-group>
                                        <el-button icon="el-icon-edit" size="small" @click.stop="dicEdit(data)"></el-button>
                                        <el-button icon="el-icon-delete" size="small" @click.stop="dicDel(node, data)"></el-button>
                                        <el-button icon="el-icon-edit" size="small"
                                            @click.stop="dicEdit(data)"></el-button>
                                        <el-button icon="el-icon-delete" size="small"
                                            @click.stop="dicDel(node, data)"></el-button>
                                    </el-button-group>
                                </span>
                            </span>
@@ -22,7 +26,8 @@
                    </el-tree>
                </el-main>
                <el-footer style="height:51px;">
                    <el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
                    <el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;"
                        @click="addDic">字典分类</el-button>
                </el-footer>
            </el-container>
        </el-aside>
@@ -30,28 +35,33 @@
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
                    <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
                    <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0"
                        @click="batch_del"></el-button>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams" @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
                <scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams"
                    @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="" width="60">
                        <template #default>
                            <el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
                            <el-tag class="move" style="cursor: move;"><el-icon-d-caret
                                    style="width: 1em; height: 1em;" /></el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="name" width="150"></el-table-column>
                    <el-table-column label="键值" prop="key" width="150"></el-table-column>
                    <el-table-column label="是否有效" prop="yx" width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.yx" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_yx" active-value="1" inactive-value="0"></el-switch>
                            <el-switch v-model="scope.row.yx" @change="changeSwitch($event, scope.row)"
                                :loading="scope.row.$switch_yx" active-value="1" inactive-value="0"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" width="120">
                        <template #default="scope">
                            <el-button-group>
                                <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-button text type="primary" size="small"
                                    @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button text type="primary" size="small">删除</el-button>
@@ -65,269 +75,296 @@
        </el-container>
    </el-container>

    <dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
    <dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic = false"></dic-dialog>

    <list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
    <list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess"
        @closed="dialog.list = false"></list-dialog>

</template>

<script>
    import dicDialog from './dic'
    import listDialog from './list'
    import Sortable from 'sortablejs'
import dicDialog from './dic'
import listDialog from './list'
import Sortable from 'sortablejs'

    export default {
        name: 'dic',
        components: {
            dicDialog,
            listDialog
        },
        data() {
            return {
                dialog: {
                    dic: false,
                    info: false
                },
                showDicloading: true,
                dicList: [],
                dicFilterText: '',
                dicProps: {
                    label: 'name'
                },
                listApi: null,
                listApiParams: {},
                selection: []
export default {
    name: 'dic',
    components: {
        dicDialog,
        listDialog
    },
    data() {
        return {
            dialog: {
                dic: false,
                info: false
            },
            showDicloading: true,
            dicList: [],
            dicFilterText: '',
            dicProps: {
                label: 'name'
            },
            listApi: null,
            listApiParams: {},
            selection: []
        }
    },
    watch: {
        dicFilterText(val) {
            this.$refs.dic.filter(val);
        }
    },
    mounted() {
        this.getDic()
        this.rowDrop()
    },
    methods: {
        //加载树数据
        async getDic() {
            var res = await this.$API.system.dic.tree.get();
            this.showDicloading = false;
            this.dicList = res.data;
            //获取第一个节点,设置选中 & 加载明细列表
            var firstNode = this.dicList[0];
            if (firstNode) {
                this.$nextTick(() => {
                    this.$refs.dic.setCurrentKey(firstNode.id)
                })
                this.listApiParams = {
                    code: firstNode.code
                }
                this.listApi = this.$API.system.dic.list;
            }
        },
        watch: {
            dicFilterText(val) {
                this.$refs.dic.filter(val);
            }
        //树过滤
        dicFilterNode(value, data) {
            if (!value) return true;
            var targetText = data.name + data.code;
            return targetText.indexOf(value) !== -1;
        },
        mounted() {
            this.getDic()
            this.rowDrop()
        //树增加
        addDic() {
            this.dialog.dic = true
            this.$nextTick(() => {
                this.$refs.dicDialog.open()
            })
        },
        methods: {
            //加载树数据
            async getDic(){
                var res = await this.$API.system.dic.tree.get();
                this.showDicloading = false;
                this.dicList = res.data;
                //获取第一个节点,设置选中 & 加载明细列表
                var firstNode = this.dicList[0];
                if(firstNode){
                    this.$nextTick(() => {
                        this.$refs.dic.setCurrentKey(firstNode.id)
                    })
                    this.listApiParams = {
                        code: firstNode.code
                    }
                    this.listApi = this.$API.system.dic.list;
                }
            },
            //树过滤
            dicFilterNode(value, data){
                if (!value) return true;
                var targetText = data.name + data.code;
                return targetText.indexOf(value) !== -1;
            },
            //树增加
            addDic(){
                this.dialog.dic = true
                this.$nextTick(() => {
                    this.$refs.dicDialog.open()
                })
            },
            //编辑树
            dicEdit(data){
                this.dialog.dic = true
                this.$nextTick(() => {
                    var editNode = this.$refs.dic.getNode(data.id);
                    var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
                    data.parentId = editNodeParentId
                    this.$refs.dicDialog.open('edit').setData(data)
                })
            },
            //树点击事件
            dicClick(data){
                this.$refs.table.reload({
                    code: data.code
                })
            },
            //删除树
            dicDel(node, data){
                this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.showDicloading = true;
        //编辑树
        dicEdit(data) {
            this.dialog.dic = true
            this.$nextTick(() => {
                var editNode = this.$refs.dic.getNode(data.id);
                var editNodeParentId = editNode.level == 1 ? undefined : editNode.parent.data.id
                data.parentId = editNodeParentId
                this.$refs.dicDialog.open('edit').setData(data)
            })
        },
        //树点击事件
        dicClick(data) {
            this.$refs.table.reload({
                code: data.code
            })
        },
        //删除树
        dicDel(node, data) {
            this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.showDicloading = true;

                    //删除节点是否为高亮当前 是的话 设置第一个节点高亮
                    var dicCurrentKey = this.$refs.dic.getCurrentKey();
                    this.$refs.dic.remove(data.id)
                    if(dicCurrentKey == data.id){
                        var firstNode = this.dicList[0];
                        if(firstNode){
                            this.$refs.dic.setCurrentKey(firstNode.id);
                            this.$refs.table.upData({
                                code: firstNode.code
                            })
                        }else{
                            this.listApi = null;
                            this.$refs.table.tableData = []
                        }
                    }

                    this.showDicloading = false;
                    this.$message.success("操作成功")
                }).catch(() => {

                })
            },
            //行拖拽
            rowDrop(){
                const _this = this
                const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
                Sortable.create(tbody, {
                    handle: ".move",
                    animation: 300,
                    ghostClass: "ghost",
                    onEnd({ newIndex, oldIndex }) {
                        const tableData = _this.$refs.table.tableData
                        const currRow = tableData.splice(oldIndex, 1)[0]
                        tableData.splice(newIndex, 0, currRow)
                        _this.$message.success("排序成功")
                    }
                })
            },
            //添加明细
            addInfo(){
                this.dialog.list = true
                this.$nextTick(() => {
                    var dicCurrentKey = this.$refs.dic.getCurrentKey();
                    const data = {
                        dic: dicCurrentKey
                    }
                    this.$refs.listDialog.open().setData(data)
                })
            },
            //编辑明细
            table_edit(row){
                this.dialog.list = true
                this.$nextTick(() => {
                    this.$refs.listDialog.open('edit').setData(row)
                })
            },
            //删除明细
            async table_del(row, index){
                var reqData = {id: row.id}
                var res = await this.$API.demo.post.post(reqData);
                if(res.code == 200){
                    this.$refs.table.tableData.splice(index, 1);
                    this.$message.success("删除成功")
                }else{
                    this.$alert(res.message, "提示", {type: 'error'})
                }
            },
            //批量删除
            async batch_del(){
                this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    this.selection.forEach(item => {
                        this.$refs.table.tableData.forEach((itemI, indexI) => {
                            if (item.id === itemI.id) {
                                this.$refs.table.tableData.splice(indexI, 1)
                            }
                        })
                    })
                    loading.close();
                    this.$message.success("操作成功")
                }).catch(() => {

                })
            },
            //提交明细
            saveList(){
                this.$refs.listDialog.submit(async (formData) => {
                    this.isListSaveing = true;
                    var res = await this.$API.demo.post.post(formData);
                    this.isListSaveing = false;
                    if(res.code == 200){
                        //这里选择刷新整个表格 OR 插入/编辑现有表格数据
                        this.listDialogVisible = false;
                        this.$message.success("操作成功")
                    }else{
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
                })
            },
            //表格选择后回调事件
            selectionChange(selection){
                this.selection = selection;
            },
            //表格内开关事件
            changeSwitch(val, row){
                //1.还原数据
                row.yx = row.yx == '1'?'0':'1'
                //2.执行加载
                row.$switch_yx = true;
                //3.等待接口返回后改变值
                setTimeout(()=>{
                    delete row.$switch_yx;
                    row.yx = val;
                    this.$message.success(`操作成功id:${row.id} val:${val}`)
                }, 500)
            },
            //本地更新数据
            handleDicSuccess(data, mode){
                if(mode=='add'){
                    data.id = new Date().getTime()
                    if(this.dicList.length > 0){
                //删除节点是否为高亮当前 是的话 设置第一个节点高亮
                var dicCurrentKey = this.$refs.dic.getCurrentKey();
                this.$refs.dic.remove(data.id)
                if (dicCurrentKey == data.id) {
                    var firstNode = this.dicList[0];
                    if (firstNode) {
                        this.$refs.dic.setCurrentKey(firstNode.id);
                        this.$refs.table.upData({
                            code: data.code
                            code: firstNode.code
                        })
                    }else{
                        this.listApiParams = {
                            code: data.code
                    } else {
                        this.listApi = null;
                        this.$refs.table.tableData = []
                    }
                }

                this.showDicloading = false;
                this.$message.success("操作成功")
            }).catch(() => {

            })
        },
        //行拖拽
        rowDrop() {
            const _this = this
            const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
            Sortable.create(tbody, {
                handle: ".move",
                animation: 300,
                ghostClass: "ghost",
                onEnd({ newIndex, oldIndex }) {
                    const tableData = _this.$refs.table.tableData
                    const currRow = tableData.splice(oldIndex, 1)[0]
                    tableData.splice(newIndex, 0, currRow)
                    _this.$message.success("排序成功")
                }
            })
        },
        //添加明细
        addInfo() {
            this.dialog.list = true
            this.$nextTick(() => {
                var dicCurrentKey = this.$refs.dic.getCurrentKey();
                const data = {
                    dic: dicCurrentKey
                }
                this.$refs.listDialog.open().setData(data)
            })
        },
        //编辑明细
        table_edit(row) {
            this.dialog.list = true
            this.$nextTick(() => {
                this.$refs.listDialog.open('edit').setData(row)
            })
        },
        //删除明细
        async table_del(row, index) {
            var reqData = { id: row.id }
            var res = await this.$API.demo.post.post(reqData);
            if (res.code == 200) {
                this.$refs.table.tableData.splice(index, 1);
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },
        //批量删除
        async batch_del() {
            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                const loading = this.$loading();
                this.selection.forEach(item => {
                    this.$refs.table.tableData.forEach((itemI, indexI) => {
                        if (item.id === itemI.id) {
                            this.$refs.table.tableData.splice(indexI, 1)
                        }
                        this.listApi = this.$API.dic.info;
                    }
                    this.$refs.dic.append(data, data.parentId[0])
                    this.$refs.dic.setCurrentKey(data.id)
                }else if(mode=='edit'){
                    var editNode = this.$refs.dic.getNode(data.id);
                    //判断是否移动？
                    var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
                    if(editNodeParentId != data.parentId){
                        var obj = editNode.data;
                        this.$refs.dic.remove(data.id)
                        this.$refs.dic.append(obj, data.parentId[0])
                    }
                    Object.assign(editNode.data, data)
                }
            },
            //本地更新数据
            handleListSuccess(data, mode){
                if(mode=='add'){
                    data.id = new Date().getTime()
                    this.$refs.table.tableData.push(data)
                }else if(mode=='edit'){
                    this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
                        Object.assign(item, data)
                    })
                })
                loading.close();
                this.$message.success("操作成功")
            }).catch(() => {

            })
        },
        //提交明细
        saveList() {
            this.$refs.listDialog.submit(async (formData) => {
                this.isListSaveing = true;
                var res = await this.$API.demo.post.post(formData);
                this.isListSaveing = false;
                if (res.code == 200) {
                    //这里选择刷新整个表格 OR 插入/编辑现有表格数据
                    this.listDialogVisible = false;
                    this.$message.success("操作成功")
                } else {
                    this.$alert(res.message, "提示", { type: 'error' })
                }
            })
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //表格内开关事件
        changeSwitch(val, row) {
            //1.还原数据
            row.yx = row.yx == '1' ? '0' : '1'
            //2.执行加载
            row.$switch_yx = true;
            //3.等待接口返回后改变值
            setTimeout(() => {
                delete row.$switch_yx;
                row.yx = val;
                this.$message.success(`操作成功id:${row.id} val:${val}`)
            }, 500)
        },
        //本地更新数据
        handleDicSuccess(data, mode) {
            if (mode == 'add') {
                data.id = new Date().getTime()
                if (this.dicList.length > 0) {
                    this.$refs.table.upData({
                        code: data.code
                    })
                } else {
                    this.listApiParams = {
                        code: data.code
                    }
                    this.listApi = this.$API.dic.info;
                }
                this.$refs.dic.append(data, data.parentId[0])
                this.$refs.dic.setCurrentKey(data.id)
            } else if (mode == 'edit') {
                var editNode = this.$refs.dic.getNode(data.id);
                //判断是否移动？
                var editNodeParentId = editNode.level == 1 ? undefined : editNode.parent.data.id
                if (editNodeParentId != data.parentId) {
                    var obj = editNode.data;
                    this.$refs.dic.remove(data.id)
                    this.$refs.dic.append(obj, data.parentId[0])
                }
                Object.assign(editNode.data, data)
            }
        },
        //本地更新数据
        handleListSuccess(data, mode) {
            if (mode == 'add') {
                data.id = new Date().getTime()
                this.$refs.table.tableData.push(data)
            } else if (mode == 'edit') {
                this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
                    Object.assign(item, data)
                })
            }
        }
    }
}
</script>

<style scoped>
    .menu:deep(.el-tree-node__label) {display: flex;flex: 1;height:100%;}
    .custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
    .custom-tree-node .code {font-size: 12px;color: #999;}
    .custom-tree-node .do {display: none;}
    .custom-tree-node:hover .code {display: none;}
    .custom-tree-node:hover .do {display: inline-block;}
.menu:deep(.el-tree-node__label) {
    display: flex;
    flex: 1;
    height: 100%;
}

.custom-tree-node {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 24px;
    height: 100%;
}

.custom-tree-node .code {
    font-size: 12px;
    color: #999;
}

.custom-tree-node .do {
    display: none;
}

.custom-tree-node:hover .code {
    display: none;
}

.custom-tree-node:hover .do {
    display: inline-block;
}
</style>

 src/views/setting/log/index.vue

@@ -1,7 +1,8 @@
<template>
    <el-container>
        <el-aside width="220px">
            <el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false">
            <el-tree :expand-on-click-node="false" ref="category" class="menu" node-key="label" :data="category"
                :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true">
            </el-tree>
        </el-aside>
        <el-container>
@@ -9,7 +10,8 @@
                <el-container>
                    <el-header>
                        <div class="left-panel">
                            <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            <el-date-picker v-model="date" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </div>
                        <div class="right-panel">

@@ -22,9 +24,12 @@
                        <scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
                            <el-table-column label="级别" prop="level" width="60">
                                <template #default="scope">
                                    <el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
                                    <el-icon v-if="scope.row.level=='warn'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
                                    <el-icon v-if="scope.row.level=='info'" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
                                    <el-icon v-if="scope.row.level == 'error'"
                                        style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
                                    <el-icon v-if="scope.row.level == 'warn'"
                                        style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
                                    <el-icon v-if="scope.row.level == 'info'"
                                        style="color: #409EFF;"><el-icon-info-filled /></el-icon>
                                </template>
                            </el-table-column>
                            <el-table-column label="ID" prop="id" width="180"></el-table-column>
@@ -47,96 +52,95 @@
</template>

<script>
    import info from './info'
    import scEcharts from '@/components/scEcharts'
import info from './info'
import scEcharts from '@/components/scEcharts'

    export default {
        name: 'log',
        components: {
            info,
            scEcharts
        },
        data() {
            return {
                infoDrawer: false,
                logsChartOption: {
                    color: ['#409eff','#e6a23c','#f56c6c'],
                    grid: {
                        top: '0px',
                        left: '10px',
                        right: '10px',
                        bottom: '0px'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
                    },
                    yAxis: {
                        show: false,
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
                        type: 'bar',
                        stack: 'log',
                        barWidth: '15px'
                    },
                    {
                        data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
                        type: 'bar',
                        stack: 'log',
                        barWidth: '15px'
                    },
                    {
                        data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        type: 'bar',
                        stack: 'log',
                        barWidth: '15px'
                    }]
export default {
    name: 'log',
    components: {
        info,
        scEcharts
    },
    data() {
        return {
            infoDrawer: false,
            logsChartOption: {
                color: ['#409eff', '#e6a23c', '#f56c6c'],
                grid: {
                    top: '0px',
                    left: '10px',
                    right: '10px',
                    bottom: '0px'
                },
                category: [
                    {
                        label: '系统日志',
                        children: [
                            {label: 'debug'},
                            {label: 'info'},
                            {label: 'warn'},
                            {label: 'error'},
                            {label: 'fatal'}
                        ]
                    },
                    {
                        label: '应用日志',
                        children: [
                            {label: 'selfHelp'},
                            {label: 'WechatApp'}
                        ]
                    }
                ],
                date: [],
                apiObj: this.$API.system.log.list,
                search: {
                    keyword: ""
                }
            }
        },
        methods: {
            upsearch(){

                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
                },
                yAxis: {
                    show: false,
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
                    type: 'bar',
                    stack: 'log',
                    barWidth: '15px'
                },
                {
                    data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
                    type: 'bar',
                    stack: 'log',
                    barWidth: '15px'
                },
                {
                    data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    type: 'bar',
                    stack: 'log',
                    barWidth: '15px'
                }]
            },
            rowClick(row){
                this.infoDrawer = true
                this.$nextTick(() => {
                    this.$refs.info.setData(row)
                })
            category: [
                {
                    label: '系统日志',
                    children: [
                        { label: 'debug' },
                        { label: 'info' },
                        { label: 'warn' },
                        { label: 'error' },
                        { label: 'fatal' }
                    ]
                },
                {
                    label: '应用日志',
                    children: [
                        { label: 'selfHelp' },
                        { label: 'WechatApp' }
                    ]
                }
            ],
            date: [],
            apiObj: this.$API.system.log.list,
            search: {
                keyword: ""
            }
        }
    },
    methods: {
        upsearch() {

        },
        rowClick(row) {
            this.infoDrawer = true
            this.$nextTick(() => {
                this.$refs.info.setData(row)
            })
        }
    }
}
</script>

<style>
</style>
<style></style>

 src/views/template/list/tree.vue

@@ -6,7 +6,9 @@
                    <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
                    <el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''"
                        :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode"
                        @node-click="groupClick"></el-tree>
                </el-main>
            </el-container>
        </el-aside>
@@ -47,82 +49,81 @@
</template>

<script>
    export default {
        name: 'listTree',
        data() {
            return {
                groupFilterText: "",
                groupData: [
                    {
                        id: "",
                        label: "所有"
                    },
                    {
                        id: "1",
                        label: "华东总部",
                        children: [
                            {
                                id: "11",
                                label: "售前客服部"
                            },
                            {
                                id: "12",
                                label: "技术研发部"
                            },
                            {
                                id: "13",
                                label: "行政人事部"
                            }
                        ]
                    },
                    {
                        id: "2",
                        label: "华难总部",
                        children: [
                            {
                                id: "21",
                                label: "售前客服部"
                            },
                            {
                                id: "22",
                                label: "技术研发部"
                            }
                        ]
                    }
                ],
                list: {
                    apiObj: this.$API.demo.list
export default {
    name: 'listTree',
    data() {
        return {
            groupFilterText: "",
            groupData: [
                {
                    id: "",
                    label: "所有"
                },
                search: {
                    keyword: ""
                {
                    id: "1",
                    label: "华东总部",
                    children: [
                        {
                            id: "11",
                            label: "售前客服部"
                        },
                        {
                            id: "12",
                            label: "技术研发部"
                        },
                        {
                            id: "13",
                            label: "行政人事部"
                        }
                    ]
                },
                {
                    id: "2",
                    label: "华难总部",
                    children: [
                        {
                            id: "21",
                            label: "售前客服部"
                        },
                        {
                            id: "22",
                            label: "技术研发部"
                        }
                    ]
                }
            ],
            list: {
                apiObj: this.$API.demo.list
            },
            search: {
                keyword: ""
            }
        },
        watch: {
            groupFilterText(val) {
                this.$refs.group.filter(val);
            }
        },
        methods: {
            //树过滤
            groupFilterNode(value, data){
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //树点击事件
            groupClick(data){
                var params = {
                    groupId: data.id
                }
                this.$refs.table.reload(params)
            },
            //搜索
            upsearch(){
                this.$refs.table.upData(this.search)
            },
        }
    },
    watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val);
        }
    },
    methods: {
        //树过滤
        groupFilterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //树点击事件
        groupClick(data) {
            var params = {
                groupId: data.id
            }
            this.$refs.table.reload(params)
        },
        //搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
    }
}
</script>

<style>
</style>
<style></style>

 src/views/tpm/MachineTab.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-27 20:04:34
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-08 23:13:10
 * @LastEditTime: 2024-06-16 16:21:13
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/tpm/MachineTab.vue
-->
<template>
@@ -9,7 +9,7 @@
        <el-aside width="200px" v-loading="showGrouploading">
            <el-container>
                <el-main class="nopadding">
                    <el-tree ref="group" default-expand-all node-key="id" :data="group"
                    <el-tree :expand-on-click-node="false" ref="group" default-expand-all node-key="id" :data="group"
                        :current-node-key="params.groupId" :highlight-current="true" @node-click="nodeClick"></el-tree>
                </el-main>
            </el-container>