<template>
|
<div id="app">
|
<!-- 导航 -->
|
<div class="app_nav" v-if="!isFixed">
|
<v-n
|
:path="path"
|
:grade="vip"
|
:title="user.title"
|
:vxt="vuex_theme"
|
></v-n>
|
</div>
|
<!-- 主体 -->
|
<div class="app_mains" v-if="!isFixed">
|
<!-- 主体-头部 -->
|
<div class="app_head">
|
<v-c :id="navId" class="c"></v-c>
|
<v-u class="u" :user="user"></v-u>
|
</div>
|
<!-- 主体-内容 -->
|
<div class="app_main" v-loading="isContentLoading">
|
<div
|
class="app_main_content"
|
:class="{ color: $route.path === '/index' }"
|
>
|
<transition name="fade-transform" mode="out-in">
|
<keep-alive :include="keepAliveArr">
|
<router-view v-if="isRouterAlive" class="scrollbar"></router-view>
|
</keep-alive>
|
</transition>
|
</div>
|
<!-- 主弹出框 -->
|
<v-f></v-f>
|
</div>
|
</div>
|
<!-- 登录等需要全屏的页面 -->
|
<router-view v-else class="main_content" />
|
<transition name="fade">
|
<v-i v-if="showImage"></v-i>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import vF from "./views/fixed/index";
|
import vC from "./views/default/crumb";
|
import vU from "./views/default/user";
|
import vN from "./views/default/nav";
|
import vI from "./views/default/image";
|
import { mapState } from "vuex";
|
import $var from "./assets/js/const";
|
|
export default {
|
components: { vF, vC, vU, vN, vI },
|
name: "App",
|
provide() {
|
return {
|
reload: this.reload,
|
appPath: this.appPath,
|
appTimeout: this.appTimeout,
|
appShowImage: this.appShowImage,
|
appObject: this.appObject,
|
appShowVideo: this.appShowVideo,
|
appRecordingAudio: this.appRecordingAudio,
|
appListenMusic: this.appListenMusic,
|
appObject: this.appObject,
|
appTime: this.appTime
|
};
|
},
|
data() {
|
return {
|
isRouterAlive: true,
|
isCanvas: false,
|
isContentLoading: false, // 局部主题加载获取数据时显示
|
showImage: false, // 控制查看图片
|
navId: 0,
|
path: "",
|
user: {},
|
vip: [],
|
keepAliveArr: ["registrationManage"]
|
};
|
},
|
watch: {
|
$route: {
|
handler(n) {
|
let v = this.$nav.id(n.meta.to);
|
if (v.q && !v.url) {
|
v = {
|
id: n.meta.to,
|
title: n.meta.title,
|
url: n.path
|
};
|
}
|
this.$js.history.set(v);
|
this.navId = n.meta.to;
|
this.path = n.path;
|
document.title = n.meta.title;
|
},
|
deep: true
|
},
|
vuex_load(n) {
|
this.isContentLoading = n > 0;
|
},
|
vuex_image: {
|
handler(n) {
|
this.showImage = n.time > 0;
|
},
|
deep: true
|
},
|
vuex_right() {
|
// 获取用户信息
|
this.getUser();
|
// 注册右键点击
|
// this.onRight();
|
},
|
vuex_level() {
|
demo.$session.set("vip", {});
|
this.getLevel();
|
}
|
},
|
computed: {
|
isFixed() {
|
return ["/login", "/silence"].indexOf(this.$route.path) >= 0;
|
},
|
...mapState({
|
vuex_image: "image",
|
vuex_right: "right",
|
vuex_load: "loading",
|
vuex_level: "level",
|
vuex_theme: "theme"
|
})
|
},
|
methods: {
|
appTimeout(v) {
|
if (!v) return "";
|
return demo.timeout(new Date(v).getTime());
|
},
|
appPath(url) {
|
this.$router.push(this.$nav.url("/" + url));
|
},
|
reload() {
|
this.isRouterAlive = false;
|
this.$nextTick(function() {
|
this.isRouterAlive = true;
|
});
|
},
|
onPath(v) {
|
this.$router.push(this.$nav.url(v));
|
},
|
getLevel() {
|
let v = demo.$session.get("token") || "";
|
if (v) {
|
let vip = demo.$session.get("vip") || {};
|
// 获取我的权限
|
if (vip.time) {
|
this.vip = vip.vip;
|
} else {
|
this.$api.get("listmenu", {}, e => {
|
demo.$local.set("menuList", e);
|
this.$router.push(e[0].sysMenuVOList[0].path);
|
this.vip = e.map(k => {
|
return k.menuId;
|
});
|
demo.$session.set("vip", { time: Date.now(), vip: this.vip });
|
});
|
}
|
} else {
|
this.vip = [];
|
}
|
},
|
areaReturn(code) {
|
let label = "";
|
switch (code) {
|
case "510423": {
|
label = "西区社区通";
|
break;
|
}
|
case "510411": {
|
label = "仁和社区通";
|
break;
|
}
|
case "510402": {
|
label = "东区社区通";
|
break;
|
}
|
default: {
|
label = "西区社区通";
|
break;
|
}
|
}
|
return label;
|
},
|
getUser() {
|
let v = demo.$session.get("token") || "";
|
if (v) {
|
// 获取我的信息
|
let user = demo.$session.get("user") || {};
|
if (user.time) {
|
demo.areaText = this.areaReturn(user.areaCode);
|
this.user = user;
|
} else {
|
this.$api.get("user", {}, res => {
|
demo.areaText = this.areaReturn(res.areaCode);
|
let title = res.communityName || "";
|
//基层公开查询角色id1674595011976527873
|
if (res.roleId == $var.JCROLEID) {
|
title = res.name;
|
}
|
this.user = {
|
areaId: res.areaId,
|
roleId: res.roleId,
|
account: res.account,
|
logo: res.imageUrl,
|
name: res.name,
|
propertyId: res.propertyId,
|
areaName: res.areaName,
|
title: title,
|
time: Date.now(),
|
id: res.userId,
|
communityId: res.communityId,
|
isPropertyWorker: res.isPropertyWorker,
|
areaCode: res.areaCode,
|
userType: res.userType
|
};
|
demo.$session.set("user", this.user);
|
});
|
}
|
this.getLevel();
|
} else {
|
this.user = {};
|
}
|
},
|
appShowImage(pic, list) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[查看大图]",
|
foot: 1,
|
tool: 1,
|
pic: pic,
|
list: list || []
|
});
|
},
|
_onItem() {
|
let ts = this;
|
return [
|
{
|
text: "主页",
|
callback: function() {
|
ts.onPath("/index");
|
}
|
},
|
{
|
text: "本地配置",
|
callback: function() {
|
ts.onPath("/pc_config");
|
}
|
},
|
{
|
text: "修改密码",
|
callback: function() {
|
ts.onPath("/pwd");
|
}
|
},
|
{
|
text: "刷新",
|
callback: function() {
|
ts.reload();
|
}
|
}
|
// {
|
// text: "测试查看图片全部功能",
|
// callback: function () {
|
// ts.$store.dispatch("setImage", {
|
// time: Date.now(),
|
// title: "[大图]",
|
// foot: 1,
|
// tool: 1,
|
// pic:
|
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg",
|
// list: [
|
// "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1612138888,1794405442&fm=26&gp=0.jpg",
|
// "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=341802306,419856862&fm=26&gp=0.jpg",
|
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg",
|
// "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2879430259,1145403574&fm=26&gp=0.jpg",
|
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2544377084,275372641&fm=26&gp=0.jpg",
|
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1692581329,936559136&fm=26&gp=0.jpg",
|
// "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3420702794,2161845192&fm=26&gp=0.jpg",
|
// "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3602499475,357824478&fm=26&gp=0.jpg",
|
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=24336452,906724543&fm=26&gp=0.jpg",
|
// "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3028333849,2986765516&fm=26&gp=0.jpg",
|
// ].map((k, v) => {
|
// return {
|
// img: k,
|
// desc: "阿黄金时代-yiduijain-一堆简介，url:" + k,
|
// title: "[大图]-" + v,
|
// };
|
// }),
|
// });
|
// },
|
// },
|
];
|
},
|
onRight() {
|
demo.ctrl().r("body", {
|
item: this._onItem(),
|
timeout: 50
|
});
|
},
|
appObject(page = {}, data = {}) {
|
return demo.copy(Object.assign({}, page, data));
|
},
|
appTime(v) {
|
if (demo.$obj(v, 1) === 3) {
|
v = new Date(v).getTime();
|
}
|
return demo.timeout(v);
|
}
|
},
|
mounted() {
|
demo.$cache.set("path", "[]");
|
demo.ctrl().d("f11,c-u,c-s"); // 禁用键盘快捷键
|
this.getUser();
|
}
|
};
|
</script>
|
|
<style lang="less">
|
.el-image-viewer__close {
|
color: #ffffff;
|
}
|
html,
|
body {
|
height: 100%;
|
}
|
#app {
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
height: 100%;
|
// user-select: none;
|
font-size: 16px;
|
background-color: #fff;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
|
table,
|
.table {
|
user-select: auto !important;
|
}
|
|
.el-popover {
|
padding: 0 !important;
|
}
|
.el-pagination.is-background .btn-next,
|
.el-pagination.is-background .btn-prev,
|
.el-pagination.is-background .el-pager li {
|
background: transparent;
|
border: 1px solid #eee;
|
border-radius: 5px;
|
}
|
.unline {
|
text-decoration: none !important;
|
}
|
|
.el-button--small {
|
font-size: 15px;
|
// padding: 8px 15px;
|
letter-spacing: 2px;
|
}
|
|
.table_box {
|
&.member {
|
tr {
|
th,
|
td {
|
box-sizing: border-box;
|
border-color: rgba(231, 231, 231, 0.7) !important;
|
b {
|
word-break: break-all;
|
max-height: 45px;
|
padding: 2px 0;
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
line-height: 1.2 !important;
|
&:not([class*="col"]) {
|
color: rgb(68, 68, 68);
|
}
|
}
|
}
|
th b {
|
display: block;
|
white-space: pre-wrap;
|
line-height: 1;
|
}
|
td {
|
padding: 10px 5px !important;
|
max-height: 70px;
|
img {
|
// max-width: 35px !important;
|
// width: 35px;
|
// height: 35px;
|
}
|
}
|
}
|
.table_main {
|
tr {
|
transition: all 0.3s;
|
&:hover {
|
background-color: rgba(239, 250, 255, 0.8);
|
}
|
}
|
}
|
.table_header {
|
background-color: rgb(250, 250, 250) !important;
|
}
|
.table_flex {
|
span {
|
text-decoration: none !important;
|
color: rgb(37, 147, 252) !important;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
|
@w: 220px;
|
|
.app_nav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
z-index: 300;
|
background-color: rgb(255, 255, 255);
|
height: 100%;
|
width: @w;
|
}
|
.app_mains {
|
position: relative;
|
box-sizing: border-box;
|
padding-left: @w;
|
height: 100%;
|
overflow: hidden;
|
background-color: #f7f7f7;
|
z-index: 10;
|
min-width: 1200px;
|
}
|
.app_main {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
height: calc(~"100% - 64px");
|
position: relative;
|
z-index: 15;
|
}
|
.app_head {
|
background-color: #fff;
|
width: 100%;
|
height: 64px;
|
display: flex;
|
@wu: 310px;
|
.c {
|
width: calc(~"100% - @{wu}");
|
}
|
.u {
|
width: @wu;
|
}
|
}
|
.demo_hidden::-webkit-scrollbar {
|
display: block !important;
|
}
|
.app_main_content {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
min-height: 100%;
|
background-color: #fff;
|
border-radius: 5px;
|
box-sizing: border-box;
|
padding: 5px;
|
padding: 0 30px 20px 30px;
|
z-index: 25;
|
> div:first-child {
|
height: 100%;
|
width: 100%;
|
padding-right: 30px;
|
}
|
&.color {
|
background-color: transparent;
|
padding-left: 5px;
|
}
|
}
|
|
[data-require] {
|
position: relative;
|
&::before {
|
position: absolute;
|
content: "*";
|
color: tomato;
|
text-indent: -10px;
|
}
|
}
|
textarea.m_inp {
|
line-height: 1.2;
|
box-sizing: border-box;
|
width: 350px;
|
max-width: 350px;
|
min-height: 100px;
|
padding: 5px;
|
}
|
|
.table_box .table_main.scroll {
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
.scrollbar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.scrollbar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
background: #999;
|
}
|
.scrollbar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
border-radius: 5px;
|
background: #ededed;
|
}
|
|
.app_images {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
width: 100px !important;
|
height: 100px !important;
|
position: relative;
|
margin: 0 10px 10px 0;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
cursor: pointer;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
line-height: 16px;
|
text-align: center;
|
background-color: tomato;
|
color: #fff;
|
border-radius: 50%;
|
font-size: 16px;
|
z-index: 10;
|
cursor: pointer;
|
}
|
}
|
.db {
|
text-align: center;
|
border: 1px dashed #eee;
|
height: 100px;
|
font-size: 14px;
|
color: #999;
|
i {
|
display: block;
|
margin: 0 auto;
|
height: 70px;
|
font-size: 26px;
|
line-height: 70px;
|
}
|
}
|
}
|
|
.ql-container.ql-snow {
|
min-height: 300px;
|
}
|
|
.el-date-editor--datetimerange.el-input,
|
.el-date-editor--datetimerange.el-input__inner,
|
.el-select {
|
width: 100%;
|
}
|
|
.sec {
|
display: flex;
|
margin-bottom: 22px;
|
position: relative;
|
&::before {
|
content: attr(data-error);
|
position: absolute;
|
left: 100px;
|
bottom: -20px;
|
font-size: 12px;
|
line-height: 20px;
|
height: 20px;
|
width: calc(~"100% - 100px");
|
color: tomato;
|
}
|
&[data-gray="true"]::before {
|
color: #999;
|
}
|
.label {
|
font-size: 14px;
|
color: #333;
|
width: 100px;
|
text-align: right;
|
line-height: 32px;
|
}
|
article {
|
width: calc(~"100% - 100px");
|
}
|
.avatar {
|
width: 104px;
|
height: 104px;
|
border: 1px dashed #eee;
|
text-align: center;
|
color: #ccc;
|
cursor: pointer;
|
i {
|
font-size: 25px;
|
margin: 30px auto 10px;
|
display: block;
|
}
|
b {
|
font-size: 12px;
|
}
|
}
|
}
|
|
// .el-table,
|
// .el-table th,
|
// .el-table tr,
|
// .el-table tr:hover,
|
// .el-table td,
|
// .el-step__icon {
|
// background: transparent;
|
// text-align: center;
|
// }
|
.moveright-len-enter-active,
|
.moveright-len-leave-active,
|
.fade-enter-active,
|
.fade-leave-active,
|
.bottom-enter-active,
|
.bottom-leave-active,
|
.height-enter-active,
|
.height-leave-active,
|
.fade-in-enter-active,
|
.fade-in-leave-active,
|
.moveleft-enter-active,
|
.moveleft-leave-active,
|
.moveright-enter-active,
|
.moveright-leave-active {
|
transition: all 0.5s;
|
}
|
.height-enter,
|
.height-leave-to {
|
opacity: 0;
|
// height: 0;
|
transform: translateY(200%);
|
}
|
.bottom-enter,
|
.bottom-leave-to {
|
// opacity: 0;
|
transform: translateY(300%);
|
}
|
.fade-enter,
|
.fade-leave-to {
|
opacity: 0;
|
transform: scale(0);
|
}
|
.moveleft-enter,
|
.moveleft-leave-to {
|
opacity: 0;
|
transform: translateX(-100%);
|
}
|
.moveright-enter,
|
.moveright-leave-to {
|
opacity: 0;
|
transform: translateX(100%);
|
}
|
.moveright-len-enter,
|
.moveright-len-leave-to {
|
opacity: 0;
|
transform: translateX(100%);
|
}
|
.fade-in-enter,
|
.fade-in-leave-to {
|
opacity: 0;
|
transform: translateX(-100%) scale(0.5);
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
}
|
// 百度地图输入框z-index
|
.amap-sug-result {
|
z-index: 9999999999999999 !important;
|
border: none !important;
|
}
|
// .avatar-uploader, .avatar-uploader-icon, img {
|
// width: auto !important;
|
// }
|
.man_val_exam {
|
overflow: scroll;
|
}
|
/* fade-transform */
|
.fade-transform-leave-active,
|
.fade-transform-enter-active {
|
transition: all 0.5s;
|
}
|
|
.fade-transform-enter {
|
opacity: 0;
|
transform: translateX(-30px);
|
}
|
|
.fade-transform-leave-to {
|
opacity: 0;
|
transform: translateX(30px);
|
}
|
</style>
|
