Skip to content

L
Lic
提交 1b479add authored 作者: Administrator's avatar Administrator
浏览文件
操作

更新代码

上级 be6baf29
隐藏空白字符变更
内嵌 并排
正在显示 包含 686 行增加 和 875 行删除
package-lock.json
浏览文件 @ 1b479add
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ 1b479add
......@@ -15,7 +15,6 @@
"eslint": "^8.4.1",
"eslint-plugin-vue": "^8.2.0",
"lodash": "^4.17.21",
"mockjs": "^1.1.0",
"moment": "^2.29.1",
"nprogress": "^0.2.0",
"qs": "^6.10.3",
......@@ -30,20 +29,16 @@
},
"devDependencies": {
"@types/lodash": "^4.14.182",
"@types/mockjs": "^1.0.4",
"@types/node": "^16.11.12",
"@types/qs": "^6.9.7",
"@vitejs/plugin-vue": "^2.3.1",
"node-sass": "^7.0.0",
"sass": "^1.44.0",
"sass-loader": "^12.4.0",
"sass": "^1.86.0",
"typescript": "^4.4.3",
"unplugin-auto-import": "^0.7.1",
"unplugin-icons": "^0.14.3",
"unplugin-vue-components": "^0.19.3",
"vite": "^2.6.14",
"vite-plugin-inspect": "^0.5.0",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^0.3.0"
},
......
src/App.vue
浏览文件 @ 1b479add
<script lang="ts">
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
components: {
[ElConfigProvider.name]: ElConfigProvider,
},
setup() {
let locale = zhCn;
return {
locale,
};
},
};
</script>
<template>
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
</template>
<style lang="scss">
.margin-bottom-10 {
margin-bottom: 10px;
}
/* 1px边框适配 */
.border-top-1px {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 1px solid #e1e1e1;
transform: scaleY(0.5);
}
}
.border-bottom-1px {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #e0e0e0;
transform: scaleY(0.4);
}
}
.border-left-1px {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 100%;
border-left: 1px solid #e0e0e0;
transform: scaleX(0.4);
}
}
/* 1px边框适配end */
/* flex布局 */
/* 两端对齐 */
.space-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 垂直居中对齐 */
.flex-center-h {
display: flex;
align-items: center;
}
/* 垂直水平居中对齐 */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* 上下贴边 子class 宽度需100% */
.align-content {
display: flex;
flex-flow: wrap;
align-content: space-between;
}
/* flex布局end */
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
/* 超出省略... */
.over1 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 1 !important;
-moz-box-orient: vertical;
}
.over2 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 2 !important;
-moz-box-orient: vertical;
}
.over3 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 3 !important;
-moz-box-orient: vertical;
}
/* 超出省略...end */
</style>
<script lang="ts" setup>
import { ElConfigProvider } from "element-plus";
import locale from "element-plus/es/locale/lang/zh-cn";
</script>
<template>
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
</template>
<style lang="scss">
.margin-bottom-10 {
margin-bottom: 10px;
}
/* 1px边框适配 */
.border-top-1px {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 1px solid #e1e1e1;
transform: scaleY(0.5);
}
}
.border-bottom-1px {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #e0e0e0;
transform: scaleY(0.4);
}
}
.border-left-1px {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 100%;
border-left: 1px solid #e0e0e0;
transform: scaleX(0.4);
}
}
/* 1px边框适配end */
/* flex布局 */
/* 两端对齐 */
.space-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 垂直居中对齐 */
.flex-center-h {
display: flex;
align-items: center;
}
/* 垂直水平居中对齐 */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* 上下贴边 子class 宽度需100% */
.align-content {
display: flex;
flex-flow: wrap;
align-content: space-between;
}
/* flex布局end */
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
/* 超出省略... */
.over1 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 1 !important;
-moz-box-orient: vertical;
}
.over2 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 2 !important;
-moz-box-orient: vertical;
}
.over3 {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 3 !important;
-moz-box-orient: vertical;
}
/* 超出省略...end */
</style>
src/assets/styles/global.scss
浏览文件 @ 1b479add
$color-primary: #007aff;
@import "./body.scss";
@import "./common.scss";
@import "./layout.scss";
\ No newline at end of file
$color-primary: #007aff;
@use "./body.scss";
@use "./common.scss";
@use "./layout.scss";
\ No newline at end of file
src/directives/permission.ts
浏览文件 @ 1b479add
//自定义按钮权限指令
import { Directive } from 'vue'
import { store } from '@/store/index';
export const permission: Directive = {
mounted(el, binding) {
//value按钮上的权限
const { value } = binding;
//获取用户所有的权限
const permissions = store.getters['user/getPermissions'];
console.log('所有的权限')
console.log(permissions)
//判断传递进来的按钮权限，是否存在
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value;
//判断传递进来的按钮权限字段，是否存在当前用户的permissions
const hasPermission = permissions.some((role) => {
return permissionRoles.includes(role)
})
if (!hasPermission) { //没有权限时，影藏
el.style.display = 'none'
}
} else {
throw new Error('当前没有权限!')
}
}
}
\ No newline at end of file
//自定义按钮权限指令
import { Directive } from "vue";
import { store } from "@/store/index";
export const permission: Directive = {
mounted(el, binding) {
//value按钮上的权限
const { value } = binding;
//获取用户所有的权限
const permissions = store.getters["user/getPermissions"];
//判断传递进来的按钮权限，是否存在
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value;
//判断传递进来的按钮权限字段，是否存在当前用户的permissions
const hasPermission = permissions.some((role) => {
return permissionRoles.includes(role);
});
if (!hasPermission) {
//没有权限时，影藏
el.style.display = "none";
}
} else {
throw new Error("当前没有权限!");
}
},
};
src/main.ts
浏览文件 @ 1b479add
import { createApp } from 'vue'
import App from './App.vue'
// 注入路由
import router from './router';
import { start, close } from '@/utils/nprogress'
import { getToken, cleanSession, getMenu } from '@/utils/auth'
import { elNotificaton } from '@/utils/customemessage'
import '@/mock' //生产时请注释掉，
import { filterAsyncRoutes } from '@/store/modules/menu'
import { store, key } from '@/store'
import * as ElIconModules from '@element-plus/icons-vue'
//全局添加组件
// 全局注入ui组件库,按需引入迁移到vite.config.ts配置
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { CopyData, resetForm } from './utils/common';
import LqConfirm from './utils/LqConfirm'
//引入echarts
import * as echarts from 'echarts'
//引入按钮权限
import { permission } from './directives/permission'
//引入socket
import SocketService from '@/socket/main'
// SocketService.Instance.connect();
// 国际化
import i18n from "@/lang/index";
//注册svg图标脚本
import 'virtual:svg-icons-register'
import GlobalComponents from './global-components';
const whiteList = ['/login']; //白名单
// 设置路由导航守卫
router.beforeEach(async (to, from, next) => {
//设置标题
if (to.meta.title) {
document.title = String(to.meta.title)
}
else {
document.title = import.meta.env.VITE_APP_TITLE;
}
//获取token
let token = getToken();
if (token) {
if (to.path === '/login' || to.path === '/') {
next({ path: '/' })
} else {
if (store.state.menu.menuList.length == 1) {
try {
await store.dispatch('user/getInfo')
await store.dispatch('menu/getMenuList', router)
next({ ...to, replace: true })
} catch (error) {
cleanSession();
next({ path: '/login' })
}
} else {
next()
}
}
} else {
//判断是否在白名单中
if (whiteList.indexOf(to.path) !== -1) { //存在白名单，放行
next();
} else { //不存在，登录
next({ path: '/login' })
}
}
})
const app = createApp(App);
Object.keys(ElIconModules).forEach((key) => {
app.component(key, ElIconModules[key as keyof typeof ElIconModules])
});
app.use(store, key)
app.use(router);
app.use(ElementPlus)
app.use(i18n);
app.mount('#app');
//注册
app.directive('permission', permission);
GlobalComponents(app)
//清空表单
app.config.globalProperties.$resetForm = resetForm;
//对象复制
app.config.globalProperties.$objCoppy = CopyData;
//确定弹框
app.config.globalProperties.$lqconfirm = LqConfirm;
// 路由加载结束后执行
router.afterEach(() => {
close()
})
import { createApp } from "vue";
import App from "./App.vue";
// 注入路由
import router from "./router";
import { getToken, cleanSession } from "@/utils/auth";
import { store, key } from "@/store";
import * as ElIconModules from "@element-plus/icons-vue";
//全局添加组件
// 全局注入ui组件库,按需引入迁移到vite.config.ts配置
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { CopyData, resetForm } from "./utils/common";
import LqConfirm from "./utils/LqConfirm";
//引入按钮权限
import { permission } from "./directives/permission";
// 国际
import i18n from "@/lang/index";
//注册svg图标脚本
import "virtual:svg-icons-register";
import GlobalComponents from "./global-components";
const whiteList = ["/login"]; //白名单
// 设置路由导航守卫
router.beforeEach(async (to, from, next) => {
//设置标题
if (to.meta.title) {
document.title = String(to.meta.title);
} else {
document.title = import.meta.env.VITE_APP_TITLE;
}
//获取token
let token = getToken();
if (token) {
if (to.path === "/login" || to.path === "/") {
next({ path: "/" });
} else {
if (store.state.menu.menuList.length == 1) {
try {
await store.dispatch("user/getInfo");
await store.dispatch("menu/getMenuList", router);
next({ ...to, replace: true });
} catch (error) {
cleanSession();
next({ path: "/login" });
}
} else {
next();
}
}
} else {
//判断是否在白名单中
if (whiteList.indexOf(to.path) !== -1) {
//存在白名单，放行
next();
} else {
//不存在，登录
next({ path: "/login" });
}
}
});
const app = createApp(App);
Object.keys(ElIconModules).forEach((key) => {
app.component(key, ElIconModules[key as keyof typeof ElIconModules]);
});
app.use(store, key);
app.use(router);
app.use(ElementPlus);
app.use(i18n);
app.mount("#app");
//注册
app.directive("permission", permission);
GlobalComponents(app);
//清空表单
app.config.globalProperties.$resetForm = resetForm;
//对象复制
app.config.globalProperties.$objCoppy = CopyData;
//确定弹框
app.config.globalProperties.$lqconfirm = LqConfirm;
src/mock/departmentManage.ts deleted 100644 → 0
浏览文件 @ be6baf29
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/department/index`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'type|+1': 0 ,
'code|+1': 'code001',
'children|1-10': [
{
"id|+1": 10,
cname: '@cname',
ename: '@name',
'type|+1': 0,
'code|+1': 'code002',
'children|1-10': [
{
"id|+1": 20,
cname: '@cname',
ename: '@name',
'type|+1': 0,
'code|+1': 'code003',
}
]
}
]
}
],
msg: null,
success: true
})
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/department/bizunit`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'depart|+1': '' ,
'product': '',
'code|+1': 'code001'
}
],
msg: null,
success: true
})
src/mock/index.ts deleted 100644 → 0
浏览文件 @ be6baf29
import Mock from "mockjs";
import '@/mock/login'
import '@/mock/table'
import '@/mock/departmentManage'
import '@/mock/project'
// 设置全局延时
Mock.setup({
timeout: '300-600'
})
\ No newline at end of file
src/mock/login.ts deleted 100644 → 0
浏览文件 @ be6baf29
import Mock from "mockjs";
// Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/login`, 'post', ({body}) => {
// let result = {data: {},code:0,message:''}
// const {name, password} = JSON.parse(body)
//
// let success = false
//
// if (success) {
// result.code = 0
// result.message = Mock.mock('@TIMEFIX').CN + '，欢迎回来'
//
// result.data = {"msg":"欢迎回来",'token':"iwoefwietowewewo"}
// } else {
// result.code = -1
// result.message = '账户名或密码错误（admin/888888 or test/888888）'
// }
// return result
// })
\ No newline at end of file
src/mock/project.ts deleted 100644 → 0
浏览文件 @ be6baf29
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/project/projectType`, {
code: 200,
'data|1-100': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'code|+1': 'code001',
'bizunits': [],
'effect_time': '@date',
'lose_effect_time': '@date',
'detail': ''
}
],
msg: null,
success: true
})
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/project/projectMaster`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
bizUnit: '研发事业部',
classificationIds: '',
classificationName: 'code001',
createTime: '@date',
'isEnabled|1': false,
name: '@cname',
notes: null,
'templatePhases|1-5': [
{
data: null,
children: [],
displayShow: null,
isLeaf: true,
'id|+1': 0,
label: '@cname',
'selected|1': false,
text: '',
title: '',
value: ''
}
]
}
],
msg: null,
success: true
})
src/mock/table.ts deleted 100644 → 0
浏览文件 @ be6baf29
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/systemMenus/index`, {
code: 200,
data: {
'treeList|1-10': [
{
"id|+1": 0,
icon: '',
lable: '@cname',
parentId: '',
'sort|0-100': 0,
'show|1': false,
controller: '@name',
url: '/index'
}
]
},
msg: null,
success: true
})
src/router/index.ts
浏览文件 @ 1b479add
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from '@/layout/index.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Layout,
redirect: '/licInformation',
},
{
path: '/login',
name: 'login',
component: () => import("@/views/login/login.vue"),
},
{
path: '/404',
name: '404',
component: () => import("@/views/exception/404.vue")
},
// {
// path: '/:catchAll(.*)',
// redirect: '/404'
// }
]
export const asyncRoutes: Array<RouteRecordRaw> = []
const router = createRouter({
history: createWebHashHistory(),
// routes = routes:routes
routes
})
export function addRoutes(routes:any){
router.addRoute(routes)
}
export default router;
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "@/layout/index.vue";
import { start, close } from "@/utils/nprogress";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: Layout,
redirect: "/licInformation",
children: [],
},
{
path: "/login",
name: "login",
component: () => import("@/views/login/login.vue"),
},
{
path: "/404",
name: "404",
component: () => import("@/views/exception/404.vue"),
},
];
export const asyncRoutes: Array<RouteRecordRaw> = [];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
router.beforeEach(() => {
start();
});
router.afterEach(() => {
close();
});
export function addRoutes(routes: any) {
router.addRoute(routes);
}
export default router;
src/views/system/userManage.vue
浏览文件 @ 1b479add
<template>
<div class="user-containter">
<el-form :inline="true">
<el-form-item label="账号">
<el-input placeholder="账号模糊查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-form :inline="true">
<el-form-item>
<el-button type="primary" @click="handleAdd">添加用户</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border>
<el-table-column type="selection"></el-table-column>
<el-table-column v-for="i in tableColumn" :label="i.label" :prop="i.prop" :width="i.width" align="center">
<template #default="scope" v-if="i.prop == 'avatar'">
<el-avatar :src="scope.row.avatar"></el-avatar>
</template>
</el-table-column>
<el-table-column label="操作" width="200px" align="center" fixed="right">
<template #default="scope">
<el-button type="text" @click="handleEditPwd(scope.row)">修改密码</el-button>
<el-divider direction="vertical" />
<el-button type="text" @click="handleEdit(scope)">编辑</el-button>
<el-divider direction="vertical" />
<el-popconfirm title="确认删除?" @confirm="handleDelete(scope)">
<template #reference>
<el-button type="text">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-drawer v-model="showDrawer" :title="drawerTitle">
<el-form class="form" ref="form" :rules="rules" :model="formData" size="large" label-position="right"
label-width="80px">
<el-form-item v-for="item in formColumn" :prop="item.prop" :label="item.label">
<el-input v-if="item.type == 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder">
</el-input>
<el-upload v-if="item.type == 'avatar'">
<img class="avatar" :src="formData[item.prop]" />
</el-upload>
<el-date-picker v-if="item.type == 'date'" v-model="formData[item.prop]" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"></el-date-picker>
<el-select v-if="item.type == 'select'" v-model="formData[item.prop]" multiple style="width: 300px">
<el-option v-for="i in roles" :key="i.id" :label="i.roleName" :value="i.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="showDrawer = false">关闭</el-button>
<el-button type="primary" @click="handleSubmit">{{ drawerTitle }}</el-button>
</el-form-item>
</el-form>
</el-drawer>
<el-dialog v-model="showDialog" title="修改密码" width="30%">
<el-form :model="editPwdData" ref="editPwdRef" :rules="rules" label-width="80px">
<el-form-item label="用户账号">
<el-input v-model="editPwdData.account" :disabled="true" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editPwdData.password" type="password" show-password clearable
placeholder="请输入密码" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="handlePwdAdd">确认</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { addUser, getUserInfo, editUser, deleteUser, getAllRole, findRoleByUser, editPassWord } from '@/services/api/user/userAPI'
import { valid } from 'mockjs';
const showDialog = ref(false)
const editPwdRef = ref()
const editPwdData = ref({
password: '',
account: ''
})
const tableColumn = reactive([
{
label: '用户账号',
prop: 'fauthAccount',
width: ''
},
{
label: '用户名',
prop: 'name',
width: ''
},
{
label: '工号',
prop: 'fworkNo',
width: ''
},
{
label: '工作地点',
prop: 'fworkAddr',
width: ''
},
{
label: '状态',
prop: 'fstate',
width: ''
},
{
label: '职位',
prop: 'fposition',
width: ''
},
{
label: '入职日期',
prop: 'finductionDate',
width: '155px'
},
{
label: '英文名',
prop: 'fenglishName',
width: ''
},
{
label: '部门',
prop: 'fdept',
width: ''
},
{
label: '头像',
prop: 'avatar',
width: ''
},
{
label: '创建人',
prop: 'fcreator',
width: ''
},
{
label: '创建日期',
prop: 'fdate',
width: '155px'
}
])
let tableData = ref([])
const form = ref()
let formColumn = reactive([
{
label: '用户账号',
prop: 'fauthAccount',
type: 'input',
placeholder: '请输入用户账号'
},
{
label: '用户名',
prop: 'name',
type: 'input',
placeholder: '请输入用户名'
},
{
label: '用户介绍',
prop: 'introduction',
type: 'input',
placeholder: '请输入用户介绍'
},
{
label: '工号',
prop: 'fworkNo',
type: 'input',
placeholder: '请输入工号'
},
{
label: '工作地点',
prop: 'fworkAddr',
type: 'input',
placeholder: '请输入工作地点'
},
{
label: '状态',
prop: 'fstate',
type: 'input',
placeholder: '请输入状态'
},
{
label: '角色分配',
prop: 'roles',
type: 'select',
placeholder: '分配角色'
},
{
label: '职位',
prop: 'fposition',
type: 'input',
placeholder: '请输入职位'
},
{
label: '手机',
prop: 'fphone',
type: 'input',
placeholder: '请输入手机'
},
{
label: '邮箱',
prop: 'fmail',
type: 'input',
placeholder: '请输入邮箱'
},
{
label: '入职日期',
prop: 'finductionDate',
type: 'date',
placeholder: '请输入入职日期'
},
{
label: '英文名',
prop: 'fenglishName',
type: 'input',
placeholder: '请输入英文名'
},
{
label: '部门',
prop: 'fdept',
type: 'input',
placeholder: '请输入部门'
},
{
label: '头像',
prop: 'avatar',
type: 'avatar'
}
])
const rules = reactive({
fauthAccount: [
{ required: true, message: '请输入用户账号', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' }
]
})
let formData = ref<any>({})
let drawerTitle = ref('')
let showDrawer = ref(false)
let roles = ref<any>([])
function init() {
getUserInfo().then((res) => {
if (res.code == 200) {
tableData.value = res.data.records
}
})
getAllRole().then((res) => {
if (res.code == 200) {
roles.value = res.data
}
})
}
function handleEditPwd(row: any) {
editPwdData.value.password = ''
editPwdData.value.account = row.fauthAccount
showDialog.value = true
}
function handlePwdAdd() {
editPwdRef.value?.validate((valid: boolean) => {
if (valid) {
editPassWord(editPwdData.value).then((res: any) => {
if (res.code === 200) {
showDialog.value = false
}
})
}
})
}
function handleEdit(scope: any) {
formData.value = {}
let params = {
userId: scope.row.userId
}
findRoleByUser(params).then((res) => {
if (res.code == 200) {
formData.value.roles = res.data
}
})
for (let i in scope.row) {
formData.value[i] = scope.row[i]
}
for (let j in formColumn) {
if (formColumn[j].prop == 'password') {
formColumn.splice(Number(j), 1)
break
}
}
for (let k in formData.value) {
if (k == 'password') {
delete formData[k]
break
}
}
drawerTitle.value = '编辑'
showDrawer.value = true
}
function handleAdd() {
formData.value = {}
formColumn.splice(1, 0, {
label: '登录密码',
prop: 'password',
type: 'input',
placeholder: '请输入登录密码'
})
drawerTitle.value = '添加'
showDrawer.value = true
}
function handleSubmit() {
if (drawerTitle.value == '添加') {
form.value.validate((valid: boolean) => {
if (valid) {
addUser(formData.value).then((res) => {
if (res.code == 200) {
init()
showDrawer.value = false
}
})
}
})
}
if (drawerTitle.value == '编辑') {
form.value.validate((valid: boolean) => {
if (valid) {
editUser(formData.value).then((res) => {
if (res.code == 200) {
init()
showDrawer.value = false
}
})
}
})
}
}
function handleDelete(scope: any) {
let params = {
userId: scope.row.userId
}
deleteUser(params).then((res) => {
if (res.code == 200) {
init()
}
})
}
init()
</script>
<style scoped>
.user-containter {
padding: 20px;
}
.form {
overflow-x: hidden;
overflow-y: auto;
height: calc(100vh - 120px);
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
align-items: center;
}
<template>
<div class="user-containter">
<el-form :inline="true">
<el-form-item label="账号">
<el-input placeholder="账号模糊查询"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-form :inline="true">
<el-form-item>
<el-button type="primary" @click="handleAdd">添加用户</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border>
<el-table-column type="selection"></el-table-column>
<el-table-column v-for="i in tableColumn" :label="i.label" :prop="i.prop" :width="i.width" align="center">
<template #default="scope" v-if="i.prop == 'avatar'">
<el-avatar :src="scope.row.avatar"></el-avatar>
</template>
</el-table-column>
<el-table-column label="操作" width="200px" align="center" fixed="right">
<template #default="scope">
<el-button type="text" @click="handleEditPwd(scope.row)">修改密码</el-button>
<el-divider direction="vertical" />
<el-button type="text" @click="handleEdit(scope)">编辑</el-button>
<el-divider direction="vertical" />
<el-popconfirm title="确认删除?" @confirm="handleDelete(scope)">
<template #reference>
<el-button type="text">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-drawer v-model="showDrawer" :title="drawerTitle">
<el-form class="form" ref="form" :rules="rules" :model="formData" size="large" label-position="right"
label-width="80px">
<el-form-item v-for="item in formColumn" :prop="item.prop" :label="item.label">
<el-input v-if="item.type == 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder">
</el-input>
<el-upload v-if="item.type == 'avatar'">
<img class="avatar" :src="formData[item.prop]" />
</el-upload>
<el-date-picker v-if="item.type == 'date'" v-model="formData[item.prop]" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"></el-date-picker>
<el-select v-if="item.type == 'select'" v-model="formData[item.prop]" multiple style="width: 300px">
<el-option v-for="i in roles" :key="i.id" :label="i.roleName" :value="i.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="showDrawer = false">关闭</el-button>
<el-button type="primary" @click="handleSubmit">{{ drawerTitle }}</el-button>
</el-form-item>
</el-form>
</el-drawer>
<el-dialog v-model="showDialog" title="修改密码" width="30%">
<el-form :model="editPwdData" ref="editPwdRef" :rules="rules" label-width="80px">
<el-form-item label="用户账号">
<el-input v-model="editPwdData.account" :disabled="true" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editPwdData.password" type="password" show-password clearable
placeholder="请输入密码" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="handlePwdAdd">确认</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { addUser, getUserInfo, editUser, deleteUser, getAllRole, findRoleByUser, editPassWord } from '@/services/api/user/userAPI'
const showDialog = ref(false)
const editPwdRef = ref()
const editPwdData = ref({
password: '',
account: ''
})
const tableColumn = reactive([
{
label: '用户账号',
prop: 'fauthAccount',
width: ''
},
{
label: '用户名',
prop: 'name',
width: ''
},
{
label: '工号',
prop: 'fworkNo',
width: ''
},
{
label: '工作地点',
prop: 'fworkAddr',
width: ''
},
{
label: '状态',
prop: 'fstate',
width: ''
},
{
label: '职位',
prop: 'fposition',
width: ''
},
{
label: '入职日期',
prop: 'finductionDate',
width: '155px'
},
{
label: '英文名',
prop: 'fenglishName',
width: ''
},
{
label: '部门',
prop: 'fdept',
width: ''
},
{
label: '头像',
prop: 'avatar',
width: ''
},
{
label: '创建人',
prop: 'fcreator',
width: ''
},
{
label: '创建日期',
prop: 'fdate',
width: '155px'
}
])
let tableData = ref([])
const form = ref()
let formColumn = reactive([
{
label: '用户账号',
prop: 'fauthAccount',
type: 'input',
placeholder: '请输入用户账号'
},
{
label: '用户名',
prop: 'name',
type: 'input',
placeholder: '请输入用户名'
},
{
label: '用户介绍',
prop: 'introduction',
type: 'input',
placeholder: '请输入用户介绍'
},
{
label: '工号',
prop: 'fworkNo',
type: 'input',
placeholder: '请输入工号'
},
{
label: '工作地点',
prop: 'fworkAddr',
type: 'input',
placeholder: '请输入工作地点'
},
{
label: '状态',
prop: 'fstate',
type: 'input',
placeholder: '请输入状态'
},
{
label: '角色分配',
prop: 'roles',
type: 'select',
placeholder: '分配角色'
},
{
label: '职位',
prop: 'fposition',
type: 'input',
placeholder: '请输入职位'
},
{
label: '手机',
prop: 'fphone',
type: 'input',
placeholder: '请输入手机'
},
{
label: '邮箱',
prop: 'fmail',
type: 'input',
placeholder: '请输入邮箱'
},
{
label: '入职日期',
prop: 'finductionDate',
type: 'date',
placeholder: '请输入入职日期'
},
{
label: '英文名',
prop: 'fenglishName',
type: 'input',
placeholder: '请输入英文名'
},
{
label: '部门',
prop: 'fdept',
type: 'input',
placeholder: '请输入部门'
},
{
label: '头像',
prop: 'avatar',
type: 'avatar'
}
])
const rules = reactive({
fauthAccount: [
{ required: true, message: '请输入用户账号', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' }
]
})
let formData = ref<any>({})
let drawerTitle = ref('')
let showDrawer = ref(false)
let roles = ref<any>([])
function init() {
getUserInfo().then((res) => {
if (res.code == 200) {
tableData.value = res.data.records
}
})
getAllRole().then((res) => {
if (res.code == 200) {
roles.value = res.data
}
})
}
function handleEditPwd(row: any) {
editPwdData.value.password = ''
editPwdData.value.account = row.fauthAccount
showDialog.value = true
}
function handlePwdAdd() {
editPwdRef.value?.validate((valid: boolean) => {
if (valid) {
editPassWord(editPwdData.value).then((res: any) => {
if (res.code === 200) {
showDialog.value = false
}
})
}
})
}
function handleEdit(scope: any) {
formData.value = {}
let params = {
userId: scope.row.userId
}
findRoleByUser(params).then((res) => {
if (res.code == 200) {
formData.value.roles = res.data
}
})
for (let i in scope.row) {
formData.value[i] = scope.row[i]
}
for (let j in formColumn) {
if (formColumn[j].prop == 'password') {
formColumn.splice(Number(j), 1)
break
}
}
for (let k in formData.value) {
if (k == 'password') {
delete formData[k]
break
}
}
drawerTitle.value = '编辑'
showDrawer.value = true
}
function handleAdd() {
formData.value = {}
formColumn.splice(1, 0, {
label: '登录密码',
prop: 'password',
type: 'input',
placeholder: '请输入登录密码'
})
drawerTitle.value = '添加'
showDrawer.value = true
}
function handleSubmit() {
if (drawerTitle.value == '添加') {
form.value.validate((valid: boolean) => {
if (valid) {
addUser(formData.value).then((res) => {
if (res.code == 200) {
init()
showDrawer.value = false
}
})
}
})
}
if (drawerTitle.value == '编辑') {
form.value.validate((valid: boolean) => {
if (valid) {
editUser(formData.value).then((res) => {
if (res.code == 200) {
init()
showDrawer.value = false
}
})
}
})
}
}
function handleDelete(scope: any) {
let params = {
userId: scope.row.userId
}
deleteUser(params).then((res) => {
if (res.code == 200) {
init()
}
})
}
init()
</script>
<style scoped>
.user-containter {
padding: 20px;
}
.form {
overflow-x: hidden;
overflow-y: auto;
height: calc(100vh - 120px);
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
align-items: center;
}
</style>
\ No newline at end of file
vite.config.ts
浏览文件 @ 1b479add
......@@ -12,7 +12,6 @@ import path from "path";
// import Icons from 'unplugin-icons/vite'
// import IconsResolver from 'unplugin-icons/resolver'
import Inspect from "vite-plugin-inspect";
import { viteMockServe } from "vite-plugin-mock";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
const pathSrc = path.resolve(__dirname, "src");
......@@ -28,10 +27,7 @@ export default ({ command, mode }) => {
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
viteMockServe({
// default
mockPath: "mock",
}),
// AutoImport({
// // Auto import functions from Vue, e.g. ref, reactive, toRef...
// // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
......@@ -86,7 +82,7 @@ export default ({ command, mode }) => {
// '/foo': '',
// 选项写法
"/lic": {
target: "http://192.168.1.41:8090",
target: "http://192.168.1.252:8090",
},
},
hmr: {
......@@ -94,7 +90,6 @@ export default ({ command, mode }) => {
},
},
resolve: {
// 设置项目文件导入路径
alias: {
"@": pathSrc,
},
......@@ -102,12 +97,9 @@ export default ({ command, mode }) => {
css: {
// css预处理器
preprocessorOptions: {
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
// 给导入的路径最后加上 ;
scss: {
charset: false, //防止样式出现警告，中文
additionalData: '@import "@/assets/styles/global.scss";',
additionalData: '@use "@/assets/styles/global.scss";',
},
},
},
......
yarn.lock deleted 100644 → 0
浏览文件 @ be6baf29
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论