From 888bbc83d6ebcc137d9e5339d8cb7a217d3eca48 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Thu, 26 Sep 2024 13:08:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86+=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6=E7=AE=A1=E7=90=86=E7=9A=84userName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DraftApi.ts             |   5 +-
 src/api/PublishApi.ts           |   5 +-
 src/api/UserApi.ts              |  83 +++++++++++++
 src/layouts/MainLayout.vue      |   7 +-
 src/pages/IscsDraftManage.vue   |   5 +-
 src/pages/IscsPublishManage.vue |   9 +-
 src/pages/UserManage.vue        | 200 ++++++++++++++++++++++++++++++++
 src/router/routes.ts            |  21 ++++
 src/stores/auth-store.ts        |   2 +-
 9 files changed, 325 insertions(+), 12 deletions(-)
 create mode 100644 src/api/UserApi.ts
 create mode 100644 src/pages/UserManage.vue

diff --git a/src/api/DraftApi.ts b/src/api/DraftApi.ts
index 304c358..ce3f216 100644
--- a/src/api/DraftApi.ts
+++ b/src/api/DraftApi.ts
@@ -41,6 +41,7 @@ export interface DraftItem {
   createdAt: string;
   updatedAt: string;
   defaultReleaseDataName: string;
+  userName: string;
 }
 export interface IscsDataOptions {
   style: IscsStyle;
@@ -71,7 +72,7 @@ export async function draftPageQuery(
     userDraftIscsDataPaging(paging: $paging, query: $query) {
       total
       items {
-        draftData {id name dataType userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        draftData {id name dataType userName defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
         options {style}
       }
     }
@@ -92,7 +93,7 @@ export async function sharedDraftPageQuery(
     sharedDraftIscsDataPaging(paging: $paging, query: $query) {
       total
       items {
-        draftData {id name dataType userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        draftData {id name dataType userName defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
         options {style}
       }
     }
diff --git a/src/api/PublishApi.ts b/src/api/PublishApi.ts
index 52f503c..3e0ff64 100644
--- a/src/api/PublishApi.ts
+++ b/src/api/PublishApi.ts
@@ -14,6 +14,7 @@ export interface PublishItem {
   createdAt: string;
   updatedAt: string;
   description: string;
+  userName: string;
 }
 
 interface PagingQueryParams {
@@ -111,7 +112,7 @@ export async function publishPageQuery(
     releaseIscsDataPaging(page: $page, query: $query) {
       total
       items {
-        releaseData {id name dataType  usedVersionId userId isPublished createdAt updatedAt description }
+        releaseData {id name dataType  usedVersionId userName isPublished createdAt updatedAt description }
         options {style}
       }
     }
@@ -163,7 +164,7 @@ export async function getPublishHistoryById(variables: {
     releaseDataVersionPaging(dataId: $dataId, page: $page) {
       total
       items {
-        id releaseDataId description userId createdAt
+        id releaseDataId description userName createdAt
       }
     }
   }
diff --git a/src/api/UserApi.ts b/src/api/UserApi.ts
new file mode 100644
index 0000000..8efedb2
--- /dev/null
+++ b/src/api/UserApi.ts
@@ -0,0 +1,83 @@
+import { api } from 'src/boot/axios';
+import { PageDto } from './ApiCommon';
+
+export interface User {
+  id: string;
+  name: string;
+  mobile: string;
+  email: string;
+  roles: [];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PagingQueryParams {
+  page: {
+    page: number;
+    itemsPerPage: number;
+  };
+  query: {
+    id?: string;
+    name?: string;
+    mobile?: string;
+    email?: string;
+    roles?: [];
+  };
+}
+
+/**
+ * 分页查询用户信息
+ * @param params
+ * @returns
+ */
+export async function userPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<User>> {
+  const query = `
+  query userPaging($page: PageQueryDto, $query: UserQueryDto) {
+    userPaging(page: $page, query: $query) {
+      total
+      items {
+        id name mobile email roles createdAt updatedAt
+      }
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+    variables: params,
+  });
+  return response.data.data.userPaging;
+}
+
+/**
+ * 获取获取用户信息
+ */
+export async function getLoginUserInfo() {
+  const query = `
+  query loginUserInfo {
+    loginUserInfo{
+      id
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+  });
+  return response.data.data;
+}
+
+/**
+ * 同步用户
+ */
+export async function syncUsersInfo() {
+  const mutation = `
+  mutation syncUser {
+    syncUser
+  }
+`;
+  const response = await api.post('', {
+    query: mutation,
+  });
+  return response.data.data;
+}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 1f778e8..937e408 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -126,12 +126,17 @@ import SysMenu from 'src/components/SysMenu.vue';
 import { useRoute } from 'vue-router';
 import { clearJwtToken, saveJwtToken } from 'src/configs/TokenManage';
 import { Dialog } from 'quasar';
+import { getLoginUserInfo } from 'src/api/UserApi';
+import { useAuthStore } from 'src/stores/auth-store';
 
 const route = useRoute();
+const authStore = useAuthStore();
 
-onMounted(() => {
+onMounted(async () => {
   if (route.params.token) {
     saveJwtToken(route.params.token as string);
+    const res = await getLoginUserInfo();
+    authStore.setUserId(res.loginUserInfo.id);
   }
 });
 
diff --git a/src/pages/IscsDraftManage.vue b/src/pages/IscsDraftManage.vue
index feaaafd..4db1a1c 100644
--- a/src/pages/IscsDraftManage.vue
+++ b/src/pages/IscsDraftManage.vue
@@ -315,9 +315,9 @@ const columnDefs: QTableColumn[] = [
     align: 'center',
   },
   {
-    name: 'userId',
+    name: 'userName',
     label: '创建人',
-    field: 'userId',
+    field: 'userName',
     align: 'center',
   },
   {
@@ -648,6 +648,7 @@ const draftInfo = ref<DraftItem>({
   createdAt: '',
   updatedAt: '',
   defaultReleaseDataName: '',
+  userName: '',
 });
 
 const publishColumnDefs: QTableColumn[] = [
diff --git a/src/pages/IscsPublishManage.vue b/src/pages/IscsPublishManage.vue
index f38c8b0..c1f03cf 100644
--- a/src/pages/IscsPublishManage.vue
+++ b/src/pages/IscsPublishManage.vue
@@ -206,9 +206,9 @@ const columnDefs: QTableColumn[] = [
     align: 'center',
   },
   {
-    name: 'userId',
+    name: 'userName',
     label: '发布人',
-    field: 'userId',
+    field: 'userName',
     align: 'center',
   },
   {
@@ -437,13 +437,14 @@ const historyInfo = ref<PublishItem>({
   createdAt: '',
   updatedAt: '',
   description: '',
+  userName: '',
 });
 
 const historyColumnDefs: QTableColumn[] = [
   {
-    name: 'userId',
+    name: 'userName',
     label: '发布人',
-    field: 'userId',
+    field: 'userName',
     required: true,
     align: 'center',
   },
diff --git a/src/pages/UserManage.vue b/src/pages/UserManage.vue
new file mode 100644
index 0000000..9b053af
--- /dev/null
+++ b/src/pages/UserManage.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="用户列表"
+      :style="{ height: tableHeight + 'px' }"
+      class="my-sticky-virtscroll-table"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <div class="q-gutter-md q-mt-none row justify-center items-start">
+          <q-input dense debounce="1000" v-model="filter.name" label="名称" />
+          <q-select
+            dense
+            v-model="filter.roles"
+            :options="rolesOptions"
+            multiple
+            emit-value
+            map-options
+            options-dense
+            label="角色"
+            style="min-width: 150px"
+          />
+          <q-btn
+            :disable="operateDisabled"
+            color="primary"
+            label="同步"
+            @click="syncUsersInfoFn"
+          />
+        </div>
+      </template>
+
+      <template v-slot:body-cell-roles="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-chip
+              outline
+              size="sm"
+              color="primary"
+              v-for="(item, index) in props.row.roles"
+              :key="index"
+            >
+              {{ getRolesName(item) }}
+            </q-chip>
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import {
+  PagingQueryParams,
+  userPageQuery,
+  syncUsersInfo,
+} from '../api/UserApi';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  { name: 'id', label: '用户ID', field: 'id', align: 'center' },
+  {
+    name: 'name',
+    label: '用户名',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'roles',
+    label: '角色',
+    field: 'roles',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'mobile',
+    label: '手机号',
+    field: 'mobile',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '邮箱',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'createdAt',
+    label: '创建时间',
+    field: (row) => new Date(row.createdAt).toLocaleString(),
+    align: 'center',
+  },
+  {
+    name: 'updatedAt',
+    label: '更新时间',
+    field: (row) => new Date(row.updatedAt).toLocaleString(),
+    align: 'center',
+  },
+];
+
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+  roles: [],
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+// eslint-disable-next-line
+async function onRequest(props: any) {
+  const { page, rowsPerPage } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  const variables: PagingQueryParams = {
+    page: {
+      page: page,
+      itemsPerPage: rowsPerPage,
+    },
+    query: {},
+  };
+  if (filter.name) {
+    Object.assign(variables.query, { name: filter.name });
+  }
+  if (filter.roles) {
+    Object.assign(variables.query, { roles: filter.roles });
+  }
+  try {
+    const response = await userPageQuery(variables);
+    pagination.value.rowsNumber = response.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    rows.splice(0, rows.length, ...(response.items as []));
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const rolesOptions = [
+  { label: '管理员', value: 'ADMIN' },
+  { label: '用户', value: 'USER' },
+];
+function getRolesName(role: string) {
+  for (let i = 0; i < rolesOptions.length; i++) {
+    if (rolesOptions[i].value == role) {
+      return rolesOptions[i].label;
+    }
+  }
+}
+
+const operateDisabled = ref(false);
+async function syncUsersInfoFn() {
+  operateDisabled.value = true;
+  const res = await syncUsersInfo();
+  operateDisabled.value = false;
+  if (res.syncUser) {
+    tableRef.value.requestServerInteraction();
+  }
+}
+</script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 04c2ca9..5d4a73d 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -17,6 +17,27 @@ const routes: RouteRecordRaw[] = [
     // children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
   },
 
+  {
+    path: '/sysManage',
+    name: 'sysManage',
+    component: () => import('layouts/MainLayout.vue'),
+    meta: {
+      label: '系统管理',
+      icon: 'dataset',
+    },
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        meta: {
+          label: '用户管理',
+          icon: 'manage_accounts',
+        },
+        component: () => import('pages/UserManage.vue'),
+      },
+    ],
+  },
+
   {
     path: '/dataManage',
     name: 'dataManage',
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
index 8a8d132..f582c58 100644
--- a/src/stores/auth-store.ts
+++ b/src/stores/auth-store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
-    userId: 8160 as number | null,
+    userId: null as number | null,
   }),
   actions: {
     setUserId(id: number | null) {