5.16
This commit is contained in:
hezhidong
+24
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="//at.alicdn.com/t/c/font_3654542_filhj6brvds.css" />
|
||||
<title>后台管理系统</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<!-- 百度地图引入 -->
|
||||
<!-- <script type="text/javascript"
|
||||
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Ol0d1CqPErteakupIcX4actXo6GiQI7g"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1562
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "vue-manage-system",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite --host",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@braks/vue-flow": "^0.4.38",
|
||||
"@element-plus/icons-vue": "^1.1.4",
|
||||
"@kangc/v-md-editor": "^2.3.15",
|
||||
"@wangeditor/editor": "^5.1.14",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^0.27.2",
|
||||
"dingtalk-jsapi": "^2.15.6",
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.3.3",
|
||||
"element-plus": "^2.1.11",
|
||||
"js-base64": "^3.7.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"screenfull": "^6.0.1",
|
||||
"video.js": "^7.20.3",
|
||||
"vue": "^3.2.25",
|
||||
"vue-router": "^4.0.13",
|
||||
"vue-video-player": "^6.0.0",
|
||||
"vue3-print-nb": "^0.1.4",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.2",
|
||||
"vuex-persistedstate": "^4.1.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^2.3.1",
|
||||
"sass": "^1.51.0",
|
||||
"vite": "^2.9.7",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vue-cli-plugin-style-resources-loader": "~0.1.5"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
+25
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick, provide } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
// 局部组件刷新
|
||||
const isRouterAlive = ref(true);
|
||||
const globalStore = useStore();
|
||||
const reload = () => {
|
||||
isRouterAlive.value = false;
|
||||
nextTick(() => {
|
||||
isRouterAlive.value = true;
|
||||
console.log("数据刷新成功");
|
||||
});
|
||||
};
|
||||
|
||||
provide("reload", reload);
|
||||
onMounted(() => {
|
||||
globalStore.dispatch("user/changeThem", "#4060c7");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,67 @@
|
||||
import service from "../request.js";
|
||||
|
||||
// 获取组别列表
|
||||
export function getGroupList() {
|
||||
return service({
|
||||
url: "/group/list",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 添加组别
|
||||
export function addGroup(data) {
|
||||
return service({
|
||||
url: "/group",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改组别名称
|
||||
export function updateGroup(data) {
|
||||
return service({
|
||||
url: "/group",
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除组别
|
||||
export function deleteGroup(groupId) {
|
||||
return service({
|
||||
url: `/group/${groupId}`,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取未分组人员列表
|
||||
export function getNonGroupUsers() {
|
||||
return service({
|
||||
url: "/user/non/group",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 添加/修改组内人员角色
|
||||
export function updateGroupUserRole(groupId, userid, role) {
|
||||
return service({
|
||||
url: `/group/${groupId}/user/${userid}/role/${role}`,
|
||||
method: "post",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取组内人员列表
|
||||
export function getGroupUsers(groupId) {
|
||||
return service({
|
||||
url: `/user/${groupId}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 删除组内人员
|
||||
export function deleteGroupUser(groupId, userid) {
|
||||
return service({
|
||||
url: `/group/user/${groupId}/${userid}`,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import axios from "axios";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import router from "../router/router";
|
||||
|
||||
const errorCode = {
|
||||
401: "登录状态已过期,即将返回首页重新登录。",
|
||||
403: "当前操作没有权限",
|
||||
404: "访问资源不存在",
|
||||
default: "系统未知错误，请反馈给管理员",
|
||||
};
|
||||
|
||||
// 肖星越服务
|
||||
const url = "https://paystubs.vip.cpolar.top";
|
||||
|
||||
// 袁永军测试服务
|
||||
// const url = "https://crm-test.scdswj.cn/prod-api";
|
||||
|
||||
// 正式环境
|
||||
// const url = "https://paystubs.vip.cpolar.top";
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: url,
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// Request interceptors
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
if (sessionStorage.getItem("token")) {
|
||||
config.headers["Authorization"] =
|
||||
"Bearer " + sessionStorage.getItem("token");
|
||||
}
|
||||
if (sessionStorage.getItem("deptId")) {
|
||||
config.headers["selected-dept-id"] = sessionStorage.getItem("deptId");
|
||||
}
|
||||
|
||||
let params = config.params;
|
||||
let newData = {};
|
||||
for (let key in params) {
|
||||
if (params[key] !== null && params[key] !== "") {
|
||||
newData[key] = params[key];
|
||||
}
|
||||
}
|
||||
config.params = newData;
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptors
|
||||
service.interceptors.response.use(
|
||||
(res) => {
|
||||
// 对响应数据做点什么
|
||||
const response = res.data;
|
||||
const code = res.data.code || 200;
|
||||
const message = errorCode[code] || res.data.msg || errorCode["default"];
|
||||
if (code === 401) {
|
||||
if (res.code === 401 || res.code === 4001) {
|
||||
// 清除浏览器全部临时缓存
|
||||
// sessionStorage.clear();
|
||||
// localStorage.clear();
|
||||
router.push("/login");
|
||||
// store.commit('setMenuData', {});
|
||||
// resetRouter(); // 重置路由
|
||||
ElMessageBox.alert("你已被登出，请重新登录", "提示", {})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
}
|
||||
} else if (code === 500) {
|
||||
// Message({ message: msg, type: 'error' })
|
||||
ElMessage.error(message);
|
||||
return Promise.reject(new Error(msg));
|
||||
} else if (code === 601) {
|
||||
// Message({ message: msg, type: 'warning' })
|
||||
ElMessage.error(message);
|
||||
return Promise.reject("error");
|
||||
} else if (code != 200) {
|
||||
ElMessage.error(message);
|
||||
return Promise.reject("error");
|
||||
} else {
|
||||
return response;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.log("走了错误的", error);
|
||||
// 对响应错误做点什么
|
||||
if (error.message.indexOf("timeout") != -1) {
|
||||
ElMessage.error("网络超时");
|
||||
} else if (error.message == "Network Error") {
|
||||
ElMessage.error("网络连接错误");
|
||||
} else if (error.request.status == "401") {
|
||||
console.log("登录过期捕获到");
|
||||
sessionStorage.clear();
|
||||
router.push("/login");
|
||||
ElMessage.error("登录信息过期");
|
||||
} else {
|
||||
ElMessage.error(
|
||||
error.response.data.errmsg ||
|
||||
error.response.data.error ||
|
||||
error.response.data.errMessage
|
||||
);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default service;
|
||||
@@ -0,0 +1,41 @@
|
||||
export const showMessage = (status) => {
|
||||
let message = "";
|
||||
switch (status) {
|
||||
case 400:
|
||||
message = "请求错误(400)";
|
||||
break;
|
||||
case 401:
|
||||
message = "未授权，请重新登录(401)";
|
||||
break;
|
||||
case 403:
|
||||
message = "拒绝访问(403)";
|
||||
break;
|
||||
case 404:
|
||||
message = "请求出错(404)";
|
||||
break;
|
||||
case 408:
|
||||
message = "请求超时(408)";
|
||||
break;
|
||||
case 500:
|
||||
message = "服务器错误(500)";
|
||||
break;
|
||||
case 501:
|
||||
message = "服务未实现(501)";
|
||||
break;
|
||||
case 502:
|
||||
message = "网络错误(502)";
|
||||
break;
|
||||
case 503:
|
||||
message = "服务不可用(503)";
|
||||
break;
|
||||
case 504:
|
||||
message = "网络超时(504)";
|
||||
break;
|
||||
case 505:
|
||||
message = "HTTP版本不受支持(505)";
|
||||
break;
|
||||
default:
|
||||
message = `连接出错(${status})!`;
|
||||
}
|
||||
return `${message}，请检查网络或联系管理员！`;
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="videoPlay">
|
||||
<video
|
||||
ref="m3u8_video"
|
||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls
|
||||
>
|
||||
<source :src="videoSrc" />
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import videojs from 'video.js'
|
||||
import 'video.js/dist/video-js.css'
|
||||
const props = defineProps({
|
||||
videoSrc: String,
|
||||
autoPlay: Boolean,
|
||||
})
|
||||
|
||||
const m3u8_video = ref()
|
||||
let player
|
||||
const initPlay = async () => {
|
||||
videojs.addLanguage('zh-CN', zh)
|
||||
await nextTick()
|
||||
const options = {
|
||||
muted: true,
|
||||
controls: true,
|
||||
autoplay: true,
|
||||
loop: true,
|
||||
language: 'zh-CN',
|
||||
techOrder: ['html5'],
|
||||
}
|
||||
player = videojs(m3u8_video.value, options, () => {
|
||||
videojs.log('播放器已经准备好了!')
|
||||
if (props.autoPlay && props.videoSrc) {
|
||||
player.play()
|
||||
}
|
||||
player.on('ended', () => {
|
||||
videojs.log('播放结束了!')
|
||||
})
|
||||
player.on('error', () => {
|
||||
videojs.log('播放器解析出错!')
|
||||
})
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
initPlay()
|
||||
})
|
||||
//直接改变路径测试
|
||||
watch(
|
||||
() => props.videoSrc,
|
||||
() => {
|
||||
player.pause()
|
||||
player.src(props.videoSrc)
|
||||
player.load()
|
||||
if (props.videoSrc) {
|
||||
player.play()
|
||||
}
|
||||
}
|
||||
)
|
||||
onBeforeUnmount(() => {
|
||||
player?.dispose()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.videoPlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.video-js {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.vjs-tech) {
|
||||
object-fit: fill;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="添加数据">
|
||||
<el-form v-model="uploadFrom">
|
||||
<el-form-item label="文件上传:">
|
||||
<el-upload
|
||||
style="width: 80%"
|
||||
drag
|
||||
multiple
|
||||
:limit="excelLimit"
|
||||
:on-success="uploadSuccess"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处<em>或点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据覆盖:">
|
||||
<el-switch v-model="is_cover" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup name="filesUpload">
|
||||
import { ref, defineEmits } from 'vue'
|
||||
const excelLimit = ref(1)
|
||||
const dialogVisible = ref(false)
|
||||
const parameter = ref({})
|
||||
const is_cover = ref(false)
|
||||
const emit = defineEmits(['acceptParams'])
|
||||
|
||||
// 接收父组件参数
|
||||
const acceptParams = (params) => {
|
||||
parameter.value = params
|
||||
emit('gatewayData', parameter.value)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const uploadExcel = (param) => {
|
||||
console.log(param)
|
||||
}
|
||||
const uploadSuccess = (files) => {
|
||||
console.log('上传成功' + JSON.stringify(files))
|
||||
}
|
||||
// 接受父组件得参数
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
import draggable from "./modules/draggable";
|
||||
import copy from "./modules/copy";
|
||||
import debounce from "./modules/debounce";
|
||||
import longPress from "./modules/longPress";
|
||||
import throttle from "./modules/throttle";
|
||||
|
||||
const directivesList = {
|
||||
draggable,
|
||||
copy,
|
||||
debounce,
|
||||
longPress,
|
||||
throttle
|
||||
};
|
||||
|
||||
const directives = {
|
||||
install: function (app) {
|
||||
Object.keys(directivesList).forEach((key) => {
|
||||
// 注册所有自定义指令
|
||||
app.directive(key, directivesList[key]);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default directives;
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
需求：实现一个复制指定。复制指定内容至剪贴板
|
||||
1.动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
|
||||
2.将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
|
||||
3.选中值 textarea 并复制
|
||||
4.将 body 中插入的 textarea 移除
|
||||
5.在第一次调用时绑定事件，在解绑时移除事件
|
||||
*/
|
||||
import { ElMessage } from "element-plus";
|
||||
export const copy = {
|
||||
mounted: function (el, { value }) {
|
||||
console.log(arguments);
|
||||
el.$value = value;
|
||||
|
||||
el.onclick = () => {
|
||||
if (!el.$value) {
|
||||
// 值为空的时候，给出提示。可根据项目UI仔细设计
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "无复制内容",
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 动态创建 textarea 标签
|
||||
const textarea = document.createElement("input");
|
||||
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
|
||||
textarea.readOnly = "readonly";
|
||||
textarea.style.position = "absolute";
|
||||
textarea.style.left = "-9999px";
|
||||
// 将要 copy 的值赋给 textarea 标签的 value 属性
|
||||
textarea.value = el.$value;
|
||||
// 将 textarea 插入到 body 中
|
||||
document.body.appendChild(textarea);
|
||||
// 选中值并复制
|
||||
textarea.select();
|
||||
const result = document.execCommand("Copy");
|
||||
if (result) {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "复制成功",
|
||||
});
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
};
|
||||
// 绑定点击事件，就是所谓的一键 copy 啦
|
||||
el.addEventListener("click", el.handler);
|
||||
},
|
||||
// 当传进来的值更新的时候触发
|
||||
beforeUpdate(el, { value }) {
|
||||
el.$value = value;
|
||||
},
|
||||
// 指令与元素解绑的时候，移除事件绑定
|
||||
unmounted(el) {
|
||||
el.removeEventListener("click", el.handler);
|
||||
},
|
||||
};
|
||||
|
||||
export default copy;
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* v-debounce
|
||||
* 按钮防抖指令，可自行扩展至input
|
||||
* 接收参数：function类型
|
||||
*/
|
||||
|
||||
const debounce = {
|
||||
mounted(el, binding) {
|
||||
if (typeof binding.value != "function") {
|
||||
console.log("callback must be a function");
|
||||
}
|
||||
let timer = null;
|
||||
el.__handleClick__ = function () {
|
||||
// if (timer) clearInterval(timer);
|
||||
//
|
||||
timer && clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
binding.value();
|
||||
}, 3000);
|
||||
};
|
||||
el.addEventListener("click", el.__handleClick__);
|
||||
},
|
||||
beforeUnmount(el) {
|
||||
el.removeEventListener("click", el.__handleClick__);
|
||||
},
|
||||
};
|
||||
|
||||
export default debounce;
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
|
||||
|
||||
思路：
|
||||
1、设置需要拖拽的元素为absolute，其父元素为relative。
|
||||
2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
|
||||
3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
|
||||
4、鼠标松开(onmouseup)时完成一次拖拽
|
||||
|
||||
使用：在 Dom 上加上 v-draggable 即可
|
||||
<div class="dialog-model" v-draggable></div>
|
||||
*/
|
||||
const draggable = {
|
||||
mounted: function (el) {
|
||||
console.log(el)
|
||||
el.style.cursor = "move";
|
||||
el.style.position = "absolute";
|
||||
el.onmousedown = function (e) {
|
||||
let disX = e.pageX - el.offsetLeft;
|
||||
let disY = e.pageY - el.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
let x = e.pageX - disX;
|
||||
let y = e.pageY - disY;
|
||||
console.log(el.parentNode.offsetWidth)
|
||||
let maxX = el.parentNode.offsetWidth - el.offsetWidth;
|
||||
let maxY = el.parentNode.offsetHeight - el.offsetHeight;
|
||||
if (x < 0) {
|
||||
x = 0;
|
||||
} else if (x > maxX) {
|
||||
x = maxX;
|
||||
}
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > maxY) {
|
||||
y = maxY;
|
||||
}
|
||||
el.style.left = x + "px";
|
||||
el.style.top = y + "px";
|
||||
};
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
export default draggable;
|
||||
@@ -0,0 +1,44 @@
|
||||
const longPress = {
|
||||
mounted(el, binding) {
|
||||
if (typeof binding.value != "function") {
|
||||
console.log("callback must be a function");
|
||||
}
|
||||
let pressTimer = null;
|
||||
let start = (e) => {
|
||||
if (e.type === "click" && e.button !== 0) {
|
||||
return;
|
||||
}
|
||||
if (pressTimer === null) {
|
||||
pressTimer = setTimeout(() => {
|
||||
// 执行函数
|
||||
handler();
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
// 取消计时器
|
||||
let cancel = () => {
|
||||
// 检查计时器是否有值
|
||||
if (pressTimer !== null) {
|
||||
clearTimeout(pressTimer);
|
||||
pressTimer = null;
|
||||
}
|
||||
};
|
||||
// 运行函数
|
||||
const handler = (e) => {
|
||||
// 执行传递给指令的方法
|
||||
binding.value(e);
|
||||
console.log(e);
|
||||
};
|
||||
// 添加事件监听器
|
||||
el.addEventListener("mousedown", start);
|
||||
el.addEventListener("touchstart", start);
|
||||
el.addEventListener("click", start);
|
||||
// 取消计时器
|
||||
el.addEventListener("click", cancel);
|
||||
el.addEventListener("mouseout", cancel);
|
||||
el.addEventListener("touchend", cancel);
|
||||
el.addEventListener("touchcancel", cancel);
|
||||
},
|
||||
};
|
||||
|
||||
export default longPress;
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* 一段时间内控制请求的频率
|
||||
* 上一次时间触发的时间和这次触发的时间相减 传入节流的时间
|
||||
*
|
||||
*
|
||||
* 应用场景：scroll加载的时候 和input框输入的情况
|
||||
*/
|
||||
|
||||
const throttle = {
|
||||
mounted(el, binding) {
|
||||
if (typeof binding.value != "function") {
|
||||
console.log("callback must be a function");
|
||||
}
|
||||
let lastTime = 0
|
||||
|
||||
let newtimer = +new Date(); //拿到当前的时间
|
||||
el.__handleClick__ = function () {
|
||||
if (newtimer - lastTime > 3000) {
|
||||
binding.value()
|
||||
lastTime = newtimer
|
||||
}
|
||||
};
|
||||
el.addEventListener("click", el.__handleClick__);
|
||||
},
|
||||
beforeUnmount(el) {
|
||||
el.removeEventListener("click", el.__handleClick__);
|
||||
},
|
||||
}
|
||||
|
||||
export default throttle
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="tags">
|
||||
<el-tag
|
||||
ref="tagRef"
|
||||
v-for="tag in tags"
|
||||
:key="tag.title"
|
||||
class="mR10 tabs"
|
||||
:closable="tag.close"
|
||||
:effect="tag.checked ? 'dark' : 'plain'"
|
||||
@click="tagChange(tag)"
|
||||
@close="delectTag(tag, index)"
|
||||
>
|
||||
<el-icon class="tabs-icon">
|
||||
<component :is="tag.icon"></component>
|
||||
</el-icon>
|
||||
{{ tag.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import store from '../../store/index.js'
|
||||
import { useStore } from 'vuex'
|
||||
const tabsMenuValue = ref('')
|
||||
const nameScroll = ref(false)
|
||||
const tagRef = ref()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const globalStore = useStore() // 该方法用于返回store 实例
|
||||
// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
let params = {
|
||||
title: route.meta.name,
|
||||
url: route.path,
|
||||
icon: 'Menu',
|
||||
close: true,
|
||||
checked: true,
|
||||
}
|
||||
globalStore.dispatch('tabs/addTabs', params)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
const tags = store.getters.tabsMenuList
|
||||
|
||||
const tagChange = (item) => {
|
||||
item.checked = true
|
||||
router.push(item.url)
|
||||
}
|
||||
const delectTag = (item, index) => {
|
||||
globalStore.dispatch('tabs/delectTag', item)
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags {
|
||||
width: 95%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
overflow: scroll;
|
||||
white-space: nowrap;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.tabs {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<el-icon class="icon-style" id="collapseIcon" @click="changeShrinkage">
|
||||
<component :is="!isCollapse ? 'Fold' : 'Expand'"></component>
|
||||
</el-icon>
|
||||
<el-breadcrumb separator="/" id="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
|
||||
<span class="no-redirect" v-if="index === breadcrumbList.length - 1" :style="{ color: themeConfig.footColor }">{{ item.meta.name }}</span>
|
||||
<span class="redirect" v-else @click="handleRedirect(item.path)" :style="{ color: themeConfig.footColor }">{{ item.meta.name }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import store from "../../../store";
|
||||
import { useStore } from "vuex";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const breadcrumbList = ref([]);
|
||||
const isCollapse = ref(false);
|
||||
const globalStore = useStore();
|
||||
const themeConfig = store.getters.themeConfig;
|
||||
const initBreadcrumbList = () => {
|
||||
breadcrumbList.value = route.matched;
|
||||
console.log(route.matched);
|
||||
};
|
||||
const handleRedirect = (path) => {
|
||||
router.push(path);
|
||||
};
|
||||
|
||||
const changeShrinkage = () => {
|
||||
isCollapse.value = !store.getters.isCollapse;
|
||||
globalStore.dispatch("user/changeIsCollapse", isCollapse.value);
|
||||
};
|
||||
|
||||
watch(
|
||||
route,
|
||||
() => {
|
||||
initBreadcrumbList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-redirect {
|
||||
// color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
.redirect {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #97a8be;
|
||||
}
|
||||
}
|
||||
.icon-style {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
export const steps = () => [{
|
||||
element: "#guide",
|
||||
popover: {
|
||||
title: "菜单栏",
|
||||
description: "Body of the popover",
|
||||
position: "left",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "#breadcrumb",
|
||||
popover: {
|
||||
title: "标签页",
|
||||
description: "",
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "#screenFul",
|
||||
popover: {
|
||||
title: "全屏",
|
||||
description: "Body of the popover",
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<el-icon @click="handleDriver"><Position /></el-icon>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Driver from 'driver.js'
|
||||
import 'driver.js/dist/driver.min.css'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { steps } from './index.js'
|
||||
|
||||
let driver = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
driver.value = new Driver({
|
||||
className: 'scoped-class', //包裹driver.js弹窗的类名 className to wrap driver.js popover
|
||||
animate: true, // 高亮元素改变时是否显示动画 Animate while changing highlighted element
|
||||
opacity: 0.75, //背景透明度(0 表示只有弹窗并且没有遮罩) Background opacity (0 means only popovers and without overlay)
|
||||
padding: 10, // 元素与边缘的距离 Distance of element from around the edges
|
||||
allowClose: true, // 是否允许点击遮罩时关闭 Whether clicking on overlay should close or not
|
||||
overlayClickNext: false, //是否允许点击遮罩时移到到下一步 Should it move to next step on overlay click
|
||||
doneBtnText: '完成', // 最终按钮上的文本 Text on the final button
|
||||
closeBtnText: '跳过', // 当前步骤关闭按钮上的文本 Text on the close button for this step
|
||||
nextBtnText: '下一步', //当前步骤下一步按钮上的文本 Next button text for this step
|
||||
prevBtnText: '上一步',
|
||||
})
|
||||
})
|
||||
const handleDriver = () => {
|
||||
driver.value.defineSteps(steps)
|
||||
driver.value.start()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<el-icon class="icon-style" @click="dialogVisible = true"><Search /></el-icon>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :show-close="false">
|
||||
<template #header>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
placeholder="搜索"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<div class="centent col-center">暂无搜索结果🦁🦁🦁🦁</div>
|
||||
<template #footer>
|
||||
<div class="footer-tip flx-row">
|
||||
<span>↩</span> 确认 <span class="ml10">⇅</span>切换
|
||||
<span class="ml10" style="font-size: 10px">ESC</span>关闭
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Search, Top, Bottom } from '@element-plus/icons-vue'
|
||||
import { nextTick, onMounted, ref } from 'vue'
|
||||
const dialogVisible = ref(false)
|
||||
const searchValue = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
document.addEventListener('keyup', function (e) {
|
||||
if (e.keyCode == 27) {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-with-select {
|
||||
height: 40px;
|
||||
}
|
||||
.footer-tip {
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
padding-bottom: 2px;
|
||||
margin-right: 0.4em;
|
||||
background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
|
||||
0 1px 2px 1px #1e235a66;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-dropdown placement="bottom">
|
||||
<div class="flx-center">
|
||||
<div class="avatar">
|
||||
<img src="../../../assets/images/avart.jpg" alt="avatar" />
|
||||
</div>
|
||||
<span class="username" :style="{ color: themeConfig.footColor }">BIG CUTE</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
|
||||
<el-dropdown-item @click="gotoLogin">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import store from "../../../store/index.js";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const themeConfig = store.getters.themeConfig;
|
||||
const handleClick = () => {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert("button click");
|
||||
};
|
||||
|
||||
const gotoLogin = () => {
|
||||
sessionStorage.removeItem("token");
|
||||
router.push("/login");
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dropdown {
|
||||
cursor: pointer;
|
||||
.el-tooltip__trigger {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
font-size: 15px;
|
||||
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<el-icon id="fullscreen" class="icon-style" @click="handleFullScreen">
|
||||
<component :is="icon ? 'Rank' : 'FullScreen'"></component>
|
||||
</el-icon>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import screenfull from 'screenfull'
|
||||
import { ref, onMounted, onBeforeMount } from 'vue'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
let icon = ref(screenfull.isFullscreen)
|
||||
const handleFullScreen = () => {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
const changeIcon = () => {
|
||||
icon.value = screenfull.isFullscreen
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
screenfull.on('change', changeIcon)
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
screenfull.off('change')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<el-popover :width="400" placement="bottom" trigger="click">
|
||||
<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> -->
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="通知" name="first">
|
||||
<div class="notice-lists">
|
||||
<div class="item one-cut-txt" v-for="item in notList" :key="item.id">
|
||||
<span class="type">通知</span> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="公告" name="second">
|
||||
<div class="notice-lists">
|
||||
<div class="item one-cut-txt" v-for="item in notList" :key="item.id">
|
||||
<span class="type">公告</span> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="系统消息" name="third">
|
||||
<div class="notice-lists">
|
||||
<div class="item one-cut-txt" v-for="item in notList" :key="item.id">
|
||||
<span class="type" style="color: rgb(47, 96, 194); background-color: #e8f3ff"
|
||||
>系统消息</span
|
||||
>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #reference>
|
||||
<el-icon class="icon-style" @click="visible = !visible"><bell /></el-icon>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
<script setup name="messages">
|
||||
import { Bell } from "@element-plus/icons-vue";
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
|
||||
const visible = ref(false);
|
||||
const activeName = ref("first");
|
||||
const notList = ref("first");
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon-style {
|
||||
font-size: 20px;
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 11px;
|
||||
}
|
||||
.notice-lists {
|
||||
height: 260px;
|
||||
overflow: scroll;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
color: #666;
|
||||
|
||||
.type {
|
||||
font-size: 10px;
|
||||
padding: 5px 10px;
|
||||
font-weight: 500;
|
||||
line-height: 0px;
|
||||
color: #fa4a1e;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
background: #fa4a1e14;
|
||||
|
||||
&.error-type {
|
||||
color: #4060c7;
|
||||
background: #e8f3ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<el-icon @click="openDrawer" class="icon-style"><Setting /></el-icon>
|
||||
<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
|
||||
<el-divider>主题颜色</el-divider>
|
||||
<div class="flx-row">
|
||||
<div
|
||||
class="theme-item"
|
||||
v-for="item in colorList"
|
||||
:key="item"
|
||||
:style="{ backgroundColor: item }"
|
||||
@click="changePrimary(item)"
|
||||
>
|
||||
<el-icon v-if="item == themeConfig.primary" class="icon"
|
||||
><Select
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider>导航栏颜色</el-divider>
|
||||
<div class="flx-row">
|
||||
<div
|
||||
class="theme-item"
|
||||
v-for="item in tabColorList"
|
||||
:key="item"
|
||||
:style="{ backgroundColor: item }"
|
||||
@click="changeTabCole(item)"
|
||||
>
|
||||
<el-icon v-if="item == themeConfig.tabColor" class="icon"
|
||||
><Select
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Check" :inactive-icon="Close" /> -->
|
||||
<div class="flx-row">
|
||||
<div class="flx-tit">侧边栏模式</div>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
@change="changeGreyOrWeak($event)"
|
||||
class="mt-2"
|
||||
style="margin-left: 24px"
|
||||
inline-prompt
|
||||
:active-icon="Sunny"
|
||||
:inactive-icon="Moon"
|
||||
/>
|
||||
</div>
|
||||
<div class="flx-row">
|
||||
<div class="flx-tit">标签栏是否显示</div>
|
||||
<el-switch
|
||||
v-model="istags"
|
||||
@change="changeTags($event)"
|
||||
class="mt-2"
|
||||
style="margin-left: 24px"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="theme-item">
|
||||
<el-color-picker
|
||||
v-model="themeConfig.primary"
|
||||
:predefine="colorList"
|
||||
@change="changePrimary"
|
||||
>
|
||||
</el-color-picker>
|
||||
</div> -->
|
||||
<!-- <div class="theme-item">
|
||||
<span>暗黑模式</span>
|
||||
<SwitchDark></SwitchDark>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<span>灰色模式</span>
|
||||
<el-switch
|
||||
v-model="themeConfig.isGrey"
|
||||
@change="changeGreyOrWeak($event, 'grey')"
|
||||
/>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<span>色弱模式</span>
|
||||
<el-switch
|
||||
v-model="themeConfig.isWeak"
|
||||
@change="changeGreyOrWeak($event, 'weak')"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<el-divider class="divider" content-position="center">
|
||||
<el-icon><Setting /></el-icon>
|
||||
界面设置
|
||||
</el-divider>
|
||||
<div class="theme-item">
|
||||
<span>折叠菜单</span>
|
||||
<el-switch v-model="isCollapse" />
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<span>面包屑导航</span>
|
||||
<el-switch v-model="themeConfig.breadcrumb" />
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<span>标签栏</span>
|
||||
<el-switch v-model="themeConfig.tabs" />
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<span>页脚</span>
|
||||
<el-switch v-model="themeConfig.footer" />
|
||||
</div> -->
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, useAttrs } from 'vue'
|
||||
import { Sunny, Moon } from '@element-plus/icons-vue'
|
||||
import store from '../../../store/index.js'
|
||||
import { mix } from '../../../utils/color.js'
|
||||
import { useStore } from 'vuex'
|
||||
const value2 = ref(true)
|
||||
const istags = computed(() => {
|
||||
return store.getters.themeConfig.istags
|
||||
})
|
||||
// 预定义主题颜色
|
||||
const colorList = [
|
||||
'#4060c7',
|
||||
'#409EFF',
|
||||
'#009688',
|
||||
'#27ae60',
|
||||
'#e74c3c',
|
||||
'#fd726d',
|
||||
'#f39c12',
|
||||
'#9b59b6',
|
||||
]
|
||||
// 预导航栏颜色
|
||||
const tabColorList = [
|
||||
'#FFFFFF',
|
||||
'#333333',
|
||||
'#009688',
|
||||
'#27ae60',
|
||||
'#e74c3c',
|
||||
'#fd726d',
|
||||
'#f39c12',
|
||||
'#9b59b6',
|
||||
]
|
||||
|
||||
// 主题初始化
|
||||
const globalStore = useStore()
|
||||
const themeConfig = computed(() => {
|
||||
return store.getters.themeConfig
|
||||
})
|
||||
|
||||
const changePrimary = (val) => {
|
||||
globalStore.dispatch('user/changeThem', val)
|
||||
}
|
||||
const changeTabCole = (val) => {
|
||||
globalStore.dispatch('user/changeTabColor', val)
|
||||
}
|
||||
const drawerVisible = ref(false)
|
||||
const openDrawer = () => {
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
const changeGreyOrWeak = (e) => {
|
||||
globalStore.dispatch('user/changeMenuColor', e)
|
||||
}
|
||||
const changeTags = (e) => {
|
||||
globalStore.dispatch('user/changeTags', e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-style {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 11px;
|
||||
}
|
||||
.flx-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flx-tit {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
.theme-item {
|
||||
margin: 16px 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
.icon {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div
|
||||
class="header"
|
||||
:style="{ backgroundColor: themeConfig.tabColor, color: themeConfig.footColor }"
|
||||
>
|
||||
<div class="header-lf flx-center">
|
||||
<Breadcrumb></Breadcrumb>
|
||||
</div>
|
||||
<div class="header-ri flx-center">
|
||||
<!-- <Search></Search> -->
|
||||
<el-icon class="icon-style" @click="refresh"><Refresh /></el-icon>
|
||||
<!-- <message></message> -->
|
||||
|
||||
<!-- <Driver></Driver> -->
|
||||
<fullScreen></fullScreen>
|
||||
<avatar></avatar>
|
||||
<setting></setting>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="header">
|
||||
import { inject, ref } from "vue";
|
||||
import store from "../../store/index.js";
|
||||
// import { Setting, Search } from '@element-plus/icons-vue'
|
||||
import avatar from "./components/avatar.vue";
|
||||
import setting from "./components/setting.vue";
|
||||
import Search from "./components/Search.vue";
|
||||
import fullScreen from "./components/fullScreen.vue";
|
||||
import message from "./components/message.vue";
|
||||
import Breadcrumb from "./components/Breadcrumb.vue";
|
||||
// import Driver from "./components/Driver/index.vue";
|
||||
// 局部数据刷新
|
||||
const refresh = inject("reload");
|
||||
|
||||
const themeConfig = store.getters.themeConfig;
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
|
||||
.header-lf {
|
||||
.collapse-icon {
|
||||
font-size: 22px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.header-ri {
|
||||
// margin-left:10px;
|
||||
|
||||
.message-box {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
background-color: #d54f50;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.bell-icon {
|
||||
font-size: 22px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-style {
|
||||
font-size: 20px;
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
.el-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
.el-aside {
|
||||
width: auto;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.el-header,
|
||||
.el-footer {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-tabs {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background: #f0f2f5;
|
||||
padding: 10px 13px;
|
||||
box-sizing: border-box;
|
||||
// 防止切换出现横向滚动条
|
||||
overflow-x: hidden;
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #f5f5f5;
|
||||
// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
// border-radius: 4px;
|
||||
// padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: hidden !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.shake {
|
||||
animation: shake 0.5s linear;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<el-container class="container">
|
||||
<el-aside :style="{ backgroundColor: themeConfig.backgroundColor }"
|
||||
><Menu></Menu
|
||||
></el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<Header></Header>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="main-tabs flx-row" v-if="themeConfig.istags">
|
||||
<tabs></tabs>
|
||||
</div>
|
||||
|
||||
<div class="main-box">
|
||||
<router-view :class="{ shake: disabled }"></router-view>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup name="layout">
|
||||
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
|
||||
import { ref, watch } from 'vue'
|
||||
import store from '../store/index.js'
|
||||
import Header from './header/index.vue'
|
||||
import Menu from './menu/index.vue'
|
||||
import tabs from './Tabs/index.vue'
|
||||
const themeConfig = store.getters.themeConfig
|
||||
console.log(themeConfig.backgroundColor)
|
||||
|
||||
let router = useRouter()
|
||||
const disabled = ref(false)
|
||||
// onMounted(() => {
|
||||
// disabled.value = true
|
||||
// setTimeout(() => {
|
||||
// disabled.value = false
|
||||
// }, 1500)
|
||||
// })
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.path,
|
||||
(newValue, oldValue) => {
|
||||
console.log('watch', newValue)
|
||||
console.log('watch', oldValue)
|
||||
if (newValue == oldValue) {
|
||||
} else {
|
||||
disabled.value = true
|
||||
setTimeout(() => {
|
||||
disabled.value = false
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<template v-for="subItem in menuList" :key="subItem.path">
|
||||
<el-sub-menu
|
||||
v-if="subItem.children && subItem.children.length > 0"
|
||||
:index="subItem.path"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="subItem.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ subItem.meta.title }}</span>
|
||||
</template>
|
||||
<Menu-items :menuList="subItem.children"></Menu-items>
|
||||
<!--<template v-for="child in subItem.children" :key="child.path">
|
||||
<template v-if="child.children && child.children.length > 0">
|
||||
<Menu-items :menuList="child.children"></Menu-items>
|
||||
</template>
|
||||
<el-menu-item v-else :index="child.path">
|
||||
<el-icon>
|
||||
<component :is="child.meta.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ child.meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template> -->
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :index="subItem.path">
|
||||
<el-icon>
|
||||
<component :is="subItem.meta.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ subItem.meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(["menuList"]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icons {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<template v-for="subItem in menuList" :key="subItem.path">
|
||||
<el-menu-item v-if="!subItem.children" :index="subItem.url" :route="subItem.url">
|
||||
<el-icon>
|
||||
<component :is="subItem.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ subItem.title }}</span>
|
||||
</el-menu-item>
|
||||
<!--有多级菜单-->
|
||||
<el-sub-menu v-if="subItem.children" :key="subItem.url" :index="subItem.url">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="subItem.icon"></component>
|
||||
</el-icon>
|
||||
<span> {{ subItem.title }}</span>
|
||||
</template>
|
||||
<!--递归组件，把遍历的值传回子组件，完成递归调用-->
|
||||
<menu-items :menuList="subItem.children"></menu-items>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(["menuList"]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icons {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
.menu {
|
||||
transition: all 0.3s ease;
|
||||
background: #20222a;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
transition: width 0.3s ease;
|
||||
height: 55px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid #1d1e26;
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
|
||||
|
||||
span {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #dadada;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
object-fit: contain;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 55px);
|
||||
|
||||
.el-menu {
|
||||
// flex: 1;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
border: none !important;
|
||||
width: 100% !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #20222a;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #41444b;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
width: 200px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #060708 !important;
|
||||
}
|
||||
|
||||
&.is-active::before {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: $bg-color;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.href {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #bdbdc0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .el-menu--popup {
|
||||
// .el-menu-item {
|
||||
// background-color: #20222a;
|
||||
// width: 200px;
|
||||
|
||||
// i {
|
||||
// margin-right: 5px;
|
||||
// }
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: hsla(0, 0%, 100%, 0.7);
|
||||
// }
|
||||
// //
|
||||
// &:hover {
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: #fff !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.is-active {
|
||||
// background-color: #060708 !important;
|
||||
|
||||
// &:before {
|
||||
// content: "";
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// width: 4px;
|
||||
// background: $bg-color;
|
||||
// position: absolute;
|
||||
// }
|
||||
|
||||
// i,
|
||||
// span {
|
||||
// color: #fff !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div
|
||||
id="guide"
|
||||
class="menu"
|
||||
:style="{
|
||||
width: store.getters.isCollapse == true ? '' : '200px',
|
||||
height: '100%',
|
||||
color: themeConfig.textColor,
|
||||
}"
|
||||
>
|
||||
<div class="logo" v-if="!store.getters.isCollapse">
|
||||
<img src="../../assets/logo.png" alt="" style="margin-right: 5px" /> BIG CUTE
|
||||
</div>
|
||||
<div class="logo" v-else>
|
||||
<img src="../../assets/logo.png" alt="" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 100%">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:router="true"
|
||||
:collapse="store.getters.isCollapse"
|
||||
:collapse-transition="false"
|
||||
:unique-opened="true"
|
||||
:background-color="themeConfig.backgroundColor"
|
||||
:text-color="themeConfig.textColor"
|
||||
:active-text-color="themeConfig.primary"
|
||||
>
|
||||
<menuItems :menuList="menuList"></menuItems>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import store from "../../store/index.js";
|
||||
import menuItems from "./components/menuItems.vue";
|
||||
// 引入本地路由表渲染导航栏
|
||||
import menuTable from "./menuTable.js";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
const activeMenu = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
const menuList = ref([]);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const themeConfig = store.getters.themeConfig;
|
||||
|
||||
// 菜单表存在后端的操作方式
|
||||
onMounted(() => {
|
||||
// 获取本地菜单表渲染
|
||||
menuList.value = menuTable;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu {
|
||||
// width: 200px;
|
||||
.logo {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 20px;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
img {
|
||||
width: 25px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
// 菜单列表改了路由要记得改菜单相互匹配
|
||||
const menuTable = [
|
||||
{
|
||||
title: "首页",
|
||||
url: "/home",
|
||||
icon: "HomeFilled",
|
||||
},
|
||||
{
|
||||
title: "组别管理",
|
||||
url: "/groupManagement",
|
||||
icon: "Notebook",
|
||||
},
|
||||
];
|
||||
export default menuTable;
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import { createApp } from "vue";
|
||||
import router from "./router/index";
|
||||
import store from "../src/store/index";
|
||||
import "./styles/common.scss";
|
||||
import ElementPlus from "element-plus";
|
||||
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||||
// 引入注册自定义指令
|
||||
import directives from "./instruction/index.js";
|
||||
import "element-plus/dist/index.css";
|
||||
import App from "./App.vue";
|
||||
import * as ELIcons from "@element-plus/icons-vue";
|
||||
|
||||
import VMdEditor from "@kangc/v-md-editor";
|
||||
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
|
||||
import "@kangc/v-md-editor/lib/style/base-editor.css";
|
||||
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
|
||||
|
||||
VMdEditor.use(vuepressTheme);
|
||||
const app = createApp(App);
|
||||
|
||||
// 小图标引用
|
||||
for (const iconName in ELIcons) {
|
||||
// 注册组件
|
||||
app.component(iconName, ELIcons[iconName]);
|
||||
}
|
||||
|
||||
app.use(router).use(store).use(directives).use(VMdEditor).use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
@@ -0,0 +1,30 @@
|
||||
import router from "./router.js";
|
||||
import NProgress from "nprogress";
|
||||
import "nprogress/nprogress.css";
|
||||
|
||||
NProgress.configure({
|
||||
ease: "ease",
|
||||
speed: 500,
|
||||
});
|
||||
|
||||
const writeNames = ["/login"];
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// NProgress.start();
|
||||
// if (sessionStorage.getItem("token")) {
|
||||
// if (to.path === "/login") {
|
||||
// next("/");
|
||||
// }
|
||||
// return next();
|
||||
// } else {
|
||||
// if (writeNames.includes(to.path)) {
|
||||
// next();
|
||||
// } else {
|
||||
// next("/login");
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
router.afterEach((transition) => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,52 @@
|
||||
// 模板自带的功能路由表
|
||||
import login from "../views/login/index.vue";
|
||||
import Layout from "../layout/index.vue";
|
||||
const routerList = [
|
||||
{
|
||||
path: "/login",
|
||||
name: login,
|
||||
component: login,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
component: Layout,
|
||||
name: "container",
|
||||
redirect: "home",
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "首页",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/home",
|
||||
name: "home",
|
||||
component: () => import("../views/home/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "首页",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/group",
|
||||
name: "employe",
|
||||
component: Layout,
|
||||
meta: {
|
||||
requiresAuth: true, //有一些页面是否登录才能进去
|
||||
name: "组别管理",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/groupManagement",
|
||||
name: "groupManagement",
|
||||
component: () => import("../views/groupManagement/index.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "组别管理",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export default routerList;
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import home from "../views/home/index.vue";
|
||||
import login from "../views/login/index.vue";
|
||||
import Layout from "../layout/index.vue";
|
||||
// 原本模板功能路由表
|
||||
import routerList from "./originalRoutingTable.js";
|
||||
|
||||
const routes = routerList;
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,9 @@
|
||||
const getters = {
|
||||
token: (state) => state.user.token,
|
||||
isCollapse: (state) => state.user.isCollapse,
|
||||
UserInfo: (state) => state.user.UserInfo,
|
||||
themeConfig: (state) => state.user.themeConfig,
|
||||
tabsMenuList: (state) => state.tabs.tabsMenuList
|
||||
};
|
||||
|
||||
export default getters;
|
||||
@@ -0,0 +1,23 @@
|
||||
import {
|
||||
createStore
|
||||
} from "vuex";
|
||||
import user from "./modules/users";
|
||||
import tabs from './modules/tabs'
|
||||
import getters from "./getters";
|
||||
import createPersistedState from "vuex-persistedstate";
|
||||
export default createStore({
|
||||
getters,
|
||||
modules: {
|
||||
user,
|
||||
tabs
|
||||
},
|
||||
plugins: [
|
||||
// 默认储存在localstorage
|
||||
createPersistedState({
|
||||
// 本地储存名
|
||||
key: "user",
|
||||
// 指定模块
|
||||
paths: ["user"],
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
ElStep
|
||||
} from "element-plus";
|
||||
import router from "../../router/router.js";
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
tabsMenuList: [{
|
||||
title: "首页",
|
||||
url: 'home',
|
||||
icon: "Menu",
|
||||
close: false,
|
||||
checked: true
|
||||
}]
|
||||
},
|
||||
mutations: {
|
||||
addTabsMenu(state, obj) {
|
||||
|
||||
let titles = state.tabsMenuList.map(item => item.title).join(',')
|
||||
if (titles.includes(obj.title)) {
|
||||
for (let index = 0; index < state.tabsMenuList.length; index++) {
|
||||
const element = state.tabsMenuList[index];
|
||||
state.tabsMenuList[index].checked = false
|
||||
if (element.title == obj.title) {
|
||||
state.tabsMenuList[index].checked = true
|
||||
}
|
||||
}
|
||||
} else {
|
||||
state.tabsMenuList.forEach(item => {
|
||||
item.checked = false
|
||||
});
|
||||
state.tabsMenuList.push(obj)
|
||||
}
|
||||
},
|
||||
|
||||
delectTagMenu(state, item) {
|
||||
if (state.tabsMenuList.length == 0) {
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < state.tabsMenuList.length; i++) {
|
||||
let ele = state.tabsMenuList[i]
|
||||
console.log(ele)
|
||||
if (ele == item) {
|
||||
state.tabsMenuList[i - 1].checked = true
|
||||
state.tabsMenuList.splice(i, 1)
|
||||
return router.push(state.tabsMenuList[i - 1].url)
|
||||
}
|
||||
}
|
||||
console.log(state.tabsMenuList)
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
||||
addTabs({
|
||||
commit
|
||||
}, str) {
|
||||
console.log(str);
|
||||
commit("addTabsMenu", str);
|
||||
},
|
||||
delectTag({
|
||||
commit
|
||||
}, val) {
|
||||
|
||||
commit('delectTagMenu', val)
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,112 @@
|
||||
import router from "../../router/router.js";
|
||||
import { mix } from "../../utils/color.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
UserInfo: {},
|
||||
token: sessionStorage.getItem("token") || "",
|
||||
isCollapse: true,
|
||||
themeConfig: {
|
||||
primary: "#4060c7",
|
||||
tabColor: "#FFFFFF",
|
||||
footColor: "#606266",
|
||||
backgroundColor: "#FFFFFF",
|
||||
textColor: "#00000099",
|
||||
istags: true,
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
setToken(state, token) {
|
||||
state.token = token;
|
||||
},
|
||||
setUserInfo(state, userinfo) {
|
||||
state.UserInfo = userinfo;
|
||||
},
|
||||
SetIsCollapse(state, isCollapse) {
|
||||
state.isCollapse = isCollapse;
|
||||
},
|
||||
setThemeConfig(state, primary) {
|
||||
state.themeConfig.primary = primary;
|
||||
},
|
||||
setThemeConfigTbaColor(state, primary) {
|
||||
state.themeConfig.tabColor = primary;
|
||||
if (primary == "#FFFFFF") {
|
||||
state.themeConfig.footColor = "#606266";
|
||||
} else {
|
||||
state.themeConfig.footColor = "#ffffff";
|
||||
}
|
||||
},
|
||||
setThemeConfigMenuColor(state, primary) {
|
||||
if (primary) {
|
||||
state.themeConfig.backgroundColor = "#FFFFFF";
|
||||
state.themeConfig.textColor = "#00000099";
|
||||
} else {
|
||||
state.themeConfig.backgroundColor = "#1d2129";
|
||||
state.themeConfig.textColor = "#bdbdc0";
|
||||
}
|
||||
},
|
||||
setThemeConfigchangeTags(state, primary) {
|
||||
if (primary) {
|
||||
state.themeConfig.istags = true;
|
||||
} else {
|
||||
state.themeConfig.istags = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
// login({ commit }, userInfo) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// LoginInfo(userInfo)
|
||||
// .then((res) => {
|
||||
// console.log(res.data.data);
|
||||
// sessionStorage.setItem("token", res.data.data.token);
|
||||
// sessionStorage.setItem("UserInfo", JSON.stringify(res.data.data));
|
||||
// commit("setToken", res.data.data.token);
|
||||
// commit("setUserInfo", res.data.data);
|
||||
// router.replace("/");
|
||||
// ElMessage({
|
||||
// message: "登录成功",
|
||||
// type: "success",
|
||||
// });
|
||||
// resolve();
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// reject(err);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
changeIsCollapse({ commit }, str) {
|
||||
console.log(str);
|
||||
commit("SetIsCollapse", str);
|
||||
},
|
||||
|
||||
changeThem({ commit }, str) {
|
||||
commit("setThemeConfig", str);
|
||||
const pre = "--el-color-primary";
|
||||
// 白色混合色
|
||||
const mixWhite = "#ffffff";
|
||||
// 黑色混合色
|
||||
const mixBlack = "#000000";
|
||||
const el = document.documentElement;
|
||||
el.style.setProperty(pre, str);
|
||||
// 这里是覆盖原有颜色的核心代码
|
||||
for (let i = 1; i < 10; i += 1) {
|
||||
el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.1));
|
||||
}
|
||||
el.style.setProperty("--el-color-primary-dark", mix(str, mixBlack, 0.1));
|
||||
},
|
||||
changeTabColor({ commit }, val) {
|
||||
commit("setThemeConfigTbaColor", val);
|
||||
},
|
||||
changeMenuColor({ commit }, val) {
|
||||
commit("setThemeConfigMenuColor", val);
|
||||
},
|
||||
changeTags({ commit }, val) {
|
||||
commit("setThemeConfigchangeTags", val);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,216 @@
|
||||
/*
|
||||
Reset style sheet
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* flex */
|
||||
.flx-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flx-justify-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flx-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flx-row {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flx-row-right {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.p10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.p20 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.m10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m20 {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mR10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.one-cut-txt {
|
||||
/*强制文字在一行文本框内*/
|
||||
white-space: nowrap;
|
||||
/*溢出部分文字隐藏*/
|
||||
overflow: hidden;
|
||||
/*溢出部分省略号处理*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 清除浮动 */
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0px;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* scroll bar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 0px white;
|
||||
-webkit-box-shadow: inset 0 0 0px white;
|
||||
background-color: #dddee0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
color: rgb(88, 88, 88);
|
||||
line-height: 100px;
|
||||
min-height: 400px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export const mix = (c1, c2, ratio) => {
|
||||
ratio = Math.max(Math.min(Number(ratio), 1), 0)
|
||||
let r1 = parseInt(c1.substring(1, 3), 16)
|
||||
let g1 = parseInt(c1.substring(3, 5), 16)
|
||||
let b1 = parseInt(c1.substring(5, 7), 16)
|
||||
let r2 = parseInt(c2.substring(1, 3), 16)
|
||||
let g2 = parseInt(c2.substring(3, 5), 16)
|
||||
let b2 = parseInt(c2.substring(5, 7), 16)
|
||||
let r = Math.round(r1 * (1 - ratio) + r2 * ratio) + ''
|
||||
let g = Math.round(g1 * (1 - ratio) + g2 * ratio) + ''
|
||||
let b = Math.round(b1 * (1 - ratio) + b2 * ratio) + ''
|
||||
r = ('0' + (r || 0).toString(16)).slice(-2)
|
||||
g = ('0' + (g || 0).toString(16)).slice(-2)
|
||||
b = ('0' + (b || 0).toString(16)).slice(-2)
|
||||
return '#' + r + g + b
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export function getDateTime(type) {
|
||||
var date = new Date();
|
||||
var hengGang = "-";
|
||||
var maoHao = ":";
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var curDate = date.getDate();
|
||||
var curHours = date.getHours();
|
||||
var curMinutes = date.getMinutes();
|
||||
var curSeconds = date.getSeconds();
|
||||
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (curDate >= 0 && curDate <= 9) {
|
||||
curDate = "0" + curDate;
|
||||
}
|
||||
if (curHours >= 0 && curHours <= 9) {
|
||||
curHours = "0" + curHours;
|
||||
}
|
||||
if (curMinutes >= 0 && curMinutes <= 9) {
|
||||
curMinutes = "0" + curMinutes;
|
||||
}
|
||||
if (curSeconds >= 0 && curSeconds <= 9) {
|
||||
curSeconds = "0" + curSeconds;
|
||||
}
|
||||
var currentdate = "";
|
||||
if (type == "year") {
|
||||
currentdate = year;
|
||||
return currentdate;
|
||||
} else if (type == "month") {
|
||||
currentdate = year + hengGang + month;
|
||||
return currentdate;
|
||||
} else {
|
||||
currentdate = year + hengGang + month + hengGang + curDate + " "
|
||||
return currentdate;
|
||||
}
|
||||
}
|
||||
// var year = getDateTime('year');
|
||||
// console.log(year); // 2021
|
||||
// var month = getDateTime('month');
|
||||
// console.log(month); // 12
|
||||
// var date = getDateTime('');
|
||||
// console.log(date); // 2021-12-03 09:00:00
|
||||
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="group-management-container">
|
||||
<!-- 左侧组别管理 -->
|
||||
<div class="left-panel">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>组别管理</span>
|
||||
<el-button type="primary" @click="handleAdd">添加组别</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="groupList" style="width: 100%" @row-click="handleGroupSelect">
|
||||
<el-table-column prop="groupId" label="组别ID" width="180" />
|
||||
<el-table-column prop="groupName" label="组别名称" />
|
||||
<el-table-column prop="createTime" label="创建时间">
|
||||
<template #default="scope">
|
||||
{{ scope.row.createTime || "暂无" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click.stop="handleEdit(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="danger" link @click.stop="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 右侧成员管理 -->
|
||||
<div class="right-panel">
|
||||
<el-card v-if="currentGroup">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ currentGroup.groupName }} - 成员管理</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="user-management">
|
||||
<div class="user-container">
|
||||
<!-- 组内人员列表 -->
|
||||
<div class="user-section">
|
||||
<h3>组内成员</h3>
|
||||
<el-table :data="groupUsers" style="width: 100%" height="500">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="40" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column label="角色" width="120">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.role"
|
||||
placeholder="选择角色"
|
||||
@change="(value) => handleRoleChange(scope.row, value)"
|
||||
>
|
||||
<el-option label="普通员工" :value="0" />
|
||||
<el-option label="部门主管" :value="1" />
|
||||
<el-option label="综合部" :value="2" />
|
||||
<el-option label="财务部" :value="3" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" link @click="handleRemoveUser(scope.row)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 未分组人员列表 -->
|
||||
<div class="user-section">
|
||||
<h3>未分组人员</h3>
|
||||
<el-table :data="nonGroupUsers" style="width: 100%" height="500">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="40" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.selectedRole"
|
||||
placeholder="选择角色"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option label="普通员工" :value="0" />
|
||||
<el-option label="部门主管" :value="1" />
|
||||
<el-option label="综合部" :value="2" />
|
||||
<el-option label="财务部" :value="3" />
|
||||
</el-select>
|
||||
<el-button type="primary" link @click="handleAddUser(scope.row)"
|
||||
>添加</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-empty v-else description="请选择左侧组别进行管理" />
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑组别对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '添加组别' : '编辑组别'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form :model="groupForm" label-width="80px">
|
||||
<el-form-item label="组别名称" required>
|
||||
<el-input v-model="groupForm.groupName" placeholder="请输入组别名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import {
|
||||
getGroupList,
|
||||
addGroup,
|
||||
updateGroup,
|
||||
deleteGroup,
|
||||
getNonGroupUsers,
|
||||
updateGroupUserRole,
|
||||
getGroupUsers,
|
||||
deleteGroupUser,
|
||||
} from "../../api/modules/index";
|
||||
|
||||
// 组别列表数据
|
||||
const groupList = ref([]);
|
||||
const currentGroup = ref(null);
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false);
|
||||
const dialogType = ref("add"); // add 或 edit
|
||||
const groupForm = ref({
|
||||
groupId: null,
|
||||
groupName: "",
|
||||
});
|
||||
|
||||
// 成员管理相关
|
||||
const nonGroupUsers = ref([]);
|
||||
const groupUsers = ref([]);
|
||||
|
||||
// 获取组别列表
|
||||
const fetchGroupList = async () => {
|
||||
try {
|
||||
const res = await getGroupList();
|
||||
if (res.errcode === 0) {
|
||||
groupList.value = res.result;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("获取组别列表失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 选择组别
|
||||
const handleGroupSelect = async (row) => {
|
||||
currentGroup.value = row;
|
||||
await Promise.all([fetchNonGroupUsers(), fetchGroupUsers(row.groupId)]);
|
||||
};
|
||||
|
||||
// 获取未分组人员列表
|
||||
const fetchNonGroupUsers = async () => {
|
||||
try {
|
||||
const res = await getNonGroupUsers();
|
||||
if (res.errcode === 0) {
|
||||
nonGroupUsers.value = res.result.map((user) => ({
|
||||
...user,
|
||||
selectedRole: 0,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("获取未分组人员列表失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 获取组内人员列表
|
||||
const fetchGroupUsers = async (groupId) => {
|
||||
try {
|
||||
const res = await getGroupUsers(groupId);
|
||||
if (res.errcode === 0) {
|
||||
groupUsers.value = res.result;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("获取组内人员列表失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 添加成员
|
||||
const handleAddUser = async (user) => {
|
||||
try {
|
||||
const res = await updateGroupUserRole(
|
||||
currentGroup.value.groupId,
|
||||
user.userid,
|
||||
user.selectedRole
|
||||
);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
await Promise.all([
|
||||
fetchNonGroupUsers(),
|
||||
fetchGroupUsers(currentGroup.value.groupId),
|
||||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("添加失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 修改成员角色
|
||||
const handleRoleChange = async (user, role) => {
|
||||
try {
|
||||
const res = await updateGroupUserRole(currentGroup.value.groupId, user.userid, role);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("修改成功");
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("修改失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 移除成员
|
||||
const handleRemoveUser = async (user) => {
|
||||
try {
|
||||
const res = await deleteGroupUser(currentGroup.value.groupId, user.userid);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("移除成功");
|
||||
await Promise.all([
|
||||
fetchNonGroupUsers(),
|
||||
fetchGroupUsers(currentGroup.value.groupId),
|
||||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("移除失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 添加组别
|
||||
const handleAdd = () => {
|
||||
dialogType.value = "add";
|
||||
groupForm.value = {
|
||||
groupId: null,
|
||||
groupName: "",
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑组别
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = "edit";
|
||||
groupForm.value = {
|
||||
groupId: row.groupId,
|
||||
groupName: row.groupName,
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除组别
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm("确认删除该组别吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteGroup(row.groupId);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("删除成功");
|
||||
if (currentGroup.value?.groupId === row.groupId) {
|
||||
currentGroup.value = null;
|
||||
}
|
||||
fetchGroupList();
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("删除失败");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!groupForm.value.groupName) {
|
||||
ElMessage.warning("请输入组别名称");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (dialogType.value === "add") {
|
||||
const res = await addGroup({ groupName: groupForm.value.groupName });
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
}
|
||||
} else {
|
||||
const res = await updateGroup({
|
||||
groupId: groupForm.value.groupId,
|
||||
groupName: groupForm.value.groupName,
|
||||
});
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("修改成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载时获取组别列表
|
||||
onMounted(() => {
|
||||
fetchGroupList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-management-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: calc(100vh - 120px);
|
||||
padding: 20px;
|
||||
|
||||
.left-panel {
|
||||
width: 40%;
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.user-management {
|
||||
.user-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
flex: 1;
|
||||
min-width: 0; // 防止flex子项溢出
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,390 @@
|
||||
.data-lists {
|
||||
width: 100%;
|
||||
|
||||
.el-col {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-item-one {
|
||||
background: #2969ff;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
height: 156px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
|
||||
.item-left {}
|
||||
|
||||
.item-right {
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
|
||||
.item-right-top {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tit {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.item-right-bottom {
|
||||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.tit {
|
||||
font-size: 14px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-item-two {
|
||||
height: 176px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
|
||||
.item-des {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 22px;
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: rgba(30, 189, 94, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
padding-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-item-three {
|
||||
padding: 10px;
|
||||
height: 156px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
.tit {
|
||||
font-size: 14px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
.item-data {
|
||||
margin: 5px;
|
||||
opacity: 1;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: #fafafcff;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 40%;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #0052d9;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataLayer {
|
||||
.datalayer-echarts {
|
||||
flex: 1;
|
||||
height: 260px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.table-data {
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
background-color: #fff;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.tit {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.table-box {
|
||||
margin: 10px;
|
||||
|
||||
.el-table {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
|
||||
.type {
|
||||
font-size: 10px;
|
||||
padding: 5px 10px;
|
||||
font-weight: 500;
|
||||
line-height: 0px;
|
||||
color: #fa4a1e;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
background: #fa4a1e14;
|
||||
|
||||
&.error-type {
|
||||
color: #4060c7;
|
||||
background: #e8f3ff;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #4060c7;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
|
||||
&.error-state {
|
||||
background-color: #fa4a1e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-item-three {
|
||||
padding: 10px;
|
||||
// height: 156px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
.tit {
|
||||
font-size: 14px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
.item-data {
|
||||
margin: 5px;
|
||||
opacity: 1;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: #fafafcff;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 40%;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: rgba(25, 30, 36, 0.5);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
height: 152px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.notice-news {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-lists {
|
||||
height: 260px;
|
||||
overflow: scroll;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
color: #666;
|
||||
|
||||
.type {
|
||||
font-size: 10px;
|
||||
padding: 5px 10px;
|
||||
font-weight: 500;
|
||||
line-height: 0px;
|
||||
color: #fa4a1e;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
background: #fa4a1e14;
|
||||
|
||||
&.error-type {
|
||||
color: #4060c7;
|
||||
background: #e8f3ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-right-1px {
|
||||
border-right: 1px solid #eae3e3;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 0.5s linear;
|
||||
}
|
||||
|
||||
.shakeRight {
|
||||
animation: shakeRight 0.5s linear;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shakeRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>欢迎使用💐🌸💮🏵️🌹🌺🌻</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,99 @@
|
||||
.login-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background-color: #6c88d5;
|
||||
background-image: url('../../assets/bg.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.login-box {
|
||||
width: 96%;
|
||||
height: 94%;
|
||||
background-color: hsla(0, 0%, 100%, 0.85);
|
||||
border-radius: 10px;
|
||||
padding: 0 8% 0 50px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.login-left {
|
||||
width: 800px;
|
||||
color: #6E736FFF;
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(47, 57, 78, 1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 735px;
|
||||
height: 465px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
height: 260px;
|
||||
padding: 10px 40px 35px 40px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
|
||||
box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
|
||||
|
||||
.login-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-bottom: 45px;
|
||||
|
||||
.login-icon {
|
||||
width: 60px;
|
||||
// height: 52px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
padding-left: 25px;
|
||||
white-space: nowrap;
|
||||
color: #2d51e6;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.flx-row {
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #2d51e6;
|
||||
}
|
||||
|
||||
.img {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-button {
|
||||
width: 185px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="login-container flx-center">
|
||||
<div class="login-box">
|
||||
<div class="login-left">
|
||||
<div class="title">人资薪资核算系统<span style="font-size: 14px">v1.7</span></div>
|
||||
<div class="sub">用于自动管理核算人员工资</div>
|
||||
<img src="../../assets/login.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<div class="login-logo">
|
||||
<img class="login-icon" src="../../assets/logo.png" alt="" />
|
||||
<p class="logo-text">人资薪资核算系统</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="login">
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
// import { login, obtainUserInformationApi } from "../../api/modules/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import dd from "dingtalk-jsapi";
|
||||
const router = useRouter();
|
||||
|
||||
// 登录
|
||||
const loginIn = async (code) => {
|
||||
let res = await login(code);
|
||||
sessionStorage.setItem("token", res.result.token);
|
||||
ElMessage({
|
||||
message: "授权成功",
|
||||
type: "success",
|
||||
});
|
||||
// 拿用户信息
|
||||
obInformation();
|
||||
router.push("/");
|
||||
};
|
||||
// 登录判断
|
||||
const token = sessionStorage.getItem("token");
|
||||
if (token) {
|
||||
// 有then代表已经登录
|
||||
} else {
|
||||
// 钉钉环境去登录，
|
||||
if (dd.env.platform === "notInDingTalk") {
|
||||
// ElMessage({
|
||||
// message: "检测到不是钉钉环境，请进入钉钉环境打开",
|
||||
// type: "error",
|
||||
// });
|
||||
router.push("/");
|
||||
console.log("跳转");
|
||||
} else {
|
||||
dd.ready(() => {
|
||||
dd.runtime.permission.requestAuthCode({
|
||||
corpId: "ding03f8e88dde9b426835c2f4657eb6378f", //企业id
|
||||
onSuccess: function (info) {
|
||||
loginIn(info.code);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
// 测试修改环境
|
||||
// loginIn("4545");
|
||||
}
|
||||
// 获取个人信息
|
||||
const obInformation = async () => {
|
||||
let res = await obtainUserInformationApi();
|
||||
const userInfo = res.result;
|
||||
ElMessage({
|
||||
message: "获取个人信息成功",
|
||||
type: "success",
|
||||
});
|
||||
|
||||
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
|
||||
router.push("/");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { viteMockServe } from "vite-plugin-mock";
|
||||
|
||||
import viteCompression from "vite-plugin-compression";
|
||||
|
||||
export default defineConfig({
|
||||
viteMockServe: {
|
||||
supportTs: false,
|
||||
logger: false,
|
||||
mockPath: "./mock/index.js",
|
||||
},
|
||||
|
||||
plugins: [
|
||||
vue(),
|
||||
viteCompression({
|
||||
//gzip压缩
|
||||
verbose: true,
|
||||
disable: false,
|
||||
threshold: 10240,
|
||||
algorithm: "gzip",
|
||||
ext: ".gz",
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
minify: "terser", // 明确指定使用 Terser 作为压缩工具
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
},
|
||||
},
|
||||
// chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
|
||||
rollupOptions: {
|
||||
output: {
|
||||
//静态资源分类打包
|
||||
chunkFileNames: "static/js/[name]-[hash].js",
|
||||
entryFileNames: "static/js/[name]-[hash].js",
|
||||
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
|
||||
manualChunks(id) {
|
||||
//静态资源分拆打包
|
||||
if (id.includes("node_modules")) {
|
||||
return id
|
||||
.toString()
|
||||
.split("node_modules/")[1]
|
||||
.split("/")[0]
|
||||
.toString();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
css: {
|
||||
/* CSS 预处理器 导入全局样式*/
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// additionalData: '@import "src/styles/common.scss";',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user