83 lines
2.7 KiB
Vue
83 lines
2.7 KiB
Vue
<template>
|
|
<section class="datasourcePicker">
|
|
<config-item label="数据类型">
|
|
<ai-select v-model="source.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
|
|
</config-item>
|
|
<config-item label="静态数据" v-if="source.dataType === 'staticData'">
|
|
</config-item>
|
|
<div class="codeEditor" v-if="['htmlData','staticData'].includes(source.dataType)">
|
|
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
|
|
@confirm="changeData(JSON.parse(content))" @open="content=contentstr">
|
|
<code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
|
|
<code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
|
|
</ai-dialog-btn>
|
|
</div>
|
|
<config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
|
|
<ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
|
|
:prop="{label:'description'}" @change="changeData"
|
|
action="/app/appdiylargescreen/allDatasourceByPage"/>
|
|
</config-item>
|
|
<config-item label="接口地址" v-else-if="source.dataType === 'apiData'">
|
|
<el-input size="small" v-model="source.api" @change="changeData" placeholder="请输入数据接口URL"/>
|
|
</config-item>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
|
|
import ConfigItem from "./configItem.vue";
|
|
import {DvCompData} from "../config";
|
|
import CodeEditor from 'bin-ace-editor'
|
|
import 'brace/mode/json'
|
|
import 'brace/snippets/json';
|
|
import 'brace/theme/github';
|
|
import 'brace/theme/monokai';
|
|
|
|
export default {
|
|
name: "datasourcePicker",
|
|
components: {ConfigItem, AiDialogBtn, CodeEditor},
|
|
model: {
|
|
event: "input",
|
|
prop: "options"
|
|
},
|
|
props: {
|
|
options: Object,
|
|
instance: Function
|
|
},
|
|
data() {
|
|
return {
|
|
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
|
|
content: "",
|
|
loading: false
|
|
}
|
|
},
|
|
computed: {
|
|
contentstr: v => JSON.stringify(v.options.staticData),
|
|
dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json',
|
|
source: {
|
|
set(v) {
|
|
this.$emit("input", v)
|
|
},
|
|
get() {
|
|
return this.options
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
changeData(sdata) {
|
|
this.source.dataType == 'staticData' ? this.source.staticData = sdata :
|
|
new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
|
|
this.source[this.source.dataType] = data
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.datasourcePicker {
|
|
.codeEditor {
|
|
position: relative;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
</style>
|