初始化
This commit is contained in:
砂糖
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="表达式"
|
||||
width="60%"
|
||||
:visible.sync="formVisible"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
>
|
||||
<div class="main-box">
|
||||
<div class="left-box">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:indent="0"
|
||||
:props="defaultProps"
|
||||
:default-expand-all="true"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
class="bs-el-tree tree-box"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<!-- Check if the node is a top-level node -->
|
||||
<span
|
||||
v-if="node.level === 1"
|
||||
:class="{ 'disabled': node.disabled}"
|
||||
>
|
||||
<i
|
||||
class="el-icon-folder"
|
||||
/>
|
||||
{{ data.label }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
:class="{ 'disabled': node.disabled}"
|
||||
style="padding-left: 20px"
|
||||
>
|
||||
{{ data.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</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
|
||||
}
|
||||
},
|
||||
defaultProps: { label: 'label', children: 'children' }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
dataset: state => state.bigScreen.dataset,
|
||||
computedDatas: state => state.bigScreen.computedDatas
|
||||
}),
|
||||
// 获取树节点数据
|
||||
treeData () {
|
||||
const list = []
|
||||
for (const item in this.dataset) {
|
||||
let children = []
|
||||
if (this.dataset[item][0]) {
|
||||
const fields = Object.keys(this.dataset[item][0])
|
||||
children = fields.map((field) => {
|
||||
return {
|
||||
label: field,
|
||||
code: item,
|
||||
value: `dataset['${item}'][0].${field}`,
|
||||
disabled: item.includes(this.config.code)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
list.push({
|
||||
label: item.split('_')[0],
|
||||
code: item,
|
||||
value: `dataset['${item}']`,
|
||||
disabled: item.includes(this.config.code),
|
||||
children
|
||||
})
|
||||
}
|
||||
for (const item in this.computedDatas) {
|
||||
list.push({
|
||||
label: item.split('_')[0],
|
||||
code: item,
|
||||
value: `computedDatas['${item}']`,
|
||||
disabled: item.includes(this.config.code)
|
||||
})
|
||||
}
|
||||
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) {
|
||||
const str = node.value
|
||||
const code = node.code
|
||||
if (node.disabled) return
|
||||
// 判断编辑器里面是return + 0或者多个空格 还是包含其他表达式，每次添加第一个表达式时不要加‘+’,防止计算错误
|
||||
const isInit = /^[\w\s]+$/.test(this.currentConfig.expression)
|
||||
const newStr = isInit ? this.currentConfig.expression + str : this.currentConfig.expression + ' + ' + str
|
||||
this.$refs.codemirrorRef.codemirror.setValue(newStr)
|
||||
// 同时将点击的数据存在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
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled{
|
||||
cursor: not-allowed;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user