关联表单数据范围

src/components/DesignForm/assembly/index.ts

@@ -602,6 +602,8 @@ const selectOption: any = [
 				hideConditionHtml:'',
 				hideConditionHtmlCopy:'',
 				formid: '',
+				dataRangeConditionHtml:'',
+				dataRangeConditionHtmlCopy:'',
 			},
 			config: {}
 		}

src/components/DesignForm/formControlAttr.vue

@@ -634,6 +634,14 @@
 					vIf: state.isSearch,
 					vShow: ['associatedForms']
 				},
+                {
+					label: '数据范围',
+					value: config.associatedForms,
+					path: 'config.associatedForms',
+					type: 'associatedForms_dataRange',
+					vIf: state.isSearch,
+					vShow: ['associatedForms']
+				},
                 {
                     label: '轮播图设置',
                     value: config.carousel,
@@ -1751,7 +1759,7 @@ const transferDataSourceOptions = [
 
 //liwenxuan20240403 associatedForms start 
 import AssociatedFormsTinyace from '@/widget/associatedforms/associatedFormsTinyace.vue'
-
+import AssociatedFormsTinyaceRange from '@/widget/associatedforms/associatedFormsTinyaceRange.vue'
 
 const treeDefaultProps = {
 	children: 'children',
@@ -1759,6 +1767,7 @@ const treeDefaultProps = {
 }
 //拿到子组件AssociatedFormsTinyace的实例
 let aft = ref();
+const aftRange = ref();
 
 function getAssociatedFormsCurrentFieldTree() {
         return request({ 
@@ -1849,13 +1858,14 @@ function handleFieldTreeCollapse(){
 	
 	fieldTreeSearchFlag.value = false;
 }
-function handleFieldTreeNodeclick(){
+
-	
-}
 
 function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
     aft.value.addIcon_field(object)
 }
+function handleFieldTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
+    aftRange.value.addIcon_field(object)
+}
 
 
 
@@ -1871,12 +1881,13 @@ function handleOrgTreeCollapse(){
 	
 	orgTreeSearchFlag.value = false;
 }
-function handleOrgTreeNodeclick(){
+
-	
-}
 function handleOrgTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
     aft.value.addIcon_org(object)
 }
+function handleOrgTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
+    aftRange.value.addIcon_org(object)
+}
 //role
 const roleTreeSearchFlag = ref(false)
 
@@ -1889,13 +1900,13 @@ function handleRoleTreeCollapse(){
 	
 	roleTreeSearchFlag.value = false;
 }
-function handleRoleTreeNodeclick(){
+
-	
-}
 function handleRoleTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
     aft.value.addIcon(object)
 }
-
+function handleRoleTreeContextmenuRange(MouseEvent:any, object:any, Node:any, element:any){
+    aftRange.value.addIcon(object)
+}
 
 
 import { ElTree } from 'element-plus'
@@ -1925,6 +1936,7 @@ const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) =>
 //关联表单隐藏条件弹窗flag
 const associatedFormsHideDialogFlag = ref(false)
 
+const associatedFormsDataRangeDialogFlag = ref(false)
 
 
 //父组件
@@ -1938,12 +1950,31 @@ const associatedFormsHideDialogFlag = ref(false)
 function associatedFormsHideDialoghandle(){
     associatedFormsHideDialogFlag.value = true
     controlData.value.control.hideConditionHtmlCopy = controlData.value.control.hideConditionHtml
+    nextTick(() => {
+        aft.value.focusEditor()
+	})
+}
+
+
+function associatedFormsDataRangeDialoghandle(){
+    associatedFormsDataRangeDialogFlag.value = true
+    controlData.value.control.dataRangeConditionHtmlCopy = controlData.value.control.dataRangeConditionHtml
+    
+    nextTick(() => {
+        aftRange.value.focusEditor()
+	})
+
+    
 }
 
 //自定义事件同步父子组件的text
 function aftTextChanged(str:string){
     controlData.value.control.hideConditionHtml = str
 }
