1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/console/system/menu.vue

@@ -2,72 +2,85 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 15:50:35
 * @LastEditTime: 2024-04-07 11:54:15
 * @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="dict-main">
      <el-form :inline="true" :model="searchData" abel-width="120px">
         <el-form-item label="菜单名称">
            <el-input v-model="searchData.test" placeholder="菜单名称" clearable />
         </el-form-item>
         <el-form-item label="菜单编号">
            <el-input v-model="searchData.test" placeholder="菜单编号" clearable />
         </el-form-item>
         <el-form-item label="菜单别名">
            <el-input v-model="searchData.test" placeholder="菜单别名" clearable />
         </el-form-item>
         <el-form-item label="所属应用">
            <el-input v-model="searchData.test" placeholder="所属应用" clearable />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
            <el-button @click="searchBtn">清空</el-button>
         </el-form-item>
      <el-form :inline="true" :model="searchData" label-width="80px">
         <el-row>
            <el-col :span="6">
               <el-form-item label="菜单名称">
                  <el-input v-model="searchData.name" placeholder="菜单名称" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="菜单编号">
                  <el-input v-model="searchData.code" placeholder="菜单编号" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="菜单别名">
                  <el-input v-model="searchData.alias" placeholder="菜单别名" clearable />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="所属应用">
                  <el-select v-model="searchData.belongApplication" style="width: 100%">
                     <el-option v-for="item in applicationList" :key="item.code" :label="item.name" :value="item.code"/>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item>
                  <el-button type="primary" @click="searchclick">搜索</el-button>
                  <el-button @click="clearSearch">清空</el-button>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div>
         <div class="dict-Btn">
            <div class="dict-btn-bottom"> 
               <el-button type="primary" @click="addPerson">+ 新增</el-button>
               <el-button type="danger" plain @click="delPerson">删除</el-button>
               <el-button type="primary" @click="addData">+ 新增</el-button>
               <el-button type="danger" plain @click="delData">删除</el-button>
            </div>
         </div>
         <div class="dict-table">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange" row-key="id" lazy :load="tableLoad" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
               <el-table-column type="selection" width="55" />
               <el-table-column prop="date" label="菜单名称"></el-table-column>
               <el-table-column prop="name" label="路由地址"></el-table-column>
               <el-table-column prop="name" label="菜单图标"></el-table-column>
               <el-table-column prop="name" label="菜单编号"></el-table-column>
               <el-table-column prop="name" label="菜单别名"></el-table-column>
               <el-table-column prop="name" label="新窗口"></el-table-column>
               <el-table-column prop="name" label="启用缓存"></el-table-column>
               <el-table-column prop="name" label="所属应用"></el-table-column>
               <el-table-column prop="name" label="菜单排序"></el-table-column>
               <el-table-column prop="name" label="菜单名称"></el-table-column>
               <el-table-column prop="path" label="路由地址"></el-table-column>
               <el-table-column prop="source" label="菜单图标"></el-table-column>
               <el-table-column prop="code" label="菜单编号"></el-table-column>
               <el-table-column prop="alias" label="菜单别名"></el-table-column>
               <el-table-column prop="isOpen" label="新窗口">
                  <template #default="scope">
                     <div>{{scope.row.isOpen == 0?"是":"否"}}</div>
                  </template>
               </el-table-column>
               <el-table-column prop="keepAlive" label="启用缓存">
                  <template #default="scope">
                     <div>{{scope.row.keepAlive == 1?"是":"否"}}</div>
                  </template>
               </el-table-column>
               <el-table-column prop="belongApplication" label="所属应用"></el-table-column>
               <el-table-column prop="sort" label="菜单排序"></el-table-column>
               <el-table-column fixed="right" label="操作" width="200">
                  <template #default="scope">
                     <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                     <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                     <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     <el-button text type="primary" size="small" @click="addPerson(scope.row, scope.$index)">新增子项</el-button>
                     <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index,'fixed')">新增子项</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage4"
               :page-sizes="[100, 200, 300, 400]"
               :page-size="100"
               layout="total, sizes, prev, pager, next, jumper"
               :total="400">
            </el-pagination>
         </div>
      </div>
   </div>
   
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
   <save-dialog v-if="dialog.save" ref="saveDialog" :applicationList="applicationList" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
   import saveDialog from './addMenu'
