fix:文本组件实现值可通过其他组件计算得来
liu.shiyi
1 year ago
parent
a6180a7434
commit
bb13f1bc94
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
title="表达式"
|
||||||
|
width="60%"
|
||||||
|
:visible.sync="formVisible"
|
||||||
|
:append-to-body="false"
|
||||||
|
class="bs-dialog-wrap bs-el-dialog"
|
||||||
|
>
|
||||||
|
<div class="main-box">
|
||||||
|
<div class="left-box">
|
||||||
|
<el-tree
|
||||||
|
ref="tree"
|
||||||
|
:data="treeData"
|
||||||
|
:indent="0"
|
||||||
|
:props="{ label: 'label', children: 'children' }"
|
||||||
|
:default-expand-all="true"
|
||||||
|
:highlight-current="true"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
class="bs-el-tree tree-box"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="right-box">
|
||||||
|
<div class="codemirror-wrap">
|
||||||
|
<codemirror
|
||||||
|
ref="codemirrorRef"
|
||||||
|
v-model="currentConfig.expression"
|
||||||
|
class="codemirror-box"
|
||||||
|
:options="codemirrorOption"
|
||||||
|
@dragover.prevent
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="btn-box"
|
||||||
|
type="primary"
|
||||||
|
@click="executeScript"
|
||||||
|
>
|
||||||
|
运行脚本
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="script-content-box">
|
||||||
|
{{ scriptContent }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
slot="footer"
|
||||||
|
class="dialog-footer"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
class="bs-el-button-default cancel"
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="sure"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { codemirror } from 'vue-codemirror'
|
||||||
|
import 'codemirror/mode/javascript/javascript'
|
||||||
|
import 'codemirror/lib/codemirror.css'
|
||||||
|
import 'codemirror/theme/nord.css'
|
||||||
|
import { mapMutations, mapState } from 'vuex'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
export default {
|
||||||
|
name: 'ExpressionDialog',
|
||||||
|
components: {
|
||||||
|
codemirror
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
scriptContent: '', // 脚本执行的内容
|
||||||
|
expression: '123',
|
||||||
|
formVisible: false,
|
||||||
|
codemirrorOption: {
|
||||||
|
mode: 'text/javascript',
|
||||||
|
lineNumbers: true,
|
||||||
|
lineWrapping: true,
|
||||||
|
theme: 'nord',
|
||||||
|
extraKey: { Ctrl: 'autocomplete' },
|
||||||
|
hintOptions: {
|
||||||
|
completeSingle: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
dataset: state => state.bigScreen.dataset,
|
||||||
|
computedDatas: state => state.bigScreen.computedDatas
|
||||||
|
}),
|
||||||
|
// 获取树节点数据
|
||||||
|
treeData () {
|
||||||
|
const list = []
|
||||||
|
for (const item in this.dataset) {
|
||||||
|
const fields = Object.keys(this.dataset[item][0])
|
||||||
|
const children = fields.map((field) => {
|
||||||
|
return {
|
||||||
|
label: field,
|
||||||
|
code: item,
|
||||||
|
value: `dataset.${item}[0].${field}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.push({
|
||||||
|
label: item,
|
||||||
|
code: item,
|
||||||
|
value: `dataset.${item}`,
|
||||||
|
children
|
||||||
|
})
|
||||||
|
}
|
||||||
|
for (const item in this.computedDatas) {
|
||||||
|
list.push({
|
||||||
|
label: item,
|
||||||
|
code: item,
|
||||||
|
value: `computedDatas.${item}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
},
|
||||||
|
currentConfig () {
|
||||||
|
return cloneDeep(this.config)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
created () {},
|
||||||
|
mounted () {},
|
||||||
|
methods: {
|
||||||
|
...mapMutations({
|
||||||
|
changeChartConfig: 'bigScreen/changeChartConfig'
|
||||||
|
}),
|
||||||
|
init () {
|
||||||
|
this.formVisible = true
|
||||||
|
},
|
||||||
|
// 运行脚本
|
||||||
|
executeScript () {
|
||||||
|
// eslint-disable-next-line no-new-func
|
||||||
|
const result = new Function('dataset', 'computedDatas', this.currentConfig.expression)
|
||||||
|
this.scriptContent = result(this.dataset, this.computedDatas)
|
||||||
|
},
|
||||||
|
// 点击树节点将数据添加到脚本编辑器中
|
||||||
|
handleNodeClick (node, data, nodeObj) {
|
||||||
|
console.log(node, data, nodeObj)
|
||||||
|
const str = node.value
|
||||||
|
const code = node.code
|
||||||
|
this.$refs.codemirrorRef.codemirror.setValue(this.currentConfig.expression + ' + ' + str)
|
||||||
|
// 同时将点击的数据存在expressionCodes中
|
||||||
|
if (this.currentConfig.expressionCodes && Array.isArray(this.currentConfig.expressionCodes)) {
|
||||||
|
this.currentConfig.expressionCodes.push(code)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancel () {
|
||||||
|
this.formVisible = false
|
||||||
|
},
|
||||||
|
sure () {
|
||||||
|
this.formVisible = false
|
||||||
|
this.changeChartConfig(this.currentConfig)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import '../../assets/style/bsTheme.scss';
|
||||||
|
.bs-dialog-wrap{
|
||||||
|
::v-deep.el-dialog__body{
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
display: flex;
|
||||||
|
.left-box{
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
.tree-box{
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-box{;
|
||||||
|
flex: 3 ;
|
||||||
|
height: 100%;
|
||||||
|
.codemirror-wrap{
|
||||||
|
height: 50%;
|
||||||
|
position: relative;
|
||||||
|
.btn-box{
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.codemirror-box {
|
||||||
|
height: 100% !important;
|
||||||
|
::v-deep .CodeMirror {
|
||||||
|
height: 100% !important;
|
||||||
|
font-family: Helvetica, Tahoma;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.script-content-box{
|
||||||
|
padding:10px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue