开始写权限（页面已完工）

src/apis/system1.js

@@ -15,3 +15,35 @@ export const getJSList = (data) => {
     data
   })
 }
+// 获取用户权限树
+export const getTreePermissions = () => {
+  return axios({
+    url: '/sys/resource/getTreePermissions'
+  })
+}
+// 根据id查看角色对应的权限
+export const getLimitsById = (id) => {
+  return axios({
+    url: `/sys/role/detail/${id}`
+  })
+}
+// 新增或者修改角色
+export const addrole = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/role/save',
+    data
+  })
+}
+// 修改角色启用停用
+export const editRole = (id, isDisable) => {
+  return axios({
+    url: `/sys/role/editStatus/${id}/${isDisable}`
+  })
+}
+// 删除角色
+export const delRole = (id) => {
+  return axios({
+    url: `/sys/role/remove/${id}`
+  })
+}

src/views/system/system3.vue

@@ -20,7 +20,12 @@
             ></el-input>
 
             <el-button style="margin-left: 20px" @click="find">查询</el-button>
-            <el-button style="margin-left: 20px" type="primary" @click="isShow=true">新增角色</el-button>
+            <el-button
+              style="margin-left: 20px"
+              type="primary"
+              @click="isShow = true"
+              >新增角色</el-button
+            >
           </div>
           <!--表格 -->
           <div class="table">
@@ -30,52 +35,82 @@
               border
               style="width: 100%"
             >
-              <el-table-column  label="序号" width="80" :resizable="false">
+              <el-table-column label="序号" width="80" :resizable="false">
                 <template slot-scope="scope">
-                   {{scope.$index+(myData.pageNum - 1) * myData.pageSize + 1}}
+                  {{scope.$index + (myData.pageNum - 1) * myData.pageSize + 1}}
                 </template>
               </el-table-column>
-              <el-table-column prop="roleName" label="角色名称" width="240" :resizable="false">
+              <el-table-column
+                prop="roleName"
+                label="角色名称"
+                width="240"
+                :resizable="false"
+              >
+              </el-table-column>
+              <el-table-column prop="roleDesc" label="描述" :resizable="false">
+              </el-table-column>
+              <el-table-column
+                prop="count"
+                label="成员数量"
+                width="80"
+                :resizable="false"
+              >
               </el-table-column>
-              <el-table-column prop="type" label="描述"  :resizable="false">
+              <el-table-column
+                prop="isEnabled"
+                label="状态"
+                width="80"
+                :resizable="false"
+              >
               </el-table-column>
-              <el-table-column prop="description" label="成员数量" width="80" :resizable="false">
+              <el-table-column
+                label="操作"
+                width="200"
+                :resizable="false"
+              >
+                <template slot-scope="scope">
+                  <el-button type="text" @click="change(scope.row.isEnabled,scope.row.id)">修改状态</el-button>
+                  <el-button type="text" @click="editJS(scope.row.id)">编 辑</el-button>
+                  <el-button type="text" @click="delJS(scope.row.id)">删 除</el-button>
+                </template>
               </el-table-column>
-              <el-table-column prop="isEnabled" label="状态" width="240" :resizable="false"> </el-table-column>
             </el-table>
           </div>
-                        <!-- 分页器 -->
+          <!-- 分页器 -->
           <div class="paging">
             <el-pagination
-              :current-page='myData.pageNum'
-              @current-change='currentChange'
-              @size-change='sizeChange'
+              :current-page="myData.pageNum"
+              @current-change="currentChange"
+              @size-change="sizeChange"
               background
               layout="prev, pager, next,sizes,jumper"
               :total="total"
             >
             </el-pagination>
           </div>
-
         </div>
       </div>
     </div>
     <!-- 点击新增角色出现弹窗 -->
-    <System3Add :isShow.sync='isShow'/>
+    <System3Add :isShow.sync="isShow" @refresh='getRZList(myData)'/>
+    <!-- 点击编辑出现弹窗 -->
+    <System3Edit :isShow.sync="isShowEdit" @refresh='getRZList(myData)' ref="myEdit"/>
   </div>
 </template>
 
 <script>
+import System3Edit from './system3_Edit.vue'
 import System3Add from './system3_add.vue'
