herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

关联表单数据范围

lwx_v8
liwenxuan 2 years ago
parent
273291a12c
commit
7a3691d97f
3 changed files with 185 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/DesignForm/assembly/index.ts
  2. 183
      src/components/DesignForm/formControlAttr.vue
  3. 12
      src/widget/associatedforms/associatedFormsTinyace.vue

2
src/components/DesignForm/assembly/index.ts
View File

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

183
src/components/DesignForm/formControlAttr.vue
View File

@ -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>
@ -3251,9 +3311,106 @@ const loadNextPage = () => {
</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>

12
src/widget/associatedforms/associatedFormsTinyace.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save