You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
4.5 KiB
Vue
202 lines
4.5 KiB
Vue
<!--
|
|
* @description: 设置联动的弹窗
|
|
* @Date: 2023-01-04 14:57:06
|
|
* @Author: xing.heng
|
|
* @LastEditors: wujian
|
|
* @LastEditTime: 2023-05-23 15:46:03
|
|
-->
|
|
<template>
|
|
<el-dialog
|
|
title="组件联动设置"
|
|
:visible.sync="settingVisible"
|
|
:close-on-click-modal="false"
|
|
:before-close="handleClose"
|
|
width="800px"
|
|
append-to-body
|
|
class="bs-dialog-wrap bs-el-dialog"
|
|
>
|
|
<el-form
|
|
ref="form"
|
|
label-width="100px"
|
|
class="bs-el-form"
|
|
>
|
|
<el-table
|
|
:data="configMapConfig.maps"
|
|
class="bs-table bs-el-table"
|
|
>
|
|
<el-empty />
|
|
<el-table-column
|
|
label="当前组件映射参数"
|
|
align="center"
|
|
>
|
|
<template #default="scope">
|
|
<el-select
|
|
v-model="configMapConfig.maps[scope.$index].sourceField"
|
|
popper-class="bs-el-select"
|
|
class="bs-el-select"
|
|
>
|
|
<el-option
|
|
v-for="sourceField in sourceFieldList"
|
|
:key="sourceField.value"
|
|
:label="sourceField.label"
|
|
:value="sourceField.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="映射规则"
|
|
align="center"
|
|
>
|
|
<span>赋值给</span>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="目标组件接收参数"
|
|
align="center"
|
|
>
|
|
<template #default="scope">
|
|
<el-select
|
|
v-model="configMapConfig.maps[scope.$index].targetField"
|
|
popper-class="bs-el-select"
|
|
class="bs-el-select"
|
|
>
|
|
<el-option
|
|
v-for="targetField in targetFieldList"
|
|
:key="targetField.value"
|
|
:label="targetField.label"
|
|
:value="targetField.value"
|
|
:disabled="choosedTargetFields.includes(targetField.value)"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
width="100px"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click="handleDelete(scope.$index)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form>
|
|
<el-button
|
|
v-block
|
|
type="primary"
|
|
@click="addRelatedField"
|
|
>
|
|
新增联动字段
|
|
</el-button>
|
|
<div
|
|
slot="footer"
|
|
class="dialog-footer"
|
|
>
|
|
<el-button
|
|
class="bs-el-button-default"
|
|
@click="handleClose"
|
|
>
|
|
取消
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="updateConfig"
|
|
>
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { operatorList } from 'data-room-ui/js/dict/chartDict'
|
|
export default {
|
|
name: 'RalationSetting',
|
|
components: {
|
|
},
|
|
directives: {
|
|
block: {
|
|
bind (el, binding) {
|
|
el.style.width = binding.value || '100%'
|
|
el.style.margin = '10px auto'
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
settingVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
configMap: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
sourceFieldList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
targetFieldList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
operatorList
|
|
}
|
|
},
|
|
computed: {
|
|
configMapConfig: {
|
|
get () {
|
|
return this.configMap || {
|
|
componentKey: '',
|
|
maps: []
|
|
}
|
|
},
|
|
set () { }
|
|
},
|
|
choosedTargetFields () {
|
|
return this.configMapConfig.maps.map(item => item.targetField)
|
|
}
|
|
},
|
|
mounted () { },
|
|
methods: {
|
|
/**
|
|
* @description: 关闭弹窗
|
|
*/
|
|
handleClose () {
|
|
this.$emit('update:settingVisible')
|
|
},
|
|
/**
|
|
* @description: 更新配置
|
|
*/
|
|
updateConfig () {
|
|
this.$emit('updateConfig', this.configMapConfig)
|
|
this.handleClose()
|
|
},
|
|
/**
|
|
* @description: 新增关联字段
|
|
*/
|
|
addRelatedField () {
|
|
this.configMapConfig.maps.push({
|
|
targetField: '',
|
|
sourceField: '',
|
|
queryRule: '='
|
|
})
|
|
},
|
|
handleDelete (index) {
|
|
this.configMapConfig.maps.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../assets/style/bsTheme.scss';
|
|
</style>
|