完善页面

src/components/systemManage/UserManage.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="systemUserMgr">
+    <h3>用户信息列表</h3>
+    <el-divider></el-divider>
+    <el-table ref="dataTable" v-loading="loading" element-loading-text="正在加载，请稍后..." :data="tableData"
+              :border="true" :stripe="true" :height="440" style="width: 100%;margin-bottom: 15px;">
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="username" label="用户名" />
+      <el-table-column prop="email" label="邮箱" />
+      <el-table-column prop="phone" label="手机号" />
+      <el-table-column prop="userLevel" label="用户级别" >
+        <template #default="scope">
+          <span v-if="scope.row.userLevel==0">管理员</span>
+          <span v-else-if="scope.row.userLevel==1">管理员</span>
+          <span v-else-if="scope.row.userLevel==2
+                  && scope.row.serviceId && scope.row.serviceId.split(',').indexOf(''+$constant.serviceId)>-1">
+            管理员
+          </span>
+          <span v-else>普通用户</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="failureTime" label="过期时间" >
+        <template #default="scope">
+          <span v-if="scope.row.failureTime">{{ $util.datetime.format(scope.row.failureTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination style="float:right" background layout="sizes, prev, pager, next, jumper, total"
+                   v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
+                   v-model:total="pageInfo.total"/>
+  </div>
+</template>
+
+<script>
+import api from "@/api/data/AuthInfo";
+
+export default {
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      pageInfo: {
+        page: 1,
+        pageSize: 10,
+        total: 0,
+      }
+    }
+  },
+  watch: {
+    "pageInfo.page": function (val) {
+      if (val > 0) {
+        this.getData();
+      }
+    },
+    "pageInfo.pageSize": function () {
+      let app = this;
+      this.pageInfo.page = -1;
+      setTimeout(function () {
+        app.pageInfo.page = 1;
+      }, 50)
+    },
+  },
+  created() {
+    this.getData()
+  },
+  mounted() {
+  },
+  methods: {
+    getData() {
+      let app = this;
+      app.loading = true;
+      let params = {
+        pageNum: app.pageInfo.page,
+        pageSize: app.pageInfo.pageSize
+      }
+      api.getUserList(params).then(res=>{
+        if (res.code===200) {
+          app.tableData = res.content.list;
+          app.pageInfo.total = res.content.total
+        }
+        app.loading = false;
+      }).catch(()=>{
+        app.loading = false;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#systemUserMgr {
+  width: 100%;
+  height: 100%;
+  padding-left: 2%;
+}
+</style>