Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 e1fa704f 编写于 作者: KK's avatar KK
浏览文件
操作

定制组件调整

上级 d6087795
隐藏空白字符变更
内嵌 并排
正在显示 包含 286 行增加 和 246 行删除
src/components/app-customize/app-customize.less
浏览文件 @ e1fa704f
...@@ -9,41 +9,32 @@ ...@@ -9,41 +9,32 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color:#BDC4CD; color:#BDC4CD;
font-size: 15px; font-size: 12px;
} }
.content{ .content{
width: 100%; width: 100%;
height: 50px;
background-color: white; background-color: white;
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 12px 0;
.start{ .start{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
font-size: 30px; font-size: 30px;
color: #ED9691; color: #ea382d;
} }
.drag-list-pic{ .drag-list-pic{
width: 50px; width: 50px;
height: 50px; height: 50px;
background-color: skyblue; background-color: skyblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
} }
.drag-list-text{ .drag-list-text{
width: 200px; width: 60%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 120px;
div:nth-child(1){ div:nth-child(1){
font-size: 15px; font-size: 15px;
color: #484a4b; color: #484a4b;
font-weight: 600;
} }
div:nth-child(2){ div:nth-child(2){
font-size: 12px; font-size: 12px;
...@@ -51,12 +42,9 @@ ...@@ -51,12 +42,9 @@
} }
} }
.end{ .end{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 20px; font-size: 20px;
color: #797979; color: #797979;
min-width: 20px;
} }
} }
} }
......
src/components/app-customize/app-customize.vue
浏览文件 @ e1fa704f
<template> <template>
<ion-page :className="{ 'view-container': true, 'default-mode-view': true }"> <ion-page :className="{ 'view-container': true, 'default-mode-view': true }">
<ion-header> <ion-header v-if="titleStatus">
<ion-toolbar class="ionoc-view-header"> <ion-toolbar class="ionoc-view-header">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button @click="closeView"> <ion-button @click="closeView">
<ion-icon name="chevron-back"></ion-icon> <ion-icon name="chevron-back"></ion-icon>
{{$t('app.button.back')}} {{$t('app.button.back')}}
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title class="view-title"><label class="title-label">自定义仪表盘</label></ion-title> <ion-title class="view-title">
</ion-toolbar> <label class="title-label">自定义仪表盘</label>
</ion-title>
</ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="drag-list"> <div class="drag-list">
<div class="drag-list-item added"> <div class="drag-list-item added">
<div class="header">已经添加的卡片</div> <div class="header">已经添加的卡片</div>
<draggable v-model="list_added" handle=".end" :animation="200" @end="dragEnd"> <draggable v-model="selectedData" handle=".end" :animation="200" @end="dragEnd">
<div class="content" v-for="item in list_added" :key="item.componentName"> <div class="content" v-for="item in selectedData" :key="item.componentName">
<div class="start" @click="delteItem(item.id)"><ion-icon name="remove-circle-outline"></ion-icon></div> <div class="start" @click="delteItem(item.id)">
<div class="drag-list-pic"></div> <ion-icon name="remove-circle-outline"></ion-icon>
<div class="drag-list-text"> </div>
<div>{{item.appName}}</div> <div class="drag-list-pic"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div>{{item.portletName}}</div> <div class="drag-list-text">
</div> <div>{{item.portletName}}</div>
<div class="end"> <div v-if="item.detailText">{{item.detailText}}</div>
<ion-icon name = "drag-point"></ion-icon> <div v-else>暂无描述</div>
</div> </div>
<div class="end">
<ion-icon name="drag-point"></ion-icon>
</div>
</div>
</draggable>
</div> </div>
</draggable>
</div>
<div class="drag-list-item add"> <div class="drag-list-item add">
<div class="header">可添加的卡片</div> <div class="header">可添加的卡片</div>
<template v-for="item in list_add" > <template v-for="item in selectData">
<div class="content" v-if="item.componentName" :key="item.componentName"> <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="start" @click="addItem(item.id)">
<div class="drag-list-pic"></div> <ion-icon name="add-circle-outline"></ion-icon>
<div class="drag-list-text"> </div>
<div>{{item.appName}}</div> <div class="drag-list-pic"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div>{{item.portletName}}</div> <div class="drag-list-text">
</div> <div>{{item.portletName}}</div>
<div v-if="item.detailText">{{item.detailText}}</div>
<div v-else>暂无描述</div>
</div>
<div class="end">
<!-- <ion-icon v-show="false" name="drag-point"></ion-icon> -->
</div>
</div>
</template>
</div> </div>
</template> </div>
</div> </ion-content>
</div> </ion-page>
</ion-content>
</ion-page >
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -56,224 +66,262 @@ import { ...@@ -56,224 +66,262 @@ import {
Prop, Prop,
Provide, Provide,
Emit, Emit,
Watch Watch,
} from "vue-property-decorator"; } from "vue-property-decorator";
import draggable from 'vuedraggable'; import draggable from "vuedraggable";
import { Http } from '@/ibiz-core/utils'; import { Http } from "@/ibiz-core/utils";
import UtilService from '@/utilservice/util-service'; import UtilService from "@/utilservice/util-service";
@Component({ @Component({
components: { components: {
draggable, draggable,
} },
}) })
export default class App404 extends Vue { export default class AppCustomize extends Vue {
/** /**
* 传入数据list_added * 已添加数据
* *
* @type {Array} * @type {Array}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public list_added?:any = [ public selectedData?: any = [];
]
/**
* 视图参数 public selectMode = [];
*
* @type {string} /**
* @memberof AppRichTextEditor * 视图参数
*/ *
@Prop() protected _viewparams!: string; * @type {string}
* @memberof AppCustomize
*/
@Prop() protected _viewparams!: string;
/** /**
* 工具服务对象 * 工具服务对象
* *
* @protected * @protected
* @type {UtilService} * @type {UtilService}
* @memberof AppDashboardDesignService * @memberof AppCustomize
*/ */
protected utilService: UtilService = new UtilService(); protected utilService: UtilService = new UtilService();
/** /**
* 传入数据list_add * 传入数据list_add
* *
* @type {Array} * @type {Array}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public list_add?:any = [] public selectData?: any = [];
/** /**
* 减少item * 减少item
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public delteItem(id:any){ public delteItem(id: any) {
let item:any = this.list_added.find((v:any) => v.id === id); let item: any = this.selectedData.find((v: any) => v.id === id);
let length:number = this.list_add.length; let length: number = this.selectData.length;
item.id = length + 1; item.id = length + 1;
this.list_added.splice(id-1, 1); this.selectedData.splice(id - 1, 1);
this.list_added.forEach((v:any,i:any) => { this.selectedData.forEach((v: any, i: any) => {
v.id = i + 1; v.id = i + 1;
}) });
this.list_add.push(item); this.selectData.push(item);
this.customizeChange(); this.customizeChange();
} }
/** /**
* 添加item * 添加item
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public addItem(id:any){ public addItem(id: any) {
let item:any = this.list_add.find((v:any) => v.id === id); let item: any = this.selectData.find((v: any) => v.id === id);
let length:number = this.list_added.length; let length: number = this.selectedData.length;
item.id = length + 1; item.id = length + 1;
this.list_add.splice(id-1, 1); this.selectData.splice(id - 1, 1);
this.list_add.forEach((v:any,i:any) => { this.selectData.forEach((v: any, i: any) => {
v.id = i + 1 v.id = i + 1;
}) });
this.list_added.push(item); this.selectedData.push(item);
this.customizeChange(); this.customizeChange();
} }
/** /**
* 拖拽结束 * 标题显示状态
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public dragEnd(){ public titleStatus = true;
this.customizeChange();
console.log(this.list_added)
}
/** /**
* 监听list_added * 拖拽结束
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
@Watch('list_added',{immediate: true, deep: true}) public dragEnd() {
onListAdded(){ this.customizeChange();
this.list_added.forEach((v:any,i:any) => { console.log(this.selectedData);
v.id = i + 1; }
})
}
/** /**
* 监听list_add * 监听selectedData
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
@Watch('list_add',{immediate: true, deep: true}) @Watch("selectedData", { immediate: true, deep: true })
onListAdd(){ onSelectedDataChange() {
this.list_add.forEach((v:any,i:any) => { this.selectedData.forEach((item: any, index: number) => {
v.id = i + 1; item.id = index + 1;
}) });
} }
/** /**
* 生命周期created * 监听selectData
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public created(){ @Watch("selectData", { immediate: true, deep: true })
this.loadPortletList({},{}); onSelectDataChange() {
} this.selectData.forEach((item: any, index: number) => {
item.id = index + 1;
});
}
/**
* 生命周期created
*
* @returns {void}
* @memberof AppCustomize
*/
public created() {
this.loadPortletList({}, {});
this.thirdPartyInit();
}
/**
* 获取可添加仪表盘数据
*
* @memberof AppCustomize
*/
public loadPortletList(context: any, viewparams: any): Promise<any> {
return new Promise((resolve: any, reject: any) => {
Http.getInstance()
.get("./assets/json/portlet-data.json")
.then((response: any) => {
if (response && response.status === 200 && response.data) {
let result: Array<any> = [];
if (typeof response.data == "string") {
const index: number = response.data.lastIndexOf(",");
result = JSON.parse(response.data);
} else {
result = response.data;
}
this.parseData(result);
console.log(result);
resolve({ data: result });
}
})
.catch((response: any) => {
console.log(response);
});
});
}
/** /**
* 获取可添加仪表盘数据 * 第三方容器初始化
* *
* @memberof APPDragList * @type {function}
* @memberof AppRichTextEditor
*/ */
public loadPortletList(context: any, viewparams: any): Promise<any> { protected thirdPartyInit(){
return new Promise((resolve: any, reject: any) => { this.$viewTool.setViewTitleOfThirdParty("自定义仪表盘");
Http.getInstance().get('./assets/json/portlet-data.json').then((response: any) => { this.$viewTool.setThirdPartyEvent(this.closeView);
if (response && response.status === 200 && response.data) { const thirdPartyName = this.$store.getters.getThirdPartyName();
let result:Array<any> = []; if(thirdPartyName){
if(typeof(response.data)=='string'){ this.titleStatus = false;
const index:number = response.data.lastIndexOf(","); }
result = JSON.parse((response.data));
}else{
result = response.data;
}
this.parseData(result);
console.log(result);
resolve({data: result});
}
}).catch((response: any) => {
console.log(response);
});
});
} }
/** /**
* 解析data * 解析data
*/ *
public parseData(data:any) { * @memberof AppCustomize
this.selectMode.forEach((i:any,ins:number)=>{ */
data.forEach((item:any,index:number) => { public parseData(data: any) {
if(i.componentName == item.componentName){ this.selectMode.forEach((i: any, ins: number) => {
data.splice(index, 1); data.forEach((item: any, index: number) => {
if (i.componentName == item.componentName) {
data.splice(index, 1);
} }
}); });
}); });
this.list_add = data; this.selectData = data;
this.list_added = this.selectMode; this.selectedData = this.selectMode;
}
}
/** /**
* modleId * modleId
* *
* @type {string} * @type {string}
* @memberof MobHomeBase * @memberof AppCustomize
*/ */
public modelId:string = ""; public modelId: string = "";
/** /**
* 功能服务名称 * 功能服务名称
* *
* @type {string} * @type {string}
* @memberof MobHomeBase * @memberof AppCustomize
*/ */
public utilServiceName:string = ""; public utilServiceName: string = "";
/** /**
* customizeChange * customizeChange
*/ *
public customizeChange() { * @memberof AppCustomize
this.saveModel(this.utilServiceName,{},{utilServiceName:this.utilServiceName,modelid:this.modelId,model:this.list_added}); */
} public customizeChange() {
this.saveModel(
/** this.utilServiceName,
* mounted {},
*/ {
public mounted() { utilServiceName: this.utilServiceName,
let parm :any= JSON.parse(this._viewparams); modelid: this.modelId,
if(parm){ model: this.selectedData,
this.modelId = parm.modelId?parm.modelId:""; }
this.utilServiceName = parm.utilServiceName?parm.utilServiceName:""; );
this.selectMode = parm.selectMode?parm.selectMode:"";
} }
console.log(this.selectMode);
}
/**
* 关闭视图
*/
public closeView() {
this.$emit("close", [this.selectMode]);
}
/**
* 生命周期钩子
*
* @memberof AppCustomize
*/
public mounted() {
let parm: any = JSON.parse(this._viewparams);
if (parm) {
this.modelId = parm.modelId ? parm.modelId : "";
this.utilServiceName = parm.utilServiceName ? parm.utilServiceName : "";
this.selectMode = parm.selectMode ? parm.selectMode : "";
}
}
public selectMode = []; /**
* 关闭视图
*
* @memberof AppCustomize
*/
public closeView() {
this.$emit("close", [this.selectMode]);
}
/** /**
* 保存模型 * 保存模型
...@@ -286,19 +334,23 @@ export default class App404 extends Vue { ...@@ -286,19 +334,23 @@ export default class App404 extends Vue {
*/ */
public saveModel(serviceName: string, context: any, viewparams: any) { public saveModel(serviceName: string, context: any, viewparams: any) {
return new Promise((resolve: any, reject: any) => { return new Promise((resolve: any, reject: any) => {
this.utilService.getService(serviceName).then((service: any) => { this.utilService
service.saveModelData(JSON.stringify(context), '', viewparams).then((response: any) => { .getService(serviceName)
resolve(response); .then((service: any) => {
}).catch((response: any) => { service
reject(response); .saveModelData(JSON.stringify(context), "", viewparams)
}); .then((response: any) => {
}).catch((response: any) => { resolve(response);
})
.catch((response: any) => {
reject(response); reject(response);
});
})
.catch((response: any) => {
reject(response);
}); });
}); });
} }
} }
</script> </script>
<style lang = "less"> <style lang = "less">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或