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