tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ray
2024-11-11 00:43:31 +08:00
parent 79cacae85e eb2f87c129
commit cbf7b00e80
6 changed files with 163 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.prettierrc Normal file
View File

@@ -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"
}
}
]
}

46
.prettierrc.cjs
View File

@@ -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",
},
},
],
};

4
src/api/system/user.ts
View File

@@ -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;
/** 用户昵称 */

79
src/layout/components/Settings/index.vue
View File

@@ -1,68 +1,55 @@
<template>
<el-drawer
v-model="settingsVisible"
size="300"
:title="$t('settings.project')"
>
<el-drawer v-model="settingsVisible" size="300" :title="$t('settings.project')">
<el-divider>{{ $t("settings.theme") }}</el-divider>
<div class="flex-center">
<el-switch
v-model="isDark"
active-icon="Moon"
inactive-icon="Sunny"
@change="changeTheme"
/>
<el-switch 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
v-model="settingsStore.themeColor"
@update:model-value="changeThemeColor"
/>
<ThemeColorPicker 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
v-model="settingsStore.layout"
@update:model-value="changeLayout"
/>
<LayoutSelect 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>
.setting-item {
@apply py-1 flex-x-between;
}
</style>
<style lang="scss" scoped></style>

80
src/views/system/user/components/UserImport.vue
View File

@@ -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({
visible: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:visible", "import-success"]);
const dialogVisible = computed({
get: () => props.visible,
set: (val) => {
emit("update:visible", val);
},
const emit = defineEmits(["import-success"]);
const visible = defineModel("modelValue", {
type: Boolean,
required: true,
default: false,
});
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(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
const fileName = decodeURI(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>

183
src/views/system/user/index.vue
View File

@@ -47,14 +47,8 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><Search /></template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon><Refresh /></template>
重置
</el-button>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</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
v-loading="loading"
:data="pageData"
@selection-change="handleSelectionChange"
>
<el-table 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
label="昵称"
width="100"
align="center"
prop="nickname"
/>
<el-table-column 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
label="手机号码"
align="center"
prop="mobile"
width="120"
/>
<el-table-column
label="状态"
align="center"
prop="status"
width="80"
>
<el-table-column label="部门" 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
label="创建时间"
align="center"
prop="createTime"
width="120"
/>
<el-table-column 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
ref="userFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form 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
v-model="formData.mobile"
placeholder="请输入手机号码"
maxlength="11"
/>
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
<el-form-item label="状态" prop="status">
@@ -287,25 +236,13 @@
</template>
</el-drawer>
<!-- 用户导入弹窗 -->
<UserImport
v-model:visible="importDialogVisible"
@import-success="handleUserImportSuccess()"
/>
<!-- 用户导入 -->
<UserImport v-model="importDialogVisible" @import-success="handleQuery()" />
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI, {
UserForm,
UserPageQuery,
UserPageVO,
} from "@/api/system/user";
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,7 +297,16 @@ 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;
UserAPI.getPage(queryParams)
@@ -388,24 +328,19 @@ function handleResetQuery() {
handleQuery();
}
// 行复选框选中记录选中ID集合
function handleSelectionChange(selection: any) {
removeIds.value = selection.map((item: any) => item.id);
// 选中项发生变化
function handleSelectionChange(selection: any[]) {
selectIds.value = selection.map((item) => item.id);
}
// 重置密码
function hancleResetPassword(row: { [key: string]: any }) {
ElMessageBox.prompt(
"请输入用户「" + row.username + "」的新密码",
"重置密码",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
}
).then(
function hancleResetPassword(row: UserPageVO) {
ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).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(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
const fileName = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]);
const fileType =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";