@@ -75,8 +88,14 @@
      name: "allocation",
      data(){
         return {
            selection: [],
            applicationList: [],
            searchData: {
               test: ""
               name: "",
               code: "",
               alias: "",
               belongApplication: "",
               parentId: "0"
            },
            dialog: {
               save: false,
@@ -89,48 +108,59 @@
               label: '黄金糕'
            }],
            input3: '',
            tableData: [{
               date: '2016-05-02',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1518 弄',
               zip: 200333
               }, {
               date: '2016-05-04',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1517 弄',
               zip: 200333
               }, {
               date: '2016-05-01',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1519 弄',
               zip: 200333
               }, {
               date: '2016-05-03',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1516 弄',
               zip: 200333
            }]
            tableData: []
         }
      },
      created(){
         
      },
      mounted(){
			
         this.getApplicationList();
         this.searchBtn();
      },
      components: {
         saveDialog
      },
      methods: {
         searchBtn() {},
         handleSuccess(formAddMenu) {
            this.searchData.parentId = formAddMenu.parentId;
            this.clearSearch();
         },
         tableLoad(row,treeNode,resolve) {
            this.searchData.parentId= row.id;
            this.$HTTP.get("/api/blade-system/menu/lazy-list",this.searchData).then(res=> {
               if(res.code == 200) {
                  resolve(res.data);
               }
            })
         },
         clearSearch() {
            this.searchData= {
               name: "",
               code: "",
               alias: "",
               belongApplication: ""
            }
            this.searchBtn();
         },
         getApplicationList() {
            this.$HTTP.get("/api/blade-system/application/list").then(res=> {
               if(res.code == 200) {
                  this.applicationList = res.data;
               }
            })
         },
         searchclick() {
            this.searchData.parentId= "0";
            this.searchBtn();
         },
         searchBtn() {
            this.$HTTP.get("/api/blade-system/menu/lazy-list",this.searchData).then(res=> {
               if(res.code == 200) {
                  this.tableData = res.data;
               }
            })
         },
         //字典配置
         table_allocation(row) {
            this.dialog.allocation = true;
@@ -139,18 +169,39 @@
            })
         },
         //删除
         table_del(row) {},
         table_del(row) {
            var that = this;
            this.$confirm(`确定将选择数据删除?`, '', {
               type: 'warning'
            }).then(() => {
               this.$HTTP.post("/api/blade-system/menu/remove?ids="+row.id).then(res=> {
                  if(res.code == 200) {
                     that.$message.success("操作成功");
                     that.searchclick();
                  }
               })
            }).catch(() => {

            })
         },
         //添加
         addPerson(){
         addData(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open()
            })
         },
         table_edit(row){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(row)
         table_edit(row,index,fixed){
            this.$HTTP.get("/api/blade-system/menu/detail?id="+row.id).then(res=> {
               if(res.code == 200) {
                  this.dialog.save = true;
                  this.$nextTick(() => {
                     if(fixed) {  //判断新增子项
                        res.data.fixed = "fixed";
                     }
                     this.$refs.saveDialog.open('edit').setData(res.data);
                  })
               }
            })
         },
         //查看
@@ -160,8 +211,30 @@
               this.$refs.saveDialog.open('show').setData(row)
            })
         },
         handleSelectionChange() {},
         delPerson() {},
         handleSelectionChange(selection) {
            this.selection = selection;
         },
         delData() {
            if(this.selection.length == 0) {
               this.$message({
                   message: '请选择至少一条数据',
                   type: 'warning'
                 });
                 return;
            }
            var selStr = "";
            this.selection.map(item=> {
               selStr += item.id + ","
            })
            selStr = selStr.replace(/,$/, '');
            var that = this;
            this.$HTTP.post("/api/blade-system/menu/remove?ids="+selStr).then(res=> {
               if(res.code == 200) {
                  that.$message.success("操作成功");
                  that.searchclick();
               }
            })
         },
         changeDepartment() {
            this.departmentVisible = true;
         },