init

src/views/system/sys_role.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="content-view">
+    <div class="table-head-tool">
+      <Button type="primary" @click="showAddWarp">新增</Button>
+    </div>
+    <div class="table-body">
+      <tables ref="tables" v-model="gridOption.data" :columns="gridOption.columns" />
+    </div>
+
+    <editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
+    </editModal>
+
+    <Modal v-model="isShowPermission" title="权限设置" @on-ok="submitPermission">
+      <Tree ref="trees" :check-strictly='true' :data="treeData" show-checkbox></Tree>
+    </Modal>
+  </div>
+</template>
+<script>
+import uiTool from '@/utils/uiTool'
+import roleServer from '@/api/system/roleServer'
+import menuServer from '@/api/system_high/menuServer'
+
+export default {
+  name: 'tables_page',
+
+  data() {
+    return {
+      row: {},
+      isShowPermission: false,
+      expandTreeAll: [],
+      gridOption: {
+        columns: [
+          { title: '序号', key: 'id' },
+          { title: '角色名称', key: 'name' },
+          {
+            title: '操作',
+            type: 'template',
+            render: (h, params) => {
+              let btns = [
+                {
+                  title: '修改',
+                  type: 'primary',
+                  click: () => {
+                    this.showEditWarp(params.row)
+                  }
+                },
+                {
+                  title: '删除',
+                  type: 'primary',
+                  click: () => {
+                    this.delConfirm(params.row)
+                  }
+                },
+                {
+                  title: '配置权限',
+                  type: 'primary',
+                  click: () => {
+                    this.configPermission(params.row)
+                  }
+                }
+              ]
+
+              return uiTool.getBtn(h, btns)
+            }
+          }
+        ],
+        data: []
+      },
+      treeData: []
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      let res = await roleServer.list()
+      this.gridOption.data = res.data
+    },
+
+    showAddWarp() {
+      this.$refs.editModal.addShow({}, async (row) => {
+        await roleServer.add(row)
+        this.init()
+        await rootVue.$Message.success('新增成功！')
+      })
+    },
+    showEditWarp(row) {
+      this.$refs.editModal.editShow(row, async (newRow) => {
+        await roleServer.edit(newRow)
+        await this.init()
+        rootVue.$Message.success('修改成功！')
+      })
+    },
+    async delConfirm(row) {
+      uiTool.delConfirm(async () => {
+        await roleServer.del(row)
+        await this.init()
+        rootVue.$Message.success('删除成功！')
+      })
+    },
+    async submitPermission() {
+      let checkNodes = this.$refs['trees'].getCheckedNodes()
+      let checkNodeIds = checkNodes.map((p) => p.id)
+      let param = {
+        id: this.row.id,
+        name: this.row.name,
+        menus: JSON.stringify(checkNodeIds)
+      }
+
+      await roleServer.edit(param)
+      await this.init()
+      rootVue.$Message.success('权限修改成功！')
+
+      this.isShowPermission = false
+    },
+    async configPermission(row) {
+      this.row = row
+      this.expandTreeAll = []
+
+      let res = await menuServer.list()
+      let tree = uiTool.transformTree(res.data)
+      if (row.menus) {
+        this.expandTreeAll = JSON.parse(row.menus)
+        this.treeData = this.mapTree(tree)
+      } else {
+        this.treeData = this.mapTree(tree)
+      }
+
+      this.isShowPermission = true
+    },
+
+    mapTree(tree) {
+      return tree.map((p) => {
+        if (p.children && p.children.length > 0) {
+          p.children = this.mapTree(p.children)
+        }
+
+        let row = this.expandTreeAll.find((p2) => p2 === p.id)
+        if (row) {
+          p.checked = true
+        }
+
+        return Object.assign({}, p, { title: p.name, expand: false })
+      })
+    }
+  }
+}
+</script>