添加复制json功能

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

@@ -345,6 +345,26 @@
       {{ showDetailData ? showDetailData + "" : showDetailData }}
     </el-dialog>
 
+    <!-- json弹窗（复制的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"
@@ -369,7 +394,7 @@
         >
           <template slot-scope="scope">
             <!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 -->
-            <span v-if="(scope.row.name).toUpperCase != 'DETAILS'">{{scope.row.value}}</span>
+            <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
             <el-table
               v-else
               height="300"
@@ -502,6 +527,8 @@ export default {
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
       showJsonData:null,//点开查看Json的数据
+      showJsonData_str:null,//复制的Json字符串
+      showJsonCopy:false,//复制json的Dialog显隐控制
     };
   },
   computed: {
@@ -795,7 +822,7 @@ export default {
           // 如果是数组
           if(Array.isArray(_json[item])){
             //  如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式
-            let _value = (item).toUpperCase == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
+            let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
             _arr.push({name:item,value:_value})
           }
           // 如果是对象
@@ -812,8 +839,29 @@ 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
+      // this.$refs.copyJsonTextarea_ref.focus()
+      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);