Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

.prettierrc

@@ -0,0 +1,28 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "ignore",
+  "insertPragma": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html"
+      }
+    }
+  ]
+}

.prettierrc.cjs

@@ -1,46 +0,0 @@
-module.exports = {
-  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
-  arrowParens: "always",
-  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
-  bracketSameLine: false,
-  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
-  bracketSpacing: true,
-  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
-  embeddedLanguageFormatting: "auto",
-  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
-  htmlWhitespaceSensitivity: "ignore",
-  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
-  insertPragma: false,
-  // 在 JSX 中使用单引号替代双引号，默认false
-  jsxSingleQuote: false,
-  // 每行最多字符数量，超出换行(默认80)
-  printWidth: 80,
-  // 超出打印宽度 (always | never | preserve )
-  proseWrap: "preserve",
-  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
-  quoteProps: "as-needed",
-  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
-  requirePragma: false,
-  // 结尾添加分号
-  semi: true,
-  // 使用单引号 (true:单引号;false:双引号)
-  singleQuote: false,
-  // 缩进空格数，默认2个空格
-  tabWidth: 2,
-  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
-  trailingComma: "es5",
-  // 指定缩进方式，空格或tab，默认false，即使用空格
-  useTabs: false,
-  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
-  vueIndentScriptAndStyle: false,
-
-  endOfLine: "auto",
-  overrides: [
-    {
-      files: "*.html",
-      options: {
-        parser: "html",
-      },
-    },
-  ],
-};

src/api/system/user.ts

