完成超级管理员的管理界面的前后端。

src/api/priotity.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getPriority(params) {
+    return request({
+        url: '/priority/select',
+        method: 'get',
+        params
+    })
+}
+
+export function modifyPriority(data) {
+    return request({
+        url: '/priority/modify',
+        method: 'post',
+        data
+    })
+}
+
+export function addUser(data) {
+    return request({
+        url: '/priority/add-user',
+        method: 'post',
+        data
+    })
+}
+
+export function deleteUser(data) {
+    return request({
+        url: '/priority/delete-user',
+        method: 'post',
+        data
+    })
+}

src/craft.js

@@ -0,0 +1,14 @@
+new Promise(function (resolve, reject) {
+    console.log(1111);
+    resolve(2222);
+}).then(function (value) {
+    setTimeout(() => {
+        console.log(value);
+    }, 1000)
+    return 3333;
+}).then(function (value) {
+    console.log(value);
+    throw "An error";
+}).catch(function (err) {
+    console.log(err);
+});

src/icons/svg/权限.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658111017393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2746" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M898.34 188.81L538.35 74.51l-359.87 114.3c-13.53 4.27-22.67 16.86-22.55 31.1v454.94c0.72 3.09 17.69 77.98 91.27 150.5 56.61 55.78 192.4 127.48 251.63 158.57 9.25 4.87 13.65 6.65 17.56 8.78l17.57 8.78c4.63 2.49 12.94 2.38 17.57 0l17.57-8.78c34.65-16.97 195-102.9 260.4-167.35 73.71-72.52 90.68-147.41 91.39-150.5V219.91c0.23-14.24-9.02-26.83-22.55-31.1zM542.86 930.98l-0.24-0.12h0.59c-0.23 0.12-0.35 0.12-0.35 0.12z m85.81-264.32h-58.16v81.9c0 18.99-15.43 34.42-34.42 34.42-18.99 0-34.42-15.43-34.42-34.42V537.29c0-0.71 0.12-1.3 0.12-1.9-6.29-1.9-12.58-4.16-18.87-7-21.24-9.73-39.4-27.18-51.51-47-12.58-20.65-19.23-46.53-17.21-70.74 2.37-27.65 12.34-51.75 30.03-73.23 30.62-37.15 86.88-52.22 131.98-35.73 25.52 9.38 46.29 25.05 61.96 47.12 13.77 19.35 20.77 43.44 21.37 67.06 0 0.71 0.12 1.3 0 2.02 0 0.83 0 1.66-0.12 2.49-1.66 52.46-37.74 101.95-89.02 115.61v60.41h58.16c18.99 0 34.42 15.43 34.42 34.42v1.42h0.12c-0.01 18.99-15.44 34.42-34.43 34.42z" p-id="2747"></path><path d="M577.99 449.1c0.35-0.59 0.71-1.07 0.83-1.19a97.38 97.38 0 0 0 5.58-9.74c1.54-4.39 2.73-8.78 3.68-13.41 0.12-2.25 0.24-4.63 0.36-6.89 0-2.26-0.12-4.63-0.36-6.88-0.83-4.51-2.14-9.02-3.68-13.41a108.73 108.73 0 0 0-4.51-8.19c-0.36-0.36-1.19-1.54-2.61-3.8-1.3-1.43-2.61-2.97-4.03-4.27-1.66-1.66-3.44-3.32-5.34-4.87-0.59-0.35-1.06-0.71-1.19-0.83a97.226 97.226 0 0 0-9.73-5.58c-4.39-1.54-8.78-2.73-13.29-3.68-4.63-0.35-9.26-0.35-13.89 0-4.51 0.83-9.02 2.14-13.29 3.68a108.73 108.73 0 0 0-8.19 4.51c-0.36 0.36-1.54 1.19-3.8 2.61-1.43 1.3-2.97 2.61-4.27 4.03-1.66 1.66-3.32 3.44-4.87 5.34-0.35 0.59-0.71 1.07-0.83 1.19a97.226 97.226 0 0 0-5.58 9.73c-1.54 4.39-2.73 8.78-3.68 13.29-0.35 4.63-0.35 9.26 0 13.89 0.83 4.51 2.14 9.02 3.68 13.29 1.42 2.85 2.85 5.46 4.51 8.19 0.36 0.36 1.19 1.54 2.61 3.8 1.3 1.43 2.61 2.97 4.03 4.27 1.66 1.66 3.44 3.32 5.34 4.87 0.59 0.35 1.07 0.71 1.19 0.83 3.08 2.02 6.41 3.92 9.73 5.58 4.39 1.54 8.78 2.73 13.29 3.68 4.63 0.36 9.26 0.36 13.89 0 4.51-0.83 9.02-2.14 13.29-3.68 2.85-1.42 5.46-2.85 8.19-4.51 0.36-0.36 1.54-1.19 3.8-2.61 1.54-1.19 2.97-2.49 4.27-3.92 1.67-1.64 3.33-3.42 4.87-5.32z" p-id="2748"></path></svg>

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
 import '@/styles/index.scss' // global css
 
