Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 7bfe3bd0 编写于 作者: tony001's avatar tony001
浏览文件
操作

调整应用切换器

上级 a0498ab9
显示空白字符变更
内嵌 并排
正在显示 包含 380 行增加 和 77 行删除
src/app-register.ts
浏览文件 @ 7bfe3bd0
......@@ -73,8 +73,9 @@ import AppDepartmentSelect from './components/app-department-select/app-departme
import IBizGroupSelect from './components/ibiz-group-select/ibiz-group-select.vue'
import IBizGroupPicker from './components/ibiz-group-picker/ibiz-group-picker.vue'
import AppWFApproval from './components/app-wf-approval/app-wf-approval.vue'
import Breadcrumb from './components/app-breadcrumb/app-breadcrumb.vue';
import Breadcrumb from './components/app-breadcrumb/app-breadcrumb.vue'
import AppTransfer from './components/app-transfer/app-transfer.vue'
import ContextMenuDrag from './components/context-menu-drag/context-menu-drag.vue'
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
......@@ -162,5 +163,6 @@ export const AppComponents = {
v.component('app-wf-approval',AppWFApproval);
v.component('app-breadcrumb',Breadcrumb);
v.component('app-transfer',AppTransfer);
v.component('context-menu-drag',ContextMenuDrag);
},
};
\ No newline at end of file
src/components/context-menu-drag/context-menu-drag.vue 0 → 100644
浏览文件 @ 7bfe3bd0
<template>
<Drawer
class-name="sider-drawer"
placement="left"
:closable="false"
:mask="false"
width="240"
v-model="visiable"
>
<div class="context-menu-drag">
<div class="menu-list">
<div
class="menu-header"
@mouseover="showMenuDrawer"
@click="drawerVisiable=!drawerVisiable"
>
<div class="menuicon">
<Icon type="md-apps" />
</div>
<div class="content">
<span>服务</span>
</div>
<div class="forward">
<Icon type="ios-arrow-forward" />
</div>
</div>
<div style="padding:8px 0px;" class="col-6">
<draggable
class="list-group"
tag="ul"
v-model="selectlist"
v-bind="dragOptionsVal"
@start="onStart"
@end="onEnd"
:animation="250"
handle=".handle"
ghost-class="ghost"
>
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<li class="list-group-item" v-for="(item,index) in selectlist" :key="item.id">
<el-row>
<el-col class="menuicon" :span="4">
<span>
<Icon v-if="item.icon" :type="item.icon" />
<Icon v-else type="md-menu" />
</span>
</el-col>
<el-col :span="14">
<span>{{ item.label }}</span>
</el-col>
<el-col :span="6">
<div class="bar">
<div>
<Icon type="ios-close" @click="removeAt(index)" />
</div>
<div>
<Icon type="ios-move handle" />
</div>
</div>
</el-col>
</el-row>
</li>
</transition-group>
</draggable>
</div>
</div>
<Drawer
class-name="menu-drawer"
width="60"
:closable="true"
:mask="false"
placement="left"
v-model="drawerVisiable"
>
<div class="menuItems">
<div class="item" v-for="(item,index) in list" :key="item.id">
<span class="title">{{item.label}}</span>
<span v-if="isStar(item.id)" class="star" @click="outStar(item)">
<Icon type="ios-star" />
</span>
<span v-else class="star" @click="onStar(item)">
<Icon type="ios-star-outline" />
</span>
</div>
</div>
</Drawer>
</div>
</Drawer>
</template>
<script lang="ts">
import draggable from "vuedraggable";
import {
Vue,
Component,
Provide,
Watch,
Prop,
Model
} from "vue-property-decorator";
// tslint:disable-next-line:max-classes-per-file
@Component({
components: {
draggable
}
})
export default class ContextMenuDrag extends Vue {
drawerVisiable: boolean = false;
current: number = 0;
list: Array<any> = [];
selectlist: Array<any> = [];
drag: boolean = false;
@Model("change") dragOptions: any;
@Prop() contextMenuDragVisiable?: boolean;
visiable: boolean = false;
@Watch("contextMenuDragVisiable")
public onVisiableChange(newVal: any, oldVal: any) {
if (newVal) {
this.visiable = newVal;
} else {
let that: any = this;
let params: any = {};
params.model = this.selectlist;
const put: Promise<any> = this.$http.put("uaa/access-center/app-switcher/default",params);
put.then((response: any) => {
if(response){
console.log(response);
}
}).catch((e) => {
console.log(e);
});
this.drawerVisiable = false;
setTimeout(() => {
that.visiable = false;
}, 300);
}
}
public showMenuDrawer() {
let that: any = this;
if(this.contextMenuDragVisiable){
setTimeout(() => {
that.drawerVisiable = true;
}, 300);
}
}
public menuDrawerClose() {}
public onStart(evt: any) {
this.drag = true;
}
public onEnd(evt: any) {
this.drag = false;
console.log(...this.selectlist);
}
/**
* 判断是否已加入列表
*/
public isStar(id: any) {
let istar: boolean = false;
this.selectlist.forEach((item: any) => {
if (Object.is(item.id, id)) {
istar = true;
}
});
return istar;
}
/**
* 加入列表
*/
public onStar(item: any) {
item.visabled = 1;
this.selectlist.push(item);
}
/**
* 从列表中删除
*/
public outStar(item: any) {
item.visabled = 0;
let index: number = 0;
let that: any = this;
this.selectlist.forEach((select: any, index: number) => {
if (Object.is(item.id, select.id)) {
that.selectlist.splice(index,1);
}
});
}
get dragOptionsVal() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
};
}
removeAt(index: any) {
this.selectlist.splice(index, 1);
}
sort() {
this.selectlist = this.selectlist.sort((a, b) => a.order - b.order);
}
listFilter() {
let that: any = this;
that.selectlist = [];
this.list.forEach((item: any) => {
if (item.visabled === 1) {
that.selectlist.push(item);
}
});
}
mounted() {
let that: any = this;
const get: Promise<any> = this.$http.get(
"uaa/access-center/app-switcher/default"
);
get
.then((response: any) => {
if (response) {
that.list = response.data.model;
that.listFilter();
console.log(response);
}
})
.catch(e => {
console.log(e);
});
}
}
</script>
<style lang='less'>
.menu-drawer {
.ivu-drawer-left {
left: 241px !important;
}
.ivu-drawer {
top: 64px !important;
}
.ivu-drawer-body {
padding: 32px !important;
.menuItems {
display: flex;
flex-wrap: wrap;
> .item {
margin: 0px 10px;
width: calc(33.333% - 20px);
padding: 0px 15px;
font-size: 13px;
transition: all 0.3s;
display: flex;
justify-content: space-between;
height: 32px;
align-items: center;
.star {
display: flex;
height: 100%;
width: 30px;
font-size: 15px;
align-items: center;
justify-content: center;
.ivu-icon-ios-star-outline{
display: none;
}
}
}
> .item:hover {
background-color: #eaeaea;
cursor: pointer;
.ivu-icon-ios-star-outline{
display: inline;
}
}
}
}
}
.sider-drawer {
.ivu-drawer {
background-color: #ffffff !important;
}
.ivu-drawer-body {
padding: 0px !important;
}
.ivu-drawer {
top: 64px !important;
}
.context-menu-drag {
display: flex;
.flip-list-move {
transition: transform 0.3s;
}
.menu-list {
width: 100%;
height: 100%;
.menu-header {
cursor: pointer;
border-bottom: 1px solid rgb(222, 222, 222);
height: 48px;
line-height: 48px;
display: flex;
align-items: center;
.menuicon {
display: inline-block;
width: 50px;
font-size: 16px;
text-align: center;
font-size: 22px;
}
.content {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 0%;
overflow: hidden;
font-size: 13px;
}
.forward {
margin: 0px 8px 0px 4px;
color: rgb(222, 222, 222);
font-size: 15px;
}
}
.list-group-item {
transition: background 1s;
-webkit-transition: background 1s;
.menuicon {
text-align: center;
}
.el-row {
height: 100%;
display: flex;
align-items: center;
padding: 0px 5px;
}
height: 40px;
cursor: pointer;
position: relative;
display: block;
margin-bottom: -1px;
transition: background-color 0.5s;
transition-timing-function: ease-in-out;
.handle {
cursor: move;
}
.bar {
display: flex;
.ivu-icon-ios-close {
cursor: pointer;
font-size: 25px;
}
}
}
.list-group-item:hover {
background-color: #f5f5f5;
.ivu-icon-ios-star-outline{
display: inline;
}
}
}
}
}
</style>
src/styles/default.less
浏览文件 @ 7bfe3bd0
......@@ -250,12 +250,6 @@
}
}
// 清除看板里视图的阴影
.dashboard .portlet .view-container{
-webkit-box-shadow: none ;
box-shadow: none;
}
/*** END:多数据视图属性布局 ***/
// 看板视图，卡片模式
......
src/theme/blue.theme.less
浏览文件 @ 7bfe3bd0
......@@ -4,29 +4,6 @@
.app-theme-icon {
color: #6ba1d1;
}
/* .el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2d5f8b;
color: #6ba1d1;
i {
color: #6ba1d1;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #4276a4;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3c6c95;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
} */
}
> .ivu-layout {
......
src/theme/dark-blue.theme.less
浏览文件 @ 7bfe3bd0
......@@ -3,30 +3,7 @@
> .ivu-layout-has-sider > .ivu-layout > header{
.app-theme-icon {
color: #606d80;
}/*
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #20222A;
color: #606d80;
i {
color: #606d80;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #20222A;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
} */
}
> .ivu-layout {
> .ivu-layout-sider {
......
src/theme/default.theme.less
浏览文件 @ 7bfe3bd0
......@@ -4,29 +4,6 @@
.app-theme-icon {
color: #aaaaaa;
}
/* .el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1;
color: #aaaaaa;
i {
color: #aaaaaa;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6;
color: #666666;
i {
color: #666666;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9;
color: #666666 !important;
i {
color: #666666;
}
}
} */
}
> .ivu-layout {
> .ivu-layout-sider {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或