添加角色配置

src/api/AuthApi.ts

@@ -77,6 +77,19 @@ export async function getRoleInfo(id: number): Promise<RoleInfo> {
   return response.data;
 }
 
+/**
+ * 角色配置
+ * @param id 角色id
+ * @param data
+ */
+export function roleConfig(id: number, data: string) {
+  return api.post(`${AuthBase}/config/${id}`, data, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  });
+}
+
 interface LinkRole {
   id: number;
   roleList: number[];

src/pages/RoleManage.vue

@@ -15,35 +15,21 @@
       binary-state-sort
       @request="onRequest"
     >
-      <!--  <template v-slot:top-right>
-        <q-input
-          dense
-          debounce="1000"
-          v-model="filter.name"
-          label="名称"
-        ></q-input>
-        <q-btn flat round color="primary" icon="search" />
-        <q-btn color="primary" label="新建" @click="editFormShow = true" />
-      </template>
-
-      <template v-slot:body-cell-operations="props">
+      <template
+        v-if="userStore.defaultRole == 'ADMIN'"
+        v-slot:body-cell-operations="props"
+      >
         <q-td :props="props">
           <div class="q-gutter-sm row justify-center">
             <q-btn
+              :disable="operateDisabled"
               color="primary"
-              label="编辑"
+              label="配置"
               @click="edieRoleData(props.row)"
-              :disable="props.row.id == 1"
-            />
-            <q-btn
-              color="red"
-              :disable="operateDisabled || [1, 2].includes(props.row.id)"
-              label="删除"
-              @click="deleteRoleData(props.row)"
             />
           </div>
         </q-td>
-      </template> -->
+      </template>
     </q-table>
 
     <q-dialog
@@ -52,37 +38,31 @@
       transition-show="scale"
       transition-hide="scale"
     >
-      <q-card style="width: 1400px; max-width: 80vw">
-        <q-form
-          ref="myForm"
-          @submit="edieRolePath"
-          @reset="onReset"
-          class="q-gutter-md"
-        >
-          <q-card-section>
-            <div class="text-h5">{{ roleInfo.id ? '编辑' : '新建' }}</div>
-            <div class="q-pa-md">
-              <q-input
-                outlined
-                dense
-                label="角色名称"
-                v-model="roleInfo.name"
-                lazy-rules
-                :rules="[(val) => val.length > 0 || '请输入角色名称！']"
-                style="width: 300px"
-              />
-            </div>
-            <AuthPathManage
-              :sizeHeight="600"
-              :selects="roleInfo.editPaths || []"
-              @selectsed="pathSelectsed"
-            />
+    </q-dialog>
+    <q-dialog
+      v-model="editFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <q-form
+            ref="myForm"
+            @submit="roleConfigFn"
+            @reset="onReset"
+            class="q-gutter-md"
+          >
+            <div class="text-h6">配置角色信息</div>
+            <q-input outlined disable label="角色" v-model="roleInfo.name" />
+            <q-input outlined label="配置" v-model="roleInfo.config" />
+
             <q-card-actions align="right">
               <q-btn color="primary" label="保存" type="submit" />
               <q-btn label="取消" type="reset" v-close-popup />
             </q-card-actions>
-          </q-card-section>
-        </q-form>
+          </q-form>
+        </q-card-section>
       </q-card>
     </q-dialog>
   </div>
@@ -91,18 +71,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useQuasar, type QTableColumn, QForm } from 'quasar';
-import {
-  PathItem,
-  RoleInfo,
-  createRole,
-  createRoleParams,
-  deleteRole,
-  pageQueryRole,
-  saveRoleData,
-} from 'src/api/AuthApi';
+import { pageQueryRole, roleConfig, RoleInfo } from 'src/api/AuthApi';
 import { ApiError } from 'src/boot/axios';
 import { successNotify } from 'src/utils/CommonNotify';
-import AuthPathManage from './AuthPathManage.vue';
+import { useUserStore } from 'src/stores/user-store';
 const $q = useQuasar();
 
 const props = withDefaults(
@@ -114,8 +86,17 @@ const props = withDefaults(
 const tableHeight = computed(() => {
   return props.sizeHeight - 32;
 });
+const userStore = useUserStore();
 
 onMounted(() => {
+  if (userStore.defaultRole == 'ADMIN') {
+    columnDefs.push({
+      name: 'operations',
+      label: '操作',
+      field: 'operations',
+      align: 'center',
+    });
+  }
   tableRef.value.requestServerInteraction();
 });
 
@@ -130,8 +111,6 @@ const columnDefs: QTableColumn[] = [
   },
 ];
 
-const operateDisabled = ref(false);
-
 const tableRef = ref();
 const rows = reactive([]);
 const filter = reactive({
@@ -176,53 +155,36 @@ async function onRequest(props: any) {
   }
 }
 
-const editFormShow = ref(false);
-
+//提交编辑用户
 interface RoleItemInfo extends Omit<RoleInfo, 'id'> {
   id: string;
   editPaths: { id: number }[];
+  config: string;
 }
 const roleInfo = reactive<RoleItemInfo>({
   id: '',
   editPaths: [],
   name: '',
   resList: [],
+  config: '',
 });
-
-//编辑
 function edieRoleData(row: RoleInfo) {
   roleInfo.id = row.id + '';
   roleInfo.name = row.name;
-  const list = row.resList || [];
-  roleInfo.resList = list;
-  roleInfo.editPaths = list.map((item) => {
-    return { id: item };
-  });
   editFormShow.value = true;
 }
 
+const operateDisabled = ref(false);
 const myForm = ref<QForm | null>(null);
-
-//提交编辑
-async function edieRolePath() {
+const editFormShow = ref(false);
+function roleConfigFn() {
   myForm.value?.validate().then(async (res) => {
     if (res) {
       operateDisabled.value = true;
       try {
-        const params: createRoleParams = {
-          name: roleInfo.name,
-          resList: roleInfo.resList,
-        };
-        if (roleInfo.id) {
-          const cloneParams = Object.assign(params, { id: +roleInfo.id });
-          await saveRoleData(cloneParams);
-        } else {
-          await createRole(params);
-        }
-        onReset();
-        tableRef.value.requestServerInteraction(); // 刷新列表
+        await roleConfig(+roleInfo.id, roleInfo.config);
         editFormShow.value = false;
-        successNotify('保存成功！');
+        successNotify('修改成功');
       } catch (err) {
         const error = err as ApiError;
         $q.notify({
@@ -236,39 +198,10 @@ async function edieRolePath() {
   });
 }
 
-function deleteRoleData(row: RoleInfo) {
-  operateDisabled.value = true;
-  $q.dialog({
-    title: '确认',
-    message: `确认删除角色 "${row.name}" 吗?`,
-    cancel: true,
-  })
-    .onOk(async () => {
-      try {
-        await deleteRole(row.id);
-        tableRef.value.requestServerInteraction(); // 刷新列表
-      } catch (err) {
-        const error = err as ApiError;
-        $q.notify({
-          type: 'negative',
-          message: error.title,
-        });
-      }
-    })
-    .onDismiss(() => {
-      operateDisabled.value = false;
-    });
-}
-
 function onReset() {
   roleInfo.id = '';
   roleInfo.name = '';
-  roleInfo.editPaths = [];
-  roleInfo.resList = [];
+  roleInfo.config = '';
   myForm.value?.resetValidation();
 }
-
-function pathSelectsed(val: PathItem[]) {
-  roleInfo.resList = val.map((item) => item.id);
-}
 </script>