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">
...@@ -8,23 +8,28 @@ ...@@ -8,23 +8,28 @@
{{$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">
<label class="title-label">自定义仪表盘</label>
</ion-title>
</ion-toolbar> </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>
<div class="drag-list-pic"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div class="drag-list-text"> <div class="drag-list-text">
<div>{{item.appName}}</div>
<div>{{item.portletName}}</div> <div>{{item.portletName}}</div>
<div v-if="item.detailText">{{item.detailText}}</div>
<div v-else>暂无描述</div>
</div> </div>
<div class="end"> <div class="end">
<ion-icon name = "drag-point"></ion-icon> <ion-icon name="drag-point"></ion-icon>
</div> </div>
</div> </div>
</draggable> </draggable>
...@@ -32,21 +37,26 @@ ...@@ -32,21 +37,26 @@
<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>
<div class="drag-list-pic"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div class="drag-list-text"> <div class="drag-list-text">
<div>{{item.appName}}</div>
<div>{{item.portletName}}</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>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</ion-content> </ion-content>
</ion-page > </ion-page>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -56,32 +66,34 @@ import { ...@@ -56,32 +66,34 @@ 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} * @type {string}
* @memberof AppRichTextEditor * @memberof AppCustomize
*/ */
@Prop() protected _viewparams!: string; @Prop() protected _viewparams!: string;
...@@ -90,7 +102,7 @@ export default class App404 extends Vue { ...@@ -90,7 +102,7 @@ export default class App404 extends Vue {
* *
* @protected * @protected
* @type {UtilService} * @type {UtilService}
* @memberof AppDashboardDesignService * @memberof AppCustomize
*/ */
protected utilService: UtilService = new UtilService(); protected utilService: UtilService = new UtilService();
...@@ -98,25 +110,25 @@ export default class App404 extends Vue { ...@@ -98,25 +110,25 @@ export default class App404 extends Vue {
* 传入数据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();
} }
...@@ -124,157 +136,193 @@ export default class App404 extends Vue { ...@@ -124,157 +136,193 @@ export default class App404 extends Vue {
* 添加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}
* @memberof AppCustomize
*/
public titleStatus = true;
/** /**
* 拖拽结束 * 拖拽结束
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public dragEnd(){ public dragEnd() {
this.customizeChange(); this.customizeChange();
console.log(this.list_added) console.log(this.selectedData);
} }
/** /**
* 监听list_added * 监听selectedData
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
@Watch('list_added',{immediate: true, deep: true}) @Watch("selectedData", { immediate: true, deep: true })
onListAdded(){ onSelectedDataChange() {
this.list_added.forEach((v:any,i:any) => { this.selectedData.forEach((item: any, index: number) => {
v.id = i + 1; item.id = index + 1;
}) });
} }
/** /**
* 监听list_add * 监听selectData
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
@Watch('list_add',{immediate: true, deep: true}) @Watch("selectData", { immediate: true, deep: true })
onListAdd(){ onSelectDataChange() {
this.list_add.forEach((v:any,i:any) => { this.selectData.forEach((item: any, index: number) => {
v.id = i + 1; item.id = index + 1;
}) });
} }
/** /**
* 生命周期created * 生命周期created
* *
* @returns {void} * @returns {void}
* @memberof APPDragList * @memberof AppCustomize
*/ */
public created(){ public created() {
this.loadPortletList({},{}); this.loadPortletList({}, {});
this.thirdPartyInit();
} }
/** /**
* 获取可添加仪表盘数据 * 获取可添加仪表盘数据
* *
* @memberof APPDragList * @memberof AppCustomize
*/ */
public loadPortletList(context: any, viewparams: any): Promise<any> { public loadPortletList(context: any, viewparams: any): Promise<any> {
return new Promise((resolve: any, reject: any) => { return new Promise((resolve: any, reject: any) => {
Http.getInstance().get('./assets/json/portlet-data.json').then((response: any) => { Http.getInstance()
.get("./assets/json/portlet-data.json")
.then((response: any) => {
if (response && response.status === 200 && response.data) { if (response && response.status === 200 && response.data) {
let result:Array<any> = []; let result: Array<any> = [];
if(typeof(response.data)=='string'){ if (typeof response.data == "string") {
const index:number = response.data.lastIndexOf(","); const index: number = response.data.lastIndexOf(",");
result = JSON.parse((response.data)); result = JSON.parse(response.data);
}else{ } else {
result = response.data; result = response.data;
} }
this.parseData(result); this.parseData(result);
console.log(result); console.log(result);
resolve({data: result}); resolve({ data: result });
} }
}).catch((response: any) => { })
.catch((response: any) => {
console.log(response); console.log(response);
}); });
}); });
} }
/**
* 第三方容器初始化
*
* @type {function}
* @memberof AppRichTextEditor
*/
protected thirdPartyInit(){
this.$viewTool.setViewTitleOfThirdParty("自定义仪表盘");
this.$viewTool.setThirdPartyEvent(this.closeView);
const thirdPartyName = this.$store.getters.getThirdPartyName();
if(thirdPartyName){
this.titleStatus = false;
}
}
/** /**
* 解析data * 解析data
*
* @memberof AppCustomize
*/ */
public parseData(data:any) { public parseData(data: any) {
this.selectMode.forEach((i:any,ins:number)=>{ this.selectMode.forEach((i: any, ins: number) => {
data.forEach((item:any,index:number) => { data.forEach((item: any, index: number) => {
if(i.componentName == item.componentName){ if (i.componentName == item.componentName) {
data.splice(index, 1); 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
*
* @memberof AppCustomize
*/ */
public customizeChange() { public customizeChange() {
this.saveModel(this.utilServiceName,{},{utilServiceName:this.utilServiceName,modelid:this.modelId,model:this.list_added}); this.saveModel(
this.utilServiceName,
{},
{
utilServiceName: this.utilServiceName,
modelid: this.modelId,
model: this.selectedData,
}
);
} }
/** /**
* mounted * 生命周期钩子
*
* @memberof AppCustomize
*/ */
public mounted() { public mounted() {
let parm :any= JSON.parse(this._viewparams); let parm: any = JSON.parse(this._viewparams);
if(parm){ if (parm) {
this.modelId = parm.modelId?parm.modelId:""; this.modelId = parm.modelId ? parm.modelId : "";
this.utilServiceName = parm.utilServiceName?parm.utilServiceName:""; this.utilServiceName = parm.utilServiceName ? parm.utilServiceName : "";
this.selectMode = parm.selectMode?parm.selectMode:""; this.selectMode = parm.selectMode ? parm.selectMode : "";
} }
console.log(this.selectMode);
} }
/** /**
* 关闭视图 * 关闭视图
*
* @memberof AppCustomize
*/ */
public closeView() { public closeView() {
this.$emit("close", [this.selectMode]); this.$emit("close", [this.selectMode]);
} }
public 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)
.then((service: any) => {
service
.saveModelData(JSON.stringify(context), "", viewparams)
.then((response: any) => {
resolve(response); resolve(response);
}).catch((response: any) => { })
.catch((response: any) => {
reject(response); reject(response);
}); });
}).catch((response: any) => { })
.catch((response: any) => {
reject(response); reject(response);
}); });
}); });
} }
} }
</script> </script>
<style lang = "less"> <style lang = "less">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或