<!--
* @description: 设置组件关联的公共组件
* @Date: 2023-01-04 14:42:51
* @Author: xing.heng
* @LastEditors: wujian
* @LastEditTime: 2023-06-02 15:35:43
-->
<template>
<div>
<div class="data-setting-data-box">
<div class="lc-field-head">
<div class="lc-field-title">
组件联动
</div>
</div>
<div class="lc-field-body">
<div class="select-item select-item-title">
<span class="input-wrap">目标组件</span>
<span class="input-wrap">操作</span>
</div>
<div
v-for="(field, index) in config.linkage.components"
:key="index"
class="select-item"
:class="{ 'select-item-active': field.componentKey === activeCode }"
@mouseenter="chooseComponent(field)"
>
<div class="input-wrap">
<el-form-item
label-width="0px"
>
<el-select
v-model="field.componentKey"
popper-class="bs-el-select"
class="bs-el-select"
size="mini"
@change="changeComponent(...arguments, index)"
>
<el-option
v-for="item in allComponentsExpectSelf(config.code)"
:key="item.componentKey"
:label="item.name"
:value="item.componentKey"
:disabled="currentLinkComponentKey.includes(item.componentKey)"
/>
</el-select>
</el-form-item>
</div>
<div class="input-wrap">
<div
class="select-line-icon option-add"
@click="setRelation(field)"
>
<el-tooltip
effect="dark"
content="组件联动设置"
placement="top"
>
<i class="el-icon-setting" />
</el-tooltip>
</div>
<div
class="select-line-icon option-delete"
@click="deleteLinkComponents(index)"
>
<i class="el-icon-remove-outline" />
</div>
</div>
</div>
<el-button
v-block
type="primary"
@click="addLinkComponents"
>
新增联动组件
</el-button>
</div>
</div>
<RelationSetting
:setting-visible.sync="settingVisible"
:config-map="configMap"
:source-field-list="sourceFieldList"
:target-field-list="targetFieldList"
@updateConfig="updateConfig"
/>
</div>
</template>
<script>
import RelationSetting from './RelationSetting.vue'
import cloneDeep from 'lodash/cloneDeep'
import { mapState } from 'vuex'
export default {
name: 'ComponentRelation',
components: {
RelationSetting
},
directives: {
block: {
bind (el, binding) {
el.style.width = binding.value || '100%'
}
}
},
props: {
config: {
type: Object,
default: () => {}
},
// 当前组件的联动字段
sourceFieldList: {
type: Array,
default: () => [
// {
// label: '字段1',
// value: 'field1'
// }
]
}
},
data () {
return {
// 关联设置弹窗
settingVisible: false,
cloneDeepConfig: cloneDeep(this.config),
configMap: {},
targetFieldList: [],
activeCode: null
}
},
computed: {
...mapState({
chartList: state => state.bigScreen.pageInfo.chartList
}),
// 当前已经关联的组件key
currentLinkComponentKey () {
return this.config.linkage.components?.map(item => item.componentKey) || []
}
},
mounted () {
},
beforeDestroy () {
},
methods: {
/**
* @description: 获取除自己之外的所有组件
*/
allComponentsExpectSelf (code) {
let layouts = cloneDeep(this.chartList)
const tabComponents = []
layouts?.map((ly) => {
if (ly.type === 'Tabs') {
ly?.tabList?.map(com => {
tabComponents.push(com.chart)
})
}
})
layouts = layouts?.filter(item => item.code !== code && item?.option?.displayOption?.dataAllocation?.enable)
layouts = [...layouts, ...tabComponents]?.map(item => ({
name: item.title,
componentKey: item.code
}))
return layouts
},
/**
* @description: 添加关联组件
*/
addLinkComponents () {
this.config.linkage.components.push({
componentKey: '',
maps: []
})
},
/**
* @description: 删除关联组件
*/
deleteLinkComponents (index) {
this.config.linkage.components.splice(index, 1)
},
/**
* @description: 改变关联组件
*/
changeComponent (componentKey, index) {
this.$set(
this.config.linkage.components,
index,
{
componentKey,
maps: []
}
)
},
/**
* @description: 设置关联弹窗打开
*/
setRelation (configMap) {
this.settingVisible = true
// 如果是tab页内部组件，先平铺
let layouts = cloneDeep(this.chartList)
const tabComponents = []
layouts?.map((ly) => {
if (ly.type === 'Tabs') {
ly?.tabList?.map(com => {
tabComponents.push(com.chart)
})
}
})
layouts = layouts?.filter(item => item?.option?.displayOption?.dataAllocation?.enable)
layouts = [...layouts, ...tabComponents]
this.targetFieldList = layouts.find(
item => item.code === configMap.componentKey
)?.inParams?.map(item => ({
label: item.name,
value: item.code
}))
this.configMap = cloneDeep(configMap)
},
/**
* @description: 更新关联配置
*/
updateConfig (configMapConfig) {
const index = this.config.linkage.components?.findIndex(
item => item.componentKey === configMapConfig.componentKey
)
this.$set(
this.config.linkage.components,
index,
configMapConfig
)
},
/**
* @description: 选择组件
*/
chooseComponent (field) {
this.activeCode = field?.componentKey
}
}
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
::v-deep .el-tabs__nav-wrap::after {
height: 0;
}
::v-deep .el-collapse-item__header {
background: #f2f3f5;
height: 32px;
padding: 0 12px;
}
::v-deep .el-collapse-item__content {
padding-bottom: 0;
}
.lc-field-body {
padding: 12px;
}
::v-deep .el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
::v-deep .el-tabs__nav-wrap::after {
height: 0;
}
.design-tab-warp {
padding: 10px;
}
::v-deep .el-tabs--top {
height: 100%;
}
::v-deep .el-tabs__content {
height: calc(100% - 40px);
overflow-y: auto;
}
.setting-body {
height: 100%;
}
// 筛选条件的按钮样式
.add-filter-box {
position: relative;
.add-filter {
margin-left: 90px;
margin-bottom: 10px;
}
.add-filter-btn {
position: absolute;
top: 0;
}
}
.select-item {
display: flex;
margin-bottom: 8px;
cursor: pointer;
align-items: center;
border: 1px solid #fff;
padding: 4px;
.input-wrap {
flex: 1;
display: flex;
justify-content: center;
margin-right: 2px;
::v-deep .el-form-item {
margin-bottom: 0 !important;
}
.el-input-number--mini {
width: 90px !important;
}
}
.input-wrap_left {
flex: 1;
display: flex;
align-items: center;
justify-content: left;
}
.select-line-icon {
width: 30px;
font-size: 18px;
cursor: pointer;
text-align: center;
}
.option-delete {
color: #f56c6c;
}
}
.select-item-active {
border: 1px solid var(--bs-el-color-primary);
background: var(--bs-el-background-3);
}
// 修改设置面板样式
.data-setting-box{
.data-setting-data-box{
.lc-field-head{
height: 30px;
.lc-field-title{
position: relative;
padding-left: 12px;
line-height: 30px;
height: 30px;
&:after{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 4px;
height: 14px;
background-color: var(--bs-el-color-primary);
}
}
}
}
}
</style>