index.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <div class="bs-theme-wrap">
  3. <el-input
  4. v-model="datasetNameStr"
  5. placeholder="请选择数据集"
  6. readonly
  7. @focus="openDataSetDialog"
  8. >
  9. <el-button
  10. slot="append"
  11. icon="el-icon-search"
  12. @click="openDataSetDialog"
  13. />
  14. </el-input>
  15. <DataSetDialog
  16. ref="dataSetDialog"
  17. v-bind="$attrs"
  18. :multiple="multiple"
  19. :ds-value="dsValue"
  20. @getDsId="getDsId"
  21. @getSelectDs="getSelectDs"
  22. >
  23. <template #dataSetSelect="{value}">
  24. <slot
  25. name="dataSetSelect"
  26. :value="value"
  27. />
  28. </template>
  29. </DataSetDialog>
  30. </div>
  31. </template>
  32. <script>
  33. import DataSetDialog from './dataSetSetting.vue'
  34. export default {
  35. name: 'Index',
  36. components: { DataSetDialog },
  37. props: {
  38. config: {
  39. type: Object,
  40. default: () => {
  41. }
  42. },
  43. datasetName: {
  44. type: String,
  45. default: ''
  46. },
  47. multiple: {
  48. type: Boolean,
  49. default: false
  50. },
  51. dsValue: {
  52. type: [Array, Object],
  53. default: () => ([])
  54. }
  55. },
  56. data () {
  57. return {
  58. }
  59. },
  60. computed: {
  61. datasetNameStr () {
  62. return this.datasetName || this.dsValue?.map(ds => ds.name).join(',')
  63. }
  64. },
  65. methods: {
  66. openDataSetDialog () {
  67. this.$refs.dataSetDialog.dataSetVisible = true
  68. },
  69. getDsId (dsId) {
  70. this.$emit('getDsId', dsId)
  71. },
  72. getSelectDs (selectDs) {
  73. this.$emit('getSelectDs', selectDs)
  74. if (selectDs.datasetType === 'metrics') {
  75. this.$emit('getMetricsList', JSON.parse(selectDs.data))
  76. // 选择数据集时修改当前数据集的状态(指标域或者其他数据集)
  77. this.$emit('changeIsMetrics', true, selectDs.datasetType)
  78. } else {
  79. this.$emit('changeIsMetrics', false, selectDs.datasetType)
  80. }
  81. }
  82. }
  83. }
  84. </script>
  85. <style scoped>
  86. </style>