关联表单隐藏控件

src/components/DesignForm/formControlAttr.vue

@@ -1747,6 +1747,8 @@ const treeDefaultProps = {
 	children: 'children',
 	label: 'label',
 }
+//拿到子组件AssociatedFormsTinyace的实例
+let aft = ref();
 
 function getAssociatedFormsCurrentFieldTree() {
         return request({ 
@@ -1764,6 +1766,12 @@ function getAssociatedFormsOrgAndManTree() {
             method: 'post',
         });
 }
+function getAssociatedFormsRoleTree() {
+        return request({
+            url: '/javasys/lowCode/AssociatedForms/getRoleList',
+            method: 'post',
+        });
+}
 const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
 
 getAssociatedFormsCurrentFieldTree().then(({ data }) => {   
@@ -1787,6 +1795,18 @@ const orgAndManTree = ref<Tree[]>()
         }]
 });
 
+const roleTree = ref<Tree[]>()
+	getAssociatedFormsRoleTree().then(({ data }) => {   
+        let resData = ref(data.children)
+        //console.log("roleTree=============="+resData.value);
+		roleTree.value = [{
+            id: data.id,
+        	//label: data.label,
+			label: '角色',
+            children: [...resData.value]
+        }]
+    });
+//form    field
 const fieldTreeSearchFlag = ref(false)
 
 function handleFieldTreeExpand(){
@@ -1801,17 +1821,45 @@ function handleFieldTreeCollapse(){
 function handleFieldTreeNodeclick(){
 	
 }
-//拿到子组件AssociatedFormsTinyace的实例
+
-let aft = ref();
 function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
-	//console.log(MouseEvent)
+    aft.value.addIcon(object)
+}
+//org
+const orgTreeSearchFlag = ref(false)
 
-	//console.log(Node)
+function handleOrgTreeExpand(){
-	//console.log(element)
 	
-    aft.value.addIcon(object)
+	orgTreeSearchFlag.value = true;
+}
+
+function handleOrgTreeCollapse(){
+	
+	orgTreeSearchFlag.value = false;
+}
+function handleOrgTreeNodeclick(){
+	
+}
+function handleOrgTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
+    aft.value.addIcon_org(object)
+}
+//role
+const roleTreeSearchFlag = ref(false)
+
+function handleRoleTreeExpand(){
+	
+	roleTreeSearchFlag.value = true;
+}
 
+function handleRoleTreeCollapse(){
 	
+	roleTreeSearchFlag.value = false;
+}
+function handleRoleTreeNodeclick(){
+	
+}
+function handleRoleTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
+    aft.value.addIcon(object)
 }
 
 
@@ -1820,11 +1868,20 @@ import { ElTree } from 'element-plus'
 
 
 const fieldTreeFilterText = ref('')
+const orgTreeFilterText = ref('')
+const roleTreeFilterText = ref('')
 const fieldTreeRef = ref<InstanceType<typeof ElTree>>()
-
+const orgTreeRef = ref<InstanceType<typeof ElTree>>()
+const roleTreeRef = ref<InstanceType<typeof ElTree>>()
 watch(fieldTreeFilterText, (val) => {
 	fieldTreeRef.value!.filter(val)
 })