@@ -248,6 +248,8 @@ export interface UserPageQuery extends PageQuery {
 
 /** 用户分页对象 */
 export interface UserPageVO {
+  /** 用户ID */
+  id: number;
   /** 用户头像URL */
   avatar?: string;
   /** 创建时间 */
@@ -258,8 +260,6 @@ export interface UserPageVO {
   email?: string;
   /** 性别 */
   gender?: number;
-  /** 用户ID */
-  id?: number;
   /** 手机号 */
   mobile?: string;
   /** 用户昵称 */

src/layout/components/Settings/index.vue

@@ -1,68 +1,55 @@
 <template>
-  <el-drawer
+  <el-drawer v-model="settingsVisible" size="300" :title="$t('settings.project')">
-    v-model="settingsVisible"
-    size="300"
-    :title="$t('settings.project')"
-  >
     <el-divider>{{ $t("settings.theme") }}</el-divider>
 
     <div class="flex-center">
-      <el-switch
+      <el-switch v-model="isDark" active-icon="Moon" inactive-icon="Sunny" @change="changeTheme" />
-        v-model="isDark"
-        active-icon="Moon"
-        inactive-icon="Sunny"
-        @change="changeTheme"
-      />
     </div>
 
     <el-divider>{{ $t("settings.interface") }}</el-divider>
 
-    <div class="setting-item">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.themeColor") }}</span>
-      <ThemeColorPicker
+      <ThemeColorPicker v-model="settingsStore.themeColor" @update:model-value="changeThemeColor" />
-        v-model="settingsStore.themeColor"
-        @update:model-value="changeThemeColor"
-      />
     </div>
 
-    <div class="setting-item">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.tagsView") }}</span>
       <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="setting-item">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.fixedHeader") }}</span>
       <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="setting-item">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.sidebarLogo") }}</span>
       <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
-    <div class="setting-item">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.watermark") }}</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
 
     <el-divider>{{ $t("settings.navigation") }}</el-divider>
 
-    <LayoutSelect
+    <LayoutSelect v-model="settingsStore.layout" @update:model-value="changeLayout" />
-      v-model="settingsStore.layout"
-      @update:model-value="changeLayout"
-    />
   </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
 
+import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
+
 const route = useRoute();
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
+const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
 
 const settingsVisible = computed({
   get() {
@@ -73,19 +60,30 @@ const settingsVisible = computed({
   },
 });
 
-/** 切换主题颜色 */
+/**
+ *  切换主题颜色
+ *
+ * @param color 颜色
+ */
 function changeThemeColor(color: string) {
   settingsStore.changeThemeColor(color);
 }
 
-/** 切换主题 */
+/**
-const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
+ * 切换主题
+ *
+ * @param val 是否为暗黑模式
+ */
 const changeTheme = (val: any) => {
   isDark.value = val;
   settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
 };
 
-/** 切换布局 */
+/**
+ * 切换布局
+ *
+ * @param layout 布局  LayoutEnum
+ */
 function changeLayout(layout: string) {
   settingsStore.changeLayout(layout);
   if (layout === LayoutEnum.MIX) {
@@ -93,15 +91,24 @@ function changeLayout(layout: string) {
   }
 }
 
-/** 重新激活顶部菜单 */
+/**
-function againActiveTop(newVal: string) {
+ * 重新激活顶部菜单
-  const parent = findOutermostParent(permissionStore.routes, newVal);
+ *
+ * @param routeName 路由名称
+ */
+function againActiveTop(routeName: string) {
+  const parent = findOutermostParent(permissionStore.routes, routeName);
   if (appStore.activeTopMenuPath !== parent.path) {
     appStore.activeTopMenu(parent.path);
   }
 }
 
-/** 递归查找最外层父节点 */
+/**
+ * 查找最外层父级
+ *
+ * @param tree 树形数据
+ * @param findName 查找的名称
+ */
 function findOutermostParent(tree: any[], findName: string) {
   let parentMap: any = {};
 
@@ -131,8 +138,4 @@ function findOutermostParent(tree: any[], findName: string) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.setting-item {
-  @apply py-1 flex-x-between;
-}
-</style>

src/views/system/user/components/UserImport.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    v-model="dialogVisible"
+    v-model="visible"
     :align-center="true"
     title="导入数据"
     width="600px"
@@ -52,7 +52,7 @@
         <el-button
           type="primary"
           :disabled="importFormData.files.length === 0"
-          @click="handleSubmit"
+          @click="handleUpload"
         >
           确 定
         </el-button>
@@ -63,24 +63,14 @@
 </template>
 
 <script lang="ts" setup>
-import { type UploadUserFile } from "element-plus";
+import { ElMessage, type UploadUserFile } from "element-plus";
-
 import UserAPI from "@/api/system/user";
 
-const props = defineProps({
+const emit = defineEmits(["import-success"]);
-  visible: {
+const visible = defineModel("modelValue", {
   type: Boolean,
+  required: true,
   default: false,
-  },
-});
-
-const emit = defineEmits(["update:visible", "import-success"]);
-
-const dialogVisible = computed({
-  get: () => props.visible,
-  set: (val) => {
-    emit("update:visible", val);
-  },
 });
 
 const importFormRef = ref(null);
@@ -96,41 +86,16 @@ const importFormRules = {
   files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
 };
 
-const emptyFileList = () => {
+// 文件超出个数限制
-  importFormData.files.length = 0;
-};
-
-const handleClose = () => {
-  emptyFileList();
-  dialogVisible.value = false;
-};
-
-const handleSubmit = async () => {
-  if (!importFormData.files.length) {
-    ElMessage.warning("请选择文件");
-    return;
-  }
-
-  try {
-    await UserAPI.import(1, importFormData.files[0].raw as File);
-    ElMessage.success("上传成功");
-    emit("import-success");
-    handleClose();
-  } catch (error) {
-    ElMessage.error("上传失败");
-  }
-};
-
 const handleFileExceed = () => {
   ElMessage.warning("只能上传一个文件");
 };
 
+// 下载导入模板
 const handleDownloadTemplate = () => {
   UserAPI.downloadTemplate().then((response: any) => {
     const fileData = response.data;
-    const fileName = decodeURI(
+    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      response.headers["content-disposition"].split(";")[1].split("=")[1]
-    );
     const fileType =
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 
@@ -148,4 +113,27 @@ const handleDownloadTemplate = () => {
     window.URL.revokeObjectURL(downloadUrl);
   });
 };
+
+// 上传文件
+const handleUpload = async () => {
+  if (!importFormData.files.length) {
+    ElMessage.warning("请选择文件");
+    return;
+  }
+
+  try {
+    await UserAPI.import(1, importFormData.files[0].raw as File);
+    ElMessage.success("上传成功");
+    emit("import-success");
+    handleClose();
+  } catch (error) {
+    ElMessage.error("上传失败");
+  }
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  importFormData.files.length = 0;
+  visible.value = false;
+};
 </script>

src/views/system/user/index.vue

@@ -47,14 +47,8 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" @click="handleQuery">
+              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-                <template #icon><Search /></template>
+              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-                搜索
-              </el-button>
-              <el-button @click="handleResetQuery">
-                <template #icon><Refresh /></template>
-                重置
-              </el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -65,18 +59,18 @@
               <el-button
                 v-hasPerm="['sys:user:add']"
                 type="success"
+                icon="plus"
                 @click="handleOpenDialog()"
               >
-                <template #icon><Plus /></template>
                 新增
               </el-button>
               <el-button
                 v-hasPerm="['sys:user:delete']"
                 type="danger"
-                :disabled="removeIds.length === 0"
+                icon="delete"
+                :disabled="selectIds.length === 0"
                 @click="handleDelete()"
               >
-                <template #icon><Delete /></template>
                 删除
               </el-button>
             </div>
@@ -101,88 +95,56 @@
             </div>
           </div>
 
-          <el-table
+          <el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
-            v-loading="loading"
-            :data="pageData"
-            @selection-change="handleSelectionChange"
-          >
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="编号" align="center" prop="id" width="60" />
             <el-table-column label="用户名" align="center" prop="username" />
-            <el-table-column
+            <el-table-column label="昵称" width="100" align="center" prop="nickname" />
-              label="昵称"
-              width="100"
-              align="center"
-              prop="nickname"
-            />
-
             <el-table-column label="性别" width="100" align="center">
               <template #default="scope">
                 <DictLabel v-model="scope.row.gender" code="gender" />
               </template>
             </el-table-column>
-
+            <el-table-column label="部门" width="120" align="center" prop="deptName" />
-            <el-table-column
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
-              label="部门"
+            <el-table-column label="状态" align="center" prop="status" width="80">
-              width="120"
-              align="center"
-              prop="deptName"
-            />
-            <el-table-column
-              label="手机号码"
-              align="center"
-              prop="mobile"
-              width="120"
-            />
-
-            <el-table-column
-              label="状态"
-              align="center"
-              prop="status"
-              width="80"
-            >
               <template #default="scope">
                 <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                   {{ scope.row.status == 1 ? "正常" : "禁用" }}
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column label="创建时间" align="center" prop="createTime" width="120" />
-              label="创建时间"
-              align="center"
-              prop="createTime"
-              width="120"
-            />
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
                 <el-button
                   v-hasPerm="['sys:user:password:reset']"
                   type="primary"
+                  icon="RefreshLeft"
                   size="small"
                   link
                   @click="hancleResetPassword(scope.row)"
                 >
-                  <template #icon><RefreshLeft /></template>
                   重置密码
                 </el-button>
                 <el-button
                   v-hasPerm="['sys:user:edit']"
                   type="primary"
+                  icon="edit"
                   link
                   size="small"
                   @click="handleOpenDialog(scope.row.id)"
                 >
-                  <template #icon><Edit /></template>
                   编辑
                 </el-button>
                 <el-button
                   v-hasPerm="['sys:user:delete']"
                   type="danger"
+                  icon="delete"
                   link
                   size="small"
                   @click="handleDelete(scope.row.id)"
                 >
-                  <template #icon><Delete /></template>
                   删除
                 </el-button>
               </template>
@@ -207,12 +169,7 @@
       append-to-body
       @close="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
-        ref="userFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
         <el-form-item label="用户名" prop="username">
           <el-input
             v-model="formData.username"
@@ -252,19 +209,11 @@
         </el-form-item>
 
         <el-form-item label="手机号码" prop="mobile">
-          <el-input
+          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
-            v-model="formData.mobile"
-            placeholder="请输入手机号码"
-            maxlength="11"
-          />
         </el-form-item>
 
         <el-form-item label="邮箱" prop="email">
-          <el-input
+          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
-            v-model="formData.email"
-            placeholder="请输入邮箱"
-            maxlength="50"
-          />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
@@ -287,25 +236,13 @@
       </template>
     </el-drawer>
 
-    <!-- 用户导入弹窗 -->
+    <!-- 用户导入 -->
-    <UserImport
+    <UserImport v-model="importDialogVisible" @import-success="handleQuery()" />
-      v-model:visible="importDialogVisible"
-      @import-success="handleUserImportSuccess()"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({
+import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user";
-  name: "User",
-  inheritAttrs: false,
-});
-
-import UserAPI, {
-  UserForm,
-  UserPageQuery,
-  UserPageVO,
-} from "@/api/system/user";
 
 import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
@@ -313,38 +250,32 @@ import RoleAPI from "@/api/system/role";
 import DeptTree from "./components/DeptTree.vue";
 import UserImport from "./components/UserImport.vue";
 
+defineOptions({
+  name: "User",
+  inheritAttrs: false,
+});
+
 const queryFormRef = ref(ElForm);
 const userFormRef = ref(ElForm);
 
-const loading = ref(false);
-const removeIds = ref([]);
-const total = ref(0);
-const pageData = ref<UserPageVO[]>();
-// 部门下拉数据源
-const deptOptions = ref<OptionType[]>();
-// 角色下拉数据源
-const roleOptions = ref<OptionType[]>();
-// 用户查询参数
 const queryParams = reactive<UserPageQuery>({
   pageNum: 1,
   pageSize: 10,
 });
 
-// 用户弹窗
+const pageData = ref<UserPageVO[]>();
+const total = ref(0);
+const loading = ref(false);
+
 const dialog = reactive({
   visible: false,
-  title: "",
+  title: "新增用户",
 });
 
-// 导入弹窗显示状态
-const importDialogVisible = ref(false);
-
-// 用户表单数据
 const formData = reactive<UserForm>({
   status: 1,
 });
 
-// 用户表单校验规则
 const rules = reactive({
   username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
   nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
@@ -366,6 +297,15 @@ const rules = reactive({
   ],
 });
 
+// 选中的用户ID
+const selectIds = ref<number[]>([]);
+// 部门下拉数据源
+const deptOptions = ref<OptionType[]>();
+// 角色下拉数据源
+const roleOptions = ref<OptionType[]>();
+// 导入弹窗显示状态
+const importDialogVisible = ref(false);
+
 // 查询
 function handleQuery() {
   loading.value = true;
@@ -388,24 +328,19 @@ function handleResetQuery() {
   handleQuery();
 }
 
-// 行复选框选中记录选中ID集合
+// 选中项发生变化
-function handleSelectionChange(selection: any) {
+function handleSelectionChange(selection: any[]) {
-  removeIds.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item) => item.id);
 }
 
 // 重置密码
-function hancleResetPassword(row: { [key: string]: any }) {
+function hancleResetPassword(row: UserPageVO) {
-  ElMessageBox.prompt(
+  ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
-    "请输入用户「" + row.username + "」的新密码",
-    "重置密码",
-    {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
-    }
+  }).then(
-  ).then(
     ({ value }) => {
       if (!value || value.length < 6) {
-        // 检查密码是否为空或少于6位
         ElMessage.warning("密码至少需要6位字符，请重新输入");
         return false;
       }
@@ -451,7 +386,7 @@ function handleCloseDialog() {
   formData.status = 1;
 }
 
-// 表单提交
+// 提交用户表单（防抖处理）
 const handleSubmit = useThrottleFn(() => {
   userFormRef.value.validate((valid: any) => {
     if (valid) {
@@ -478,9 +413,13 @@ const handleSubmit = useThrottleFn(() => {
   });
 }, 3000);
 
-// 删除用户
+/**
+ * 删除用户
+ *
+ * @param id  用户ID
+ */
 function handleDelete(id?: number) {
-  const userIds = [id || removeIds.value].join(",");
+  const userIds = [id || selectIds.value].join(",");
   if (!userIds) {
     ElMessage.warning("请勾选删除项");
     return;
@@ -505,23 +444,17 @@ function handleDelete(id?: number) {
     }
   );
 }
-// 打开导入弹窗 *
+
+// 打开导入弹窗
 function handleOpenImportDialog() {
   importDialogVisible.value = true;
 }
 
-// 导入用户成功
-function handleUserImportSuccess() {
-  handleQuery();
-}
-
 // 导出用户
 function handleExport() {
   UserAPI.export(queryParams).then((response: any) => {
     const fileData = response.data;
-    const fileName = decodeURI(
+    const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
-      response.headers["content-disposition"].split(";")[1].split("=")[1]
-    );
     const fileType =
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";