json/detial消息复制层优化

PC/InterFace.Dash/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;"
+          style="margin-right: 30px;float: right;"
-      >复制JSON</el-button>
+        >复制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 @@ export default {
       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.copyJsonInputHandle('success')
-            this.$refs.copyJsonTextarea_ref.focus()
-            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
           })
           .catch(err => {
-            this.$message.error('复制失败');
+            this.copyJsonInputHandle('error')
-            this.$refs.copyJsonTextarea_ref.focus()
-            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
           });
       }else {
         // 创建text area
@@ -236,16 +248,10 @@ export default {
             textArea.remove()
         }).then(() => {
           this.$nextTick(()=>{
-            if(this.$refs.copyJsonTextarea_ref){
+            this.copyJsonInputHandle('success')
-              this.$message.success('复制成功');
-              this.$refs.copyJsonTextarea_ref.focus()
-              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-            }
           })
         },() => {
-          this.$message.error('复制失败');
+            this.copyJsonInputHandle('error')
-          this.$refs.copyJsonTextarea_ref.focus()
-          document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
         })
       }
       
@@ -264,4 +270,12 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang="scss">
+.copyJsonTextarea{
+  textarea{
+    max-height: calc(100vh - 220px) !important;
+    overflow: auto !important;
+  }
+}
+</style>

PC/InterFace.Dash/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()
+        if(this.$refs.copyDetailInput_ref){
-        document.getElementById('copyDetailInput_dialog_ref').scrollTop = 0
+          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>