1

lzhe

2024-05-12 f00e6c3b881c67ef3651d4f812230188af01faca

1

 src/views/console/base/code-rules.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,292 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-17 17:52:50
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="aposcope-main">
        <div class="aposcope-left">
            <div class="left-title">业务列表</div>
            <el-tree :data="tableData" row-key="id" :props="defalutProps" lazy :load="loadNode" @node-click="handleNodeClick" ref="treeRef"/>
        </div>
        <div class="aposcope-right">
            <div class="right-top">
                <div>
                    <el-button type="primary" @click="addData">+ æ·»åŠ è§„则</el-button>
                    <el-button type="danger" plain @click="delData" disabled>删除</el-button>
                </div>
                <el-button @click="openVisible">开启规则分类</el-button>
            </div>
            <div class="right-content" v-if="searchDataList.length == 0">
                <!-- <img src="./quesheng.bd026700.png" /> -->
                <div>
                    <span>暂无数据</span>
                    <!-- <span @click="addData">添加规则</span> -->
                </div>
            </div>
            <el-table v-if="searchDataList.length != 0" ref="searchDataListRef" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef" @selection-change="searchHandleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="moduleCode" label="接口模块"></el-table-column>
                <el-table-column prop="controllerCode" label="Controller"></el-table-column>
                <el-table-column prop="scopeName" label="action"></el-table-column>
                <el-table-column prop="httpMethod" label="Http方法"></el-table-column>
                <el-table-column prop="scopePath" label="api地址"></el-table-column>
            </el-table>
        </div>
        <el-drawer :title="'当前选中菜单路径'+drawerPath" v-model="drawer" :direction="direction" :before-close="handleClose" size="780" class="drawerClass">
            <el-form :inline="true" :model="drawerSearchData" abel-width="120px">
                <el-form-item label="接口模块">
                    <el-select v-model="drawerSearchData.moduleCode" style="width: 100%">
                        <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口Controller">
                    <el-select v-model="drawerSearchData.controllerCode" style="width: 100%">
                        <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="drawerSearchclick">搜索</el-button>
                </el-form-item>
            </el-form>
            <div>
                <div class="dict-table">
                    <el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%" class="multipleTableRef" @selection-change="drawerHandleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="className" label="接口模块"></el-table-column>
                        <el-table-column prop="controllerCode" label="Controller"></el-table-column>
                        <el-table-column prop="name" label="action"></el-table-column>
                        <el-table-column prop="httpMethod" label="Http方法"></el-table-column>
                        <el-table-column prop="url" label="api地址"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="drawer-foot">
                <el-button type="primary" @click="drawerConfirm" disabled>添加</el-button>
                <el-button @click="closeDrawer">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog title="规则分类" v-model="visible" :width="500">
            <el-form :model="classificationForm" :rules="classificationRules" ref="dialogForm" label-width="120px"
                label-position="center">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="分类规则" prop="code">
                            <el-input v-model="classificationForm.code" placeholder="分类规则" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类字典" prop="name">
                            <el-input v-model="classificationForm.name" placeholder="分类字典" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="classificationSubmit()">确定</el-button>
            </template>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: "apiscope",
        data(){
            return {
                classificationRules: {},
                classificationForm: {},
                isSaveing: false,
                visible: false,
                drawerPath: "",
                searchData: {
                    menuId: "",
                    size: "15",
                    current: "1"
                },
                searchDataList: [],  //右侧数据list
                aList: [],
                drawerSearchData: {
                    moduleCode: "",
                    controllerCode: "",
                    menuId: "",
                    size: "-1"
                },
                direction: "rtl",
                drawer: false,
                defalutProps: {
                    label: 'name',
                      children: 'children',
                    isLeaf: 'hasChildren'
                },
                parentId: "0",
                tableData: [],
                searchSelection: []
            }
        },
        created(){
			
        },
        mounted(){
            //this.getMenuList();
        },
        components: {

        },
        methods: {
            classificationSubmit() {

            },
            openVisible() {
                this.visible = true;
            },
            closeDrawer() {
                this.drawer = false;
            },
            drawerConfirm() {
                this.drawer = false;
            },
            searchHandleSelectionChange(selection) {
                this.searchSelection = selection;
            },
            drawerHandleSelectionChange() {

            },
            drawerSearchclick() {
                this.drawerSearchData.menuId = this.searchData.menuId;
                var obj = {};
                for(var key in this.drawerSearchData) {
                    if(this.drawerSearchData[key]) {
                        obj[key] = this.drawerSearchData[key];
                    }
                }
                this.$HTTP.get("/api/blade-system/resource-definition/page",obj).then(res=> {
                    if(res.code == 200) {
                        this.drawerTableData = res.data.records;
                    }
                })
            },
            handleClose(done) {
                done();
            },
            handleNodeClick(data) {
                this.drawerPath = data.name;
                console.log(data,data.name,222)
                this.searchData.menuId = data.id;
                this.$HTTP.get("/api/blade-system/api-scope/list",this.searchData).then(res=> {
                    if(res.code == 200) {
                        this.searchDataList = res.data.records;
                    }
                })
            },
            getMenuList() {
                // this.$HTTP.get("/api/blade-system/menu/lazy-list?parentId=0").then(res=> {
                //     if(res.code == 200) {
                //         this.tableData = res.data;
                //     }
                // })
            },
            loadNode(node, resolve, reject) {
                // if(node.data.id) {
                //     this.parentId = node.data.id;
                // }else {
                //     this.parentId = '0';
                // }
                // this.$HTTP.get("/api/blade-system/menu/lazy-list",{parentId: this.parentId}).then(res=> {
                //     if(res.code == 200) {
                //         res.data.forEach(node => {
                //             node.hasChildren = !node.hasChildren;
                //         });
                //         resolve(res.data);
                //     }
                // })
            },
            addData() {
                // this.drawerSearchclick();
                // this.drawer = true;
            },
            delData() {
                if(this.searchSelection.length == 0) {
                    this.$message({
                      message: '请选择至少一条数据',
                      type: 'warning'
                    });
                    return;
                }
                var selStr = "";
                this.searchSelection.map(item=> {
                    selStr += item.id + ","
                })
                selStr = selStr.replace(/,$/, '');
                var that = this;
                // this.$HTTP.post("/api/blade-system/data-scope/remove?ids="+selStr).then(res=> {
                //     if(res.code == 200) {
                //         that.$message.success("操作成功");
                //         that.drawerSearchclick();
                //     }
                // })
            }
        }
    }
</script>

<style scoped>
.aposcope-main {
    display: flex;
    min-height: 100%;
    margin: 8px;
}
.aposcope-left {
    width: 240px;
    margin-right: 8px;
    padding: 4px;
    background-color: #fff;
}
.aposcope-right {
    flex: 1;
    padding: 8px;
    background-color: #fff;
}
.left-title {
    font-size: 16px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e2e2e2;
    background-color: #409eff;
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.right-content {
    text-align: center;
}
.right-content img {
    width: 350px;
    height: 350px;
}
.right-content > div {
    font-size: 14px;;
}
.right-content > div span:nth-child(2) {
    margin-left: 8px;
    color: #409eff;
    cursor: pointer;
}
/deep/ .drawerClass {
    padding: 8px;
}
.datascope-drawer-btn {
    margin-bottom: 8px;
}
.drawer-foot {
    margin-top: 20px;
}
.right-top {
    display: flex;
    justify-content: space-between;
}
</style>