style: 格式化系统配置与字典模块代码

src/api/system/dict/index.ts

@@ -9,7 +9,6 @@ import type {
   DictItemOption,
 } from "./types";
 
-
 const DICT_BASE_URL = "/api/v1/dicts";
 
 type DictTagType = DictItemForm["tagType"];

src/types/api/index.ts

@@ -1,12 +1,9 @@
-
-
 export interface PageQueryParams {
   pageNum: number;
   pageSize: number;
   [key: string]: any;
 }
 
-
 export interface OptionItem {
   label: string;
   value: string | number;
@@ -42,4 +39,3 @@ export interface BaseEntity {
   createTime: string;
   updateTime: string;
 }
-

src/views/system/config/index.vue

@@ -3,7 +3,12 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input v-model="tableData.params.keywords" placeholder="请输入配置键\配置名称" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="请输入配置键\配置名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item>
@@ -16,17 +21,33 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button v-hasPerm="['sys:config:create']" type="success" icon="plus" @click="openDialog()">
+          <el-button
+            v-hasPerm="['sys:config:create']"
+            type="success"
+            icon="plus"
+            @click="openDialog()"
+          >
             新增
           </el-button>
-          <el-button v-hasPerm="['sys:config:refresh']" color="#626aef" icon="RefreshLeft" @click="refreshCache">
+          <el-button
+            v-hasPerm="['sys:config:refresh']"
+            color="#626aef"
+            icon="RefreshLeft"
+            @click="refreshCache"
+          >
             刷新缓存
           </el-button>
         </div>
       </div>
 
-      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
+      <el-table
-        @selection-change="handleSelectionChange">
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="tableData.list"
+        highlight-current-row
+        border
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
         <el-table-column key="configKey" label="配置项" prop="configKey" min-width="100" />
@@ -34,22 +55,52 @@
         <el-table-column key="remark" label="描述" prop="remark" min-width="100" />
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button v-hasPerm="['sys:config:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
+            <el-button
+              v-hasPerm="['sys:config:update']"
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="openDialog(scope.row.id)"
+            >
               编辑
             </el-button>
-            <el-button v-hasPerm="['sys:config:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
+            <el-button
+              v-hasPerm="['sys:config:delete']"
+              type="danger"
+              size="small"
+              link
+              icon="delete"
+              @click="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData"
+      />
     </el-card>
 
-    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
+    <el-dialog
-      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-suffix=":"
+        label-width="100px"
+      >
         <el-form-item label="配置名称" prop="configName">
           <el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
         </el-form-item>
@@ -60,7 +111,14 @@
           <el-input v-model="formData.configValue" placeholder="请输入配置项" :maxlength="100" />
         </el-form-item>
         <el-form-item label="描述" prop="remark">
-          <el-input v-model="formData.remark" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
+          <el-input
+            v-model="formData.remark"
+            :rows="4"
+            :maxlength="100"
+            show-word-limit
+            type="textarea"
+            placeholder="请输入描述"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -74,181 +132,182 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({
+defineOptions({
-    name: "Config",
+  name: "Config",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  import ConfigAPI from "@/api/system/config";
+import ConfigAPI from "@/api/system/config";
-  import type { ConfigItem, ConfigForm } from "@/api/system/config";
+import type { ConfigItem, ConfigForm } from "@/api/system/config";
-  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-  import { useDebounceFn } from "@vueuse/core";
+import { useDebounceFn } from "@vueuse/core";
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const dataFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
-  // 列表数据
+// 列表数据
-  const loading = ref(false);
+const loading = ref(false);
-  const selectIds = ref<string[]>([]);
+const selectIds = ref<string[]>([]);
 
-  const tableData = reactive<PageResult<ConfigItem>>({
+const tableData = reactive<PageResult<ConfigItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-      keywords: "",
+    pageSize: 10,
-    },
+    keywords: "",
-  });
+  },
+});
 
-  // 弹窗状态
+// 弹窗状态
-  const dialogState = reactive({
+const dialogState = reactive({
-    title: "",
+  title: "",
-    visible: false,
+  visible: false,
-  });
+});
 
-  // 表单数据
+// 表单数据
-  const formData = reactive<ConfigForm>({
+const formData = reactive<ConfigForm>({
-    id: undefined,
+  id: undefined,
-    configName: "",
+  configName: "",
-    configKey: "",
+  configKey: "",
-    configValue: "",
+  configValue: "",
-    remark: "",
+  remark: "",
-  });
+});
 
-  // 验证规则
+// 验证规则
-  const rules: FormRules = {
+const rules: FormRules = {
-    configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
+  configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
-    configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
+  configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
-    configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
+  configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
-  };
+};
 
-  /**
+/**
-   * 加载配置列表数据
+ * 加载配置列表数据
-   */
+ */
-  function fetchData(): void {
+function fetchData(): void {
-    loading.value = true;
+  loading.value = true;
-    ConfigAPI.getPage(tableData.params)
+  ConfigAPI.getPage(tableData.params)
-      .then((data) => {
+    .then((data) => {
-        tableData.list = data.list ?? [];
+      tableData.list = data.list ?? [];
-        tableData.total = data.total ?? 0;
+      tableData.total = data.total ?? 0;
-      })
+    })
-      .finally(() => {
+    .finally(() => {
-        loading.value = false;
+      loading.value = false;
-      });
-  }
-
-  /**
-   * 查询按钮点击事件
-   */
-  function handleQuery(): void {
-    tableData.params.pageNum = 1;
-    fetchData();
-  }
-
-  /**
-   * 重置查询
-   */
-  function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
-    fetchData();
-  }
-
-  /**
-   * 表格选择变化事件
-   */
-  function handleSelectionChange(selection: ConfigItem[]): void {
-    selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
-  }
-
-  /**
-   * 打开弹窗
-   * @param id 配置ID（编辑时传入）
-   */
-  function openDialog(id?: string): void {
-    dialogState.visible = true;
-    if (id) {
-      dialogState.title = "修改系统配置";
-      ConfigAPI.getFormData(id).then((data) => {
-        Object.assign(formData, data);
-      });
-    } else {
-      dialogState.title = "新增系统配置";
-      formData.id = undefined;
-    }
-  }
-
-  /**
-   * 刷新缓存
-   */
-  const refreshCache = useDebounceFn(() => {
-    ConfigAPI.refreshCache().then(() => {
-      ElMessage.success("刷新成功");
     });
-  }, 1000);
+}
 
-  /**
+/**
-   * 提交表单
+ * 查询按钮点击事件
-   */
+ */
-  function handleSubmit(): void {
+function handleQuery(): void {
-    dataFormRef.value?.validate((valid) => {
+  tableData.params.pageNum = 1;
-      if (valid) {
+  fetchData();
-        loading.value = true;
+}
-        const id = formData.id;
+
-        if (id) {
+/**
-          ConfigAPI.update(id, formData)
+ * 重置查询
-            .then(() => {
+ */
-              ElMessage.success("修改成功");
+function handleResetQuery(): void {
-              closeDialog();
+  queryFormRef.value?.resetFields();
-              handleResetQuery();
+  tableData.params.pageNum = 1;
-            })
+  fetchData();
-            .finally(() => (loading.value = false));
+}
-        } else {
+
-          ConfigAPI.create(formData)
+/**
-            .then(() => {
+ * 表格选择变化事件
-              ElMessage.success("新增成功");
+ */
-              closeDialog();
+function handleSelectionChange(selection: ConfigItem[]): void {
-              handleResetQuery();
+  selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
-            })
+}
-            .finally(() => (loading.value = false));
+
-        }
+/**
-      }
+ * 打开弹窗
+ * @param id 配置ID（编辑时传入）
+ */
+function openDialog(id?: string): void {
+  dialogState.visible = true;
+  if (id) {
+    dialogState.title = "修改系统配置";
+    ConfigAPI.getFormData(id).then((data) => {
+      Object.assign(formData, data);
     });
-  }
+  } else {
-
+    dialogState.title = "新增系统配置";
-  /**
-   * 关闭弹窗
-   */
-  function closeDialog(): void {
-    dialogState.visible = false;
-    dataFormRef.value?.resetFields();
-    dataFormRef.value?.clearValidate();
     formData.id = undefined;
   }
+}
 
-  /**
+/**
-   * 删除配置
+ * 刷新缓存
-   * @param id 配置ID
+ */
-   */
+const refreshCache = useDebounceFn(() => {
-  function handleDelete(id: string): void {
+  ConfigAPI.refreshCache().then(() => {
-    ElMessageBox.confirm("确认删除该项配置?", "警告", {
+    ElMessage.success("刷新成功");
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(() => {
-      loading.value = true;
-      ConfigAPI.deleteById(id)
-        .then(() => {
-          ElMessage.success("删除成功");
-          handleResetQuery();
-        })
-        .finally(() => (loading.value = false));
-    });
-  }
-
-  onMounted(() => {
-    handleQuery();
   });
+}, 1000);
+
+/**
+ * 提交表单
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      const id = formData.id;
+      if (id) {
+        ConfigAPI.update(id, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        ConfigAPI.create(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  dataFormRef.value?.resetFields();
+  dataFormRef.value?.clearValidate();
+  formData.id = undefined;
+}
+
+/**
+ * 删除配置
+ * @param id 配置ID
+ */
+function handleDelete(id: string): void {
+  ElMessageBox.confirm("确认删除该项配置?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    loading.value = true;
+    ConfigAPI.deleteById(id)
+      .then(() => {
+        ElMessage.success("删除成功");
+        handleResetQuery();
+      })
+      .finally(() => (loading.value = false));
+  });
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>

src/views/system/dict/dict-item.vue

@@ -3,7 +3,12 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input v-model="tableData.params.keywords" placeholder="字典标签/字典值" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="字典标签/字典值"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item>
@@ -17,13 +22,24 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
-          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="loading"
+        highlight-current-row
+        :data="tableData.list"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典项标签" prop="label" />
         <el-table-column label="字典项值" prop="value" />
@@ -38,21 +54,43 @@
 
         <el-table-column fixed="right" label="操作" align="center" width="220">
           <template #default="scope">
-            <el-button type="primary" link size="small" icon="edit" @click.stop="openDialog(scope.row)">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              icon="edit"
+              @click.stop="openDialog(scope.row)"
+            >
               编辑
             </el-button>
-            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
+            <el-button
+              type="danger"
+              link
+              size="small"
+              icon="delete"
+              @click.stop="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData"
+      />
     </el-card>
 
-    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
+    <el-dialog
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      width="600px"
+      @close="closeDialog"
+    >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="字典项标签" prop="label">
           <el-input v-model="formData.label" placeholder="请输入字典标签" />
@@ -81,7 +119,12 @@
               </el-tooltip>
             </div>
           </template>
-          <el-select v-model="formData.tagType" placeholder="请选择标签类型" clearable @clear="formData.tagType = ''">
+          <el-select
+            v-model="formData.tagType"
+            placeholder="请选择标签类型"
+            clearable
+            @clear="formData.tagType = ''"
+          >
             <template #label="{ value }">
               <el-tag v-if="value" :type="value">
                 {{ formData.label ? formData.label : "字典标签" }}
@@ -109,191 +152,192 @@
 </template>
 
 <script setup lang="ts">
-  import DictAPI from "@/api/system/dict";
+import DictAPI from "@/api/system/dict";
-  import type { DictItem, DictItemForm } from "@/api/system/dict";
+import type { DictItem, DictItemForm } from "@/api/system/dict";
-  import type { FormInstance, FormRules } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
 
-  const route = useRoute();
+const route = useRoute();
 
-  // 字典编码
+// 字典编码
-  const dictCode = ref(route.query.dictCode as string);
+const dictCode = ref(route.query.dictCode as string);
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const dataFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
-  // 列表数据
+// 列表数据
-  const loading = ref(false);
+const loading = ref(false);
-  const ids = ref<string[]>([]);
+const ids = ref<string[]>([]);
 
-  const tableData = reactive<PageResult<DictItem>>({
+const tableData = reactive<PageResult<DictItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-      dictCode: undefined,
+    pageSize: 10,
-      keywords: undefined,
+    dictCode: undefined,
-    },
+    keywords: undefined,
-  });
+  },
+});
 
-  // 弹窗状态
+// 弹窗状态
-  const dialogState = reactive({
+const dialogState = reactive({
-    title: "",
+  title: "",
-    visible: false,
+  visible: false,
-  });
+});
 
-  // 表单数据
+// 表单数据
-  const formData = reactive<DictItemForm>({
+const formData = reactive<DictItemForm>({
-    sort: 1,
+  sort: 1,
-    status: 1,
+  status: 1,
-    tagType: "",
+  tagType: "",
-  });
+});
 
-  // 标签类型选项
+// 标签类型选项
-  const tagType = ["primary", "success", "info", "warning", "danger"] as const;
+const tagType = ["primary", "success", "info", "warning", "danger"] as const;
 
-  // 验证规则
+// 验证规则
-  const rules: FormRules = {
+const rules: FormRules = {
-    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
-    label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
+  label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
-  };
+};
 
-  /**
+/**
-   * 加载字典项列表数据
+ * 加载字典项列表数据
-   */
+ */
-  function fetchData(): void {
+function fetchData(): void {
-    loading.value = true;
+  loading.value = true;
-    DictAPI.getDictItemPage(dictCode.value, tableData.params)
+  DictAPI.getDictItemPage(dictCode.value, tableData.params)
-      .then((data: any) => {
+    .then((data: any) => {
-        tableData.list = data.list;
+      tableData.list = data.list;
-        tableData.total = data.total ?? 0;
+      tableData.total = data.total ?? 0;
-      })
+    })
-      .finally(() => {
+    .finally(() => {
-        loading.value = false;
+      loading.value = false;
-      });
+    });
-  }
+}
 
-  /**
+/**
-   * 查询按钮点击事件
+ * 查询按钮点击事件
-   */
+ */
-  function handleQuery(): void {
+function handleQuery(): void {
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    fetchData();
+  fetchData();
-  }
+}
 
-  /**
+/**
-   * 重置查询
+ * 重置查询
-   */
+ */
-  function handleResetQuery(): void {
+function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
+  queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    fetchData();
+  fetchData();
-  }
+}
 
-  /**
+/**
-   * 表格选择变化事件
+ * 表格选择变化事件
-   */
+ */
-  function handleSelectionChange(selection: DictItem[]): void {
+function handleSelectionChange(selection: DictItem[]): void {
-    ids.value = selection.map((item) => item.id);
+  ids.value = selection.map((item) => item.id);
-  }
+}
 
-  /**
+/**
-   * 打开弹窗
+ * 打开弹窗
-   * @param row 字典项数据（编辑时传入）
+ * @param row 字典项数据（编辑时传入）
-   */
+ */
-  function openDialog(row?: DictItem): void {
+function openDialog(row?: DictItem): void {
-    resetForm();
+  resetForm();
-    dialogState.visible = true;
+  dialogState.visible = true;
-    dialogState.title = row ? "编辑字典值" : "新增字典项";
+  dialogState.title = row ? "编辑字典值" : "新增字典项";
 
-    if (row?.id) {
+  if (row?.id) {
-      DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
+    DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
-        Object.assign(formData, data);
+      Object.assign(formData, data);
-      });
-    }
-  }
-
-  function resetForm(): void {
-    dataFormRef.value?.clearValidate();
-    formData.id = undefined;
-    formData.dictCode = dictCode.value;
-    formData.label = undefined;
-    formData.value = undefined;
-    formData.sort = 1;
-    formData.status = 1;
-    formData.tagType = "";
-  }
-
-  /**
-   * 提交表单
-   */
-  function handleSubmit(): void {
-    dataFormRef.value?.validate((isValid) => {
-      if (isValid) {
-        loading.value = true;
-        const id = formData.id;
-
-        formData.dictCode = dictCode.value;
-        if (id) {
-          DictAPI.updateDictItem(dictCode.value, id, formData)
-            .then(() => {
-              ElMessage.success("修改成功");
-              closeDialog();
-              handleQuery();
-            })
-            .finally(() => (loading.value = false));
-        } else {
-          DictAPI.createDictItem(dictCode.value, formData)
-            .then(() => {
-              ElMessage.success("新增成功");
-              closeDialog();
-              handleQuery();
-            })
-            .finally(() => (loading.value = false));
-        }
-      }
     });
   }
+}
 
