NEZ-1965 feat : 列表页面内容复制功能

This commit is contained in:
likexuan
2022-06-23 13:40:20 +08:00
parent 6507b23257
commit 99595a2dab
15 changed files with 158 additions and 61 deletions

View File

@@ -451,16 +451,19 @@ textarea {
} }
} }
.document-copy-block { .document-copy-block {
padding-right: 15px; display: flex;
position: relative; flex-wrap: nowrap;
justify-content: start;
}
.document-copy-text{
margin-right: 10px;
} }
.document-copy-block:hover i { .document-copy-block:hover i.nz-icon-override {
display: block !important; visibility: visible !important;
} }
.document-copy-block i { .document-copy-block i.nz-icon-override {
position: absolute; display: flex;
top: calc((100% - 20px)/2); align-items: center;
right: 0;
transform: scale(0.95); transform: scale(0.95);
} }

View File

@@ -119,6 +119,18 @@
</div> </div>
</el-popover> </el-popover>
</template> </template>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<template v-else-if="item.prop === 'expr'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
</div>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span> <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template> <template v-else>-</template>

View File

@@ -96,6 +96,12 @@
<template v-else-if="item.prop === 'startAt'"> <template v-else-if="item.prop === 'startAt'">
{{ utcTimeToTimezoneStr(scope.row[item.prop]) }} {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
</template> </template>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{ <span v-else-if="scope.row[item.prop]">{{
scope.row[item.prop] || "-" scope.row[item.prop] || "-"
}}</span> }}</span>

View File

@@ -40,14 +40,14 @@
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block"> <div style="cursor:text" class="document-copy-block">
{{scope.row.name ? scope.row.name : '-'}} <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.name)"></i> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div> </div>
</template> </template>
<template v-else-if="item.prop === 'manageIp'"> <template v-else-if="item.prop === 'manageIp'">
<div style="cursor:text" class="document-copy-block"> <div style="cursor:text" class="document-copy-block">
{{scope.row.manageIp ? scope.row.manageIp : '-'}} <span class="document-copy-text">{{scope.row.manageIp ? scope.row.manageIp : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.manageIp)"></i> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.manageIp)"></i>
</div> </div>
</template> </template>
<template v-else-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template> <template v-else-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
@@ -105,8 +105,8 @@
</template> </template>
<template v-else-if="item.prop === 'sn'"> <template v-else-if="item.prop === 'sn'">
<div style="cursor:text" class="document-copy-block"> <div style="cursor:text" class="document-copy-block">
{{scope.row.sn ? scope.row.sn : '-'}} <span class="document-copy-text">{{scope.row.sn ? scope.row.sn : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.sn)"></i> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.sn)"></i>
</div> </div>
</template> </template>
<template v-else-if="item.prop === 'talon'"> <template v-else-if="item.prop === 'talon'">
@@ -185,7 +185,6 @@
</template> </template>
<script> <script>
import mainMixinFun from '@/components/common/mixin/mainMixinFun'
import table from '@/components/common/mixin/table' import table from '@/components/common/mixin/table'
import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools' import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
// import bus from '@/libs/bus' // import bus from '@/libs/bus'
@@ -194,7 +193,7 @@ import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin' import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default { export default {
name: 'assetTable', name: 'assetTable',
mixins: [table, alertLabelMixin, mainMixinFun], mixins: [table, alertLabelMixin],
components: { components: {
alertLabel: alertLabel, alertLabel: alertLabel,
alertDaysInfo alertDaysInfo

View File

@@ -50,6 +50,18 @@
</div> </div>
</el-popover> </el-popover>
</span> </span>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<template v-else-if="item.prop === 'host'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>

View File

@@ -41,6 +41,12 @@
<i :class="typeIcon(scope.row)"/> <i :class="typeIcon(scope.row)"/>
{{findTypeLabel(scope.row)}} {{findTypeLabel(scope.row)}}
</span> </span>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>

View File

@@ -42,10 +42,10 @@
<template v-else>-</template> <template v-else>-</template>
</template> </template>
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<template v-if="scope.row.name"> <div style="cursor:text" class="document-copy-block">
{{scope.row.name}} <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
</template> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
<template v-else>-</template> </div>
</template> </template>
<template v-if="item.prop === 'type'"> <template v-if="item.prop === 'type'">
<template v-if="scope.row.type"> <template v-if="scope.row.type">

View File

@@ -38,39 +38,46 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
{{scope.row[item.prop]}} <div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop]}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'type'"> <template v-else-if="item.prop === 'type'">
{{scope.row.module.type}} {{scope.row.module.type}}
</template> </template>
<template v-else-if="item.prop === 'project'"> <template v-else-if="item.prop === 'project'">
<span <div style="cursor:text" class="document-copy-block">
class="pointer" <span class="pointer document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)" @mouseleave="labelHover(scope.row, item.prop, false,true)">
> {{scope.row[item.prop].name}}
{{scope.row[item.prop].name}} </span>
</span> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'module'"> <template v-else-if="item.prop === 'module'">
<span <div style="cursor:text" class="document-copy-block">
class="pointer" <span class="pointer document-copy-text"
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
@mouseleave="labelHover(scope.row, item.prop, false,true)" @mouseleave="labelHover(scope.row, item.prop, false,true)">
> <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/> {{scope.row[item.prop].name}}
{{scope.row[item.prop].name}} </span>
</span> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'asset'"> <template v-else-if="item.prop === 'asset'">
<span <div style="cursor:text" class="document-copy-block">
class="pointer" <span
@mouseenter="labelHover(scope.row, item.prop, true,true, $event)" class="pointer document-copy-text"
@mouseleave="labelHover(scope.row, item.prop, false,true)" @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
> @mouseleave="labelHover(scope.row, item.prop, false,true)">
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
{{scope.row.asset.name}} {{scope.row.asset.name}}
</span> </span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.asset.name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'alerts'"> <template v-else-if="item.prop === 'alerts'">
<span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)"> <span style="cursor: pointer" @click="showBottomBox('endpointAlertMessage', scope.row)">

View File

@@ -35,7 +35,19 @@
<div class="col-resize-area"></div> <div class="col-resize-area"></div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span> <template v-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<template v-else-if="item.prop === 'expression'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
</el-table-column> </el-table-column>

View File

@@ -35,13 +35,22 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop === 'dc'">{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span> <span v-if="item.prop === 'dc'">{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
<span v-else-if="item.prop === 'CIDR'"> <template v-else-if="item.prop === 'CIDR'">
<template>{{ scope.row.addr }}/{{scope.row.mask}}</template> <div style="cursor:text" class="document-copy-block">
</span> <span class="document-copy-text">{{ scope.row.addr }}/{{scope.row.mask}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.addr + '/' + scope.row.mask)"></i>
</div>
</template>
<span v-else-if="item.prop === 'type'"> <span v-else-if="item.prop === 'type'">
<template v-if="scope.row.type === 4">IPV4</template> <template v-if="scope.row.type === 4">IPV4</template>
<template v-else-if="scope.row.type === 6">IPV6</template> <template v-else-if="scope.row.type === 6">IPV6</template>
</span> </span>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else>-</span> <span v-else>-</span>
</template> </template>

View File

@@ -37,8 +37,17 @@
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template> <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
<template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" > <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
<span class="link" @click="downloadMib(scope.row)">{{scope.row[item.prop]}}</span> <div style="cursor:text" class="document-copy-block">
<span class="link document-copy-text" @click="downloadMib(scope.row)">{{scope.row[item.prop]}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'name'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template>
<template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" > <template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
<div style="height: 100%"> <div style="height: 100%">
<div style="height: 100%; overflow: auto;" v-if="scope.row['modelsDetail']"> <div style="height: 100%; overflow: auto;" v-if="scope.row['modelsDetail']">

View File

@@ -37,13 +37,19 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
{{scope.row[item.prop]}} <div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop]}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'type'"> <template v-else-if="item.prop === 'type'">
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</template> </template>
<template v-else-if="item.prop === 'project'"> <template v-else-if="item.prop === 'project'">
{{scope.row[item.prop].name}} <div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop].name}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'endpointNum'"> <template v-else-if="item.prop === 'endpointNum'">
<span class="endpoint-num" @click="showBottomBox('endpoint', scope.row)"> <span class="endpoint-num" @click="showBottomBox('endpoint', scope.row)">

