用户管理：查询

src/api/system-user.js

@@ -0,0 +1,18 @@
+import { httpApp } from "@/plugins/axiosIndex";
+import { pickBy } from "lodash-es";
+import { object2QueryString } from "@/utils/utils";
+
+export function searchUsers({
+  role,
+  loginName = "",
+  name = "",
+  enable = "",
+  pageNumber = 1,
+  pageSize = 10,
+}) {
+  const data = pickBy(
+    { role, loginName, name, enable, pageNumber, pageSize },
+    (v) => v !== ""
+  );
+  return httpApp.get("/api/admin/user/query?" + object2QueryString(data));
+}

src/components/HelloWorld.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
-          target="_blank"
-          rel="noopener"
-          >unit-jest</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/RoleSelect.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="size-select"
+    placeholder="请选择"
+    @change="select"
+    style="width: 100px;"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.roleCode"
+      :label="item.roleName"
+      :value="item.roleCode"
+    >
+      <span>{{ item.roleName }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "RoleSelect",
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      optionList: [],
+      selected: "",
+    };
+  },
+  async created() {
+    const res = await this.$http.get("/api/admin/sys/role/query");
+    // console.log(res.data);
+    this.optionList = res.data.data.records;
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      },
+    },
+  },
+  methods: {
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit("change", this.selected);
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/StateSelect.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="size-select"
+    placeholder="请选择"
+    @change="select"
+    style="width: 100px;"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.code"
+      :label="item.name"
+      :value="item.code"
+    >
+      <span>{{ item.name }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "StateSelect",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      optionList: [
+        { code: "0", name: "否" },
+        { code: "1", name: "是" },
+      ],
+      selected: "",
+    };
+  },
+  async created() {},
+  watch: {
+    value: {
+      immediate: true,
+      handler(val, oldVal) {
+        console.log({ val, oldVal });
+        this.selected = val;
+      },
+    },
+  },
+  methods: {
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit("change", this.selected);
+    },
+  },
+};
+</script>
+
+<style></style>

src/features/Login/Login.vue

@@ -131,6 +131,8 @@ export default {
             this.$message({
               message: "登录成功",
               type: "success",
+              duration: 1.5,
+              showClose: true,
             });
             this.$router.push("/home");
           } catch (error) {

src/features/system/UserManagement/UserManagement.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-form :model="form" inline>
+      <el-form-item label="角色">
+        <RoleSelect v-model="form.roleCode"></RoleSelect>
+      </el-form-item>
+      <el-form-item label="登录名">
+        <el-input v-model.trim="form.loginName"></el-input>
+      </el-form-item>
+      <el-form-item label="姓名">
+        <el-input v-model.trim="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="状态">
+        <StateSelect v-model="form.enableState"></StateSelect>
+      </el-form-item>
+      <el-button @click="searchForm">查询</el-button>
+      <el-button>新增</el-button>
+      <el-button>导入</el-button>
+    </el-form>
+
+    <el-table :data="userList" stripe style="width: 100%;">
+      <el-table-column type="selection" width="40" />
+      <el-table-column width="55" label="ID">
+        <span slot-scope="scope">{{ scope.row.id }}</span>
+      </el-table-column>
+      <el-table-column
+        width="200"
+        v-if="$store.state.user.orgId === null"
+        label="机构名称"
+      >
+        <span slot-scope="scope">{{ scope.row.orgName }}</span>
+      </el-table-column>
+      <el-table-column width="200" label="姓名">
+        <span slot-scope="scope">{{ scope.row.name }}</span>
+      </el-table-column>
+      <el-table-column label="登录名">
+        <span slot-scope="scope">{{ scope.row.loginName }}</span>
+      </el-table-column>
+      <el-table-column width="100" label="角色">
+        <span slot-scope="scope">{{ scope.row.roleName }}</span>
+      </el-table-column>
+      <el-table-column width="120" label="状态">
+        <span slot-scope="scope">{{ scope.row.enable }}</span>
+      </el-table-column>
+      <el-table-column width="120" label="更新人">
+        <span slot-scope="scope">{{ scope.row.updateName }}</span>
+      </el-table-column>
+      <el-table-column sortable width="170" label="更新时间" prop="updateTime">
+      </el-table-column>
+      <el-table-column :context="_self" label="操作" width="210">
+        <div slot-scope="scope">
+          <el-button size="mini" type="primary" plain @click="edit(scope.row)">
+            <i class="el-icon-edit"></i> 编辑
+          </el-button>
+        </div>
+      </el-table-column>
+    </el-table>
+    <div class="page pull-right">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100, 200, 300]"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import RoleSelect from "@/components/RoleSelect.vue";
+import StateSelect from "@/components/StateSelect";
+import { searchUsers } from "../../../api/system-user";
+
+export default {
+  name: "UserManagement",
+  components: {
+    RoleSelect,
+    StateSelect,
+  },
+  data() {
+    return {
+      form: {
+        orgList: [],
+        roleCode: "",
+        loginName: "",
+        name: "",
+        enableState: "",
+      },
+      userList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10,
+    };
+  },
+  async created() {},
+  methods: {
+    async searchForm() {
+      this.userList = (
+        await searchUsers({
+          role: this.form.roleCode,
+          enable: this.form.enableState,
+          loginName: this.form.loginName,
+          name: this.form.name,
+          pageNumber: this.currentPage,
+          pageSize: this.pageSize,
+        })
+      ).data.data.records.records;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+  },
+};
+</script>
+
+<style></style>

src/router/index.js

@@ -44,32 +44,26 @@ const routes = [
     ],
   },
   {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+    path: "/system",
+    name: "System",
+    component: Layout,
+    children: [
+      {
+        path: "user",
+        name: "UserManagement",
+        component: () =>
+          import(
+            /* webpackChunkName: "system" */ "../features/system/UserManagement/UserManagement.vue"
+          ),
+      },
+    ],
   },
   {
     path: "/login",
     name: "Login",
     component: () =>
-      import(/* webpackChunkName: "about" */ "../features/Login/Login.vue"),
+      import(/* webpackChunkName: "Login" */ "../features/Login/Login.vue"),
   },
