添加

src/service/api/user.ts

@@ -1,5 +1,5 @@
 import { request } from '../request';
-// 参数接口
+// 查询参数接口
 export interface QueryParams {
   id?: number;
   name?: string;
@@ -37,3 +37,39 @@ export interface QueryRes {
 export function query(pageNum: number | undefined, pageSize: number | undefined, params: QueryParams) {
   return request.post(`/permission/query?pageNum=${pageNum}&pageSize=${pageSize}`, params);
 }
+
+// 添加参数接口
+export interface AddParams {
+  id?: number;
+  name?: string;
+  description?: string;
+  isActive?: Record<string, unknown>;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface AddRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 添加权限
+ * @param {object} params EasSysPermission
+ * @param {number} params.id ID
+ * @param {string} params.name 权限名称
+ * @param {string} params.description 权限描述
+ * @param {object} params.isActive 是否激活
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function add(params: AddParams) {
+  return request.post(`/permission/add`, params);
+}

src/service/request/instance.ts

@@ -65,9 +65,9 @@ export default class CustomAxiosInstance {
         const { status } = response;
         if (status === 200 || status < 300 || status === 304) {
           const backend = response.data;
-          const { codeKey, dataKey } = this.backendConfig;
+          const { codeKey, dataKey, successCode } = this.backendConfig;
           // 请求成功
-          if (backend.msg === '操作成功') {
+          if (backend[codeKey] === successCode) {
             return handleServiceResult(null, backend[dataKey]);
           }
 

src/views/management/auth/AddView.vue

@@ -0,0 +1,43 @@
+<template>
+          <n-button type="primary" @click="showModal = true">
+            <icon-ic-round-plus class="mr-4px text-20px" />
+            新增
+          </n-button>
+  <n-modal
+    v-model:show="showModal"
+    class="custom-card"
+    preset="card"
+    :style="bodyStyle"
+    title="卡片预设"
+    size="huge"
+    :bordered="false"
+    :segmented="segmented"
+  >
+    <template #header-extra>
+      噢!
+    </template>
+    内容
+    <template #footer>
+      尾部
+    </template>
+  </n-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      bodyStyle: {
+        width: '600px'
+      },
+      segmented: {
+        content: 'soft',
+        footer: 'soft'
+      } as const,
+      showModal: ref(false)
+    }
+  }
+})
+</script>

src/views/management/auth/index.vue

@@ -3,10 +3,7 @@
     <n-card title="权限管理" :bordered="false" class="rounded-16px shadow-sm">
       <n-space class="pb-12px" justify="space-between">
         <n-space>
-          <n-button type="primary">
-            <icon-ic-round-plus class="mr-4px text-20px" />
-            新增
-          </n-button>
+          <AddView />
           <n-button type="error">
             <icon-ic-round-delete class="mr-4px text-20px" />
             删除
@@ -21,9 +18,17 @@
             <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
             刷新表格
           </n-button>
+          <n-button size="small" type="primary">
+            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
+            激活
+          </n-button>
           <column-setting v-model:columns="columns" />
         </n-space>
       </n-space>
+      <n-input-group>
+        <n-input :style="{ width: '50%' }" />
+        <n-button type="primary">搜索</n-button>
+      </n-input-group>
       <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
     </n-card>
   </div>
@@ -33,11 +38,34 @@
 import { ref, reactive } from 'vue';
 import type { Ref } from 'vue';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
-import { query } from '../../../service/api/user';
-import type { QueryParams } from '~/src/service/api/user';
+import { query, add } from '../../../service/api/user';
+import type { QueryParams, AddParams } from '~/src/service/api/user';
+import AddView from '~/src/views/management/auth/AddView.vue'
 
 const queryInfo: QueryParams = {};
-
+const addInfo: AddParams = {};
+// // 定义响应式数据：收集用户写进来的关键字
+// const keyword = ref<string>('');
+// // // 搜索按钮的回调
+// const search = () => {
+//   // 根据关键字获取信息
+//   if(keyword.value === columns.value.keys.name){
+//     console.log(111);
+//   }
+// };
+export interface Props {
+  /** 弹窗可见性 */
+  visible: boolean;
+  /**
+   * 弹窗类型
+   * add: 新增
+   * edit: 编辑
+   */
+  type?: 'add' | 'edit';
+  /** 编辑的表格行数据 */
+  editData?: UserManagement.User | null;
+}
+const AddTableInfo = ref();
 const pagination: PaginationProps = reactive({
   page: 1,
   pageSize: 10,
@@ -52,21 +80,19 @@ const pagination: PaginationProps = reactive({
   }
 });
 
-const tableData = ref<QueryParams[] | null>([]);
+const tableData = ref<QueryParams[]>([]);
 
 query(pagination.page, pagination.pageSize, queryInfo).then(result => {
   tableData.value = result.data as [];
 });
+add(addInfo).then(_res => {
+  console.log(_res);
+});
 const columns: Ref<DataTableColumns<QueryParams>> = ref([
   {
     type: 'selection',
     align: 'center'
   },
-  {
-    key: 'id',
-    title: 'ID',
-    align: 'center'
-  },
   {
     key: 'name',
     title: '名称',