feat:仪表盘模板导入导出

frontend/src/views/panel/template/component/TemplateItem.vue

@@ -2,6 +2,7 @@
   <div class="testcase-template">
     <div class="template-img" :style="classBackground">
       <i class="el-icon-error" @click.stop="templateDelete" />
+      <i class="el-icon-edit" @click.stop="templateEdit" />
     </div>
     <span class="demonstration">{{ template.name }}</span>
   </div>
@@ -98,4 +99,8 @@ export default {
     display: inline;
   }
 
+  .template-img:hover > .el-icon-edit {
+    display: inline;
+  }
+
 </style>

frontend/src/views/panel/template/component/SystemTemplateList.vue → frontend/src/views/panel/template/component/TemplateList.vue

@@ -8,7 +8,7 @@
     <el-row style="margin-top: 5px">
       <el-row>
         <el-input
-          v-model="systemTemplateFilterText"
+          v-model="templateFilterText"
           placeholder="输入关键字进行过滤"
           size="mini"
           clearable
@@ -17,26 +17,48 @@
       </el-row>
       <el-row style="margin-top: 5px">
         <el-tree
-          ref="systemTemplateTree"
+          ref="templateTree"
           :default-expanded-keys="defaultExpandedKeys"
-          :data="systemTemplateList"
+          :data="templateList"
           node-key="id"
           :expand-on-click-node="true"
           :filter-node-method="filterNode"
-          highlight-current
+          :highlight-current="true"
           @node-click="nodeClick"
         >
-          <span slot-scope="{ data }" class="custom-tree-node">
+          <span slot-scope="{ node, data }" class="custom-tree-node">
             <span>
               <span>
                 <el-button
-                  icon="el-icon-collection"
+                  icon="el-icon-picture-outline"
                   type="text"
                 />
               </span>
               <span style="margin-left: 6px">{{ data.name }}</span>
             </span>
+            <span>
+              <span @click.stop>
+                <el-dropdown trigger="click" size="small" @command="clickMore">
+                  <span class="el-dropdown-link">
+                    <el-button
+                      icon="el-icon-plus"
+                      type="text"
+                      size="small"
+                    />
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
+                      编辑
+                    </el-dropdown-item>
+                    <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
+                      删除
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </span>
+            </span>
           </span>
+
         </el-tree>
       </el-row>
     </el-row>
