用户管理

src/api/UserApi.ts

@@ -55,6 +55,7 @@ export async function login(loginInfo: LoginInfo): Promise<string> {
 
 export class PagingQueryParams extends PageQueryDto {
   name?: string;
+  roleId?: number;
 }
 
 /**
@@ -70,3 +71,7 @@ export async function pageQuery(
   });
   return response.data;
 }
+
+export function distributeRole(query: { userId: number; roleIds: number[] }) {
+  return api.post('/api/role/distribute', query);
+}

src/pages/UserManage.vue

@@ -0,0 +1,215 @@
+<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>
+        <q-card-section>
+          <q-select
+            dense
+            debounce="1000"
+            v-model="filter.roleId"
+            :options="optionsSearch"
+          ></q-select>
+        </q-card-section>
+        <q-btn flat round color="primary" icon="sym_o_search" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              label="编辑"
+              @click="edieUserData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="editFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">修改用户角色</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input outlined disable label="用户名" v-model="userName" />
+        </q-card-section>
+
+        <q-card-section>
+          <q-select
+            standout="bg-primary text-white"
+            v-model="userRole"
+            :options="options"
+            label="用户角色"
+          ></q-select>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="提交" @click="edieUserRole" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import { pageQuery, distributeRole } from '../api/UserApi';
+import { successNotify, errorNotify } from '../utils/CommonNotify';
+
+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: 'name',
+    label: '用户名',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  { name: 'id', label: '用户ID', field: 'id', align: 'center' },
+  {
+    name: 'registerTime',
+    label: '创建时间',
+    field: 'registerTime',
+    align: 'center',
+  },
+  {
+    name: 'mobile',
+    label: '手机号',
+    field: 'mobile',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  roleId: '选择角色',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      roleId: (userRoleSearch as any)[filter.roleId],
+      current: page,
+      size: rowsPerPage,
+    });
+
+    pagination.value.rowsNumber = response.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(response.records as []));
+  } catch (error: any) {
+    errorNotify('获取数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const editFormShow = ref(false);
+const userName = ref('');
+const userRole = ref('');
+const userId = ref(0);
+
+const options = ['管理员', '调度员', '管理员/调度员'];
+const optionsSearch = ['所有角色', '管理员', '调度员'];
+
+const userRoleAll = {
+  管理员: [7],
+  调度员: [8],
+  '管理员/调度员': [7, 8],
+};
+
+enum userRoleSearch {
+  '管理员' = 7,
+  '调度员' = 8,
+}
+
+//编辑用户
+function edieUserData(row: any) {
+  userName.value = row.name;
+  userRole.value = '';
+  userId.value = Number(row.id);
+  editFormShow.value = true;
+}
+
+//提交编辑用户
+async function edieUserRole() {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认将用户${userName.value}的角色修改为${userRole.value}吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await distributeRole({
+          userId: userId.value,
+          roleIds: (userRoleAll as any)[userRole.value],
+        });
+
+        tableRef.value.requestServerInteraction(); // 刷新列表
+        editFormShow.value = false;
+        successNotify('修改成功');
+      } catch (error: any) {
+        errorNotify(`修改失败：${error.message}`, error);
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+</script>

src/router/routes.ts

@@ -31,6 +31,21 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/sysManage',
+    name: 'sysManage',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        meta: {
+          description: '用户管理',
+        },
+        component: () => import('pages/UserManage.vue'),
+      },
+    ],
+  },
 
   // Always leave this as last one,
   // but you can also remove it

src/utils/CommonNotify.ts

@@ -0,0 +1,38 @@
+import { AxiosError } from 'axios';
+import { Notify } from 'quasar';
+
+export function successNotify(message: string) {
+  Notify.create({
+    type: 'positive',
+    message: message,
+  });
+}
+
+export function errorNotify(message: string, error: any): void {
+  console.error(error);
+  let errMsg = '';
+  if (error instanceof AxiosError) {
+    errMsg = error.response?.data.errMsg;
+  } else if (error.data) {
+    errMsg = error.data.errMsg;
+  } else if (error.message) {
+    errMsg = error.message;
+  }
+  Notify.create({
+    type: 'negative',
+    message: `${message}: ${errMsg}`,
+  });
+}
+
+export function errorDismissNotify(
+  message: string,
+  onDismiss: () => void,
+  error: any
+): void {
+  console.error(error);
+  Notify.create({
+    type: 'negative',
+    message: message,
+    onDismiss,
+  });
+}