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

2025-02-23 23:50:54 +08:00 · 2025-02-23 23:50:54 +08:00 · 4687f9dd31
commit 4687f9dd31
parent c0c127d090
6 changed files with 198 additions and 28 deletions
--- a/src/api/code.ts
+++ b/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",
--- a/src/views/codes/admin/index.vue
+++ b/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">{{
-                t("buttons:DownLodedTemplate")
-              }}</el-button>
-              <el-popconfirm title="是否确认上传?" @confirm="handleUpload">
+              <el-button
+                v-if="hasAuth('code:btn:uploadTemplate')"
+                class="w-full my-2"
+                :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();

 /**
--- a/src/views/codes/index/index.vue
+++ b/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">{{
-            t("buttons:DownLodedTemplate")
-          }}</el-button>
+          <el-button
+            class="w-full my-2"
+            :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
 */
--- a/src/views/codes/log/components/details.vue
+++ b/src/views/codes/log/components/details.vue
@ -18,13 +18,21 @@
    </el-card>
    <PureTableBar title="查询结果" :columns="columns">
      <template #buttons>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon(Export)"
-          @click="exportToExcel([queryInfo], '查询结果')"
+        <el-popconfirm
+          v-if="hasAuth('code:btn:export')"
+          title="确定要导出所有查询数据吗？"
+          @confirm="exportToExcel([queryInfo], '查询结果')"
        >
-          {{ t("buttons:ExportAll") }}
-        </el-button>
+          <template #reference>
+            <el-button
+              type="primary"
+              :icon="useRenderIcon(Export)"
+              :disabled="!hasAuth('code:btn:export')"
+            >
+              {{ t("buttons:ExportAll") }}
+            </el-button>
+          </template>
+        </el-popconfirm>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <div
@ -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();
--- a/src/views/codes/log/index.vue
+++ b/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,
--- a/src/views/codes/log/utils/hook.tsx
+++ b/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,