@@ -34,9 +34,9 @@ Vue.prototype.req = request
 // }
 
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+// Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
+Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -150,15 +150,16 @@ export const constantRoutes = [
   },
 
   {
-    path: '/hello',
+    path: '/priority',
     component: Layout,
+    
     children: [{
-      path: 'hello',
+      path: 'priority',
-      name: 'hello',
+      name: 'priority',
-      component: () => import('@/views/hello/hello'),
+      component: () => import('@/views/priority/priority'),
       meta: {
-        title: 'Hello',
+        title: '权限管理',
-        icon: 'plane'
+        icon: '权限'
       }
     }]
   },

src/views/job/show.vue

@@ -167,7 +167,9 @@ export default {
   created() {},
   mounted() {
     // 请求组织架构
-    jobApi.getFramework().then(
+    jobApi
+      .getFramework()
+      .then(
         (res) => {
           let originalMindData = res.data;
           // 添加 id 和 expanded

src/views/priority/components/add.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="button-div">
+      <el-button type="primary" size="small" @click="onSubmit">添加</el-button>
+    </div>
+    <table class="priority-table">
+      <tr>
+        <th>用户名</th>
+        <!-- <td><input type="text" v-model="priorityData.username" class="input-box"></td> -->
+        <td>
+          <div
+            contenteditable="true"
+            class="input-box"
+            placeholder="请输入"
+          ></div>
+        </td>
+        <th>身份证号</th>
+        <!-- <td colspan="2"><input type="text" v-model="priorityData.id_card" class="input-box"></td> -->
+        <td colspan="2">
+          <div
+            contenteditable="true"
+            class="input-box"
+            placeholder="请输入"
+          ></div>
+        </td>
+      </tr>
+      <tr>
+        <th rowspan="2">岗位</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.job_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.job_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <th rowspan="2">人员</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.person_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.person_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <th rowspan="2">事件</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.event_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.event_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { addUser } from "@/api/priotity";
+
+export default {
+  data() {
+    return {
+      priorityData: {
+        id_card: "",
+        username: "",
+        job_read: 1,
+        job_write: 0,
+        person_read: 1,
+        person_write: 0,
+        event_read: 1,
+        event_write: 0,
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      addUser({ data: this.priorityData }).then(
+        (res) => {
+          this.$message({
+            message: "添加成功",
+            type: "success",
+            duration: 2000,
+          });
+        },
+        (err) => {
+          console.log("err:", err);
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-div {
+  margin: 0px auto;
+  width: 80%;
+  text-align: right;
+}
+
+.priority-table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 10px auto 0px;
+  font-size: 1em;
+}
+
+.priority-table table,
+th,
+td {
+  border: 1px solid #ebebeb;
+}
+
+.priority-table tr {
+  height: 3em;
+}
+
+.priority-table td {
+  text-align: center;
+}
+
+.input-box {
+  min-width: 100px;
+}
+
+.input-box:empty:before {
+  content: attr(placeholder);
+  color: #cccccc;
+}
+
+.input-box:focus {
+  content: none;
+}
+</style>

src/views/priority/components/modify.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div class="button-div">
+      <el-button type="primary" size="small" @click="onSubmit"
+        >提交修改</el-button
+      >
+    </div>
+    <table class="priority-table">
+      <tr>
+        <th>用户名</th>
+        <td>{{ priorityData.username }}</td>
+        <th>身份证号</th>
+        <td colspan="2">{{ priorityData.id_card }}</td>
+      </tr>
+      <tr>
+        <th rowspan="2">岗位</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.job_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.job_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <th rowspan="2">人员</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.person_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.person_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <th rowspan="2">事件</th>
+        <td colspan="2">读权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.event_read"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">写权限</td>
+        <td colspan="2">
+          <el-switch
+            v-model="priorityData.event_write"
+            :active-value="1"
+            :inactive-value="0"
+          >
+          </el-switch>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { modifyPriority } from "@/api/priotity";
+import { Message } from "element-ui";
+
+export default {
+  props: ["data"],
+  data() {
+    return {
+      priorityData: this.data,
+    };
+  },
+  created() {
+    if (!this.priorityData) {
+      this.priorityData = {
+        id_card: "",
+        username: "",
+        job_read: 1,
+        job_write: 0,
+        person_read: 1,
+        person_write: 0,
+        event_read: 1,
+        event_write: 0,
+      };
+      Message({
+        message: "暂无数据, 请先在查看页面选择要修改的用户",
+        type: "warning",
+        duration: 2000,
+      });
+    }
+    console.log(this.priorityData);
+    if (this.priorityData.job_read > 50) {
+      this.priorityData.job_read = 1;
+    } else {
+      this.priorityData.job_read = 0;
+    }
+    console.log(this.priorityData);
+  },
+  methods: {
+    onSubmit() {
+      // 发修改请求
+      modifyPriority({
+        data: this.priorityData,
+      }).then(
+        (res) => {
+          Message({
+            message: "修改成功",
+            type: "success",
+            duration: 2000,
+          });
+        },
+        (err) => {
+          console.log("err:", err);
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-div {
+  margin: 0px auto;
+  width: 80%;
+  text-align: right;
+}
+
+.priority-table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 10px auto 0px;
+  font-size: 1em;
+}
+
+.priority-table table,
+th,
+td {
+  border: 1px solid #ebebeb;
+}
+
+.priority-table tr {
+  height: 3em;
+}
+
+.priority-table td {
+  text-align: center;
+}
+</style>

src/views/priority/components/select.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="20" :offset="0">
+        <el-input
+          placeholder="输入姓名或身份证号进行搜索"
+          clearable
+          v-model="searchText"
+          @change="searchPriority"
+        ></el-input>
+      </el-col>
+      <el-col :span="4" :offset="0">
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="searchPriority"
+        ></el-button>
+      </el-col>
+    </el-row> -->
+    <el-row type="flex" justify="center" class="search-box">
+      <el-col :span="18">
+        <el-input
+          placeholder="输入姓名或身份证号进行搜索"
+          clearable
+          v-model="searchText"
+          @change="searchPriority"
+        ></el-input
+      ></el-col>
+      <el-col :span="2" style="text-align:center;">
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="searchPriority"
+        >搜索</el-button
+      ></el-col>
+    </el-row>
+
+    <el-table :data="searchData" border style="width: 100%">
+      <el-table-column fixed="left" prop="username" label="姓名">
+      </el-table-column>
+      <el-table-column prop="id_card" label="身份证号" min-width="180px"></el-table-column>
+      <el-table-column prop="job_read" label="岗位读权限" min-width="100px"></el-table-column>
+      <el-table-column prop="job_write" label="岗位写权限" min-width="100px"></el-table-column>
+      <el-table-column prop="person_read" label="人员读权限" min-width="100px"></el-table-column>
+      <el-table-column prop="person_write" label="人员写权限" min-width="100px"></el-table-column>
+      <el-table-column prop="event_read" label="事件读权限" min-width="100px"></el-table-column>
+      <el-table-column prop="event_write" label="事件写权限" min-width="100px"></el-table-column>
+      <el-table-column fixed="right" label="操作" min-width="100px">
+        <template slot-scope="scope">
+          <el-button @click="clickModify(scope.row)" type="text" size="small"
+            >修改</el-button
+          >
+          <el-button @click="clickDelete(scope.row)" type="text" size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-sizes="[20, 50, 70, 100]"
+      :page-size="pageSize"
+      :hide-on-single-page="true"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalNum"
+      class="pagination"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import * as priorityApi from "@/api/priotity";
+import { MessageBox, Message } from "element-ui";
+
+export default {
+  data() {
+    return {
+      searchText: "",
+      pageSize: 20,
+      pageNum: 1,
+      totalNum: null,
+      searchData: null,
+    };
+  },
+  components: {},
+  mounted() {
+    this.searchPriority();
+  },
+  methods: {
+    searchPriority() {
+      // 发请求
+      priorityApi
+        .getPriority({
+          condition: this.searchText,
+          page_num: this.pageNum,
+          page_size: this.pageSize,
+        })
+        .then(
+          (res) => {
+            // 获取数据
+            this.totalNum = res.data.total;
+            this.searchData = res.data.data;
+          },
+          (err) => {
+            console.log("err:", err);
+          }
+        );
+    },
+    clickModify(row) {
+      // 单击修改
+      this.$emit("changeCom", "PriorityModify", row);
+    },
+    clickDelete(row) {
+      MessageBox.confirm(
+        "永久删除用户 " + row.username + " " + row.id_card + "?",
+        "注意",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 确定，发送删除请求
+          priorityApi
+            .deleteUser({
+              data: { id_card: row.id_card },
+            })
+            .then(
+              // todo 判断返回码
+              (res) => {
+                Message({
+                  type: "success",
+                  message: "删除成功！",
+                });
+                // 再次请求，刷新数据
+                this.searchPriority();
+              },
+              (err) => {
+                console.log("err:", err);
+              }
+            );
+        })
+        .catch(() => {});
+    },
+    handleSizeChange(curPageSize) {
+      this.pageSize = curPageSize;
+      this.searchPriority();
+    },
+    handleCurrentChange(curPageNum) {
+      // 重发请求
+      this.pageNum = curPageNum;
+      this.searchPriority();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search-box {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 10px;
+}
+</style>
+

src/views/priority/priority.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-container class="main-body">
+    <el-header>
+      <el-tabs v-model="comName" @tab-click="handleClick">
+        <el-tab-pane label="查看权限" name="PriorityFind"></el-tab-pane>
+        <el-tab-pane label="修改权限" name="PriorityModify"></el-tab-pane>
+        <el-tab-pane label="增加用户" name="PriorityAdd"></el-tab-pane>
+      </el-tabs>
+    </el-header>
+
+    <component :is="comName" @changeCom="changeComponent" :data="comData">
+    </component>
+  </el-container>
+</template>
+
+<script>
+import PriorityFind from "./components/select.vue";
+import PriorityModify from "./components/modify.vue";
+import PriorityAdd from "./components/add.vue";
+
+export default {
+  data() {
+    return {
+      comName: "PriorityFind",
+      comData: null,
+    };
+  },
+  components: {
+    PriorityFind,
+    PriorityModify,
+    PriorityAdd,
+  },
+  methods: {
+    handleClick(tab, event) {
+      //
+    },
+    changeComponent(name, data) {
+      this.comName = name;
+      this.comData = data;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-body {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+</style>

vue.config.js

@@ -38,8 +38,8 @@ module.exports = {
     },
     proxy: {
       '/': {
-        // target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
-        target: 'http://192.168.31.102:8000',
+        // target: 'http://192.168.31.102:8000',
         changeOrigin: true,
         pathRewrite: {
         }