权限菜单

components/menu/data.js

@@ -346,5 +346,23 @@ export default [{
       title: "职业技能配置",
       path: baseUrl + "occupation_setting"
     }]
+  },
+  {
+    title: "权限管理",
+    icon: "setting",
+    path: "",
+    subs: [{
+      title: "角色管理",
+      path: baseUrl + "group"
+    },
+      {
+        title: "用户管理",
+        path: baseUrl + "user"
+      },
+      {
+      title: "菜单管理",
+      path: baseUrl + "menu",
+        hidden: true
+    }]
   }
 ];

layouts/components/Sidebar/index.vue

@@ -33,9 +33,20 @@ import menu from "@/components/menu/data";
 export default {
   data() {
     return {
-      permission_routes: menu
+      permission_routes: []
     };
   },
+  mounted() {
+    this.getAuth();
+  },
+  methods: {
+    async getAuth() {
+      let res = await this.$post("/api/admin/auth/get");
+      if (res && res.status === 1) {
+        this.permission_routes = res.data.list;
+      }
+    },
+  },
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([

pages/main/index/admin_user.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+
+    <el-button type="primary" @click="addGroup()" style="margin-top: 15px;margin-right: 30px;float: left">添加用户</el-button>
+    <div style="clear: both;"></div>
+    <div style="margin-bottom: 15px"></div>
+    <div>
+      <el-table :data="list" border style="width: 100%"  v-loading="loading">
+        <el-table-column prop="uid" label="用户UID" width="220px"></el-table-column>
+        <el-table-column prop="group_name" label="所属角色" width="220px"></el-table-column>
+        <el-table-column prop="uid" label="操作" width="320px">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delData(scope.row)">删除用户</el-button>
+            <el-button type="text" @click="editGroup(scope.row)">编辑用户</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog title="用户管理" :visible.sync="addDialog" width="400px">
+      <el-form :model="add_form"  label-width="70px">
+        <el-form-item label="用户角色">
+          <el-select v-model="groupValue" clearable placeholder="请选择">
+            <el-option
+              v-for="item in groupData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户UID">
+          <el-input v-model="add_form.uid" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="addDialog = false">取消</el-button>
+        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+<script src="./js/admin_user.js"></script>
+<style scoped>
+.count-list {
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+/deep/ .mall_list .el-dialog {
+  margin: 5vh auto !important;
+}
+
+/deep/ .mall_list .el-dialog__body {
+  height: 70vh;
+  overflow: auto;
+}
+
+/deep/ .el-dialog{
+  display: flex;
+  flex-direction: column;
+  margin:0 !important;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+}
+
+h3 {
+  margin: 20px 0 20px;
+}
+</style>

pages/main/index/group.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+
+    <el-button type="primary" @click="addGroup()" style="margin-top: 15px;margin-right: 30px;float: left">添加角色</el-button>
+    <div style="clear: both;"></div>
+    <div style="margin-bottom: 15px"></div>
+    <div>
+      <el-table :data="list" border style="width: 100%"  v-loading="loading">
+        <el-table-column prop="name" label="角色名称" width="220px"></el-table-column>
+        <el-table-column prop="uid" label="操作" width="320px">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delData(scope.row)">删除角色</el-button>
+            <el-button type="text" @click="editGroup(scope.row)">编辑角色</el-button>
+            <el-button type="text" @click="menuDialogShow(scope.row)">权限管理</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog title="角色管理" :visible.sync="addDialog" width="400px">
+      <el-form :model="add_form"  label-width="70px">
+        <el-form-item label="角色名称">
+          <el-input v-model="add_form.name" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="addDialog = false">取消</el-button>
+        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
+      </div>
+    </el-dialog>
+
+
+    <el-dialog title="权限菜单" :visible.sync="menuDialog"  custom-class="mall_list" lock-scroll width="70%">
+      <el-table :data="menuData" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column prop="title" label="权限名称" ></el-table-column>
+        <el-table-column prop="show" label="访问权限">
+          <template slot-scope="scope">
+            <span style="color:red;cursor:pointer"  @click="closeMenu(scope.row,1)" v-if="scope.row.show == '1'">已禁用</span>
+            <span style="color:green;cursor:pointer"  @click="closeMenu(scope.row,2)"  v-else >已开启</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+  </div>
+</template>
+<script src="./js/group.js"></script>
+<style scoped>
+.count-list {
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+/deep/ .mall_list .el-dialog {
+  margin: 5vh auto !important;
+}
+
+/deep/ .mall_list .el-dialog__body {
+  height: 70vh;
+  overflow: auto;
+}
+
+/deep/ .el-dialog{
+  display: flex;
+  flex-direction: column;
+  margin:0 !important;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+}
+
+h3 {
+  margin: 20px 0 20px;
+}
+</style>

pages/main/index/js/admin_user.js

@@ -0,0 +1,105 @@
+export default {
+  name: "user_cards_list",
+  data() {
+    return {
+      list: [],
+      menuDialog:false,
+      loading:false,
+      outerVisible: false,
+      addDialog:false,
+      editDialog:false,
+      infoDialog:false,
+      add_form: {
+        id: 0,
+        uid: 0,
+        group_id: '',
+      },
+      info:{
+
+      },
+      menuData: [],
+      groupData: [],
+      groupValue: ''
+    }
+  },
+  mounted() {
+    this.getList();
+    this.getGroup();
+  },
+  methods: {
+    formAdd() {
+      var that=this;
+      var add_form=this.add_form;
+      add_form.group_id=this.groupValue;
+      this.$post("/api/admin/admin_user/add", this.add_form).then(res => {
+        if (res && res.status === 1) {
+          that.getList();
+          that.$message.success('操作成功')
+          that.addDialog = false;
+          that.add_form.id =0;
+          that.add_form.group_id ='';
+          that.editDialog = false;
+        }
+      });
+
+    },
+    form(){
+
+    },
+    async del(id)
+    {
+      let res = await this.$post("/api/admin/admin_user/del", {id: id});
+      if (res && res.status === 1) {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        });
+        this.getList();
+      }
+    },
+    async delData(row) {
+      this.$confirm('确定删除后将不可逆, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.del(row.id);
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+    },
+    editGroup(row) {
+      let form = this.add_form;
+      form.id = row.id;
+      form.name = row.name;
+      this.addDialog=true;
+    },
+    addGroup() {
+      let form = this.add_form;
+      form.id = "";
+      form.name = "";
+      this.addDialog=true;
+    },
+    menuDialogShow(row) {
+      this.menuDialog=true;
+      this.menuData=[];
+      this.getMenuData(row.id);
+    },
+    async getList() {
+      let res = await this.$post("/api/admin/admin_user/list");
+      if (res && res.status === 1) {
+        this.list = res.data.list || [];
+      }
+    },
+    async getGroup() {
+      let res = await this.$post("/api/admin/admin_group/list");
+      if (res && res.status === 1) {
+        this.groupData = res.data.list || [];
+      }
+    },
+  }
+
+}

pages/main/index/js/group.js

@@ -0,0 +1,118 @@
+export default {
+  name: "user_cards_list",
+  data() {
+    return {
+      list: [],
+      menuDialog:false,
+      loading:false,
+      outerVisible: false,
+      addDialog:false,
+      editDialog:false,
+      infoDialog:false,
+      add_form: {
+        id: 0,
+        name: '',
+      },
+      info:{
+
+      },
+      menuData: [],
+    }
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    formAdd() {
+      var that=this;
+      this.$post("/api/admin/admin_group/add", this.add_form).then(res => {
+        if (res && res.status === 1) {
+          that.getList();
+          that.$message.success('操作成功')
+          that.addDialog = false;
+          that.add_form.id =0;
+          that.add_form.name ='';
+          that.editDialog = false;
+        }
+      });
+
+    },
+    form(){
+
+    },
+    async del(id)
+    {
+      let res = await this.$post("/api/admin/admin_group/del", {id: id});
+      if (res && res.status === 1) {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        });
+        this.getList();
+      }
+    },
+    async delData(row) {
+      this.$confirm('确定删除后将不可逆, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.del(row.id);
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+    },
+    editGroup(row) {
+      let form = this.add_form;
+      form.id = row.id;
+      form.name = row.name;
+      this.addDialog=true;
+    },
+    addGroup() {
+      let form = this.add_form;
+      form.id = "";
+      form.name = "";
+      this.addDialog=true;
+    },
+    menuDialogShow(row) {
+      this.menuDialog=true;
+      this.menuData=[];
+      this.getMenuData(row.id);
+    },
+    async getList() {
+      let res = await this.$post("/api/admin/admin_group/list");
+      if (res && res.status === 1) {
+        this.list = res.data.list || [];
+      }
+    },
+    async closeMenu(row,type)
+    {
+      let data={
+        type:type,
+        id:row.id,
+        url:row.url
+      }
+      let res = await this.$post("/api/admin/admin_group/close_menu",data);
+      if (res && res.status === 1) {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        });
+        this.getMenuData(row.id);
+      }
+    },
+    async getMenuData(id) {
+      var data={
+        id:id,
+      }
+      let res = await this.$post("/api/admin/admin_group/menu",data);
+      if (res && res.status === 1) {
+        this.menuData = res.data.list || [];
+      }
+    }
+  }
+
+}