367 lines
8.3 KiB
Vue
367 lines
8.3 KiB
Vue
<!--
|
||
* @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>
|