feat: support to add tags when creating a permission

src/components/table/DataTable.vue

@@ -309,6 +309,11 @@ export default defineComponent({
       this.fetchRows();
     },
 
+    removeExternalFilter(key: string) {
+      delete this.queryData[key];
+      this.fetchRows();
+    },
+
     setApiInfo(apiUrl: string, apiMethod: string) {
       this.url = apiUrl;
       this.method = apiMethod;

src/components/table/type.ts

@@ -5,8 +5,10 @@ export interface DataTableComponent {
   clearRows: () => void;
   /** 设置获取表格数据的 API 信息 */
   setApiInfo: (apiUrl: string, apiMethod: string) => void;
-  /** 基于外部传入的键值，对表格数据进行过滤 */
+  /** 基于外部传入的过滤键值，对表格数据进行过滤 */
   onExternalFiltered: (key: string, value: string | boolean) => void;
+  /** 移除外部传入的过滤键值，取消对该字段的过滤 */
+  removeExternalFilter: (key: string) => void;
 }
 
 export type Pagination = {

src/components/user/SetOrganizationsForm.vue

@@ -68,8 +68,8 @@ export default defineComponent({
   setup() {
     return {
       user: ref<User>({ id: '' }),
-      orgTreeData: ref<QTreeNode[]>(),
-      parentDepartment: ref<QTreeNode[]>(),
+      orgTreeData: ref<QTreeNode[]>([]),
+      parentDepartment: ref<QTreeNode[]>([]),
       orgTypeOptions: ref<OrgType[]>([]),
       selectedOrgTypeId: ref(''),
 
@@ -85,7 +85,7 @@ export default defineComponent({
       this.transferForm = true;
       this.loadOrgTypes();
       if (user.departments?.length !== 0) {
-        this.parentDepartment = user.departments;
+        this.parentDepartment = user.departments as QTreeNode[];
         this.transferFormData.organization_ids = user.departments?.map(
           (d) => d.id
         );

src/css/app.scss

@@ -127,6 +127,10 @@
   color: $red-8;
 }
 
+.q-chip--clickable:focus {
+  box-shadow: none !important;
+}
+
 // Dark Mode
 .body--dark {
   --q-primary: #3c6fef;

src/pages/OrgAdminPanel.vue

@@ -582,15 +582,15 @@ export default defineComponent({
       directDeptCheck: ref(false),
 
       // form dialog
-      orgTreeData: ref<QTreeNode[]>(),
+      orgTreeData: ref<QTreeNode[]>([]),
       addMembersForm: ref(false),
       addMembersTab: ref('existing'),
-      parentDepartment: ref<QTreeNode[]>(),
-      selectedOrganizations: ref<string[]>(),
+      parentDepartment: ref<QTreeNode[]>([]),
+      selectedOrganizations: ref<string[]>([]),
 
       // add new member, existing user
       userOptions: ref([]),
-      selectedExistingUsers: ref<User[]>(),
+      selectedExistingUsers: ref<User[]>([]),
       bindUsersFormData: ref<BindUsersToOrgsPostData>({}),
       bindUsersFormError: ref<BindUsersToOrgsPostError>({}),
 

src/pages/permission/PermAdminPanel.vue

@@ -13,7 +13,6 @@
       :columns="columns"
       :filter-columns="filterColumns"
       search-placeholder="搜索权限信息"
-      wrap-cells
       hide-import
       hide-export
     >
@@ -34,12 +33,18 @@
         />
       </template>
       <template #table-action>
+        <q-btn
+          unelevated
+          dense
+          label="管理标签"
+          class="q-ml-sm q-px-md secondary-btn"
+        />
         <q-btn
           unelevated
           dense
           label="创建权限"
           class="q-ml-sm q-px-md primary-btn"
-          @click="permissionForm = true"
+          @click="openPermissionForm"
         />
       </template>
       <template #body-cell-name="props">
@@ -51,13 +56,31 @@
           {{ props.row.name }}
         </q-td>
       </template>
-      <template #body-cell-application="props">
+      <template #body-cell-tags="props">
         <q-td :props="props">
-          <q-chip size="12px" square color="secondary" class="q-ml-none">
-            {{ props.row.application.name }}
+          <q-chip
+            v-for="(tag, idx) in props.row.tags"
+            :key="idx"
+            size="12px"
+            color="secondary"
+            class="q-ml-none"
+          >
+            <span class="material-icons-outlined q-pr-xs"> local_offer </span>
+            {{ tag.name }}
           </q-chip>
         </q-td>
       </template>
+      <template #body-cell-application="props">
+        <q-td :props="props">
+          <q-chip
+            size="12px"
+            square
+            color="secondary"
+            class="q-ml-none"
+            :label="props.row.application.name"
+          />
+        </q-td>
+      </template>
       <template #body-cell-is_deleted="props">
         <q-td :props="props">
           <q-chip
@@ -171,6 +194,26 @@
             :error-message="permissionFormError.code"
           />
         </div>
+        <div>
+          <field-label name="权限标签" />
+          <q-select
+            ref="tags"
+            v-model="selectedTags"
+            filled
+            dense
+            use-input
+            use-chips
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            multiple
+            input-debounce="0"
+            :options="tagOptions"
+            @new-value="createValue"
+            @filter="filterFn"
+          />
+        </div>
         <div>
           <field-label name="权限描述" />
           <q-input
@@ -199,7 +242,7 @@ import {
   FilterOperator,
 } from 'components/table/type';
 
-import { Application } from '../type';
+import { Application, Tag } from '../type';
 
 import { PermissionPostData, PermissionPostError } from './type';
 
@@ -217,12 +260,10 @@ const columns: QTableProps['columns'] = [
     field: 'code',
   },
   {
-    name: 'description',
-    label: '描述',
+    name: 'tags',
+    label: '标签',
     align: 'left',
-    field: 'description',
-    style: 'max-width: 400px',
-    headerStyle: 'max-width: 400px',
+    field: 'tags',
   },
   {
     name: 'application',
@@ -315,6 +356,10 @@ export default defineComponent({
 
       selectedAppId: ref(''),
       appOptions: ref<Application[]>([]),
+
+      initialTagOptions: ref<Tag[]>([]),
+      tagOptions: ref<Tag[]>([]),
+      selectedTags: ref<string[]>([]),
     };
   },
 
@@ -338,10 +383,23 @@ export default defineComponent({
       }, 20);
     },
 
+    async openPermissionForm() {
+      this.permissionForm = true;
+      const resp = await this.$api.get('/permission_tags');
+      this.initialTagOptions = resp.data.permission_tags;
+      this.tagOptions = resp.data.permission_tags;
+    },
+
     async savePermissionForm() {
       try {
         this.permissionFormError = {};
         this.permissionFormData.application_id = this.selectedAppId;
+        this.permissionFormData.existing_tag_ids = this.selectedTags.filter(
+          (tag) => this.initialTagOptions.map((t) => t.id).includes(tag)
+        );
+        this.permissionFormData.new_tags = this.selectedTags.filter(
+          (tag) => !this.initialTagOptions.map((t) => t.id).includes(tag)
+        );
         await this.$api.post('/permissions', this.permissionFormData, {
           successMsg: '权限创建成功',
         });
@@ -356,6 +414,7 @@ export default defineComponent({
     resetPermissionForm() {
       this.permissionFormData = {};
       this.permissionFormError = {};
+      this.selectedTags = [];
     },
 
     refreshPermissionData() {
@@ -365,6 +424,30 @@ export default defineComponent({
     goToPermissionProfile(evt: Event, permId: string) {
       this.$router.push(`/perm_profile/${permId}`);
     },
+
+    createValue(
+      val: string,
+      done: (item?: string, mode?: 'add' | 'add-unique' | 'toggle') => void
+    ) {
+      if (val.length > 0) {
+        if (!this.initialTagOptions.map((tag) => tag.name).includes(val)) {
+          done(val, 'add-unique');
+        }
+      }
+    },
+
+    filterFn(val: string, update: (fn: () => void) => void) {
+      update(() => {
+        if (val === '') {
+          this.tagOptions = this.initialTagOptions;
+        } else {
+          const needle = val.toLowerCase();
+          this.tagOptions = this.initialTagOptions.filter(
+            (v) => v.name.toLowerCase().indexOf(needle) > -1
+          );
+        }
+      });
+    },
   },
 });
 </script>