授权管理

1 month ago · 9881a8daaf
2 changed files with 204 additions and 0 deletions
--- a/src/api/system/auth2.js
+++ b/src/api/system/auth2.js
@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 编辑oauth2.0授权
+export function add(data) {
+  return request({
+    url: 'api/oauthClient/editOauthClient',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: 'api/oauthClient/delOauthClient',
+    method: 'post',
+    data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/oauthClient/editOauthClient',
+    method: 'post',
+    data
+  })
+}
+export default { add, edit, del }
--- a/src/views/system/authorizeManage/index.vue
+++ b/src/views/system/authorizeManage/index.vue
@ -0,0 +1,177 @@
+<template>
+  <div class="app-container row-container">
+    <div class="head-container">
+      <div class="head-search">
+        <el-input v-model="query.search" clearable size="small" placeholder="输入名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
+        <rrOperation>
+          <template v-slot:right>
+            <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
+          </template>
+        </rrOperation>
+      </div>
+      <crudOperation>
+        <template v-slot:middle>
+          <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+            <i class="iconfont icon-shanchu" />
+            删除
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <div class="container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        height="calc(100vh - 380px)"
+        style="width: 100%;"
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="tokenDuration" label="Token时长">
+          <template slot-scope="scope">
+            <div v-if="scope.row.tokenDuration===1">1小时</div>
+            <div v-if="scope.row.tokenDuration===2">12小时</div>
+            <div v-if="scope.row.tokenDuration===3">1天</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="appKey" label="AppKey" />
+        <el-table-column prop="appSecret" label="AppSecret" />
+        <el-table-column prop="remarks" label="备注" />
+      </el-table>
+      <!--分页组件-->
+      <pagination v-if="crud.data.length !== 0" />
+    </div>
+
+    <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px">
+          <el-form-item v-if="crud.status.edit===1" label="AppKey" prop="appKey">
+            <el-input v-model="form.appKey" style="width: 580px;" readonly />
+          </el-form-item>
+          <el-form-item v-if="crud.status.edit===1" label="AppSecret" prop="appSecret">
+            <el-input v-model="form.appSecret" placeholder="请输入" style="width: 580px;" readonly />
+          </el-form-item>
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入" style="width: 580px;" />
+          </el-form-item>
+          <el-form-item label="Token时长" prop="tokenDuration">
+            <el-select v-model="form.tokenDuration" placeholder="请选择" style="width: 580px;">
+              <el-option v-for="item in timeOptions" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="remarks">
+            <el-input v-model="form.remarks" placeholder="请输入" style="width: 580px;" type="textarea" :rows="3" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import crudAuth from '@/api/system/auth2'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+
+const defaultForm = { appKey: null, appSecret: null, name: null, tokenDuration: null, remarks: null }
+
+export default {
+  name: 'AuthorizeManage',
+  components: { crudOperation, pagination, rrOperation },
+  cruds() {
+    return CRUD({
+      title: '授权管理',
+      url: 'api/oauthClient/initOauthClient',
+      idField: 'appKey',
+      crudMethod: { ...crudAuth },
+      sort: [],
+      optShow: {
+        add: true,
+        edit: true,
+        del: false,
+        download: false,
+        group: false,
+        reset: false
+      }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      timeOptions: [{ id: 1, name: '1小时' }, { id: 2, name: '12小时' }, { id: 3, name: '1天' }],
+      rules: {
+        name: [
+          { required: true, message: '名称不可为空', trigger: 'blur' }
+        ],
+        tokenDuration: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  computed: {
+  },
+  created() {
+
+  },
+  mounted() {
+  },
+  methods: {
+    resetQuery() {
+      this.crud.query.search = null
+      this.crud.toQuery()
+    },
+    [CRUD.HOOK.afterValidateCU](crud) {
+      console.log('crud.form', crud.form)
+      return true
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.appKey)
+        })
+        crudAuth.del(ids).then((res) => {
+          console.log(res)
+          if (res.code !== 500) {
+            this.$message({ message: '删除成功', type: 'success', offset: 8 })
+          } else {
+            this.$message({ message: res.message, type: 'error', offset: 8 })
+          }
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          console.log(err)
+          this.crud.delAllLoading = false
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+</style>