Skip to content

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

更新应用切换器

上级 6e57b852
隐藏空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 222 行删除
src/components/context-menu-drag/context-menu-drag.less 0 → 100644
浏览文件 @ 2ad96981
.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;
}
}
}
}
}
\ No newline at end of file
src/components/context-menu-drag/context-menu-drag.vue
浏览文件 @ 2ad96981
<template>
<Drawer
class-name="sider-drawer"
placement="left"
:closable="false"
:mask="false"
width="240"
v-model="visiable"
>
<Drawer class-name="sider-drawer" placement="left" :closable="false" :mask="false" width="240" v-model="leftDrawerVisiable">
<div class="context-menu-drag">
<div class="menu-list">
<div
class="menu-header"
@mouseover="showMenuDrawer"
@click="drawerVisiable=!drawerVisiable"
>
<div class="menu-header" @mouseover="showMenuDrawer" @click="rightDrawerVisiable=!rightDrawerVisiable">
<div class="menuicon">
<Icon type="md-apps" />
</div>
......@@ -25,17 +14,7 @@
</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"
>
<draggable class="list-group" tag="ul" v-model="selectlist" v-bind="dragOptionsVal" @start="drag=true" @end="drag=false" :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>
......@@ -64,14 +43,7 @@
</draggable>
</div>
</div>
<Drawer
class-name="menu-drawer"
width="60"
:closable="true"
:mask="false"
placement="left"
v-model="drawerVisiable"
>
<Drawer class-name="menu-drawer" width="60" :closable="true" :mask="false" placement="left" v-model="rightDrawerVisiable">
<div class="menuItems">
<div class="item" v-for="(item,index) in list" :key="item.id">
<span class="title">{{item.label}}</span>
......@@ -90,14 +62,8 @@
<script lang="ts">
import draggable from "vuedraggable";
import {
Vue,
Component,
Provide,
Watch,
Prop,
Model
} from "vue-property-decorator";
import EntityService from '@/service/entity-service';
import { Vue,Component,Provide,Watch,Prop,Model } from "vue-property-decorator";
// tslint:disable-next-line:max-classes-per-file
@Component({
......@@ -106,67 +72,129 @@ import {
}
})
export default class ContextMenuDrag extends Vue {
drawerVisiable: boolean = false;
current: number = 0;
/**
* 抽屉菜单状态
*
* @returns
* @memberof ContextMenuDrag
*/
@Prop() public contextMenuDragVisiable?: boolean;
list: Array<any> = [];
/**
* 拖拽列表配置对象
*
* @returns
* @memberof ContextMenuDrag
*/
@Model("change") public dragOptions: any;
selectlist: Array<any> = [];
/**
* 右侧飘窗状态
*
* @returns
* @memberof ContextMenuDrag
*/
public rightDrawerVisiable: boolean = false;
drag: boolean = false;
/**
* 左侧飘窗状态
*
* @returns
* @memberof ContextMenuDrag
*/
public leftDrawerVisiable: boolean = false;
@Model("change") dragOptions: any;
/**
* 全部应用数据
*
* @returns
* @memberof ContextMenuDrag
*/
public list: Array<any> = [];
@Prop() contextMenuDragVisiable?: boolean;
/**
* 已选择的应用数据
*
* @returns
* @memberof ContextMenuDrag
*/
public selectlist: Array<any> = [];
visiable: boolean = false;
/**
* 拖拽列表
*
* @returns
* @memberof ContextMenuDrag
*/
public drag: boolean = false;
/**
* 拖拽列表配置项
*
* @returns
* @memberof ContextMenuDrag
*/
get dragOptionsVal() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
};
}
/**
* 实体服务对象
*
* @protected
* @type {EntityService}
* @memberof ContextMenuDrag
*/
protected entityService: EntityService = new EntityService();
/**
* 监听抽屉菜单状态
*
* @returns
* @memberof ContextMenuDrag
*/
@Watch("contextMenuDragVisiable")
public onVisiableChange(newVal: any, oldVal: any) {
if (newVal) {
this.visiable = newVal;
this.leftDrawerVisiable = 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;
const put: Promise<any> = this.entityService.updateChooseApp(null,params);
this.rightDrawerVisiable = false;
setTimeout(() => {
that.visiable = false;
that.leftDrawerVisiable = false;
}, 300);
}
}
/**
* 鼠标移入服务时显示右侧飘窗
*
* @returns
* @memberof ContextMenuDrag
*/
public showMenuDrawer() {
let that: any = this;
if(this.contextMenuDragVisiable){
setTimeout(() => {
that.drawerVisiable = true;
that.rightDrawerVisiable = true;
}, 300);
}
}
public menuDrawerClose() {}
public onStart(evt: any) {
this.drag = true;
}
public onEnd(evt: any) {
this.drag = false;
console.log(...this.selectlist);
}
/**
* 判断是否已加入列表
* 判断是否已选择该应用
*
* @returns
* @memberof ContextMenuDrag
*/
public isStar(id: any) {
let istar: boolean = false;
......@@ -180,6 +208,9 @@ export default class ContextMenuDrag extends Vue {
/**
* 加入列表
*
* @returns
* @memberof ContextMenuDrag
*/
public onStar(item: any) {
item.visabled = 1;
......@@ -188,6 +219,9 @@ export default class ContextMenuDrag extends Vue {
/**
* 从列表中删除
*
* @returns
* @memberof ContextMenuDrag
*/
public outStar(item: any) {
item.visabled = 0;
......@@ -199,21 +233,29 @@ export default class ContextMenuDrag extends Vue {
}
});
}
get dragOptionsVal() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
};
}
/**
* 删除已选择应用
*
* @returns
* @memberof ContextMenuDrag
*/
removeAt(index: any) {
this.selectlist.splice(index, 1);
}
/**
* 拖拽列表排序
*/
sort() {
this.selectlist = this.selectlist.sort((a, b) => a.order - b.order);
}
/**
* 过滤已选择的应用
*
* @returns
* @memberof ContextMenuDrag
*/
listFilter() {
let that: any = this;
that.selectlist = [];
......@@ -223,154 +265,26 @@ export default class ContextMenuDrag extends Vue {
}
});
}
/**
* vue 生命周期
*
* @returns
* @memberof ContextMenuDrag
*/
mounted() {
let that: any = this;
const get: Promise<any> = this.$http.get(
"uaa/access-center/app-switcher/default"
);
const get: Promise<any> = this.entityService.getAllApp(null,{});
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;
}
}
}
}
}
@import './context-menu-drag.less';
</style>
src/service/entity-service.ts
浏览文件 @ 2ad96981
......@@ -909,4 +909,26 @@ export default class EntityService {
return Http.getInstance().post(`/${this.APPDENAME}/${data[this.APPDEKEY]}/testuserexistworklist`,requestData,isloading);
}
/**
* 获取所有应用数据
*
* @param context
* @param data
* @param isloading
*/
public async getAllApp(context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
return Http.getInstance().get(`uaa/access-center/app-switcher/default`,data,isloading);
}
/**
* 更新已选择的应用
*
* @param context
* @param data
* @param isloading
*/
public async updateChooseApp(context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
return Http.getInstance().put(`uaa/access-center/app-switcher/default`,data,isloading);
}
}
\ No newline at end of file
src/theme/blue.theme.less
浏览文件 @ 2ad96981
......@@ -11,7 +11,12 @@
background-color: #4276a4;
.sider-top {
color: hsla(0,0%,100%,.8);
background: #2d5f8b;
background-color: #4276a4;
>.page-logo{
>.menuicon:hover{
background-color: #2d5f8b;
}
}
}
}
}
......
src/theme/dark-blue.theme.less
浏览文件 @ 2ad96981
......@@ -11,6 +11,11 @@
.sider-top {
color: hsla(0,0%,100%,.8);
background-color: #20222A;
>.page-logo{
>.menuicon:hover{
background-color:#060708;
}
}
}
}
}
......
src/theme/default.theme.less
浏览文件 @ 2ad96981
......@@ -9,10 +9,13 @@
> .ivu-layout-sider {
background-color: #f6f6f6;
.sider-top {
background-color: #e8eaec;
.ivu-icon {
color: #aaaaaa;
}
background-color: #f6f6f6;
>.page-logo{
>.menuicon:hover{
background-color: #fff;
color:#000;
}
}
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或