3 changed files with 600 additions and 558 deletions
@ -0,0 +1,267 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：查看json及复制 --> |
||||
|
<div class="showCopyJsonPop"> |
||||
|
|
||||
|
<!-- 点开查看Json转换后table弹窗 --> |
||||
|
<el-dialog |
||||
|
: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 |
||||
|
@click="copyJsonHandle()" |
||||
|
type="primary" |
||||
|
style="margin-bottom: 10px;float: right;" |
||||
|
>复制JSON</el-button> |
||||
|
<el-table |
||||
|
:data="JsonTableData" |
||||
|
:border="true" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
width="220" |
||||
|
label="属性" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.name }} |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
v-if="(scope.row.name).toUpperCase() == 'DETAILS'" |
||||
|
size="mini" |
||||
|
style="margin-left: 20px;" |
||||
|
@click="showDetailTableHandle(scope.row)" |
||||
|
>查看详情</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="值" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 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%" |
||||
|
height="300" |
||||
|
> |
||||
|
<el-table-column |
||||
|
label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
width="50"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(head,h_key) in detailTableHeader" |
||||
|
:key="h_key" |
||||
|
min-width="120" |
||||
|
> |
||||
|
<template #header> |
||||
|
<span :title="head">{{ head }}</span> |
||||
|
</template> |
||||
|
<template slot-scope="scope2"> |
||||
|
<div v-if="typeof scope2.row[head] == 'object'"> |
||||
|
<div v-for="(o,o_key) in scope2.row[head]"> |
||||
|
{{ o_key }}：{{ o }} |
||||
|
<div style="border-bottom: dashed 1px #ddd;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else>{{ scope2.row[head] }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- json复制内容弹窗 --> |
||||
|
<el-dialog |
||||
|
id="copyJsonTextarea_dialog_ref" |
||||
|
:visible.sync="JsonCopyShow" |
||||
|
: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 |
||||
|
resize="none" |
||||
|
v-model="JsonCopyData" |
||||
|
></el-input> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- details的table --> |
||||
|
<el-dialog |
||||
|
width="86%" |
||||
|
v-if="detailTableRow" |
||||
|
:visible.sync="detailsTableShow" |
||||
|
:modal-append-to-body="true" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:title="detailTableRow.name+' 详情'" |
||||
|
> |
||||
|
<umyTable |
||||
|
:isShowIndex="true" |
||||
|
:tableBorder="true" |
||||
|
:tableData="detailTableRow.value" |
||||
|
:tableColumns="detailTableColumns" |
||||
|
:selectionTable="false" |
||||
|
></umyTable> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import { tableMixins } from "@/mixins/TableMixins" |
||||
|
export default { |
||||
|
name:"showCopyJsonPop", |
||||
|
mixins:[ LoadingMixins,tableMixins ], |
||||
|
props: { |
||||
|
// Json数据 |
||||
|
JsonData:{ |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
JsonTableShow:true,//点开查看Json转换后table弹窗 |
||||
|
JsonTableData:null,//表格转义的json数据 |
||||
|
JsonCopyData:null,//复制的Json字符串 |
||||
|
JsonCopyShow:false,//复制json的Dialog显隐控制 |
||||
|
detailTableHeader:null,//details表格的Header |
||||
|
detailTableRow:null,//details的相关信息 |
||||
|
detailsTableShow:false,//details的详情 |
||||
|
detailTableColumns:false,//details的详情header表头 |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initJsonData() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭整个弹窗 |
||||
|
closePop() { |
||||
|
this.JsonTableShow = false |
||||
|
this.$emit("closePop") |
||||
|
}, |
||||
|
// json数据转义 |
||||
|
initJsonData(){ |
||||
|
let _arr = [] |
||||
|
let __initJson = (data) => { |
||||
|
let _init = [] |
||||
|
for(let item in data){ |
||||
|
_init.push({name:item,value:data[item]}) |
||||
|
} |
||||
|
return _init |
||||
|
} |
||||
|
let _json = this.JsonData |
||||
|
for(let item in _json){ |
||||
|
// 直接输出 |
||||
|
if(!_json[item]){ |
||||
|
_arr.push({name:item,value:_json[item]}) |
||||
|
}else{ |
||||
|
if(typeof _json[item] != 'object'){ |
||||
|
_arr.push({name:item,value:_json[item] + ""}) |
||||
|
}else{ |
||||
|
// 如果是数组 |
||||
|
if(Array.isArray(_json[item])){ |
||||
|
// 如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 |
||||
|
// let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",") |
||||
|
this.detailTableHeader = [] |
||||
|
for(let h in _json[item][0]){ |
||||
|
this.detailTableHeader.push(h) |
||||
|
} |
||||
|
let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",") |
||||
|
_arr.push({name:item,value:_value}) |
||||
|
} |
||||
|
// 如果是对象 |
||||
|
else{ |
||||
|
let _obj_arr = __initJson(_json[item]) |
||||
|
// 对象有数据 |
||||
|
if(_obj_arr.length > 0){ |
||||
|
_arr = [..._obj_arr] |
||||
|
}else{ |
||||
|
// 空对象 |
||||
|
_arr.push({name:item,value:""}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.JsonTableData = _arr |
||||
|
this.JsonCopyData = JSON.stringify(_json, null, '\t')//复制使用 |
||||
|
}, |
||||
|
// 复制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 |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
this.$message.error('复制失败'); |
||||
|
this.$refs.copyJsonTextarea_ref.focus() |
||||
|
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0 |
||||
|
}); |
||||
|
}else { |
||||
|
// 创建text area |
||||
|
const textArea = document.createElement('textarea') |
||||
|
textArea.value = this.JsonCopyData |
||||
|
// 使text area不在viewport，同时设置不可见 |
||||
|
document.body.appendChild(textArea) |
||||
|
textArea.focus() |
||||
|
textArea.select() |
||||
|
return new Promise((resolve, reject) => { |
||||
|
// 执行复制命令并移除文本框 |
||||
|
document.execCommand('copy') ? resolve() : reject(new Error('出错了')) |
||||
|
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.$message.error('复制失败'); |
||||
|
this.$refs.copyJsonTextarea_ref.focus() |
||||
|
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0 |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// detail的table详情 |
||||
|
showDetailTableHandle(row){ |
||||
|
this.detailTableRow = row |
||||
|
this.detailTableColumns = [] |
||||
|
this.detailTableHeader.forEach(item=>{ |
||||
|
this.detailTableColumns.push({ |
||||
|
prop:item, |
||||
|
label:item |
||||
|
}) |
||||
|
}) |
||||
|
this.detailsTableShow = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue