Merge branch 'main' of github.com:dataease/dataease into main

backend/src/main/java/io/dataease/controller/chart/ChartViewController.java

@@ -44,4 +44,9 @@ public class ChartViewController {
     public ChartViewDTO getData(@PathVariable String id) throws Exception {
         return chartViewService.getData(id);
     }
+
+    @PostMapping("chartDetail/{id}")
+    public Map<String, Object> chartDetail(@PathVariable String id) {
+        return chartViewService.getChartDetail(id);
+    }
 }

backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java

@@ -82,4 +82,8 @@ public class DataSetTableController {
         dataSetTableService.saveIncrementalConfig(datasetTableIncrementalConfig);
     }
 
+    @PostMapping("datasetDetail/{id}")
+    public Map<String, Object> datasetDetail(@PathVariable String id) {
+        return dataSetTableService.getDatasetDetail(id);
+    }
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -20,6 +20,7 @@ import io.dataease.service.dataset.DataSetTableFieldsService;
 import io.dataease.service.dataset.DataSetTableService;
 import io.dataease.service.spark.SparkCalc;
 import org.apache.commons.collections4.CollectionUtils;
+import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 
@@ -249,4 +250,15 @@ public class ChartViewService {
             throw new RuntimeException("Name can't repeat in same group.");
         }
     }
+
+    public Map<String, Object> getChartDetail(String id) {
+        Map<String, Object> map = new HashMap<>();
+        ChartViewWithBLOBs chartViewWithBLOBs = chartViewMapper.selectByPrimaryKey(id);
+        map.put("chart", chartViewWithBLOBs);
+        if (ObjectUtils.isNotEmpty(chartViewWithBLOBs)) {
+            Map<String, Object> datasetDetail = dataSetTableService.getDatasetDetail(chartViewWithBLOBs.getTableId());
+            map.putAll(datasetDetail);
+        }
+        return map;
+    }
 }

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -16,6 +16,7 @@ import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import org.apache.commons.collections4.CollectionUtils;
+import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 
@@ -422,4 +423,15 @@ public class DataSetTableService {
             throw new RuntimeException("Name can't repeat in same group.");
         }
     }
+
+    public Map<String, Object> getDatasetDetail(String id) {
+        Map<String, Object> map = new HashMap<>();
+        DatasetTable table = datasetTableMapper.selectByPrimaryKey(id);
+        map.put("table", table);
+        if (ObjectUtils.isNotEmpty(table)) {
+            Datasource datasource = datasourceMapper.selectByPrimaryKey(table.getDataSourceId());
+            map.put("datasource", datasource);
+        }
+        return map;
+    }
 }

frontend/src/components/canvas/components/Editor/Shape.vue

@@ -3,13 +3,13 @@
     <span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
     <span v-show="element.isLock" class="iconfont icon-suo" />
 
-<!--    <span v-show="isActive()" class="iconfont icon-more">-->
-<!--      <el-button-->
-<!--        icon="el-icon-more"-->
-<!--        type="text"-->
-<!--        size="small"-->
-<!--      />-->
-<!--    </span>-->
+    <!--    <span v-show="isActive()" class="iconfont icon-more">-->
+    <!--      <el-button-->
+    <!--        icon="el-icon-more"-->
+    <!--        type="text"-->
+    <!--        size="small"-->
+    <!--      />-->
+    <!--    </span>-->
     <div
       v-for="item in (isActive()? pointList : [])"
       :key="item"
@@ -335,9 +335,9 @@ export default {
           symmetricPoint
         })
 
-        console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
+        // console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
         this.$store.commit('setShapeStyle', style)
-        eventBus.$emit('resizing', this.element.propValue.viewId)
+        this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId)
       }
 
       const up = () => {

frontend/src/components/canvas/components/Editor/index.vue

@@ -30,8 +30,8 @@
         :id="'component' + item.id"
         class="component"
         :style="getComponentStyle(item.style)"
-        :element="item"
-        :item="item"
+        :service-name="item.widgetService.name"
+        :panel-id="panelInfo.id"
         @filter-value-change="filterValueChange"
       />
 
@@ -97,12 +97,18 @@ export default {
       isShowArea: false
     }
   },
