feat:仪表盘模板导入导出

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

@@ -1,99 +0,0 @@
-<template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
-    <el-row>
-      <el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
-        添加分类
-      </el-button>
-    </el-row>
-    <el-row style="margin-top: 5px">
-      <el-row>
-        <el-input
-          v-model="systemTemplateFilterText"
-          placeholder="输入关键字进行过滤"
-          size="mini"
-          clearable
-          prefix-icon="el-icon-search"
-        />
-      </el-row>
-      <el-row style="margin-top: 5px">
-        <el-tree
-          ref="systemTemplateTree"
-          :default-expanded-keys="defaultExpandedKeys"
-          :data="systemTemplateList"
-          node-key="id"
-          :expand-on-click-node="true"
-          :filter-node-method="filterNode"
-          highlight-current
-          @node-click="nodeClick"
-        >
-          <span slot-scope="{ data }" class="custom-tree-node">
-            <span>
-              <span>
-                <el-button
-                  icon="el-icon-collection"
-                  type="text"
-                />
-              </span>
-              <span style="margin-left: 6px">{{ data.name }}</span>
-            </span>
-          </span>
-        </el-tree>
-      </el-row>
-    </el-row>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: 'SystemTemplateList',
-  components: { },
-  props: {
-    systemTemplateList: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      systemTemplateFilterText: '',
-      defaultExpandedKeys: [],
-      currentTemplateShowList: []
-    }
-  },
-  computed: {
-
-  },
-  watch: {
-    systemTemplateFilterText(val) {
-      this.$refs.systemTemplateTree.filter(val)
-    }
-  },
-  methods: {
-    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')
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-  }
-</style>

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/TemplateList.vue

@@ -0,0 +1,158 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <el-col>
+    <el-row>
+      <el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
+        添加分类
+      </el-button>
+    </el-row>
+    <el-row style="margin-top: 5px">
+      <el-row>
+        <el-input
+          v-model="templateFilterText"
+          placeholder="输入关键字进行过滤"
+          size="mini"
+          clearable
+          prefix-icon="el-icon-search"
+        />
+      </el-row>
+      <el-row style="margin-top: 5px">
+        <el-tree
+          ref="templateTree"
+          :default-expanded-keys="defaultExpandedKeys"
+          :data="templateList"
+          node-key="id"
+          :expand-on-click-node="true"
+          :filter-node-method="filterNode"
+          :highlight-current="true"
+          @node-click="nodeClick"
+        >
+          <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span>
+              <span>
+                <el-button
+                  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>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'SystemTemplateList',
+  components: { },
+  props: {
+    templateType: {
+      type: String,
+      default: ''
+    },
+    templateList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      templateFilterText: '',
+      defaultExpandedKeys: [],
+      currentTemplateShowList: []
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    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) {
+      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)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>

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 = []
+      }
     }
   }
 }