Browse Source

关联表单v0.3

liwenxuan_v4
liwenxuan 2 years ago
parent
commit
abb44675d1
  1. 53
      src/components/DesignForm/formControlAttr.vue

53
src/components/DesignForm/formControlAttr.vue

@ -1660,8 +1660,11 @@ const defaultProps = {
function getAssociatedFormsCurrentFieldTree() { function getAssociatedFormsCurrentFieldTree() {
return request({ return request({
url: '/javasys/lowCode/AssociatedForms/getCustomerFormList', url: '/javasys/lowCode/AssociatedForms/getFieldTree',
method: 'post', method: 'post',
data: {
cfid:'13'
},
}); });
} }
@ -1675,8 +1678,9 @@ const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
getAssociatedFormsCurrentFieldTree().then(({ data }) => { getAssociatedFormsCurrentFieldTree().then(({ data }) => {
let resData = ref(data.children) let resData = ref(data.children)
//let rootid_ = data.value.label
associatedFormsCurrentFormFieldTree.value = [{ associatedFormsCurrentFormFieldTree.value = [{
id: 'rootid', id: 'rootid_'+data.label,
label: '当前表单', label: '当前表单',
children: [...resData.value] children: [...resData.value]
}] }]
@ -1704,6 +1708,16 @@ function handleFieldTreeCollapse(){
fieldTreeSearchFlag.value = false; fieldTreeSearchFlag.value = false;
} }
function handleFieldTreeNodeclick(){
}
function handleFieldTreeContextmenu(MouseEvent:any, object:any, Node:any, element:any){
//console.log(MouseEvent)
console.log(object)
//console.log(Node)
//console.log(element)
}
import { ElTree } from 'element-plus' import { ElTree } from 'element-plus'
const fieldTreeFilterText = ref('') const fieldTreeFilterText = ref('')
const fieldTreeRef = ref<InstanceType<typeof ElTree>>() const fieldTreeRef = ref<InstanceType<typeof ElTree>>()
@ -1712,10 +1726,11 @@ watch(fieldTreeFilterText, (val) => {
fieldTreeRef.value!.filter(val) fieldTreeRef.value!.filter(val)
}) })
const filterNode = (value: string, data: Tree) => { const filterNode = (value: string, associatedFormsCurrentFormFieldTree: Tree) => {
if (!value) return true if (!value) return true
return associatedFormsCurrentFormFieldTree.value?.label.includes(value) return associatedFormsCurrentFormFieldTree.label.includes(value)
} }
//liwenxuan20240403 associatedForms end //liwenxuan20240403 associatedForms end
</script> </script>
@ -2615,21 +2630,26 @@ const filterNode = (value: string, data: Tree) => {
<el-container> <el-container>
<el-aside width="300px" style="height:400px;border: 1px solid gainsboro;margin-right: 5px;"> <el-aside width="300px" style="height:400px;border: 1px solid gainsboro;margin-right: 5px;">
<el-input <el-input
v-model="fieldTreeFilterText"
v-show="fieldTreeSearchFlag" v-show="fieldTreeSearchFlag"
v-model="fieldTreeFilterText"
style="width:98%;margin: 3px;" style="width:98%;margin: 3px;"
placeholder="搜索字段" placeholder="搜索字段"
class="filter-tree" class="filter-tree"
default-expand-all
:filter-node-method="filterNode"
/> />
<el-tree <el-tree
ref="fieldTreeRef" ref="fieldTreeRef"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
:data="associatedFormsCurrentFormFieldTree" :data="associatedFormsCurrentFormFieldTree"
:props="defaultProps" :props="defaultProps"
:filter-node-method="filterNode"
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
@node-expand="handleFieldTreeExpand" @node-expand="handleFieldTreeExpand"
@node-collapse="handleFieldTreeCollapse" @node-collapse="handleFieldTreeCollapse"
@node-click="handleFieldTreeNodeclick"
@node-contextmenu="handleFieldTreeContextmenu"
/> />
<el-tree <el-tree
style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;" style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
@ -2638,15 +2658,17 @@ const filterNode = (value: string, data: Tree) => {
/> />
</el-aside> </el-aside>
<el-main style="border: 1px solid gainsboro;"> <el-main style="border: 1px solid gainsboro; padding: 3px;" class="associatedFormsHideDialogMain">
Main <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;"></div>
<div style="border: 1px solid gainsboro; height: 30%;"></div>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="associatedFormsHideDialogFlag = false">取消</el-button> <!-- <el-button @click="associatedFormsHideDialogFlag = false">取消</el-button> -->
<el-button type="primary" @click="associatedFormsHideDialogFlag = false"> <el-button type="primary" @click="associatedFormsHideDialogFlag = false">
确定 确定
</el-button> </el-button>
@ -2676,4 +2698,13 @@ const filterNode = (value: string, data: Tree) => {
} }
//!!!!!!!!!!!!!!!!!穿end //!!!!!!!!!!!!!!!!!穿end
.associatedFormsHideDialogMain7{
display: flex;
}
.el-main{
--el-main-padding: 5px
}
</style> </style>

Loading…
Cancel
Save