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 @@
height: 40px;
line-height: 40px;
color:#BDC4CD;
font-size: 15px;
font-size: 12px;
}
.content{
width: 100%;
height: 50px;
background-color: white;
position: relative;
margin-bottom: 10px;
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 12px 0;
.start{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
font-size: 30px;
color: #ED9691;
color: #ea382d;
}
.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;
width: 60%;
div:nth-child(1){
font-size: 15px;
color: #484a4b;
font-weight: 600;
}
div:nth-child(2){
font-size: 12px;
......@@ -51,12 +42,9 @@
}
}
.end{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 20px;
color: #797979;
min-width: 20px;
}
}
}
......
src/components/app-customize/app-customize.vue
浏览文件 @ e1fa704f
<template>
<ion-page :className="{ 'view-container': true, 'default-mode-view': true }">
<ion-header>
<ion-toolbar class="ionoc-view-header">
<ion-buttons slot="start">
<ion-button @click="closeView">
<ion-icon name="chevron-back"></ion-icon>
{{$t('app.button.back')}}
</ion-button>
</ion-buttons>
<ion-title class="view-title"><label class="title-label">自定义仪表盘</label></ion-title>
</ion-toolbar>
<ion-page :className="{ 'view-container': true, 'default-mode-view': true }">
<ion-header v-if="titleStatus">
<ion-toolbar class="ionoc-view-header">
<ion-buttons slot="start">
<ion-button @click="closeView">
<ion-icon name="chevron-back"></ion-icon>
{{$t('app.button.back')}}
</ion-button>
</ion-buttons>
<ion-title class="view-title">
<label class="title-label">自定义仪表盘</label>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="drag-list">
<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.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.appName}}</div>
<div>{{item.portletName}}</div>
</div>
<div class="end">
<ion-icon name = "drag-point"></ion-icon>
</div>
<div class="drag-list">
<div class="drag-list-item added">
<div class="header">已经添加的卡片</div>
<draggable v-model="selectedData" handle=".end" :animation="200" @end="dragEnd">
<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="drag-list-pic"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div class="drag-list-text">
<div>{{item.portletName}}</div>
<div v-if="item.detailText">{{item.detailText}}</div>
<div v-else>暂无描述</div>
</div>
<div class="end">
<ion-icon name="drag-point"></ion-icon>
</div>
</div>
</draggable>
</div>
</draggable>
</div>
<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.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.appName}}</div>
<div>{{item.portletName}}</div>
</div>
<div class="drag-list-item add">
<div class="header">可添加的卡片</div>
<template v-for="item in selectData">
<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"><img v-if="item.detailImage" :src="item.detailImage" alt=""></div>
<div class="drag-list-text">
<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>
</template>
</div>
</div>
</ion-content>
</ion-page >
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
......@@ -56,224 +66,262 @@ import {
Prop,
Provide,
Emit,
Watch
Watch,
} from "vue-property-decorator";
import draggable from 'vuedraggable';
import { Http } from '@/ibiz-core/utils';
import UtilService from '@/utilservice/util-service';
import draggable from "vuedraggable";
import { Http } from "@/ibiz-core/utils";
import UtilService from "@/utilservice/util-service";
@Component({
components: {
draggable,
}
},
})
export default class App404 extends Vue {
export default class AppCustomize extends Vue {
/**
* 传入数据list_added
*
* @type {Array}
* @memberof APPDragList
*/
public list_added?:any = [
]
/**
* 已添加数据
*
* @type {Array}
* @memberof AppCustomize
*/
public selectedData?: any = [];
/**
* 视图参数
*
* @type {string}
* @memberof AppRichTextEditor
*/
@Prop() protected _viewparams!: string;
public selectMode = [];
/**
* 视图参数
*
* @type {string}
* @memberof AppCustomize
*/
@Prop() protected _viewparams!: string;
/**
* 工具服务对象
*
* @protected
* @type {UtilService}
* @memberof AppDashboardDesignService
* @memberof AppCustomize
*/
protected utilService: UtilService = new UtilService();
/**
* 传入数据list_add
*
* @type {Array}
* @memberof APPDragList
*/
public list_add?:any = []
/**
* 传入数据list_add
*
* @type {Array}
* @memberof AppCustomize
*/
public selectData?: any = [];
/**
* 减少item
*
* @returns {void}
* @memberof APPDragList
*/
public delteItem(id:any){
let item:any = this.list_added.find((v:any) => v.id === id);
let length:number = this.list_add.length;
item.id = length + 1;
this.list_added.splice(id-1, 1);
this.list_added.forEach((v:any,i:any) => {
v.id = i + 1;
})
this.list_add.push(item);
this.customizeChange();
}
/**
* 减少item
*
* @returns {void}
* @memberof AppCustomize
*/
public delteItem(id: any) {
let item: any = this.selectedData.find((v: any) => v.id === id);
let length: number = this.selectData.length;
item.id = length + 1;
this.selectedData.splice(id - 1, 1);
this.selectedData.forEach((v: any, i: any) => {
v.id = i + 1;
});
this.selectData.push(item);
this.customizeChange();
}
/**
* 添加item
*
* @returns {void}
* @memberof APPDragList
*/
public addItem(id:any){
let item:any = this.list_add.find((v:any) => v.id === id);
let length:number = this.list_added.length;
item.id = length + 1;
this.list_add.splice(id-1, 1);
this.list_add.forEach((v:any,i:any) => {
v.id = i + 1
})
this.list_added.push(item);
this.customizeChange();
}
/**
* 添加item
*
* @returns {void}
* @memberof AppCustomize
*/
public addItem(id: any) {
let item: any = this.selectData.find((v: any) => v.id === id);
let length: number = this.selectedData.length;
item.id = length + 1;
this.selectData.splice(id - 1, 1);
this.selectData.forEach((v: any, i: any) => {
v.id = i + 1;
});
this.selectedData.push(item);
this.customizeChange();
}
/**
* 拖拽结束
*
* @returns {void}
* @memberof APPDragList
*/
public dragEnd(){
this.customizeChange();
console.log(this.list_added)
}
/**
* 标题显示状态
*
* @returns {void}
* @memberof AppCustomize
*/
public titleStatus = true;
/**
* 监听list_added
*
* @returns {void}
* @memberof APPDragList
*/
@Watch('list_added',{immediate: true, deep: true})
onListAdded(){
this.list_added.forEach((v:any,i:any) => {
v.id = i + 1;
})
}
/**
* 拖拽结束
*
* @returns {void}
* @memberof AppCustomize
*/
public dragEnd() {
this.customizeChange();
console.log(this.selectedData);
}
/**
* 监听list_add
*
* @returns {void}
* @memberof APPDragList
*/
@Watch('list_add',{immediate: true, deep: true})
onListAdd(){
this.list_add.forEach((v:any,i:any) => {
v.id = i + 1;
})
}
/**
* 监听selectedData
*
* @returns {void}
* @memberof AppCustomize
*/
@Watch("selectedData", { immediate: true, deep: true })
onSelectedDataChange() {
this.selectedData.forEach((item: any, index: number) => {
item.id = index + 1;
});
}
/**
* 生命周期created
*
* @returns {void}
* @memberof APPDragList
*/
public created(){
this.loadPortletList({},{});
}
/**
* 监听selectData
*
* @returns {void}
* @memberof AppCustomize
*/
@Watch("selectData", { immediate: true, deep: true })
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> {
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);
});
});
protected thirdPartyInit(){
this.$viewTool.setViewTitleOfThirdParty("自定义仪表盘");
this.$viewTool.setThirdPartyEvent(this.closeView);
const thirdPartyName = this.$store.getters.getThirdPartyName();
if(thirdPartyName){
this.titleStatus = false;
}
}
/**
* 解析data
*/
public parseData(data:any) {
this.selectMode.forEach((i:any,ins:number)=>{
data.forEach((item:any,index:number) => {
if(i.componentName == item.componentName){
data.splice(index, 1);
/**
* 解析data
*
* @memberof AppCustomize
*/
public parseData(data: any) {
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;
}
});
});
this.selectData = data;
this.selectedData = this.selectMode;
}
/**
* modleId
*
* @type {string}
* @memberof MobHomeBase
* @memberof AppCustomize
*/
public modelId:string = "";
public modelId: string = "";
/**
* 功能服务名称
*
* @type {string}
* @memberof MobHomeBase
* @memberof AppCustomize
*/
public utilServiceName:string = "";
public utilServiceName: string = "";
/**
* customizeChange
*/
public customizeChange() {
this.saveModel(this.utilServiceName,{},{utilServiceName:this.utilServiceName,modelid:this.modelId,model:this.list_added});
}
/**
* mounted
*/
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:"";
/**
* customizeChange
*
* @memberof AppCustomize
*/
public customizeChange() {
this.saveModel(
this.utilServiceName,
{},
{
utilServiceName: this.utilServiceName,
modelid: this.modelId,
model: this.selectedData,
}
);
}
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 {
*/
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) => {
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">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或