-  // {
-  //   path: "/xxx/:id",
-  //   component: XXX,
-  //   props(route) {
-  //     return propsValidator(route, XXX);
-  //   }
-  // }
-  // {
-  //   path: "/login",
-  //   component: () =>
-  //     import(/* webpackChunkName: "login" */ "../features/Login/Login.vue"),
-  // },
   {
     path: "/*",
     component: () =>

src/store/action-types.js

@@ -1,3 +1,5 @@
 export const LOGIN_BY_USERNAME = "LOGIN_BY_USERNAME";
+export const LOG_OUT = "LOG_OUT";
+export const FED_LOG_OUT = "FED_LOG_OUT";
 export const LOGIN_BY_PHONE = "LOGIN_BY_PHONE";
 export const SEND_SMS = "SEND_SMS";

src/store/modules/user.js

@@ -1,7 +1,7 @@
 import { loginByUsername, logout } from "@/api/login";
 // import { removeKeyToken, setKeyToken } from "@/auth/auth";
 import { omit } from "lodash-es";
-import { LOGIN_BY_USERNAME } from "../action-types";
+import { LOGIN_BY_USERNAME, LOG_OUT, FED_LOG_OUT } from "../action-types";
 import { setToken } from "@/auth/auth";
 
 const user = {
@@ -31,7 +31,7 @@ const user = {
     },
 
     // 登出
-    LogOut({ commit, state }) {
+    [LOG_OUT]({ commit, state }) {
       return new Promise((resolve, reject) => {
         logout(state.token)
           .then(() => {
@@ -46,7 +46,7 @@ const user = {
     },
 
     // 前端 登出
-    FedLogOut({ commit }) {
+    [FED_LOG_OUT]({ commit }) {
       return new Promise((resolve) => {
         commit("SET_USER", null);
         // removeKeyToken();

src/utils/monitors.js

@@ -11,14 +11,14 @@ Vue.config.errorHandler = (error) => {
 
 window.addEventListener("error", function (event) {
   errorLog(event.message, {
-    stack: event.error.stack.replace(/\n/g, "||||"),
+    stack: event?.error?.stack?.replace(/\n/g, "||||"),
     code: "全局JS错误",
   });
 });
 
 window.addEventListener("unhandledrejection", function (event) {
   errorLog(event?.reason?.message, {
-    stack: event.error.stack.replace(/\n/g, "||||"),
+    stack: event?.error?.stack?.replace(/\n/g, "||||"),
     code: "全局JS错误",
   });
 });

src/views/Layout/Layout.vue

@@ -15,8 +15,7 @@ import AppFooter from "./components/AppFooter.vue";
 import SideBar from "./components/SideBar.vue";
 import NavBar from "./components/NavBar.vue";
 import {
-  baseMenuConfig,
-  userMenuConfig,
+  systemMenuConfig,
   businessMenuConfig,
   invigilationMenuConfig,
 } from "./components/menu";
@@ -33,8 +32,7 @@ export default {
     return {
       curMenus: [],
       navs: {
-        baseMenuConfig,
-        userMenuConfig,
+        systemMenuConfig,
         businessMenuConfig,
         invigilationMenuConfig,
       },

src/views/Layout/components/SideBar.vue

@@ -43,7 +43,7 @@ export default {
   },
   data() {
     return {
-      curRouterName: this.$router.name,
+      curRouterName: this.$route.name,
     };
   },
   methods: {

src/views/Layout/components/menu.js

@@ -4,15 +4,10 @@
 
 const headerMenuConfig = [
   {
-    title: "基础管理",
-    name: "base",
+    title: "系统管理",
+    name: "system",
     icon: "icon-base",
   },
-  {
-    title: "用户管理",
-    name: "user",
-    icon: "icon-user",
-  },
   {
     title: "考务管理",
     name: "business",
@@ -25,45 +20,19 @@ const headerMenuConfig = [
   },
 ];
 
-const baseMenuConfig = [
+const systemMenuConfig = [
   {
-    title: "基础管理",
-    name: "Base",
-    icon: "el-icon-menu",
-    children: [
-      {
-        title: "基础管理",
-        name: "Base",
-      },
-      {
-        title: "监控页",
-        name: "Base",
-      },
-      {
-        title: "工作台",
-        name: "Base",
-      },
-    ],
-  },
-];
-
-const userMenuConfig = [
-  {
-    title: "用户管理",
-    name: "User",
+    title: "系统管理",
+    name: "System",
     icon: "el-icon-menu",
     children: [
       {
-        title: "基础管理",
-        name: "Base",
-      },
-      {
-        title: "监控页",
-        name: "Base",
+        title: "用户管理",
+        name: "UserManagement",
       },
       {
-        title: "工作台",
-        name: "Base",
+        title: "机构管理",
+        name: "OrgManagement",
       },
     ],
   },
@@ -195,8 +164,7 @@ const invigilationMenuConfig = [
 
 export {
   headerMenuConfig,
-  baseMenuConfig,
-  userMenuConfig,
+  systemMenuConfig,
   businessMenuConfig,
   invigilationMenuConfig,
 };