gitadmin/wms-naivevue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用户管理

Browse Source
This commit is contained in:
陈红丽 2024-11-14 11:26:48 +08:00
parent 18d128b84c
commit ef8dcd3cba
13 changed files with 944 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
src/components/Editor/tinymce.vue
View File

@ -1,58 +1,56 @@
<template>
<div class="tinymce-editor">
<editor
v-model="myValue"
:init="init"
:disabled="disabled"
/>
</div>
<n-spin :show="spinning">
<div class="tinymce-editor">
<editor v-model="myValue" :init="init" :disabled="disabled" />
</div>
</n-spin>
</template>
<script>
import {upload} from '@/api/common'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import { upload } from '@/api/common';
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/link"; // 超链接插件
import "tinymce/plugins/code"; // 代码块插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/contextmenu"; // 右键菜单插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/colorpicker"; // 选择颜色插件
import "tinymce/plugins/textcolor"; // 文本颜色插件
import "tinymce/plugins/fullscreen"; // 全屏
import "tinymce/plugins/help"; // 帮助
import "tinymce/plugins/charmap";
import "tinymce/plugins/paste";
import "tinymce/plugins/print"; // 打印
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/hr"; // 水平线
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/codesample";
import "tinymce/plugins/directionality";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/save";
import "tinymce/plugins/tabfocus";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/template";
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/media'; // 插入视频插件
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/link'; // 超链接插件
import 'tinymce/plugins/code'; // 代码块插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/contextmenu'; // 右键菜单插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/colorpicker'; // 选择颜色插件
import 'tinymce/plugins/textcolor'; // 文本颜色插件
import 'tinymce/plugins/fullscreen'; // 全屏
import 'tinymce/plugins/help'; // 帮助
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/print'; // 打印
import 'tinymce/plugins/preview'; // 预览
import 'tinymce/plugins/hr'; // 水平线
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/spellchecker';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/fullpage';
import 'tinymce/plugins/toc';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/noneditable';
import 'tinymce/plugins/save';
import 'tinymce/plugins/tabfocus';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/template';
export default {
components: {
@ -62,11 +60,11 @@ export default {
// 传入一个value，使组件支持v-model绑定
value: {
type: String,
default: "",
default: '',
},
name: {
type: String,
default: "data",
default: 'data',
},
height: {
type: Number,
@ -78,8 +76,7 @@ export default {
},
plugins: {
type: [String, Array],
default:
"lists image media table textcolor wordcount contextmenu preview",
default: 'lists image media table textcolor wordcount contextmenu preview',
},
toolbar: {
type: [String, Array],
@ -92,66 +89,67 @@ export default {
// 配置文件服务器的静态访问路径前缀
// 初始化配置
init: {
placeholder: "在这里输入文字",
language_url: '/zh-Hans.js',// 这个文件会放在下面
language: "zh_CN",
skin_url: "/tinymce/skins/ui/oxide",
placeholder: '在这里输入文字',
language_url: '/zh-Hans.js', // 这个文件会放在下面
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
content_css: '/tinymce/skins/content/default/content.css',
height: this.height ? this.height : 600,
end_container_on_empty_block: true,
powerpaste_word_import: "clean",
advlist_bullet_styles: "square",
advlist_number_styles: "default",
imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
default_link_target: "_blank",
powerpaste_word_import: 'clean',
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
media_live_embeds: true,
content_style: "img {max-width:100%;}", // 直接自定义可编辑区域的css样式
content_style: 'img {max-width: 100%;}', // 直接自定义可编辑区域的css样式
nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
// plugins: this.plugins,
// toolbar: this.toolbar,
// @ts-nocheckplugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
plugins:
"advlist anchor autolink autosave code codesample colorpicker contextmenu directionality fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
'advlist anchor autolink autosave code codesample colorpicker contextmenu directionality fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount',
// toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | table',
toolbar: [
"searchreplace bold italic underline strikethrough fontselect fontsizeselect alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code",
"hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
'searchreplace bold italic underline strikethrough fontselect fontsizeselect alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code',
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
],
fontsize_formats: "8px 10px 11px 12px 13px 14px 15px 16px 17px 18px 24px 36px", // 第二步
fontsize_formats: '8px 10px 11px 12px 13px 14px 15px 16px 17px 18px 24px 36px', // 第二步
font_formats:
"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
branding: false,
menubar: true,
file_picker_types: "media",
file_picker_types: 'media',
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: async (blobInfo, success, failure) => {
const {url, name} = await this.uploadFile(blobInfo.blob(), 'image')
success(url, {title: name})
const { url, name } = await this.uploadFile(blobInfo.blob(), 'image');
success(url, { title: name });
// this.handleImgUpload(blobInfo, success, failure)
},
file_picker_callback: (cb, value, meta) => {
// 当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
if (meta.filetype == 'media') {
// 创建一个隐藏的type=file的文件选择input
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'video/*')
let me =this
input.onchange = async function() {
var file = this.files[0]
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'video/*');
let me = this;
input.onchange = async function () {
var file = this.files[0];
if (me.validateVideo(file)) {
const {url, name} = await me.uploadFile(file, 'video')
cb(url, {title: name})
const { url, name } = await me.uploadFile(file, 'video');
cb(url, { title: name });
}
}
};
// 触发点击
input.click()
input.click();
}
}
},
},
myValue: this.value,
spinning: false,
};
},
watch: {
@ -159,7 +157,7 @@ export default {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
this.$emit('input', newValue);
},
},
mounted() {
@ -168,22 +166,22 @@ export default {
methods: {
// 校验视频
async validateVideo(file) {
const isMP4 = file.type === 'video/mp4'
const isLt3M = file.size / 1024 / 1024 < 200
const isMP4 = file.type === 'video/mp4';
const isLt3M = file.size / 1024 / 1024 < 200;
if (!isMP4) {
this.$message.error('上传视频必须为 MP4 格式！')
this.$message.error('上传视频必须为 MP4 格式！');
return false
return false;
}
if (!isLt3M) {
this.$message.error('上传视频大小限制 200M 以内！')
this.$message.error('上传视频大小限制 200M 以内！');
return false
return false;
}
return true
return true;
},
/**
* @description 获取视频时长
@ -191,15 +189,15 @@ export default {
* @returns {Promise<number>}
*/
/* getVideoDuration(file) {
return new Promise(resolve => {
const videoElement = document.createElement('video')
videoElement.src = URL.createObjectURL(file)
return new Promise(resolve => {
const videoElement = document.createElement('video')
videoElement.src = URL.createObjectURL(file)
videoElement.addEventListener('loadedmetadata', () => {
resolve(videoElement.duration)
})
videoElement.addEventListener('loadedmetadata', () => {
resolve(videoElement.duration)
})
}*/
})
}*/
/**
* @description 上传文件
* @param {File} file - 要上传的文件
@ -207,39 +205,32 @@ export default {
* @returns {Object}
*/
async uploadFile(file, type = 'images') {
const loading = this.$loading({
lock: true,
text: '上传中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.spinning = true;
try {
const formData = new FormData()
formData.append('file',file)
formData.append('name',this.name)
const res = await upload(formData)
loading.close()
const formData = new FormData();
formData.append('file', file);
formData.append('name', this.name);
const res = await upload(formData);
this.spinning = false;
return {
url: res.fileUrl,
name: res.fileName
}
name: res.fileName,
};
} catch (e) {
loading.close()
return this.$message.error('上传失败')
this.spinning = false;
return this.$message.error('上传失败');
}
},
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
onClick(e) {
this.$emit("onClick", e, tinymce);
this.$emit('onClick', e, tinymce);
},
// 可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = "";
this.myValue = '';
},
},
};
</script>
<style>
</style>
<style></style>

