Browse Source

json/detial消息复制层优化

noToken
安虹睿 1 year ago
parent
commit
724184eb29
  1. 4
      PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue
  2. 54
      PC/UI.WinIn.FasterZ.Store/src/components/showCopyJsonPop/index.vue
  3. 15
      PC/UI.WinIn.FasterZ.Store/src/components/umyTable/index.vue

4
PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue

@ -271,8 +271,8 @@ export default {
}
}
</script>
<style lang="scss">
.copyJsonTextarea{
<style lang="scss" scoped>
::v-deep .copyJsonTextarea{
textarea{
max-height: calc(100vh - 220px) !important;
overflow: auto !important;

54
PC/UI.WinIn.FasterZ.Store/src/components/showCopyJsonPop/index.vue

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

15
PC/UI.WinIn.FasterZ.Store/src/components/umyTable/index.vue

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