增加列表显示

gaoshp

2024-11-04 eef1ef0be935d4a3d8fc691b2666f41796b2d4a5

 src/views/console/authority/apiscope.vue

@@ -1,21 +1,22 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-05 11:36:50
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-10-05 21:24:27
 * @FilePath: /cps-web/src/views/console/authority/apiscope.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"/>
         <el-tree :data="tableData" row-key="id" :props="defalutProps" lazy :load="loadNode"
            @node-click="handleNodeClick" ref="treeRef" />
      </div>
      <div class="aposcope-right">
         <div>
            <el-button type="primary" @click="addData">+ 添加</el-button>
            <el-button type="danger" plain @click="delData">删除</el-button>
            <!-- <el-button type="primary" @click="addData">+ 添加</el-button> -->
            <!-- <el-button type="danger" plain @click="delData">删除</el-button> -->
         </div>
         <div class="right-content" v-if="searchDataList.length == 0">
            <div>
@@ -23,7 +24,9 @@
               <!-- <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 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>
@@ -32,16 +35,17 @@
            <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-drawer :title="'当前选中菜单路径' + drawerPath" v-model="drawer" :direction="direction" :before-close="handleClose"
         size="780" class="drawerClass">
         <el-form :inline="true" :model="drawerSearchData" label-width="110px">
            <el-form-item label="接口模块">
               <el-select v-model="drawerSearchData.moduleCode" style="width: 100%" size="small">
                  <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
                  <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%" size="small">
                  <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
                  <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id" />
               </el-select>
            </el-form-item>
            <el-form-item>
@@ -50,7 +54,8 @@
         </el-form>
         <div>
            <div class="dict-table">
               <el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%" class="multipleTableRef" @selection-change="drawerHandleSelectionChange">
               <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>
@@ -68,134 +73,134 @@
   </div>
</template>
<script>
   export default {
      name: "apiscope",
      data(){
         return {
            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: {
export default {
   name: "apiscope",
   data() {
      return {
         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() {

       },
      methods: {
         closeDrawer() {
            this.drawer = false;
         },
         drawerConfirm() {
            this.drawer = false;
         },
         searchHandleSelectionChange(selection) {
            this.searchSelection = selection;
         },
         drawerHandleSelectionChange() {
   },
   mounted() {
      //this.getMenuList();
   },
   components: {

         },
         drawerSearchclick() {
            this.drawerSearchData.menuId = this.searchData.menuId;
            var obj = {};
            for(var key in this.drawerSearchData) {
               if(this.drawerSearchData[key]) {
                  obj[key] = this.drawerSearchData[key];
               }
   },
   methods: {
      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();
            //    }
            // })
         }
         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>
@@ -204,48 +209,59 @@
   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;
   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 {
   font-size: 14px;
   ;
}
.right-content > div span:nth-child(2) {

.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;
}