feat: 大屏设计器数据集选择添加插槽，供开发人员添加自定义数据集

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -29,7 +29,11 @@
                 :dataset-name="datasetName"
                 :ds-id="config.dataSource.businessKey"
                 @getDsId="dsId => { getDataSetDetailsById(dsId, 'treeTable');}"
-              />
+              >
+                <template #dataSetSelect>
+                  <slot name="dataSetSelect" />
+                </template>
+              </data-set-select>
             </el-form-item>
           </div>
         </div>

data-room-ui/packages/BigScreenDesign/RightSetting/index.vue

@@ -15,7 +15,11 @@
         <DataSetting
           ref="dataSetting"
           :key="config.code"
-        />
+        >
+          <template #dataSetSelect>
+            <slot name="dataSetSelect" />
+          </template>
+        </DataSetting>
       </el-tab-pane>
       <el-tab-pane
         label="样式"
@@ -131,7 +135,7 @@ export default {
     ...mapMutations('bigScreen', [
       'saveTimeLine'
     ]),
-    debounce (delay,obj) {
+    debounce (delay, obj) {
       if (this.timeout) {
         clearTimeout(this.timeout)
       }
@@ -142,9 +146,9 @@ export default {
     handleConfigChange (val, oldValue, type) {
       if (!_.isEqual(val, oldValue)) {
         if (type === 'configStyle') {
-          if(this.config.type==='iframeChart'){
-            this.debounce(500,{ ...val, type: this.config.type, code: this.config.code })
-          }else{
+          if (this.config.type === 'iframeChart') {
+            this.debounce(500, { ...val, type: this.config.type, code: this.config.code })
+          } else {
             this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code })
           }
         } else {

data-room-ui/packages/BigScreenDesign/SettingPanel.vue

@@ -13,7 +13,11 @@
         @closeRightPanel="close"
         @updateSetting="updateSetting"
         @updateDataSetting="updateDataSetting"
-      />
+      >
+        <template #dataSetSelect>
+          <slot name="dataSetSelect" />
+        </template>
+      </RightSetting>
       <OverallSetting
         v-if="!chartSettingShow"
         ref="OverallSetting"

data-room-ui/packages/BigScreenDesign/index.vue

@@ -86,7 +86,11 @@
         @updateSetting="updateSetting"
         @updateDataSetting="updateDataSetting"
         @updatePage="updatePage"
-      />
+      >
+        <template #dataSetSelect>
+          <slot name="dataSetSelect" />
+        </template>
+      </SettingPanel>
       <!-- 添加资源面板 -->
       <SourceDialog
         ref="SourceDialog"
@@ -124,7 +128,6 @@ import multipleSelectMixin from 'data-room-ui/js/mixins/multipleSelectMixin'
 import { getThemeConfig, getScreenInfo } from 'data-room-ui/js/api/bigScreenApi'
 import MouseSelect from './MouseSelect/index.vue'
 import _ from 'lodash'
-import { get } from 'data-room-ui/js/utils/http'
 import { randomString } from '../js/utils'
 import { isFirefox } from 'data-room-ui/js/utils/userAgent'
 import { handleResData } from 'data-room-ui/js/store/actions.js'

data-room-ui/packages/DataSetSetting/dataSetSetting.vue

@@ -7,10 +7,32 @@
     width="80%"
     class="bs-dialog-wrap data-set-wrap bs-el-dialog"
   >
+    <el-tabs
+      v-if="isUseSlot"
+      v-model="tabsActiveName"
+      class="bs-el-tabs"
+      @tab-click="handleClickTabs"
+    >
+      <el-tab-pane
+        label="数据集"
+        name="dataSet"
+      >
+        <DataSetManagement
+          ref="dataSetSetting"
+          class="bs-data-set-management"
+          :is-border="true"
+          :is-dialog="true"
+          :ds-id="dataSetId"
+          :multiple="multiple"
+          :ds-value="DataDsValue"
+        />
+      </el-tab-pane>
+      <slot name="dataSetSelect" />
+    </el-tabs>
     <DataSetManagement
+      v-else
       ref="dataSetSetting"
       class="bs-data-set-management"
-      theme-class="bs-"
       :is-border="true"
       :is-dialog="true"
       :ds-id="dataSetId"
@@ -30,7 +52,9 @@
       <el-button
         type="primary"
         @click="sure"
-      >确定</el-button>
+      >
+        确定
+      </el-button>
     </span>
   </el-dialog>
 </template>
@@ -61,7 +85,12 @@ export default {
   data () {
     return {
       dataSetVisible: false,
-      dataSetId: null
+      dataSetId: null,
+      tabsActiveName: 'dataSet',
+      // 组件实例
+      componentInstance: null,
+      // 是否使用了插槽
+      isUseSlot: false
     }
   },
   computed: {
@@ -77,11 +106,23 @@ export default {
   },
   mounted () {
     this.dataSetId = this.dsId
+    // 将内置的组件实例赋值给componentInstance
+    this.componentInstance = this.$refs.dataSetSetting
+    // 判断是否使用了插槽
+    if (this.$scopedSlots && this.$scopedSlots.dataSetSelect && this.$scopedSlots.dataSetSelect()) {
+      this.isUseSlot = true
+    } else {
+      this.isUseSlot = false
+    }
   },
   methods: {
+    handleClickTabs (vueComponent, event) {
+      this.componentInstance = vueComponent.$children[0]
+    },
     sure () {
       this.dataSetVisible = false
-      const getSelectDs = this.$refs.dataSetSetting.getSelectDs()
+      const getSelectDs = this.componentInstance.getSelectDs()
+      console.log('getSelectDs', getSelectDs)
       if (Object.prototype.hasOwnProperty.call(getSelectDs, 'id')) {
         this.dataSetId = getSelectDs.id
       }
@@ -96,9 +137,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/style/bsTheme.scss';
-::v-deep .big-screen-router-view-wrap{
+
+::v-deep .big-screen-router-view-wrap {
   padding-left: 16px !important;
 }
+::v-deep .el-tabs__header{
+  margin-bottom: 0;
+}
+
 .data-set-wrap {
   ::v-deep .el-dialog__body {
     position: relative;
@@ -125,12 +171,14 @@ export default {
   }
 
   .bs-data-set-management {
-    ::v-deep .bs-container{
+    ::v-deep .bs-container {
       margin-left: 0 !important;
     }
-    ::v-deep  .layout {
-        position: absolute !important;
-      }
+
+    ::v-deep .layout {
+      position: absolute !important;
+    }
+
     ::v-deep .ztree {
       height: auto !important;
     }
@@ -144,7 +192,7 @@ export default {
     }
 
     ::v-deep .data-set-scrollbar {
-        height: 515px !important;
+      height: 515px !important;
     }
   }
 }

data-room-ui/packages/DataSetSetting/index.vue

@@ -12,22 +12,26 @@
         @click="openDataSetDialog"
       />
     </el-input>
-    <data-set-dialog
+    <DataSetDialog
       ref="dataSetDialog"
       v-bind="$attrs"
       :multiple="multiple"
       :ds-value="dsValue"
       @getDsId="getDsId"
       @getSelectDs="getSelectDs"
-    />
+    >
+      <template #dataSetSelect>
+        <slot name="dataSetSelect" />
+      </template>
+    </DataSetDialog>
   </div>
 </template>
 
 <script>
-import dataSetDialog from './dataSetSetting.vue'
+import DataSetDialog from './DataSetSetting.vue'
 export default {
   name: 'Index',
-  components: { dataSetDialog },
+  components: { DataSetDialog },
   props: {
     config: {
       type: Object,

data-room-ui/packages/assets/style/bsTheme.scss

@@ -639,3 +639,17 @@
     }
   }
 }
+
+.bs-el-tabs{
+  .el-tabs__item{
+    color: var(--bs-el-text) !important;
+  }
+  .is-active{
+    color: var(--bs-el-color-primary) !important;
+  }
+  .el-tabs__nav-wrap{
+    &:after{
+      background-color: var(--bs-background-1) !important;
+    }
+  }
+}

data-room-ui/packages/assets/style/common/index.scss

@@ -271,6 +271,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       }
       .el-dialog{
         margin-top: 13vh !important;
+        margin-bottom: 0 !important;
       }
       .el-dialog__wrapper {
         overflow: hidden !important;
@@ -278,7 +279,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
       .el-dialog__body {
         padding: 18px 24px !important;
-        max-height: calc(90vh - 250px) !important;
+        max-height: calc(90vh - 170px) !important;
         min-height: 200px;
         overflow-y: auto;
       }