2024-1-2

<template>

    <el-main style="height: 100%;">

        <div style="width: 700px;padding: 10px 10px; display: flex;">

          <el-input v-model="name" placeholder="请输入名称" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>

          <el-input v-model="description" placeholder="请输入描述" suffix-icon="el-icon-message" style="margin-right: 10px;"></el-input>

          <el-button @click="search(this)">搜索</el-button>

          <el-button type="warning" @click="reset(this)">重置</el-button>

        </div>

         

        <div style="width: 700px;padding: 10px 10px; display: flex;">

          <el-button type="primary" @click="dialogFormVisible=true">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

        </div>

        <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">

          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column prop="id" label="ID" :disabled="true"></el-table-column>

          <el-table-column prop="name" label="名称" ></el-table-column>

          <el-table-column prop="description" label="描述" ></el-table-column>

          <el-table-column label="操作">

            <template slot-scope="scope">

              <el-button type="warning" round @click="selectMenu(scope.row.id)">分配菜单 <i class="el-icon-edit"></i></el-button>

            </template>

          </el-table-column>

        </el-table>

        <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="pageIndex"

      :page-sizes="pages"

      :page-size="pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total">

    </el-pagination>

    <!-- 表单弹窗 -->

<el-dialog title="信息增加/修改" :visible.sync="dialogFormVisible">

  <el-form :model="form" label-width="70px">

    <el-form-item label="名称" >

      <el-input v-model="form.username" auto-complete="off"></el-input>

    </el-form-item>

    <el-form-item label="描述" >

      <el-input v-model="form.nickname" auto-complete="off"></el-input>

    </el-form-item>

  </el-form>

  <div slot="footer" class="dialog-footer">

    <el-button @click="dialogFormVisible = false">取 消</el-button>

    <el-button type="primary" @click="handleAction">确 定</el-button>

  </div>

</el-dialog>

    <!-- 表单弹窗 -->

    <el-dialog title="分配菜单" :visible.sync="dialogFormVisible2">

        <el-tree

        :props="props"

        :default-expanded-keys="expendArr"

        node-key="id"

        :default-checked-keys="checkArr"

        :data="MenuData"

        show-checkbox

        ref="tree"

        >

        </el-tree>

  <div slot="footer" class="dialog-footer">

    <el-button @click="dialogFormVisible2 = false">取 消</el-button>

    <el-button type="primary" @click="handleAction2">确 定</el-button>

  </div>

</el-dialog>

  </el-main>

</template>

<script>

import {loadMyMessage,addMenuRole,showMenuRole} from "@/api/role"

import {loadMyMessage as loadMenuMessage} from "@/api/menu"

export default {

    data() {

    return {

      pages:[4,6,8,10],

      tableData: null,

      total:0,

      pageIndex:1,

      pageSize:4,

      name:"",

      description:"",

      dialogFormVisible:false,

      dialogFormVisible2:false,

      form:{},

      MenuData:[],

      props:{

        label:"name"

      },

      expendArr:[],

      checkArr:[],

      roleId:""

    }

  },

  created(){

    this.loadMessage()

  },

  methods:{

    handleSelectionChange(val){

    this.multipleSelection=val

  },

    handleSizeChange(changeSize){

      this.pageSize=changeSize

      this.loadMessage()

    },

    handleCurrentChange(chageIndex){

      this.pageIndex=chageIndex

      this.loadMessage()

    },

    handleAction(){

        this.dialogFormVisible=false

    },

    async loadMessage(){

        const res=await loadMyMessage(this.pageSize,this.pageIndex,this.name,this.description)

        this.tableData=res.data.result

        this.total=res.data.total

        this.name=""

        this.description=""

    },

    search(){

        this.loadMessage()

    },

    reset(){

        this.name=""

        this.description=""

    },

    async selectMenu(roleId){

        this.dialogFormVisible2=true

        const res=await loadMenuMessage()

        this.MenuData=res.data.result

        //将里面的id解析出来

        this.expendArr=this.MenuData.map(m=>m.id)

        this.roleId=roleId

        const res2=await showMenuRole(roleId)

        this.checkArr=res2.data.result

    },

    async handleAction2(){

      //得到选择的id数组

      const ids=this.$refs.tree.getCheckedKeys()

      console.log(ids)

      const res=await addMenuRole(this.roleId,ids)

      console.log(res)

      this.dialogFormVisible2=false;

      this.roleId=""

    }

  }

}

</script>

<style>

</style>