关联表单v0.4

2 years ago · 3b4003f5c8
2 changed files with 158 additions and 10 deletions
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@ -1741,10 +1741,9 @@ const transferDataSourceOptions = [


 //liwenxuan20240403 associatedForms start 
+import AssociatedFormsTinyace from '@/widget/associatedforms/associatedFormsTinyace.vue'

-const associatedFormsHideDialogFlag = ref(false)
-
-const defaultProps = {
+const treeDefaultProps = {
 	children: 'children',
 	label: 'label',
 }
@ -1754,7 +1753,7 @@ function getAssociatedFormsCurrentFieldTree() {
            url: '/javasys/lowCode/AssociatedForms/getFieldTree',
            method: 'post',
 			data: {
-				cfid:'1'
+				cfid:'13'
 			},
        });
 }
@ -1802,14 +1801,24 @@ function handleFieldTreeCollapse(){
 function handleFieldTreeNodeclick(){
 	
 }
+//拿到子组件AssociatedFormsTinyace的实例
+let aft = ref();
 function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
 	//console.log(MouseEvent)
-	console.log(object)
+	
 	//console.log(Node)
 	//console.log(element)
+    
+    aft.value.addIcon(object)
+    

 }
+
+
+
 import { ElTree } from 'element-plus'
+
+
 const fieldTreeFilterText = ref('')
 const fieldTreeRef = ref<InstanceType<typeof ElTree>>()

@ -1821,6 +1830,50 @@ const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) =>
 	if (!value) return true
 	return associatedFormsCurrentFormFieldTree.label.includes(value)
 }
+//关联表单隐藏条件弹窗flag
+const associatedFormsHideDialogFlag = ref(false)
+//父组件
+let associatedFormsHideDialogText = ref('雾峦青雨')
+//父组件编辑备份
+let associatedFormsHideDialogTextCopy = ref('')
+//点击开启隐藏设置
+function associatedFormsHideDialoghandle(){
+    associatedFormsHideDialogFlag.value = true
+    associatedFormsHideDialogTextCopy.value = associatedFormsHideDialogText.value
+}
+//asf隐藏条件取消编辑
+function asfhTextCancel(){
+    associatedFormsHideDialogFlag.value = false
+    associatedFormsHideDialogText.value = associatedFormsHideDialogTextCopy.value
+    //父组件取消将copy同步至子组件
+    aft.value.handelCancel(associatedFormsHideDialogTextCopy)
+}
+//自定义事件同步父子组件的text
+function aftTextChanged(str:any){
+    console.log(str)
+    associatedFormsHideDialogText.value = str.value
+}
+
+//监听associatedFormsHideDialogFlag true 重新init  tinymce
+ watch(associatedFormsHideDialogFlag, (val) => {
+	if(associatedFormsHideDialogFlag.value===true){
+        
+        setTimeout(() => {
+           
+            aft.value.tinymceReInit()
+            
+        }, 200);
+        
+    }
+})
+
+
+
+
+//liwenxuan20240403 associatedForms end 
+
+
+


 		
@ -2277,7 +2330,7 @@ const loadNextPage = () => {
 								</el-row>

 								<el-row v-else-if="item.type === 'associatedForms_hide'">
-									<el-button  type="primary" append-to-body="true" modal="true" @click="associatedFormsHideDialogFlag = true"  >设置隐藏条件</el-button>
+									<el-button  type="primary" append-to-body="true" modal="true" @click="associatedFormsHideDialoghandle"  >设置隐藏条件</el-button>
 									
 								</el-row>

@ -2983,6 +3036,8 @@ const loadNextPage = () => {

 	<!-- 关联表单设置弹窗 liwenxuan 20240402 start -->

+    
+
 	<el-dialog v-model="associatedFormsHideDialogFlag" title="隐藏条件" top="150px" style="margin-top:70px ;min-height: 500px" width="50%">
 		
 		<template v-if="controlData.type=='associatedForms'">
@ -3001,7 +3056,7 @@ const loadNextPage = () => {
 					<el-tree
 						ref="fieldTreeRef"
 						:data="associatedFormsCurrentFormFieldTree"
-						:props="defaultProps"
+						:props="treeDefaultProps"
 						:filter-node-method="filterNode"
 						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
 						@node-expand="handleFieldTreeExpand"
@ -3014,13 +3069,15 @@ const loadNextPage = () => {
 					<el-tree
 						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
 						:data="orgAndManTree"
-						:props="defaultProps"
+						:props="treeDefaultProps"
 						
 					/>
 				</el-aside>
 				<el-main style="border: 1px solid gainsboro; padding: 3px;" class="associatedFormsHideDialogMain">
 					<div style="border: 1px solid gainsboro; height: 7%; border-bottom: 0px; padding-top: 3px; padding-left: 5px; background-color: #E6F3FE;">当满足以下条件时此控件隐藏</div>
-					<div  id="associatedFormsHideEditArea" style="border: 1px solid gainsboro; height: 63%; border-bottom: 0px;"></div>
+					<div  id="associatedFormsHideEditArea" style="border: 1px solid gainsboro; height: 63%; border-bottom: 0px;">
+                        <AssociatedFormsTinyace  @textChange = "aftTextChanged" ref="aft" :aftText="associatedFormsHideDialogText" ></AssociatedFormsTinyace>
+                    </div>
 					<div style="border: 1px solid gainsboro; height: 30%;"></div>
 				</el-main>
 				</el-container>
@ -3028,7 +3085,7 @@ const loadNextPage = () => {
 		</template>
 		<template #footer>
 		<div class="dialog-footer">
-			<!-- <el-button @click="associatedFormsHideDialogFlag = false">取消</el-button> -->
+			<el-button @click="asfhTextCancel">取消</el-button>
 			<el-button type="primary" @click="associatedFormsHideDialogFlag = false">
 			确定
 			</el-button>
--- a/src/widget/associatedforms/associatedFormsTinyace.vue
+++ b/src/widget/associatedforms/associatedFormsTinyace.vue
@ -0,0 +1,91 @@
+
+<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();   //获取唯一编码
+//onlyNumber = "#"+onlyNumber
+/**
+ * 初始富文本组件
+ */
+const tinymceInit = {
+  selector: "#tinymce",
+	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文件需自己创建并引入	
+}
+const props = defineProps({
+  aftText:{ 
+    type: String, 
+    default(){
+			return {}
+		} 
+  },
+  
+})
+
+let $emit = defineEmits(["textChange"]);
+
+const tinymceHtml = ref("")
+tinymceHtml.value = props.aftText
+
+
+
+onMounted(() => {
+    
+  	tinymce.init({}); // 初始化富文本
+    
+});
+
+
+
+const addIcon = (currentObject) =>{
+  console.log(currentObject)
+	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>`);
+  $emit('textChange',tinymceHtml);
+}
+
+const handelCancel = (associatedFormsHideDialogTextCopy) =>{
+
+  console.log(associatedFormsHideDialogTextCopy)
+  tinymceHtml.value = associatedFormsHideDialogTextCopy
+  
+  
+}
+ const tinymceReInit = ()=>{
+  
+  //tinymce.init({}); // 初始化富文本
+  console.log(tinymce.get("tinymce"))
+  tinymce.get("tinymce").setContent('<p>213342</p>')
+}
+
+
+defineExpose({
+  tinymceHtml,
+  addIcon,
+  handelCancel,
+  tinymceReInit,
+})
+
+</script>
+<template>
+	
+	<editor id="tinymce"   v-model="tinymceHtml" :init="tinymceInit" ></editor>
+</template>
+
+<style  lang='scss' scoped>
+	
+</style>