关联表单新增组件，样式调整

src/widget/associatedforms/associatedFormsFillRole.vue

@@ -0,0 +1,79 @@
+<template>
+
+<div style="margin-bottom: 15px; height: 40px; line-height: 40px;">
+  <el-tree-select 
+    v-model="leftValue1" style="width: 290px;" :data="leftTreeSource"
+    check-strictly :render-after-expand="false" filterable  @change="leftChanged" />
+  <span style="margin-left: 8px;margin-right: 8px;">的值填充到</span>
+  <el-tree-select 
+    v-model="rightValue1" style="width: 290px;" :data="rightTreeSource"
+    check-strictly :render-after-expand="false" filterable @change="rightChanged" />
+    <Delete style="width: 22px; height: 22px; margin-right: 35px;cursor: pointer; color: #50A6FF;margin-top: 10px; display: block; float:right" @click="delRole" />
+</div>
+  
+
+
+</template>
+
+<script setup lang="ts">
+
+
+const props = defineProps({
+  leftTreeSource: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  rightTreeSource: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  leftValue: {
+    type: String,
+    default() {
+      return {}
+    }
+  },
+  rightValue: {
+    type: String,
+    default() {
+      return {}
+    }
+  },
+  currentKey: {
+    type: String,
+    default() {
+      return {}
+    }
+  },
+})
+const leftValue1 = ref()
+const rightValue1 = ref()
+
+leftValue1.value = props.leftValue
+rightValue1.value = props.rightValue
+
+
+
+let emit = defineEmits(["update:leftValue", "update:rightValue","delRole"]);
+
+function leftChanged(){
+  emit('update:leftValue',leftValue1)
+}
+function rightChanged(){
+  emit('update:rightValue',rightValue1)
+}
+
+function delRole(){
+  //alert(props.currentKey)
+  emit('delRole',props.currentKey)
+}
+
+
+
+</script>
+
+<style></style>

src/widget/associatedforms/associatedFormsTinyaceRange.vue

@@ -0,0 +1,108 @@
+
+<script lang='ts' setup>
+import { ref, onMounted } from "vue";
+import tinymce from "tinymce/tinymce";
+import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
+import "tinymce/themes/silver/theme";
+import Editor from "@tinymce/tinymce-vue"; // 引入组件
+import { v4 as uuidv4 } from "uuid";
+
+let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
+
+/**
+ * 初始富文本组件
+ */
+const tinymceInit = {
+  selector: "#"+onlyNumber,
+	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
+	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
+	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
+	height: 260, // 限制高度
+	statusbar:false,
+	toolbar:false,
+	branding: false,  //是否禁用“Powered by TinyMCE”
+	menubar: false, //顶部菜单栏显示
+	forced_root_block:'',
+	newline_behavior:"",
+	content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入	
+  auto_focus : true,
+}
+const props = defineProps({
+  aftText:{ 
+    type: String, 
+    default(){
+			return {}
+		} 
+  },
+  aftTextCopy:{ 
+    type: String, 
+    default(){
+			return {}
+		} 
+  },
+})
+
+let $emit = defineEmits(["textChange"]);
+
+const tinymceHtml = ref("")
+tinymceHtml.value = props.aftText
+
+
+
+onMounted(() => {
+  	tinymce.init({}); // 初始化富文本
+});
+watch(()=>tinymceHtml.value, (val:any) => {
+  $emit('textChange',val);
+},
+    { deep: true }
+)
+
+
+const addIcon = (currentObject:any) =>{
+	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.label}</span>`);
+}
+const addIcon_field = (currentObject:any) =>{
+	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.treeAttrs.show}</span>`);
+}
+const addIcon_org = (currentObject:any) =>{
+  let id = "orgOrPerson:"+currentObject.id
+	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${id}" >${currentObject.label}</span>`);
+}
+//取消
+const handelCancel = (associatedFormsHideDialogTextCopy:any) =>{
+  tinymceHtml.value = associatedFormsHideDialogTextCopy
+}
+const tinymceReInit = ()=>{
+    
+    
+    let str:string = props.aftTextCopy
+}
+
+const focusEditor = ()=>{
+  tinymce.EditorManager.get(onlyNumber)?.focus(true)
+}
+
+
+defineExpose({
+  tinymceHtml,
+  addIcon,
+  addIcon_org,
+  addIcon_field,
+  handelCancel,
+  tinymceReInit,
+  focusEditor,
+})
+
+</script>
+<template >
+	<div >
+    <editor :id="onlyNumber"   v-model="tinymceHtml" :init="tinymceInit"></editor>
+  </div>
+	
+
+</template>
+
+<style  lang='scss' scoped>
+	
+</style>