fix: 移动导入模板位置

backend/src/main/java/io/dataease/controller/panel/PanelTemplateController.java

@@ -1,6 +1,7 @@
 package io.dataease.controller.panel;
 
 import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import io.dataease.controller.handler.annotation.I18n;
 import io.dataease.controller.request.panel.PanelTemplateRequest;
 import io.dataease.dto.panel.PanelTemplateDTO;
 import io.dataease.service.panel.PanelTemplateService;
@@ -22,6 +23,7 @@ public class PanelTemplateController {
     private PanelTemplateService panelTemplateService;
 
     @PostMapping("/templateList")
+    @I18n
     public List<PanelTemplateDTO> templateList(@RequestBody PanelTemplateRequest request) {
         return panelTemplateService.templateList(request);
     }
@@ -31,7 +33,7 @@ public class PanelTemplateController {
         return panelTemplateService.save(request);
     }
 
-    @PostMapping("/delete/{id}")
+    @DeleteMapping("/delete/{id}")
     public void delete(@PathVariable String id) {
         panelTemplateService.delete(id);
     }

backend/src/main/resources/db/migration/V3__init_data.sql

@@ -160,6 +160,7 @@ COMMIT;
 INSERT INTO `panel_template`(`id`, `name`, `pid`, `level`, `node_type`, `create_by`, `create_time`, `snapshot`, `template_type`, `template_style`, `template_data`, `dynamic_data`) VALUES ('self', '用户模板', '', -1, 'folder', NULL, NULL, '', 'self', '', '', NULL);
 INSERT INTO `panel_template`(`id`, `name`, `pid`, `level`, `node_type`, `create_by`, `create_time`, `snapshot`, `template_type`, `template_style`, `template_data`, `dynamic_data`) VALUES ('system', '系统模板', '', -1, 'folder', NULL, NULL, NULL, 'system', NULL, NULL, NULL);
 
+
 -- ----------------------------
 
 

backend/src/main/resources/i18n/messages_en_US.properties

@@ -226,3 +226,5 @@ i18n_auth_view=View
 i18n_auth_use=Use
 i18n_auth_export=Export
 i18n_auth_manage=Manage
+i18n_template_system=System Template
+i18n_template_self=Self Template

backend/src/main/resources/i18n/messages_zh_CN.properties

@@ -227,3 +227,5 @@ i18n_auth_view=查看
 i18n_auth_use=使用
 i18n_auth_export=导出
 i18n_auth_manage=管理
+i18n_template_system=系统模板
+i18n_template_self=用户模板

backend/src/main/resources/i18n/messages_zh_TW.properties

@@ -159,7 +159,7 @@ quota_duration_excess_organization=壓測時長超過組織限額
 license_valid_license_error=授權驗證失敗
 license_valid_license_code=授權碼已經存在
 import_xmind_count_error=思維導圖導入用例數量不能超過 500 條
-import_xmind_not_found=未找到测试用例
+import_xmind_not_found=未找到測試用例
 
 test_review_task_notice=測試評審任務通知
 test_track.length_less_than=標題過長，字數必須小於
@@ -186,44 +186,46 @@ automation_exec_info=沒有測試步驟，無法執行
 authsource_name_already_exists=認證源名稱已經存在
 authsource_name_is_null=認證源名稱不能為空
 authsource_configuration_is_null=認證源配置不能為空
-个人信息=個人信息
+個人信息=個人信息
-仪表盘=儀表盤
+儀表盤=儀表盤
-修改密码=修改密碼
+修改密碼=修改密碼
-创建用户=創建用戶
+創建用戶=創建用戶
-创建组织=創建組織
+創建組織=創建組織
-创建菜单=創建菜單
+創建菜單=創建菜單
-创建角色=創建角色
+創建角色=創建角色
-创建连接=創建鏈接
+創建連接=創建鏈接
-删除用户=刪除用戶
+刪除用戶=刪除用戶
-删除组织=刪除組織
+刪除組織=刪除組織
-删除菜单=刪除菜單
+刪除菜單=刪除菜單
-删除角色=刪除角色
+刪除角色=刪除角色
-删除连接=删除鏈接
+刪除連接=刪除鏈接
-参数管理=參數管理
+參數管理=參數管理
-数据源=數據源
+數據源=數據源
-数据源表单=數據源表單
+數據源表單=數據源表單
-数据集=數據集
+數據集=數據集
-权限管理=權限管理
+權限管理=權限管理
-校验连接=校驗鏈接
+校驗連接=校驗鏈接
 模板管理=模板管理
-用户管理=用戶管理
+用戶管理=用戶管理
-用户表单=用戶表單
+用戶表單=用戶表單
-系统管理=系統管理
+系統管理=系統管理
-组织管理=組織管理
+組織管理=組織管理
-组织表单=組織表單
+組織表單=組織表單
-编辑用户=編輯用戶
+編輯用戶=編輯用戶
-编辑组织=編輯組織
+編輯組織=編輯組織
-编辑菜单=編輯菜單
+編輯菜單=編輯菜單
-编辑角色=編輯角色
+編輯角色=編輯角色
-编辑连接=編輯鏈接
+編輯連接=編輯鏈接
-菜单管理=菜單管理
+菜單管理=菜單管理
-菜单表单=表單管理
+菜單表單=表單管理
-视图=視圖
+視圖=視圖
 角色管理=角色管理
-角色表单=角色表單
+角色表單=角色表單
-重置密码=重置密碼
+重置密碼=重置密碼
-关于=關於
+關於=關於
 i18n_auth_view=查看
 i18n_auth_use=使用
 i18n_auth_export=導出
 i18n_auth_manage=管理
+i18n_template_system=系統模板
+i18n_template_self=用戶模板

frontend/src/api/system/template.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+export function save(data) {
+  return request({
+    url: '/template/save',
+    data: data,
+    method: 'post'
+  })
+}
+export function templateDelete(id) {
+  return request({
+    url: '/template/delete/' + id,
+    method: 'delete'
+  })
+}
+
+export function showTemplateList(data) {
+  return request({
+    url: '/template/templateList',
+    data: data,
+    method: 'post'
+  })
+}
+
+export function findOne(id) {
+  return request({
+    url: '/template/findOne/' + id,
+    method: 'get'
+  })
+}
+
+export function find(data) {
+  return request({
+    url: '/template/find',
+    data: data,
+    method: 'post'
+  })
+}

frontend/src/lang/en.js

@@ -828,6 +828,7 @@ export default {
     delete: 'Delete',
     move_to: 'Move',
     rename: 'Rename',
+    import: 'Import',
     tips: 'Tips',
     confirm_delete: 'Confirm Delete',
     delete_success: 'Delete Success',

frontend/src/lang/tw.js

@@ -828,6 +828,7 @@ export default {
     delete: '刪除',
     move_to: '移動到',
     rename: '重命名',
+    import: '导入模板',
     tips: '提示',
     confirm_delete: '確認刪除',
     delete_success: '刪除成功',

frontend/src/lang/zh.js

@@ -830,6 +830,7 @@ export default {
     delete: '删除',
     move_to: '移动到',
     rename: '重命名',
+    import: '导入模板',
     tips: '提示',
     confirm_delete: '确认删除',
     delete_success: '删除成功',

frontend/src/views/panel/list/EditPanel/TemplateAllList.vue

@@ -22,22 +22,17 @@
           @node-click="nodeClick"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
-            <span>
+            <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span v-if="data.nodeType==='template'">
-                <el-button
+                 <svg-icon icon-class="panel" class="ds-icon-scene" />
-                  icon="el-icon-picture-outline"
-                  type="text"
-                />
               </span>
               <span v-if="data.nodeType==='folder'">
-                <el-button
+                <i class="el-icon-folder" />
-                  icon="el-icon-folder"
-                  type="text"
-                />
               </span>
-              <span style="margin-left: 6px">{{ data.name }}</span>
+              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
             </span>
-          </span></el-tree>
+          </span>
+        </el-tree>
       </el-row>
     </el-row>
   </el-col>

frontend/src/views/panel/list/EditPanel/index.vue

@@ -3,7 +3,7 @@
     <el-row v-if="editPanel.optType==='new' && editPanel.panelInfo.nodeType==='panel'">
       <el-col :span="18" style="height: 40px">
         <el-radio v-model="inputType" label="self"> {{ $t('panel.custom') }}</el-radio>
-        <el-radio v-model="inputType" label="import">{{ $t('panel.import_template') }}  </el-radio>
+        <!--        <el-radio v-model="inputType" label="import">{{ $t('panel.import_template') }}  </el-radio>-->
         <el-radio v-model="inputType" label="copy">{{ $t('panel.copy_template') }}  </el-radio>
       </el-col>
       <el-col v-if="inputType==='import'" :span="6">
@@ -18,7 +18,7 @@
       </el-col>
     </el-row>
     <el-row v-if="inputType==='copy'" class="preview">
-      <el-col :span="8" style="overflow: auto">
+      <el-col :span="8" style="overflow-y: auto">
         <template-all-list :template-list="templateList" @showCurrentTemplateInfo="showCurrentTemplateInfo" />
       </el-col>
       <el-col :span="16" :style="classBackground" class="preview-show" />
@@ -157,7 +157,7 @@ export default {
     margin-top: 5px;
     border:1px solid #E6E6E6;
     height:300px !important;
-    overflow:auto;
+    overflow:hidden;
     background-size: 100% 100% !important;
   }
   .preview-show {

frontend/src/views/panel/list/PanelList.vue

@@ -48,7 +48,7 @@
                   <svg-icon icon-class="panel" class="ds-icon-scene" />
                 </span>
                 <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="folder" class="ds-icon-scene" />
+                  <i class="el-icon-folder" />
                 </span>
                 <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
               </span>
@@ -64,7 +64,7 @@
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item :command="beforeClickEdit('folder','new',data,node)">
-                        <svg-icon icon-class="folder" class="ds-icon-scene" /> &nbsp <span>{{ $t('panel.groupAdd') }}</span>
+                        <i class="el-icon-folder" /> &nbsp <span>{{ $t('panel.groupAdd') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item :command="beforeClickEdit('panel','new',data,node)">
                         <svg-icon icon-class="panel" class="ds-icon-scene" /> &nbsp <span>{{ $t('panel.panelAdd') }}</span>

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

@@ -0,0 +1,136 @@
+<template>
+  <el-row>
+    <el-row style="margin-top: 5px">
+      <el-col :span="4">{{ $t('commons.name') }}</el-col>
+      <el-col :span="16">
+        <el-input v-model="templateInfo.name" clearable size="mini" />
+      </el-col>
+      <el-col :span="4">
+        <el-button style="margin-left: 10px" class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
+        <input id="input" ref="files" type="file" accept=".DE" hidden @change="handleFileChange">
+      </el-col>
+    </el-row>
+    <el-row class="preview" :style="classBackground" />
+    <el-row class="root-class">
+      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
+      <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { save } from '@/api/system/template'
+
+export default {
+
+  props: {
+    pid: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tableRadio: null,
+      keyWordSearch: '',
+      columnLabel: this.$t('panel.belong_to_category'),
+      templateList: [],
+      importTemplateInfo: {
+        snapshot: ''
+      },
+      templateInfo: {
+        level: '1',
+        pid: this.pid,
+        name: '',
+        templateStyle: '',
+        templateData: '',
+        snapshot: ''
+      }
+    }
+  },
+  computed: {
+    classBackground() {
+      if (this.importTemplateInfo.snapshot) {
+        return {
+          background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
+        }
+      } else {
+        return {}
+      }
+    }
+  },
+  methods: {
+    handleExceed(file) {
+    },
+    cancel() {
+      this.$emit('closeEditTemplateDialog')
+    },
+    save() {
+      if (!this.templateInfo.name) {
+        this.$warning(this.$t('chart.name_can_not_empty'))
+        return false
+      }
+      save(this.templateInfo).then(response => {
+        this.$message({
+          message: this.$t('commons.save_success'),
+          type: 'success',
+          showClose: true
+        })
+        debugger
+        this.$emit('closeEditTemplateDialog')
+      })
+    },
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      const reader = new FileReader()
+      reader.onload = (res) => {
+        const result = res.target.result
+        this.importTemplateInfo = JSON.parse(result)
+        this.templateInfo.name = this.importTemplateInfo.name
+        this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
+        this.templateInfo.templateData = this.importTemplateInfo.panelData
+        this.templateInfo.snapshot = this.importTemplateInfo.snapshot
+      }
+      reader.readAsText(file)
+    },
+    goFile() {
+      this.$refs.files.click()
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+.my_table >>> .el-table__row>td{
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+    border: none;
+}
+.my_table >>> .el-table::before{
+  /* 去除下边框 */
+  height: 0;
+}
+
+  .root-class {
+    margin: 15px 0px 5px;
+    text-align: center;
+  }
+  .preview {
+    margin-top: 5px;
+    border:1px solid #E6E6E6;
+    height:300px !important;
+    overflow:auto;
+    background-size: 100% 100% !important;
+  }
+  .preview-show {
+    border-left:1px solid #E6E6E6;
+    height:300px;
+    background-size: 100% 100% !important;
+  }
+</style>

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

@@ -4,7 +4,9 @@
       <i class="el-icon-error" @click.stop="templateDelete" />
       <i class="el-icon-edit" @click.stop="templateEdit" />
     </div>
+    <el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
       <span class="demonstration">{{ template.name }}</span>
+    </el-tooltip>
   </div>
 </template>
 
@@ -63,6 +65,8 @@ export default {
 
   .demonstration {
     display: block;
+    font-size: 14px;
+    color: gray;
     text-align: center;
     margin: 10px auto;
     width: 150px;

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

@@ -27,14 +27,11 @@
           @node-click="nodeClick"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span style="display: flex; flex: 1 1 0%; width: 0px;">
               <span>
-              <span>
+                <i class="el-icon-folder" />
-                <el-button
-                  icon="el-icon-folder"
-                  type="text"
-                />
               </span>
-              <span style="margin-left: 6px">{{ data.name }}</span>
+              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
             </span>
             <span>
               <span @click.stop>
@@ -47,6 +44,9 @@
                     />
                   </span>
                   <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item icon="el-icon-upload2" :command="beforeClickMore('import',data,node)">
+                      {{ $t('panel.import') }}
+                    </el-dropdown-item>
                     <el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
                       {{ $t('panel.rename') }}
                     </el-dropdown-item>
@@ -108,6 +108,9 @@ export default {
         case 'delete':
           this.templateDelete(param.data)
           break
+        case 'import':
+          this.templateImport(param.data)
+          break
       }
     },
     beforeClickMore(type, data, node) {
@@ -140,6 +143,9 @@ export default {
     },
     templateEdit(template) {
       this.$emit('templateEdit', template)
+    },
+    templateImport(template) {
+      this.$emit('templateImport', template.id)
     }
   }
 }

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

@@ -4,16 +4,28 @@
       <el-tabs v-model="currentTemplateType" @tab-click="handleClick">
         <el-tab-pane name="system">
           <span slot="label"><i class="el-icon-document" /> {{ $t('panel.sys_template') }}</span>
-          <template-list v-if="currentTemplateType==='system'" :template-type="currentTemplateType" :template-list="templateList"
+          <template-list
-                         @templateDelete="templateDelete" @templateEdit="templateEdit" @showCurrentTemplate="showCurrentTemplate"
+            v-if="currentTemplateType==='system'"
-                         @showTemplateEditDialog="showTemplateEditDialog" />
+            :template-type="currentTemplateType"
+            :template-list="templateList"
+            @templateDelete="templateDelete"
+            @templateEdit="templateEdit"
+            @showCurrentTemplate="showCurrentTemplate"
+            @templateImport="templateImport"
+          />
         </el-tab-pane>
         <el-tab-pane name="self">
           <span slot="label"><i class="el-icon-star-off" />{{ $t('panel.user_template') }}</span>
           <!--v-if 重新渲染 强制刷新首行高亮属性-->
-          <template-list v-if="currentTemplateType==='self'" :template-type="currentTemplateType" :template-list="templateList"
+          <template-list
-                         @templateDelete="templateDelete" @templateEdit="templateEdit" @showCurrentTemplate="showCurrentTemplate"
+            v-if="currentTemplateType==='self'"
-                         @showTemplateEditDialog="showTemplateEditDialog" />
+            :template-type="currentTemplateType"
+            :template-list="templateList"
+            @templateDelete="templateDelete"
+            @templateEdit="templateEdit"
+            @showCurrentTemplate="showCurrentTemplate"
+            @templateImport="templateImport"
+          />
         </el-tab-pane>
       </el-tabs>
     </de-aside-container>
@@ -38,6 +50,15 @@
         </el-button>
       </div>
     </el-dialog>
+
+    <!--导入templatedialog-->
+    <el-dialog :title="templateDialog.title" :visible.sync="templateDialog.visible" :show-close="true" width="600px">
+      <template-import
+        v-if="templateDialog.visible"
+        :pid="templateDialog.pid"
+        @closeEditTemplateDialog="closeEditTemplateDialog"
+      />
+    </el-dialog>
   </de-container>
 </template>
 
@@ -47,11 +68,12 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import TemplateList from './component/TemplateList'
 import TemplateItem from './component/TemplateItem'
-import { get, post } from '@/api/panel/panel'
+import TemplateImport from './component/TemplateImport'
+import { save, templateDelete, showTemplateList } from '@/api/system/template'
 
 export default {
   name: 'PanelMain',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem },
+  components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem, TemplateImport },
   data() {
     return {
       showShare: false,
@@ -66,7 +88,12 @@ export default {
       templateEditForm: {},
       editTemplate: false,
       dialogTitle: '',
-      templateList: []
+      templateList: [],
+      templateDialog: {
+        title: this.$t('panel.import_template'),
+        visible: false,
+        pid: ''
+      }
     }
   },
   mounted() {
@@ -79,14 +106,14 @@ export default {
     showCurrentTemplate(pid) {
       this.currentTemplateId = pid
       if (this.currentTemplateId) {
-        post('/template/templateList', { pid: this.currentTemplateId }).then(response => {
+        showTemplateList({ pid: this.currentTemplateId }).then(response => {
           this.currentTemplateShowList = response.data
         })
       }
     },
     templateDelete(id) {
       if (id) {
-        post('/template/delete/' + id, null).then(response => {
+        templateDelete(id).then(response => {
           this.$message({
             message: this.$t('commons.delete_success'),
             type: 'success',
@@ -110,7 +137,7 @@ export default {
       this.showTemplateEditDialog('edit', templateInfo)
     },
     saveTemplateEdit(templateEditForm) {
-      post('/template/save', templateEditForm).then(response => {
+      save(templateEditForm).then(response => {
         this.$message({
           message: this.$t('commons.save_success'),
           type: 'success',
@@ -128,7 +155,7 @@ export default {
         templateType: this.currentTemplateType,
         level: '0'
       }
-      post('/template/templateList', request).then(res => {
+      showTemplateList(request).then(res => {
         this.templateList = res.data
         this.showFirst()
       })
@@ -153,6 +180,15 @@ export default {
       } else {
         this.currentTemplateShowList = []
       }
+    },
+    closeEditTemplateDialog() {
+      debugger
+      this.templateDialog.visible = false
+      this.showCurrentTemplate(this.templateDialog.pid)
+    },
+    templateImport(pid) {
+      this.templateDialog.visible = true
+      this.templateDialog.pid = pid
     }
   }
 }