新增tabs标签工具
This commit is contained in:
Erin66
@@ -27,7 +27,7 @@
|
||||
v-for="(it, idx) in item.list"
|
||||
:key="idx"
|
||||
draggable="true"
|
||||
@dragstart="dragStart(it.code)"
|
||||
@dragstart="dragStart(it.code, $event)"
|
||||
@dragend="dragEnd()"
|
||||
>
|
||||
<div class="tools-item">
|
||||
@@ -526,9 +526,14 @@ export default {
|
||||
getPXUnderScale(px) {
|
||||
return this.bigscreenScaleInWorkbench * px;
|
||||
},
|
||||
dragStart(widgetCode) {
|
||||
dragStart(widgetCode, evt) {
|
||||
this.dragWidgetCode = widgetCode;
|
||||
this.currentWidgetTotal = this.widgets.length; // 当前操作面板上有多少各组件
|
||||
// 通过 dataTransfer 传递组件 code，便于 Tabs 等嵌套容器在 drop 时读取（不依赖父组件链）
|
||||
if (evt && evt.dataTransfer) {
|
||||
evt.dataTransfer.setData("application/x-widget-code", widgetCode);
|
||||
evt.dataTransfer.effectAllowed = "copy";
|
||||
}
|
||||
},
|
||||
dragEnd() {
|
||||
/**
|
||||
@@ -555,12 +560,48 @@ export default {
|
||||
});
|
||||
},
|
||||
dragOver(evt) {
|
||||
// 鼠标在 Tabs 标签内容区内时不处理，让 tab 内容区成为 drop 目标，避免工作台抢走
|
||||
if (evt.target && evt.target.closest && (evt.target.closest(".tab-content") || evt.target.closest("[data-tab-content]"))) {
|
||||
return;
|
||||
}
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.dataTransfer.dropEffect = "copy";
|
||||
},
|
||||
// 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
|
||||
widgetOnDragged(evt) {
|
||||
// 若落在 Tabs 标签内容区内，由 widgetTabs 自己处理，不在此处添加到主画布
|
||||
if (evt.target && evt.target.closest && (evt.target.closest(".tab-content") || evt.target.closest("[data-tab-content]"))) {
|
||||
return;
|
||||
}
|
||||
// 若落在 Tabs 组件的外层容器上（如 avue-draggable），委托给对应 Tabs 加入当前激活的 tab
|
||||
const widgetsRef = this.$refs.widgets;
|
||||
const widgetList = Array.isArray(widgetsRef) ? widgetsRef : (widgetsRef ? [widgetsRef] : []);
|
||||
if (evt.target && widgetList.length) {
|
||||
for (let i = 0; i < widgetList.length; i++) {
|
||||
const w = widgetList[i];
|
||||
if (!w || !w.$el || !w.$el.contains(evt.target)) continue;
|
||||
if (this.widgets[i] && this.widgets[i].type === "widget-tabs") {
|
||||
const findTabs = (comp) => {
|
||||
if (!comp) return null;
|
||||
if (typeof comp.addWidgetFromDrop === "function") return comp;
|
||||
if (comp.$children && comp.$children.length) {
|
||||
for (let j = 0; j < comp.$children.length; j++) {
|
||||
const found = findTabs(comp.$children[j]);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const tabsComp = findTabs(w);
|
||||
if (tabsComp) {
|
||||
tabsComp.addWidgetFromDrop(evt);
|
||||
return;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
let widgetType = this.dragWidgetCode;
|
||||
|
||||
// 获取结束坐标和列名
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
/*
|
||||
* @Descripttion: Tabs标签组件
|
||||
* @version:
|
||||
* @Author: Devli
|
||||
* @Date: 2024-01-01 00:00:00
|
||||
* @LastEditors: Devli
|
||||
* @LastEditTime: 2024-01-01 00:00:00
|
||||
*/
|
||||
export const widgetTabs = {
|
||||
code: 'widget-tabs',
|
||||
type: 'form',
|
||||
tabName: '表单',
|
||||
label: 'Tabs标签',
|
||||
icon: 'iconkuangjia',
|
||||
options: {
|
||||
// 配置
|
||||
setup: [
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '图层名称',
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 'Tabs标签',
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '标签位置',
|
||||
name: 'tabPosition',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{ code: 'top', name: '顶部' },
|
||||
{ code: 'right', name: '右侧' },
|
||||
{ code: 'bottom', name: '底部' },
|
||||
{ code: 'left', name: '左侧' },
|
||||
],
|
||||
value: 'top',
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '标签类型',
|
||||
name: 'type',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{ code: '', name: '默认' },
|
||||
{ code: 'border-card', name: '边框卡片' },
|
||||
{ code: 'card', name: '卡片' },
|
||||
],
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '可关闭',
|
||||
name: 'closable',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '可添加',
|
||||
name: 'addable',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '可拉伸',
|
||||
name: 'stretch',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '标签字体颜色',
|
||||
name: 'labelColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#303133',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '激活标签颜色',
|
||||
name: 'activeColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#409EFF',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'fontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'el-button',
|
||||
label: '标签列表',
|
||||
name: 'tabsList',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: [
|
||||
{ label: '标签一', name: 'tab1', content: '标签一的内容', children: [] },
|
||||
{ label: '标签二', name: 'tab2', content: '标签二的内容', children: [] },
|
||||
{ label: '标签三', name: 'tab3', content: '标签三的内容', children: [] },
|
||||
],
|
||||
},
|
||||
[
|
||||
{
|
||||
name: '组件联动',
|
||||
list: [
|
||||
{
|
||||
type: 'componentLinkage',
|
||||
label: '',
|
||||
name: 'componentLinkage',
|
||||
required: false,
|
||||
value: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
// 数据
|
||||
data: [
|
||||
{
|
||||
type: 'el-radio-group',
|
||||
label: '数据类型',
|
||||
name: 'dataType',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectValue: true,
|
||||
selectOptions: [
|
||||
{
|
||||
code: 'staticData',
|
||||
name: '静态数据',
|
||||
},
|
||||
{
|
||||
code: 'dynamicData',
|
||||
name: '动态数据',
|
||||
},
|
||||
],
|
||||
value: 'staticData',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刷新时间(毫秒)',
|
||||
name: 'refreshTime',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
value: 30000
|
||||
},
|
||||
{
|
||||
type: 'el-button',
|
||||
label: '静态数据',
|
||||
name: 'staticData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'staticData',
|
||||
value: [
|
||||
{ label: '标签一', name: 'tab1', content: '标签一的内容', children: [] },
|
||||
{ label: '标签二', name: 'tab2', content: '标签二的内容', children: [] },
|
||||
{ label: '标签三', name: 'tab3', content: '标签三的内容', children: [] },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'dycustComponents',
|
||||
label: '',
|
||||
name: 'dynamicData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
chartType: 'widget-tabs',
|
||||
dictKey: 'TABS_PROPERTIES',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
// 坐标
|
||||
position: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左边距',
|
||||
name: 'left',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '上边距',
|
||||
name: 'top',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
required: false,
|
||||
placeholder: '该容器在1920px大屏中的宽度',
|
||||
value: 400,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
required: false,
|
||||
placeholder: '该容器在1080px大屏中的高度',
|
||||
value: 300,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import {widgetHref} from "./configure/texts/widget-href"
|
||||
import {widgetTime} from "./configure/texts/widget-time"
|
||||
import {widgetImage} from "./configure/texts/widget-image"
|
||||
import {widgetButton} from "./configure/form/widget-button"
|
||||
import {widgetTabs} from "./configure/form/widget-tabs"
|
||||
import {widgetSliders} from "./configure/texts/widget-slider"
|
||||
import {widgetVideo} from "./configure/texts/widget-video"
|
||||
import {widgetVideoMonitor} from "./configure/texts/widget-videoMonitor"
|
||||
@@ -68,6 +69,7 @@ export const widgetTool = [
|
||||
widgetTime,
|
||||
widgetImage,
|
||||
widgetButton,
|
||||
widgetTabs,
|
||||
// widgetSliders,
|
||||
widgetVideo,
|
||||
widgetVideoMonitor,
|
||||
|
||||
638
src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue
Normal file
638
src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue
Normal file
@@ -0,0 +1,638 @@
|
||||
<!--
|
||||
* @Author: Devli
|
||||
* @Date: 2024-01-01 00:00:00
|
||||
* @Last Modified by: Devli
|
||||
* @Last Modified time: 2024-01-01 00:00:00
|
||||
!-->
|
||||
<template>
|
||||
<div class="widget-tabs">
|
||||
<el-tabs
|
||||
:style="styleObj"
|
||||
:tab-position="tabPosition"
|
||||
:type="tabsType"
|
||||
:closable="closable"
|
||||
:addable="addable"
|
||||
:stretch="stretch"
|
||||
v-model="activeTab"
|
||||
@tab-click="handleTabClick"
|
||||
@tab-remove="handleTabRemove"
|
||||
@tab-add="handleTabAdd"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(tab, index) in tabsList"
|
||||
:key="tab.name || index"
|
||||
:label="tab.label"
|
||||
:name="tab.name || `tab${index}`"
|
||||
:closable="closable"
|
||||
>
|
||||
<div
|
||||
class="tab-content"
|
||||
data-tab-content
|
||||
:style="contentStyle"
|
||||
@drop="handleTabDrop($event, tab, index)"
|
||||
@dragover.capture.prevent="handleTabDragOver($event)"
|
||||
@dragover.prevent="handleTabDragOver($event)"
|
||||
@dragenter.capture.prevent="handleTabDragEnter($event)"
|
||||
@dragenter.prevent="handleTabDragEnter($event)"
|
||||
>
|
||||
<!-- 渲染子组件 -->
|
||||
<template v-if="tab.children && tab.children.length > 0">
|
||||
<component
|
||||
v-for="(childWidget, childIndex) in tab.children"
|
||||
:key="childWidget.value.widgetId || `child-${index}-${childIndex}`"
|
||||
:is="getComponentName(childWidget.type)"
|
||||
:value="childWidget.value"
|
||||
:widget-index="childIndex"
|
||||
:ispreview="ispreview"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: (childWidget.value.position && childWidget.value.position.left) ? childWidget.value.position.left + 'px' : '0px',
|
||||
top: (childWidget.value.position && childWidget.value.position.top) ? childWidget.value.position.top + 'px' : '0px',
|
||||
width: (childWidget.value.position && childWidget.value.position.width) ? childWidget.value.position.width + 'px' : '100px',
|
||||
height: (childWidget.value.position && childWidget.value.position.height) ? childWidget.value.position.height + 'px' : '50px',
|
||||
zIndex: 10,
|
||||
}"
|
||||
@contextmenu.prevent.native="handleChildWidgetRightClick($event, childIndex, index)"
|
||||
@mousedown.prevent.native="handleChildWidgetClick($event, childIndex, index)"
|
||||
@mouseup.prevent.native="grade = false"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="tab-content-empty">
|
||||
拖拽组件到这里
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
originWidgetLinkageLogic,
|
||||
targetWidgetLinkageLogic,
|
||||
} from "@/views/bigscreenDesigner/designer/linkageLogic";
|
||||
import { getToolByCode } from "@/views/bigscreenDesigner/designer/tools/index";
|
||||
// 与主画布 widget.vue 保持一致：注册所有可拖入的组件，否则图表、下拉等会报 Unknown custom element
|
||||
import widgetHref from "../texts/widgetHref.vue";
|
||||
import widgetText from "../texts/widgetText.vue";
|
||||
import widgetButton from "./widgetButton.vue";
|
||||
import widgetImage from "../texts/widgetImage.vue";
|
||||
import widgetTable from "../texts/widgetTable.vue";
|
||||
import WidgetMarquee from "../texts/widgetMarquee.vue";
|
||||
import widgetTime from "../texts/widgetTime.vue";
|
||||
import widgetSlider from "../texts/widgetSlider.vue";
|
||||
import widgetVideo from "../texts/widgetVideo.vue";
|
||||
import widgetVideoMonitor from "../texts/widgetVideoMonitor.vue";
|
||||
import WidgetIframe from "../texts/widgetIframe.vue";
|
||||
import widgetCalendar from "../texts/widgetCalendar.vue";
|
||||
import widgetBarchart from "../bar/widgetBarchart.vue";
|
||||
import widgetScatter from "../scatter/widgetScatter.vue";
|
||||
import widgetGradientColorBarchart from "../bar/widgetGradientColorBarchart.vue";
|
||||
import widgetLinechart from "../line/widgetLinechart.vue";
|
||||
import widgetBarlinechart from "../barline/widgetBarlinechart";
|
||||
import WidgetPiechart from "../pie/widgetPiechart.vue";
|
||||
import WidgetFunnel from "../funnel/widgetFunnel.vue";
|
||||
import WidgetGauge from "../percent/widgetGauge.vue";
|
||||
import WidgetPieNightingaleRoseArea from "../pie/widgetPieNightingaleRose";
|
||||
import widgetLineMap from "../map/widgetLineMap.vue";
|
||||
import widgetPiePercentageChart from "../percent/widgetPiePercentageChart";
|
||||
import widgetAirBubbleMap from "../map/widgetAirBubbleMap.vue";
|
||||
import widgetBarStackChart from "../bar/widgetBarStackChart.vue";
|
||||
import widgetLineStackChart from "../line/widgetLineStackChart.vue";
|
||||
import widgetBarCompareChart from "../bar/widgetBarCompareChart.vue";
|
||||
import widgetLineCompareChart from "../line/widgetLineCompareChart.vue";
|
||||
import widgetDecoratePieChart from "../styleWidget/widgetDecoratePieChart.vue";
|
||||
import widgetMoreBarLineChart from "../barline/widgetMoreBarLineChart";
|
||||
import widgetWordCloud from "../wordcloud/widgetWordCloud.vue";
|
||||
import widgetHeatmap from "../heatmap/widgetHeatmap.vue";
|
||||
import widgetRadar from "../radar/widgetRadar.vue";
|
||||
import widgetBarLineStackChart from "../barline/widgetBarLineStackChart";
|
||||
import widgetSelect from "./widgetSelect.vue";
|
||||
import widgetFormTime from "./widgetFormTime.vue";
|
||||
import widgetScaleVertical from "../scale/widgetScaleVertical.vue";
|
||||
import widgetScaleHorizontal from "../scale/widgetScaleHorizontal.vue";
|
||||
import widgetBarDoubleYaxisChart from "../bar/widgetBarDoubleYaxisChart.vue";
|
||||
import widgetBorder from "../styleWidget/widgetBorder.vue";
|
||||
import widgetDecorateFlowLine from "../styleWidget/widgetDecorateFlowLine.vue";
|
||||
import widgetDecoration from "../styleWidget/widgetDecoration.vue";
|
||||
import widgetBarMap from "../map/widgetBarMap.vue";
|
||||
import widgetChinaMap from "../map/widgetChinaMap.vue";
|
||||
import widgetGlobalMap from "../map/widgetGlobalMap.vue";
|
||||
import widgetBarStackMoreShowChart from "../bar/widgetBarStackMoreShowChart.vue";
|
||||
import widgetBarLineSingleChart from "../barline/widgetBarLineSingleChart.vue";
|
||||
|
||||
export default {
|
||||
name: "WidgetTabs",
|
||||
components: {
|
||||
widgetHref,
|
||||
widgetText,
|
||||
widgetButton,
|
||||
widgetImage,
|
||||
widgetTable,
|
||||
WidgetMarquee,
|
||||
widgetTime,
|
||||
widgetSlider,
|
||||
widgetVideo,
|
||||
widgetVideoMonitor,
|
||||
WidgetIframe,
|
||||
widgetCalendar,
|
||||
widgetBarchart,
|
||||
widgetGradientColorBarchart,
|
||||
widgetLinechart,
|
||||
widgetBarlinechart,
|
||||
WidgetPiechart,
|
||||
WidgetFunnel,
|
||||
WidgetGauge,
|
||||
WidgetPieNightingaleRoseArea,
|
||||
widgetLineMap,
|
||||
widgetPiePercentageChart,
|
||||
widgetAirBubbleMap,
|
||||
widgetBarStackChart,
|
||||
widgetLineStackChart,
|
||||
widgetBarCompareChart,
|
||||
widgetLineCompareChart,
|
||||
widgetDecoratePieChart,
|
||||
widgetMoreBarLineChart,
|
||||
widgetWordCloud,
|
||||
widgetHeatmap,
|
||||
widgetRadar,
|
||||
widgetBarLineStackChart,
|
||||
widgetScaleVertical,
|
||||
widgetScaleHorizontal,
|
||||
widgetSelect,
|
||||
widgetFormTime,
|
||||
widgetBarDoubleYaxisChart,
|
||||
widgetBorder,
|
||||
widgetDecorateFlowLine,
|
||||
widgetDecoration,
|
||||
widgetBarMap,
|
||||
widgetChinaMap,
|
||||
widgetGlobalMap,
|
||||
widgetScatter,
|
||||
widgetBarStackMoreShowChart,
|
||||
widgetBarLineSingleChart,
|
||||
},
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean,
|
||||
widgetIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
optionsSetup: {},
|
||||
optionsData: {},
|
||||
optionsStyle: {},
|
||||
activeTab: '',
|
||||
dynamicTabsList: [],
|
||||
flagInter: null,
|
||||
grade: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
transStyle() {
|
||||
return this.objToOne(this.options);
|
||||
},
|
||||
styleObj() {
|
||||
return {
|
||||
position: this.ispreview ? "relative" : "static",
|
||||
width: this.optionsStyle.width + "px",
|
||||
height: this.optionsStyle.height + "px",
|
||||
left: this.optionsStyle.left + "px",
|
||||
top: this.optionsStyle.top + "px",
|
||||
display:
|
||||
this.transStyle.hideLayer === undefined
|
||||
? "block"
|
||||
: this.transStyle.hideLayer ? "none" : "block",
|
||||
};
|
||||
},
|
||||
contentStyle() {
|
||||
return {
|
||||
color: this.transStyle.labelColor || '#303133',
|
||||
'font-size': (this.transStyle.fontSize || 14) + 'px',
|
||||
padding: '20px',
|
||||
height: '100%',
|
||||
'box-sizing': 'border-box',
|
||||
};
|
||||
},
|
||||
tabPosition() {
|
||||
return this.transStyle.tabPosition || 'top';
|
||||
},
|
||||
tabsType() {
|
||||
return this.transStyle.type || '';
|
||||
},
|
||||
closable() {
|
||||
return this.transStyle.closable || false;
|
||||
},
|
||||
addable() {
|
||||
return this.transStyle.addable || false;
|
||||
},
|
||||
stretch() {
|
||||
return this.transStyle.stretch || false;
|
||||
},
|
||||
tabsList() {
|
||||
if (this.optionsData && this.optionsData.dataType === 'dynamicData' && this.optionsData.dynamicData && this.dynamicTabsList.length > 0) {
|
||||
// 动态数据
|
||||
return this.dynamicTabsList;
|
||||
} else {
|
||||
// 静态数据 - 优先使用setup中的tabsList，确保children数据不丢失
|
||||
const tabsList = this.optionsSetup.tabsList || this.transStyle.tabsList || [];
|
||||
// 确保每个tab都有children数组
|
||||
tabsList.forEach(tab => {
|
||||
if (!tab.children) {
|
||||
this.$set(tab, 'children', []);
|
||||
}
|
||||
});
|
||||
return tabsList;
|
||||
}
|
||||
},
|
||||
allComponentLinkage() {
|
||||
return this.$store.state.designer.allComponentLinkage;
|
||||
},
|
||||
tabBigscreen() {
|
||||
// 子组件的bigscreen应该是相对于tab容器的
|
||||
return {
|
||||
bigscreenWidth: this.optionsStyle.width,
|
||||
bigscreenHeight: this.optionsStyle.height,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.options = val;
|
||||
this.optionsSetup = val.setup || {};
|
||||
this.optionsData = val.data || {};
|
||||
this.optionsStyle = val.position || {};
|
||||
this.setActiveTab();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.options = this.value;
|
||||
this.optionsSetup = this.value.setup;
|
||||
this.optionsData = this.value.data;
|
||||
this.optionsStyle = this.value.position;
|
||||
this.setActiveTab();
|
||||
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
|
||||
|
||||
// 设置动态数据
|
||||
if (this.optionsData && this.optionsData.dataType === 'dynamicData') {
|
||||
this.dynamicDataFn(this.optionsData.dynamicData, this.optionsData.refreshTime);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setActiveTab() {
|
||||
const tabs = this.tabsList;
|
||||
if (tabs && tabs.length > 0) {
|
||||
this.activeTab = tabs[0].name || 'tab0';
|
||||
}
|
||||
},
|
||||
handleTabClick(tab) {
|
||||
const currentTab = this.tabsList.find(t => (t.name || `tab${this.tabsList.indexOf(t)}`) === tab.name);
|
||||
if (currentTab) {
|
||||
originWidgetLinkageLogic(this, true, {
|
||||
currentData: currentTab,
|
||||
}); // 联动-源组件逻辑
|
||||
}
|
||||
},
|
||||
handleTabRemove(name) {
|
||||
// 处理标签页移除
|
||||
console.log('移除标签页:', name);
|
||||
},
|
||||
handleTabAdd() {
|
||||
// 处理标签页添加
|
||||
console.log('添加标签页');
|
||||
},
|
||||
//动态数据字典解析
|
||||
dynamicDataFn(val, refreshTime) {
|
||||
if (!val) return;
|
||||
clearInterval(this.flagInter); // 清除之前的定时器
|
||||
if (this.ispreview) {
|
||||
this.getEchartData(val);
|
||||
this.flagInter = setInterval(() => {
|
||||
this.getEchartData(val);
|
||||
}, refreshTime);
|
||||
} else {
|
||||
this.getEchartData(val);
|
||||
}
|
||||
},
|
||||
getEchartData(val) {
|
||||
const data = this.queryEchartsData(val);
|
||||
data.then((res) => {
|
||||
this.renderingFn(res);
|
||||
}).catch((err) => {
|
||||
console.error('获取tabs数据失败:', err);
|
||||
});
|
||||
},
|
||||
renderingFn(val) {
|
||||
// 将动态数据转换为tabs格式
|
||||
this.dynamicTabsList = Array.isArray(val) ? val.map((item, index) => ({
|
||||
label: item.label || item.name || `标签${index + 1}`,
|
||||
name: item.name || item.value || `tab${index}`,
|
||||
content: item.content || item.label || item.name || '',
|
||||
children: item.children || [],
|
||||
})) : [];
|
||||
this.$nextTick(() => {
|
||||
this.setActiveTab();
|
||||
});
|
||||
},
|
||||
// 处理tab内容区域的拖拽
|
||||
handleTabDragOver(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.stopImmediatePropagation();
|
||||
evt.dataTransfer.dropEffect = "copy";
|
||||
return false;
|
||||
},
|
||||
handleTabDragEnter(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.stopImmediatePropagation();
|
||||
return false;
|
||||
},
|
||||
handleTabDrop(evt, tab, tabIndex) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.stopImmediatePropagation();
|
||||
|
||||
console.log('Tabs drop事件触发', tab, tabIndex);
|
||||
|
||||
// 优先从 dataTransfer 读取（index 在 dragStart 时已写入），否则再沿父组件查找
|
||||
let dragWidgetCode = null;
|
||||
if (evt.dataTransfer && evt.dataTransfer.types && evt.dataTransfer.types.indexOf('application/x-widget-code') !== -1) {
|
||||
dragWidgetCode = evt.dataTransfer.getData('application/x-widget-code');
|
||||
}
|
||||
if (!dragWidgetCode) {
|
||||
dragWidgetCode = this.getDragWidgetCode();
|
||||
}
|
||||
console.log('拖拽的组件类型:', dragWidgetCode);
|
||||
|
||||
if (!dragWidgetCode) {
|
||||
console.warn('未获取到拖拽组件类型');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取相对于tab内容区域的坐标
|
||||
const tabContentEl = evt.currentTarget;
|
||||
const tabContentRect = tabContentEl.getBoundingClientRect();
|
||||
const x = evt.clientX - tabContentRect.left;
|
||||
const y = evt.clientY - tabContentRect.top;
|
||||
|
||||
// 创建新组件
|
||||
const tool = getToolByCode(dragWidgetCode);
|
||||
if (!tool) {
|
||||
console.warn('未找到组件配置:', dragWidgetCode);
|
||||
return;
|
||||
}
|
||||
|
||||
const widgetJson = {
|
||||
type: dragWidgetCode,
|
||||
value: {
|
||||
setup: {},
|
||||
data: {},
|
||||
position: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
top: 0,
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
options: this.deepClone(tool.options),
|
||||
};
|
||||
|
||||
// 处理默认值
|
||||
const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
|
||||
|
||||
// 设置位置（相对于tab内容区域）
|
||||
widgetJsonValue.value.position.left = x - widgetJsonValue.value.position.width / 2;
|
||||
widgetJsonValue.value.position.top = y - widgetJsonValue.value.position.height / 2;
|
||||
|
||||
// 确保位置在容器内
|
||||
if (widgetJsonValue.value.position.left < 0) {
|
||||
widgetJsonValue.value.position.left = 0;
|
||||
}
|
||||
if (widgetJsonValue.value.position.top < 0) {
|
||||
widgetJsonValue.value.position.top = 0;
|
||||
}
|
||||
if (widgetJsonValue.value.position.left + widgetJsonValue.value.position.width > this.optionsStyle.width) {
|
||||
widgetJsonValue.value.position.left = this.optionsStyle.width - widgetJsonValue.value.position.width;
|
||||
}
|
||||
if (widgetJsonValue.value.position.top + widgetJsonValue.value.position.height > this.optionsStyle.height) {
|
||||
widgetJsonValue.value.position.top = this.optionsStyle.height - widgetJsonValue.value.position.height;
|
||||
}
|
||||
|
||||
// 生成唯一ID
|
||||
const uuid = Number(Math.random().toString().substr(2)).toString(36);
|
||||
widgetJsonValue.value.widgetId = uuid;
|
||||
widgetJsonValue.value.widgetCode = dragWidgetCode;
|
||||
|
||||
// 获取当前的tabsList（确保使用正确的数据源）
|
||||
let currentTabsList = this.tabsList;
|
||||
|
||||
// 找到对应的tab并添加子组件
|
||||
const targetTab = currentTabsList[tabIndex];
|
||||
if (!targetTab) {
|
||||
console.warn('未找到目标tab');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!targetTab.children) {
|
||||
this.$set(targetTab, 'children', []);
|
||||
}
|
||||
targetTab.children.push(this.deepClone(widgetJsonValue));
|
||||
|
||||
// 更新到setup中
|
||||
this.optionsSetup.tabsList = currentTabsList;
|
||||
|
||||
// 更新value.setup
|
||||
if (!this.value.setup) {
|
||||
this.$set(this.value, 'setup', {});
|
||||
}
|
||||
this.value.setup.tabsList = currentTabsList;
|
||||
|
||||
// 触发更新
|
||||
this.$emit('input', this.value);
|
||||
|
||||
console.log('子组件已添加:', targetTab.children);
|
||||
|
||||
this.grade = false;
|
||||
},
|
||||
/**
|
||||
* 当 drop 落在 Tabs 外层容器（如 avue-draggable）时由设计器调用，将组件加入当前激活的 tab
|
||||
*/
|
||||
addWidgetFromDrop(evt) {
|
||||
if (!evt || !evt.dataTransfer) return;
|
||||
let dragWidgetCode = null;
|
||||
if (evt.dataTransfer.types && evt.dataTransfer.types.indexOf("application/x-widget-code") !== -1) {
|
||||
dragWidgetCode = evt.dataTransfer.getData("application/x-widget-code");
|
||||
}
|
||||
if (!dragWidgetCode) dragWidgetCode = this.getDragWidgetCode();
|
||||
if (!dragWidgetCode) return;
|
||||
|
||||
const tabIndex = this.tabsList.findIndex(
|
||||
(t, i) => (t.name || `tab${i}`) === this.activeTab
|
||||
);
|
||||
const tab = tabIndex >= 0 ? this.tabsList[tabIndex] : this.tabsList[0];
|
||||
const actualIndex = tabIndex >= 0 ? tabIndex : 0;
|
||||
|
||||
const contentEls = this.$el.querySelectorAll("[data-tab-content]");
|
||||
const contentEl = contentEls[actualIndex] || contentEls[0];
|
||||
const rect = contentEl ? contentEl.getBoundingClientRect() : this.$el.getBoundingClientRect();
|
||||
const x = evt.clientX - rect.left;
|
||||
const y = evt.clientY - rect.top;
|
||||
|
||||
const tool = getToolByCode(dragWidgetCode);
|
||||
if (!tool) return;
|
||||
|
||||
const widgetJson = {
|
||||
type: dragWidgetCode,
|
||||
value: {
|
||||
setup: {},
|
||||
data: {},
|
||||
position: { width: 0, height: 0, left: 0, top: 0, zIndex: 0 },
|
||||
},
|
||||
options: this.deepClone(tool.options),
|
||||
};
|
||||
const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
|
||||
widgetJsonValue.value.position.left = Math.max(0, x - widgetJsonValue.value.position.width / 2);
|
||||
widgetJsonValue.value.position.top = Math.max(0, y - widgetJsonValue.value.position.height / 2);
|
||||
if (widgetJsonValue.value.position.left + widgetJsonValue.value.position.width > this.optionsStyle.width) {
|
||||
widgetJsonValue.value.position.left = this.optionsStyle.width - widgetJsonValue.value.position.width;
|
||||
}
|
||||
if (widgetJsonValue.value.position.top + widgetJsonValue.value.position.height > this.optionsStyle.height) {
|
||||
widgetJsonValue.value.position.top = this.optionsStyle.height - widgetJsonValue.value.position.height;
|
||||
}
|
||||
const uuid = Number(Math.random().toString().substr(2)).toString(36);
|
||||
widgetJsonValue.value.widgetId = uuid;
|
||||
widgetJsonValue.value.widgetCode = dragWidgetCode;
|
||||
|
||||
const currentTabsList = this.tabsList;
|
||||
const targetTab = currentTabsList[actualIndex];
|
||||
if (!targetTab) return;
|
||||
if (!targetTab.children) this.$set(targetTab, "children", []);
|
||||
targetTab.children.push(this.deepClone(widgetJsonValue));
|
||||
|
||||
this.optionsSetup.tabsList = currentTabsList;
|
||||
if (!this.value.setup) this.$set(this.value, "setup", {});
|
||||
this.value.setup.tabsList = currentTabsList;
|
||||
this.$emit("input", this.value);
|
||||
},
|
||||
getDragWidgetCode() {
|
||||
// 尝试从父组件获取dragWidgetCode
|
||||
let parent = this.$parent;
|
||||
while (parent) {
|
||||
if (parent.dragWidgetCode !== undefined) {
|
||||
return parent.dragWidgetCode;
|
||||
}
|
||||
parent = parent.$parent;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getWidgetConfigValue(widgetJson) {
|
||||
this.setWidgetConfigValue(
|
||||
widgetJson.options.setup,
|
||||
widgetJson.value.setup
|
||||
);
|
||||
this.setWidgetConfigValue(
|
||||
widgetJson.options.position,
|
||||
widgetJson.value.position
|
||||
);
|
||||
this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data);
|
||||
return widgetJson;
|
||||
},
|
||||
setWidgetConfigValue(config, configValue) {
|
||||
if (config) {
|
||||
config.forEach((item) => {
|
||||
if (this.isObjectFn(item)) {
|
||||
configValue[item.name] = item.value;
|
||||
}
|
||||
if (this.isArrayFn(item)) {
|
||||
item.forEach((itemChild) => {
|
||||
itemChild.list.forEach((ev) => {
|
||||
configValue[ev.name] = ev.value;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
handleChildWidgetActivated(data) {
|
||||
// 处理子组件激活事件
|
||||
console.log('子组件激活:', data);
|
||||
},
|
||||
handleChildWidgetClick(event, childIndex, tabIndex) {
|
||||
// 处理子组件点击
|
||||
event.stopPropagation();
|
||||
this.grade = true;
|
||||
},
|
||||
handleChildWidgetRightClick(event, childIndex, tabIndex) {
|
||||
// 处理子组件右键
|
||||
event.stopPropagation();
|
||||
},
|
||||
// 将组件类型字符串转换为组件名称
|
||||
getComponentName(type) {
|
||||
// 将 widget-text 转换为 widgetText
|
||||
if (!type) return '';
|
||||
return type.split('-').map((part, index) => {
|
||||
if (index === 0) return part;
|
||||
return part.charAt(0).toUpperCase() + part.slice(1);
|
||||
}).join('');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.widget-tabs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-tabs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.tab-content-empty {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
import widgetHref from "./texts/widgetHref.vue";
|
||||
import widgetText from "./texts/widgetText.vue";
|
||||
import widgetButton from './form/widgetButton.vue';
|
||||
import widgetTabs from './form/widgetTabs.vue';
|
||||
import WidgetMarquee from "./texts/widgetMarquee.vue";
|
||||
import widgetTime from "./texts/widgetTime.vue";
|
||||
import widgetImage from "./texts/widgetImage.vue";
|
||||
@@ -72,6 +73,7 @@ export default {
|
||||
widgetHref,
|
||||
widgetText,
|
||||
widgetButton,
|
||||
widgetTabs,
|
||||
widgetBorder,
|
||||
widgetDecorateFlowLine,
|
||||
widgetDecoration,
|
||||
|
||||
Reference in New Issue
Block a user