feat: 给编码管理添加按钮级权限管理

src/api/code.ts

@@ -112,8 +112,16 @@ export const getQueryCodeAPI = (id: string) => {
 export const getCodeLogListAPI = (params: {
   page: number;
   pageSize: number;
-  startTime?: string;
+  /**用户账号 */
-  endTime?: string;
+  username?: string;
+  /**用户昵称 */
+  nickname?: string;
+  /**部门ID */
+  department_id?: string;
+  /**开始时间 */
+  startTime?: string | number;
+  /**结束时间 */
+  endTime?: string | number;
 }) => {
   return http.request<QueryListResult<QueryCodeLogInfo>>(
     "get",
@@ -131,8 +139,18 @@ export const getCodeLogInfoAPI = (id: string) => {
 
 /**获取所有查询编码列表 */
 export const getCodeLogListAllAPI = (params: {
-  startTime?: string;
+  /**用户账号 */
-  endTime?: string;
+  username?: string;
+  /**用户昵称 */
+  nickname?: string;
+  /**部门ID */
+  department_id?: string;
+  /**登录状态 */
+  status?: number | string;
+  /**开始时间 */
+  startTime?: string | number;
+  /**结束时间 */
+  endTime?: string | number;
 }) => {
   return http.request<QueryListResult<QueryCodeLogInfo>>(
     "get",

src/views/codes/admin/index.vue

@@ -39,15 +39,19 @@
     <PureTableBar title="编码管理" :columns="columns" @refresh="onSearch">
       <template #buttons>
         <el-button
+          v-if="hasAuth('code:btn:add')"
           type="primary"
+          :disabled="!hasAuth('code:btn:add')"
           :icon="useRenderIcon(AddFill)"
           @click="openDialog('新增')"
         >
           {{ t("buttons:Add") }}
         </el-button>
         <el-button
+          v-if="hasAuth('code:btn:import')"
           type="primary"
           :icon="useRenderIcon(AddFill)"
+          :disabled="!hasAuth('code:btn:import')"
           @click="showUploadArea = !showUploadArea"
         >
           {{ showUploadArea ? t("buttons:Hide") : t("buttons:Import") }}
@@ -78,15 +82,23 @@
           </el-upload>
           <template #footer>
             <div class="flex items-center justify-center">
-              <el-button class="w-full my-2" @click="onDownloadTemplate">{{
+              <el-button
-                t("buttons:DownLodedTemplate")
+                v-if="hasAuth('code:btn:uploadTemplate')"
-              }}</el-button>
+                class="w-full my-2"
-              <el-popconfirm title="是否确认上传?" @confirm="handleUpload">
+                :disabled="!hasAuth('code:btn:uploadTemplate')"
+                @click="onDownloadTemplate"
+                >{{ t("buttons:DownLodedTemplate") }}</el-button
+              >
+              <el-popconfirm
+                v-if="hasAuth('code:btn:import')"
+                title="是否确认上传?"
+                @confirm="handleUpload"
+              >
                 <template #reference>
                   <el-button
                     class="w-full my-2"
                     type="primary"
-                    :disabled="uploadStatus"
+                    :disabled="uploadStatus || !hasAuth('code:btn:import')"
                     >{{ t("buttons:ConfirmUpload") }}</el-button
                   >
                 </template>
@@ -110,9 +122,18 @@
               {{ t("buttons:Deselect") }}
             </el-button>
           </div>
-          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+          <el-popconfirm
+            v-if="hasAuth('code:btn:delete')"
+            title="是否确认删除?"
+            @confirm="onbatchDel"
+          >
             <template #reference>
-              <el-button type="danger" text class="mr-1">
+              <el-button
+                type="danger"
+                text
+                class="mr-1"
+                :disabled="selectedNum < 0 || !hasAuth('code:btn:delete')"
+              >
                 {{ t("buttons:DeleteInBatches") }}
               </el-button>
             </template>
@@ -147,6 +168,7 @@
               link
               type="primary"
               :size="size"
+              :disabled="!hasAuth('code:btn:update')"
               :icon="useRenderIcon(EditPen)"
               @click="openDialog('修改', row)"
             >
@@ -162,6 +184,7 @@
                   link
                   type="danger"
                   :size="size"
+                  :disabled="!hasAuth('code:btn:delete')"
                   :icon="useRenderIcon(Delete)"
                 >
                   {{ t("buttons:Delete") }}
@@ -189,6 +212,7 @@ import EditPen from "@iconify-icons/ep/edit-pen";
 import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import UploadIcon from "@iconify-icons/ri/upload-2-line";
+import { hasAuth } from "@/utils/auth";
 const { t } = useI18n();
 
 /**

src/views/codes/index/index.vue

@@ -31,6 +31,7 @@
           {{ t("buttons:Reset") }}
         </el-button>
         <el-button
+          v-if="hasAuth('code:btn:importQuery')"
           type="primary"
           :icon="useRenderIcon(UploadIcon)"
           @click="showUploadArea = !showUploadArea"
@@ -64,15 +65,18 @@
       </el-upload>
       <template #footer>
         <div class="flex items-center justify-center">
-          <el-button class="w-full my-2" @click="onDownloadTemplate">{{
+          <el-button
-            t("buttons:DownLodedTemplate")
+            class="w-full my-2"
-          }}</el-button>
+            :disabled="hasAuth('code:btn:queryTemplate')"
+            @click="onDownloadTemplate"
+            >{{ t("buttons:DownLodedTemplate") }}</el-button
+          >
           <el-popconfirm title="是否确认上传?" @confirm="handleUpload">
             <template #reference>
               <el-button
                 class="w-full my-2"
                 type="primary"
-                :disabled="uploadStatus"
+                :disabled="uploadStatus || !hasAuth('code:btn:importQuery')"
                 >{{ t("buttons:ConfirmUpload") }}</el-button
               >
             </template>
@@ -100,8 +104,10 @@
     <PureTableBar title="查询结果" :columns="columns" @refresh="onSearch">
       <template #buttons>
         <el-button
+          v-if="hasAuth('code:btn:export')"
           type="primary"
           :icon="useRenderIcon(Export)"
+          :disabled="!hasAuth('code:btn:export')"
           @click="exportToExcel([queryResult], '查询结果')"
         >
           {{ t("buttons:ExportAll") }}
@@ -124,7 +130,11 @@
               {{ t("buttons:Deselect") }}
             </el-button>
           </div>
-          <el-popconfirm title="是否确认导出?" @confirm="onbatchExport">
+          <el-popconfirm
+            v-if="hasAuth('code:btn:export')"
+            title="是否确认导出?"
+            @confirm="onbatchExport"
+          >
             <template #reference>
               <el-button type="primary" text class="mr-1">
                 {{ t("buttons:ExportInBatches") }}
@@ -159,6 +169,7 @@
               link
               type="primary"
               :size="size"
+              :disabled="!hasAuth('code:btn:logInfo')"
               :icon="useRenderIcon(EditPen)"
               @click="handleDetail(row)"
             >
@@ -220,6 +231,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import UploadIcon from "@iconify-icons/ri/upload-2-line";
 import Export from "@iconify-icons/ri/download-2-line";
 const { t } = useI18n();
+import { hasAuth } from "@/utils/auth";
 /**
  * 表格Ref
  */

src/views/codes/log/components/details.vue

@@ -18,14 +18,22 @@
     </el-card>
     <PureTableBar title="查询结果" :columns="columns">
       <template #buttons>
+        <el-popconfirm
+          v-if="hasAuth('code:btn:export')"
+          title="确定要导出所有查询数据吗？"
+          @confirm="exportToExcel([queryInfo], '查询结果')"
+        >
+          <template #reference>
             <el-button
               type="primary"
               :icon="useRenderIcon(Export)"
-          @click="exportToExcel([queryInfo], '查询结果')"
+              :disabled="!hasAuth('code:btn:export')"
             >
               {{ t("buttons:ExportAll") }}
             </el-button>
           </template>
+        </el-popconfirm>
+      </template>
       <template v-slot="{ size, dynamicColumns }">
         <div
           v-if="selectedNum > 0"
@@ -43,9 +51,18 @@
               {{ t("buttons:Deselect") }}
             </el-button>
           </div>
-          <el-popconfirm title="是否确认导出?" @confirm="onbatchExport">
+          <el-popconfirm
+            v-if="hasAuth('code:btn:export')"
+            title="是否确认导出?"
+            @confirm="onbatchExport"
+          >
             <template #reference>
-              <el-button type="primary" text class="mr-1">
+              <el-button
+                type="primary"
+                text
+                class="mr-1"
+                :disabled="selectedNum < 0 || !hasAuth('code:btn:export')"
+              >
                 {{ t("buttons:ExportInBatches") }}
               </el-button>
             </template>
@@ -77,6 +94,7 @@
               link
               type="primary"
               :size="size"
+              :disabled="!hasAuth('code:btn:logInfo')"
               :icon="useRenderIcon(EditPen)"
               @click="handleDetail(row)"
             >
@@ -145,6 +163,7 @@ import type {
 import { getCodeLogInfoAPI } from "@/api/code";
 import { PaginationProps } from "@pureadmin/table";
 import { message } from "@/utils/message";
+import { hasAuth } from "@/utils/auth";
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();

src/views/codes/log/index.vue

@@ -6,7 +6,44 @@
       :model="form"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
-      <el-form-item label="操作时间" prop="operatingTime">
+      <el-form-item label="用户账号" prop="username">
+        <el-input
+          v-model="form.username"
+          placeholder="请输入用户账号~"
+          clearable
+          class="!w-[150px]"
+        />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="nickname">
+        <el-input
+          v-model="form.nickname"
+          placeholder="请输入用户名称~"
+          clearable
+          class="!w-[150px]"
+        />
+      </el-form-item>
+      <el-form-item label="所属部门：" prop="department_id">
+        <el-cascader
+          v-model="form.department_id"
+          class="!w-[150px]"
+          :options="departments"
+          :props="{
+            value: 'id',
+            label: 'name',
+            emitPath: false,
+            checkStrictly: true
+          }"
+          clearable
+          filterable
+          placeholder="请选择所属部门~"
+        >
+          <template #default="{ node, data }">
+            <span>{{ data.name }}</span>
+            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+          </template>
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="查询时间" prop="timeRange">
         <el-date-picker
           v-model="form.timeRange"
           :shortcuts="getPickerShortcuts()"
@@ -36,11 +73,16 @@
     <PureTableBar title="查询日志" :columns="columns" @refresh="onSearch">
       <template #buttons>
         <el-popconfirm
+          v-if="hasAuth('code:btn:export')"
           title="确定要导出所有日志数据吗？"
           @confirm="onExportQueryAll"
         >
           <template #reference>
-            <el-button type="primary" :icon="useRenderIcon(Export)">
+            <el-button
+              type="primary"
+              :icon="useRenderIcon(Export)"
+              :disabled="!hasAuth('code:btn:export')"
+            >
               {{ t("buttons:ExportAll") }}
             </el-button>
           </template>
@@ -64,11 +106,17 @@
             </el-button>
           </div>
           <el-popconfirm
+            v-if="hasAuth('code:btn:export')"
             title="是否确认批量导出日志数据?"
             @confirm="onbatchExport"
           >
             <template #reference>
-              <el-button type="primary" text class="mr-1">
+              <el-button
+                type="primary"
+                text
+                class="mr-1"
+                :disabled="selectedNum < 0 || !hasAuth('code:btn:export')"
+              >
                 {{ t("buttons:ExportInBatches") }}
               </el-button>
             </template>
@@ -100,6 +148,7 @@
               link
               type="primary"
               :size="size"
+              :disabled="!hasAuth('code:btn:logInfo')"
               :icon="useRenderIcon(View)"
               @click="onClickDetails(row)"
             >
@@ -130,6 +179,7 @@ const router = useRouter();
 import { useI18n } from "vue-i18n";
 import { useQueryLog } from "./utils/hook";
 import { QueryCodeLogInfo } from "types/code";
+import { hasAuth } from "@/utils/auth";
 const formRef = ref();
 const tableRef = ref();
 const { t } = useI18n();
@@ -138,6 +188,7 @@ const {
   loading,
   columns,
   dataList,
+  departments,
   pagination,
   selectedNum,
   onSearch,

src/views/codes/log/utils/hook.tsx

@@ -11,11 +11,16 @@ import type { QueryCodeLogInfo } from "types/code";
 import * as XLSX from "xlsx";
 import { getCodeLogListAllAPI, getCodeLogListAPI } from "@/api/code";
 import { message } from "@/utils/message";
-import { cloneDeep, getKeyList } from "@pureadmin/utils";
+import { cloneDeep, getKeyList, handleTree } from "@pureadmin/utils";
+import type { DepartmentInfo } from "types/system";
+import { getDepartmentListAPI } from "@/api/system";
 
 export const useQueryLog = (tableRef: Ref) => {
   /**查询表单 */
   const form = reactive({
+    username: "",
+    nickname: "",
+    department_id: "",
     timeRange: [null, null]
   });
   /**数据列表 */
@@ -101,6 +106,9 @@ export const useQueryLog = (tableRef: Ref) => {
     const res = await getCodeLogListAPI({
       page: pagination.currentPage,
       pageSize: val,
+      username: form.username,
+      nickname: form.nickname,
+      department_id: form.department_id,
       startTime: form.timeRange[0] ? form.timeRange[0] : null,
       endTime: form.timeRange[1] ? form.timeRange[1] : null
     });
@@ -108,12 +116,16 @@ export const useQueryLog = (tableRef: Ref) => {
       dataList.value = res.data.result;
       pagination.total = res.data.total;
       pagination.currentPage = res.data.page;
+      pagination.pageSize = res.data.pageSize;
     }
   };
   const handleCurrentChange = async (val: number) => {
     const res = await getCodeLogListAPI({
       page: val,
       pageSize: pagination.pageSize,
+      username: form.username,
+      nickname: form.nickname,
+      department_id: form.department_id,
       startTime: form.timeRange[0] ? form.timeRange[0] : null,
       endTime: form.timeRange[1] ? form.timeRange[1] : null
     });
@@ -121,6 +133,7 @@ export const useQueryLog = (tableRef: Ref) => {
       dataList.value = res.data.result;
       pagination.total = res.data.total;
       pagination.currentPage = res.data.page;
+      pagination.pageSize = res.data.pageSize;
     }
   };
 
@@ -142,6 +155,9 @@ export const useQueryLog = (tableRef: Ref) => {
     const res = await getCodeLogListAPI({
       page: pagination.currentPage,
       pageSize: pagination.pageSize,
+      username: form.username,
+      nickname: form.nickname,
+      department_id: form.department_id,
       startTime: form.timeRange[0] ? form.timeRange[0] : null,
       endTime: form.timeRange[1] ? form.timeRange[1] : null
     });
@@ -149,6 +165,7 @@ export const useQueryLog = (tableRef: Ref) => {
       dataList.value = res.data.result;
       pagination.total = res.data.total;
       pagination.currentPage = res.data.page;
+      pagination.pageSize = res.data.pageSize;
     }
 
     setTimeout(() => {
@@ -395,6 +412,9 @@ export const useQueryLog = (tableRef: Ref) => {
   /**导出所有查询结果 */
   const onExportQueryAll = async () => {
     const res = await getCodeLogListAllAPI({
+      username: form.username,
+      nickname: form.nickname,
+      department_id: form.department_id,
       startTime: form.timeRange[0] ? form.timeRange[0] : null,
       endTime: form.timeRange[1] ? form.timeRange[1] : null
     });
@@ -417,8 +437,33 @@ export const useQueryLog = (tableRef: Ref) => {
 
     exportToExcel(selecteList, "查询结果");
   };
+  /**部门列表 */
+  const departments = ref<DepartmentInfo[]>([]);
+  /**获取部门列表 */
+  const getDepartments = async () => {
+    const res = await getDepartmentListAPI({ page: 1, pageSize: 9999 });
+    if (res.success) {
+      departments.value = formatHigherOptions(
+        handleTree(res.data.result, "id", "parent_id")
+      );
+    } else {
+      departments.value = [];
+    }
+  };
+  const formatHigherOptions = (treeList: any) => {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  };
   onMounted(async () => {
     await onSearch();
+    await getDepartments();
   });
   return {
     form,
@@ -426,6 +471,7 @@ export const useQueryLog = (tableRef: Ref) => {
     dataList,
     columns,
     selectedNum,
+    departments,
     pagination,
     onSearch,
     getPickerShortcuts,