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

nezha-fronted/package.json

@@ -55,6 +55,7 @@
     "quill": "^1.3.7",
     "v-selectpage": "^2.1.4",
     "vue": "^2.5.2",
+    "vue-clipboard2": "^0.3.3",
     "vue-color": "^2.8.1",
     "vue-countupjs": "^1.0.0",
     "vue-draggable-resizable": "^2.3.0",

nezha-fronted/src/assets/css/common.scss

@@ -422,3 +422,10 @@ input, textarea {
   font-size: 10px;
   margin-left: 190px;
 }
+
+.document-copy-block:hover i{
+  visibility: visible !important;
+}
+.document-copy-block i{
+  font-size: 14px !important;
+}

nezha-fronted/src/components/common/mixin/table.js

@@ -134,6 +134,11 @@ export default {
     },
     rowKey (row) { // ping trace的 唯一key
       return row.ip + '-' + row.dc.id
+    },
+    onCopy (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
     }
   },
   watch: {

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -38,7 +38,19 @@
           <div class="col-resize-area"></div>
         </template>
         <template slot-scope="scope" :column="item">
-          <template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
+          <template v-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              {{scope.row.name ? scope.row.name : '-'}}
+              <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 === 'manageIp'">
+            <div style="cursor:text" class="document-copy-block">
+              {{scope.row.manageIp ? scope.row.manageIp : '-'}}
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.manageIp)"></i>
+            </div>
+          </template>
+          <template v-else-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
           <template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
           <template v-else-if="item.prop === 'endpointNum'">
             <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
@@ -91,6 +103,12 @@
             <!--          <span v-else-if="scope.row.pid == -1">  <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
             <span v-else> - </span>
           </template>
+          <template v-else-if="item.prop === 'sn'">
+            <div style="cursor:text" class="document-copy-block">
+              {{scope.row.sn ? scope.row.sn : '-'}}
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.sn)"></i>
+            </div>
+          </template>
           <template v-else-if="item.prop === 'talon'">
             <div v-if="scope.row['clientState']===1">
               <div class="active-icon green-bg inline-block"></div>

nezha-fronted/src/entrance/app/main.js

@@ -16,6 +16,7 @@ import axios from 'axios'
 import { hasPermission, hasButton } from '@/permission'
 import loadsh from 'lodash'
 import plTable from 'pl-table'
+import VueClipboard from 'vue-clipboard2'
 import 'pl-table/themes/index.css'
 
 import { post, get, put, del } from '@/http.js'
@@ -126,6 +127,7 @@ Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.use(Vuex)
 Vue.use(VueResource)
+Vue.use(VueClipboard)
 Vue.use(plTable)
 Vue.component('el-select', MyElSelect)
 Vue.use(hasPermission)