From 7a3691d97fb75a928c04c5bfde473c32c4a16ba5 Mon Sep 17 00:00:00 2001 From: liwenxuan <1298531568@qq.com> Date: Fri, 19 Apr 2024 16:23:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=A1=A8=E5=8D=95=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E8=8C=83=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DesignForm/assembly/index.ts | 2 + src/components/DesignForm/formControlAttr.vue | 191 ++++++++++++++++-- .../associatedFormsTinyace.vue | 12 +- 3 files changed, 185 insertions(+), 20 deletions(-) diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts index a54c612b0..aebeb953d 100644 --- a/src/components/DesignForm/assembly/index.ts +++ b/src/components/DesignForm/assembly/index.ts @@ -602,6 +602,8 @@ const selectOption: any = [ hideConditionHtml:'', hideConditionHtmlCopy:'', formid: '', + dataRangeConditionHtml:'', + dataRangeConditionHtmlCopy:'', }, config: {} } diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue index 91c9a8264..b9c1646c1 100644 --- a/src/components/DesignForm/formControlAttr.vue +++ b/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 = () => { + + 设置数据范围 +
+ + { 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" /> { :filter-node-method="filterNode" @node-expand="handleRoleTreeExpand" @node-collapse="handleRoleTreeCollapse" - @node-click="handleRoleTreeNodeclick" + @node-contextmenu="handleRoleTreeContextmenu" /> @@ -3249,11 +3309,108 @@ const loadNextPage = () => { + + + + + + + + + - + + diff --git a/src/widget/associatedforms/associatedFormsTinyace.vue b/src/widget/associatedforms/associatedFormsTinyace.vue index 4ec15b8f3..ca8df6f12 100644 --- a/src/widget/associatedforms/associatedFormsTinyace.vue +++ b/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, })