json/detial消息复制层优化

Code/Fe/src/components/showCopyJsonPop/index.vue

@@ -4,22 +4,27 @@
   
       <!-- 点开查看Json转换后table弹窗 -->
       <el-dialog 
+        top="50px"
         :visible.sync="JsonTableShow"
         :modal-append-to-body="true"
         :append-to-body="true"
         :show-close="true"
         :close-on-click-modal="true"
         :close-on-press-escape="true"
-        :title="'内容详情'"
         width="90%"
         @close="closePop"
       >
-        <el-button 
+        <template #title>
+          内容详情
+          <el-button 
+            size="mini"
             @click="copyJsonHandle()" 
             type="primary" 
-            style="margin-bottom: 10px;float: right;"
-        >复制JSON</el-button>
+            style="margin-right: 30px;float: right;"
+          >复制JSON</el-button>
+        </template>
         <el-table
+          height="calc(100vh - 220px)"
           :data="JsonTableData"
           :border="true"
           style="width: 100%">
@@ -85,7 +90,7 @@
       
       <!-- json复制内容弹窗 -->
       <el-dialog
-        id="copyJsonTextarea_dialog_ref"
+        top="50px"
         :visible.sync="JsonCopyShow"
         :modal-append-to-body="false"
         :append-to-body="true"
@@ -95,6 +100,7 @@
         :title="'JSON详情'"
       >
         <el-input
+          class="copyJsonTextarea"
           ref="copyJsonTextarea_ref"
           type="textarea"
           readonly
@@ -119,6 +125,7 @@
         <umyTable
           :isShowIndex="true"
           :tableBorder="true"
+          :setUTableHeight="240"
           :tableData="detailTableRow.value"
           :tableColumns="detailTableColumns"
           :selectionTable="false"
@@ -207,20 +214,25 @@
         this.JsonTableData = _arr
         this.JsonCopyData = JSON.stringify(_json, null, '\t')//复制使用
       },
+      // 复制后选择框处理
+      copyJsonInputHandle(type){
+        if(type == 'error')this.$message.error('复制失败');
+        if(type == 'success')this.$message.success('复制成功');
+        if(this.$refs.copyJsonTextarea_ref){
+          this.$refs.copyJsonTextarea_ref.focus()
+          this.$refs.copyJsonTextarea_ref.$refs.textarea.scrollTop = 0
+        }
+      },
       // 复制Json按钮
       copyJsonHandle(){
         this.JsonCopyShow = true
         if (navigator.clipboard && window.isSecureContext) {
           navigator.clipboard.writeText(this.JsonCopyData)
             .then(() => {
-              this.$message.success('复制成功');
-              this.$refs.copyJsonTextarea_ref.focus()
-              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+              this.copyJsonInputHandle('success')
             })
             .catch(err => {
-              this.$message.error('复制失败');
-              this.$refs.copyJsonTextarea_ref.focus()
-              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+              this.copyJsonInputHandle('error')
             });
         }else {
           // 创建text area
@@ -236,16 +248,10 @@
               textArea.remove()
           }).then(() => {
             this.$nextTick(()=>{
-              if(this.$refs.copyJsonTextarea_ref){
-                this.$message.success('复制成功');
-                this.$refs.copyJsonTextarea_ref.focus()
-                document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-              }
+              this.copyJsonInputHandle('success')
             })
           },() => {
-            this.$message.error('复制失败');
-            this.$refs.copyJsonTextarea_ref.focus()
-            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+              this.copyJsonInputHandle('error')
           })
         }
         
@@ -264,4 +270,12 @@
       }
     }
   }
-  </script>
+  </script>
+<style lang="scss" scoped>
+::v-deep .copyJsonTextarea{
+  textarea{
+    max-height: calc(100vh - 220px) !important;
+    overflow: auto !important;
+  }
+}
+</style>

Code/Fe/src/components/umyTable/index.vue

@@ -175,7 +175,7 @@
 
     <!-- 点开查看全部弹窗 -->
     <el-dialog 
-      id="copyDetailInput_dialog_ref"
+      top="50px"
       :visible.sync="showDetailDialog"
       width="35%"
       :modal-append-to-body="false"
@@ -186,6 +186,7 @@
       :close-on-press-escape="true"
     >
       <el-input
+        class="copyDetailInput"
         ref="copyDetailInput_ref"
         type="textarea"
         readonly
@@ -609,8 +610,10 @@ export default {
       this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : _row
       this.$emit("showDetailInfo", this.showDetailData);
       this.$nextTick(()=>{
-        this.$refs.copyDetailInput_ref.focus()
-        document.getElementById('copyDetailInput_dialog_ref').scrollTop = 0
+        if(this.$refs.copyDetailInput_ref){
+          this.$refs.copyDetailInput_ref.focus()
+          this.$refs.copyDetailInput_ref.$refs.textarea.scrollTop = 0
+        }
       })
     },
     closeJsonPop(){
@@ -765,4 +768,10 @@ span {
 .itemSpan{
   white-space: nowrap !important
 }
+::v-deep .copyDetailInput{
+  textarea{
+    max-height: calc(100vh - 220px) !important;
+    overflow: auto !important;
+  }
+}
 </style>