feat: tabs组件

.gitignore

@@ -40,6 +40,7 @@ yarn-error.log*
 pnpm-debug.log*
 
 # Editor directories and files
+.lh
 .idea
 .vscode
 *.suo

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

@@ -1,21 +1,91 @@
 <template>
+  <div>
+    <el-tabs v-model="editableTabsValue" type="card" addable @edit="handleTabsEdit">
+      <el-tab-pane
+        v-for="(item, index) in tabList"
+        :key="item.name+index"
+        :name="item.name"
+      >
 
-  <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
-    <el-tab-pane
-      v-for="(item, index) in editableTabs"
-      :key="item.name"
-      :label="item.title"
-      :name="item.name"
+        <el-dropdown slot="label" :disabled="!isEdit" class="de-tab-drop" trigger="click" @command="handleCommand">
+          <span class="el-dropdown-link">
+
+            <span>{{ item.title }}</span>
+            <i v-if="isEdit" class="de-tab-i el-icon-arrow-down el-icon--right" />
+          </span>
+
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="beforeHandleCommond('editTitle', item)">
+              编辑标题
+            </el-dropdown-item>
+
+            <el-dropdown-item :command="beforeHandleCommond('selectView', item)">
+              选择视图
+            </el-dropdown-item>
+
+            <el-dropdown-item :command="beforeHandleCommond('deleteCur', item)">
+              删除
+            </el-dropdown-item>
+
+          </el-dropdown-menu>
+        </el-dropdown>
+
+        <div class="de-tab-content">
+          <user-view v-if="item.viewInfo" :element="item.viewInfo" />
+        </div>
+
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog
+      title="编辑标题"
+      :append-to-body="true"
+      :visible.sync="dialogVisible"
+      width="30%"
+      center
     >
-      {{ item.content }}
-    </el-tab-pane>
-  </el-tabs>
+      <el-input
+        v-model="textarea"
+        type="textarea"
+        :rows="2"
+        placeholder="请输入内容"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureCurTitle">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog
+      title="选择视图"
+      :append-to-body="true"
+      :visible.sync="viewDialogVisible"
+      width="20%"
+      height="400px"
+      center
+    >
+      <div style="width: 100%;min-height: 250px; max-height: 400px;">
+        <view-select ref="viewSelect" :select-model="true" />
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="viewDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureViewSelector">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
 
 </template>
 
 <script>
+
+import ViewSelect from '@/views/panel/ViewSelect'
+import { uuid } from 'vue-uuid'
+import componentList from '@/components/canvas/custom-component/component-list'
 export default {
   name: 'DeTabls',
+  components: { ViewSelect },
   props: {
     element: {
       type: Object,
@@ -31,13 +101,88 @@ export default {
         name: '1',
         content: ''
       }],
-      tabIndex: 1
+      tabIndex: 1,
+      isEdit: true,
+      dialogVisible: false,
+      textarea: '',
+      curItem: null,
+      viewDialogVisible: false,
+      curViewInfo: null,
+      tabList: [],
+      options: null
     }
   },
   created() {
-
+    this.options = this.element.options
+    this.tabList = this.options && this.options.tabList || this.editableTabs
   },
   methods: {
+    beforeHandleCommond(item, param) {
+      return {
+        'command': item,
+        'param': param
+      }
+    },
+    handleCommand(command) {
+      switch (command.command) {
+        case 'editTitle':
+          this.editCurTitle(command.param)
+          break
+        case 'deleteCur':
+          this.deleteCur(command.param)
+          break
+        case 'selectView':
+          this.selectView(command.param)
+          break
+      }
+    },
+    sureViewSelector() {
+      const nodes = this.$refs.viewSelect.getCurrentSelected()
+      const node = nodes[0]
+
+      let component
+      const newComponentId = uuid.v1()
+      const componentInfo = {
+        type: 'view',
+        id: node.id
+      }
+
+      componentList.forEach(componentTemp => {
+        if (componentTemp.type === 'view') {
+          component = JSON.parse(JSON.stringify(componentTemp))
+          const propValue = {
+            id: newComponentId,
+            viewId: componentInfo.id
+          }
+          component.propValue = propValue
+          component.filters = []
+          component.linkageFilters = []
+        }
+      })
+      component.id = newComponentId
+      component.style.width = '100%'
+      component.style.height = '100%'
+      this.curItem.viewInfo = component
+      this.curItem.name = newComponentId
+      this.viewDialogVisible = false
+    },
+
+    editCurTitle(param) {
+      this.curItem = param
+      this.textarea = param.title
+      this.dialogVisible = true
+    },
+    sureCurTitle() {
+      this.curItem.title = this.textarea
+      this.dialogVisible = false
+    },
+    deleteCur(param) {
+
+    },
+    selectView(param) {
+      this.curItem = param
+      this.viewDialogVisible = true
+    },
 
     handleTabsEdit(targetName, action) {
       if (action === 'add') {
@@ -72,5 +217,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .de-tab-i {
+    transition: 0.3s;
+    opacity: 0;
+    transform:  translateY(100%);
+  }
+
+  .de-tab-drop:hover .de-tab-i {
+    opacity: 1;
+    transform:  translateY(0);
+  }
+  .de-tab-content {
+      width: 100%;
+      height: 100%;
+  }
 
 </style>

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

@@ -2,7 +2,7 @@
   <el-col v-loading="loading">
     <el-row style="margin-top: 5px">
       <el-row style="margin-left: 5px;margin-right: 5px">
-        <el-col :span="16">
+        <el-col :span="selectModel ? 23 : 16">
           <el-input
             v-model="templateFilterText"
             :placeholder="$t('panel.filter_keywords')"
@@ -11,7 +11,7 @@
             prefix-icon="el-icon-search"
           />
         </el-col>
-        <el-col :span="7">
+        <el-col v-if="!selectModel" :span="7">
           <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
         </el-col>
 
@@ -20,6 +20,7 @@
         <el-tree
           ref="templateTree"
           :default-expanded-keys="defaultExpandedKeys"
+          :show-checkbox="selectModel"
           :data="data"
           node-key="id"
           :props="defaultProps"
@@ -31,6 +32,7 @@
           :highlight-current="true"
           @node-drag-start="handleDragStart"
           @node-click="nodeClick"
+          @check="checkChanged"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
             <span>
@@ -64,6 +66,12 @@
 import { tree, findOne } from '@/api/panel/view'
 export default {
   name: 'ViewSelect',
+  props: {
+    selectModel: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       templateFilterText: '',
@@ -126,6 +134,16 @@ export default {
     },
     newChart() {
       this.$emit('newChart')
+    },
+    checkChanged(node, status) {
+      this.$refs.templateTree.setCheckedNodes([])
+      if (status.checkedKeys && status.checkedKeys.length > 0) {
+        this.$refs.templateTree.setCheckedNodes([node])
+      }
+    },
+    getCurrentSelected() {
+      const nodes = this.$refs.templateTree.getCheckedNodes(true, false)
+      return nodes
     }
 
   }