feat：新增三方账号注册登录

src/api/system/login.js

@@ -48,4 +48,19 @@ export function register(data) {
     method: 'post',
     data: data
   })
+}
+
+/**
+ * 三方授权回调
+ * @param {*} data 
+ * @param {*} params
+ * @returns 
+ */
+export function oauthCallback(data, params) {
+  return request({
+    url: '/auth/callback',
+    method: 'post',
+    data: data,
+    params: params
+  })
 }

src/api/system/thirdaccount.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+/**
+* 三方账号绑定分页查询
+* @param {查询条件} data
+*/
+export function listThirdAccount(query) {
+  return request({
+    url: 'system/ThirdAccount/list',
+    method: 'get',
+    params: query,
+  })
+}
+
+
+/**
+* 新增三方账号绑定
+* @param data
+*/
+export function addThirdAccount(data) {
+  return request({
+    url: 'system/ThirdAccount',
+    method: 'post',
+    data: data,
+  })
+}
+
+/**
+* 修改三方账号绑定
+* @param data
+*/
+export function updateThirdAccount(data) {
+  return request({
+    url: 'system/ThirdAccount',
+    method: 'PUT',
+    data: data,
+  })
+}
+
+/**
+* 获取三方账号绑定详情
+* @param {Id}
+*/
+export function getThirdAccount(id) {
+  return request({
+    url: 'system/ThirdAccount/' + id,
+    method: 'get'
+  })
+}
+
+/**
+* 删除三方账号绑定
+* @param {主键} pid
+*/
+export function delThirdAccount(pid) {
+  return request({
+    url: 'system/ThirdAccount/' + pid,
+    method: 'delete'
+  })
+}
+
+// 导出三方账号绑定
+export function exportThirdAccount(query) {
+  return request({
+    url: 'system/ThirdAccount/export',
+    method: 'get',
+    params: query
+  })
+}
+

src/assets/styles/index.scss

@@ -104,7 +104,7 @@ div:focus {
 
   &:hover {
     // color: rgb(32, 160, 255);
-		opacity: 0.3;
+    opacity: 0.3;
   }
 }
 