-  /**
+function resetForm(): void {
-   * 关闭弹窗
+  dataFormRef.value?.clearValidate();
-   */
+  formData.id = undefined;
-  function closeDialog(): void {
+  formData.dictCode = dictCode.value;
-    dialogState.visible = false;
+  formData.label = undefined;
-    dataFormRef.value?.resetFields();
+  formData.value = undefined;
-    resetForm();
+  formData.sort = 1;
-  }
+  formData.status = 1;
+  formData.tagType = "";
+}
 
-  /**
+/**
-   * 删除字典项
+ * 提交表单
-   * @param id 字典项ID
+ */
-   */
+function handleSubmit(): void {
-  function handleDelete(id?: number): void {
+  dataFormRef.value?.validate((isValid) => {
-    const itemIds = [id || ids.value].join(",");
+    if (isValid) {
+      loading.value = true;
+      const id = formData.id;
 
-    if (!itemIds) {
+      formData.dictCode = dictCode.value;
-      ElMessage.warning("请勾选删除项");
+      if (id) {
-      return;
+        DictAPI.updateDictItem(dictCode.value, id, formData)
-    }
+          .then(() => {
-    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+            ElMessage.success("修改成功");
-      confirmButtonText: "确定",
+            closeDialog();
-      cancelButtonText: "取消",
+            handleQuery();
-      type: "warning",
+          })
-    }).then(
+          .finally(() => (loading.value = false));
-      () => {
+      } else {
-        DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
+        DictAPI.createDictItem(dictCode.value, formData)
-          ElMessage.success("删除成功");
+          .then(() => {
-          handleResetQuery();
+            ElMessage.success("新增成功");
-        });
+            closeDialog();
-      },
+            handleQuery();
-      () => {
+          })
-        ElMessage.info("已取消删除");
+          .finally(() => (loading.value = false));
       }
-    );
+    }
-  }
-
-  onMounted(() => {
-    handleQuery();
   });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  dataFormRef.value?.resetFields();
+  resetForm();
+}
+
+/**
+ * 删除字典项
+ * @param id 字典项ID
+ */
+function handleDelete(id?: number): void {
+  const itemIds = [id || ids.value].join(",");
+
+  if (!itemIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
+        ElMessage.success("删除成功");
+        handleResetQuery();
+      });
+    },
+    () => {
+      ElMessage.info("已取消删除");
+    }
+  );
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>

src/views/system/dict/index.vue

@@ -3,7 +3,12 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input v-model="tableData.params.keywords" placeholder="字典名称/编码" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="字典名称/编码"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item>
@@ -17,13 +22,24 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
-          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="loading"
+        highlight-current-row
+        :data="tableData.list"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典名称" prop="name" />
         <el-table-column label="字典编码" prop="dictCode" />
@@ -43,22 +59,43 @@
               字典数据
             </el-button>
 
-            <el-button type="primary" link size="small" icon="edit" @click.stop="handleEditClick(scope.row.id)">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              icon="edit"
+              @click.stop="handleEditClick(scope.row.id)"
+            >
               编辑
             </el-button>
-            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
+            <el-button
+              type="danger"
+              link
+              size="small"
+              icon="delete"
+              @click.stop="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
         v-model:limit="tableData.params.pageSize"
-        @pagination="fetchData" />
+        @pagination="fetchData"
+      />
     </el-card>
 
-    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
+    <el-dialog
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      width="500px"
+      @close="closeDialog"
+    >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入字典名称" />
@@ -91,206 +128,207 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({
+defineOptions({
-    name: "Dict",
+  name: "Dict",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  import DictAPI from "@/api/system/dict";
+import DictAPI from "@/api/system/dict";
-  import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
+import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
-  import type { FormInstance, FormRules } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
-  import router from "@/router";
+import router from "@/router";
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const dataFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
-  // 列表数据
+// 列表数据
-  const loading = ref(false);
+const loading = ref(false);
-  const ids = ref<string[]>([]);
+const ids = ref<string[]>([]);
-  const tableData = reactive<PageResult<DictTypeItem>>({
+const tableData = reactive<PageResult<DictTypeItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-    },
+    pageSize: 10,
-  });
+  },
+});
 
-  // 弹窗状态
+// 弹窗状态
-  const dialogState = reactive({
+const dialogState = reactive({
-    title: "",
+  title: "",
-    visible: false,
+  visible: false,
-  });
+});
 
-  // 表单数据
+// 表单数据
-  const formData = reactive<DictTypeForm>({
+const formData = reactive<DictTypeForm>({
-    status: 1,
+  status: 1,
-  });
+});
 
-  // 验证规则
+// 验证规则
-  const rules: FormRules = {
+const rules: FormRules = {
-    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-    dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
+  dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-  };
+};
 