+watch(orgTreeFilterText, (val) => {
+	orgTreeRef.value!.filter(val)
+})
+watch(roleTreeFilterText, (val) => {
+	roleTreeRef.value!.filter(val)
+})
 
 const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) => {
 	if (!value) return true
@@ -1844,12 +1901,7 @@ function associatedFormsHideDialoghandle(){
 
 //自定义事件同步父子组件的text
 function aftTextChanged(str:string){
-    //str = Object.assign({},str)
-    console.log(str)
-    //setTimeout(()=>{
     associatedFormsHideDialogText.value = str
-    //},3000)
-    
 }
 //asf隐藏条件取消编辑
 function asfhTextCancel(){
@@ -1857,19 +1909,16 @@ function asfhTextCancel(){
     associatedFormsHideDialogFlag.value = false
     associatedFormsHideDialogText.value = associatedFormsHideDialogTextCopy.value
     //父组件取消将copy同步至子组件
-    aft.value.handelCancel(associatedFormsHideDialogTextCopy)
+    aft.value.handelCancel(associatedFormsHideDialogTextCopy.value)
 }
 //上次点击了确定为true
 let determine = ref(true)
 //监听associatedFormsHideDialogFlag true 重新init  tinymce
 watch(associatedFormsHideDialogFlag, (val) => {
-    //alert("determine:"+determine.value)
 	if(val===true&&determine.value===false){
         setTimeout(() => {
             aft.value.tinymceReInit()
-            
         }, 200);
-        
     }
 })
 //确定回调
@@ -3056,15 +3105,13 @@ const loadNextPage = () => {
 		<template v-if="controlData.type=='associatedForms'">
 			<div class="common-layout">
 				<el-container>
-				<el-aside width="300px" style="height:400px;border: 1px solid gainsboro;margin-right: 5px;">
+				<el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;">
 					<el-input
 						v-show="fieldTreeSearchFlag"
 						v-model="fieldTreeFilterText"
 						style="width:98%;margin: 3px;"
 						placeholder="搜索字段"
 						class="filter-tree"
-						
-						
 					/>
 					<el-tree
 						ref="fieldTreeRef"
@@ -3079,19 +3126,60 @@ const loadNextPage = () => {
 						
 						
 					/>
+                    <el-input
+						v-show="orgTreeSearchFlag"
+						v-model="orgTreeFilterText"
+						style="width:98%;margin: 3px;"
+						placeholder="搜索字段"
+						class="filter-tree"
+					/>
 					<el-tree
+                        ref="orgTreeRef"
 						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
 						:data="orgAndManTree"
 						:props="treeDefaultProps"
-						
+						:filter-node-method="filterNode"
+                        @node-expand="handleOrgTreeExpand"
+						@node-collapse="handleOrgTreeCollapse"
+						@node-click="handleOrgTreeNodeclick"
+						@node-contextmenu="handleOrgTreeContextmenu"
+					/>
+                    <el-input
+						v-show="roleTreeSearchFlag"
+						v-model="roleTreeFilterText"
+						style="width:98%;margin: 3px;"
+						placeholder="搜索字段"
+						class="filter-tree"
+					/>
+					<el-tree
+                        ref="roleTreeRef"
+						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
+						:data="roleTree"
+						:props="treeDefaultProps"
+						:filter-node-method="filterNode"
+                        @node-expand="handleRoleTreeExpand"
+						@node-collapse="handleRoleTreeCollapse"
+						@node-click="handleRoleTreeNodeclick"
+						@node-contextmenu="handleRoleTreeContextmenu"
 					/>
 				</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;">
                         <AssociatedFormsTinyace ref="aft" :aft-text="associatedFormsHideDialogText" :aft-text-copy = "associatedFormsHideDialogTextCopy" @text-change = "aftTextChanged"></AssociatedFormsTinyace>
+                        <!-- <div style="border: 1px solid #4189EF;width:90px;height:26px;border-radius: 3px;padding:2px;text-align: center;cursor:pointer;float: right;margin-top: -32px;margin-right: 5px;z-index:99999999;position: relative;">
+                            <span style="color: #4189EF;font:6px;margin-right: 5px;">fx</span>插入函数
+                        </div> -->
+                        
+                    </div>
+					<div style="border: 1px solid gainsboro; height: 30%; padding-top: 20px;">
+                        <ul>
+                            <li>请从左侧面板<span style="color: red">右击</span>选择字段或选项</li>
+                            <li>支持<span style="color: red">英文</span>模式下运算符<!-- （+、-、*、/、>、<、==、） --></li>
+                            <li>参考场景：</li>
+                            <span style="margin-left: 14px;">年龄控件输入的值大于10时，需要隐藏当前控件，则可将隐藏条件设置为：年龄>10</span>
+                        </ul>
                     </div>
-					<div style="border: 1px solid gainsboro; height: 30%;"></div>
 				</el-main>
 				</el-container>
 			</div>
@@ -3106,11 +3194,27 @@ const loadNextPage = () => {
     </template>
 	</el-dialog>
     
+    
+<!-- 
+    
+-->
 	<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
     </template>
 
 <style   lang='scss' scoped>   
 
+    li::before {
+        content: "";
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: gray;
+        margin-right: 5px;
+        margin-left: 5px;
+        margin-bottom: 3.5px;
+    }
+
 	.sidebar-tools .el-tabs__content{
         padding: 0;
 		

src/widget/associatedforms/associatedFormsTinyace.vue

@@ -14,7 +14,7 @@ let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
  * 初始富文本组件
  */
 const tinymceInit = {
-  selector: "#tinymce",
+  selector: "#tinymceasfhide",
 	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
 	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
 	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
@@ -50,55 +50,46 @@ tinymceHtml.value = props.aftText
 
 
 onMounted(() => {
-    
   	tinymce.init({}); // 初始化富文本
-    
 });
-watch(tinymceHtml, (val) => {
+watch(()=>tinymceHtml.value, (val:any) => {
   $emit('textChange',val);
-})
+},
+    { deep: true }
+)
 
 
 const addIcon = (currentObject:any) =>{
-  //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>`);
+}
 
+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) =>{
-
-  //console.log(associatedFormsHideDialogTextCopy)
   tinymceHtml.value = associatedFormsHideDialogTextCopy
-  
-  
 }
 const tinymceReInit = ()=>{
-  //alert("tinymceReInit")
-  //tinymce.init({}); // 初始化富文本
-  //console.log(tinymce.get("tinymce"))
-  
-
-  //setTimeout(() => {
-    
     let str:string = props.aftTextCopy
-    console.log(str)
-    //tinymce.get("tinymce")?.setContent(str)
-  //}, 60);
-
 }
 
 
 defineExpose({
   tinymceHtml,
   addIcon,
+  addIcon_org,
   handelCancel,
   tinymceReInit,
 })
 
 </script>
-<template>
+<template >
-	
+	<div >
     <editor id="tinymce"   v-model="tinymceHtml" :init="tinymceInit" ></editor>
+  </div>
+	
 
 </template>