提交复制组件

ruoyi-ui/src/components/CopyTag/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <template v-if="data">
+      <span :title="data" v-text="handleData()"/>
+      <i class="el-icon-copy-document" @click="handleCopy()" title="复制"/>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CopyTag",
+  props: {
+    data: {
+      required: true,
+      type: String
+    },
+    maxLength: {
+      type: Number,
+      default: 40,
+    }
+  },
+  methods: {
+    handleData() {
+      return this.data && this.data.length > this.maxLength ? this.data.substring(0, this.maxLength - 3) + '...' : this.data;
+    },
+    handleCopy() {
+      let oInput = document.createElement('input')
+      oInput.value = this.data;
+      document.body.appendChild(oInput)
+      oInput.select()
+      document.execCommand('copy')
+      this.$message({
+        message: '复制成功',
+        type: 'success'
+      })
+      oInput.remove()
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+  .el-icon-copy-document {
+    color: #4A8DFF; 
+    cursor:pointer;
+    margin-left: 5px;
+  }
+</style>

ruoyi-ui/src/views/isc/application/index.vue

@@ -84,9 +84,7 @@
       </el-table-column>
       <el-table-column label="应用密钥" align="center" prop="accessKey">
         <template slot-scope="scope">
-            <span>{{ scope.row.accessKey }} </span> 
+            <copy-tag :data="scope.row.accessKey"/>
-            <i class="el-icon-copy-document" style="color: #4A8DFF;cursor:pointer" v-if="scope.row.accessKey"
-            @click="handleCopy(scope.row.accessKey)" title="复制"/>
         </template>
       </el-table-column>
       <el-table-column label="更新者" align="center" prop="updateBy" />
@@ -143,9 +141,11 @@
 
 <script>
 import { listApplication, getApplication, delApplication, addApplication, updateApplication } from "@/api/isc/application";
+import CopyTag from '@/components/CopyTag';
 
 export default {
   name: "Application",
+  components: {CopyTag},
   data() {
     return {
       // 按钮loading
@@ -260,19 +260,6 @@ export default {
         this.title = "修改应用信息";
       });
     },
-    // 复制ak
-    handleCopy(data) {
-      let oInput = document.createElement('input')
-      oInput.value = data
-      document.body.appendChild(oInput)
-      oInput.select()
-      document.execCommand('copy')
-      this.$message({
-        message: '复制成功',
-        type: 'success'
-      })
-      oInput.remove()
-    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {

ruoyi-ui/src/views/isc/appservice/index.vue

@@ -90,9 +90,7 @@
       <el-table-column label="服务名称" align="left" prop="serviceName" />
       <el-table-column label="虚拟地址" align="left" prop="virtualAddr">
         <template slot-scope="scope">
-            <span :title="scope.row.virtualAddr" v-text="handleVirtualAddr(scope.row.virtualAddr)"/>
+          <copy-tag :data="scope.row.virtualAddr"/>
-            <i class="el-icon-copy-document" v-if="scope.row.virtualAddr" style="color: #4A8DFF;cursor:pointer" 
-            @click="handleCopy(scope.row.virtualAddr)" title="复制"/>
         </template>
       </el-table-column>
       <el-table-column label="审核状态" align="center" prop="status" width="100">
@@ -289,10 +287,11 @@
 import { listAppservice, getAppservice, delAppservice, addAppservice, updateAppservice, treeselect } from "@/api/isc/appservice";
 import { getApplication } from "@/api/isc/application";
 import Treeselect from "@riophae/vue-treeselect";
+import CopyTag from '@/components/CopyTag';
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "Appservice",
-  components: { Treeselect },
+  components: { Treeselect, CopyTag },
   data() {
     return {
       // 按钮loading
@@ -489,23 +488,6 @@ export default {
         this.openView = true;
       });
     },
-    /** 复制地址 */ 
-    handleCopy(data) {
-      let oInput = document.createElement('input')
-      oInput.value = data
-      document.body.appendChild(oInput)
-      oInput.select()
-      document.execCommand('copy')
-      this.$message({
-        message: '复制成功',
-        type: 'success'
-      })
-      oInput.remove()
-    },
-    // 处理虚拟地址
-    handleVirtualAddr(data) {
-      return data && data.length > 40 ? data.substring(0, 37) + '...' : data;
-    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {