修改表格操作按钮

.vscode/extensions.json

@@ -2,12 +2,13 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
-    "wayou.vscode-todo-highlight"
+    "wayou.vscode-todo-highlight",
+    "arcanis.vscode-zipfs"
   ],
   "unwantedRecommendations": [
     "octref.vetur",
     "hookyqr.beautify",
     "dbaeumer.jshint",
     "ms-vscode.vscode-typescript-tslint-plugin"
   ]
-}
+}

.vscode/settings.json

@@ -12,6 +12,12 @@
     "typescript",
     "vue"
   ],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.format.enable": true
-}
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "eslint.format.enable": true,
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": ".yarn/sdks",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.11",
-    "axios": "^1.6.8",
+    "axios": "^1.7.3",
     "lottie-web": "^5.12.2",
     "pinia": "^2.1.7",
     "quasar": "^2.16.4",
@@ -42,7 +42,7 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.4.0",
   "msw": {
     "workerDirectory": [
       "public"

src/layouts/MainLayout.vue

@@ -37,8 +37,8 @@
           :color="$q.dark.isActive ? 'black' : ''" />
 
         <q-chip clickable color="primary" text-color="white">
-          <q-avatar size="32px">
-            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png" width="32px" height="32px">
+          <q-avatar size="28px">
+            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png" width="28px" height="29px">
           </q-avatar>{{ userStore.getUsername }}
           <q-menu>
             <q-list dense separator>

src/mocks/common.ts

@@ -6,11 +6,7 @@ export const commonHandlers = [
 
     const username = info.get('username')
     // Read the intercepted request body.
-    return HttpResponse.json({ username }, {
-      headers: {
-        'Set-Cookie': 'logged_in=yes'
-      }
-    })
+    return HttpResponse.json({ username })
   }),
   http.post('/api/logout', ({ cookies }) => {
     if (!cookies.logged_in) {

src/mocks/dictionaries.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { Dictionary } from 'src/api/models.type'
+import type { Dictionary } from 'src/models'
 
 const datas: Dictionary[] = []
 const subDatas: Dictionary[] = []

src/mocks/groups.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { Group } from 'src/api/models.type'
+import type { Group } from 'src/models'
 
 const datas: Group[] = []
 

src/mocks/privileges.ts

@@ -0,0 +1,66 @@
+import { http, HttpResponse } from 'msw'
+import type { Privilege } from 'src/models'
+
+const datas: Privilege[] = []
+
+for (let i = 0; i < 20; i++) {
+  const data: Privilege = {
+    id: i,
+    name: 'privilege_' + i,
+    superiorId: i,
+    meta: {
+      icon: 'user'
+    },
+    enabled: i % 3 > 0,
+    description: 'description',
+    lastModifiedDate: new Date()
+  }
+  datas.push(data)
+}
+
+export const rolesHandlers = [
+  http.get('/api/privileges', ({ request }) => {
+    const url = new URL(request.url)
+    const page = url.searchParams.get('page')
+    const size = url.searchParams.get('size')
+    // Construct a JSON response with the list of all Dictionarys
+    // as the response body.
+    const data = {
+      content: Array.from(datas.slice(Number(page) * Number(size), (Number(page) + 1) * Number(size))),
+      totalElements: datas.length
+    }
+
+    return HttpResponse.json(data)
+  }),
+  http.post('/api/privileges', async ({ request }) => {
+    // Read the intercepted request body as JSON.
+    const newData = await request.json() as Privilege
+
+    // Push the new Dictionary to the map of all Dictionarys.
+    datas.push(newData)
+
+    // Don't forget to declare a semantic "201 Created"
+    // response and send back the newly created Dictionary!
+    return HttpResponse.json(newData, { status: 201 })
+  }),
+  http.delete('/api/privileges/:id', ({ params }) => {
+    // All request path params are provided in the "params"
+    // argument of the response resolver.
+    const { id } = params
+
+    // Let's attempt to grab the Dictionary by its ID.
+    const deletedData = datas.filter(item => item.id === Number(id))
+
+    // Respond with a "404 Not Found" response if the given
+    // Dictionary ID does not exist.
+    if (!deletedData) {
+      return new HttpResponse(null, { status: 404 })
+    }
+
+    // Delete the Dictionary from the "allDictionarys" map.
+    datas.pop()
+
+    // Respond with a "200 OK" response and the deleted Dictionary.
+    return HttpResponse.json(deletedData)
+  })
+]

src/mocks/regions.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { Region } from 'src/api/models.type'
+import type { Region } from 'src/models'
 
 const datas: Region[] = []
 

src/mocks/roles.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { Role } from 'src/api/models.type'
+import type { Role } from 'src/models'
 
 const datas: Role[] = []
 

src/mocks/users.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import type { User } from 'src/api/models.type'
+import type { User } from 'src/models'
 
 const datas: User[] = []
 

src/api/models.type.ts → src/models.d.ts

@@ -26,6 +26,18 @@ export interface Role extends AudtiMetadata {
   description?: string
 }
 
+export interface Privilege extends AudtiMetadata {
+  name: string
+  superiorId?: number
+  path?: string
+  meta: {
+    icon?: string
+    actions?: string[]
+  }
+  enabled?: boolean
+  description?: string
+}
+
 export interface Dictionary extends AudtiMetadata {
   name: string
   superiorId?: number

src/pages/system/dictionary/IndexPage.vue

@@ -32,9 +32,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="refresh" color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh" label="Refresh"
+        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
           @click="refresh" />
-        <q-btn title="export" color="primary" icon="sym_r_sim_card_download" label="Export" @click="exportTable" />
+        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+          @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -54,7 +55,7 @@
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name">
             <div v-if="col.name == 'id'" class="text-right">
-              <q-btn title="edit" size="sm" round color="primary" icon="sym_r_edit" @click="editRow(col.value)"
+              <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(col.value)"
                 class="q-mt-none" />
             </div>
             <div v-else-if="col.name == 'enabled'" class="text-center">
@@ -64,7 +65,7 @@
           </q-td>
         </q-tr>
         <q-tr v-show="props.expand" :props="props">
-          <q-td colspan="100%">
+          <q-td colspan="100%" class="q-pr-none">
             <sub-page v-if="props.expand" :title="props.row.name" :superior-id="props.row.id" />
           </q-td>
         </q-tr>
@@ -81,7 +82,7 @@ import { api } from 'boot/axios'
 import SubPage from './SubPage.vue'
 
 import { SERVER_URL } from 'src/api/paths'
-import type { Dictionary } from 'src/api/models.type'
+import type { Dictionary } from 'src/models'
 
 const $q = useQuasar()
 

src/pages/system/dictionary/SubPage.vue

@@ -14,8 +14,8 @@
         </q-card-section>
 
         <q-card-actions align="right" class="text-primary">
-          <q-btn title="cancel" label="Cancel" type="reset" v-close-popup />
-          <q-btn title="submit" type="submit" label="Submit" color="primary" />
+          <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
+          <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
         </q-card-actions>
 
       </q-form>
@@ -26,7 +26,9 @@
     :columns="columns" row-key="id" binary-state-sort @request="onRequest" hide-pagination hide-selected-banner
     class="full-width bg-transparent">
     <template v-slot:top-right>
-      <q-btn title="add" color="primary" :disable="loading" icon="sym_r_add" label="Add" @click="addRow" />
+      <q-btn title="add" rounded color="primary" :disable="loading" icon="sym_r_add" label="Add" @click="addRow" />
+      <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
+        @click="refresh" />
     </template>
     <template v-slot:body-cell-enabled="props">
       <q-td :props="props">
@@ -35,10 +37,10 @@
     </template>
     <template v-slot:body-cell-id="props">
       <q-td :props="props">
-        <q-btn title="edit" size="sm" round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
+        <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
           class="q-mt-none" />
-        <q-btn title="delete" size="sm" round color="primary" icon="sym_r_delete" @click="removeRow(props.row.id)"
-          class="q-mt-none q-ml-sm" />
+        <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+          @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
       </q-td>
     </template>
   </q-table>
@@ -51,7 +53,7 @@ import type { QTableProps } from 'quasar'
 import { api } from 'boot/axios'
 
 import { SERVER_URL } from 'src/api/paths'
-import type { Dictionary } from 'src/api/models.type'
+import type { Dictionary } from 'src/models'
 
 const $q = useQuasar()
 
@@ -103,6 +105,19 @@ async function onRequest() {
   })
 }
 
+async function refresh() {
+  await api.get(`${SERVER_URL.DICTIONARY}/${props.superiorId}/subset`).then(res => {
+    rows.value = res.data
+  }).catch(error => {
+    $q.notify({
+      message: error.message,
+      type: 'negative'
+    })
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
 function addRow() {
   visiable.value = true
 }

src/pages/system/group/IndexPage.vue

@@ -14,8 +14,8 @@
           </q-card-section>
 
           <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" label="Cancel" type="reset" v-close-popup />
-            <q-btn title="submit" type="submit" label="Submit" color="primary" />
+            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -31,9 +31,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="add" color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
+        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
           @click="addRow" />
-        <q-btn title="export" color="primary" icon="sym_r_sim_card_download" label="Export" @click="exportTable" />
+        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+          @click="exportTable" />
       </template>
       <template v-slot:body-cell-members="props">
         <q-td :props="props">
@@ -49,10 +50,10 @@
       </template>
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
-          <q-btn title="edit" size="sm" round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
+          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
             class="q-mt-none" />
-          <q-btn title="delete" size="sm" round color="primary" icon="sym_r_delete" @click="removeRow(props.row.id)"
-            class="q-mt-none q-ml-sm" />
+          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+            @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
         </q-td>
       </template>
     </q-table>
@@ -66,7 +67,7 @@ import { exportFile, useQuasar } from 'quasar'
 import { api } from 'boot/axios'
 
 import { SERVER_URL } from 'src/api/paths'
-import type { Group } from 'src/api/models.type'
+import type { Group } from 'src/models'
 
 const $q = useQuasar()