Merge pull request #1389 from ancienter/develop-add-api-key

[add]新增ApiKey管理功能

web_src/src/components/UserApiKeyManager.vue

@@ -0,0 +1,296 @@
+<template>
+  <div id="app" style="width: 100%">
+    <div class="page-header" style="margin-bottom: 0">
+      <div class="page-title">
+        <el-page-header @back="goBack" content="ApiKey列表"></el-page-header>
+      </div>
+      <div class="page-header-btn">
+        <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addUserApiKey">
+          添加ApiKey
+        </el-button>
+      </div>
+    </div>
+    <!--ApiKey列表-->
+    <el-table :data="userList" style="width: 100%;font-size: 12px;" :height="winHeight"
+              header-row-class-name="table-header">
+      <el-table-column prop="user.username" label="用户名" min-width="120"/>
+      <el-table-column prop="app" label="应用名" min-width="160"/>
+      <el-table-column prop="apiKey" label="ApiKey" min-width="480"/>
+      <el-table-column prop="enable" label="启用" width="120">
+        <template #default="scope">
+          <el-tag v-if="scope.row.enable">
+            启用
+          </el-tag>
+          <el-tag v-else type="info">
+            停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="expiredAt" label="过期时间" width="160"/>
+      <el-table-column prop="remark" label="备注信息" min-width="160"/>
+      <el-table-column label="操作" min-width="160" fixed="right">
+        <template #default="scope">
+          <el-button v-if="scope.row.enable"
+                     size="medium" icon="el-icon-circle-close" type="text" @click="disableUserApiKey(scope.row)">
+            停用
+          </el-button>
+          <el-button v-else
+                     size="medium" icon="el-icon-circle-check" type="text" @click="enableUserApiKey(scope.row)">
+            启用
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-refresh" type="text" @click="resetUserApiKey(scope.row)">
+            重置
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="remarkUserApiKey(scope.row)">
+            备注
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-delete" type="text" @click="deleteUserApiKey(scope.row)"
+                     style="color: #f56c6c">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <addUserApiKey ref="addUserApiKey"></addUserApiKey>
+    <remarkUserApiKey ref="remarkUserApiKey"></remarkUserApiKey>
+    <el-pagination
+      style="float: right"
+      @size-change="handleSizeChange"
+      @current-change="currentChange"
+      :current-page="currentPage"
+      :page-size="count"
+      :page-sizes="[15, 25, 35, 50]"
+      layout="total, sizes, prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import uiHeader from '../layout/UiHeader.vue'
+import addUserApiKey from "./dialog/addUserApiKey.vue";
+import remarkUserApiKey from './dialog/remarkUserApiKey.vue'
+
+export default {
+  name: 'userApiKeyManager',
+  components: {
+    uiHeader,
+    addUserApiKey,
+    remarkUserApiKey
+  },
+  data() {
+    return {
+      userList: [], //设备列表
+      currentUser: {}, //当前操作设备对象
+      winHeight: window.innerHeight - 200,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      getUserApiKeyListLoading: false
+    };
+  },
+  mounted() {
+    this.initParam();
+    this.initData();
+  },
+  methods: {
+    goBack() {
+      this.$router.back()
+    },
+    initParam() {
+      this.userId = this.$route.params.userId;
+    },
+    initData() {
+      this.getUserApiKeyList();
+    },
+    currentChange(val) {
+      this.currentPage = val;
+      this.getUserApiKeyList();
+    },
+    handleSizeChange(val) {
+      this.count = val;
+      this.getUserApiKeyList();
+    },
+    getUserApiKeyList() {
+      let that = this;
+      this.getUserApiKeyListLoading = true;
+      this.$axios({
+        method: 'get',
+        url: `/api/userApiKey/userApiKeys`,
+        params: {
+          page: that.currentPage,
+          count: that.count
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          that.total = res.data.data.total;
+          that.userList = res.data.data.list;
+        }
+        that.getUserApiKeyListLoading = false;
+      }).catch((error) => {
+        that.getUserApiKeyListLoading = false;
+      });
+    },
+    addUserApiKey() {
+      this.$refs.addUserApiKey.openDialog(this.userId, () => {
+        this.$refs.addUserApiKey.close();
+        this.$message({
+          showClose: true,
+          message: "ApiKey添加成功",
+          type: "success",
+        });
+        setTimeout(this.getUserApiKeyList, 200)
+      })
+    },
+    remarkUserApiKey(row) {
+      this.$refs.remarkUserApiKey.openDialog(row.id, () => {
+        this.$refs.remarkUserApiKey.close();
+        this.$message({
+          showClose: true,
+          message: "备注修改成功",
+          type: "success",
+        });
+        setTimeout(this.getUserApiKeyList, 200)
+      })
+    },
+    enableUserApiKey(row) {
+      let msg = "确定启用此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定启用此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/enable?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '启用成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '启用失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    disableUserApiKey(row) {
+      let msg = "确定停用此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定停用此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/disable?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '停用成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '停用失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    resetUserApiKey(row) {
+      let msg = "确定重置此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定重置此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/reset?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '重置成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '重置失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    deleteUserApiKey(row) {
+      let msg = "确定删除此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定删除此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'delete',
+          url: `/api/userApiKey/delete?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '删除成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '删除失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+  }
+}
+</script>
+<style>
+
+</style>

web_src/src/components/UserManager.vue

@@ -23,6 +23,8 @@
           <el-divider direction="vertical"></el-divider>
           <el-button size="medium" icon="el-icon-edit" type="text" @click="changePushKey(scope.row)">修改pushkey</el-button>
           <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="showUserApiKeyManager(scope.row)">管理ApiKey</el-button>
+          <el-divider direction="vertical"></el-divider>
           <el-button size="medium" icon="el-icon-delete" type="text" @click="deleteUser(scope.row)"
                      style="color: #f56c6c">删除
           </el-button>
@@ -178,7 +180,10 @@ export default {
         setTimeout(this.getUserList, 200)
 
       })
-    }
+    },
+    showUserApiKeyManager: function (row) {
+      this.$router.push(`/userApiKeyManager/${row.id}`)
+    },
   }
 }
 </script>

web_src/src/components/dialog/addUserApiKey.vue

@@ -0,0 +1,139 @@
+<template>
+  <div id="addUserApiKey" v-loading="isLoading">
+    <el-dialog
+      title="添加ApiKey"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="80px">
+          <el-form-item label="应用名" prop="app">
+            <el-input
+              v-model="form.app"
+              property="app"
+              autocomplete="off"/>
+          </el-form-item>
+          <el-form-item label="启用状态" prop="enable" style="text-align: left">
+            <el-switch
+              v-model="form.enable"
+              property="enable"
+              active-text="启用"
+              inactive-text="停用"/>
+          </el-form-item>
+          <el-form-item label="过期时间" prop="expiresAt" style="text-align: left">
+            <el-date-picker v-model="form.expiresAt"
+                            style="width: 100%"
+                            property="expiresAt"
+                            type="datetime"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="选择过期时间"/>
+          </el-form-item>
+          <el-form-item label="备注信息" prop="remark">
+            <el-input v-model="form.remark"
+                      type="textarea"
+                      property="remark"
+                      autocomplete="off"
+                      :autosize="{ minRows: 5}"
+                      maxlength="255"
+                      show-word-limit/>
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'addUserApiKey',
+  props: {},
+  computed: {},
+  created() {
+  },
+  data() {
+    return {
+      userId: null,
+      form: {
+        app: null,
+        enable: true,
+        expiresAt: null,
+        remark: null
+      },
+      rules: {
+        app: [{required: true, trigger: 'blur', message: '应用名不能为空'}]
+      },
+      listChangeCallback: null,
+      showDialog: false,
+      isLoading: false
+    };
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        app: null,
+        enable: true,
+        expiresAt: null,
+        remark: null
+      }
+    },
+    openDialog(userId, callback) {
+      this.resetForm()
+      this.userId = userId
+      this.listChangeCallback = callback
+      this.showDialog = true
+    },
+    onSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: 'post',
+            url: '/api/userApiKey/add',
+            params: {
+              userId: this.userId,
+              app: this.form.app,
+              enable: this.form.enable,
+              expiresAt: this.form.expiresAt,
+              remark: this.form.remark,
+            }
+          }).then((res) => {
+            if (res.data.code === 0) {
+              this.$message({
+                showClose: true,
+                message: '添加成功',
+                type: 'success'
+              });
+              this.showDialog = false
+              if (this.listChangeCallback) {
+                this.listChangeCallback()
+              }
+            } else {
+              this.$message({
+                showClose: true,
+                message: res.data.msg,
+                type: 'error'
+              });
+            }
+          }).catch((error) => {
+            console.error(error)
+          });
+        }
+      });
+    },
+    close() {
+      this.showDialog = false
+    }
+  },
+};
+</script>

web_src/src/components/dialog/remarkUserApiKey.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="remarkUserApiKey" v-loading="isLoading">
+    <el-dialog
+      title="ApiKey备注"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <el-form ref="form" :rules="rules" status-icon label-width="80px">
+          <el-form-item label="备注" prop="oldPassword">
+            <el-input type="textarea" v-model="form.remark" autocomplete="off" :autosize="{ minRows: 5}" maxlength="255" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "remarkUserApiKey",
+  props: {},
+  computed: {},
+  created() {
+  },
+  data() {
+    return {
+      userApiKeyId: null,
+      form: {
+        remark: null
+      },
+      rules: {},
+      listChangeCallback: null,
+      showDialog: false,
+      isLoading: false
+    };
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        remark: null
+      }
+    },
+    openDialog(userApiKeyId, callback) {
+      this.resetForm()
+      this.userApiKeyId = userApiKeyId
+      this.listChangeCallback = callback
+      this.showDialog = true
+    },
+    onSubmit() {
+      this.$axios({
+        method: 'post',
+        url: "/api/userApiKey/remark",
+        params: {
+          id: this.userApiKeyId,
+          remark: this.form.remark
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          this.$message({
+            showClose: true,
+            message: '备注修改成功!',
+            type: 'success'
+          });
+          this.showDialog = false;
+          this.listChangeCallback()
+        } else {
+          this.$message({
+            showClose: true,
+            message: '备注修改失败',
+            type: 'error'
+          });
+        }
+      }).catch((error) => {
+        console.error(error)
+      });
+    },
+    close() {
+      this.showDialog = false
+    },
+  },
+};
+</script>