|
|
|
@ -1,42 +1,155 @@ |
|
|
|
<!-- eslint-disable vue/no-v-html --> |
|
|
|
<template> |
|
|
|
|
|
|
|
<div style="background-color: #E6F3FE;padding: 12px;border-radius: 10px;padding-left:45px;margin-bottom:20px;margin-right:11px;min-height: 65px;padding-top: 16px;"> |
|
|
|
<el-button :icon="Close" size="small" circle type="info" plain style="float: right;margin-top: -22px;margin-right: -22px" @click="delRole"/> |
|
|
|
|
|
|
|
<el-tree-select |
|
|
|
v-model="selectedChildTable1" |
|
|
|
style="width: 290px;" :data="childTableList" placeholder="请选择关联表单子表" |
|
|
|
check-strictly :render-after-expand="false" filterable @change="selectedChildTableChanged" /><!-- |
|
|
|
<span style="margin-left: 8px;margin-right: 8px;">的值填充到</span> |
|
|
|
<div |
|
|
|
style="background-color: #F0F0F0;padding: 12px;border-radius: 5px;padding-left:45px;margin-bottom:20px;margin-right:11px;min-height: 65px;padding-top: 16px;color: black;"> |
|
|
|
<el-button |
|
|
|
:icon="Close" size="small" circle type="info" plain |
|
|
|
style="float: right;margin-top: -22px;margin-right: -22px" @click="delRole" /> |
|
|
|
<el-tree-select |
|
|
|
v-model="rightValue1" style="width: 290px;" :data="rightTreeSource" |
|
|
|
check-strictly :render-after-expand="false" filterable @change="rightChanged" /> |
|
|
|
<Delete style="width: 22px; height: 22px; margin-right: 35px;cursor: pointer; color: #50A6FF;margin-top: 10px; display: block; float:right" @click="delRole" /> --> |
|
|
|
|
|
|
|
<!-- <el-button type="primary" @click="innerVisible = true"> |
|
|
|
open |
|
|
|
</el-button> --> |
|
|
|
|
|
|
|
<el-button style="padding-top: 5px; width: 290px;margin-left: 85px;height: 30px;" type="info" plain append-to-body="true" modal="true" @click="filterConditionDialoghandle = true" >设置筛选条件（选填）</el-button> |
|
|
|
<!-- <div v-if="selectedChildTable1!==''" style="width:100%; cursor: pointer;" @click="associatedFormsDataRangeDialoghandle" v-html="controlData.control.dataRangeConditionHtml"></div> --> |
|
|
|
v-model="selectedChildTable1" style="width: 270px;margin-bottom: -1px" :data="childTableList" |
|
|
|
placeholder="请选择关联表单子表" check-strictly :render-after-expand="false" filterable |
|
|
|
@change="selectedChildTableChanged" /> |
|
|
|
<el-popover placement="top-end" title="" :width="200" trigger="hover" content="若【设置筛选条件】，则仅填充满足筛选条件的子表数据"> |
|
|
|
<template #reference> |
|
|
|
<el-button |
|
|
|
v-if="selectedChildTable1 !== '' && filterCondition1.conditionHtml === ''" |
|
|
|
style="padding-top: 8px; width: 270px;margin-left: 85px;height: 30px;" type="primary" plain |
|
|
|
append-to-body="true" modal="true" @click="filterConditionDialogFlag = true">设置筛选条件（选填）</el-button> |
|
|
|
</template> |
|
|
|
</el-popover> |
|
|
|
<div |
|
|
|
v-if="selectedChildTable1 !== '' && filterCondition1.conditionHtml !== ''" |
|
|
|
style="padding-top: 5px; width: auto;margin-left: 85px;height: 30px;cursor: pointer;display: inline-block;margin-top: 3px;" |
|
|
|
@click="filterConditionDialogHandle" v-html="filterCondition1.conditionHtml"></div> |
|
|
|
<el-divider v-if="selectedChildTable1 !== ''" /> |
|
|
|
<div |
|
|
|
v-if="selectedChildTable1 !== ''" |
|
|
|
style="background-color: #F0F0F0;border-radius: 5px;padding-bottom: 1px;margin-right: 10px;"><!-- #F5F7FA #E6F3FE #F0F0F0 #F5F7FA--> |
|
|
|
<template v-for="(item, index) in childRoles" :key="childRoles[index].id"> |
|
|
|
<div style="display: flex;margin-bottom: 10px;"> |
|
|
|
<el-tree-select |
|
|
|
v-model="leftValue1" style="width: 270px;" :data="leftTreeSource" placeholder="关联表单主表字段" |
|
|
|
check-strictly :render-after-expand="false" filterable @change="leftChanged" /> |
|
|
|
<span style="margin-left: 8px;margin-right: 8px;">的值填充到</span> |
|
|
|
<el-tree-select |
|
|
|
v-model="rightValue1" style="width: 270px;" :data="rightTreeSource" |
|
|
|
check-strictly :render-after-expand="false" placeholder="当前表单字段" filterable @change="rightChanged" /> |
|
|
|
<Delete style="width: 22px; height: 22px;cursor: pointer; color: #50A6FF; display: block; float:right;margin-left: 35px;margin-top: 4px;" @click="delChildRole(item)" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</div> |
|
|
|
<el-link v-if="selectedChildTable1 !== ''" type="primary" @click="addChildRole">十 添加规则</el-link> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="filterConditionDialoghandle" |
|
|
|
width="500" |
|
|
|
:show-close="true" |
|
|
|
title="筛选条件" |
|
|
|
append-to-body |
|
|
|
> |
|
|
|
{{ currentKey }} |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
v-model="filterConditionDialogFlag" style="margin-top:70px ;min-height: 500px" width="50%" |
|
|
|
:show-close="false" title="筛选条件" append-to-body> |
|
|
|
<div class="common-layout"> |
|
|
|
<el-container> |
|
|
|
<el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;"> |
|
|
|
<el-tree |
|
|
|
ref="fieldTreeRef" node-key="id" empty-text="选择关联的表单后展示" :data="asfasfFieldTree" |
|
|
|
:props="treeDefaultProps" :filter-node-method="filterNode" |
|
|
|
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;" |
|
|
|
@node-contextmenu="handleFieldTreeContextmenuRange" /> |
|
|
|
<el-tree |
|
|
|
ref="fieldTreeRef" node-key="id" empty-text="请先保存当前表单" :data="associatedFormsCurrentFormFieldTree" |
|
|
|
:props="treeDefaultProps" :filter-node-method="filterNode" |
|
|
|
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;" |
|
|
|
@node-contextmenu="handleFieldTreeContextmenuRange" /> |
|
|
|
<el-tree |
|
|
|
ref="orgTreeRef" style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;" |
|
|
|
:data="orgAndManTree" :props="treeDefaultProps" :filter-node-method="filterNode" |
|
|
|
@node-contextmenu="handleOrgTreeContextmenuRange" /> |
|
|
|
<el-tree |
|
|
|
ref="roleTreeRef" style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;" |
|
|
|
:data="roleTree" :props="treeDefaultProps" :filter-node-method="filterNode" |
|
|
|
@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: 38%; border-bottom: 0px;"> |
|
|
|
<AssociatedFormsTinyaceFillRoleFilterCondition |
|
|
|
ref="tinymceRef" :aft-text="filterCondition1.conditionHtml" |
|
|
|
:aft-text-copy="filterCondition1.conditionHtmlCopy" @text-change="aftTextChangedRange" |
|
|
|
@gongshi-change="aftGongshiChangedRange"></AssociatedFormsTinyaceFillRoleFilterCondition> |
|
|
|
</div> |
|
|
|
<div style="border: 1px solid gainsboro; height: 55%; padding-top: 20px;"> |
|
|
|
<ul> |
|
|
|
<li>请从左侧面板<span style="color: red">右击</span>选择字段或选项</li> |
|
|
|
<li>支持的符号：<span style="color: red">'==', '>=', '>', '<=', '<' , '!=' </span> |
|
|
|
</li> |
|
|
|
<li>支持<span style="color: red">"包含,不包含,数据拥有者,数据所属部门"</span>关键字,用于组织机构条件,角色条件,==运算符和!=运算符</li> |
|
|
|
<li>参考举例：</li> |
|
|
|
<span style="margin-left: 14px;">年龄>10</span><br> |
|
|
|
<span style="margin-left: 14px;">企管部==数据所属部门</span><br> |
|
|
|
<span style="margin-left: 14px;">绩效考核执行人包含数据拥有者</span><br> |
|
|
|
<span style="margin-left: 14px;">生产部包含数据所属部门</span> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
</div> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="filterConditionDialogHandle"> |
|
|
|
确定 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { Close } from '@element-plus/icons-vue' |
|
|
|
const filterConditionDialoghandle = ref(false) |
|
|
|
import AssociatedFormsTinyaceFillRoleFilterCondition from '@/widget/associatedforms/associatedFormsTinyaceFillRoleFilterCondition.vue' |
|
|
|
import { v4 as uuidv4 } from "uuid"; |
|
|
|
let emit = defineEmits(["delRole", "update:selectedChildTable",]); |
|
|
|
const props = defineProps({ |
|
|
|
orgAndManTree: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
roleTree: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
associatedFormsCurrentFormFieldTree: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
filterNode: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
treeDefaultProps: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
asfasfFieldTree: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
childTableList: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
@ -49,52 +162,90 @@ const props = defineProps({ |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
/* rightTreeSource: { |
|
|
|
filterCondition: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
rightValue: { |
|
|
|
currentKey: { |
|
|
|
type: String, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
},*/ |
|
|
|
currentKey: { |
|
|
|
type: String, |
|
|
|
}, |
|
|
|
childRoles: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}) |
|
|
|
|
|
|
|
//拿到子组件AssociatedFormsTinyace的实例 |
|
|
|
const tinymceRef = ref(); |
|
|
|
|
|
|
|
const filterConditionDialogFlag = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const selectedChildTable1 = ref() |
|
|
|
selectedChildTable1.value = props.selectedChildTable |
|
|
|
/*const rightValue1 = ref() |
|
|
|
|
|
|
|
const childRoles1 = ref() |
|
|
|
childRoles1.value = props.childRoles |
|
|
|
|
|
|
|
rightValue1.value = props.rightValue |
|
|
|
*/ |
|
|
|
const filterCondition1 = ref() |
|
|
|
filterCondition1.value = props.filterCondition |
|
|
|
|
|
|
|
|
|
|
|
let emit = defineEmits(["delRole","update:selectedChildTable",]); |
|
|
|
|
|
|
|
function selectedChildTableChanged(){ |
|
|
|
emit('update:selectedChildTable',selectedChildTable1) |
|
|
|
function filterConditionDialogHandle() { |
|
|
|
filterConditionDialogFlag.value = !filterConditionDialogFlag.value |
|
|
|
} |
|
|
|
/* |
|
|
|
function rightChanged(){ |
|
|
|
emit('update:rightValue',rightValue1) |
|
|
|
} */ |
|
|
|
|
|
|
|
function delRole(){ |
|
|
|
//alert(props.currentKey) |
|
|
|
emit('delRole',props.currentKey) |
|
|
|
|
|
|
|
function aftTextChangedRange(str: string) { |
|
|
|
filterCondition1.value.conditionHtml = str |
|
|
|
} |
|
|
|
|
|
|
|
function aftGongshiChangedRange(gongshi: any) { |
|
|
|
filterCondition1.value.gongShi.formulaHtml = gongshi.formulaHtml |
|
|
|
filterCondition1.value.gongShi.mathsFormula = gongshi.mathsFormula |
|
|
|
filterCondition1.value.gongShi.mathsString = gongshi.mathsString |
|
|
|
} |
|
|
|
|
|
|
|
function selectedChildTableChanged() { |
|
|
|
emit('update:selectedChildTable', selectedChildTable1) |
|
|
|
} |
|
|
|
|
|
|
|
function delChildRole(item: any) { |
|
|
|
let id = item.id |
|
|
|
for (var i = 0; i < childRoles1.value.length; i++) { |
|
|
|
if(childRoles1.value[i].id===id){ |
|
|
|
childRoles1.value.splice(i, 1); |
|
|
|
i--; // 如果不减，将漏掉一个元素 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
function addChildRole(){ |
|
|
|
let onlyNumber = uuidv4().replaceAll('-','').toString(); //获取唯一编码 |
|
|
|
childRoles1.value.push({ |
|
|
|
leftValue: '', |
|
|
|
rightValue: '', |
|
|
|
id: onlyNumber, |
|
|
|
}) |
|
|
|
} |
|
|
|
function delRole() { |
|
|
|
emit('delRole', props.currentKey) |
|
|
|
} |
|
|
|
function handleOrgTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) { |
|
|
|
tinymceRef.value.addIcon_org(object) |
|
|
|
} |
|
|
|
function handleRoleTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) { |
|
|
|
tinymceRef.value.addIcon(object) |
|
|
|
} |
|
|
|
function handleFieldTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) { |
|
|
|
tinymceRef.value.addIcon(object) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style></style> |
