复制功能

PC/InterFace.Dash/src/components/umyTable/index.vue

@@ -345,6 +345,26 @@
       {{ showDetailData ? showDetailData + "" : showDetailData }}
     </el-dialog>
 
+    <!-- json弹窗 -->
+    <el-dialog
+      :visible.sync="showJsonCopy"
+      :modal-append-to-body="false"
+      :append-to-body="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      :title="'JSON详情'"
+    >
+      <el-input
+        ref="copyJsonTextarea_ref"
+        type="textarea"
+        readonly
+        autosize
+        placeholder="请输入内容"
+        v-model="showJsonData_str">
+      </el-input>
+    </el-dialog>
+
     <!-- 点开查看Json转换后table弹窗 -->
     <el-dialog 
       :visible.sync="showJsonDialog"
@@ -355,6 +375,11 @@
       :close-on-press-escape="true"
       :title="'内容详情'"
     >
+      <el-button 
+        @click="copyJsonHandle()" 
+        type="primary" 
+        style="margin-bottom: 10px;float: right;"
+      >复制JSON</el-button>
       <el-table
         :data="showJsonData"
         :border="true"
@@ -368,7 +393,6 @@
           label="值"
         >
           <template slot-scope="scope">
-            {{ scope.row.name }}
             <!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 -->
             <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
             <el-table
@@ -503,6 +527,8 @@ export default {
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
       showJsonData:null,//点开查看Json的数据
+      showJsonData_str:null,//复制的Json字符串
+      showJsonCopy:false,//复制json的Dialog显隐控制
     };
   },
   computed: {
@@ -813,8 +839,28 @@ export default {
         }
       }
       this.showJsonData = _arr
+      this.showJsonData_str = JSON.stringify(JSON.parse(JSON.stringify(this.showJsonData)), null, '\t')
       this.$emit("showJsonTable", row);
     },
+    // 复制Json按钮
+    copyJsonHandle(){
+      this.showJsonCopy = true
+      navigator.clipboard.writeText(this.showJsonData_str)
+        .then(() => {
+          this.$message.success('复制成功');
+        })
+        .catch(err => {
+          this.$message.error('复制失败');
+        });
+      this.$nextTick(()=>{
+        if(this.$refs.copyJsonTextarea_ref){
+          this.$refs.copyJsonTextarea_ref.focus()
+          // this.$nextTick(()=>{
+          //   this.$refs.copyJsonTextarea_ref.scrollTop = 0
+          // })
+        }
+      })
+    },
     //点击按钮打开自定义弹窗
     buttonClick(row, index, label) {
       this.$emit("buttonClick", row, index, label);