dvcp_v2_webapp/packages/bigscreen/designer/components/datasourcePicker.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'">
      <table-editor label="设置数据" v-model="tableData" :configs.sync="colConfigs" @data="changeData"/>
    </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 TableEditor from "./tableEditor.vue";

export default {
  name: "datasourcePicker",
  components: {TableEditor, 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,
      tableData: [],
      colConfigs: []
    }
  },
  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
          })
    },
    initStaticDataProps() {
      const columnProp = "name"
      if (Array.isArray(this.options.staticData)) {
        const columns = []
        this.options.staticData.map((row, i) => {
          const prop = `c${i || ""}`
          this.colConfigs.push({label: row[columnProp], prop})
          Object.entries(row).map(([k, v]) => {
            if (/^v/.test(k)) {
              const item = this.tableData[k.substring(1) || 0] || {}
              item[prop] = v
              this.tableData[k.substring(1) || 0] = item
            } else if (k != columnProp) {
              const index = columns.findIndex(e => k == e)
              if (index > -1) {
                const item = this.tableData[index] || {}
                item[prop] = v
                this.tableData[index] = item
              } else {
                columns.push(k)
                const newIndex = columns.length - 1
                const item = this.tableData[newIndex] || {}
                item[prop] = v
                this.tableData[newIndex] = item
              }
            }
          })
        })
        this.tableData = this.tableData.map(e => ({...e, $cellEdit: false}))
      }
    }
  },
  created() {
    //新版静态数据
    this.initStaticDataProps()
  }
}
</script>
<style scoped lang="scss">
.datasourcePicker {
  .codeEditor {
    position: relative;
    padding-left: 10px;
  }
}
</style>