+
+function aftTextChangedRange(str:string){
+    controlData.value.control.dataRangeConditionHtml = str
+}
 //asf隐藏条件取消编辑
 function asfhTextCancel(){
     determine.value = false
@@ -1952,8 +1983,18 @@ function asfhTextCancel(){
     //父组件取消将copy同步至子组件
     aft.value.handelCancel(controlData.value.control.hideConditionHtmlCopy)
 }
+
+function asfhTextCancelRange(){
+    determineRange.value = false
+    associatedFormsDataRangeDialogFlag.value = false
+    controlData.value.control.dataRangeConditionHtml = controlData.value.control.dataRangeConditionHtmlCopy
+    //父组件取消将copy同步至子组件
+    aftRange.value.handelCancel(controlData.value.control.dataRangeConditionHtmlCopy)
+}
+
 //上次点击了确定为true
 let determine = ref(true)
+let determineRange = ref(true)
 //监听associatedFormsHideDialogFlag true 重新init  tinymce
 watch(associatedFormsHideDialogFlag, (val) => {
 	if(val===true&&determine.value===false){
@@ -1962,12 +2003,26 @@ watch(associatedFormsHideDialogFlag, (val) => {
         }, 200);
     }
 })
+
+watch(associatedFormsDataRangeDialogFlag, (val) => {
+	if(val===true&&determineRange.value===false){
+        setTimeout(() => {
+            aftRange.value.tinymceReInit()
+        }, 200);
+    }
+})
+
 //确定回调
 function handleDetermine(){
     associatedFormsHideDialogFlag.value = false
     determine.value = true
     controlData.value.control.hideConditionHtmlCopy = controlData.value.control.hideConditionHtml
 }
+function handleDetermineRange(){
+    associatedFormsDataRangeDialogFlag.value = false
+    determineRange.value = true
+    controlData.value.control.dataRangeConditionHtmlCopy = controlData.value.control.dataRangeConditionHtml
+}
 
 
 
@@ -2451,6 +2506,11 @@ const loadNextPage = () => {
                                     </div>
 								</el-row> 
 
+                                <el-row v-else-if="item.type === 'associatedForms_dataRange'">
+									<el-button v-if="controlData.control.dataRangeConditionHtml===''" style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="associatedFormsDataRangeDialoghandle"  >设置数据范围</el-button>
+									<div style="width:100%; cursor: pointer;"  v-html="controlData.control.dataRangeConditionHtml" @click="associatedFormsDataRangeDialoghandle"></div>
+								</el-row>
+
                                 <el-input
                                     v-else
                                     :type="item.inputStyle"
@@ -3177,7 +3237,7 @@ const loadNextPage = () => {
 						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
 						@node-expand="handleFieldTreeExpand"
 						@node-collapse="handleFieldTreeCollapse"
-						@node-click="handleFieldTreeNodeclick"
+						
 						@node-contextmenu="handleFieldTreeContextmenu"
 						
 						
@@ -3197,7 +3257,7 @@ const loadNextPage = () => {
 						:filter-node-method="filterNode"
                         @node-expand="handleOrgTreeExpand"
 						@node-collapse="handleOrgTreeCollapse"
-						@node-click="handleOrgTreeNodeclick"
+						
 						@node-contextmenu="handleOrgTreeContextmenu"
 					/>
                     <el-input
@@ -3215,7 +3275,7 @@ const loadNextPage = () => {
 						:filter-node-method="filterNode"
                         @node-expand="handleRoleTreeExpand"
 						@node-collapse="handleRoleTreeCollapse"
-						@node-click="handleRoleTreeNodeclick"
+						
 						@node-contextmenu="handleRoleTreeContextmenu"
 					/>
 				</el-aside>
@@ -3249,11 +3309,108 @@ const loadNextPage = () => {
 		</div>
     </template>
 	</el-dialog>
+
+
+<!-- 数据范围编辑弹窗 -->
+
+    <el-dialog v-model="associatedFormsDataRangeDialogFlag" title="数据范围" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 500px" width="50%"  >
+		
+		<template v-if="controlData.type=='associatedForms'">
+			<div class="common-layout">
+				<el-container>
+				<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"
+                        node-key="id"
+						:data="associatedFormsCurrentFormFieldTree"
+						:props="treeDefaultProps"
+						:filter-node-method="filterNode"
+						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
+						@node-expand="handleFieldTreeExpand"
+						@node-collapse="handleFieldTreeCollapse"
+						
+						@node-contextmenu="handleFieldTreeContextmenuRange"
+						
+						
+					/>
+                    <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-contextmenu="handleOrgTreeContextmenuRange"
+					/>
+                    <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-contextmenu="handleRoleTreeContextmenuRange"
+					/>
+				</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;">
+                        <AssociatedFormsTinyaceRange ref="aftRange" :aft-text="controlData.control.dataRangeConditionHtml" :aft-text-copy = "controlData.control.dataRangeConditionHtmlCopy" @text-change = "aftTextChangedRange"></AssociatedFormsTinyaceRange>
+                        <!-- <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>
+				</el-main>
+				</el-container>
+			</div>
+		</template>
+		<template #footer>
+		<div class="dialog-footer">
+			<el-button @click="asfhTextCancelRange">取消</el-button>
+			<el-button type="primary" @click="handleDetermineRange">
+			确定
+			</el-button>
+		</div>
+    </template>
+	</el-dialog>
     
     
-<!-- 
+
-    
+
--->
 	<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
     </template>
 

src/widget/associatedforms/associatedFormsTinyace.vue

@@ -9,12 +9,12 @@ import Editor from "@tinymce/tinymce-vue"; // 引入组件
 import { v4 as uuidv4 } from "uuid";
 
 let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
-//onlyNumber = "#"+onlyNumber
+
 /**
  * 初始富文本组件
  */
 const tinymceInit = {
-  selector: "#tinymceasfhide",
+  selector: "#"+onlyNumber,
 	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
 	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
 	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
@@ -74,8 +74,13 @@ const handelCancel = (associatedFormsHideDialogTextCopy:any) =>{
   tinymceHtml.value = associatedFormsHideDialogTextCopy
 }
 const tinymceReInit = ()=>{
+    
+    
     let str:string = props.aftTextCopy
 }
+const focusEditor = ()=>{
+  document.getElementById(onlyNumber)?.focus()
+}
 
 
 defineExpose({
@@ -85,12 +90,13 @@ defineExpose({
   addIcon_field,
   handelCancel,
   tinymceReInit,
+  focusEditor,
 })
 
 </script>
 <template >
 	<div >
-    <editor id="tinymce"   v-model="tinymceHtml" :init="tinymceInit" ></editor>
+    <editor :id="onlyNumber"   v-model="tinymceHtml" :init="tinymceInit" ></editor>
   </div>