View File

@@ -38,9 +38,10 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<span class=""> <div style="cursor:text" class="document-copy-block">
{{scope.row[item.prop]}} <span class="document-copy-text">{{scope.row[item.prop]}}</span>
</span> <i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div>
</template> </template>
<template v-else-if="item.prop === 'moduleNum'" > <template v-else-if="item.prop === 'moduleNum'" >
<span class="module-num" @click="jumpModule(scope.row)"> <span class="module-num" @click="jumpModule(scope.row)">

View File

@@ -37,10 +37,16 @@
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<template v-if="scope.row.i18n"> <template v-if="scope.row.i18n">
<span>{{$t(scope.row.i18n)}}</span> <div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{$t(scope.row.i18n)}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy($t(scope.row.i18n))"></i>
</div>
</template> </template>
<template v-else-if="scope.row.name"> <template v-else-if="scope.row.name">
<span>{{scope.row.name}}</span> <div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row.name}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy($t(scope.row.name))"></i>
</div>
</template> </template>
</template> </template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>

View File

@@ -38,11 +38,12 @@
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<div class="user-name-td" :class="{'margin-l-10': !scope.row.online}" <div style="cursor:text" class="document-copy-block">
@mouseenter="labelHover(scope.row, 'user', true, false, $event)" <div class="user-name-td document-copy-text" :class="{'margin-l-10': !scope.row.online}"
@mouseleave="labelHover(scope.row, 'user', false, false,)"> @mouseenter="labelHover(scope.row, 'user', true, false, $event)"
<i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/> @mouseleave="labelHover(scope.row, 'user', false, false,)">
<div> <i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/>
<div>
<div class="flex-align-center"> <div class="flex-align-center">
<span class="user-name-top">{{scope.row[item.prop]}}</span> <span class="user-name-top">{{scope.row[item.prop]}}</span>
<el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag> <el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
@@ -51,6 +52,8 @@
@{{scope.row.username}} @{{scope.row.username}}
</div> </div>
</div> </div>
</div>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
</div> </div>
</template> </template>
<template v-else-if="item.prop === 'roles'"> <template v-else-if="item.prop === 'roles'">
@@ -77,6 +80,12 @@
<span v-if="scope.row[item.prop] === 'en'">English</span> <span v-if="scope.row[item.prop] === 'en'">English</span>
<span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span> <span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span>
</template> </template>
<template v-else-if="item.prop === 'email'">
<div style="cursor:text" class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
<i class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
</div>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else>-</span> <span v-else>-</span>
</template> </template>