NEZ-1171 fix：alert message 导出样式修改

2021-11-04 17:00:58 +08:00
parent caa410a4df
commit bf96ab737b
3 changed files with 111 additions and 34 deletions
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -323,3 +323,26 @@
 .popper__arrow {
  opacity: 0;
 }
+.export-box{
+  display: flex;
+  margin-top: 30px;
+  align-items: center;
+  .export-title {
+    display: inline-block;
+    width: 100px;
+    text-align: left;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight: 600;
+  }
+  /deep/ .el-radio-group{
+    flex: 1;
+    .el-radio-button--small {
+      width: 142px;
+      .el-radio-button__inner{
+        width: 100%;
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -338,6 +338,7 @@ export default {
      }
      params.language = localStorage.getItem('nz-language') || 'en'
      params.format = this.importBox.format
+      delete params.statistics
      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
      this.closeDialog()
    },
@@ -371,6 +372,7 @@ export default {
      // }
      params.language = localStorage.getItem('nz-language') || 'en'
      params.format = this.importBox.format
+      delete params.statistics
      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
      this.closeDialog()
    },
@@ -405,6 +407,7 @@ export default {
      params.language = localStorage.getItem('nz-language') || 'en'
      params.format = this.importBox.format
      params.ids = this.deleteObjs.map(item => item.id).join(',')
+      delete params.statistics
      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
      this.closeDialog()
    },
@@ -506,27 +509,5 @@ export default {
 </script>

 <style scoped lang="scss">
-.export-box{
-  display: flex;
-  margin-top: 30px;
-  align-items: center;
-  .export-title {
-    display: inline-block;
-    width: 100px;
-    text-align: left;
-    font-size: 14px;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight: 600;
-  }
-  /deep/ .el-radio-group{
-    flex: 1;
-    .el-radio-button--small {
-      width: 142px;
-      .el-radio-button__inner{
-        width: 100%;
-      }
-    }
-  }
-}
+
 </style>
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -57,15 +57,31 @@
    </nz-data-list>
    <!--导出-->
    <div class="export-xlsx">
-      <el-dialog :modal-append-to-body='false' :show-close="true" :title="importBox.title" :visible.sync="importBox.show" class="nz-dialog" width="300px" @close="closeDialog">
-        <div class="upload-body">
-          <button id="alert-msg-exportcur" class="el-button el-button--default el-button--small" @click="exportCur">
-            <span>{{$t('overall.exportCur')}}</span>
+      <el-dialog :modal-append-to-body='false' :show-close="true" :title="importBox.title" :visible.sync="importBox.show" class="nz-dialog" width="600px" @close="closeDialog">
+        <div class="upload-body" style="height: 170px">
+          <div class="export-box">
+            <span class="export-title">Records</span>
+            <el-radio-group v-model="importBox.record"  size="small">
+              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!batchDeleteObjs.length">{{item.name}}</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="export-box">
+            <span class="export-title">File format</span>
+            <el-radio-group v-model="importBox.format"  size="small">
+              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="item.value!==1">{{item.name}}</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div slot="footer" class="footer">
+          <div class="el-message-box__btns">
+            <button :id="'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="exportData">
+              <span style="text-transform:Capitalize">{{$t('config.operationlog.operations.export')}}</span>
            </button>
-          <button id="alert-msg-exportall" class="el-button el-button--default el-button--small" @click="exportAll">
-            <span>{{$t('overall.exportAll')}}</span>
+            <button :id="'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.close')}}</span>
            </button>
          </div>
+        </div>
      </el-dialog>
    </div>
    <!--删除弹窗-->
@@ -163,7 +179,7 @@ export default {
      dialogText: '',
      url: 'alert/message',
      // 导出相关
-      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1, record: 'all', format: 1 },
      deleteBox: { show: false, ids: '', remark: '', state: 2 },
      // 详情相关
      graphShow: false,
@@ -324,7 +340,17 @@ export default {
          width: 0,
          index: -1
        }
-      }
+      },
+      recordArr: [
+        { name: this.$t('overall.allData'), value: 'all' },
+        { name: this.$t('overall.selectRecords'), value: 'records' },
+        { name: this.$t('overall.current'), value: 'current' }
+      ],
+      formatArr: [
+        { name: 'XLSX', value: 1 },
+        { name: 'CSV', value: 2 },
+        { name: 'JSON', value: 3 }
+      ]
    }
  },
  computed: {
@@ -886,12 +912,21 @@ export default {
    closeDialog () {
      this.importBox.show = false
      this.deleteBox.show = false
+      this.$nextTick(() => {
+        this.importResult = null
+        this.importFileList = []
+        this.importFile = null
+        this.importBox.value = 1
+        this.importBox.record = 'all'
+      })
    },
    dialogClose () {
      this.graphShow = false
    },
    exportCur () {
      const searchLabel = Object.assign({}, this.searchLabel)
+      searchLabel.format = this.importBox.format
+      delete searchLabel.statistics
      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
      this.exportExcel({ ...searchLabel, state: this.state })
      this.closeDialog()
@@ -899,6 +934,8 @@ export default {
    exportAll () {
      const temp = JSON.parse(JSON.stringify(this.searchLabel))
      temp.pageSize = -1
+      delete temp.statistics
+      temp.format = this.importBox.format
      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
      this.exportExcel({ ...temp, state: this.state })
      this.closeDialog()
@@ -1005,7 +1042,43 @@ export default {
        }
      }
    },
-    deleteMessage () {}
+    deleteMessage () {},
+    exportData () {
+      if (this.importBox.record === 'all') {
+        this.exportAll()
+      } else if (this.importBox.record === 'current') {
+        this.exportCur()
+      } else if (this.importBox.record === 'records') {
+        this.exportRecords()
+      }
+    },
+    exportRecords () {
+      const params = JSON.parse(JSON.stringify(this.searchLabel))
+      params.format = this.importBox.format
+      delete params.statistics
+      if (this.params2) {
+        Object.keys(this.params2).forEach(key => {
+          if (params[key]) {
+            if (params[key].prototype.toString.call(val) === '[object Object]') {
+              Object.assign(params[key], this.params2[key])
+            } else if (params[key].prototype.toString.call(val) === '[object Array]') {
+              params[key].concat(this.params2[key])
+            }
+          } else {
+            params[key] = this.params2[key]
+          }
+        })
+      }
+      params.pageSize = -1
+      // if (this.importUrl.indexOf('endpoint') > -1){
+      //   delete params.moduleId
+      // }
+      params.language = localStorage.getItem('nz-language') || 'en'
+      params.format = this.importBox.format
+      params.ids = this.batchDeleteObjs.map(item => item.id).join(',')
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
  },
  destroyed () {
    localStorage.removeItem('alertMessageProjectId')