Browse Source

关联表单-数据填充规则-v0.25

lwx_v6
liwenxuan 1 year ago
parent
commit
5f02bdd5c2
  1. 44
      src/components/DesignForm/formControlPropertiNew.vue
  2. 245
      src/widget/associatedforms/associatedFormsChildFillRole.vue

44
src/components/DesignForm/formControlPropertiNew.vue

@ -4298,13 +4298,13 @@ const radioChangeSet = (val:any) => {
<div class="common-layout">
<el-container>
<el-aside width="300px" style="height:420px;border: 1px solid gainsboro;margin-right: 5px;">
<el-input
<!-- <el-input
v-show="fieldTreeSearchFlag"
v-model="fieldTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
/> -->
<el-tree
ref="fieldTreeRef"
node-key="id"
@ -4320,13 +4320,13 @@ const radioChangeSet = (val:any) => {
/>
<el-input
<!-- <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;"
@ -4338,13 +4338,13 @@ const radioChangeSet = (val:any) => {
@node-contextmenu="handleOrgTreeContextmenu"
/>
<el-input
<!-- <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;"
@ -4415,13 +4415,13 @@ const radioChangeSet = (val:any) => {
@node-collapse="handleFieldTreeCollapse"
@node-contextmenu="handleFieldTreeContextmenuRange"
/>
<el-input
<!-- <el-input
v-show="fieldTreeSearchFlag"
v-model="fieldTreeFilterText"
style="width:98%;margin: 3px;"
placeholder="搜索字段"
class="filter-tree"
/>
/> -->
<el-tree
ref="fieldTreeRef"
node-key="id"
@ -4434,13 +4434,13 @@ const radioChangeSet = (val:any) => {
@node-collapse="handleFieldTreeCollapse"
@node-contextmenu="handleFieldTreeContextmenuRange"
/>
<el-input
<!-- <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;"
@ -4452,13 +4452,13 @@ const radioChangeSet = (val:any) => {
@node-contextmenu="handleOrgTreeContextmenuRange"
/>
<el-input
<!-- <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;"
@ -4515,7 +4515,7 @@ const radioChangeSet = (val:any) => {
<el-dialog v-model="associatedFormsFillRolesDialogFlag" title="数据填充规则" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 300px;max-height:800px" width="50%" >
<el-dialog v-model="associatedFormsFillRolesDialogFlag" title="数据填充规则" top="150px" :close-on-click-modal="false" :show-close="false" style="margin-top:70px ;min-height: 300px;max-height:800px" width="80%" >
<template v-if="controlData.type=='associatedForms'">
@ -4549,10 +4549,26 @@ const radioChangeSet = (val:any) => {
<el-button style="font-size: large;margin-top: 3px;margin-bottom: 15px;" type="primary" link append-to-body="true" modal="true" @click="addChildFillRole"> 子表填充规则</el-button>
</template>
</el-popover>
<div v-if="currentChildTableCount>0"><!-- asfasfChildTableList -->
<div v-if="currentChildTableCount>0">
<template v-for="(item, index) in controlData.control.fillRoles.child" :key="controlData.control.fillRoles.child[index].id">
<AssociatedFormsChildFillRole
v-model:selected-child-table="controlData.control.fillRoles.child[index].tableKey"
v-model:filter-condition="controlData.control.fillRoles.child[index].filterCondition"
:asfasf-field-tree="asfasfFieldTree"
:tree-default-props="treeDefaultProps"
:filter-node="filterNode"
:handle-field-tree-expand="handleFieldTreeExpand"
:handle-field-tree-collapse="handleFieldTreeCollapse"
:handle-field-tree-contextmenu-range="handleFieldTreeContextmenuRange"
:org-and-man-tree="orgAndManTree"
:handle-org-tree-expand="handleOrgTreeExpand"
:handle-org-tree-collapse = "handleOrgTreeCollapse"
:handle-org-tree-contextmenu-range = "handleOrgTreeContextmenuRange"
:role-tree="roleTree"
:handle-role-tree-expand="handleRoleTreeExpand"
:handle-role-tree-collapse="handleRoleTreeCollapse"
:handle-role-tree-contextmenu-range="handleRoleTreeContextmenuRange"
:associated-forms-current-form-field-tree= "associatedFormsCurrentFormFieldTree"
:current-key="controlData.control.fillRoles.child[index].id"
:child-table-list="asfasfChildTableList"
@del-role = "delChildRole"

245
src/widget/associatedforms/associatedFormsChildFillRole.vue

@ -1,67 +1,219 @@
<!-- 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"/>
<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>
<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" /> -->
v-model="selectedChildTable1" style="width: 290px;margin-bottom: -1px" :data="childTableList"
placeholder="请选择关联表单子表" check-strictly :render-after-expand="false" filterable
@change="selectedChildTableChanged" />
<el-button
v-if="selectedChildTable1 === '' || filterCondition1.conditionHtml === ''"
style="padding-top: 8px; width: 290px;margin-left: 85px;height: 30px;" type="info" plain append-to-body="true"
modal="true" @click="filterConditionDialogFlag = true">设置筛选条件选填</el-button>
<div
v-if="selectedChildTable1 !== '' && filterCondition1.conditionHtml !== ''"
style="padding-top: 5px; width: auto;margin-left: 85px;height: 30px;cursor: pointer;display: inline-block;border: gray 1px solid;margin-top: 3px;"
@click="filterConditionDialogHandle" v-html="filterCondition1.conditionHtml"></div>
</div>
<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-expand="handleFieldTreeExpand"
@node-collapse="handleFieldTreeCollapse" @node-contextmenu="handleFieldTreeContextmenuRange" />
<!-- <el-input
v-show="fieldTreeSearchFlag" v-model="fieldTreeFilterText" style="width:98%;margin: 3px;"
placeholder="搜索字段" class="filter-tree" /> -->
<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-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: 38%; border-bottom: 0px;">
<AssociatedFormsTinyaceFillRoleFilterCondition ref="aftRange" :aft-text="conditionHtml"
:aft-text-copy="conditionHtmlCopy" @text-change="aftTextChangedRange"
@gongshi-change="aftGongshiChangedRange"></AssociatedFormsTinyaceFillRoleFilterCondition>
<!-- <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> -->
</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>
<el-dialog
v-model="filterConditionDialoghandle"
width="500"
:show-close="true"
title="筛选条件"
append-to-body
>
{{ currentKey }}
<template #footer>
<div class="dialog-footer">
<!-- <el-button @click="asfhTextCancelRange">取消</el-button> -->
<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'
let emit = defineEmits(["delRole", "update:selectedChildTable",]);
const props = defineProps({
childTableList: {
orgAndManTree:{
type: Object,
default() {
return {}
}
},
selectedChildTable: {
type: String,
handleRoleTreeExpand:{
type: Object,
default() {
return {}
}
},
/* rightTreeSource: {
handleRoleTreeCollapse:{
type: Object,
default() {
return {}
}
},
rightValue: {
handleRoleTreeContextmenuRange:{
type: Object,
default() {
return {}
}
},
roleTree:{
type: Object,
default() {
return {}
}
},
handleOrgTreeExpand:{
type: Object,
default() {
return {}
}
},
associatedFormsCurrentFormFieldTree:{
type: Object,
default() {
return {}
}
},
handleOrgTreeCollapse:{
type: Object,
default() {
return {}
}
},
handleOrgTreeContextmenuRange:{
type: Object,
default() {
return {}
}
},
handleFieldTreeContextmenuRange:{
type: Object,
default() {
return {}
}
},
handleFieldTreeCollapse:{
type: Object,
default() {
return {}
}
},
handleFieldTreeExpand:{
type: Object,
default() {
return {}
}
},
filterNode:{
type: Object,
default() {
return {}
}
},
treeDefaultProps:{
type: Object,
default() {
return {}
}
},
asfasfFieldTree:{
type: Object,
default() {
return {}
}
},
childTableList: {
type: Object,
default() {
return {}
}
},
selectedChildTable: {
type: String,
default() {
return {}
}
},*/
},
filterCondition: {
type: Object,
default() {
return {}
}
},
currentKey: {
type: String,
default() {
@ -69,27 +221,40 @@ const props = defineProps({
}
},
})
const filterConditionDialogFlag = ref(false)
const selectedChildTable1 = ref()
selectedChildTable1.value = props.selectedChildTable
/*const rightValue1 = ref()
rightValue1.value = props.rightValue
*/
const filterCondition1 = ref()
filterCondition1.value = props.filterCondition
let emit = defineEmits(["delRole","update:selectedChildTable",]);
function filterConditionDialogHandle() {
filterConditionDialogFlag.value = !filterConditionDialogFlag.value
}
function aftTextChangedRange(str:string){
props.conditionHtml = str
}
function aftGongshiChangedRange(gongshi:any){
props.formulaHtml = gongshi.formulaHtml
props.mathsFormula = gongshi.mathsFormula
props.mathsString = gongshi.mathsString
}
function selectedChildTableChanged() {
emit('update:selectedChildTable', selectedChildTable1)
}
/*
function rightChanged(){
emit('update:rightValue',rightValue1)
} */
function delRole() {
//alert(props.currentKey)
emit('delRole', props.currentKey)
}

Loading…
Cancel
Save