update

src/api/appKeyInfo.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function findPage(data) {
+  return request({
+    url: '/appKey/findPage',
+    method: 'post',
+    data
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/appKey/save',
+    method: 'post',
+    data
+  })
+}
+
+export function updateById(id, data) {
+  return request({
+    url: '/appKey/updateById',
+    method: 'post',
+    params: { id },
+    data
+  })
+}
+
+export function enableByIds(ids) {
+  return request({
+    url: '/appKey/enableByIds',
+    method: 'post',
+    data: ids
+  })
+}
+
+export function disableByIds(ids) {
+  return request({
+    url: '/appKey/disableByIds',
+    method: 'post',
+    data: ids
+  })
+}

src/api/docsApis.js

@@ -0,0 +1,31 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API,
+  withCredentials: true,
+  timeout: 15000
+})
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    return response.data || undefined
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export function getApis() {
+  return service({
+    url: '/docs/apis',
+    method: 'get'
+  })
+}

src/router/index.js

@@ -42,7 +42,7 @@ export const asyncRoutes = [
       {
         path: 'appkeys',
         name: 'InterfaceAppkeys',
-        component: () => import('@/views/dashboard/index'),
+        component: () => import('@/views/appKey'),
         meta: { title: 'AppKey管理' }
       },
       {

src/utils/request.js

@@ -29,8 +29,6 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   response => {
     const res = response.data
-    console.log(res)
-
     // if the custom code is not 20000, it is judged as an error.
     if (['SUCCESS', 'MESSAGE_SUCCESS'].indexOf(res.code) > -1) {
       if (res.code === 'MESSAGE_SUCCESS') {

src/views/appKey/DialogForm.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+    v-if="visible"
+    width="900px"
+    :title="form.id?'编辑AppKey':'新建AppKey'"
+    :visible.sync="visible"
+  >
+    <el-form v-loading="isLoading" :model="form" label-width="120px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="AppKey">
+            <el-input v-model="form.id" autocomplete="off" disabled/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="密钥">
+        <el-input v-model="form.encryptKey" autocomplete="off" disabled/>
+      </el-form-item>
+      <el-form-item label="备注说明">
+        <el-input v-model="form.remark" type="textarea" autocomplete="off"/>
+      </el-form-item>
+      <el-form-item label="授权接口">
+        <el-transfer
+          v-model="form.permissions"
+          filterable
+          :titles="['未授权接口', '已授权接口']"
+          :button-texts="['移除授权', '加入权限']"
+          filter-placeholder="请输入城市拼音"
+          :data="listApis"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import { save, updateById } from '@/api/appKeyInfo'
+import { getApis } from '@/api/docsApis'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      isLoading: false,
+      listApis: [],
+      form: {
+        permissions: ['login:1.0.0']
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.form = Object.assign({}, data)
+      this.isLoading = true
+      getApis().then(listApis => {
+        const tmp = []
+        console.log(listApis)
+        if (listApis) {
+          listApis.forEach(v => tmp.push({ label: v.title + '[' + v.method + ':' + v.version + ']', key: v.method + ':' + v.version }))
+        }
+        this.listApis = tmp
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    handleSubmit() {
+      console.log(this.form)
+      this.isLoading = true
+      if (this.form.id) {
+        updateById(this.form.id, this.form).then(() => {
+          this.visible = false
+          this.$emit('ok')
+        }).finally(() => {
+          this.isLoading = false
+        })
+      } else {
+        save(this.form).then(res => {
+          this.visible = false
+          this.$emit('ok')
+        }).finally(() => {
+          this.isLoading = false
+        })
+      }
+    }
+  }
+}
+</script>

src/views/appKey/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryForm" inline size="small">
+      <el-form-item label="AppKey">
+        <el-input v-model="queryForm.id" placeholder="AppKey"/>
+      </el-form-item>
+      <el-form-item label="启用">
+        <el-select v-model="queryForm.isEnable" clearable placeholder="用户状态">
+          <el-option label="是" value="Y"/>
+          <el-option label="否" value="N"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注说明">
+        <el-input v-model="queryForm.remark" placeholder="备注说明"/>
+      </el-form-item>
+    </el-form>
+    <el-row class="action-bar-container" type="flex" justify="end">
+      <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
+      <el-button-group>
+        <el-button v-permission="['app.key.add']" size="small" @click.native="$refs.dialogForm.open({})">
+          新建
+        </el-button>
+        <el-button v-permission="['app.key.enable']" size="small" @click.native="enabledByIds(multipleSelection)">
+          启用
+        </el-button>
+        <el-button v-permission="['app.key.disable']" size="small" @click.native="disableByIds(multipleSelection)">
+          禁用
+        </el-button>
+      </el-button-group>
+    </el-row>
+    <el-table
+      v-loading="isLoading"
+      :data="pageData.records"
+      border
+      fit
+      highlight-current-row
+      @selection-change="selectionChange"
+    >
+      <el-table-column type="selection" width="55"/>
+      <el-table-column label="AppKey" prop="id" width="150"/>
+      <el-table-column label="密钥" prop="encryptKey" width="600"/>
+      <el-table-column label="创建时间" prop="createdTime" :formatter="dateTimeFormatter" width="160"/>
+
+      <el-table-column label="启用" width="55">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.isEnable.value===1">{{ scope.row.isEnable.text }}</el-tag>
+          <el-tag v-else type="danger">{{ scope.row.isEnable.text }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="授权接口" width="80">
+        <template slot-scope="scope">
+          {{ (scope.row.permissions && scope.row.permissions.length) || 0 }}个
+        </template>
+      </el-table-column>
+      <el-table-column label="备注说明" prop="remark"/>
+
+      <el-table-column label="操作" width="70" fixed="right">
+        <template slot-scope="scope">
+          <el-dropdown>
+            <el-button type="text">
+              操作<i class="el-icon-arrow-down el-icon--right"/>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-permission="['app.key.edit']" @click.native="$refs.dialogForm.open(scope.row)">编辑</el-dropdown-item>
+              <el-dropdown-item v-if="scope.row.isEnable.value===0" v-permission="['app.key.enable']" @click.native="enabledByIds([scope.row.id])">启用</el-dropdown-item>
+              <el-dropdown-item v-if="scope.row.isEnable.value===1" v-permission="['app.key.disable']" @click.native="disableByIds([scope.row.id])">禁用</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+    <dialog-form ref="dialogForm" @ok="fetchData"/>
+  </div>
+</template>
+
+<script>
+import { findPage, enableByIds, disableByIds } from '@/api/appKeyInfo'
+import DialogForm from './DialogForm'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  components: { DialogForm },
+  data() {
+    return {
+      queryForm: {},
+      isLoading: true,
+      pageData: {},
+      currentPage: 1,
+      multipleSelection: []
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    dateTimeFormatter,
+    selectionChange(val) {
+      const temp = []
+      val.forEach(o => {
+        temp.push(o.id)
+      })
+      this.multipleSelection = temp
+    },
+    paginationChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    },
+    enabledByIds(ids) {
+      console.log(`当前页: ${ids}`)
+      this.$confirm('确认要启用吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        enableByIds(ids).then(() => {
+          this.fetchData()
+        })
+      })
+    },
+    disableByIds(ids) {
+      console.log(`当前页: ${ids}`)
+      this.$confirm('确认要禁用吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        disableByIds(ids).then(() => {
+          this.fetchData()
+        })
+      })
+    },
+    fetchData() {
+      this.isLoading = true
+      findPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>