@@ -120,6 +120,9 @@ div:focus {
 .pb5 {
   padding-bottom: 5px;
 }
+.pb20 {
+  padding-bottom: 20px;
+}
 
 .mt5 {
   margin-top: 5px;

src/assets/styles/login.scss

@@ -0,0 +1,73 @@
+.login {
+  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
+  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
+  background-attachment: fixed;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  // background-image: url('../assets/images/login-background.jpg');
+  background-size: cover;
+}
+
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #fff;
+}
+
+.login-form {
+  border-radius: 6px;
+  // background: #ffffff;
+  background-color: hsla(0, 0%, 100%, 0.3);
+  width: 310px;
+  padding: 25px 15px 5px 15px;
+  position: relative;
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+.langSet {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}

src/permission.js

@@ -9,7 +9,7 @@ import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/socialLogin'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -38,6 +38,11 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
+  {
+    path: '/sociallogin',
+    component: () => import('@/views/socialLogin'),
+    hidden: true
+  },
   {
     path: '/register',
     component: () => import('@/views/register'),

src/store/modules/user.js

@@ -1,7 +1,8 @@
-import { login, logout, getInfo } from '@/api/system/login'
+import { login, logout, getInfo, oauthCallback } from '@/api/system/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
-
+import Cookies from 'js-cookie'
+import { encrypt } from '@/utils/jsencrypt'
 const useUserStore = defineStore('user', {
   state: () => ({
     userInfo: '',
@@ -10,9 +11,13 @@ const useUserStore = defineStore('user', {
     avatar: '',
     roles: [],
     permissions: [],
-    userId: 0
+    userId: 0,
+    authSource: ''
   }),
   actions: {
+    setAuthSource(source) {
+      this.authSource = source
+    },
     // 登录
     login(userInfo) {
       const username = userInfo.username.trim()
@@ -33,7 +38,33 @@ const useUserStore = defineStore('user', {
           reject(error)
         })
       })
-    }, // 获取用户信息
+    },
+    /**
+     * 三方授权登录
+     * @param {*} data 
+     * @returns 
+     */
+    oauthLogin(data) {
+      return new Promise((resolve, reject) => {
+        oauthCallback(data, { authSource: this.authSource }).then(res => {
+          const { code, data } = res
+          if (code == 200) {
+            setToken(data.token)
+            this.token = data.token
+            Cookies.set('username', data.userName, { expires: 30 })
+            Cookies.set('password', encrypt(data.password), { expires: 30 })
+            Cookies.set('rememberMe', true, { expires: 30 })
+            resolve(res) //then处理
+          } else {
+            console.log('login error ', res)
+            reject(res) //catch处理
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 获取用户信息
     getInfo() {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
@@ -49,8 +80,8 @@ const useUserStore = defineStore('user', {
 
           this.name = data.user.nickName
           this.avatar = avatar
-					this.userInfo = data.user //新加
+          this.userInfo = data.user //新加
-					this.userId = data.user.userId//新加
+          this.userId = data.user.userId //新加
           resolve(res)
         }).catch(error => {
           console.error(error);

src/views/login.vue

@@ -41,17 +41,23 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-form-item>
+
+      <div style="display: flex; justify-content: space-between">
         <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
-      </el-form-item>
+        <router-link class="link-type" :to="'/register'">立即注册</router-link>
+      </div>
+
       <el-form-item style="width: 100%">
         <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
           <span v-if="!loading">{{ $t('login.btnLogin') }}</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right">
+      </el-form-item>
-          <router-link class="link-type" :to="'/register'">还没有账号？立即注册</router-link>
+      <el-form-item>
-        </div>
+        <img src="../assets/icons/gitee.png" alt="" class="login-icon" @click="onAuth('GITEE')" />
+        <img src="../assets/icons/github.png" alt="" class="login-icon" />
+        <img src="../assets/icons/dingding.png" alt="" class="login-icon" />
+        <img src="../assets/icons/wechat.png" alt="" class="login-icon" />
       </el-form-item>
     </el-form>
 
@@ -108,9 +114,7 @@ function handleLogin() {
       // 勾选了需要记住密码设置在cookie中设置记住用户明和名命
       if (loginForm.value.rememberMe) {
         Cookies.set('username', loginForm.value.username, { expires: 30 })
-        Cookies.set('password', encrypt(loginForm.value.password), {
+        Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
-          expires: 30,
-        })
         Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
       } else {
         // 否则移除
@@ -155,82 +159,23 @@ function getCookie() {
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
   }
 }
+function onAuth(type) {
+  userStore.setAuthSource(type)
+
+  switch (type) {
+    default:
+      window.location.href = import.meta.env.VITE_APP_BASE_API + '/auth/Authorization?authSource=' + type
+      break
+  }
+}
 getCode()
 getCookie()
 </script>
 
 <style lang="scss" scoped>
-.login {
+@import '@/assets/styles/login.scss';
-  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
+.login-icon {
-  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
+  width: 30px;
-  background-attachment: fixed;
+  margin-right: 10px;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  // background-image: url('../assets/images/login-background.jpg');
-  background-size: cover;
-}
-
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #fff;
-}
-
-.login-form {
-  border-radius: 6px;
-  // background: #ffffff;
-  background-color: hsla(0, 0%, 100%, 0.3);
-  width: 310px;
-  padding: 25px 15px 5px 15px;
-  position: relative;
-
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
-  }
-}
-
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-
-.login-code {
-  width: 33%;
-  height: 40px;
-  float: right;
-
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-
-.login-code-img {
-  height: 40px;
-  padding-left: 12px;
-}
-.langSet {
-  position: absolute;
-  right: 20px;
-  top: 10px;
 }
 </style>

src/views/socialLogin.vue

@@ -0,0 +1,62 @@
+<template>
+  <starBackground></starBackground>
+  <div class="login">
+    <el-form ref="loginRef" :model="loginForm" class="login-form">
+      <h3 class="title">{{ defaultSettings.title }}</h3>
+
+      <div v-if="!loading" style="text-align: center" class="pb20">
+        <el-empty v-if="!loading" description="未获取到授权信息，请返回重新授权登录" />
+        <router-link class="link-type" :to="'/login'">返回{{ $t('login.btnLogin') }}</router-link>
+      </div>
+      <div v-else class="loading">登 录 中...</div>
+    </el-form>
+
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <div v-html="defaultSettings.copyright"></div>
+    </div>
+  </div>
+</template>
+<script setup name="socialLogin">
+import starBackground from '@/views/components/starBackground.vue'
+import { getQueryObject } from '@/utils/index'
+import useUserStore from '@/store/modules/user'
+import defaultSettings from '@/settings'
+
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+const loginForm = ref(undefined)
+const callbackQuery = ref(undefined)
+const redirect = ref(undefined)
+const loading = ref(false)
+callbackQuery.value = getQueryObject()
+redirect.value = route.query.redirect
+const userInfo = computed(() => {
+  return userStore.userInfo
+})
+console.log(userInfo.value)
+if (callbackQuery.value && callbackQuery.value.state != null) {
+  loading.value = true
+  // 调用action的登录方法
+  userStore
+    .oauthLogin(callbackQuery.value)
+    .then(() => {
+      proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
+      router.push({ path: redirect.value || '/' })
+    })
+    .catch((error) => {
+      console.error(error)
+      proxy.$modal.msgError(error.msg)
+      loading.value = false
+    })
+}
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/login.scss';
+.loading {
+  text-align: center;
+  color: #fff;
+}
+</style>

src/views/system/oauth/thirdAccount.vue

@@ -0,0 +1,358 @@
+<!--
+ * @Descripttion: (三方账号绑定/third_account)
+ * @version: (1.0)
+ * @Author: (zz)
+ * @Date: (2022-06-23)
+ * @LastEditors: (zz)
+ * @LastEditTime: (2022-06-23)
+-->
+<template>
+  <div>
+    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
+      <el-form-item label="用户id" prop="userId">
+        <el-input v-model.number="queryParams.userId" placeholder="请输入用户id" />
+      </el-form-item>
+      <el-form-item label="三方唯一id" prop="thirdUniqueAcount">
+        <el-input v-model="queryParams.thirdUniqueAcount" placeholder="请输入三方唯一id" />
+      </el-form-item>
+      <!-- <el-form-item label="账号类型" prop="accountType">
+        <el-select v-model="queryParams.accountType" placeholder="请选择账号类型">
+          <el-option v-for="item in options.accountTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+        </el-select>
+      </el-form-item> -->
+      <el-form-item label="添加时间">
+        <el-date-picker
+          v-model="dateRangeAddTime"
+          style="width: 240px"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          placeholder="请选择添加时间"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :shortcuts="dateOptions">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
+        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 工具区域 -->
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button type="primary" v-hasPermi="['system:thirdaccount:add']" plain icon="plus" @click="handleAdd">
+          {{ $t('btn.add') }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" :disabled="single" v-hasPermi="['system:thirdaccount:edit']" plain icon="edit" @click="handleUpdate">
+          {{ $t('btn.edit') }}
+        </el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button type="danger" :disabled="multiple" v-hasPermi="['system:thirdaccount:delete']" plain icon="delete" @click="handleDelete">
+          {{ $t('btn.delete') }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['system:thirdaccount:export']">
+          {{ $t('btn.export') }}
+        </el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 数据区域 -->
+    <el-table
+      :data="dataList"
+      v-loading="loading"
+      ref="table"
+      border
+      highlight-current-row
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+
+      <el-table-column prop="id" label="id" align="center" sortable />
+      <el-table-column prop="userId" label="用户id" align="center" />
+      <el-table-column prop="user.nickName" label="昵称" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="thirdUniqueAcount" label="三方唯一id" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="accountType" label="账号类型" align="center"> </el-table-column>
+      <el-table-column prop="addTime" label="添加时间" align="center" :show-overflow-tooltip="true" />
+      <el-table-column label="操作" align="center" width="160">
+        <template #default="scope">
+          <!-- <el-button v-hasPermi="['system:thirdaccount:edit']" type="success" icon="edit" title="编辑" @click="handleUpdate(scope.row)"></el-button> -->
+          <el-button
+            v-hasPermi="['system:thirdaccount:delete']"
+            type="danger"
+            icon="delete"
+            title="删除"
+            @click="handleDelete(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      class="mt10"
+      background
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改三方账号绑定对话框 -->
+    <el-dialog :title="title" :lock-scroll="false" v-model="open">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :lg="24">
+            <el-form-item label="id" prop="id">
+              <el-input-number v-model.number="form.id" controls-position="right" placeholder="请输入id" :disabled="title == '修改数据'" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :lg="24">
+            <el-form-item label="用户id" prop="userId">
+              <el-input v-model="form.userId" placeholder="请输入用户id" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :lg="24">
+            <el-form-item label="三方唯一id" prop="thirdUniqueAcount">
+              <el-input v-model="form.thirdUniqueAcount" placeholder="请输入三方唯一id" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :lg="24">
+            <el-form-item label="账号类型" prop="accountType">
+              <el-select v-model="form.accountType" placeholder="请选择账号类型">
+                <el-option
+                  v-for="item in options.accountTypeOptions"
+                  :key="item.dictValue"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :lg="24">
+            <el-form-item label="添加时间" prop="addTime">
+              <el-date-picker v-model="form.addTime" type="datetime" :teleported="false" placeholder="选择日期时间"></el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer v-if="opertype != 3">
+        <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="thirdaccount">
+import {
+  listThirdAccount,
+  addThirdAccount,
+  delThirdAccount,
+  updateThirdAccount,
+  getThirdAccount,
+  exportThirdAccount,
+} from '@/api/system/thirdaccount.js'
+
+const { proxy } = getCurrentInstance()
+// 选中id数组数组
+const ids = ref([])
+// 非单选禁用
+const single = ref(true)
+// 非多个禁用
+const multiple = ref(true)
+const loading = ref(false)
+const showSearch = ref(true)
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  sort: undefined,
+  sortType: undefined,
+  userId: undefined,
+  thirdUniqueAcount: undefined,
+  accountType: undefined,
+  addTime: undefined,
+})
+
+const title = ref('')
+// 操作类型 1、add 2、edit 3、view
+const opertype = ref(0)
+const open = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    id: [{ required: true, message: 'id不能为空', trigger: 'blur', type: 'number' }],
+    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur', type: 'number' }],
+    thirdUniqueAcount: [{ required: true, message: '三方唯一id不能为空', trigger: 'blur' }],
+    accountType: [{ required: true, message: '账号类型不能为空', trigger: 'change' }],
+  },
+  options: {
+    //  账号类型 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
+    accountTypeOptions: [],
+  },
+})
+
+const { form, rules, options } = toRefs(state)
+const total = ref(0)
+const dataList = ref([])
+const queryRef = ref()
+const formRef = ref()
+// 添加时间时间范围
+const dateRangeAddTime = ref([])
+
+var dictParams = []
+
+function getList() {
+  proxy.addDateRange(queryParams, proxy.dateRangeAddTime, 'AddTime')
+  loading.value = true
+  listThirdAccount(queryParams).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.data.result
+      total.value = res.data.totalNum
+      loading.value = false
+    }
+  })
+}
+
+// 关闭dialog
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 重置表单
+function reset() {
+  form.value = {
+    id: undefined,
+    userId: undefined,
+    thirdUniqueAcount: undefined,
+    accountType: undefined,
+    addTime: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+
+// 查询
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+// 添加
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = '添加'
+  opertype.value = 1
+}
+
+// 删除按钮操作
+function handleDelete(row) {
+  const Ids = row.id || ids.value
+
+  proxy
+    .$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
+    .then(function () {
+      return delThirdAccount(Ids)
+    })
+    .then(() => {
+      handleQuery()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+
+// 修改按钮操作
+function handleUpdate(row) {
+  reset()
+  const id = row.id || ids.value
+  getThirdAccount(id).then((res) => {
+    const { code, data } = res
+    if (code == 200) {
+      open.value = true
+      title.value = '修改数据'
+      opertype.value = 2
+
+      form.value = {
+        ...data,
+      }
+    }
+  })
+}
+
+// 表单提交
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.id != undefined && opertype.value === 2) {
+        updateThirdAccount(form.value)
+          .then((res) => {
+            proxy.$modal.msgSuccess('修改成功')
+            open.value = false
+            getList()
+          })
+          .catch(() => {})
+      } else {
+        addThirdAccount(form.value)
+          .then((res) => {
+            proxy.$modal.msgSuccess('新增成功')
+            open.value = false
+            getList()
+          })
+          .catch((err) => {
+            //TODO 错误逻辑
+          })
+      }
+    }
+  })
+}
+
+// 重置查询操作
+function resetQuery() {
+  // 添加时间时间范围
+  dateRangeAddTime.value = []
+  proxy.resetForm('queryRef')
+  handleQuery()
+}
+// 导出按钮操作
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有三方账号绑定数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return exportThirdAccount(queryParams)
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+// 自定义排序
+function sortChange(column) {
+  if (column.prop == null || column.order == null) {
+    queryParams.sort = undefined
+    queryParams.sortType = undefined
+  } else {
+    queryParams.sort = column.prop
+    queryParams.sortType = column.order
+  }
+
+  handleQuery()
+}
+
+handleQuery()
+</script>