3
src/components/Upload/Image.vue
View File

@ -170,12 +170,14 @@ import { useNotification } from 'naive-ui'
if (!imgType)
notification.warning({
content: '温馨提示',
duration:2000,
meta: '上传图片不符合所需的格式！',
});
if (!imgSize)
setTimeout(() => {
notification.warning({
content: '温馨提示',
duration:2000,
meta: `上传图片大小不能超过 ${props.fileSize}M！`,
});
}, 0);
@ -188,6 +190,7 @@ import { useNotification } from 'naive-ui'
const uploadError = () => {
notification.error({
content: '温馨提示',
duration:2000,
meta: '图片上传失败，请您重新上传！',
});
};

4
src/components/Upload/Images.vue
View File

@ -165,6 +165,7 @@ import { useNotification } from 'naive-ui'
} catch (error) {
notification.error({
message: '温馨提示',
duration:2000,
description: '上传文件失败！',
});
if (props.multiple) {
@ -209,6 +210,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
if (props.limit) {
notification.warning({
message: '温馨提示',
duration:2000,
description: `最多支持上传${props.limit}张`,
});
}
@ -224,6 +226,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
if (!imgSize) {
notification.warning({
message: '温馨提示',
duration:2000,
description: `上传文件大小不能超过 ${props.fileSize}M！`,
});
return false;
@ -236,6 +239,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
if (fileType.indexOf(substrName) == -1) {
notification.warning({
message: '温馨提示',
duration:2000,
description: '上传文件不符合所需的格式！',
});
return false;

3
src/components/Upload/file.vue
View File

@ -160,6 +160,7 @@ const handleHttpUpload = async (options) => {
} catch (error) {
notification.error({
message: '温馨提示',
duration:2000,
description: '上传文件失败！',
});
if (props.multiple) {
@ -203,6 +204,7 @@ const beforeUpload = (rawFile) => {
if (!imgSize) {
notification.warning({
message: '温馨提示',
duration:2000,
description: `上传文件大小不能超过 ${props.fileSize}M！`,
});
return false;
@ -215,6 +217,7 @@ const beforeUpload = (rawFile) => {
if (fileType.indexOf(substrName) == -1) {
notification.warning({
message: '温馨提示',
duration:2000,
description: '上传文件不符合所需的格式！',
});
return false;

4
src/plugins/customComponents.ts
View File

@ -5,13 +5,17 @@
import { App } from 'vue';
import { PageWrapper, PageFooter } from '@/components/Page';
import NumberInput from '@/components/numberInput/index.vue';
import pagination from '@/components/pagination/index.vue';
import { BasicTable } from '@/components/Table';
import { basicModal } from '@/components/Modal';
import { Authority } from '@/components/Authority';
export function setupCustomComponents(app: App) {
app.component('PageWrapper', PageWrapper);
app.component('NumberInput', NumberInput);
app.component('pagination', pagination);
app.component('basicModal', basicModal);
app.component('BasicTable',BasicTable)
app.component('PageFooter', PageFooter);
app.component('Authority', Authority);
}

31
src/views/system/menu/edit.vue
View File

@ -9,11 +9,12 @@
<n-radio :value="1">按钮</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="父级菜单" path="parentId" :rules="{ required: true, message: '请选择父级菜单', trigger: 'change' }">
<n-form-item label="父级菜单" path="parentId"
:rule="{ type: 'number', required: true, message: '请选择父级菜单', trigger: 'change' }">
<n-tree-select class="flex-1" v-model:value="formData.parentId" :options="menuOptions" label-field="name"
key-field="id" default-expand-all placeholder="请选择父级菜单" />
</n-form-item>
<n-form-item label="菜单名称" path="name" :rules="{ required: true, message: '请输入菜单名称', trigger: 'blur' }">
<n-form-item label="菜单名称" path="name" :rule="{ required: true, message: '请输入菜单名称', trigger: 'blur' }">
<n-input v-model:value="formData.name" placeholder="请输入菜单名称" clearable />
</n-form-item>
<n-form-item v-if="formData.type == 0" label="菜单图标" path="icon2">
@ -38,7 +39,7 @@
</div>
</n-form-item>
<n-form-item v-if="formData.type == 0 && (formData.target == 0 || formData.target == 1)" label="路由路径"
path="path" :rules="{ required: true, message: '请输入路由路径', trigger: 'blur' }">
path="path" :rule="{ required: true, message: '请输入路由路径', trigger: 'blur' }">
<div class="flex-1">
<n-input v-model:value="formData.path" placeholder="请输入路由路径" clearable />
<div class="form-tips"> 访问的路由地址 </div>
@ -94,11 +95,9 @@ import { menuAdd, menuUpdate, getMenuList, getMenuDetail } from '@/api/system/me
import { onMounted, reactive, ref, shallowRef } from 'vue';
import { getModulesKey } from '@/router';
import { arrayToTree, treeToArray, buildTree } from '@/utils/auth';
import { useLockFn } from '@/utils/useLockFn';
import IconPicker from '@/components/icon/picker.vue';
import * as VueIcon from '@vicons/antd';
import { useMessage, useDialog } from 'naive-ui';
import { message } from 'ant-design-vue';
import { useModal } from '@/components/Modal';
import { renderIcon } from '@/utils';
/**
@ -120,7 +119,7 @@ const props = defineProps({
* 定义参数变量
*/
const [modalRegister, { openModal, closeModal, setSubLoading, setProps }] = useModal({
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.menuId ? '编辑菜单' : "添加菜单",
subBtuText: '确定',
width: 600,
@ -195,15 +194,17 @@ const getMenu = async () => {
* 执行提交表单
*/
const handleSubmit = async () => {
await formRef.value?.validate();
props.menuId ? await menuUpdate(formData) : await menuAdd(formData);
message.success('操作成功');
emit('update:visible', false);
emit('success');
formRef.value.validate().then(async () => {
props.menuId ? await menuUpdate(formData) : await menuAdd(formData);
message.success('操作成功');
setSubLoading(false)
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
/**
* 设置表单数据
* @param data 参数
@ -247,8 +248,6 @@ onMounted(async () => {
});
//导出方法
defineExpose({
openModal,
closeModal,
setProps,
openModal
});
</script>

8
src/views/system/menu/index.vue
View File

@ -29,7 +29,7 @@
<script lang="ts" setup name="menus">
import { defineAsyncComponent, nextTick, onMounted, ref, reactive, h } from 'vue';
import { PlusOutlined, EditOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
import { BasicTable, TableAction } from '@/components/Table';
import {TableAction } from '@/components/Table';
import { renderIcon } from '@/utils';
import editDialog from './edit.vue';
import { getMenuList, menuDelete } from '@/api/system/menu';
@ -54,6 +54,7 @@ const pid = ref(0);
const actionColumn = reactive({
width: 220,
title: '操作',
align:'center',
key: 'action',
fixed: 'right',
render(record) {
@ -154,10 +155,7 @@ const handleExpand = () => {
loading.value = true;
if (!expandKeys.value.length) {
expandKeys.value = getTreeValues(tableRef.value.getDataSource(), 'id');
console.log(expandKeys.value)
// setTimeout(()=>{
// loading.value = false;
// },2000)
loading.value = false;
} else {
expandKeys.value = [];

121
src/views/system/user/columns.ts
View File

@ -2,73 +2,107 @@ import { h } from 'vue';
import { NImage, NTag } from 'naive-ui';
import { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
type: 'selection',
width: 50,
fixed:"left"
},
{
title: '用户名',
title: 'ID',
key: 'id',
width: 50,
fixed:"left"
},
{
title: '登录账号',
key: 'username',
width: 100,
width: 150,
},
{
title: '用户姓名',
key: 'realname',
width: 150,
},
{
title: '头像',
key: 'avatar',
render(row) {
return h(NImage, {
alt: '这是一个图片说明',
width: 48,
src: row.avatar,
shape: 'square',
fit: 'fill',
});
},
width: 100,
},
{
title: '登录账号',
key: 'account',
title: '性别',
width: 100,
key: 'gender',
render(row) {
let typeText = '';
let color = '';
switch (row.gender) {
case 1:
typeText = '男';
color = 'info';
break;
case 2:
typeText = '女';
color = 'error';
break;
case 3:
typeText = '保密';
color = 'warning';
break;
default:
break;
}
return h(
NTag,
{
type: color,
},
{
default: () => typeText,
},
);
},
},
{
title: '手机号',
key: 'mobile',
width: 100,
width: 160,
},
{
title: '邮箱',
key: 'email',
width: 150,
},
{
title: '性别',
key: 'gender',
width: 100,
render(row) {
return h(
NTag,
{
type: row.gender === 1 ? 'info' : 'error',
},
{
default: () => (row.gender === 1 ? '男' : '女'),
},
);
},
},
{
title: '角色',
title: '用户角色',
key: 'role',
width: 100,
render(row) {
return h(
NTag,
{
type: 'info',
},
{
default: () => row.role,
},
);
let roleNames = '';
if (row.roles.length > 0) {
roleNames = row.roles.map((role) => role.name).join(',');
}
return h('span', roleNames || '-');
},
width: 100,
},
{
title: '职级',
key: 'levelName',
width: 100,
},
{
title: '岗位',
key: 'positionName',
width: 100,
},
{
title: '部门',
key: 'deptName',
width: 160,
},
{
title: '状态',
@ -78,17 +112,22 @@ export const columns: BasicColumn[] = [
return h(
NTag,
{
type: row.status === 'normal' ? 'success' : 'error',
type: row.status == 1 ? 'success' : 'error',
},
{
default: () => (row.status === 'normal' ? '正常' : '禁用'),
default: () => (row.status == 1 ? '正常' : '禁用'),
},
);
},
},
{
title: '创建人',
key: 'createUser',
width: 100,
},
{
title: '创建时间',
key: 'create_date',
key: 'createTime',
width: 180,
},
];

287
src/views/system/user/edit.vue Normal file
View File

@ -0,0 +1,287 @@
<template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal" @on-ok="handleSubmit"
@on-close="handleClose">
<template #default>
<n-form ref="formRef" :model="formData" label-placement="left" label-width="85px">
<n-form-item label="头像" path="avatar"
:rule="{ key: 'avatar', required: true, message: '请上传头像', trigger: 'blur' }">
<Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" name="user" title="头像上传"
@upload-success="uploadSuccess">
<template #avatar> </template>
</Cropper>
</n-form-item>
<div class="flex">
<n-form-item label="账号" path="username" class="flex-1"
:rule="{ required: true, message: '请输入账号', trigger: 'blur' }">
<n-input :disabled="props.userId ? true : false" v-model:value="formData.username" placeholder="请输入账号"
clearable />
</n-form-item>
<n-form-item label="密码" path="password" class="flex-1"
:rule="{ required: props.userId ? false : true, message: '请输入密码', trigger: 'blur' }">
<n-input v-model:value.trim="formData.password" clearable type="password" placeholder="请输入密码" />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="名称" path="realname" class="flex-1"
:rule="{ required: true, message: '请输入名称', trigger: 'blur' }">
<n-input v-model:value="formData.realname" placeholder="请输入名称" clearable />
</n-form-item>
<n-form-item label="性别" path="sex" class="flex-1">
<n-radio-group v-model:value="formData.gender" path="gender">
<n-radio :value="1">男</n-radio>
<n-radio :value="2">女</n-radio>
<n-radio :value="3">保密</n-radio>
</n-radio-group>
</n-form-item>
</div>
<div class="flex">
<n-form-item label="角色" path="roles" class="flex-1"
:rule="[{ type: 'array', required: true, message: '请选择角色', trigger: ['blur', 'change'] }]">
<n-select v-model:value="formData.roles" mode="multiple" class="flex-1" clearable multiple
:options="optionData.roleList" label-field="name" value-field="id" placeholder="请选择角色">
</n-select>
</n-form-item>
<n-form-item label="部门" path="deptId" class="flex-1"
:rule="{ type: 'number', required: true, message: '请选择部门', trigger: ['blur', 'change'] }">
<n-tree-select v-model:value="formData.deptId" :options="optionData.deptList" placeholder="请选择部门"
label-field="name" key-field="id" />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="职级" path="levelId" class="flex-1"
:rule="{ type: 'number', required: true, message: '请选择职级', trigger: ['blur', 'change'] }">
<n-select v-model:value="formData.levelId" class="flex-1" placeholder="请选择职级" clearable
:options="optionData.levelList" label-field="name" value-field="id">
</n-select>
</n-form-item>
<n-form-item label="岗位" path="positionId" class="flex-1"
:rule="{ type: 'number', required: true, message: '请选择岗位', trigger: ['blur', 'change'] }">
<n-select v-model:value="formData.positionId" :options="optionData.positionList" label-field="name"
value-field="id" class="flex-1" clearable placeholder="请选择岗位">
</n-select>
</n-form-item>
</div>
<div class="flex">
<n-form-item label="手机号码" path="mobile" class="flex-1" :rule="[
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: rule.validatePhone, trigger: 'blur' },
]">
<n-input v-model:value="formData.mobile" placeholder="请输入手机号码" clearable />
</n-form-item>
<n-form-item label="邮箱地址" path="email" class="flex-1" :rule="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确邮箱地址', trigger: 'blur' },
]">
<n-input v-model:value="formData.email" placeholder="请输入邮箱地址" clearable />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="所属区域" class="flex-1" path="city"
:rule="{ key: 'city', type: 'array', required: true, message: '请选择所属区域', trigger: ['blur', 'change'] }">
<chinaArea style="width: 100%" v-model="formData.city" />
</n-form-item>
<n-form-item label="详细地址" class="flex-1" path="address"
:rule="{ required: true, message: '请输入详细地址', trigger: 'blur' }">
<n-input v-model:value="formData.address" type="textarea" placeholder="请输入详细地址" clearable />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="用户状态" path="status" class="flex-1">
<n-radio-group v-model:value="formData.status">
<n-radio :value="1">正常</n-radio>
<n-radio :value="2">禁用</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="排序" path="sort" class="flex-1"
:rule="{ type: 'number', required: true, message: '请输入排序', trigger: 'blur' }">
<n-input-number v-model:value="formData.sort" :max="9999" />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="简介" path="intro" class="flex-1">
<n-input v-model:value="formData.intro" type="textarea" placeholder="请输入简介" clearable />
</n-form-item>
</div>
<div class="flex">
<n-form-item label="备注" path="note" class="flex-1">
<n-input v-model:value="formData.note" type="textarea" placeholder="请输入备注" clearable />
</n-form-item>
</div>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import { getUserDetail, userAdd, userUpdate } from '@/api/system/user';
import { upload } from '@/api/common';
import { Cropper } from '@/components/Cropper';
import chinaArea from '@/components/ChinaArea/index.vue';
import { ref, onMounted, reactive, shallowRef } from 'vue';
import { getRoleAllList } from '@/api/system/role';
import { getDeptList } from '@/api/system/dept';
import { getLevelAllList } from '@/api/system/level';
import { getPositionAllList } from '@/api/system/position';
import { buildTree } from '@/utils/auth';
import { rule } from '@/utils/validate';
import { useMessage } from 'naive-ui';
import { useUserStore } from '@/store/modules/user';
import { useModal } from '@/components/Modal';
/**
* 定义接收的参数
*/
const props = defineProps({
userId: {
type: Number,
required: true,
default: 0,
},
});
/**
* 定义参数变量
*/
const emit = defineEmits(['success', 'update:visible']);
const [modalRegister, { openModal, setSubLoading }] = useModal({
title: props.userId ? '编辑用户' : "添加用户",
subBtuText: '确定',
width: 800,
});
const message = useMessage();
const uploadHeaders = reactive({
authorization: useUserStore().getToken,
});
const formRef = ref();
/**
* 定义接收的参数
*/
const formData = reactive({
id: 0,
avatarName: '',
email: '',
username: '',
realname: '',
mobile: '',
gender: 1,
roles: [],
deptId: '',
levelId: null,
positionId: null,
address: '',
status: 1,
note: '',
intro: '',
sort: 0,
city: [],
avatar: '',
password: '',
passwordConfirm: '',
});
const cropperCircled = ref();
const passwordConfirmValidator = (rule: object, value: string, callback: any) => {
if (formData.password) {
if (!value) callback(new Error('请再次输入密码'));
if (value !== formData.password) callback(new Error('两次输入密码不一致!'));
}
callback();
};
/**
* 上传成功回调
* @param data 参数
*/
const uploadSuccess = (data) => {
formData.avatar = data.fileUrl;
formRef.value?.validate(
(errors) => { },
(rule) => {
return rule?.key === 'avatar'
}
)
return;
};
/**
* 设置表单数据
* @param row 参数
*/
const setFormData = async (row: any) => {
const data = await getUserDetail(row.userId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
formData[key] = data[key];
}
}
};
/**
* 执行提交表单
*/
const handleSubmit = () => {
console.log(formData)
formRef.value.validate().then(async () => {
props.userId ? await userUpdate(formData) : await userAdd(formData);
setSubLoading(false);
message.success('操作成功');
emit('update:visible', false);
emit('success');
}).catch((error) => {
setSubLoading(false);
});
};
const handleClose = () => {
emit('update:visible', false);
}
/**
* 定义选项数据
*/
const optionData = reactive({
roleList: [],
deptList: [],
levelList: [],
positionList: [],
});
function uploadChange(data: string[]) {
formData.avatar = data.fileUrl;
formData.avatarName = data.fileName;
}
const handleDelete = async (file) => {
console.log(file);
};
/**
* 获取全部字典数据
*/
const getAllDict = async () => {
let list = await getRoleAllList();
optionData.roleList = list ? list : [];
list = await getDeptList();
optionData.deptList = list ? buildTree(list) : [];
list = await getLevelAllList();
optionData.levelList = list ? list : [];
list = await getPositionAllList();
optionData.positionList = list ? list : [];
};
/**
* 钩子函数
*/
onMounted(() => {
getAllDict();
if (props.userId) {
setFormData({ userId: props.userId });
}
});
//导出方法
defineExpose({
openModal,
});
</script>

274
src/views/system/user/index.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div>
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
</n-card>
<n-card :bordered="false" class="proCard">
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
<template #tableTitle>
<n-space>
<n-button type="primary" @click="handleAdd" v-perm="['sys:user:add']">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length" v-perm="['sys:user:batchDelete']">
<template #icon>
<n-icon>
<DeleteOutlined />
</n-icon>
</template>
删除
</n-button>
<n-button @click="importVisible = true" v-perm="['sys:user:import']">
<template #icon>
<n-icon>
<ToTopOutlined />
</n-icon>
</template>
导入
</n-button>
<n-button @click="handleExport" :loading="exportLoading" :disabled="exportLoading"
v-perm="['sys:user:export']">
<template #icon>
<n-icon>
<DownloadOutlined />
</n-icon>
</template>
导出
</n-button>
</n-space>
</template>
</BasicTable>
</n-card>
<editDialog ref="createModalRef" :userId="userId" v-if="editVisible" v-model:visible="editVisible"
@success="reloadTable('noRefresh')" />
<userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, reactive, ref, unref } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import {
getUserList,
userDelete,
userBatchDelete,
userExport,
resetPwd,
getUserDocument,
} from '@/api/system/user';
import { columns } from './columns';
import {
PlusOutlined,
DeleteOutlined,
LockOutlined,
DownloadOutlined,
PrinterOutlined,
ToTopOutlined,
FormOutlined
} from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import editDialog from './edit.vue';
import userUpload from './userUpload.vue';
import { basicModal, useModal } from '@/components/Modal';
import { downloadByData } from '@/utils/file/download';
import { schemas } from './querySchemas';
import { renderIcon } from '@/utils';
import printJS from 'print-js';
const message = useMessage();
const dialog = useDialog()
const basicTableRef = ref();
const createModalRef = ref();
const editVisible = ref(false);
const userId = ref(0);
const rowKeys = ref([]);
const importVisible = ref(false)
const exportLoading = ref(false);
const showModal = ref(false);
const formParams = reactive({
name: '',
status: '',
});
const actionColumn = reactive({
width: 400,
title: '操作',
align: 'center',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '编辑',
icon: renderIcon(FormOutlined),
type: 'warning',
onClick: handleEdit.bind(null, record),
auth: ['sys:user:update'],
},
{
label: '删除',
icon: renderIcon(DeleteOutlined),
type: 'error',
onClick: handleDelete.bind(null, record),
auth: ['sys:user:delete'],
},
{
label: '重置密码',
icon: renderIcon(LockOutlined),
type: 'info',
onClick: handleResetPassword.bind(null, record),
auth: ['sys:user:resetPwd'],
},
{
label: '打印',
type: 'info',
icon: renderIcon(PrinterOutlined),
onClick: handlePrint.bind(null, record),
},
],
select: (key) => {
message.info(`您点击了，${key} 按钮`);
},
});
},
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
const result = await getUserList({ ...formParams, ...res });
return result;
};
function onCheckedRow(keys) {
rowKeys.value = keys;
}
function reloadTable(noRefresh = '') {
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
}
function handleSubmit(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
function handleReset(values: Recordable) {
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable();
}
const [register, { }] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
/**
* 执行重置密码
* @param id 参数
*/
const handleResetPassword = (record) => {
console.log(rowKeys.value)
dialog.warning({
title: '提示',
content: '确定重置密码？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
await resetPwd({ userId: record.id });
message.success('重置成功');
},
})
}
/**
* 执行添加
*/
const handleAdd = async () => {
userId.value = 0;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
};
/**
* 执行编辑
*/
async function handleEdit(record: Recordable) {
userId.value = record.id;
editVisible.value = true;
await nextTick();
createModalRef.value.openModal();
}
/**
* 执行删除
* @param id 参数
*/
async function handleDelete(record) {
dialog.warning({
title: '提示',
content: '确定要删除？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
record.id ? await userDelete(record.id) : await userBatchDelete(rowKeys.value);
message.success('删除成功');
reloadTable();
},
})
}
/**
* 执行导出
*/
const handleExport = async () => {
exportLoading.value = true;
const data = await userExport();
downloadByData(data, '用户信息.xlsx');
exportLoading.value = false;
message.success('导出成功');
};
/**
* 执行打印
* @param id 参数
*/
const handlePrint = async (record) => {
const res = await getUserDocument(record.id);
printJS({
printable: res.fileUrl,
type: 'pdf',
showModal: true,
});
};
</script>
<style lang="less" scoped></style>

88
src/views/system/user/querySchemas.ts
View File

@ -1,80 +1,54 @@
import { FormSchema } from '@/components/Form/index';
import { getRoleAllList } from '@/api/system/role';
export const loadSelectData = async (res) => {
//这里可以进行数据转换处理
return (await getRoleAllList({ ...res })).map((item, index) => {
return {
...item,
label: item.name,
value: item.id,
index,
};
});
};
export const schemas: FormSchema[] = [
{
field: 'username',
field: 'realname',
component: 'NInput',
label: '用户名',
componentProps: {
placeholder: '请输入用户名',
},
},
{
field: 'account',
component: 'NInput',
label: '登录账号',
componentProps: {
placeholder: '请输入登录账号',
},
},
{
field: 'mobile',
component: 'NInputNumber',
label: '手机',
componentProps: {
placeholder: '请输入手机号码',
showButton: false,
},
},
{
field: 'role',
component: 'NSelect',
label: '角色',
componentProps: {
placeholder: '请选择角色',
options: [
{
label: '普通用户',
value: 1,
},
{
label: '推广管理员',
value: 2,
},
{
label: '发货管理员',
value: 3,
},
{
label: '财务管理员',
value: 4,
},
],
},
},
{
field: 'email',
component: 'NInput',
label: '邮箱',
componentProps: {
placeholder: '请输入邮箱',
showButton: false,
},
},
// {
// field: 'role',
// component: 'BasicSelect',
// label: '角色',
// componentProps: {
// placeholder: '请选择角色',
// block:true,
// multiple:true,
// request: loadSelectData,
// onChange: (e: any) => {
// console.log(e);
// },
// },
// },
{
field: 'status',
component: 'NSelect',
label: '状态',
componentProps: {
placeholder: '请选择角色',
placeholder: '请选择状态',
clearable: true,
options: [
{
label: '正常',
value: 'normal',
value: '1',
},
{
label: '禁用',
value: 'disable',
value: '2',
},
],
},

229
src/views/system/user/user.vue
View File

@ -1,229 +0,0 @@
<template>
<div>
<n-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
</n-card>
<n-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="basicTableRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
scroll-x="1200"
virtual-scroll
>
<template #tableTitle>
<n-space>
<n-button type="primary" @click="addUser">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
<n-button type="error" @click="openRemoveModal" :disabled="!rowKeys.length">
<template #icon>
<n-icon>
<DeleteOutlined />
</n-icon>
</template>
删除
</n-button>
<n-button @click="addTable">
<template #icon>
<n-icon>
<ToTopOutlined />
</n-icon>
</template>
导入
</n-button>
</n-space>
</template>
</BasicTable>
</n-card>
<basicModal
@register="lightModalRegister"
class="basicModalLight"
ref="modalRef"
@on-ok="removeOkModal"
>
<template #default>
<p class="text-gray-600" style="padding-left: 35px"
>您确认要删除用户，<n-text strong>{{ rowKeysName }} ?</n-text></p
>
</template>
</basicModal>
<CreateModal ref="createModalRef" :title="createModalTitle" :isEdit="isEdit" />
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, reactive, ref, unref } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getUserList } from '@/api/system/user';
import { columns } from './columns';
import { PlusOutlined, DeleteOutlined, ToTopOutlined } from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import { basicModal, useModal } from '@/components/Modal';
import { schemas } from './querySchemas';
const message = useMessage();
const basicTableRef = ref();
const createModalRef = ref();
const rowKeys = ref([]);
const rowKeysName = ref([]);
const tableData = ref();
const isEdit = ref(false);
const createModalTitle = ref('添加用户');
const showModal = ref(false);
const formParams = reactive({
name: '',
address: '',
date: null,
});
const params = ref({
pageSize: 10,
name: 'xiaoma',
});
const actionColumn = reactive({
width: 170,
title: '操作',
key: 'action',
fixed: 'right',
align: 'center',
render(record) {
return h(TableAction as any, {
style: 'text',
actions: [
{
label: '删除',
onClick: handleDelete.bind(null, record),
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
],
dropDownActions: [
{
label: '启用',
key: 'enabled',
},
{
label: '禁用',
key: 'disabled',
},
],
select: (key) => {
message.info(`您点击了，${key} 按钮`);
},
});
},
});
function addTable() {
showModal.value = true;
}
const loadDataTable = async (res) => {
const result = await getUserList({ ...formParams, ...params.value, ...res });
tableData.value = result.list;
return result;
};
function onCheckedRow(keys) {
rowKeys.value = keys;
rowKeysName.value = tableData.value
.filter((item) => {
return keys.includes(item.id);
})
.map((item) => {
return item.username;
})
.join('，');
}
function reloadTable() {
basicTableRef.value.reload();
}
function handleEdit(record: Recordable) {
record.mobile = parseInt(record.mobile);
addUser();
nextTick(() => {
isEdit.value = true;
createModalRef.value.setProps({ title: '编辑用户' });
createModalRef.value.setFieldsValue({
...unref(record),
});
});
}
function handleDelete(record: Recordable) {
rowKeysName.value = record.username;
openRemoveModal();
}
function handleSubmit(values: Recordable) {
console.log(values);
reloadTable();
}
function handleReset(values: Recordable) {
console.log(values);
}
const [register, {}] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
const [
lightModalRegister,
{ openModal: lightOpenModal, closeModal: lightCloseModal, setSubLoading: lightSetSubLoading },
] = useModal({
title: '删除确认',
showIcon: true,
type: 'warning',
closable: false,
maskClosable: true,
width: 380,
});
//删除
function openRemoveModal() {
lightOpenModal();
}
//添加
function addUser() {
isEdit.value = false;
createModalRef.value.setProps({ title: '添加用户' });
createModalRef.value.openModal();
}
//确认删除
function removeOkModal() {
lightCloseModal();
lightSetSubLoading();
message.error('抱歉，您没有操作权限');
}
</script>
<style lang="less" scoped></style>

132
src/views/system/user/userUpload.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<n-modal
v-model:show="props.visible"
preset="dialog"
style="width:450px;"
@close="dialogClose"
positive-text="确定"
negative-text="取消"
@positive-click="dialogSubmit"
@negative-click="dialogClose"
>
<template #header>
{{ dialogTitle }}
</template>
<n-upload
action="/api/user/import"
:headers="uploadHeaders"
name="file"
ref="uploadRef"
:default-upload="false"
@change="handleChange"
@before-upload="beforeUpload"
v-model:file-list="fileList"
:max="1"
v-perm="['sys:user:import']"
>
<n-upload-dragger>
<n-icon size="60" color="#165df">
<CloudUploadOutlined/>
</n-icon>
<div> 点击或将文件拖拽到这里上传</div>
</n-upload-dragger>
</n-upload>
<div style="margin-top: 20px">
<span>只能上传 xls、xlsx 文件</span>
<n-button quaternary type="info" @click="handleDownload">下载模板</n-button>
</div>
</n-modal>
</template>
<script lang="ts" setup>
import { getTemplateByCode } from '@/api/system/user';
import { computed, reactive, ref } from 'vue';
import { CloudUploadOutlined } from '@vicons/antd';
import { useMessage } from 'naive-ui';
import { useUserStore } from '@/store/modules/user';
import type { UploadChangeParam } from 'ant-design-vue';
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
}
});
/**
* 定义参数变量
*/
const uploadHeaders = reactive({
authorization: useUserStore().getToken,
});
const message = useMessage();
const uploadRef = ref();
const fileList = ref([]);
const emit = defineEmits(['success', 'update:visible']);
/**
* 定义弹窗标题
*/
const dialogTitle = computed(() => {
return '导入用户';
});
/**
* 关闭窗体
*/
const dialogClose = () => {
emit('update:visible', false);
};
/**
* 上传文件之前验证
*/
const beforeUpload = (file) => {
const isLt2M = file.size / 1024 / 1024 < 200;
if (!isLt2M) {
message.warning('大小不能超过200MB!');
return false;
}
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
message.warning('请上传.xlsx .xls');
return false;
}
return true;
};
/**
* 执行上传文件
* @param param0 参数
*/
const handleChange = ({ file }: UploadChangeParam) => {
const status = file.status;
if (status === 'done') {
let data = file.response;
if (data.code != 0) {
message.error(data.msg || '导入失败');
} else {
message.success('导入成功');
emit('update:visible', false);
emit('success');
}
} else if (status === 'error') {
message.error('导入失败');
}
};
/**
* 执行下载文件
*/
const handleDownload = async () => {
const res = await getTemplateByCode('user_import');
window.open(res.filePath);
};
const dialogSubmit = async()=>{
uploadRef.value?.submit()
}
</script>