You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
6.5 KiB
Plaintext
284 lines
6.5 KiB
Plaintext
<template>
|
|
<el-container>
|
|
<el-aside :style="isCollapse ? 'width: 64px;' : 'width: 200px;'">
|
|
<!-- :default-active="$route.path" :collapse="false" background-color="#304156" text-color="#bfcbd9"
|
|
:unique-opened="false" active-text-color="#409EFF" :collapse-transition="false" class="el-menu-vertical" -->
|
|
<el-menu :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9"
|
|
:unique-opened="false" active-text-color="#409EFF" :collapse-transition="false" class="el-menu-vertical">
|
|
<el-menu-item class="center">
|
|
<el-image :src="
|
|
isCollapse
|
|
? require('./Img/slogo.png')
|
|
: require('./Img/logoHome.png')
|
|
" style="display:flex;align-items:center;"></el-image>
|
|
</el-menu-item>
|
|
<el-submenu v-for="(item, index) in data" :index="(index + 1).toString()" :key="index">
|
|
<template slot="title">
|
|
<i :class="item.icon"></i>
|
|
<span slot="title">{{ item.name }}</span>
|
|
</template>
|
|
<el-menu-item :index="'/' + itemList.path" v-for="(itemList, indexList) in item.list" :key="indexList"
|
|
@click="skipClick(itemList.path, itemList.params)">
|
|
<span class="pull-right side-ladge" v-if="itemList.count">{{
|
|
itemList.count
|
|
}}</span>
|
|
<i :class="itemList.icon"></i>
|
|
{{ itemList.name }}
|
|
</el-menu-item>
|
|
</el-submenu>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header>
|
|
<common-header @on-collapse="Collapse"></common-header>
|
|
</el-header>
|
|
<el-main>
|
|
<keep-alive>
|
|
<router-view />
|
|
</keep-alive>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
import CommonHeader from "../wf/components/common-header.vue";
|
|
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
isHomePage: false,
|
|
isSystemManage: false,
|
|
// isCollapse: false, //是否拉开
|
|
isCollapse: true,
|
|
btnIndex: "",
|
|
menuList: "",
|
|
defaultActive: "-1",
|
|
data: [
|
|
{
|
|
name: "基础功能",
|
|
icon: "el-icon-menu",
|
|
list: [],
|
|
},
|
|
{
|
|
name: "流程查询",
|
|
icon: "el-icon-s-help",
|
|
list: [
|
|
{
|
|
name: "我发起的",
|
|
path: "mysend",
|
|
icon: "el-icon-s-promotion",
|
|
params: {
|
|
EnsName: "BP.WF.Data.MyStartFlows",
|
|
},
|
|
},
|
|
{
|
|
name: "我参与的",
|
|
path: "myjoin",
|
|
icon: "el-icon-s-operation",
|
|
params: {
|
|
EnsName: "BP.WF.Data.MyJoinFlows",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "接口API",
|
|
icon: "el-icon-s-help",
|
|
list: [
|
|
{
|
|
name: "工具包接口",
|
|
path: "API",
|
|
icon: "el-icon-s-promotion",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
created() {
|
|
var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_AppClassic");
|
|
var data = handler.DoMethodReturnString("Home_Init");
|
|
if (data.indexOf("err@") == 0) {
|
|
this.$message.error(data);
|
|
console.log(data);
|
|
return;
|
|
}
|
|
data = JSON.parse(data);
|
|
this.data[0].list.push({
|
|
name: "发起",
|
|
path: "start",
|
|
icon: "el-icon-position",
|
|
});
|
|
this.data[0].list.push({
|
|
name: "待办",
|
|
path: "todolist",
|
|
icon: "el-icon-bell",
|
|
count: data.Todolist_EmpWorks,
|
|
});
|
|
this.data[0].list.push({
|
|
name: "在途",
|
|
path: "runing",
|
|
icon: "el-icon-time",
|
|
count: data.Todolist_Runing,
|
|
});
|
|
this.data[0].list.push({
|
|
name: "已完成",
|
|
path: "complete",
|
|
icon: "el-icon-circle-check",
|
|
count: data.Todolist_Complete,
|
|
});
|
|
this.data[0].list.push({
|
|
name: "查询",
|
|
path: "searchZongHe",
|
|
icon: "el-icon-search",
|
|
});
|
|
|
|
this.data[0].list.push({
|
|
name: "草稿",
|
|
path: "draft",
|
|
icon: "el-icon-edit-outline",
|
|
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
|
count: data.Todolist_Draft,
|
|
});
|
|
this.data[0].list.push({
|
|
name: "抄送",
|
|
path: "send",
|
|
icon: "el-icon-edit",
|
|
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
|
count: data.Todolist_CCWorks,
|
|
});
|
|
this.data[0].list.push({
|
|
name: "批处理",
|
|
path: "batch",
|
|
icon: "el-icon-files",
|
|
count: 0,
|
|
});
|
|
if (this.$route.name) {
|
|
console.log('路由', this.$route.name);
|
|
this.defaultActive = this.$route.name;
|
|
this.isCollapse = false;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
// 跳转页面
|
|
skipClick(path, params) {
|
|
if (params != null && params != undefined)
|
|
this.$store.commit("setData", params);
|
|
this.$router.push({
|
|
name: path,
|
|
});
|
|
},
|
|
Collapse(data) {
|
|
this.isCollapse = data;
|
|
},
|
|
onMenuChange(ev) {
|
|
this.$router.push({ path: ev })
|
|
},
|
|
},
|
|
components: {
|
|
CommonHeader,
|
|
},
|
|
|
|
//监听
|
|
// computed: {
|
|
// activeMenu() {
|
|
// const route = this.$route;
|
|
// const { meta, path } = route;
|
|
// // if set path, the sidebar will highlight the path you set
|
|
// if (meta.activeMenu) {
|
|
// return meta.activeMenu;
|
|
// }
|
|
// return path;
|
|
// },
|
|
// },
|
|
|
|
//监听后执行动作
|
|
watch: {},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main-side {
|
|
background: #304156;
|
|
border-right: solid 1px #e6e6e6;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height:60px;
|
|
}
|
|
|
|
.el-menu-vertical-demo i {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.el-submenu__title i {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.side-ladge {
|
|
background: #657a92;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 15px;
|
|
border-radius: 50%;
|
|
font-size: 0.65rem;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-menu {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.el-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-header {
|
|
padding-right: 0;
|
|
padding: 0;
|
|
background-color: #367ea8;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
padding: 0px;
|
|
padding-left: 0px !important;
|
|
background-color: #409eff !important;
|
|
}
|
|
|
|
.el-menu {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.el-aside {
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.el-aside::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.pull-right {
|
|
float: right !important;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-menu-vertical:not(.el-menu--collapse) {
|
|
width: 200px;
|
|
min-height: 100%;
|
|
}
|
|
</style>
|