-import { getJSList } from '@/apis/system1'
+import { getJSList, editRole, delRole } from '@/apis/system1'
 import TabList from '@/components/tabLeft4.vue'
 export default {
   name: 'system3',
   // import引入的组件需要注入到对象中才能使用
-  components: { TabList, System3Add },
+  components: { TabList, System3Add, System3Edit },
   data () {
     // 这里存放数据
     return {
+      isShowEdit: false,
       isShow: false,
       total: 0,
       myData: {
@@ -95,6 +130,50 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击编辑
+    editJS (id) {
+      this.$refs.myEdit.getLimitsById(id)
+      this.isShowEdit = true
+    },
+    // 点击修改状态
+    change (val, id) {
+      this.$confirm('确定修改角色状态吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        let temp = null
+        if (val === '启用') temp = 0
+        else if (val === '停用') temp = 1
+        await editRole(id, temp)
+        // console.log(999, res)
+        this.$message.success('修改成功!')
+        this.getRZList(this.myData)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    // 点击删除
+    delJS (id) {
+      this.$confirm('确定删除角色吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        await delRole(id)
+        // console.log(999, res)
+        this.$message.success('删除成功!')
+        this.getRZList(this.myData)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
     // 分页器
     currentChange (val) {
       this.myData.pageNum = val
@@ -114,6 +193,10 @@ export default {
       const res = await getJSList(data)
       this.total = res.data.total
       this.tableData = res.data.list
+      this.tableData.forEach((v) => {
+        if (v.isEnabled === 1) v.isEnabled = '启用'
+        else if (v.isEnabled === 0) v.isEnabled = '停用'
+      })
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -160,12 +243,12 @@ export default {
     margin: 20px 20px 40px;
     .middle {
       position: relative;
-              .paging {
-          position: absolute;
-          bottom: 15px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
+      .paging {
+        position: absolute;
+        bottom: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
       width: 100%;
       height: 100%;
       background-color: #fff;
@@ -177,7 +260,7 @@ export default {
         }
       }
       .table {
-        /deep/.el-table__body-wrapper{
+        /deep/.el-table__body-wrapper {
           max-width: 1634px;
           max-height: 560px;
           overflow-y: auto;

src/views/system/system3_Edit.vue

@@ -0,0 +1,176 @@
+<!--  -->
+<template>
+  <el-dialog title="编辑角色" :visible="isShow" @close="btnCancel()">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input v-model="ruleForm.roleName" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="描述：" prop="roleDesc">
+        <el-input
+          v-model="ruleForm.roleDesc"
+          type="textarea"
+          :rows="2"
+          placeholder="请输入"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="rowTow">
+      <span>权限设置：</span>
+      <ul class="conten">
+        <li v-for="(item,index) in checkedList" :key="index">
+          <span>{{item.name}}</span>
+          <el-checkbox v-model="item.authority" @change='mychange($event,item.id)'>启用</el-checkbox>
+          <el-checkbox v-for="(val,ind) in item.children" :key="ind" v-model="val.authority" :disabled='!item.authority'>{{val.name}}</el-checkbox>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="btnCancel">取 消</el-button>
+      <el-button type="primary" @click="btnOk">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addrole, getLimitsById } from '@/apis/system1'
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  name: 'system3_Edit',
+  components: {},
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    // 这里存放数据
+    return {
+      checked: false,
+      checkedList: [],
+      value: false,
+      // 滑块
+      myid: null,
+      ruleForm: {
+        roleName: '',
+        roleDesc: ''
+      },
+      rules: {
+        roleName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        roleDesc: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+  },
+  // 方法集合
+  methods: {
+    // 获取权限树-让父组件调用
+    async getLimitsById (id) {
+      const res = await getLimitsById(id)
+      this.ruleForm.roleName = res.data.role.roleName
+      this.ruleForm.roleDesc = res.data.role.roleDesc
+      this.checkedList = res.data.permission
+      this.myid = res.data.role.id
+      // console.log(999, res)
+    },
+    mychange (val, id) {
+      // console.log(999, val, id)
+      if (!val) {
+        this.checkedList.forEach(v => {
+          if (v.id === id) {
+            v.children.forEach(i => {
+              i.authority = false
+            })
+          }
+        })
+      }
+    },
+    // 点击取消
+    btnCancel () {
+      this.$emit('update:isShow', false)
+    },
+    // 点击确定
+    async btnOk () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const temp = []
+        this.checkedList.forEach(v => {
+          if (v.authority) {
+            temp.push(v.id)
+            v.children.forEach(i => {
+              if (i.authority) temp.push(i.id)
+            })
+          }
+        })
+        const res = await addrole({ id: this.myid, resources: temp, roleDesc: this.ruleForm.roleDesc, roleName: this.ruleForm.roleName })
+        // console.log(999, res)
+        if (res.code === 0) {
+          this.$message.success('修改成功!')
+          this.$emit('refresh')
+          this.$emit('update:isShow', false)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+/deep/.el-dialog{
+  margin-top: 30px !important;
+}
+.row {
+  margin-left: 20px;
+}
+.rowTow {
+  display: flex;
+  margin-top: 20px;
+  margin-left: 20px;
+  ul {
+    width: 80%;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 0 20px;
+    li {
+      height: 45px;
+      line-height: 45px;
+      border-bottom: 1px solid #ccc;
+      span {
+        font-size: 16px;
+        font-weight: 700;
+        margin-right: 20px;
+      }
+    }
+    li:nth-of-type(8){
+      border: none;
+    }
+  }
+}
+</style>

src/views/system/system3_add.vue

@@ -20,16 +20,12 @@
         ></el-input>
       </el-form-item>
     </el-form>
-    <div class="row">
-      <span>是否启用：</span>
-      <el-switch v-model="value"> </el-switch>
-    </div>
     <div class="rowTow">
       <span>权限设置：</span>
       <ul class="conten">
         <li v-for="(item,index) in checkedList" :key="index">
           <span>{{item.name}}</span>
-          <el-checkbox v-model="item.checked">启用</el-checkbox>
+          <el-checkbox v-model="item.checked" @change='mychange($event,item.id)'>启用</el-checkbox>
           <el-checkbox v-for="(val,ind) in item.op" :key="ind" v-model="val.checked" :disabled='!item.checked'>{{val.name}}</el-checkbox>
         </li>
       </ul>
@@ -42,6 +38,7 @@
 </template>
 
 <script>
+import { addrole } from '@/apis/system1'
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 例如：import 《组件名称》 from '《组件路径》';
 
@@ -61,89 +58,80 @@ export default {
       checked: false,
       checkedList: [
         {
+          id: 100,
           name: '藏品登记',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '审核', checked: false },
-            { name: '删除', checked: false }
+            { name: '编辑', checked: false, id: 102 },
+            { name: '删除', checked: false, id: 104 },
+            { name: '审核', checked: false, id: 103 }
           ]
         },
         {
+          id: 200,
           name: '藏品总账',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '移库', checked: false }
+            { name: '编辑', checked: false, id: 202 },
+            { name: '移库', checked: false, id: 205 }
           ]
         },
         {
+          id: 300,
           name: '入库管理',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '审核', checked: false },
-            { name: '删除', checked: false }
+            { name: '编辑', checked: false, id: 302 },
+            { name: '删除', checked: false, id: 303 },
+            { name: '审核', checked: false, id: 304 }
           ]
         },
         {
+          id: 400,
           name: '出库管理',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '审核', checked: false },
-            { name: '归还', checked: false },
-            { name: '删除', checked: false }
+            { name: '编辑', checked: false, id: 402 },
+            { name: '删除', checked: false, id: 403 },
+            { name: '审核', checked: false, id: 404 },
+            { name: '归还', checked: false, id: 405 }
           ]
         },
         {
+          id: 500,
           name: '藏品修改',
           checked: false,
           op: [
-            { name: '审核', checked: false },
-            { name: '删除', checked: false }
+            { name: '删除', checked: false, id: 503 },
+            { name: '审核', checked: false, id: 504 }
           ]
         },
         {
+          id: 600,
           name: '藏品注销',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '审核', checked: false },
-            { name: '删除', checked: false }
+            { name: '编辑', checked: false, id: 602 },
+            { name: '删除', checked: false, id: 604 },
+            { name: '审核', checked: false, id: 603 }
           ]
         },
         {
+          id: 700,
           name: '库房设置',
           checked: false,
           op: [
-            { name: '编辑', checked: false },
-            { name: '删除', checked: false }
+            { name: '编辑', checked: false, id: 702 },
+            { name: '删除', checked: false, id: 703 }
           ]
         },
         {
+          id: 800,
           name: '藏品移库',
           checked: false,
           op: [
-            { name: '审核', checked: false },
-            { name: '删除', checked: false }
-          ]
-        },
-        {
-          name: '用户管理',
-          checked: false,
-          op: [
-            { name: '编辑', checked: false },
-            { name: '注销', checked: false },
-            { name: '密码', checked: false }
-          ]
-        },
-        {
-          name: '角色管理',
-          checked: false,
-          op: [
-            { name: '编辑', checked: false },
-            { name: '删除', checked: false }
+            { name: '删除', checked: false, id: 803 },
+            { name: '审核', checked: false, id: 804 }
           ]
         }
       ],
@@ -162,20 +150,65 @@ export default {
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+  },
   // 方法集合
   methods: {
+    mychange (val, id) {
+      // console.log(999, val, id)
+      if (!val) {
+        this.checkedList.forEach(v => {
+          if (v.id === id) {
+            v.op.forEach(i => {
+              i.checked = false
+            })
+          }
+        })
+      }
+    },
     // 点击取消
     btnCancel () {
       this.$emit('update:isShow', false)
     },
     // 点击确定
-    btnOk () {
-      console.log(999, this.checkedList)
+    async btnOk () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const temp = []
+        this.checkedList.forEach(v => {
+          if (v.checked) {
+            temp.push(v.id)
+            v.op.forEach(i => {
+              if (i.checked) temp.push(i.id)
+            })
+          }
+        })
+        const res = await addrole({ resources: temp, roleDesc: this.ruleForm.roleDesc, roleName: this.ruleForm.roleName })
+        // console.log(999, res)
+        if (res.code === 0) {
+          this.$message.success('新增成功!')
+          this.$emit('refresh')
+          this.$emit('update:isShow', false)
+          this.ruleForm = {
+            roleName: '',
+            roleDesc: ''
+          }
+          this.checkedList.forEach(v => {
+            v.checked = false
+            v.op.forEach(i => {
+              i.checked = false
+            })
+          })
+        }
+      } catch (error) {
+        console.log(error)
+      }
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -213,6 +246,9 @@ export default {
         margin-right: 20px;
       }
     }
+    li:nth-of-type(8){
+      border: none;
+    }
   }
 }
 </style>