-  computed: mapState([
-    'componentData',
-    'curComponent',
-    'canvasStyleData',
-    'editor'
-  ]),
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'canvasStyleData',
+      'editor'
+    ])
+  },
+
   mounted() {
     // 获取编辑器元素
     this.$store.commit('getEditor')

frontend/src/components/widget/DeWidget/DeDrawingWidget.vue

 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 export default {
   name: 'DeDrawingWidget',
   functional: true,
   props: {
-    item: {
-      type: Object,
+    serviceName: {
+      type: String,
+      default: null
+    },
+    panelId: {
+      type: String,
       default: null
     }
   },
 
   render(createElement, context) {
-    const item = context.props.item
-    return createElement(item.component, {
+    const widgetInfo = ApplicationContext.getService(context.props.serviceName)
+    // const widgetInfo = context.props.widgetInfo
+    const panelId = context.props.panelId
+    const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel(panelId) || null
+    if (!dialogInfo) {
+      throw new Error('系统错误')
+    }
+    return createElement(dialogInfo.component, {
       props: {
-        element: item
+        element: dialogInfo
       },
       on: {
         'value-change': value => {

frontend/src/components/widget/drawServiceImpl/MySelectImpl.js

+import { DrawWidgetService } from '../service/DrawWidgetService'
+
+const leftPanel = {
+//   name: 'text-select',
+  icon: 'iconfont icon-xialakuang',
+  label: '文本下拉',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    refId: '1234567890',
+    attrs: {
+      multiple: false,
+      placeholder: '请选择',
+      datas: [],
+      key: 'id',
+      label: 'text',
+      value: 'id'
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-select'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 200,
+    height: 22,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-select'
+}
+
+class MySelectImpl extends DrawWidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'mySelectWidget' })
+    super(options)
+  }
+
+  initLeftPanel(uuid) {
+    uuid = uuid || this.uuid()
+    this.setLeftPanel(uuid, leftPanel)
+    return uuid
+    // console.log('this is first initWidget')
+  }
+
+  initFilterDialog(uuid) {
+    uuid = uuid || this.uuid()
+    this.setDialogPanel(uuid, dialogPanel)
+    return uuid
+  }
+
+  initDrawPanel(uuid) {
+    uuid = uuid || this.uuid()
+    this.setDrawPanel(uuid, drawPanel)
+    return uuid
+  }
+
+  toDrawWidget() {
+    // console.log('this is first toDrawWidget')
+  }
+  // 移动到画布之前回掉
+  beforeToDraw() {
+
+  }
+
+  setOptionDatas(uuid, data) {
+    const dialogPanel = this.getDialogPanel(uuid)
+    dialogPanel.options.attrs.datas = data
+    this.setDialogPanel(uuid, dialogPanel)
+  }
+
+  filterFieldMethod(fields) {
+    return fields.filter(field => {
+      return field['deType'] === 0
+    })
+  }
+}
+const mySelectImpl = new MySelectImpl()
+export default mySelectImpl

frontend/src/components/widget/index.js

@@ -31,7 +31,8 @@ requireComponent.keys().forEach(fileName => {
   )
 })
 
-const req = require.context('./serviceImpl', false, /\.js$/)
+// const req = require.context('./serviceImpl', false, /\.js$/)
+const req = require.context('./drawServiceImpl', false, /\.js$/)
 const requireAll = requireContext => requireContext.keys()
 
 const widgets = {}

frontend/src/components/widget/service/DrawWidgetService.js

+import store from '@/store'
+import { uuid } from 'vue-uuid'
+export const commonStyle = {
+  rotate: 0,
+  opacity: 1
+}
+
+export const commonAttr = {
+  animations: [],
+  events: {},
+  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
+  isLock: false // 是否锁定组件
+}
+export class DrawWidgetService {
+  constructor(options) {
+    this.options = options
+    this.name = options.name
+    this.leftPanelPath = 'application/addLeftWidget'
+    this.dialogPanelPath = 'application/addDialogWidget'
+    this.drawPanelPath = 'application/addDrawWidget'
+    this.storeWidget()
+  }
+  /**
+   * 存储数据到本地
+   * @param {本地存储路径} path
+   * @param {要存储的数据} data
+   */
+  store(path, data) {
+    store.dispatch(path, data)
+  }
+  uuid() {
+    return uuid.v1()
+  }
+  setLeftPanel(uuid, leftPanel) {
+    this.store(this.leftPanelPath, { uuid: uuid, leftPanel: leftPanel })
+  }
+  getLeftPanel(uuid) {
+    if (!store.getters.leftWidgetMap[uuid]) {
+      this.initLeftPanel && this.initLeftPanel(uuid)
+    }
+    return store.getters.leftWidgetMap[uuid]
+  }
+
+  setDialogPanel(uuid, dialogPanel) {
+    this.store(this.dialogPanelPath, { uuid: uuid, dialogPanel: dialogPanel })
+  }
+  getDialogPanel(uuid) {
+    if (!store.getters.dialogWidgetMap[uuid]) {
+      this.initFilterDialog && this.initFilterDialog(uuid)
+    }
+    return store.getters.dialogWidgetMap[uuid]
+  }
+
+  setDrawPanel(uuid, drawPanel) {
+    if (!store.getters.drawWidgetMap[uuid]) { // 第一次
+      drawPanel.style = Object.assign(drawPanel.style, commonStyle)
+      drawPanel = Object.assign(drawPanel, commonAttr)
+      if (this.initFilterDialog) { // 需要弹窗
+        const dialogOptions = this.getDialogPanel(uuid)
+        drawPanel = Object.assign(drawPanel, dialogOptions)
+      }
+    }
+    this.store(this.drawPanelPath, { uuid: uuid, drawPanel: drawPanel })
+  }
+
+  getDrawPanel(uuid) {
+    if (!store.getters.drawWidgetMap[uuid]) {
+      this.initDrawPanel && this.initDrawPanel(uuid)
+    }
+    return store.getters.drawWidgetMap[uuid]
+  }
+
+  storeWidget() {
+    // store.dispatch('application/loadBean', { key: this.name, value: this })
+    this.store('application/loadBean', { key: this.name, value: this })
+  }
+  initWidget() {
+    console.log('this is initWidget')
+  }
+  toDrawWidget() {
+    console.log('this is toDrawWidget')
+  }
+}

frontend/src/lang/zh.js

@@ -779,9 +779,14 @@ export default {
     showRow: '显示行',
     add_excel_table: '添加Excel数据集',
     add_custom_table: '添加自助数据集',
-    upload_file: '上传文件'
+    upload_file: '上传文件',
+    detail: '详情',
+    type: '类型',
+    create_by: '创建者',
+    create_time: '创建时间'
   },
   datasource: {
+    datasource: '数据源',
     create: '新建数据连接',
     type: '类型',
     please_choose_type: '请选择数据源类型',

frontend/src/store/getters.js

@@ -18,6 +18,9 @@ const getters = {
   loadingMap: state => state.request.loadingMap,
   currentPath: state => state.permission.currentPath,
   permissions: state => state.user.permissions,
-  beanMap: state => state.application.beanMap
+  beanMap: state => state.application.beanMap,
+  leftWidgetMap: state => state.application.leftWidgetMap,
+  dialogWidgetMap: state => state.application.dialogWidgetMap,
+  drawWidgetMap: state => state.application.drawWidgetMap
 }
 export default getters

frontend/src/store/modules/application.js

 const state = {
-  beanMap: {}
+  beanMap: {},
+  leftWidgetMap: {},
+  dialogWidgetMap: {},
+  drawWidgetMap: {}
 }
 
 const mutations = {
 
   ADD_BEAN: (state, { key, value }) => {
     state.beanMap[key] = value
+  },
+
+  ADD_LEFT_WIDGET: (state, { uuid, leftPanel }) => {
+    state.leftWidgetMap[uuid] = leftPanel
+  },
+
+  ADD_DIALOG_WIDGET: (state, { uuid, dialogPanel }) => {
+    state.dialogWidgetMap[uuid] = dialogPanel
+  },
+
+  ADD_DRAW_WIDGET: (state, { uuid, drawPanel }) => {
+    state.drawWidgetMap[uuid] = drawPanel
   }
 
 }
@@ -13,7 +28,20 @@ const mutations = {
 const actions = {
   loadBean({ commit }, data) {
     commit('ADD_BEAN', data)
+  },
+
+  addLeftWidget({ commit }, data) {
+    commit('ADD_LEFT_WIDGET', data)
+  },
+
+  addDialogWidget({ commit }, data) {
+    commit('ADD_DIALOG_WIDGET', data)
+  },
+
+  addDrawWidget({ commit }, data) {
+    commit('ADD_DRAW_WIDGET', data)
   }
+
 }
 
 export default {

frontend/src/views/chart/view/ChartEdit.vue

@@ -2,7 +2,16 @@
   <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <span v-show="false">{{ vId }}</span>
     <el-row style="height: 40px;background-color: white" class="padding-lr">
-      <span style="line-height: 40px;">{{ view.name }}</span>
+      <el-popover
+        placement="right-start"
+        width="400"
+        trigger="click"
+        @show="showTab"
+        @hide="hideTab"
+      >
+        <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
+        <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
+      </el-popover>
       <span style="float: right;line-height: 40px;">
         <el-button size="mini" @click="closeEdit">
           {{ $t('chart.close') }}
@@ -229,6 +238,7 @@ import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
+import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
 
 // shape attr,component style
 import {
@@ -255,7 +265,7 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 
 export default {
   name: 'ChartEdit',
-  components: { QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -296,7 +306,8 @@ export default {
         name: [
           { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
         ]
-      }
+      },
+      tabStatus: false
     }
   },
   computed: {
@@ -577,6 +588,13 @@ export default {
     },
     resetRename() {
       // this.itemForm = {}
+    },
+
+    showTab() {
+      this.tabStatus = true
+    },
+    hideTab() {
+      this.tabStatus = false
     }
   }
 }

frontend/src/views/dataset/common/DatasetChartDetail.vue

+<template>
+  <el-col>
+    <el-row>
+      <span style="font-weight: 500;">{{ $t('dataset.detail') }}</span>
+    </el-row>
+    <el-col>
+      <el-tabs v-if="tabStatus" v-model="tabActive" class="info-tab">
+        <el-tab-pane v-if="type === 'chart'" :label="$t('chart.datalist')" name="chart">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.chart.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('chart.chart_type') }}</p>
+            <svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('chart.title') }}</p>
+            <p class="info-content">{{ detail.chart.title || 'N/A' }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_by') }}</p>
+            <p class="info-content">{{ detail.chart.createBy }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.chart.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+
+        <el-tab-pane :label="$t('dataset.datalist')" name="table">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.table.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.type') }}</p>
+            <p v-if="detail.table.type === 'db'" class="info-content">{{ $t('dataset.db_data') }}</p>
+            <p v-if="detail.table.type === 'sql'" class="info-content">{{ $t('dataset.sql_data') }}</p>
+            <p v-if="detail.table.type === 'excel'" class="info-content">{{ $t('dataset.excel_data') }}</p>
+            <p v-if="detail.table.type === 'custom'" class="info-content">{{ $t('dataset.custom_data') }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.mode') }}</p>
+            <p v-if="detail.table.mode === 0" class="info-content">{{ $t('dataset.direct_connect') }}</p>
+            <p v-if="detail.table.mode === 1" class="info-content">{{ $t('dataset.sync_data') }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_by') }}</p>
+            <p class="info-content">{{ detail.table.createBy }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.table.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+
+        <el-tab-pane :label="$t('datasource.datasource')" name="datasource">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.datasource.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.description') }}</p>
+            <p class="info-content">{{ detail.datasource.desc || 'N/A' }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('datasource.type') }}</p>
+            <p class="info-content">{{ detail.datasource.type }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.datasource.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+export default {
+  name: 'DatasetChartDetail',
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    tabStatus: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tabActive: 'chart',
+      detail: {
+        chart: {},
+        table: {},
+        datasource: {}
+      }
+    }
+  },
+  watch: {
+    'data': function() {
+      this.init()
+    },
+    'type': function() {
+      this.typeChange()
+    },
+    'tabStatus': function() {
+      this.typeChange()
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (this.data.id) {
+        if (this.type === 'dataset') {
+          post('/dataset/table/datasetDetail/' + this.data.id, null).then(res => {
+            this.detail = res.data
+          })
+        } else if (this.type === 'chart') {
+          post('/chart/view/chartDetail/' + this.data.id, null).then(res => {
+            this.detail = res.data
+          })
+        }
+      }
+    },
+    typeChange() {
+      if (this.type === 'dataset') {
+        this.tabActive = 'table'
+      } else if (this.type === 'chart') {
+        this.tabActive = 'chart'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .info-tab>>>.el-tabs__item{
+    font-weight: 400;
+    font-size: 12px;
+  }
+  .info-item{
+     margin: 6px 0;
+   }
+  .info-title{
+    margin: 0!important;
+    font-weight: 600;
+    font-size: 12px;
+  }
+  .info-content{
+    margin: 0!important;
+    font-size: 12px;
+  }
+</style>

frontend/src/views/dataset/data/ViewTable.vue

@@ -3,9 +3,18 @@
     <el-row>
       <el-row style="height: 26px;">
         <span v-show="false">{{ tableId }}</span>
-        <span style="line-height: 26px;">
-          {{ table.name }}
-        </span>
+        <el-popover
+          placement="right-start"
+          width="400"
+          trigger="click"
+          @show="showTab"
+          @hide="hideTab"
+        >
+          <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
+          <span slot="reference" style="line-height: 26px;cursor: pointer;">
+            {{ table.name }}
+          </span>
+        </el-popover>
         <el-row style="float: right">
           <el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
             {{ $t('dataset.edit_sql') }}
@@ -81,10 +90,11 @@
 import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
+import DatasetChartDetail from '../common/DatasetChartDetail'
 
 export default {
   name: 'ViewTable',
-  components: { UpdateInfo, TabDataPreview },
+  components: { DatasetChartDetail, UpdateInfo, TabDataPreview },
   data() {
     return {
       createViewDialog: false,
@@ -98,7 +108,8 @@ export default {
       tableFields: [],
       tableViewRowForm: {
         row: 1000
-      }
+      },
+      tabStatus: false
     }
   },
   computed: {
@@ -173,6 +184,13 @@ export default {
     reSearch(val) {
       this.tableViewRowForm = val
       this.initPreviewData()
+    },
+
+    showTab() {
+      this.tabStatus = true
+    },
+    hideTab() {
+      this.tabStatus = false
     }
   }
 }

frontend/src/views/panel/edit/index.vue

@@ -69,19 +69,18 @@
     </de-container>
 
     <el-dialog
-      v-if="filterVisible"
+      v-if="filterVisible && panelInfo.id"
       title="过滤组件"
       :visible.sync="filterVisible"
       custom-class="de-filter-dialog"
     >
-      <filter-dialog v-if="filterVisible" :component-info="currentComponent" :widget-id="currentWidgetId" @re-fresh-component="reFreshComponent">
+      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" @re-fresh-component="reFreshComponent">
         <de-drawing-widget
-          v-if="filterVisible && currentComponent"
-          :id="'component' + currentComponent.id"
+          v-if="filterVisible"
           style="width: 100% !important;"
           class="component"
-          :element="currentComponent"
-          :item="currentComponent"
+          :service-name="currentWidget.name"
+          :panel-id="panelInfo.id"
         />
       </filter-dialog>
       <!-- <div slot="footer" class="dialog-footer">
@@ -144,9 +143,7 @@ export default {
       activeName: 'attr',
       reSelectAnimateIndex: undefined,
       filterVisible: false,
-      currentWidgetId: null,
-      currentWidget: null,
-      currentComponent: null
+      currentWidget: null
     }
   },
 
@@ -252,6 +249,7 @@ export default {
       e.stopPropagation()
       let component
       const newComponentId = uuid.v1()
+
       const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
 
       // 用户视图设置 复制一个模板
@@ -268,16 +266,18 @@ export default {
         })
       } else {
         this.currentWidget = ApplicationContext.getService(componentInfo.id)
-        if (this.currentWidget.filterDialog) {
+
+        const drawPanel = this.currentWidget.getDrawPanel(this.panelInfo.id)
+        drawPanel.style.top = e.offsetY
+        drawPanel.style.left = e.offsetX
+        drawPanel.id = newComponentId
+        this.currentWidget.setDrawPanel(this.panelInfo.id, drawPanel)
+        if (this.currentWidget.initFilterDialog) {
           this.show = false
-          this.currentComponent = deepCopy(this.currentWidget)
-          this.currentComponent.style.top = e.offsetY
-          this.currentComponent.style.left = e.offsetX
-          this.currentComponent.id = newComponentId
           this.openFilterDiolog()
           return
         }
-        component = deepCopy(this.currentWidget)
+        component = deepCopy(drawPanel)
       }
 
       component.style.top = e.offsetY
@@ -311,17 +311,16 @@ export default {
       }
     },
     openFilterDiolog() {
-      this.currentWidgetId = this.currentComponent.name
       this.filterVisible = true
     },
     cancelFilter() {
       this.filterVisible = false
-      this.currentWidgetId = null
       this.currentWidget = null
-      this.currentComponent = null
     },
     sureFilter() {
-      const component = deepCopy(this.currentComponent)
+      const currentComponent = this.currentWidget.getDrawPanel(this.panelInfo.id)
+      currentComponent.widgetService = this.currentWidget
+      const component = deepCopy(currentComponent)
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
       this.cancelFilter()

frontend/src/views/panel/filter/filterDialog.vue

@@ -144,7 +144,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
-import { ApplicationContext } from '@/utils/ApplicationContext'
+// import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
 export default {
   name: 'FilterDialog',
@@ -156,11 +156,8 @@ export default {
     DragItem
   },
   props: {
-    widgetId: {
-      type: String,
-      default: null
-    },
-    componentInfo: {
+
+    widgetInfo: {
       type: Object,
       default: null
     }
@@ -184,23 +181,29 @@ export default {
       fieldValues: []
     }
   },
+  computed: {
+    uuid() {
+      return this.$store.state.panel.panelInfo.id
+    }
+  },
   watch: {
     selectField(values) {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        this.componentInfo && this.componentInfo.setOptionDatas && fieldValues(fieldId).then(res => {
+        this.widget && this.widget.setOptionDatas && fieldValues(fieldId).then(res => {
           const datas = res.data.map(item => {
             return { id: item, text: item }
           })
-          this.componentInfo.setOptionDatas(datas)
-          this.$emit('re-fresh-component', this.componentInfo)
+          this.widget.setOptionDatas(this.uuid, datas)
+        //   this.$emit('re-fresh-component', this.componentInfo)
         })
       }
     }
   },
   created() {
-    this.widget = ApplicationContext.getService(this.widgetId)
+    // this.widget = ApplicationContext.getService(this.widgetId)
+    this.widget = this.widgetInfo
     this.loadDataSetTree()
   },
 

frontend/src/views/panel/filter/index.vue

@@ -10,8 +10,8 @@
       <div class="filter-widget-content">
         <div
           v-for="(widget, index) in item"
-          :key="widget.name+index"
-          :data-id="widget.name"
+          :key="widget.widgetName+index"
+          :data-id="widget.widgetName"
           draggable
           :data-index="index"
           :class="'filter-widget '+ (widget.defaultClass || '')"
@@ -35,23 +35,29 @@ export default {
   data() {
     return {
       componentList,
+      panelInfo: this.$store.state.panel.panelInfo,
       widgetSubjects: {
-        '时间过滤组件': [
-          'timeYearWidget',
-          'timeMonthWidget',
-          'timeQuarterWidget',
-          'timeDateWidget',
-          'timeDateRangeWidget'
-
-        ],
         '文本过滤组件': [
-          'textSelectWidget',
-          'textInputWidget'
-        ],
-        '按钮': [
-          'buttonSureWidget'
+          'mySelectWidget'
         ]
       }
+      //   widgetSubjects: {
+      //     '时间过滤组件': [
+      //       'timeYearWidget',
+      //       'timeMonthWidget',
+      //       'timeQuarterWidget',
+      //       'timeDateWidget',
+      //       'timeDateRangeWidget'
+
+    //     ],
+    //     '文本过滤组件': [
+    //       'textSelectWidget',
+    //       'textInputWidget'
+    //     ],
+    //     '按钮': [
+    //       'buttonSureWidget'
+    //     ]
+    //   }
     }
   },
   created() {
@@ -59,7 +65,11 @@ export default {
       const widgetNames = this.widgetSubjects[key]
       this.widgetSubjects[key] = widgetNames.map(widgetName => {
         const widget = ApplicationContext.getService(widgetName)
-        return widget
+        const uuid = this.panelInfo.id
+        // widget.initLeftPanel(uuid)
+        const result = { widgetName: widgetName }
+        Object.assign(result, widget.getLeftPanel(uuid))
+        return result
       })
     }
   },