4 changed files with 190 additions and 13 deletions
@ -0,0 +1,156 @@ |
|||
<template> |
|||
<!-- 组件功能：查看json及复制 --> |
|||
<div class="arrayTableDialog"> |
|||
|
|||
<!-- 点开查看Json转换后table弹窗 --> |
|||
<el-dialog |
|||
top="50px" |
|||
: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" |
|||
width="90%" |
|||
@close="closePop" |
|||
> |
|||
<template #title> |
|||
内容详情 |
|||
<el-button |
|||
size="mini" |
|||
@click="copyJsonHandle()" |
|||
type="primary" |
|||
style="margin-right: 30px;float: right;" |
|||
>复制数据</el-button> |
|||
</template> |
|||
<umyTable |
|||
:isShowIndex="true" |
|||
:tableBorder="true" |
|||
:setUTableHeight="170" |
|||
:row-key="null" |
|||
:tableData="arrTableData" |
|||
:tableColumns="arrTableColumns" |
|||
:selectionTable="false" |
|||
></umyTable> |
|||
</el-dialog> |
|||
|
|||
<!-- json复制内容弹窗 --> |
|||
<el-dialog |
|||
top="50px" |
|||
: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="'数据详情'" |
|||
> |
|||
<el-input |
|||
class="copyJsonTextarea" |
|||
ref="copyJsonTextarea_ref" |
|||
type="textarea" |
|||
readonly |
|||
autosize |
|||
resize="none" |
|||
v-model="JsonCopyData" |
|||
></el-input> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
|||
import { tableMixins } from "@/mixins/TableMixins" |
|||
export default { |
|||
name:"arrayTableDialog", |
|||
mixins:[ LoadingMixins,tableMixins ], |
|||
props: { |
|||
// Json数据 |
|||
arrTableData:{ |
|||
type: Array, |
|||
default: null, |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
JsonTableShow:true,//点开查看Json转换后table弹窗 |
|||
JsonTableData:null,//表格转义的json数据 |
|||
JsonCopyData:null,//复制的Json字符串 |
|||
JsonCopyShow:false,//复制数据的Dialog显隐控制 |
|||
arrTableColumns:null,//表头 |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
// 数据转义 |
|||
initData(){ |
|||
// 列头转义 |
|||
this.arrTableColumns = [] |
|||
for(let i in this.arrTableData[0]){ |
|||
this.arrTableColumns.push({ |
|||
prop:i, |
|||
label:i |
|||
}) |
|||
} |
|||
// 复制数据处理 |
|||
this.JsonCopyData = JSON.stringify(this.arrTableData, null, '\t') |
|||
}, |
|||
// 关闭整个弹窗 |
|||
closePop() { |
|||
this.JsonTableShow = false |
|||
this.$emit("closePop") |
|||
}, |
|||
// 复制后选择框处理 |
|||
copyJsonInputHandle(type){ |
|||
if(type == 'error')this.$message.error('复制失败'); |
|||
if(type == 'success')this.$message.success('复制成功'); |
|||
if(this.$refs.copyJsonTextarea_ref){ |
|||
this.$refs.copyJsonTextarea_ref.focus() |
|||
this.$refs.copyJsonTextarea_ref.$refs.textarea.scrollTop = 0 |
|||
} |
|||
}, |
|||
// 复制数据按钮 |
|||
copyJsonHandle(){ |
|||
this.JsonCopyShow = true |
|||
if (navigator.clipboard && window.isSecureContext) { |
|||
navigator.clipboard.writeText(this.JsonCopyData) |
|||
.then(() => { |
|||
this.copyJsonInputHandle('success') |
|||
}) |
|||
.catch(err => { |
|||
this.copyJsonInputHandle('error') |
|||
}); |
|||
}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(()=>{ |
|||
this.copyJsonInputHandle('success') |
|||
}) |
|||
},() => { |
|||
this.copyJsonInputHandle('error') |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .copyJsonTextarea{ |
|||
textarea{ |
|||
max-height: calc(100vh - 220px) !important; |
|||
overflow: auto !important; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue