NEZ-2428 feat：dashboard 导入导出页面优化

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -32,44 +32,20 @@
         width="580px"
         :modal-append-to-body="false"
         @close="closeDialog"
-        :class="{'import-failContent-dialog':importBox.type==3&&resultNew}"
+        :class="{'import-failContent-dialog':importBox.type==3}"
         class="nz-dialog">
 
-        <!-- 导入 -->
-        <div v-if="importBox.type == 1&&!importNew">
-          <div class="upload-body" style="margin:10px 0;">
-            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
-              <div slot="tip" class="el-upload__tip" style="margin-top: 0;">{{$t('overall.importTip')}}</div>
-              <i class="nz-icon nz-icon-upload"></i>
-              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            </el-upload>
-          </div>
-          <div class="footer">
-            <div class="el-message-box__btns" style="text-align: right;">
-              <button :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small" @click="downloadTemplate()">
-                <span>{{$t('upload.template')}}</span>
-              </button>
-              <button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
-                <span>{{$t('overall.importExcel')}}</span>
-              </button>
-              <button :id="id+'-xlsx-import-esc'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
-                <span>{{$t('overall.cancel')}}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-
         <!-- 新版导入 -->
-        <div v-if="importBox.type == 1&&importNew">
+        <div v-if="importBox.type == 1">
           <div class="upload-body">
-            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls,.csv,.json" action="" class="import-upload" drag>
+            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" :accept="!isDashboard?'.xlsx,.xls,.csv,.json':'.json'" action="" class="import-upload" drag>
               <i class="el-icon-upload"></i>
               <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-              <div class="el-upload__tip" >{{$t('overall.importSupport')}}</div>
+              <div class="el-upload__tip" >{{!isDashboard?$t('overall.importSupport'):$t('overall.supportJson')}}</div>
             </el-upload>
           </div>
           <div class="import-select">
-            <div v-if="importNew" class="exists">
+            <div class="exists">
               <span>{{$t('overall.existed')}}</span>
               <el-select v-model="importBox.existed" style="flex:1" size="medium" popper-class="exists-select">
                 <el-option
@@ -81,7 +57,7 @@
               </el-select>
             </div>
             <ul class="import-select-list">
-              <li v-if="importNew" class="import-select-item">
+              <li class="import-select-item">
                 <el-checkbox v-model="importBox.ignoreError">{{$t('overall.ignoreError')}}</el-checkbox>
               </li>
               <li v-if="showSyncDashboard" class="import-select-item">
@@ -95,6 +71,7 @@
           <div class="footer">
             <div class="el-message-box__btns" style="text-align: right;">
               <el-popover
+                v-if="!isDashboard"
                 placement="bottom-start"
                 trigger="click">
                 <div class="template-pop">
@@ -133,7 +110,7 @@
             <div class="export-box">
               <span class="export-title">{{$t('export.fileFormat')}}</span>
               <el-radio-group v-model="importBox.format"  size="small">
-                <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
+                <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="isDashboard&&item.name!='JSON'">{{item.name}}</el-radio-button>
               </el-radio-group>
             </div>
           </div>
@@ -149,64 +126,8 @@
           </div>
         </div>
 
-        <!-- 导入结果（不展示导出失败记录） -->
-        <div v-if="importBox.type==3&&!resultNew">
-          <div class="upload-body result-body">
-            <div v-if="importResult&&importResult.failNum">
-              <div class="result-title-top">
-                <div class="">
-                  <i class="nz-icon nz-icon-import-success"/>
-                  <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
-                </div>
-                <div class="">
-                  <i class="nz-icon nz-icon-import-failed"/>
-                  <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
-                </div>
-              </div>
-              <div>
-                <div v-if="importResult&&importResult.failDetail" class="result-detail">
-                  <div style="height: 100%; overflow: auto">
-                    <template v-for="(item, index) in importResult.failDetail">
-                      <div :key="index" class="import-result-block">
-                        <div class="import-result-item">
-                          <div style="display: flex;">
-                            <span class="import-result-item-left">•</span>
-                            <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
-                          </div>
-                          <div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else class="result-success-box">
-              <div>
-                <i class="nz-icon nz-icon-import-success"/>
-              </div>
-              <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
-              <div class="result-success-txt">
-                {{$t('overall.result.imported')}}
-                <span v-if="importResult">{{importResult.successNum}}</span>
-                {{$t('overall.result.records')}}
-              </div>
-            </div>
-          </div>
-          <div class="footer">
-            <div class="el-message-box__btns">
-              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn el-button el-button--small nz-btn-style-error" @click="rollbackImport">
-                <span>{{$t('overall.rollbackImport')}}</span>
-              </button>
-              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
-                <span>{{$t('overall.close')}}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-
         <!-- 导入结果（展示导出失败记录） -->
