Browse Source

json/detial消息复制层优化

master
安虹睿 1 year ago
parent
commit
8d3cd7f7bd
  1. 48
      Code/Fe/src/components/showCopyJsonPop/index.vue
  2. 13
      Code/Fe/src/components/umyTable/index.vue

48
Code/Fe/src/components/showCopyJsonPop/index.vue

@ -4,22 +4,27 @@
<!-- 点开查看Json转换后table弹窗 --> <!-- 点开查看Json转换后table弹窗 -->
<el-dialog <el-dialog
top="50px"
:visible.sync="JsonTableShow" :visible.sync="JsonTableShow"
:modal-append-to-body="true" :modal-append-to-body="true"
:append-to-body="true" :append-to-body="true"
:show-close="true" :show-close="true"
:close-on-click-modal="true" :close-on-click-modal="true"
:close-on-press-escape="true" :close-on-press-escape="true"
:title="'内容详情'"
width="90%" width="90%"
@close="closePop" @close="closePop"
> >
<template #title>
内容详情
<el-button <el-button
size="mini"
@click="copyJsonHandle()" @click="copyJsonHandle()"
type="primary" type="primary"
style="margin-bottom: 10px;float: right;" style="margin-right: 30px;float: right;"
>复制JSON</el-button> >复制JSON</el-button>
</template>
<el-table <el-table
height="calc(100vh - 220px)"
:data="JsonTableData" :data="JsonTableData"
:border="true" :border="true"
style="width: 100%"> style="width: 100%">
@ -85,7 +90,7 @@
<!-- json复制内容弹窗 --> <!-- json复制内容弹窗 -->
<el-dialog <el-dialog
id="copyJsonTextarea_dialog_ref" top="50px"
:visible.sync="JsonCopyShow" :visible.sync="JsonCopyShow"
:modal-append-to-body="false" :modal-append-to-body="false"
:append-to-body="true" :append-to-body="true"
@ -95,6 +100,7 @@
:title="'JSON详情'" :title="'JSON详情'"
> >
<el-input <el-input
class="copyJsonTextarea"
ref="copyJsonTextarea_ref" ref="copyJsonTextarea_ref"
type="textarea" type="textarea"
readonly readonly
@ -119,6 +125,7 @@
<umyTable <umyTable
:isShowIndex="true" :isShowIndex="true"
:tableBorder="true" :tableBorder="true"
:setUTableHeight="240"
:tableData="detailTableRow.value" :tableData="detailTableRow.value"
:tableColumns="detailTableColumns" :tableColumns="detailTableColumns"
:selectionTable="false" :selectionTable="false"
@ -207,20 +214,25 @@
this.JsonTableData = _arr this.JsonTableData = _arr
this.JsonCopyData = JSON.stringify(_json, null, '\t')//使 this.JsonCopyData = JSON.stringify(_json, null, '\t')//使
}, },
//
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
}
},
// Json // Json
copyJsonHandle(){ copyJsonHandle(){
this.JsonCopyShow = true this.JsonCopyShow = true
if (navigator.clipboard && window.isSecureContext) { if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(this.JsonCopyData) navigator.clipboard.writeText(this.JsonCopyData)
.then(() => { .then(() => {
this.$message.success('复制成功'); this.copyJsonInputHandle('success')
this.$refs.copyJsonTextarea_ref.focus()
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
}) })
.catch(err => { .catch(err => {
this.$message.error('复制失败'); this.copyJsonInputHandle('error')
this.$refs.copyJsonTextarea_ref.focus()
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
}); });
}else { }else {
// text area // text area
@ -236,16 +248,10 @@
textArea.remove() textArea.remove()
}).then(() => { }).then(() => {
this.$nextTick(()=>{ this.$nextTick(()=>{
if(this.$refs.copyJsonTextarea_ref){ this.copyJsonInputHandle('success')
this.$message.success('复制成功');
this.$refs.copyJsonTextarea_ref.focus()
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
}
}) })
},() => { },() => {
this.$message.error('复制失败'); this.copyJsonInputHandle('error')
this.$refs.copyJsonTextarea_ref.focus()
document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
}) })
} }
@ -265,3 +271,11 @@
} }
} }
</script> </script>
<style lang="scss" scoped>
::v-deep .copyJsonTextarea{
textarea{
max-height: calc(100vh - 220px) !important;
overflow: auto !important;
}
}
</style>

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

@ -175,7 +175,7 @@
<!-- 点开查看全部弹窗 --> <!-- 点开查看全部弹窗 -->
<el-dialog <el-dialog
id="copyDetailInput_dialog_ref" top="50px"
:visible.sync="showDetailDialog" :visible.sync="showDetailDialog"
width="35%" width="35%"
:modal-append-to-body="false" :modal-append-to-body="false"
@ -186,6 +186,7 @@
:close-on-press-escape="true" :close-on-press-escape="true"
> >
<el-input <el-input
class="copyDetailInput"
ref="copyDetailInput_ref" ref="copyDetailInput_ref"
type="textarea" type="textarea"
readonly readonly
@ -609,8 +610,10 @@ export default {
this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : _row this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : _row
this.$emit("showDetailInfo", this.showDetailData); this.$emit("showDetailInfo", this.showDetailData);
this.$nextTick(()=>{ this.$nextTick(()=>{
if(this.$refs.copyDetailInput_ref){
this.$refs.copyDetailInput_ref.focus() this.$refs.copyDetailInput_ref.focus()
document.getElementById('copyDetailInput_dialog_ref').scrollTop = 0 this.$refs.copyDetailInput_ref.$refs.textarea.scrollTop = 0
}
}) })
}, },
closeJsonPop(){ closeJsonPop(){
@ -765,4 +768,10 @@ span {
.itemSpan{ .itemSpan{
white-space: nowrap !important white-space: nowrap !important
} }
::v-deep .copyDetailInput{
textarea{
max-height: calc(100vh - 220px) !important;
overflow: auto !important;
}
}
</style> </style>
Loading…
Cancel
Save