提交 d6087795 编写于 作者: KK's avatar KK

定制组件-- 工具服务类注册

上级 dc7aecd6
.drag-list{
background-color: #F4F4F6;
overflow: auto;
height: 100%;
.drag-list-item{
margin: 0 10px;
box-sizing: border-box;
.header{
height: 40px;
line-height: 40px;
color:#BDC4CD;
font-size: 15px;
background-color: #F4F4F6;
overflow: auto;
height: 100%;
.drag-list-item{
margin: 0 10px;
box-sizing: border-box;
.header{
height: 40px;
line-height: 40px;
color:#BDC4CD;
font-size: 15px;
}
.content{
width: 100%;
height: 50px;
background-color: white;
position: relative;
margin-bottom: 10px;
.start{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
font-size: 30px;
color: #ED9691;
}
.content{
width: 100%;
.drag-list-pic{
width: 50px;
height: 50px;
background-color: white;
position: relative;
margin-bottom: 10px;
.start{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
font-size: 30px;
color: #ED9691;
}
.drag-list-pic{
width: 50px;
height: 50px;
background-color: skyblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
}
.drag-list-text{
width: 200px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 120px;
div:nth-child(1){
font-size: 15px;
color: #484a4b;
font-weight: 600;
}
div:nth-child(2){
font-size: 12px;
color: #909AA9;
}
background-color: skyblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
}
.drag-list-text{
width: 200px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 120px;
div:nth-child(1){
font-size: 15px;
color: #484a4b;
font-weight: 600;
}
.end{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 20px;
color: #797979;
div:nth-child(2){
font-size: 12px;
color: #909AA9;
}
}
}
.add{
.content{
.start{
color:#468CF3;
}
.end{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 20px;
color: #797979;
}
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.add{
.content{
.start{
color:#468CF3;
}
}
}
\ No newline at end of file
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
}
\ No newline at end of file
......@@ -8,7 +8,7 @@
{{$t('app.button.back')}}
</ion-button>
</ion-buttons>
<ion-title class="view-title"><label class="title-label"> 自定义仪表盘</label></ion-title>
<ion-title class="view-title"><label class="title-label">自定义仪表盘</label></ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
......@@ -16,12 +16,12 @@
<div class="drag-list-item added">
<div class="header">已经添加的卡片</div>
<draggable v-model="list_added" handle=".end" :animation="200" @end="dragEnd">
<div class="content" v-for="item in list_added" :key="item.id">
<div class="content" v-for="item in list_added" :key="item.componentName">
<div class="start" @click="delteItem(item.id)"><ion-icon name="remove-circle-outline"></ion-icon></div>
<div class="drag-list-pic"></div>
<div class="drag-list-text">
<div>{{item.title}}</div>
<div>{{item.text}}</div>
<div>{{item.appName}}</div>
<div>{{item.portletName}}</div>
</div>
<div class="end">
<ion-icon name = "drag-point"></ion-icon>
......@@ -33,13 +33,12 @@
<div class="drag-list-item add">
<div class="header">可添加的卡片</div>
<template v-for="item in list_add" >
<div class="content" v-if="item.componentName" :key="item.id">
<div class="content" v-if="item.componentName" :key="item.componentName">
<div class="start" @click="addItem(item.id)"><ion-icon name="add-circle-outline"></ion-icon></div>
<div class="drag-list-pic"></div>
<div class="drag-list-text">
<div>{{item.title}}</div>
<div>{{item.text}}</div>
<div>{{item.appName}}</div>
<div>{{item.portletName}}</div>
</div>
</div>
......@@ -61,6 +60,7 @@ import {
} from "vue-property-decorator";
import draggable from 'vuedraggable';
import { Http } from '@/ibiz-core/utils';
import UtilService from '@/utilservice/util-service';
@Component({
components: {
draggable,
......@@ -85,15 +85,22 @@ export default class App404 extends Vue {
*/
@Prop() protected _viewparams!: string;
/**
* 工具服务对象
*
* @protected
* @type {UtilService}
* @memberof AppDashboardDesignService
*/
protected utilService: UtilService = new UtilService();
/**
* 传入数据list_add
*
* @type {Array}
* @memberof APPDragList
*/
public list_add?:any = [
]
public list_add?:any = []
/**
* 减少item
......@@ -110,6 +117,7 @@ export default class App404 extends Vue {
v.id = i + 1;
})
this.list_add.push(item);
this.customizeChange();
}
/**
......@@ -137,6 +145,7 @@ export default class App404 extends Vue {
* @memberof APPDragList
*/
public dragEnd(){
this.customizeChange();
console.log(this.list_added)
}
......@@ -206,13 +215,16 @@ export default class App404 extends Vue {
* 解析data
*/
public parseData(data:any) {
data.forEach((item:any,index:number) => {
item.id = index;
item.text = item.portletName;
item.title = item.appName;
this.selectMode.forEach((i:any,ins:number)=>{
data.forEach((item:any,index:number) => {
if(i.componentName == item.componentName){
data.splice(index, 1);
}
});
});
this.list_add = data;
this.list_added = this.selectMode;
}
/**
......@@ -236,7 +248,7 @@ export default class App404 extends Vue {
* customizeChange
*/
public customizeChange() {
this.saveModel(this.utilServiceName,{},{utilServiceName:this.utilServiceName,modelid:this.modelId,model:this.list_added});
}
/**
......@@ -247,7 +259,9 @@ export default class App404 extends Vue {
if(parm){
this.modelId = parm.modelId?parm.modelId:"";
this.utilServiceName = parm.utilServiceName?parm.utilServiceName:"";
this.selectMode = parm.selectMode?parm.selectMode:"";
}
console.log(this.selectMode);
}
......@@ -255,8 +269,36 @@ export default class App404 extends Vue {
* 关闭视图
*/
public closeView() {
this.$emit("close", []);
this.$emit("close", [this.selectMode]);
}
public selectMode = [];
/**
* 保存模型
*
* @param {string} serviceName
* @param {*} context
* @param {*} viewparams
* @returns
* @memberof AppDashboardDesignService
*/
public saveModel(serviceName: string, context: any, viewparams: any) {
return new Promise((resolve: any, reject: any) => {
this.utilService.getService(serviceName).then((service: any) => {
service.saveModelData(JSON.stringify(context), '', viewparams).then((response: any) => {
resolve(response);
}).catch((response: any) => {
reject(response);
});
}).catch((response: any) => {
reject(response);
});
});
}
}
</script>
<style lang = "less">
......
......@@ -48,6 +48,7 @@ import { counterServiceConstructor } from '@/app-core/counter/counter-service-co
import { AppCommunicationsCenter } from './app-service/message-center/app-communications-center';
import { authServiceConstructor } from '@/app-core/auth-service/auth-service-constructor'
import { codeListServiceConstructor } from '@/app-core/code-list/code-list-service-constructor';
import { utilServiceRegister } from '@/utilservice/util-service-register';
// 全局挂载应用实体服务构造器
window['appEntityServiceConstructor'] = appEntityServiceConstructor;
// 全局挂载计数器服务构造器
......@@ -58,7 +59,7 @@ window['authServiceConstructor'] = authServiceConstructor;
window['codeListServiceConstructor'] = codeListServiceConstructor;
// 全局挂载应用通讯中心
window['acc'] = AppCommunicationsCenter.getInstance();
window['utilServiceRegister'] = utilServiceRegister;
/**
* 注册组件
*/
......
......@@ -3,12 +3,14 @@ import { CounterServiceConstructor } from '@/app-core/counter/counter-service-co
import { AppCommunicationsCenter } from '../app-service/message-center/app-communications-center';
import { AuthServiceConstructor } from '@/app-core/auth-service/auth-service-constructor';
import { CodeListServiceConstructor } from '@/app-core/code-list/code-list-service-constructor';
import { UtilServiceRegister } from '@/utilservice/util-service-register';
declare global {
interface Window {
appEntityServiceConstructor: AppEntityServiceConstructor,
counterServiceConstructor: CounterServiceConstructor,
authServiceConstructor: AuthServiceConstructor,
codeListServiceConstructor:CodeListServiceConstructor,
acc: AppCommunicationsCenter
acc: AppCommunicationsCenter,
utilServiceRegister:UtilServiceRegister
}
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册