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

关联表单隐藏控件

lwx_v8
liwenxuan 2 years ago
parent
b28ea26ad4
commit
9f3e21d72c
2 changed files with 146 additions and 51 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. 156
      src/components/DesignForm/formControlAttr.vue
  2. 41
      src/widget/associatedforms/associatedFormsTinyace.vue

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

@ -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)
//console.log(Node)
//console.log(element)
aft.value.addIcon(object)
}
//org
const orgTreeSearchFlag = ref(false)
function handleOrgTreeExpand(){
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)
associatedFormsHideDialogText.value = str
}
//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>
@ -3105,11 +3193,27 @@ const loadNextPage = () => {
</div>
</template>
</el-dialog>
<!--
-->
<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
</template>
<style lang='scss' scoped>
<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;

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

@ -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,56 +50,47 @@ 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>
<editor id="tinymce" v-model="tinymceHtml" :init="tinymceInit" ></editor>
</template>
<style lang='scss' scoped>

Write Preview
Loading…
Cancel
Save