查看详情json转义更改

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

@@ -90,24 +90,25 @@
           @click="showDetailInfo(scope.row[item.prop],'time')"
           style="cursor: pointer;"
           :title="'点击查看详情'"
-          class="showDetailHover"
+          class="showDetailHover itemSpan"
         >
           {{ scope.row[item.prop] | formatDate }}
         </span>
         <!-- 枚举 -->
-        <span v-else-if="item.isEnums">
+        <span v-else-if="item.isEnums" class="itemSpan">
           {{ initApiEnumList(item,scope.row[item.prop]) }}
         </span>
         <!-- 布尔 -->
-        <span v-else-if="item.apiBaseType == 'boolean'">
+        <span v-else-if="item.apiBaseType == 'boolean'" class="itemSpan">
           {{ scope.row[item.prop] ? '是' : '否' }}
         </span>
         <!-- 数值 -->
-        <span v-else-if="item.apiBaseType == 'number'">
+        <span v-else-if="item.apiBaseType == 'number'" class="itemSpan">
           {{ scope.row[item.prop] }}
         </span>
         <!-- 点击可出详情 | 点击可点出json （目前已知String|Guid）-->
         <span v-else
+          class="itemSpan"  
           @click="showTypeHandle(initApiOtherType(scope.row[item.prop])[1],scope.row[item.prop])"
           :style="initApiOtherType(scope.row[item.prop])[1] != 'show' ? 'cursor: pointer' : ''"
           :title="'点击查看详情'"
@@ -131,7 +132,14 @@
       :close-on-click-modal="true"
       :close-on-press-escape="true"
     >
-      {{ showDetailData ? showDetailData + "" : showDetailData }}
+      <el-input
+        type="textarea"
+        readonly
+        autosize
+        resize="none"
+        v-model="showDetailData">
+      </el-input>
+      <!-- {{ showDetailData ? showDetailData + "" : showDetailData }} -->
     </el-dialog>
 
     <!-- json弹窗 -->
@@ -150,7 +158,7 @@
         type="textarea"
         readonly
         autosize
-        placeholder="请输入内容"
+        resize="none"
         v-model="showJsonData_str">
       </el-input>
     </el-dialog>
@@ -164,12 +172,28 @@
       :close-on-click-modal="true"
       :close-on-press-escape="true"
       :title="'内容详情'"
+      width="80%"
     >
       <el-button 
         @click="copyJsonHandle()" 
         type="primary" 
         style="margin-bottom: 10px;float: right;"
       >复制JSON</el-button>
+      <!-- <el-table
+        :data="showJsonData_str"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column
+          v-for="(item,key) in showJsonHeader"
+        >
+          <template #header>
+            <span>{{ item }}</span>
+          </template>
+          <template slot-scope="scope">
+          </template>
+        </el-table-column>
+      </el-table> -->
       <el-table
         :data="showJsonData"
         :border="true"
@@ -186,6 +210,31 @@
             <!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 -->
             <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
             <el-table
+              v-else
+              :data="scope.row.value"
+              stripe
+              :border="true"
+              style="width: 100%"
+            >
+              <el-table-column
+                v-for="(head) in showJsonHeader"
+                min-width="120"
+              >
+                <template #header>
+                  <span :title="head">{{ head }}</span>
+                </template>
+                <template slot-scope="scope" v-for="item in scope.row.value">
+                  <div v-if="typeof item[head] == 'object'">
+                    <div v-for="(o,o_key) in item[head]">
+                      {{ o_key }}：{{ o }}
+                      <div style="border-bottom: dashed 1px #ddd;"></div>
+                    </div>
+                  </div>
+                  <div v-else>{{ item[head] }}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <!-- <el-table
               v-else
               height="300"
               :data="scope.row.value"
@@ -199,7 +248,7 @@
                   label="子值"
                   prop="value"
                 ></el-table-column>
-            </el-table>
+            </el-table> -->
           </template>
         </el-table-column>
       </el-table>
@@ -326,6 +375,7 @@ export default {
       showDetailDialog:false,//点开查看全部弹窗
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
+      showJsonHeader:null,//点开查看Json的header
       showJsonData:null,//点开查看Json的数据
       showJsonData_str:null,//复制的Json字符串
       showJsonCopy:false,//复制json的Dialog显隐控制
@@ -388,6 +438,10 @@ export default {
       let _height = height || this.setUTableHeight
       let _app_height = document.getElementsByClassName('app-main')[0].clientHeight
       this.uTableHeight = Number(_app_height) - Number(_height)
+      this.$nextTick(() => {
+        this.$refs.multipleTable.doLayout()
+        this.$refs.multipleTable.$forceUpdate()
+      });
     },
     // 获取表格高度 误删 业务当中有用
     getTableHeight(){
@@ -604,6 +658,7 @@ export default {
     showJsonTable(row){
       this.showJsonDialog = true
       let _json = eval('(' + row + ')')
+      this.showJsonData_str = JSON.stringify(_json, null, '\t')//复制使用
       let _arr = []
       let __initJson = (data) => {
         let _init = []
@@ -622,7 +677,12 @@ 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(",")
+            this.showJsonHeader = []
+            for(let h in _json[item][0]){
+              this.showJsonHeader.push(h)
+            }
+            let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",")
             _arr.push({name:item,value:_value})
           }
           // 如果是对象
@@ -639,7 +699,6 @@ export default {
         }
       }
       this.showJsonData = _arr
-      this.showJsonData_str = JSON.stringify(JSON.parse(JSON.stringify(this.showJsonData)), null, '\t')
       this.$emit("showJsonTable", row);
     },
     // 复制Json按钮
@@ -798,4 +857,8 @@ span {
 .u-table::before {
   height: 0px;
 }
+
+.itemSpan{
+  white-space: nowrap !important
+}
 </style>