120 lines
4.1 KiB
Vue
120 lines
4.1 KiB
Vue
<template>
|
|
<section class="datasourcePicker">
|
|
<config-item label="数据类型">
|
|
<ai-select v-model="source.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
|
|
</config-item>
|
|
<div class="codeEditor" v-if="['htmlData'].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>
|
|
<template v-else-if="source.dataType === 'staticData'">
|
|
<config-item label="设置数据" topLabel>
|
|
<json-editor v-model="options.staticData" mainMenuBar/>
|
|
</config-item>
|
|
</template>
|
|
<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';
|
|
import JsonEditor from "./jsonEditor.vue";
|
|
|
|
export default {
|
|
name: "datasourcePicker",
|
|
components: {JsonEditor, 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
|
|
}
|
|
},
|
|
staticDataOps() {
|
|
const columnProp = "name", ops = {colConfigs: [], tableData: []}
|
|
if (Array.isArray(this.options.staticData)) {
|
|
const columns = []
|
|
ops.colConfigs = []
|
|
this.options.staticData.map((row, i) => {
|
|
const prop = `c${i || ""}`
|
|
ops.colConfigs.push({label: row[columnProp] || row.key, prop})
|
|
Object.entries(row).map(([k, v]) => {
|
|
if (/^v/.test(k) && k != "value") {
|
|
const item = ops.tableData[k.substring(1) || 0] || {}
|
|
item[prop] = v
|
|
ops.tableData[k.substring(1) || 0] = item
|
|
} else if (![columnProp, 'key'].includes(k)) {
|
|
const index = columns.findIndex(e => k == e)
|
|
if (index > -1) {
|
|
const item = ops.tableData[index] || {}
|
|
item[prop] = v
|
|
ops.tableData[index] = item
|
|
} else {
|
|
columns.push(k)
|
|
const newIndex = columns.length - 1
|
|
const item = ops.tableData[newIndex] || {}
|
|
item[prop] = v
|
|
ops.tableData[newIndex] = item
|
|
}
|
|
}
|
|
})
|
|
})
|
|
ops.tableData = ops.tableData.map(e => ({...e, $cellEdit: false}))
|
|
}
|
|
return ops
|
|
}
|
|
},
|
|
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>
|