-        <div v-if="importBox.type==3&&resultNew">
+        <div v-if="importBox.type==3">
           <div class="upload-body result-body">
             <!-- 失败提示 -->
             <div v-if="importResult&&importResult.failNum">
@@ -352,17 +273,9 @@ export default {
   },
   computed: {
     language () { return this.$store.getters.getLanguage },
-    // 是否展示新版导入
-    importNew () {
-      // chartTemplate dashboard
-      const arr = ['/visual/panel/import']
-      return !arr.some(item => item === this.importUrl)
-    },
-    // 是否展示新版导入结果
-    resultNew () {
-      // chartTemplate dashboard导入样式维持原状
-      const arr = ['/visual/panel/import']
-      return !arr.some(item => item === this.importUrl)
+    // 判断是否是dashboard
+    isDashboard () {
+      return this.importUrl === '/visual/panel/import'
     },
     // 是否同步更新关联的dashboard
     showSyncDashboard () {
@@ -484,10 +397,8 @@ export default {
         this.prevent_opt.import = true
         const form = new FormData()
         form.append('file', this.importFile.raw)
-        if (this.importNew) {
-          form.append('existed', this.importBox.existed)
-          form.append('ignoreError', Number(this.importBox.ignoreError))
-        }
+        form.append('existed', this.importBox.existed)
+        form.append('ignoreError', Number(this.importBox.ignoreError))
         if (this.showSyncDashboard) {
           form.append('syncDashboard', Number(this.importBox.syncDashboard))
         }
@@ -782,6 +693,10 @@ export default {
     showImportBox (type) {
       this.importBox.show = true
       this.importBox.type = type
+      // isDashboard 只支持JSON
+      if (this.isDashboard) {
+        this.importBox.format = 3
+      }
       if (type == 2 && (!this.showCur)) {
         this.exportCur()
         return

nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue

@@ -59,13 +59,13 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item"  @click="showBottomBox('panel', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['chartTemplate_edit','chartTemplate_delete']" trigger="click" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['dashboard_temp_add','dashboard_temp_edit','dashboard_temp_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'chartTemplate_delete'" :command="['delete', scope.row]">
+            <el-dropdown-item v-has="'dashboard_temp_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'dashboard_temp_delete'" :command="['delete', scope.row]">
               <delete-button
                 ref="deleteButton"
                 :from="'dashboardTemp'"
@@ -73,7 +73,7 @@
                 :type="'link'"
                 :title="$t('overall.delete')"
                 id="alert-msg-delete"
-                v-has="'expressionTemplate_delete'"
+                v-has="'dashboard_temp_delete'"
                 :api="api"
                 :single="true"
                 :delete-objs="singleDelete"
@@ -81,8 +81,8 @@
                 >
               </delete-button>
               </el-dropdown-item>
-            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'dashboard_temp_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'dashboard_temp_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>

nezha-fronted/src/components/page/config/template/dashboardTemp.vue

@@ -11,7 +11,7 @@
       @getTableData="getTableData"
     >
       <template v-slot:top-tool-right>
-        <button id="expr-tmpl-list-export" v-has="'expressionTemplate_add'" :title="$t('overall.createTemplate')" class="top-tool-btn margin-r-10" type="button" @click="add">
+        <button id="expr-tmpl-list-export" v-has="'dashboard_temp_add'" :title="$t('overall.createTemplate')" class="top-tool-btn margin-r-10" type="button" @click="add">
           <i class="nz-icon nz-icon-create-square"></i>
         </button>
        <top-tool-more-options
@@ -23,7 +23,7 @@
           export-file-name="dashboard-temp"
           :params="searchLabel"
           :paramsType="'template'"
-          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_edit'}"
+          :permissions="{import: 'dashboard_temp_add', export: 'dashboard_temp_edit'}"
           class="top-tool-export margin-r-10"
           @afterImport="getTableData"
         >
@@ -40,7 +40,7 @@
                   :delete-objs="batchDeleteObjs"
                   @after="getTableData"
                   id="alert-msg-batch-delete"
-                  v-has="'expressionTemplate_delete'"
+                  v-has="'dashboard_temp_delete'"
                   :api="url">
                 </delete-button>
               </el-dropdown-item>