@@ -48,7 +70,11 @@ export default {
   name: 'SystemTemplateList',
   components: { },
   props: {
-    systemTemplateList: {
+    templateType: {
+      type: String,
+      default: ''
+    },
+    templateList: {
       type: Array,
       default: function() {
         return []
@@ -57,7 +83,7 @@ export default {
   },
   data() {
     return {
-      systemTemplateFilterText: '',
+      templateFilterText: '',
       defaultExpandedKeys: [],
       currentTemplateShowList: []
     }
@@ -66,22 +92,55 @@ export default {
 
   },
   watch: {
-    systemTemplateFilterText(val) {
-      this.$refs.systemTemplateTree.filter(val)
+    templateFilterText(val) {
+      this.$refs.templateTree.filter(val)
     }
   },
   methods: {
+    clickAdd() {
+
+    },
+    clickMore(param) {
+      console.log(param)
+      switch (param.type) {
+        case 'edit':
+          this.templateEdit(param.data)
+          break
+        case 'delete':
+          this.templateDelete(param.data)
+          break
+      }
+    },
+    beforeClickMore(type, data, node) {
+      return {
+        'type': type,
+        'data': data,
+        'node': node
+      }
+    },
+
     filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
     nodeClick(data, node) {
-      console.log('nodeClick')
-      debugger
       this.$emit('showCurrentTemplate', data.id)
     },
     add() {
       this.$emit('showTemplateEditDialog', 'new')
+    },
+    templateDelete(template) {
+      this.$alert('是否删除分类：' + template.name + '？', '', {
+        confirmButtonText: '确认',
+        callback: (action) => {
+          if (action === 'confirm') {
+            this.$emit('templateDelete', template.id)
+          }
+        }
+      })
+    },
+    templateEdit(template) {
+      this.$emit('templateEdit', template)
     }
   }
 }

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

@@ -4,11 +4,12 @@
       <el-tabs v-model="currentTemplateType" @tab-click="handleClick">
         <el-tab-pane name="system">
           <span slot="label"><i class="el-icon-document" />系统模板</span>
-          <system-template-list :system-template-list="systemTemplateList" @showTemplateEditDialog="showTemplateEditDialog" />
+          <template-list v-if="currentTemplateType==='system'" :template-type="currentTemplateType" :template-list="templateList" @templateDelete="templateDelete" @templateEdit="templateEdit" @showCurrentTemplate="showCurrentTemplate" @showTemplateEditDialog="showTemplateEditDialog" />
         </el-tab-pane>
         <el-tab-pane name="self">
           <span slot="label"><i class="el-icon-star-off" />用户模板</span>
-          开发中...
+          <!--v-if 重新渲染 强制刷新首行高亮属性-->
+          <template-list v-if="currentTemplateType==='self'" :template-type="currentTemplateType" :template-list="templateList" @templateDelete="templateDelete" @templateEdit="templateEdit" @showCurrentTemplate="showCurrentTemplate" @showTemplateEditDialog="showTemplateEditDialog" />
         </el-tab-pane>
       </el-tabs>
     </de-aside-container>
@@ -40,14 +41,13 @@
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
-import SystemTemplateList from './component/SystemTemplateList'
+import TemplateList from './component/TemplateList'
 import TemplateItem from './component/TemplateItem'
 import { get, post } from '@/api/panel/panel'
-import { deepCopy } from '../../../components/canvas/utils/utils'
 
 export default {
   name: 'PanelMain',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, SystemTemplateList, TemplateItem },
+  components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem },
   data() {
     return {
       showShare: false,
@@ -62,7 +62,7 @@ export default {
       templateEditForm: {},
       editTemplate: false,
       dialogTitle: '',
-      systemTemplateList: []
+      templateList: []
     }
   },
   mounted() {
@@ -70,12 +70,12 @@ export default {
   },
   methods: {
     handleClick(tab, event) {
-
+      this.getTree()
     },
     showCurrentTemplate(pid) {
-      this.currentPid = pid
-      if (this.currentPid) {
-        post('/template/templateList', { pid: this.currentPid }).then(response => {
+      this.currentTemplateId = pid
+      if (this.currentTemplateId) {
+        post('/template/templateList', { pid: this.currentTemplateId }).then(response => {
           this.currentTemplateShowList = response.data
         })
       }
@@ -88,26 +88,14 @@ export default {
             type: 'success',
             showClose: true
           })
-          this.showCurrentTemplate(this.currentPid)
-        })
-      }
-    },
-    saveTemplate(templateEditForm) {
-      if (templateEditForm) {
-        post('/template/save', templateEditForm).then(response => {
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-            showClose: true
-          })
-          this.showCurrentTemplate(this.currentPid)
+          this.getTree()
         })
       }
     },
     showTemplateEditDialog(type, templateInfo) {
       if (type === 'edit') {
         this.dialogTitle = '编辑'
-        this.templateEditForm = deepCopy(templateInfo)
+        this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
       } else {
         this.dialogTitle = '新建'
         this.templateEditForm = { name: '', templateType: this.currentTemplateType, level: 0 }
@@ -138,11 +126,30 @@ export default {
         level: '0'
       }
       post('/template/templateList', request).then(res => {
-        this.systemTemplateList = res.data
-        if (this.systemTemplateList && this.systemTemplateList.length > 0) {
-          this.showCurrentTemplate(this.systemTemplateList[0].id)
-        }
+        this.templateList = res.data
+        this.showFirst()
       })
+    },
+    showFirst() {
+      // 判断是否默认点击第一条
+      if (this.templateList && this.templateList.length > 0) {
+        let showFirst = true
+        this.templateList.forEach(template => {
+          if (template.id === this.currentTemplateId) {
+            showFirst = false
+          }
+        })
+        if (showFirst) {
+          this.$nextTick().then(() => {
+            const firstNode = document.querySelector('.el-tree-node')
+            firstNode.click()
+          })
+        } else {
+          this.showCurrentTemplate(this.currentTemplateId)
+        }
+      } else {
+        this.currentTemplateShowList = []
+      }
     }
   }
 }