214 lines
8.6 KiB
Vue
214 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<el-col :sm="24" :md="pzoption.mdwidth">
|
|||
|
|
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="showdig()"></i>
|
|||
|
|
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
|
|||
|
|
<el-tabs :type="childpro.tabtype" style="margin-top:10px" v-model="childpro.TabsValue">
|
|||
|
|
<el-tab-pane v-for="(item, index) in childpro.Tabs" :key="item.name" :label="item.title" :name="item.name" style="min-height:200px"></el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
|
|||
|
|
<el-form>
|
|||
|
|
<el-form-item label="Tab样式">
|
|||
|
|
<el-radio v-model="childpro.tabtype" label="">样式一</el-radio>
|
|||
|
|
<el-radio v-model="childpro.tabtype" label="card">样式二</el-radio>
|
|||
|
|
<el-radio v-model="childpro.tabtype" label="border-card">样式三</el-radio>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div slot="header" class="clearfix">
|
|||
|
|
<span>页面组件(点击下面组件加入到对应Tab中去)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<el-row>
|
|||
|
|
<el-button v-for="(item, index) in tempwigs" size="small" @click="totab(item)" style="margin-top:10px">{{item.wigdetcode}}{{item.title}}</el-button>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-button size="small" @click="addTab(childpro.TabsValue)" style="margin-top:10px;display:none">
|
|||
|
|
添加Table
|
|||
|
|
</el-button>
|
|||
|
|
<el-tabs :type="childpro.tabtype" v-model="childpro.TabsValue" style="margin-top:10px" closable @tab-remove="removeTab">
|
|||
|
|
<el-tab-pane v-for="(item, index) in childpro.Tabs" :key="item.name" :label="item.title" :name="item.name" style="min-height:200px">
|
|||
|
|
<el-form>
|
|||
|
|
<el-form-item label="Tab名称">
|
|||
|
|
<el-input v-model="item.title" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<el-row style="margin-top:10px">
|
|||
|
|
<el-button v-for="(el, elindex) in item.content" size="small" @click="towigs(el,elindex)">{{el.wigdetcode}}{{el.title}}</el-button>
|
|||
|
|
</el-row>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<!--<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="dialogInputVisible = false">取 消</el-button>
|
|||
|
|
<el-button type="primary" @click="qd()">确 定</el-button>
|
|||
|
|
</span>-->
|
|||
|
|
|
|||
|
|
</el-dialog>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
module.exports = {
|
|||
|
|
props: ['pzoption', 'index'],
|
|||
|
|
data: function () {
|
|||
|
|
return {
|
|||
|
|
dialogInputVisible: false,
|
|||
|
|
iscontrols: false,
|
|||
|
|
tempwigs: [],
|
|||
|
|
childpro: {
|
|||
|
|
placeholder: "区域一",
|
|||
|
|
disabled: false,
|
|||
|
|
height: [200, 200, 200],
|
|||
|
|
tabIndex: 2,
|
|||
|
|
tabtype: "border-card",
|
|||
|
|
TabsValue: '1',
|
|||
|
|
Tabs: [{
|
|||
|
|
title: '标签一',
|
|||
|
|
name: '1',
|
|||
|
|
content: []
|
|||
|
|
}, {
|
|||
|
|
title: '标签二',
|
|||
|
|
name: '2',
|
|||
|
|
content: []
|
|||
|
|
}, {
|
|||
|
|
title: '标签三',
|
|||
|
|
name: '3',
|
|||
|
|
content: []
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
delWid: function (wigdetcode) {
|
|||
|
|
// 子组件中触发父组件方法ee并传值cc12345
|
|||
|
|
this.$root.nowwidget = {};
|
|||
|
|
_.remove(this.$root.FormData.wigetitems, function (obj) {
|
|||
|
|
return obj.wigdetcode == wigdetcode;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
totab: function (item) {
|
|||
|
|
var acttabname = this.childpro.TabsValue;
|
|||
|
|
this.childpro.Tabs.forEach((tab, index) => {
|
|||
|
|
_.remove(tab.content, function (obj) {
|
|||
|
|
return obj.wigdetcode == item.wigdetcode;
|
|||
|
|
});
|
|||
|
|
});//先删除原有的
|
|||
|
|
this.childpro.Tabs.forEach((tab, index) => {
|
|||
|
|
if (tab.name === acttabname) {
|
|||
|
|
tab.content.push(item);
|
|||
|
|
}
|
|||
|
|
});//再添加
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
towigs: function (item, elindex) {
|
|||
|
|
debugger;
|
|||
|
|
var cho = this;
|
|||
|
|
var acttabname = cho.childpro.TabsValue;
|
|||
|
|
cho.childpro.Tabs.forEach((tab, index) => {
|
|||
|
|
if (tab.name === acttabname) {
|
|||
|
|
tab.content.splice(elindex, 1);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
qd: function () {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
showdig: function () {
|
|||
|
|
this.dialogInputVisible = true;
|
|||
|
|
var cho = this;
|
|||
|
|
cho.tempwigs = [];
|
|||
|
|
//this.tempwigs = tabs.filter(tab => tab.name !== targetName);
|
|||
|
|
_.forEach(this.$root.FormData.wigetitems, function (wig) {
|
|||
|
|
if (wig.component != "qjTab") {
|
|||
|
|
cho.tempwigs.push({ title: wig.title, wigdetcode: wig.wigdetcode });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
senddata: function () {
|
|||
|
|
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
|
|||
|
|
},
|
|||
|
|
addTab(targetName) {
|
|||
|
|
let newTabName = ++this.childpro.tabIndex + '';
|
|||
|
|
this.childpro.Tabs.push({
|
|||
|
|
title: 'NewTab',
|
|||
|
|
name: newTabName,
|
|||
|
|
content: []
|
|||
|
|
});
|
|||
|
|
this.childpro.TabsValue = newTabName;
|
|||
|
|
},
|
|||
|
|
removeTab(targetName) {
|
|||
|
|
this.$confirm('确定要删除吗?', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
let tabs = this.childpro.Tabs;
|
|||
|
|
let activeName = this.childpro.TabsValue;
|
|||
|
|
if (activeName === targetName) {
|
|||
|
|
tabs.forEach((tab, index) => {
|
|||
|
|
if (tab.name === targetName) {
|
|||
|
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
|||
|
|
if (nextTab) {
|
|||
|
|
activeName = nextTab.name;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.childpro.TabsValue = activeName;
|
|||
|
|
this.childpro.Tabs = tabs.filter(tab => tab.name !== targetName);
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.$message({
|
|||
|
|
type: 'info',
|
|||
|
|
message: '已取消删除'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted: function () {
|
|||
|
|
var pro = this;
|
|||
|
|
pro.$nextTick(function () {
|
|||
|
|
if (pro.$root.addchildwig) {
|
|||
|
|
pro.$root.addchildwig();//不能缺少,dom加载完成
|
|||
|
|
}
|
|||
|
|
if (pro.pzoption.childpro.TabsValue) {
|
|||
|
|
pro.childpro = pro.pzoption.childpro;
|
|||
|
|
} else {
|
|||
|
|
pro.pzoption.childpro = pro.childpro;
|
|||
|
|
pro.pzoption.mdwidth = 24;
|
|||
|
|
pro.senddata();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
childpro: { //深度监听，可监听到对象、数组的变化
|
|||
|
|
handler(newV, oldV) {
|
|||
|
|
this.senddata();
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
},
|
|||
|
|
'childpro.TabsValue': {
|
|||
|
|
handler(newV, oldV) {
|
|||
|
|
var pro = this;
|
|||
|
|
if (newV) {
|
|||
|
|
//切换得时候需要重新渲染图
|
|||
|
|
_.forEach(pro.childpro.Tabs[newV - 1].content, function (wig) {
|
|||
|
|
if (_.startsWith(wig.wigdetcode, "qjChart") > -1) {
|
|||
|
|
pro.$root.UpdateYBData(pro.$root.getwiget(wig.wigdetcode))
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|