-  /**
+/**
-   * 加载字典列表数据
+ * 加载字典列表数据
-   */
+ */
-  function fetchData(): void {
+function fetchData(): void {
-    loading.value = true;
+  loading.value = true;
-    DictAPI.getPage(tableData.params)
+  DictAPI.getPage(tableData.params)
-      .then((data) => {
+    .then((data) => {
-        tableData.list = data.list ?? []
+      tableData.list = data.list ?? [];
-        tableData.total = data.total ?? 0;
+      tableData.total = data.total ?? 0;
-      })
+    })
-      .finally(() => {
+    .finally(() => {
-        loading.value = false;
+      loading.value = false;
-      });
-  }
-
-  /**
-   * 查询按钮点击事件
-   */
-  function handleQuery(): void {
-    tableData.params.pageNum = 1;
-    fetchData();
-  }
-
-  /**
-   * 重置查询
-   */
-  function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
-    fetchData();
-  }
-
-  /**
-   * 表格选择变化事件
-   */
-  function handleSelectionChange(selection: DictTypeItem[]): void {
-    ids.value = selection.map((item) => item.id);
-  }
-
-  /**
-   * 新增按钮点击事件
-   */
-  function handleCreateClick(): void {
-    resetForm();
-    dialogState.visible = true;
-    dialogState.title = "新增字典";
-  }
-
-  /**
-   * 编辑按钮点击事件
-   * @param id 字典ID
-   */
-  function handleEditClick(id: string): void {
-    resetForm();
-    dialogState.visible = true;
-    dialogState.title = "修改字典";
-    DictAPI.getFormData(id).then((data) => {
-      Object.assign(formData, data);
     });
-  }
+}
 
-  function resetForm(): void {
+/**
-    dataFormRef.value?.clearValidate();
+ * 查询按钮点击事件
-    formData.id = undefined;
+ */
-    formData.name = undefined;
+function handleQuery(): void {
-    formData.dictCode = undefined;
+  tableData.params.pageNum = 1;
-    formData.status = 1;
+  fetchData();
-    formData.remark = undefined;
+}
-  }
 
-  /**
+/**
-   * 提交表单
+ * 重置查询
-   */
+ */
-  function handleSubmit(): void {
+function handleResetQuery(): void {
-    dataFormRef.value?.validate((isValid) => {
+  queryFormRef.value?.resetFields();
-      if (isValid) {
+  tableData.params.pageNum = 1;
-        loading.value = true;
+  fetchData();
-        const id = formData.id;
+}
-        if (id) {
+
-          DictAPI.update(id, formData)
+/**
-            .then(() => {
+ * 表格选择变化事件
-              ElMessage.success("修改成功");
+ */
-              closeDialog();
+function handleSelectionChange(selection: DictTypeItem[]): void {
-              handleQuery();
+  ids.value = selection.map((item) => item.id);
-            })
+}
-            .finally(() => (loading.value = false));
+
-        } else {
+/**
-          DictAPI.create(formData)
+ * 新增按钮点击事件
-            .then(() => {
+ */
-              ElMessage.success("新增成功");
+function handleCreateClick(): void {
-              closeDialog();
+  resetForm();
-              handleQuery();
+  dialogState.visible = true;
-            })
+  dialogState.title = "新增字典";
-            .finally(() => (loading.value = false));
+}
-        }
+
+/**
+ * 编辑按钮点击事件
+ * @param id 字典ID
+ */
+function handleEditClick(id: string): void {
+  resetForm();
+  dialogState.visible = true;
+  dialogState.title = "修改字典";
+  DictAPI.getFormData(id).then((data) => {
+    Object.assign(formData, data);
+  });
+}
+
+function resetForm(): void {
+  dataFormRef.value?.clearValidate();
+  formData.id = undefined;
+  formData.name = undefined;
+  formData.dictCode = undefined;
+  formData.status = 1;
+  formData.remark = undefined;
+}
+
+/**
+ * 提交表单
+ */
+function handleSubmit(): void {
+  dataFormRef.value?.validate((isValid) => {
+    if (isValid) {
+      loading.value = true;
+      const id = formData.id;
+      if (id) {
+        DictAPI.update(id, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        DictAPI.create(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
       }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  dataFormRef.value?.resetFields();
+  resetForm();
+}
+
+/**
+ * 删除字典
+ * @param id 字典ID
+ */
+function handleDelete(id?: number): void {
+  const attrGroupIds = [id || ids.value].join(",");
+  if (!attrGroupIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      DictAPI.deleteByIds(attrGroupIds).then(() => {
+        ElMessage.success("删除成功");
+        handleResetQuery();
+      });
+    },
+    () => {
+      ElMessage.info("已取消删除");
+    }
+  );
+}
+
+/**
+ * 打开字典数据页面
+ * @param row 字典数据
+ */
+function openDictData(row: DictTypeItem): void {
+  try {
+    const route = router.resolve({
+      name: "DictItem",
+      query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
     });
-  }
+    if (route.matched.length === 0) {
-
+      ElMessage.error("路由未注册，请刷新页面后重试");
-  /**
-   * 关闭弹窗
-   */
-  function closeDialog(): void {
-    dialogState.visible = false;
-    dataFormRef.value?.resetFields();
-    resetForm();
-  }
-
-  /**
-   * 删除字典
-   * @param id 字典ID
-   */
-  function handleDelete(id?: number): void {
-    const attrGroupIds = [id || ids.value].join(",");
-    if (!attrGroupIds) {
-      ElMessage.warning("请勾选删除项");
       return;
     }
-    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    router.push(route);
-      confirmButtonText: "确定",
+  } catch (error) {
-      cancelButtonText: "取消",
+    console.error("路由跳转失败:", error);
-      type: "warning",
+    ElMessage.error("页面跳转失败，请刷新页面后重试");
-    }).then(
-      () => {
-        DictAPI.deleteByIds(attrGroupIds).then(() => {
-          ElMessage.success("删除成功");
-          handleResetQuery();
-        });
-      },
-      () => {
-        ElMessage.info("已取消删除");
-      }
-    );
   }
+}
 
-  /**
+onMounted(() => {
-   * 打开字典数据页面
+  handleQuery();
-   * @param row 字典数据
+});
-   */
-  function openDictData(row: DictTypeItem): void {
-    try {
-      const route = router.resolve({
-        name: "DictItem",
-        query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
-      });
-      if (route.matched.length === 0) {
-        ElMessage.error("路由未注册，请刷新页面后重试");
-        return;
-      }
-      router.push(route);
-    } catch (error) {
-      console.error("路由跳转失败:", error);
-      ElMessage.error("页面跳转失败，请刷新页面后重试");
-    }
-  }
-
-  onMounted(() => {
-    handleQuery();
-  });
 </script>

src/views/system/log/index.vue

@@ -3,12 +3,25 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
         <el-form-item prop="keywords" label="关键字">
-          <el-input v-model="tableData.params.keywords" placeholder="IP/操作人" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="IP/操作人"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item prop="createTime" label="操作时间">
-          <el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~" start-placeholder="开始时间"
+          <el-date-picker
-            end-placeholder="截止时间" value-format="YYYY-MM-DD" style="width: 260px" />
+            v-model="tableData.params.createTime"
+            :editable="false"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="截止时间"
+            value-format="YYYY-MM-DD"
+            style="width: 260px"
+          />
         </el-form-item>
 
         <el-form-item>
@@ -47,8 +60,13 @@
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData"
+      />
     </el-card>
 
     <!-- 详情弹窗 -->
@@ -87,75 +105,76 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({
+defineOptions({
-    name: "Log",
+  name: "Log",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  import LogAPI from "@/api/system/log";
+import LogAPI from "@/api/system/log";
-  import type { LogItem } from "@/api/system/log";
+import type { LogItem } from "@/api/system/log";
-  import type { FormInstance, TagProps } from "element-plus";
+import type { FormInstance, TagProps } from "element-plus";
 
-  function getMethodTagType(method: string): TagProps["type"] {
+function getMethodTagType(method: string): TagProps["type"] {
-    const map: Record<string, TagProps["type"]> = {
+  const map: Record<string, TagProps["type"]> = {
-      GET: undefined,
+    GET: undefined,
-      POST: "success",
+    POST: "success",
-      PUT: "warning",
+    PUT: "warning",
-      DELETE: "danger",
+    DELETE: "danger",
-      PATCH: "info",
+    PATCH: "info",
-    };
+  };
-    return map[method?.toUpperCase()] ?? "info";
+  return map[method?.toUpperCase()] ?? "info";
-  }
+}
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
 
-  const loading = ref(false);
+const loading = ref(false);
 
-  const tableData = reactive<PageResult<LogItem>>({
+const tableData = reactive<PageResult<LogItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-      keywords: "",
+    pageSize: 10,
-      createTime: undefined as [string, string] | undefined,
+    keywords: "",
-    },
+    createTime: undefined as [string, string] | undefined,
-  });
+  },
-  // 详情弹窗
+});
-  const detailVisible = ref(false);
+// 详情弹窗
-  const detailData = ref<Partial<LogItem>>({});
+const detailVisible = ref(false);
+const detailData = ref<Partial<LogItem>>({});
 
-  function fetchData(): void {
+function fetchData(): void {
-    loading.value = true;
+  loading.value = true;
-    LogAPI.getPage(tableData.params)
+  LogAPI.getPage(tableData.params)
-      .then((data) => {
+    .then((data) => {
-        tableData.list = data.list ?? [];
+      tableData.list = data.list ?? [];
-        tableData.total = data.total ?? 0;
+      tableData.total = data.total ?? 0;
-      })
+    })
-      .finally(() => {
+    .finally(() => {
-        loading.value = false;
+      loading.value = false;
-      });
+    });
-  }
+}
 
-  function handleQuery(): void {
+function handleQuery(): void {
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    fetchData();
+  fetchData();
-  }
+}
 
-  function handleResetQuery(): void {
+function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
+  queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    tableData.params.createTime = undefined;
+  tableData.params.createTime = undefined;
-    fetchData();
+  fetchData();
-  }
+}
 
-  function handleDetail(row: LogItem): void {
+function handleDetail(row: LogItem): void {
-    detailData.value = row;
+  detailData.value = row;
-    detailVisible.value = true;
+  detailVisible.value = true;
-  }
+}
 
-  onMounted(() => {
+onMounted(() => {
-    handleQuery();
+  handleQuery();
-  });
+});
 </script>

src/views/system/notice/index.vue

@@ -3,11 +3,21 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-suffix=":">
         <el-form-item label="标题" prop="title">
-          <el-input v-model="tableData.params.title" placeholder="标题" clearable @keyup.enter="handleQuery()" />
+          <el-input
+            v-model="tableData.params.title"
+            placeholder="标题"
+            clearable
+            @keyup.enter="handleQuery()"
+          />
         </el-form-item>
 
         <el-form-item label="发布状态" prop="publishStatus">
-          <el-select v-model="tableData.params.publishStatus" clearable placeholder="全部" style="width: 100px">
+          <el-select
+            v-model="tableData.params.publishStatus"
+            clearable
+            placeholder="全部"
+            style="width: 100px"
+          >
             <el-option :value="0" label="未发布" />
             <el-option :value="1" label="已发布" />
             <el-option :value="-1" label="已撤回" />
@@ -24,16 +34,33 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button v-hasPerm="['sys:notice:create']" type="success" icon="plus" @click="openDialog()">
+          <el-button
+            v-hasPerm="['sys:notice:create']"
+            type="success"
+            icon="plus"
+            @click="openDialog()"
+          >
             新增通知
           </el-button>
-          <el-button v-hasPerm="['sys:notice:delete']" type="danger" :disabled="selectIds.length === 0" icon="delete" @click="handleDelete()">
+          <el-button
+            v-hasPerm="['sys:notice:delete']"
+            type="danger"
+            :disabled="selectIds.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row @selection-change="handleSelectionChange">
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="tableData.list"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="通知标题" prop="title" min-width="200" />
@@ -83,32 +110,68 @@
             <el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
               查看
             </el-button>
-            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:publish']" type="primary" size="small" link
+            <el-button
-              @click="handlePublish(scope.row.id)">
+              v-if="scope.row.publishStatus !== 1"
+              v-hasPerm="['sys:notice:publish']"
+              type="primary"
+              size="small"
+              link
+              @click="handlePublish(scope.row.id)"
+            >
               发布
             </el-button>
-            <el-button v-if="scope.row.publishStatus === 1" v-hasPerm="['sys:notice:revoke']" type="primary" size="small" link
+            <el-button
-              @click="handleRevoke(scope.row.id)">
+              v-if="scope.row.publishStatus === 1"
+              v-hasPerm="['sys:notice:revoke']"
+              type="primary"
+              size="small"
+              link
+              @click="handleRevoke(scope.row.id)"
+            >
               撤回
             </el-button>
-            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:update']" type="primary" size="small" link
+            <el-button
-              @click="openDialog(scope.row.id)">
+              v-if="scope.row.publishStatus !== 1"
+              v-hasPerm="['sys:notice:update']"
+              type="primary"
+              size="small"
+              link
+              @click="openDialog(scope.row.id)"
+            >
               编辑
             </el-button>
-            <el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:delete']" type="danger" size="small" link
+            <el-button
-              @click="handleDelete(scope.row.id)">
+              v-if="scope.row.publishStatus !== 1"
+              v-hasPerm="['sys:notice:delete']"
+              type="danger"
+              size="small"
+              link
+              @click="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchData()" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData()"
+      />
     </el-card>
 
-    <el-dialog v-model="dialogState.visible" :show-close="false" :fullscreen="dialogState.fullscreen" top="6vh" width="70%"
+    <el-dialog
-      custom-class="notice-dialog" @close="closeDialog">
+      v-model="dialogState.visible"
+      :show-close="false"
+      :fullscreen="dialogState.fullscreen"
+      top="6vh"
+      width="70%"
+      custom-class="notice-dialog"
+      @close="closeDialog"
+    >
       <template #header>
         <div class="flex-x-between">
           <span>{{ dialogState.title }}</span>
@@ -146,7 +209,12 @@
         </el-form-item>
         <el-form-item v-if="formData.targetType === 2" label="指定用户" prop="targetUsers">
           <el-select v-model="formData.targetUsers" multiple search placeholder="请选择指定用户">
-            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option
+              v-for="item in userOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="通知内容" prop="content">
@@ -160,7 +228,13 @@
         </div>
       </template>
     </el-dialog>
-    <el-dialog v-model="detailDialog.visible" :show-close="false" width="50%" append-to-body @close="closeDetailDialog">
+    <el-dialog
+      v-model="detailDialog.visible"
+      :show-close="false"
+      width="50%"
+      append-to-body
+      @close="closeDetailDialog"
+    >
       <template #header>
         <div class="flex-x-between">
           <span>通知公告详情</span>
@@ -197,301 +271,301 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({
+defineOptions({
-    name: "Notice",
+  name: "Notice",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  import NoticeAPI from "@/api/system/notice";
+import NoticeAPI from "@/api/system/notice";
-  import type { NoticeItem, NoticeForm, NoticeDetail } from "@/api/system/notice";
+import type { NoticeItem, NoticeForm, NoticeDetail } from "@/api/system/notice";
-  import UserAPI from "@/api/system/user";
+import UserAPI from "@/api/system/user";
-  import type { FormInstance, FormRules } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const dataFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
 
+// 列表数据
+const userOptions = ref<OptionItem[]>([]);
+const loading = ref(false);
+const selectIds = ref<number[]>([]);
 
-  // 列表数据
+const tableData = reactive<PageResult<NoticeItem>>({
-  const userOptions = ref<OptionItem[]>([]);
+  list: [],
-  const loading = ref(false);
+  total: 0,
-  const selectIds = ref<number[]>([]);
+  params: {
-
+    //查询参数
-  const tableData = reactive<PageResult<NoticeItem>>({
+    pageNum: 1,
-    list: [],
+    pageSize: 10,
-    total: 0,
-    params: { //查询参数
-      pageNum: 1,
-      pageSize: 10,
-      title: "",
-      publishStatus: undefined,
-    },
-  });
-
-  // 弹窗状态
-  const dialogState = reactive({
     title: "",
-    visible: false,
+    publishStatus: undefined,
-    fullscreen: false,
+  },
-  });
+});
 
-  // 表单数据
+// 弹窗状态
-  const formData = reactive<NoticeForm>({
+const dialogState = reactive({
-    level: "L",
+  title: "",
-    targetType: 1,
+  visible: false,
-  });
+  fullscreen: false,
+});
 
-  // 验证规则
+// 表单数据
-  const rules: FormRules = {
+const formData = reactive<NoticeForm>({
-    title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
+  level: "L",
-    content: [
+  targetType: 1,
-      {
+});
-        required: true,
-        message: "请输入通知内容",
-        trigger: "blur",
-        validator: (rule, value: string, callback) => {
-          if (!value.replace(/<[^>]+>/g, "").trim()) {
-            callback(new Error("请输入通知内容"));
-          } else {
-            callback();
-          }
-        },
-      },
-    ],
-    type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
-  };
 
-  // 详情弹窗状态
+// 验证规则
-  const detailDialog = reactive({
+const rules: FormRules = {
-    visible: false,
+  title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
-  });
+  content: [
-  const currentNotice = ref<NoticeDetail>({});
+    {
-
+      required: true,
-  /**
+      message: "请输入通知内容",
-   * 查询按钮点击事件
+      trigger: "blur",
-   */
+      validator: (rule, value: string, callback) => {
-  function handleQuery(): void {
+        if (!value.replace(/<[^>]+>/g, "").trim()) {
-    tableData.params.pageNum = 1;
+          callback(new Error("请输入通知内容"));
-    fetchData();
-  }
-
-  /**
-   * 加载通知公告列表数据
-   */
-  function fetchData(): void {
-    loading.value = true;
-    NoticeAPI.getPage(tableData.params)
-      .then((data) => {
-        tableData.list = data.list ?? [];
-        tableData.total = data.total ?? 0;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  }
-
-  /**
-   * 重置查询
-   */
-  function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
-    fetchData();
-  }
-
-  /**
-   * 表格选择变化事件
-   */
-  function handleSelectionChange(selection: NoticeItem[]): void {
-    selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
-  }
-
-  /**
-   * 打开弹窗
-   * @param id 通知ID（编辑时传入）
-   */
-  function openDialog(id?: string): void {
-    dialogState.fullscreen = false;
-    UserAPI.getOptions().then((data) => {
-      userOptions.value = data;
-    });
-
-    dialogState.visible = true;
-    if (id) {
-      dialogState.title = "修改公告";
-      NoticeAPI.getFormData(id).then((data) => {
-        Object.assign(formData, {
-          ...data,
-          targetUsers: normalizeTargetUsers(
-            (data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
-          ),
-        });
-      });
-    } else {
-      Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
-      dialogState.title = "新增公告";
-    }
-  }
-
-  /**
-   * 发布通知公告
-   * @param id 通知ID
-   */
-  function handlePublish(id: string): void {
-    NoticeAPI.publish(id).then(() => {
-      ElMessage.success("发布成功");
-      fetchData();
-    });
-  }
-
-  /**
-   * 撤回通知公告
-   * @param id 通知ID
-   */
-  function handleRevoke(id: string): void {
-    NoticeAPI.revoke(id).then(() => {
-      ElMessage.success("撤回成功");
-      fetchData();
-    });
-  }
-
-  /**
-   * 提交表单
-   */
-  function handleSubmit(): void {
-    dataFormRef.value?.validate((valid) => {
-      if (valid) {
-        loading.value = true;
-        const payload = {
-          ...formData,
-          targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
-        } as NoticeForm & { targetUserIds: number[] };
-        delete (payload as NoticeForm).targetUsers;
-        const id = formData.id;
-        if (id) {
-          NoticeAPI.update(id, payload)
-            .then(() => {
-              ElMessage.success("修改成功");
-              closeDialog();
-              handleResetQuery();
-            })
-            .finally(() => (loading.value = false));
         } else {
-          NoticeAPI.create(payload)
+          callback();
-            .then(() => {
-              ElMessage.success("新增成功");
-              closeDialog();
-              handleResetQuery();
-            })
-            .finally(() => (loading.value = false));
         }
-      }
+      },
+    },
+  ],
+  type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
+};
+
+// 详情弹窗状态
+const detailDialog = reactive({
+  visible: false,
+});
+const currentNotice = ref<NoticeDetail>({});
+
+/**
+ * 查询按钮点击事件
+ */
+function handleQuery(): void {
+  tableData.params.pageNum = 1;
+  fetchData();
+}
+
+/**
+ * 加载通知公告列表数据
+ */
+function fetchData(): void {
+  loading.value = true;
+  NoticeAPI.getPage(tableData.params)
+    .then((data) => {
+      tableData.list = data.list ?? [];
+      tableData.total = data.total ?? 0;
+    })
+    .finally(() => {
+      loading.value = false;
     });
+}
+
+/**
+ * 重置查询
+ */
+function handleResetQuery(): void {
+  queryFormRef.value?.resetFields();
+  tableData.params.pageNum = 1;
+  fetchData();
+}
+
+/**
+ * 表格选择变化事件
+ */
+function handleSelectionChange(selection: NoticeItem[]): void {
+  selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
+}
+
+/**
+ * 打开弹窗
+ * @param id 通知ID（编辑时传入）
+ */
+function openDialog(id?: string): void {
+  dialogState.fullscreen = false;
+  UserAPI.getOptions().then((data) => {
+    userOptions.value = data;
+  });
+
+  dialogState.visible = true;
+  if (id) {
+    dialogState.title = "修改公告";
+    NoticeAPI.getFormData(id).then((data) => {
+      Object.assign(formData, {
+        ...data,
+        targetUsers: normalizeTargetUsers(
+          (data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
+        ),
+      });
+    });
+  } else {
+    Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
+    dialogState.title = "新增公告";
   }
+}
 
-  /**
+/**
-   * 关闭弹窗
+ * 发布通知公告
-   */
+ * @param id 通知ID
-  function closeDialog(): void {
+ */
-    dialogState.visible = false;
+function handlePublish(id: string): void {
-    dialogState.fullscreen = false;
+  NoticeAPI.publish(id).then(() => {
-    dataFormRef.value?.resetFields();
+    ElMessage.success("发布成功");
-    dataFormRef.value?.clearValidate();
+    fetchData();
-    formData.id = undefined;
+  });
-    formData.targetType = 1;
+}
-    formData.targetUsers = [];
-    formData.content = "";
-  }
 
-  /**
+/**
-   * 标准化目标用户数据
+ * 撤回通知公告
-   */
+ * @param id 通知ID
-  function normalizeTargetUsers(value?: unknown): number[] {
+ */
-    if (!value) {
+function handleRevoke(id: string): void {
-      return [];
+  NoticeAPI.revoke(id).then(() => {
-    }
+    ElMessage.success("撤回成功");
-    const toNumberArray = (arr: unknown[]): number[] =>
+    fetchData();
-      arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
+  });
-    if (Array.isArray(value)) {
+}
-      return toNumberArray(value);
-    }
-    if (typeof value === "string") {
-      try {
-        const parsed = JSON.parse(value);
-        if (Array.isArray(parsed)) {
-          return toNumberArray(parsed);
-        }
-        return value
-          .split(",")
-          .filter(Boolean)
-          .map((v) => Number(v))
-          .filter((v) => Number.isFinite(v));
-      } catch {
-        return value
-          .split(",")
-          .filter(Boolean)
-          .map((v) => Number(v))
-          .filter((v) => Number.isFinite(v));
-      }
-    }
-    return [];
-  }
 
-  /**
+/**
-   * 弹窗全屏切换
+ * 提交表单
-   */
+ */
-  function toggleDialogFullscreen(): void {
+function handleSubmit(): void {
-    dialogState.fullscreen = !dialogState.fullscreen;
+  dataFormRef.value?.validate((valid) => {
-  }
+    if (valid) {
-
+      loading.value = true;
-  /**
+      const payload = {
-   * 删除通知公告
+        ...formData,
-   * @param id 通知ID
+        targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
-   */
+      } as NoticeForm & { targetUserIds: number[] };
-  function handleDelete(id?: number): void {
+      delete (payload as NoticeForm).targetUsers;
-    const deleteIds = [id || selectIds.value].join(",");
+      const id = formData.id;
-    if (!deleteIds) {
+      if (id) {
-      ElMessage.warning("请勾选删除项");
+        NoticeAPI.update(id, payload)
-      return;
-    }
-
-    ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(
-      () => {
-        loading.value = true;
-        NoticeAPI.deleteByIds(deleteIds)
           .then(() => {
-            ElMessage.success("删除成功");
+            ElMessage.success("修改成功");
+            closeDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        NoticeAPI.create(payload)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
             handleResetQuery();
           })
           .finally(() => (loading.value = false));
-      },
-      () => {
-        ElMessage.info("已取消删除");
       }
-    );
+    }
-  }
-
-  /**
-   * 打开详情弹窗
-   */
-  async function openDetailDialog(id: string): Promise<void> {
-    const noticeDetail = await NoticeAPI.getDetail(id);
-    currentNotice.value = noticeDetail;
-    detailDialog.visible = true;
-  }
-
-  /**
-   * 关闭详情弹窗
-   */
-  function closeDetailDialog(): void {
-    detailDialog.visible = false;
-  }
-
-  onMounted(() => {
-    handleQuery();
   });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  dialogState.fullscreen = false;
+  dataFormRef.value?.resetFields();
+  dataFormRef.value?.clearValidate();
+  formData.id = undefined;
+  formData.targetType = 1;
+  formData.targetUsers = [];
+  formData.content = "";
+}
+
+/**
+ * 标准化目标用户数据
+ */
+function normalizeTargetUsers(value?: unknown): number[] {
+  if (!value) {
+    return [];
+  }
+  const toNumberArray = (arr: unknown[]): number[] =>
+    arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
+  if (Array.isArray(value)) {
+    return toNumberArray(value);
+  }
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return toNumberArray(parsed);
+      }
+      return value
+        .split(",")
+        .filter(Boolean)
+        .map((v) => Number(v))
+        .filter((v) => Number.isFinite(v));
+    } catch {
+      return value
+        .split(",")
+        .filter(Boolean)
+        .map((v) => Number(v))
+        .filter((v) => Number.isFinite(v));
+    }
+  }
+  return [];
+}
+
+/**
+ * 弹窗全屏切换
+ */
+function toggleDialogFullscreen(): void {
+  dialogState.fullscreen = !dialogState.fullscreen;
+}
+
+/**
+ * 删除通知公告
+ * @param id 通知ID
+ */
+function handleDelete(id?: number): void {
+  const deleteIds = [id || selectIds.value].join(",");
+  if (!deleteIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      loading.value = true;
+      NoticeAPI.deleteByIds(deleteIds)
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        })
+        .finally(() => (loading.value = false));
+    },
+    () => {
+      ElMessage.info("已取消删除");
+    }
+  );
+}
+
+/**
+ * 打开详情弹窗
+ */
+async function openDetailDialog(id: string): Promise<void> {
+  const noticeDetail = await NoticeAPI.getDetail(id);
+  currentNotice.value = noticeDetail;
+  detailDialog.visible = true;
+}
+
+/**
+ * 关闭详情弹窗
+ */
+function closeDetailDialog(): void {
+  detailDialog.visible = false;
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>

src/views/system/role/index.vue

@@ -4,7 +4,12 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item prop="keywords" label="关键字">
-          <el-input v-model="tableData.params.keywords" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="角色名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item>
@@ -18,14 +23,25 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
-          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleBatchDelete()">
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleBatchDelete()"
+          >
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
+      <el-table
-        @selection-change="handleSelectionChange">
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="tableData.list"
+        highlight-current-row
+        border
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="角色名称" prop="name" min-width="100" />
         <el-table-column label="角色编码" prop="code" width="150" />
@@ -43,25 +59,54 @@
 
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button v-hasPerm="'sys:role:assign'" type="primary" size="small" link icon="position" @click="handleAssignPermClick(scope.row)">
+            <el-button
+              v-hasPerm="'sys:role:assign'"
+              type="primary"
+              size="small"
+              link
+              icon="position"
+              @click="handleAssignPermClick(scope.row)"
+            >
               分配权限
             </el-button>
-            <el-button type="primary" size="small" link icon="edit" @click="handleEditClick(scope.row.id)">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="handleEditClick(scope.row.id)"
+            >
               编辑
             </el-button>
-            <el-button type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
+            <el-button
+              type="danger"
+              size="small"
+              link
+              icon="delete"
+              @click="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchList"
+      />
     </el-card>
 
     <!-- 角色表单弹窗 -->
-    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
+    <el-dialog
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      width="600px"
+      @close="closeDialog"
+    >
       <el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入角色名称" />
@@ -83,8 +128,15 @@
 
         <!-- 自定义部门选择 -->
         <el-form-item v-if="formData.dataScope === 5" label="选择部门" prop="deptIds">
-          <el-tree-select v-model="formData.deptIds" :data="deptOptions" multiple :render-after-expand="false" check-strictly
+          <el-tree-select
-            placeholder="请选择部门" style="width: 100%" />
+            v-model="formData.deptIds"
+            :data="deptOptions"
+            multiple
+            :render-after-expand="false"
+            check-strictly
+            placeholder="请选择部门"
+            style="width: 100%"
+          />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
@@ -95,7 +147,12 @@
         </el-form-item>
 
         <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+            style="width: 100px"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -107,7 +164,11 @@
     </el-dialog>
 
     <!-- 分配权限弹窗 -->
-    <el-drawer v-model="assignPermDialogVisible" :title="'【' + checkedRole.name + '】权限分配'" :size="drawerSize">
+    <el-drawer
+      v-model="assignPermDialogVisible"
+      :title="'【' + checkedRole.name + '】权限分配'"
+      :size="drawerSize"
+    >
       <div class="flex-x-between">
         <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
           <template #prefix>
@@ -122,7 +183,11 @@
             </template>
             {{ isExpanded ? "收缩" : "展开" }}
           </el-button>
-          <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleParentChildLinkedChange">
+          <el-checkbox
+            v-model="parentChildLinked"
+            class="ml-5"
+            @change="handleParentChildLinkedChange"
+          >
             父子联动
           </el-checkbox>
 
@@ -137,8 +202,16 @@
         </div>
       </div>
 
-      <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handlePermFilter"
+      <el-tree
-        :default-expand-all="true" :check-strictly="!parentChildLinked" class="mt-5">
+        ref="permTreeRef"
+        node-key="value"
+        show-checkbox
+        :data="menuPermOptions"
+        :filter-node-method="handlePermFilter"
+        :default-expand-all="true"
+        :check-strictly="!parentChildLinked"
+        class="mt-5"
+      >
         <template #default="{ data }">
           {{ data.label }}
         </template>
@@ -156,318 +229,318 @@
 </template>
 
 <script setup lang="ts">
-  import { useAppStore } from "@/stores/app";
+import { useAppStore } from "@/stores/app";
-  import { DeviceEnum } from "@/enums/settings";
+import { DeviceEnum } from "@/enums/settings";
 
-  import RoleAPI from "@/api/system/role";
+import RoleAPI from "@/api/system/role";
-  import type { RoleItem, RoleForm } from "@/api/system/role";
+import type { RoleItem, RoleForm } from "@/api/system/role";
-  import MenuAPI from "@/api/system/menu";
+import MenuAPI from "@/api/system/menu";
-  import DeptAPI from "@/api/system/dept";
+import DeptAPI from "@/api/system/dept";
 
-  defineOptions({
+defineOptions({
-    name: "Role",
+  name: "Role",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  const appStore = useAppStore();
+const appStore = useAppStore();
 
-  const queryFormRef = ref();
+const queryFormRef = ref();
-  const roleFormRef = ref();
+const roleFormRef = ref();
-  const permTreeRef = ref();
+const permTreeRef = ref();
 
-  const loading = ref(false);
+const loading = ref(false);
-  const ids = ref<number[]>([]);
+const ids = ref<number[]>([]);
 
-  const tableData = reactive<PageResult<RoleItem>>({
+const tableData = reactive<PageResult<RoleItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: {
+  params: {
-      pageNum: 1,
+    pageNum: 1,
-      pageSize: 10,
+    pageSize: 10,
-      keywords: ""
+    keywords: "",
-    },
+  },
-  });
+});
 
-  // 菜单权限下拉
+// 菜单权限下拉
-  const menuPermOptions = ref<OptionItem[]>([]);
+const menuPermOptions = ref<OptionItem[]>([]);
-  // 部门下拉选项
+// 部门下拉选项
-  const deptOptions = ref<OptionItem[]>([]);
+const deptOptions = ref<OptionItem[]>([]);
 
-  // 弹窗
+// 弹窗
-  const dialogState = reactive({
+const dialogState = reactive({
-    title: "",
+  title: "",
-    visible: false,
+  visible: false,
-  });
+});
 
-  const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
-  // 角色表单
+// 角色表单
-  const formData = reactive<RoleForm>({
+const formData = reactive<RoleForm>({
-    sort: 1,
+  sort: 1,
-    status: 1,
+  status: 1,
-  });
+});
 
-  const rules = reactive({
+const rules = reactive({
-    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-    code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-    dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
+  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
-    deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
+  deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
-    status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
-  });
+});
 
-  // 选中的角色
+// 选中的角色
-  interface CheckedRole {
+interface CheckedRole {
-    id?: string;
+  id?: string;
-    name?: string;
+  name?: string;
+}
+const checkedRole = ref<CheckedRole>({});
+const assignPermDialogVisible = ref(false);
+
+const permKeywords = ref("");
+const isExpanded = ref(true);
+
+const parentChildLinked = ref(true);
+
+/**
+ * 加载角色列表数据
+ */
+async function fetchList(): Promise<void> {
+  loading.value = true;
+  try {
+    const data = await RoleAPI.getPage(tableData.params);
+    tableData.list = data.list ?? [];
+    tableData.total = data.total ?? 0;
+  } finally {
+    loading.value = false;
   }
-  const checkedRole = ref<CheckedRole>({});
+}
-  const assignPermDialogVisible = ref(false);
 
-  const permKeywords = ref("");
+// 查询（重置页码后获取数据）
-  const isExpanded = ref(true);
+function handleQuery(): void {
+  tableData.params.pageNum = 1;
+  fetchList();
+}
 
-  const parentChildLinked = ref(true);
+/**
+ * 重置查询条件
+ */
+function resetQuery(): void {
+  queryFormRef.value?.resetFields();
+}
 
-  /**
+/**
-   * 加载角色列表数据
+ * 重置查询条件并重新查询
-   */
+ */
-  async function fetchList(): Promise<void> {
+function handleResetQuery(): void {
-    loading.value = true;
+  resetQuery();
-    try {
+  handleQuery();
-      const data = await RoleAPI.getPage(tableData.params);
+}
-      tableData.list = data.list ?? [];
+
-      tableData.total = data.total ?? 0;
+// 行复选框选中
-    } finally {
+function handleSelectionChange(selection: any): void {
-      loading.value = false;
+  ids.value = selection.map((item: any) => item.id);
-    }
+}
+
+/**
+ * 打开表单弹窗
+ */
+function openDialog(): void {
+  dialogState.visible = true;
+}
+
+/**
+ * 关闭表单弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单数据和验证状态
+ */
+function resetForm(): void {
+  roleFormRef.value?.resetFields();
+  roleFormRef.value?.clearValidate();
+
+  formData.id = undefined;
+  formData.sort = 1;
+  formData.status = 1;
+  formData.dataScope = undefined;
+  formData.deptIds = undefined;
+}
+
+/**
+ * 新增按钮点击事件
+ */
+async function handleCreateClick(): Promise<void> {
+  dialogState.title = "新增角色";
+  if (deptOptions.value.length === 0) {
+    deptOptions.value = await DeptAPI.getOptions();
+  }
+  openDialog();
+}
+
+/**
+ * 编辑按钮点击事件
+ * @param roleId 角色ID
+ */
+async function handleEditClick(roleId: string): Promise<void> {
+  dialogState.title = "修改角色";
+  if (deptOptions.value.length === 0) {
+    deptOptions.value = await DeptAPI.getOptions();
+  }
+  const data = await RoleAPI.getFormData(roleId);
+  Object.assign(formData, data);
+  openDialog();
+}
+
+// 提交角色表单
+async function handleSubmit(): Promise<void> {
+  const valid = await roleFormRef.value?.validate().then(
+    () => true,
+    () => false
+  );
+  if (!valid) return;
+
+  const submitData = { ...formData };
+  if (submitData.dataScope !== 5) {
+    submitData.deptIds = undefined;
   }
 
-  // 查询（重置页码后获取数据）
+  loading.value = true;
-  function handleQuery(): void {
+  try {
-    tableData.params.pageNum = 1;
+    const roleId = formData.id;
-    fetchList();
-  }
-
-  /**
-   * 重置查询条件
-   */
-  function resetQuery(): void {
-    queryFormRef.value?.resetFields();
-  }
-
-  /**
-   * 重置查询条件并重新查询
-   */
-  function handleResetQuery(): void {
-    resetQuery();
-    handleQuery();
-  }
-
-  // 行复选框选中
-  function handleSelectionChange(selection: any): void {
-    ids.value = selection.map((item: any) => item.id);
-  }
-
-  /**
-   * 打开表单弹窗
-   */
-  function openDialog(): void {
-    dialogState.visible = true;
-  }
-
-  /**
-   * 关闭表单弹窗
-   */
-  function closeDialog(): void {
-    dialogState.visible = false;
-    resetForm();
-  }
-
-  /**
-   * 重置表单数据和验证状态
-   */
-  function resetForm(): void {
-    roleFormRef.value?.resetFields();
-    roleFormRef.value?.clearValidate();
-
-    formData.id = undefined;
-    formData.sort = 1;
-    formData.status = 1;
-    formData.dataScope = undefined;
-    formData.deptIds = undefined;
-  }
-
-  /**
-   * 新增按钮点击事件
-   */
-  async function handleCreateClick(): Promise<void> {
-    dialogState.title = "新增角色";
-    if (deptOptions.value.length === 0) {
-      deptOptions.value = await DeptAPI.getOptions();
-    }
-    openDialog();
-  }
-
-  /**
-   * 编辑按钮点击事件
-   * @param roleId 角色ID
-   */
-  async function handleEditClick(roleId: string): Promise<void> {
-    dialogState.title = "修改角色";
-    if (deptOptions.value.length === 0) {
-      deptOptions.value = await DeptAPI.getOptions();
-    }
-    const data = await RoleAPI.getFormData(roleId);
-    Object.assign(formData, data);
-    openDialog();
-  }
-
-  // 提交角色表单
-  async function handleSubmit(): Promise<void> {
-    const valid = await roleFormRef.value?.validate().then(
-      () => true,
-      () => false
-    );
-    if (!valid) return;
-
-    const submitData = { ...formData };
-    if (submitData.dataScope !== 5) {
-      submitData.deptIds = undefined;
-    }
-
-    loading.value = true;
-    try {
-      const roleId = formData.id;
-      if (roleId) {
-        await RoleAPI.update(roleId, submitData);
-        ElMessage.success("修改成功");
-      } else {
-        await RoleAPI.create(submitData);
-        ElMessage.success("新增成功");
-      }
-      closeDialog();
-      handleResetQuery();
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  // 删除角色
-  function handleDelete(roleId?: number): void {
-    const roleIds = roleId ? String(roleId) : ids.value.join(",");
-    if (!roleIds) {
-      ElMessage.warning("请勾选删除项");
-      return;
-    }
-
-    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(
-      () => {
-        loading.value = true;
-        RoleAPI.deleteByIds(roleIds)
-          .then(() => {
-            ElMessage.success("删除成功");
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      },
-      () => {
-        ElMessage.info("已取消删除");
-      }
-    );
-  }
-
-  /**
-   * 批量删除按钮点击事件
-   */
-  function handleBatchDelete(): void {
-    handleDelete();
-  }
-
-  // 打开分配菜单权限弹窗
-  async function handleAssignPermClick(row: RoleItem): Promise<void> {
-    const roleId = row.id;
     if (roleId) {
-      assignPermDialogVisible.value = true;
+      await RoleAPI.update(roleId, submitData);
-      loading.value = true;
+      ElMessage.success("修改成功");
-
+    } else {
-      checkedRole.value.id = roleId;
+      await RoleAPI.create(submitData);
-      checkedRole.value.name = row.name;
+      ElMessage.success("新增成功");
-
-      // 获取所有的菜单
-      menuPermOptions.value = await MenuAPI.getOptions();
-
-      // 回显角色已拥有的菜单
-      RoleAPI.getRoleMenuIds(roleId)
-        .then((data) => {
-          const checkedMenuIds = data;
-          checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
-        })
-        .finally(() => {
-          loading.value = false;
-        });
     }
+    closeDialog();
+    handleResetQuery();
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 删除角色
+function handleDelete(roleId?: number): void {
+  const roleIds = roleId ? String(roleId) : ids.value.join(",");
+  if (!roleIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
   }
 
-  // 分配菜单权限提交
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-  function handleAssignPermSubmit() {
+    confirmButtonText: "确定",
-    const roleId = checkedRole.value.id;
+    cancelButtonText: "取消",
-    if (roleId) {
+    type: "warning",
-      const checkedMenuIds: number[] = permTreeRef
+  }).then(
-        .value!.getCheckedNodes(false, true)
+    () => {
-        .map((node: any) => node.value);
-
       loading.value = true;
-      RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
+      RoleAPI.deleteByIds(roleIds)
         .then(() => {
-          ElMessage.success("分配权限成功");
+          ElMessage.success("删除成功");
-          assignPermDialogVisible.value = false;
           handleResetQuery();
         })
-        .finally(() => {
+        .finally(() => (loading.value = false));
-          loading.value = false;
+    },
-        });
+    () => {
+      ElMessage.info("已取消删除");
     }
-  }
+  );
+}
 
-  // 展开/收缩 菜单权限树
+/**
-  function togglePermTree(): void {
+ * 批量删除按钮点击事件
-    isExpanded.value = !isExpanded.value;
+ */
-    if (permTreeRef.value) {
+function handleBatchDelete(): void {
-      Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+  handleDelete();
-        if (isExpanded.value) {
+}
-          node.expand();
+
-        } else {
+// 打开分配菜单权限弹窗
-          node.collapse();
+async function handleAssignPermClick(row: RoleItem): Promise<void> {
-        }
+  const roleId = row.id;
+  if (roleId) {
+    assignPermDialogVisible.value = true;
+    loading.value = true;
+
+    checkedRole.value.id = roleId;
+    checkedRole.value.name = row.name;
+
+    // 获取所有的菜单
+    menuPermOptions.value = await MenuAPI.getOptions();
+
+    // 回显角色已拥有的菜单
+    RoleAPI.getRoleMenuIds(roleId)
+      .then((data) => {
+        const checkedMenuIds = data;
+        checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
+      })
+      .finally(() => {
+        loading.value = false;
       });
-    }
   }
+}
 
-  // 权限筛选
+// 分配菜单权限提交
-  watch(permKeywords, (val) => {
+function handleAssignPermSubmit() {
-    permTreeRef.value!.filter(val);
+  const roleId = checkedRole.value.id;
-  });
+  if (roleId) {
+    const checkedMenuIds: number[] = permTreeRef
+      .value!.getCheckedNodes(false, true)
+      .map((node: any) => node.value);
 
-  function handlePermFilter(
+    loading.value = true;
-    value: string,
+    RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
-    data: {
+      .then(() => {
-      [key: string]: any;
+        ElMessage.success("分配权限成功");
-    }
+        assignPermDialogVisible.value = false;
-  ) {
+        handleResetQuery();
-    if (!value) return true;
+      })
-    return data.label.includes(value);
+      .finally(() => {
+        loading.value = false;
+      });
   }
+}
 
-  // 父子菜单节点是否联动
+// 展开/收缩 菜单权限树
-  function handleParentChildLinkedChange(val: any): void {
+function togglePermTree(): void {
-    parentChildLinked.value = val;
+  isExpanded.value = !isExpanded.value;
+  if (permTreeRef.value) {
+    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (isExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
   }
+}
 
-  onMounted(() => {
+// 权限筛选
-    handleQuery();
+watch(permKeywords, (val) => {
-  });
+  permTreeRef.value!.filter(val);
+});
+
+function handlePermFilter(
+  value: string,
+  data: {
+    [key: string]: any;
+  }
+) {
+  if (!value) return true;
+  return data.label.includes(value);
+}
+
+// 父子菜单节点是否联动
+function handleParentChildLinkedChange(val: any): void {
+  parentChildLinked.value = val;
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>

src/views/system/tenant/plan.vue

@@ -3,11 +3,21 @@
     <el-card class="page-search" shadow="never">
       <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input v-model="tableData.params.keywords" placeholder="套餐名称/套餐编码" clearable @keyup.enter="handleQuery" />
+          <el-input
+            v-model="tableData.params.keywords"
+            placeholder="套餐名称/套餐编码"
+            clearable
+            @keyup.enter="handleQuery"
+          />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
-          <el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 120px">
+          <el-select
+            v-model="tableData.params.status"
+            placeholder="全部"
+            clearable
+            style="width: 120px"
+          >
             <el-option label="启用" :value="1" />
             <el-option label="停用" :value="0" />
           </el-select>
@@ -23,13 +33,24 @@
     <el-card class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
-          <el-button v-hasPerm="['sys:tenant-plan:create']" type="success" icon="plus" @click="openDialog()">
+          <el-button
+            v-hasPerm="['sys:tenant-plan:create']"
+            type="success"
+            icon="plus"
+            @click="openDialog()"
+          >
             新增
           </el-button>
         </div>
       </div>
 
-      <el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border>
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="tableData.list"
+        highlight-current-row
+        border
+      >
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="套餐名称" prop="name" min-width="120" />
         <el-table-column label="套餐编码" prop="code" width="160" />
@@ -44,25 +65,55 @@
         <el-table-column label="创建时间" prop="createTime" width="180" />
         <el-table-column fixed="right" label="操作" width="240">
           <template #default="scope">
-            <el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" size="small" link icon="menu"
+            <el-button
-              @click="openPlanMenuDialog(scope.row)">
+              v-hasPerm="['sys:tenant-plan:assign']"
+              type="primary"
+              size="small"
+              link
+              icon="menu"
+              @click="openPlanMenuDialog(scope.row)"
+            >
               菜单配置
             </el-button>
-            <el-button v-hasPerm="['sys:tenant-plan:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
+            <el-button
+              v-hasPerm="['sys:tenant-plan:update']"
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="openDialog(scope.row.id)"
+            >
               编辑
             </el-button>
-            <el-button v-hasPerm="['sys:tenant-plan:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
+            <el-button
+              v-hasPerm="['sys:tenant-plan:delete']"
+              type="danger"
+              size="small"
+              link
+              icon="delete"
+              @click="handleDelete(scope.row.id)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+      <pagination
-        v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
+        v-if="tableData.total > 0"
+        v-model:total="tableData.total"
+        v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData"
+      />
     </el-card>
 
-    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="520px" @close="closeDialog">
+    <el-dialog
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      width="520px"
+      @close="closeDialog"
+    >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="套餐名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入套餐名称" />
@@ -77,7 +128,12 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 120px" />
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+            style="width: 120px"
+          />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="可选" />
@@ -91,7 +147,12 @@
       </template>
     </el-dialog>
 
-    <el-drawer v-model="planMenuDialogVisible" :title="'【' + checkedPlan.name + '】菜单配置'" size="600px" @close="closePlanMenuDialog">
+    <el-drawer
+      v-model="planMenuDialogVisible"
+      :title="'【' + checkedPlan.name + '】菜单配置'"
+      size="600px"
+      @close="closePlanMenuDialog"
+    >
       <div class="flex-x-between">
         <el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
           <template #prefix>
@@ -121,8 +182,16 @@
         </div>
       </div>
 
-      <el-tree ref="menuTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handleMenuFilter"
+      <el-tree
-        :default-expand-all="true" :check-strictly="!menuParentChildLinked" class="mt-5">
+        ref="menuTreeRef"
+        node-key="value"
+        show-checkbox
+        :data="menuPermOptions"
+        :filter-node-method="handleMenuFilter"
+        :default-expand-all="true"
+        :check-strictly="!menuParentChildLinked"
+        class="mt-5"
+      >
         <template #default="{ data }">
           {{ data.label }}
         </template>
@@ -130,7 +199,11 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" @click="handlePlanMenuSubmit">
+          <el-button
+            v-hasPerm="['sys:tenant-plan:assign']"
+            type="primary"
+            @click="handlePlanMenuSubmit"
+          >
             确定
           </el-button>
           <el-button @click="planMenuDialogVisible = false">取消</el-button>
@@ -141,140 +214,120 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({
+defineOptions({
-    name: "TenantPlan",
+  name: "TenantPlan",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-  import { useDebounceFn } from "@vueuse/core";
+import { useDebounceFn } from "@vueuse/core";
-  import MenuAPI from "@/api/system/menu";
+import MenuAPI from "@/api/system/menu";
-  import TenantPlanAPI from "@/api/system/tenant-plan";
+import TenantPlanAPI from "@/api/system/tenant-plan";
-  import type {
+import type { TenantPlanForm, TenantPlanItem } from "@/api/system/tenant-plan";
-    TenantPlanForm,
+import type { OptionItem } from "@/api/common";
-    TenantPlanItem,
+import { MenuScopeEnum } from "@/enums/business";
-  } from "@/api/system/tenant-plan";
-  import type { OptionItem } from "@/api/common";
-  import { MenuScopeEnum } from "@/enums/business";
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const dataFormRef = ref<FormInstance>();
+const dataFormRef = ref<FormInstance>();
-  const dataTableRef = ref();
+const dataTableRef = ref();
-  const menuTreeRef = ref();
+const menuTreeRef = ref();
 
-  // 列表数据
+// 列表数据
-  const menuPermOptions = ref<OptionItem[]>([]);
+const menuPermOptions = ref<OptionItem[]>([]);
-  const loading = ref(false);
+const loading = ref(false);
 
-  const tableData = reactive<PageResult<TenantPlanItem>>({
+const tableData = reactive<PageResult<TenantPlanItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-      keywords: "",
+    pageSize: 10,
-    },
+    keywords: "",
-  });
+  },
+});
 
-  // 弹窗状态
+// 弹窗状态
-  const dialogState = reactive({
+const dialogState = reactive({
-    title: "",
+  title: "",
-    visible: false,
+  visible: false,
-  });
+});
 
-  // 表单数据
+// 表单数据
-  const formData = reactive<TenantPlanForm>({
+const formData = reactive<TenantPlanForm>({
-    id: undefined,
+  id: undefined,
-    name: "",
+  name: "",
-    code: "",
+  code: "",
-    status: 1,
+  status: 1,
-    sort: 1,
+  sort: 1,
-    remark: "",
+  remark: "",
-  });
+});
 
-  // 验证规则
+// 验证规则
-  const rules: FormRules = {
+const rules: FormRules = {
-    name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
+  name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
-    code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
+  code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
-    status: [{ required: true, message: "请选择状态", trigger: "change" }],
+  status: [{ required: true, message: "请选择状态", trigger: "change" }],
-  };
+};
 
-  // 菜单配置弹窗状态
+// 菜单配置弹窗状态
-  const planMenuDialogVisible = ref(false);
+const planMenuDialogVisible = ref(false);
-  const checkedPlan = ref<{ id?: number; name?: string }>({});
+const checkedPlan = ref<{ id?: number; name?: string }>({});
-  const menuKeywords = ref("");
+const menuKeywords = ref("");
-  const menuExpanded = ref(true);
+const menuExpanded = ref(true);
-  const menuParentChildLinked = ref(true);
+const menuParentChildLinked = ref(true);
 
-  /**
+/**
-   * 加载租户套餐分页数据
+ * 加载租户套餐分页数据
-   */
+ */
-  function fetchData(): void {
+function fetchData(): void {
-    loading.value = true;
+  loading.value = true;
-    TenantPlanAPI.getPage(tableData.params)
+  TenantPlanAPI.getPage(tableData.params)
-      .then((data) => {
+    .then((data) => {
-        tableData.list = data.list ?? [];
+      tableData.list = data.list ?? [];
-        tableData.total = data.total ?? 0;
+      tableData.total = data.total ?? 0;
-      })
+    })
-      .finally(() => {
+    .finally(() => {
-        loading.value = false;
+      loading.value = false;
-      });
+    });
-  }
+}
 
-  /**
+/**
-   * 查询按钮点击事件
+ * 查询按钮点击事件
-   */
+ */
-  function handleQuery(): void {
+function handleQuery(): void {
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    fetchData();
+  fetchData();
-  }
+}
 
-  /**
+/**
-   * 重置查询
+ * 重置查询
-   */
+ */
-  function handleResetQuery(): void {
+function handleResetQuery(): void {
-    queryFormRef.value?.resetFields();
+  queryFormRef.value?.resetFields();
-    tableData.params.pageNum = 1;
+  tableData.params.pageNum = 1;
-    fetchData();
+  fetchData();
-  }
+}
 
-  /**
+/**
-   * 打开弹窗
+ * 打开弹窗
-   * @param planId 套餐ID（编辑时传入）
+ * @param planId 套餐ID（编辑时传入）
-   */
+ */
-  async function openDialog(planId?: number): Promise<void> {
+async function openDialog(planId?: number): Promise<void> {
-    dialogState.visible = true;
+  dialogState.visible = true;
-    if (planId) {
+  if (planId) {
-      dialogState.title = "修改套餐";
+    dialogState.title = "修改套餐";
-      const data = await TenantPlanAPI.getFormData(String(planId));
+    const data = await TenantPlanAPI.getFormData(String(planId));
-      Object.assign(formData, data);
+    Object.assign(formData, data);
-      if (formData.status == null) {
+    if (formData.status == null) {
-        formData.status = 1;
+      formData.status = 1;
-      }
-      if (formData.sort == null) {
-        formData.sort = 1;
-      }
-    } else {
-      dialogState.title = "新增套餐";
-      Object.assign(formData, {
-        id: undefined,
-        name: "",
-        code: "",
-        status: 1,
-        sort: 1,
-        remark: "",
-      });
     }
-  }
+    if (formData.sort == null) {
-
+      formData.sort = 1;
-  /**
+    }
-   * 关闭弹窗
+  } else {
-   */
+    dialogState.title = "新增套餐";
-  function closeDialog(): void {
-    dialogState.visible = false;
-    dataFormRef.value?.resetFields();
-    dataFormRef.value?.clearValidate();
     Object.assign(formData, {
       id: undefined,
       name: "",
@@ -284,146 +337,164 @@
       remark: "",
     });
   }
+}
 
-  /**
+/**
-   * 提交表单
+ * 关闭弹窗
-   */
+ */
-  const handleSubmit = useDebounceFn(async (): Promise<void> => {
+function closeDialog(): void {
-    const valid = await dataFormRef.value?.validate().then(
+  dialogState.visible = false;
-      () => true,
+  dataFormRef.value?.resetFields();
-      () => false
+  dataFormRef.value?.clearValidate();
-    );
+  Object.assign(formData, {
-    if (!valid) return;
+    id: undefined,
+    name: "",
+    code: "",
+    status: 1,
+    sort: 1,
+    remark: "",
+  });
+}
 
-    loading.value = true;
+/**
-    try {
+ * 提交表单
-      if (formData.id) {
+ */
-        await TenantPlanAPI.update(String(formData.id), formData);
+const handleSubmit = useDebounceFn(async (): Promise<void> => {
-        ElMessage.success("修改成功");
+  const valid = await dataFormRef.value?.validate().then(
-      } else {
+    () => true,
-        await TenantPlanAPI.create(formData);
+    () => false
-        ElMessage.success("新增成功");
+  );
-      }
+  if (!valid) return;
-      closeDialog();
+
-      handleResetQuery();
+  loading.value = true;
-    } finally {
+  try {
-      loading.value = false;
+    if (formData.id) {
+      await TenantPlanAPI.update(String(formData.id), formData);
+      ElMessage.success("修改成功");
+    } else {
+      await TenantPlanAPI.create(formData);
+      ElMessage.success("新增成功");
     }
-  }, 300);
+    closeDialog();
+    handleResetQuery();
+  } finally {
+    loading.value = false;
+  }
+}, 300);
 
-  /**
+/**
-   * 删除套餐
+ * 删除套餐
-   * @param planId 套餐ID
+ * @param planId 套餐ID
-   */
+ */
-  function handleDelete(planId?: number): void {
+function handleDelete(planId?: number): void {
-    if (!planId) return;
+  if (!planId) return;
-    ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
+  ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
-      confirmButtonText: "确定",
+    confirmButtonText: "确定",
-      cancelButtonText: "取消",
+    cancelButtonText: "取消",
-      type: "warning",
+    type: "warning",
-    }).then(() => {
+  }).then(() => {
-      loading.value = true;
+    loading.value = true;
-      TenantPlanAPI.deleteByIds(String(planId))
+    TenantPlanAPI.deleteByIds(String(planId))
-        .then(() => {
+      .then(() => {
-          ElMessage.success("删除成功");
+        ElMessage.success("删除成功");
-          handleResetQuery();
+        handleResetQuery();
-        })
+      })
-        .finally(() => {
+      .finally(() => {
-          loading.value = false;
+        loading.value = false;
-        });
+      });
+  });
+}
+
+/**
+ * 打开菜单配置弹窗
+ */
+async function openPlanMenuDialog(row: TenantPlanItem): Promise<void> {
+  if (!row.id) return;
+  planMenuDialogVisible.value = true;
+  loading.value = true;
+  checkedPlan.value = { id: row.id, name: row.name };
+
+  try {
+    const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
+    menuPermOptions.value = menuOptions;
+    const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
+    await nextTick();
+    menuTreeRef.value?.setCheckedKeys([], false);
+    menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 关闭菜单配置弹窗
+ */
+function closePlanMenuDialog(): void {
+  planMenuDialogVisible.value = false;
+  menuKeywords.value = "";
+  menuExpanded.value = true;
+  menuParentChildLinked.value = true;
+  menuTreeRef.value?.setCheckedKeys([], false);
+}
+
+/**
+ * 展开/收缩菜单树
+ */
+function toggleMenuTree(): void {
+  menuExpanded.value = !menuExpanded.value;
+  if (menuTreeRef.value) {
+    Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (menuExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
     });
   }
+}
 
-  /**
+/**
-   * 打开菜单配置弹窗
+ * 切换父子联动
-   */
+ */
-  async function openPlanMenuDialog(row: TenantPlanItem): Promise<void> {
+function handleMenuLinkChange(val: string | number | boolean): void {
-    if (!row.id) return;
+  menuParentChildLinked.value = Boolean(val);
-    planMenuDialogVisible.value = true;
+}
-    loading.value = true;
-    checkedPlan.value = { id: row.id, name: row.name };
 
-    try {
+/**
-      const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
+ * 菜单树过滤逻辑
-      menuPermOptions.value = menuOptions;
+ */
-      const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
+function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
-      await nextTick();
+  if (!value) return true;
-      menuTreeRef.value?.setCheckedKeys([], false);
+  return data.label.includes(value);
-      menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
+}
-    } finally {
-      loading.value = false;
-    }
-  }
 
-  /**
+/**
-   * 关闭菜单配置弹窗
+ * 提交菜单配置
-   */
+ */
-  function closePlanMenuDialog(): void {
+async function handlePlanMenuSubmit(): Promise<void> {
+  const planId = checkedPlan.value.id;
+  if (!planId) return;
+
+  const checkedMenuIds: number[] = menuTreeRef
+    .value!.getCheckedNodes(false, true)
+    .map((node: any) => node.value);
+
+  loading.value = true;
+  try {
+    await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
+    ElMessage.success("菜单配置成功");
     planMenuDialogVisible.value = false;
-    menuKeywords.value = "";
+  } finally {
-    menuExpanded.value = true;
+    loading.value = false;
-    menuParentChildLinked.value = true;
-    menuTreeRef.value?.setCheckedKeys([], false);
   }
+}
 
-  /**
+// 菜单树关键字过滤
-   * 展开/收缩菜单树
+watch(menuKeywords, (val) => {
-   */
+  menuTreeRef.value?.filter(val);
-  function toggleMenuTree(): void {
+});
-    menuExpanded.value = !menuExpanded.value;
-    if (menuTreeRef.value) {
-      Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
-        if (menuExpanded.value) {
-          node.expand();
-        } else {
-          node.collapse();
-        }
-      });
-    }
-  }
 
-  /**
+onMounted(() => {
-   * 切换父子联动
+  fetchData();
-   */
+});
-  function handleMenuLinkChange(val: string | number | boolean): void {
-    menuParentChildLinked.value = Boolean(val);
-  }
-
-  /**
-   * 菜单树过滤逻辑
-   */
-  function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
-    if (!value) return true;
-    return data.label.includes(value);
-  }
-
-  /**
-   * 提交菜单配置
-   */
-  async function handlePlanMenuSubmit(): Promise<void> {
-    const planId = checkedPlan.value.id;
-    if (!planId) return;
-
-    const checkedMenuIds: number[] = menuTreeRef
-      .value!.getCheckedNodes(false, true)
-      .map((node: any) => node.value);
-
-    loading.value = true;
-    try {
-      await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
-      ElMessage.success("菜单配置成功");
-      planMenuDialogVisible.value = false;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  // 菜单树关键字过滤
-  watch(menuKeywords, (val) => {
-    menuTreeRef.value?.filter(val);
-  });
-
-  onMounted(() => {
-    fetchData();
-  });
 </script>

src/views/system/user/index.vue

@@ -13,19 +13,36 @@
         <el-card shadow="never" class="page-search">
           <el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
             <el-form-item label="关键字" prop="keywords">
-              <el-input v-model="tableData.params.keywords" placeholder="用户名/昵称/手机号" clearable @keyup.enter="handleQuery" />
+              <el-input
+                v-model="tableData.params.keywords"
+                placeholder="用户名/昵称/手机号"
+                clearable
+                @keyup.enter="handleQuery"
+              />
             </el-form-item>
 
             <el-form-item label="状态" prop="status">
-              <el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 100px">
+              <el-select
+                v-model="tableData.params.status"
+                placeholder="全部"
+                clearable
+                style="width: 100px"
+              >
                 <el-option label="正常" :value="1" />
                 <el-option label="禁用" :value="0" />
               </el-select>
             </el-form-item>
 
             <el-form-item label="创建时间">
-              <el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~"
+              <el-date-picker
-                start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD" />
+                v-model="tableData.params.createTime"
+                :editable="false"
+                type="daterange"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="截止时间"
+                value-format="YYYY-MM-DD"
+              />
             </el-form-item>
 
             <el-form-item>
@@ -38,10 +55,21 @@
         <el-card shadow="never" class="page-content">
           <div class="page-toolbar">
             <div class="page-toolbar__left">
-              <el-button v-hasPerm="['sys:user:create']" type="success" icon="plus" @click="handleCreateClick">
+              <el-button
+                v-hasPerm="['sys:user:create']"
+                type="success"
+                icon="plus"
+                @click="handleCreateClick"
+              >
                 新增
               </el-button>
-              <el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" :disabled="!hasSelection" @click="handleDelete()">
+              <el-button
+                v-hasPerm="'sys:user:delete'"
+                type="danger"
+                icon="delete"
+                :disabled="!hasSelection"
+                @click="handleDelete()"
+              >
                 删除
               </el-button>
             </div>
@@ -56,8 +84,15 @@
             </div>
           </div>
 
-          <el-table v-loading="loading" :data="tableData.list" border stripe highlight-current-row row-key="id"
+          <el-table
-            @selection-change="handleSelectionChange">
+            v-loading="loading"
+            :data="tableData.list"
+            border
+            stripe
+            highlight-current-row
+            row-key="id"
+            @selection-change="handleSelectionChange"
+          >
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="用户名" prop="username" min-width="120" show-overflow-tooltip />
             <el-table-column label="昵称" width="200" align="center" prop="nickname" />
@@ -80,31 +115,66 @@
             <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
-                <el-button v-hasPerm="'sys:user:reset-password'" type="primary" icon="RefreshLeft" size="small" link
+                <el-button
-                  @click="handleResetPassword(scope.row)">
+                  v-hasPerm="'sys:user:reset-password'"
+                  type="primary"
+                  icon="RefreshLeft"
+                  size="small"
+                  link
+                  @click="handleResetPassword(scope.row)"
+                >
                   重置密码
                 </el-button>
-                <el-button v-hasPerm="'sys:user:update'" type="primary" icon="edit" link size="small" @click="handleEditClick(scope.row.id)">
+                <el-button
+                  v-hasPerm="'sys:user:update'"
+                  type="primary"
+                  icon="edit"
+                  link
+                  size="small"
+                  @click="handleEditClick(scope.row.id)"
+                >
                   编辑
                 </el-button>
-                <el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" link size="small" @click="handleDelete(scope.row.id)">
+                <el-button
+                  v-hasPerm="'sys:user:delete'"
+                  type="danger"
+                  icon="delete"
+                  link
+                  size="small"
+                  @click="handleDelete(scope.row.id)"
+                >
                   删除
                 </el-button>
               </template>
             </el-table-column>
           </el-table>
 
-          <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+          <pagination
-            v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
+            v-if="tableData.total > 0"
+            v-model:total="tableData.total"
+            v-model:page="tableData.params.pageNum"
+            v-model:limit="tableData.params.pageSize"
+            @pagination="fetchList"
+          />
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 用户表单 -->
-    <el-drawer v-model="dialogState.visible" :title="dialogState.title" append-to-body :size="drawerSize" @close="closeDialog">
+    <el-drawer
+      v-model="dialogState.visible"
+      :title="dialogState.title"
+      append-to-body
+      :size="drawerSize"
+      @close="closeDialog"
+    >
       <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="用户名" prop="username">
-          <el-input v-model="formData.username" :readonly="!!formData.id" placeholder="请输入用户名" />
+          <el-input
+            v-model="formData.username"
+            :readonly="!!formData.id"
+            placeholder="请输入用户名"
+          />
         </el-form-item>
 
         <el-form-item label="用户昵称" prop="nickname">
@@ -112,8 +182,14 @@
         </el-form-item>
 
         <el-form-item label="所属部门" prop="deptId">
-          <el-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptOptions" filterable check-strictly
+          <el-tree-select
-            :render-after-expand="false" />
+            v-model="formData.deptId"
+            placeholder="请选择所属部门"
+            :data="deptOptions"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
         </el-form-item>
 
         <el-form-item label="性别" prop="gender">
@@ -122,7 +198,12 @@
 
         <el-form-item label="角色" prop="roleIds">
           <el-select v-model="formData.roleIds" multiple placeholder="请选择">
-            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
 
@@ -135,8 +216,14 @@
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
-          <el-switch v-model="formData.status" inline-prompt active-text="正常" inactive-text="禁用" :active-value="CommonStatus.ENABLED"
+          <el-switch
-            :inactive-value="CommonStatus.DISABLED" />
+            v-model="formData.status"
+            inline-prompt
+            active-text="正常"
+            inactive-text="禁用"
+            :active-value="CommonStatus.ENABLED"
+            :inactive-value="CommonStatus.DISABLED"
+          />
         </el-form-item>
       </el-form>
 
@@ -154,290 +241,291 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
-  import { useDebounceFn } from "@vueuse/core";
+import { useDebounceFn } from "@vueuse/core";
-  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-  import type { UserForm, UserItem } from "@/api/system/user";
+import type { UserForm, UserItem } from "@/api/system/user";
-  import { downloadFile } from "@/utils";
+import { downloadFile } from "@/utils";
-  import UserAPI from "@/api/system/user";
+import UserAPI from "@/api/system/user";
-  import DeptAPI from "@/api/system/dept";
+import DeptAPI from "@/api/system/dept";
-  import RoleAPI from "@/api/system/role";
+import RoleAPI from "@/api/system/role";
-  import { useUserStore, useAppStore } from "@/stores";
+import { useUserStore, useAppStore } from "@/stores";
-  import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
+import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
-  import { useTableSelection } from "@/composables";
+import { useTableSelection } from "@/composables";
-  import UserDeptTree from "./components/UserDeptTree.vue";
+import UserDeptTree from "./components/UserDeptTree.vue";
-  import UserImportDialog from "./components/UserImportDialog.vue";
+import UserImportDialog from "./components/UserImportDialog.vue";
 
-  defineOptions({
+defineOptions({
-    name: "User",
+  name: "User",
-    inheritAttrs: false,
+  inheritAttrs: false,
-  });
+});
 
-  const appStore = useAppStore();
+const appStore = useAppStore();
-  const userStore = useUserStore();
+const userStore = useUserStore();
 
-  // 表单引用
+// 表单引用
-  const queryFormRef = ref<FormInstance>();
+const queryFormRef = ref<FormInstance>();
-  const userFormRef = ref<FormInstance>();
+const userFormRef = ref<FormInstance>();
 
-  const loading = ref(false);
+const loading = ref(false);
 
-  const tableData = reactive<PageResult<UserItem>>({
+const tableData = reactive<PageResult<UserItem>>({
-    list: [],
+  list: [],
-    total: 0,
+  total: 0,
-    params: { //查询参数
+  params: {
-      pageNum: 1,
+    //查询参数
-      pageSize: 10,
+    pageNum: 1,
-    },
+    pageSize: 10,
-  });
+  },
+});
 
-  // 弹窗状态
+// 弹窗状态
-  const dialogState = reactive({
+const dialogState = reactive({
-    visible: false,
+  visible: false,
-    title: "新增用户",
+  title: "新增用户",
-    mode: DialogMode.CREATE,
+  mode: DialogMode.CREATE,
-  });
+});
 
-  // 导入弹窗状态
+// 导入弹窗状态
-  const importDialogVisible = ref(false);
+const importDialogVisible = ref(false);
 
-  // 表单初始数据
+// 表单初始数据
-  const initialFormData: UserForm = {
+const initialFormData: UserForm = {
-    status: CommonStatus.ENABLED,
+  status: CommonStatus.ENABLED,
-  };
+};
 
-  // 表单数据
+// 表单数据
-  const formData = reactive<UserForm>({ ...initialFormData });
+const formData = reactive<UserForm>({ ...initialFormData });
 
-  // 下拉选项
+// 下拉选项
-  const deptOptions = ref<OptionItem[]>();
+const deptOptions = ref<OptionItem[]>();
-  const roleOptions = ref<OptionItem[]>();
+const roleOptions = ref<OptionItem[]>();
 
-  const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
-  const rules: FormRules = {
+const rules: FormRules = {
-    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-    nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
+  nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
-    deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
+  deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
-    roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
+  roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
+  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
-    mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+  mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
-  };
+};
 
-  /**
+/**
-   * 加载用户列表数据
+ * 加载用户列表数据
-   */
+ */
-  async function fetchList(): Promise<void> {
+async function fetchList(): Promise<void> {
-    loading.value = true;
+  loading.value = true;
-    try {
+  try {
-      const data = await UserAPI.getPage(tableData.params);
+    const data = await UserAPI.getPage(tableData.params);
-      tableData.list = data.list ?? [];
+    tableData.list = data.list ?? [];
-      tableData.total = data.total ?? 0;
+    tableData.total = data.total ?? 0;
-    } finally {
+  } finally {
-      loading.value = false;
+    loading.value = false;
+  }
+}
+
+/**
+ * 加载表单下拉选项数据
+ */
+async function loadFormOptions(): Promise<void> {
+  [roleOptions.value, deptOptions.value] = await Promise.all([
+    RoleAPI.getOptions(),
+    DeptAPI.getOptions(),
+  ]);
+}
+
+const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
+
+/**
+ * 执行查询（重置页码）
+ */
+function handleQuery(): void {
+  tableData.params.pageNum = 1;
+  fetchList();
+}
+
+/**
+ * 重置查询条件
+ */
+function resetQuery(): void {
+  queryFormRef.value?.resetFields();
+  tableData.params.deptId = undefined;
+  tableData.params.createTime = undefined;
+}
+
+/**
+ * 重置查询条件并重新查询
+ */
+function handleResetQuery(): void {
+  resetQuery();
+  handleQuery();
+}
+
+/**
+ * 重置用户密码
+ * @param userId 用户ID
+ * @param password 新密码
+ */
+async function resetPassword(userId: string, password: string): Promise<void> {
+  await UserAPI.resetPassword(userId, password);
+  ElMessage.success("密码重置成功");
+}
+
+/**
+ * 删除用户
+ * @param userIds 用户ID列表，多个ID用逗号分隔
+ */
+async function deleteUsers(userIds: string): Promise<void> {
+  await UserAPI.deleteByIds(userIds);
+  ElMessage.success("删除成功");
+  handleQuery();
+}
+
+/**
+ * 打开表单弹窗
+ */
+function openDialog(): void {
+  dialogState.visible = true;
+}
+
+/**
+ * 关闭表单弹窗
+ */
+function closeDialog(): void {
+  dialogState.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单数据和验证状态
+ */
+function resetForm(): void {
+  userFormRef.value?.resetFields();
+  userFormRef.value?.clearValidate();
+  Object.assign(formData, initialFormData);
+}
+
+/**
+ * 重置密码按钮点击事件
+ * @param row 用户数据
+ */
+function handleResetPassword(row: UserItem): void {
+  ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    inputPattern: /.{6,}/,
+    inputErrorMessage: "密码至少需要6位字符",
+  }).then(
+    (result: any) => resetPassword(row.id, result.value),
+    () => {
+      /* 用户取消 */
     }
-  }
+  );
+}
 
-  /**
+/**
-   * 加载表单下拉选项数据
+ * 新增按钮点击事件
-   */
+ */
-  async function loadFormOptions(): Promise<void> {
+async function handleCreateClick(): Promise<void> {
-    [roleOptions.value, deptOptions.value] = await Promise.all([
+  dialogState.title = "新增用户";
-      RoleAPI.getOptions(),
+  dialogState.mode = DialogMode.CREATE;
-      DeptAPI.getOptions(),
+  await loadFormOptions();
-    ]);
+  openDialog();
-  }
+}
 
-  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
+/**
+ * 编辑按钮点击事件
+ * @param id 用户ID
+ */
+async function handleEditClick(id: string): Promise<void> {
+  dialogState.title = "修改用户";
+  dialogState.mode = DialogMode.EDIT;
+  await loadFormOptions();
+  const data = await UserAPI.getFormData(id);
+  Object.assign(formData, data);
+  openDialog();
+}
 
-  /**
+/**
-   * 执行查询（重置页码）
+ * 提交表单（防抖处理）
-   */
+ */
-  function handleQuery(): void {
+const handleSubmit = useDebounceFn(async () => {
-    tableData.params.pageNum = 1;
+  const valid = await userFormRef.value?.validate().then(
-    fetchList();
+    () => true,
-  }
+    () => false
+  );
+  if (!valid) return;
 
-  /**
+  loading.value = true;
-   * 重置查询条件
+  try {
-   */
+    if (formData.id) {
-  function resetQuery(): void {
+      await UserAPI.update(formData.id, formData);
-    queryFormRef.value?.resetFields();
+      ElMessage.success("修改用户成功");
-    tableData.params.deptId = undefined;
+    } else {
-    tableData.params.createTime = undefined;
+      await UserAPI.create(formData);
-  }
+      ElMessage.success("新增用户成功");
-
-  /**
-   * 重置查询条件并重新查询
-   */
-  function handleResetQuery(): void {
-    resetQuery();
-    handleQuery();
-  }
-
-  /**
-   * 重置用户密码
-   * @param userId 用户ID
-   * @param password 新密码
-   */
-  async function resetPassword(userId: string, password: string): Promise<void> {
-    await UserAPI.resetPassword(userId, password);
-    ElMessage.success("密码重置成功");
-  }
-
-  /**
-   * 删除用户
-   * @param userIds 用户ID列表，多个ID用逗号分隔
-   */
-  async function deleteUsers(userIds: string): Promise<void> {
-    await UserAPI.deleteByIds(userIds);
-    ElMessage.success("删除成功");
-    handleQuery();
-  }
-
-  /**
-   * 打开表单弹窗
-   */
-  function openDialog(): void {
-    dialogState.visible = true;
-  }
-
-  /**
-   * 关闭表单弹窗
-   */
-  function closeDialog(): void {
-    dialogState.visible = false;
-    resetForm();
-  }
-
-  /**
-   * 重置表单数据和验证状态
-   */
-  function resetForm(): void {
-    userFormRef.value?.resetFields();
-    userFormRef.value?.clearValidate();
-    Object.assign(formData, initialFormData);
-  }
-
-  /**
-   * 重置密码按钮点击事件
-   * @param row 用户数据
-   */
-  function handleResetPassword(row: UserItem): void {
-    ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      inputPattern: /.{6,}/,
-      inputErrorMessage: "密码至少需要6位字符",
-    }).then(
-      (result: any) => resetPassword(row.id, result.value),
-      () => {
-        /* 用户取消 */
-      }
-    );
-  }
-
-  /**
-   * 新增按钮点击事件
-   */
-  async function handleCreateClick(): Promise<void> {
-    dialogState.title = "新增用户";
-    dialogState.mode = DialogMode.CREATE;
-    await loadFormOptions();
-    openDialog();
-  }
-
-  /**
-   * 编辑按钮点击事件
-   * @param id 用户ID
-   */
-  async function handleEditClick(id: string): Promise<void> {
-    dialogState.title = "修改用户";
-    dialogState.mode = DialogMode.EDIT;
-    await loadFormOptions();
-    const data = await UserAPI.getFormData(id);
-    Object.assign(formData, data);
-    openDialog();
-  }
-
-  /**
-   * 提交表单（防抖处理）
-   */
-  const handleSubmit = useDebounceFn(async () => {
-    const valid = await userFormRef.value?.validate().then(
-      () => true,
-      () => false
-    );
-    if (!valid) return;
-
-    loading.value = true;
-    try {
-      if (formData.id) {
-        await UserAPI.update(formData.id, formData);
-        ElMessage.success("修改用户成功");
-      } else {
-        await UserAPI.create(formData);
-        ElMessage.success("新增用户成功");
-      }
-      closeDialog();
-      handleQuery();
-    } finally {
-      loading.value = false;
     }
-  }, 300);
+    closeDialog();
+    handleQuery();
+  } finally {
+    loading.value = false;
+  }
+}, 300);
 
-  /**
+/**
-   * 删除按钮点击事件
+ * 删除按钮点击事件
-   * @param id 用户ID，不传则删除选中的用户
+ * @param id 用户ID，不传则删除选中的用户
-   */
+ */
-  function handleDelete(id?: string): void {
+function handleDelete(id?: string): void {
-    const userIds = id ?? selectedIds.value.join(",");
+  const userIds = id ?? selectedIds.value.join(",");
-    if (!userIds) {
+  if (!userIds) {
-      ElMessage.warning("请勾选删除项");
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  // 安全检查：防止删除当前登录用户
+  const currentUserId = userStore.userInfo?.userId;
+  if (currentUserId) {
+    const isCurrentUserInList = id
+      ? id === currentUserId
+      : selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
+    if (isCurrentUserInList) {
+      ElMessage.error("不能删除当前登录用户");
       return;
     }
+  }
 
-    // 安全检查：防止删除当前登录用户
+  ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
-    const currentUserId = userStore.userInfo?.userId;
+    confirmButtonText: "确定",
-    if (currentUserId) {
+    cancelButtonText: "取消",
-      const isCurrentUserInList = id
+    type: "warning",
-        ? id === currentUserId
+  }).then(
-        : selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
+    () => deleteUsers(userIds),
-      if (isCurrentUserInList) {
+    () => {
-        ElMessage.error("不能删除当前登录用户");
+      /* 用户取消 */
-        return;
-      }
     }
+  );
+}
 
-    ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
+/**
-      confirmButtonText: "确定",
+ * 导出用户列表
-      cancelButtonText: "取消",
+ */
-      type: "warning",
+async function exportUsers(): Promise<void> {
-    }).then(
+  const response = await UserAPI.export(tableData.params);
-      () => deleteUsers(userIds),
+  downloadFile(response);
-      () => {
+  ElMessage.success("导出成功");
-        /* 用户取消 */
+}
-      }
-    );
-  }
 
-  /**
+/**
-   * 导出用户列表
+ * 打开导入弹窗
-   */
+ */
-  async function exportUsers(): Promise<void> {
+function openImportDialog(): void {
-    const response = await UserAPI.export(tableData.params);
+  importDialogVisible.value = true;
-    downloadFile(response);
+}
-    ElMessage.success("导出成功");
-  }
 
-  /**
+onMounted(() => {
-   * 打开导入弹窗
+  handleQuery();
-   */
+});
-  function openImportDialog(): void {
-    importDialogVisible.value = true;
-  }
-
-  onMounted(() => {
-    handleQuery();
-  });
 </script>