feat:客户端增删改查页面

.env.development

@@ -4,5 +4,5 @@
 NODE_ENV='development'
 
 VITE_APP_TITLE = '管理系统'
-VITE_APP_PORT = 3000
+VITE_APP_PORT = 4396
 VITE_APP_BASE_API = '/dev-api'

src/App.vue

@@ -10,3 +10,8 @@ export default {
 }
 </script>
 
+<style>
+body .el-table th.gutter {
+  display: table-cell !important;
+}
+</style>

src/api/system/client.ts

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function list(queryParams:object) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+export function detail(id:number) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients/' + id,
+        method: 'get'
+    })
+}
+
+export function add(data:object) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients',
+        method: 'post',
+        data: data
+    })
+}
+
+export function update(id:number, data:object) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+export function del(ids:string) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients/'+ids,
+        method: 'delete'
+    })
+}
+
+export function patch(id:number, data:object) {
+    return request({
+        url: '/youlai-admin/api/v1/oauth-clients/' + id,
+        method: 'patch',
+        data: data
+    })
+}

src/components/Pagination/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+        :background="background"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :total="total"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from "vue";
+import {scrollTo} from '@/utils/scroll-to'
+
+export default defineComponent({
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number,
+      default: 0
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['pagination', 'update:page', 'update:limit'],
+
+  setup(props: any, ctx) {
+    const currentPage = computed({
+      get() {
+        return props.page
+      },
+      set(val) {
+        ctx.emit('update:page', val)
+      }
+    })
+
+    const pageSize = computed({
+      get() {
+        return props.limit
+      },
+      set(val) {
+        ctx.emit('update:limit', val)
+      }
+    })
+
+    const handleSizeChange = (val: number) => {
+      ctx.emit('pagination', {page: currentPage, limit: val})
+      if (props.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+    const handleCurrentChange = (val: number) => {
+      ctx.emit('pagination', {page: val, limit: props.pageSizes})
+      if (props.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+    return {currentPage, pageSize, handleSizeChange, handleCurrentChange}
+  }
+})
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/main.ts

@@ -6,25 +6,29 @@ import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/theme-chalk/index.css'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
 import 'virtual:svg-icons-register';
 
 
 // @see https://blog.csdn.net/qq_37213281/article/details/121422027
 import * as ElIconModules from '@element-plus/icons'
 
-
 import '@/permission'
 
+// 全局组件
+import  Pagination from '@/components/Pagination/index.vue'
+
+
 const app=createApp(App)
 
 // 统一注册el-icon图标
-for(let iconName in ElIconModules){
+for(let iconName in ElIconModules ){
-    // @ts-ignore
+    app.component(iconName,(ElIconModules as any)[iconName] )
-    app.component(iconName,ElIconModules[iconName] )
 }
 
 app
+    .component('Pagination',Pagination)
     .use(router)
     .use(store,key)
-    .use(ElementPlus)
+    .use(ElementPlus,{locale})
     .mount('#app')

src/router/index.ts

@@ -1,5 +1,5 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
-import Layout from '@/layout/index.vue'
+export const Layout = () => import( '@/layout/index.vue')
 
 
 // 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html

src/store/modules/permission.ts

@@ -5,7 +5,7 @@ import {constantRoutes} from '@/router'
 import {getRouteList} from "@/api/system/menu";
 
 const modules = import.meta.glob("../../views/**/**.vue");
-import Layout from '@/layout/index.vue'
+export const Layout = () => import( '@/layout/index.vue')
 
 const hasPermission = (roles: string[], route: RouteRecordRaw) => {
     // 超级管理员放行

src/utils/scroll-to.ts

@@ -0,0 +1,61 @@
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+    t /= d / 2
+    if (t < 1) {
+        return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+const requestAnimFrame = (function () {
+    return window.requestAnimationFrame || (window as any).webkitRequestAnimationFrame || (window as any).mozRequestAnimationFrame || function (callback) {
+        window.setTimeout(callback, 1000 / 60)
+    }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+const move = (amount: number) => {
+    document.documentElement.scrollTop = amount;
+    (document.body.parentNode as HTMLElement).scrollTop = amount
+    document.body.scrollTop = amount
+}
+
+const position = () => {
+    return document.documentElement.scrollTop || (document.body.parentNode as HTMLElement).scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export const scrollTo = (to: number, duration: number, callback?: Function) => {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    const animateScroll = function () {
+        // increment the time
+        currentTime += increment
+        // find the value with the quadratic in-out easing function
+        const val = easeInOutQuad(currentTime, start, change, duration)
+        // move the document.body
+        move(val)
+        // do the animation unless its over
+        if (currentTime < duration) {
+            requestAnimFrame(animateScroll)
+        } else {
+            if (callback && typeof (callback) === 'function') {
+                // the animation is done so lets callback
+                callback()
+            }
+        }
+    }
+    animateScroll()
+}

src/views/login/index.vue

@@ -52,8 +52,8 @@
             style="width: 65%"
             @keyup.enter.native="handleLogin"
         />
-        <div class="validate-code">
+        <div class="captcha">
-          <img :src="base64Captcha" @click="getCaptcha" height="38px"/>
+          <img :src="base64Captcha" @click="handleCaptchaGenerate" height="38px"/>
         </div>
       </el-form-item>
 
@@ -105,7 +105,7 @@ export default {
   },
   created() {
     // 生成验证码
-    this.getCaptcha()
+    this.handleCaptchaGenerate()
   },
   watch: {
     $route: {
@@ -135,7 +135,7 @@ export default {
             this.loading = false
           }).catch(() => {
             this.loading = false
-            this.getCaptcha()
+            this.handleCaptchaGenerate()
           })
         } else {
           console.log('error submit!!')
@@ -144,7 +144,7 @@ export default {
       })
     },
     // 获取验证码
-    getCaptcha(){
+    handleCaptchaGenerate(){
       getCaptcha().then(response => {
         const {img, uuid} = response.data
         this.base64Captcha = "data:image/gif;base64," + img
@@ -263,7 +263,7 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
-  .validate-code {
+  .captcha {
     position: absolute;
     right: 0;
     top: 0;

src/views/system/client/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 Begin -->
+    <el-form
+        ref="queryForm"
+        :model="state.queryParams"
+        :inline="true"
+        size="mini"
+    >
+      <el-form-item>
+        <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="success" :icon="Edit" :disabled="state.single" @click="handleUpdate">修改</el-button>
+        <el-button type="danger" :icon='Delete' :disabled="state.multiple" @click="handleDelete">删除</el-button>
+      </el-form-item>
+
+      <el-form-item prop="clientId">
+        <el-input
+            v-model="state.queryParams.clientId"
+            placeholder="输入客户端ID"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格  -->
+    <el-table
+        v-loading="state.loading"
+        :data="state.pageList"
+        border
+        @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="序号" type="index" width="55" align="center"/>
+      <el-table-column label="客户端ID" prop="clientId" width="200"/>
+      <el-table-column label="客户端密钥" prop="clientSecret" width="100"/>
+      <el-table-column label="域" width="100" prop="scope"/>
+      <el-table-column label="自动放行" prop="autoapprove" width="100"/>
+      <el-table-column label="授权方式" prop="authorizedGrantTypes"/>
+      <el-table-column label="认证令牌时效(单位：秒)" width="200" prop="accessTokenValidity"/>
+      <el-table-column label="刷新令牌时效(单位：秒)" width="200" prop="refreshTokenValidity"/>
+      <el-table-column label="操作" align="center" width="120">
+        <template #default="scope">
+          <el-button
+              type="primary"
+              :icon="Edit"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleUpdate(scope.row)"
+          />
+          <el-button
+              type="danger"
+              :icon="Delete"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页工具条 -->
+    <pagination
+        v-show="state.total>0"
+        :total="state.total"
+        :page.sync="state.queryParams.pageNum"
+        :limit.sync="state.queryParams.pageSize"
+        @pagination="handleQuery"
+    />
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {list, detail, update, add, del} from '@/api/system/client'
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+import {onMounted, reactive, toRefs, ref, unref} from 'vue'
+
+const state = reactive({
+  loading: true,
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    clientId: undefined
+  },
+  pageList: [],
+  total: 0,
+  dialog: {
+    title: undefined,
+    visible: false,
+    type: 'create'
+  },
+  formData: {
+    authorizedGrantTypes: [],
+    clientSecret: undefined,
+    clientId: undefined,
+    accessTokenValidity: undefined,
+    refreshTokenValidity: undefined,
+    webServerRedirectUri: undefined,
+    authorities: undefined,
+    additionalInformation: undefined,
+    autoapprove: 'false'
+  },
+  rules: {
+    clientId: [
+      {required: true, message: '客户端ID不能为空', trigger: 'blur'}
+    ]
+  },
+})
+
+function handleQuery() {
+  list(state.queryParams).then(response => {
+    const {data, total} = response as any
+    state.pageList = data
+    state.total = total
+    state.loading = false
+  })
+}
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    clientId: undefined
+  }
+  handleQuery()
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.clientId)
+  state.single = selection.length !== 1
+  state.multiple = !selection.length
+}
+
+function handleAdd() {
+
+}
+
+function handleUpdate(row: any) {
+
+}
+
+function submitForm() {
+
+}
+
+onMounted(() => {
+  handleQuery()
+})
+
+</script>