feat: 过滤组件

frontend/src/components/DragItem/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <span>
+    <el-dropdown trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis">
+          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+          <slot />
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DragItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          break
+        case 'remove':
+          this.removeItem()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    showRename() {
+      this.item.index = this.index
+      this.item.renameType = 'dimension'
+      this.$emit('onNameEdit', this.item)
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.$emit('closeItem', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: inline-block;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+</style>

frontend/src/components/dataease/DeAsideContainer.vue

@@ -9,7 +9,7 @@
     <!--<i v-if="asideHidden" class="el-icon-arrow-right"/>-->
     <!--</div>-->
     <slot />
-    <de-horizontal-drag-bar />
+    <de-horizontal-drag-bar v-if="showDragBar" />
   </el-aside>
 </template>
 
@@ -26,6 +26,10 @@ export default {
     enableAsideHidden: {
       type: Boolean,
       default: true
+    },
+    showDragBar: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

frontend/src/styles/index.scss

@@ -88,7 +88,7 @@ div:focus {
 .de-filter-dialog {
     min-width: 500px !important;
     width: 50% !important;
-    
+
     .el-dialog__header{
         background-color: #f4f4f5;
         padding: 10px 20px !important;
@@ -144,3 +144,23 @@ div:focus {
         border: none !important;
     }
 }
+
+.de-filter-data-table {
+    .el-table__body-wrapper >table>{
+        tbody {
+            .el-table__row {
+                :hover {
+                    cursor: pointer;
+                }
+                td {
+                    border: none !important;
+                }
+            }
+
+        }
+
+    }
+}
+.de-filter-data-table::before {
+    height: 0px !important;
+}

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

@@ -224,11 +224,12 @@ export default {
     // 画布
     restore() {
       // 用保存的数据恢复画布
-      if (localStorage.getItem('canvasData')) {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
+      let canvasData = null
+      if ((canvasData = localStorage.getItem('canvasData')) !== null && canvasData !== 'null') {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(canvasData)))
       }
 
-      if (localStorage.getItem('canvasStyle')) {
+      if (canvasData && canvasData !== 'null') {
         this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
       }
     },
@@ -277,7 +278,6 @@ export default {
     },
 
     handleDragOver(e) {
-      console.log('handleDragOver123')
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
     },

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

@@ -1,14 +1,77 @@
 <template>
 
   <de-container class="de-dialog-container">
-    <de-aside-container class="ms-aside-container">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">按表选择</el-tab-pane>
+    <de-aside-container :show-drag-bar="false" class="ms-aside-container">
+      <el-tabs v-model="activeName" class="filter-dialog-tabs">
+        <el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">
+          <div class="component-header filter-common">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
+                <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a>
+                <span v-else>{{ bread.label }}</span>
+              </el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+          <div class="component-search filter-common">
+            <el-input
+              placeholder="请输入内容"
+              prefix-icon="el-icon-search"
+            />
+          </div>
+
+          <!-- <div class="component-result-content filter-common" @dragstart="handleDragStart" @dragend="handleDragEnd"> -->
+          <div class="component-result-content filter-common">
+            <el-tree
+              v-if="showDomType === 'tree'"
+              :data="data"
+              :props="defaultProps"
+              :render-content="renderNode"
+              @node-click="handleNodeClick"
+            />
+
+            <el-table
+              v-else-if="showDomType === 'db'"
+              class="de-filter-data-table"
+              :data="sceneDatas"
+              :show-header="false"
+              size="mini"
+              :highlight-current-row="true"
+              style="width: 100%"
+            >
+              <el-table-column prop="name" label="名称">
+                <template v-if="showDomType === 'db'" :id="scope.row.id" slot-scope="scope">
+                  <div class="filter-db-row" @click="showFieldDatas(scope.row)">
+                    <i class="el-icon-s-data" />
+                    <span> {{ scope.row.name }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="showDomType === 'field'">
+              <draggable
+                v-model="fieldDatas"
+                :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
+                animation="300"
+                :move="onMove"
+                class="drag-list"
+                @end="end1"
+                @start="start1"
+              >
+                <transition-group>
+                  <div v-for="item in fieldDatas" :key="item.id" class="filter-db-row">
+                    <i class="el-icon-s-data" />
+                    <span> {{ item.name }}</span>
+                  </div>
+                </transition-group>
+              </draggable>
+            </div>
+          </div>
+        </el-tab-pane>
         <el-tab-pane :lazy="true" class="de-tab" label="按组件选择" name="assembly">按组件选择</el-tab-pane>
       </el-tabs>
     </de-aside-container>
 
-    <!--画布区域-->
     <de-main-container class="ms-main-container">
       <div>
         <el-row>
@@ -19,7 +82,22 @@
                   <div class="field-content-text">字段</div>
                 </div>
 
-                <div class="field-content-right">请拖入左侧字段</div>
+                <div class="field-content-right">
+                  <el-row style="display:flex;height: 32px;">
+                    <draggable
+                      v-model="selectField"
+                      group="dimension"
+                      animation="300"
+                      :move="onMove"
+                      style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      @end="end2"
+                    >
+                      <transition-group class="draggable-group">
+                        <drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
+                      </transition-group>
+                    </draggable>
+                  </el-row>
+                </div>
               </div>
             </div>
           </el-col>
@@ -54,24 +132,152 @@
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import draggable from 'vuedraggable'
+import DragItem from '@/components/DragItem'
+import { groupTree, loadTable, fieldList } from '@/api/dataset/dataset'
 export default {
   name: 'FilterDialog',
   components: {
     DeMainContainer,
     DeContainer,
-    DeAsideContainer
+    DeAsideContainer,
+    draggable,
+    DragItem
   },
   data() {
     return {
-      activeName: 'dataset'
+      activeName: 'dataset',
+      showDomType: 'tree',
+      dataSetBreads: [
+        { label: '数据列表', link: false, type: 'root' }
+      ],
+      data: [],
+      sceneDatas: [],
+      fieldDatas: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      selectField: []
     }
   },
   created() {
-
+    this.loadDataSetTree()
   },
 
   methods: {
+    handleNodeClick(data) {
+      if (data.type === 'scene') {
+        this.showSceneTable(data)
+      }
+    },
+    loadDataSetTree() {
+      groupTree({}).then(res => {
+        this.data = res.data
+      })
+    },
+    renderNode(h, { node, data, store }) {
+      return (
+        <div class='custom-tree-node' >
 
+          { data.type === 'scene' ? (
+            <el-button icon='el-icon-folder' type='text' size='mini' />
+          ) : (
+            ''
+          )}
+          <span class='label-span' >{node.label}</span>
+        </div>
+      )
+    },
+    showSceneTable(node) {
+      this.showDomType = 'db'
+      this.setTailLink(node)
+      this.addTail(node)
+      this.loadTable(node.id)
+    },
+    setTailLink(node) {
+      const tail = this.dataSetBreads[this.dataSetBreads.length - 1]
+      tail.type = node.type
+      tail.link = true
+    },
+    addTail(node) {
+      const tail = { link: false, label: node.label || node.name, type: node.type }
+      this.dataSetBreads.push(tail)
+    },
+
+    removeTail() {
+      this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
+      this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
+    },
+    backToLink(bread) {
+      if (bread.type === 'db') {
+        this.showDomType = 'db'
+      } else {
+        this.showDomType = 'tree'
+      }
+
+      this.removeTail()
+    },
+    loadTable(sceneId) {
+      loadTable({ sceneId: sceneId, sort: 'type asc,create_time desc,name asc' }).then(res => {
+        this.sceneDatas = res.data
+      })
+    },
+
+    loadField(tableId) {
+      fieldList(tableId).then(res => {
+        this.fieldDatas = res.data
+      })
+    },
+    showFieldDatas(row) {
+      this.showDomType = 'field'
+      this.setTailLink(row)
+      this.addTail(row)
+      this.loadField(row.id)
+    },
+    test(row) {},
+    onMove(e, originalEvent) {
+      this.moveId = e.draggedContext.element.id
+      return true
+    },
+    start1() {
+
+    },
+    end1(e) {
+      this.refuseMove(e)
+      this.removeCheckedKey(e)
+      this.save()
+    },
+    save() {
+
+    },
+    end2(e) {
+      this.refuseMove(e)
+    },
+    refuseMove(e) {
+      const that = this
+      const xItems = this.fieldDatas.filter(function(m) {
+        return m.id === that.moveId
+      })
+
+      if (xItems && xItems.length > 1) {
+        this.fieldDatas.splice(e.newDraggableIndex, 1)
+      }
+    },
+    removeCheckedKey(e) {
+      const that = this
+      const xItems = this.selectField.filter(function(m) {
+        return m.id === that.moveId
+      })
+
+      if (xItems && xItems.length > 1) {
+        this.selectField.splice(e.newDraggableIndex, 1)
+      }
+    },
+    closeItem(tag) {
+      const index = tag.index
+      this.selectField.splice(index, 1)
+    }
   }
 }
 </script>
@@ -166,4 +372,36 @@ export default {
       background: #99a9bf;
   }
 
+  .filter-dialog-tabs {
+      border: 1px solid #E6E6E6;
+  }
+
+  .filter-common {
+      margin: 10px 10px;
+
+  }
+
+  .component-header {
+      margin: 20px 10px !important;
+  }
+
+  .link-text {
+      font-weight: 450  !important;
+      color: #409EFF;
+  }
+  .filter-db-row {
+      :hover {
+          cursor: pointer;
+      }
+      i {
+          color: #409EFF;
+      }
+    // background-color: #3685f2;
+    // color: #fff;
+  }
+  .draggable-group {
+    display: inline-block;
+    width: 100%;
+    height: calc(100% - 6px);
+  }
 </style>