feat:管道节点管理添加复制脚本编码按钮

ruoyi-ui/src/views/bpmprocess/scriptManage.vue

@@ -172,8 +172,12 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  
         <el-form-item label="脚本编码:" prop="scriptKey">
-          <el-input v-model="form.scriptKey" placeholder="请输入脚本编码" :disabled="true"/>
-          <el-button icon="el-icon-document-copy"></el-button>
+          <el-col :span="20">
+            <el-input v-model="form.scriptKey" placeholder="请输入脚本编码" :disabled="true"/>
+          </el-col>
+          <el-col :span="4">
+            <el-button icon="el-icon-document-copy" v-clipboard:copy="form.scriptKey" v-clipboard:success="onCopy" v-clipboard:error="onError"></el-button>
+          </el-col>
         </el-form-item>
         <el-form-item label="脚本名称:" prop="scriptName">
           <el-input v-model="form.scriptName" placeholder="请输入脚本名称" />
@@ -260,6 +264,7 @@ import uuid from "@/utils/bpmn/uuid";
 import Editor from "vue2-ace-editor";
 import {v4 as uuidv4} from 'uuid';
 import * as monaco from "monaco-editor";
+import Clipboard from "clipboard";
 
 export default {
   name: "Script",
@@ -358,7 +363,14 @@ export default {
       require("brace/mode/javascript");
       require("brace/snippets/javascript");
     },
-
+    // 复制成功
+    onCopy() {
+      this.$modal.msgSuccess("脚本编码已成功复制到剪贴板");
+    },
+    //复制失败
+    onError() {
+      this.$modal.msgError("脚本编码复制失败");
+    },
     /** 查询流程节点脚本列表 */
     getList() {
       this.loading = true;
@@ -410,10 +422,9 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() { 
-     
       this.monacoEditor?.dispose();
       this.reset();
-      this.form.scriptKey= uuidv4()
+      this.form.scriptKey= uuidv4();
       console.log(this.form.scriptKey);
       this.open = true;
       this.title = "添加流程节点脚本";