关联表单v0.2

src/components/DesignForm/formControlAttr.vue

@@ -15,7 +15,9 @@ import { PublicAtrr } from '@/api/DesignForm/types'
 import { chineseToPinyin } from '@/api/DesignForm/requestapi'
 
 import { uploadUrl } from '@/api/DesignForm'
-import { UploadFilled } from '@element-plus/icons-vue'
+
+import request from '@/utils/request';
+
 import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
 
 import type Node from 'element-plus/es/components/tree/src/model/node'
@@ -592,6 +594,14 @@ const attrList = computed(() => {
 				path: 'config.componentName',
 				vShow: ['component']
 			},
+			{
+				label: '隐藏条件',
+				value: config.associatedForms,
+				path: 'config.associatedForms',
+				type: 'associatedForms_hide',
+				vIf: state.isSearch,
+				vShow: ['associatedForms']
+			},
 			{
 				label: '上传图片',
 				value: config.lowcodeImage,
@@ -1539,10 +1549,12 @@ const floatSelectOptions = [
 
 const dataSource = ref<Tree[]>([]) 
 interface Tree {
-	id: string
+	id?: string
 	label: string
-	disabled: boolean
+	disabled?: boolean
 	children?: Tree[]
+	parentId?: string
+	[key: string]: any
 }
 
 const addRootNode = () => {
@@ -1636,6 +1648,76 @@ const transferDataSourceOptions = [
 
 //liwenxuan20240313 lowcodeImage end
 
+
+//liwenxuan20240403 associatedForms start 
+
+const associatedFormsHideDialogFlag = ref(false)
+
+const defaultProps = {
+	children: 'children',
+	label: 'label',
+}
+
+function getAssociatedFormsCurrentFieldTree() {
+        return request({
+            url: '/javasys/lowCode/AssociatedForms/getCustomerFormList',
+            method: 'post',
+        });
+}
+
+function getAssociatedFormsOrgAndManTree() {
+        return request({
+            url: '/javasys/lowCode/transfer/getOrgAndManTree',
+            method: 'post',
+        });
+}
+const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
+
+getAssociatedFormsCurrentFieldTree().then(({ data }) => {   
+        let resData = ref(data.children)
+		associatedFormsCurrentFormFieldTree.value = [{
+            id: 'rootid',
+        	label: '当前表单',
+            children: [...resData.value]
+        }]
+});
+
+const orgAndManTree = ref<Tree[]>()
+	getAssociatedFormsOrgAndManTree().then(({ data }) => {   
+        let resData = ref(data.children)
+		orgAndManTree.value = [{
+            id: data.id,
+        	//label: data.label,
+			label: '组织机构',
+            children: [...resData.value]
+        }]
+});
+
+const fieldTreeSearchFlag = ref(false)
+
+function handleFieldTreeExpand(){
+	
+	fieldTreeSearchFlag.value = true;
+}
+
+function handleFieldTreeCollapse(){
+	
+	fieldTreeSearchFlag.value = false;
+}
+import { ElTree } from 'element-plus'
+const fieldTreeFilterText = ref('')
+const fieldTreeRef = ref<InstanceType<typeof ElTree>>()
+
+watch(fieldTreeFilterText, (val) => {
+	fieldTreeRef.value!.filter(val)
+})
+
+const filterNode = (value: string, data: Tree) => {
+	if (!value) return true
+	return associatedFormsCurrentFormFieldTree.value?.label.includes(value)
+}
+//liwenxuan20240403 associatedForms end
+
 </script>
 <template>
 	<div  class="sidebar-tools">
@@ -1928,6 +2010,10 @@ const transferDataSourceOptions = [
 								
 							</el-row>
 
+							<el-row v-else-if="item.type === 'associatedForms_hide'">
+								<el-button  type="primary" append-to-body="true" modal="true" @click="associatedFormsHideDialogFlag = true"  >设置隐藏条件</el-button>
+								
+							</el-row>
 							
 
 							<el-input
@@ -2486,7 +2572,7 @@ const transferDataSourceOptions = [
 	<!-- 轮播图设置弹窗 liwenxuan 20240122 end -->
 		
 	<!-- 穿梭框设置弹窗 liwenxuan 20240217 start -->
-	<el-dialog v-model="transferDialogTableVisible" title="创建穿梭框选项树" top="150px" style="margin-top:70px" width="50%">
+	<el-dialog v-model="transferDialogTableVisible" title="创建穿梭框选项树" top="150px" style="margin-top:70px;" width="50%" >
 		<div v-if="controlData.type=='lowcodeTransfer'">
 			<el-button type="success" plain style="margin-top: -35px;" @click="addRootNode()">新增根节点</el-button>
 			
@@ -2520,31 +2606,70 @@ const transferDataSourceOptions = [
 	<!-- 穿梭框设置弹窗 liwenxuan 20240217 end -->
 
 
-	<!-- <el-dialog v-model="dialogFormVisible_tree_edit" title="Shipping address" width="500">
+	<!-- 关联表单设置弹窗 liwenxuan 20240402 start -->
-		
+
-				<el-input v-model="nodeLabel" autocomplete="off" />
+	<el-dialog v-model="associatedFormsHideDialogFlag" title="隐藏条件" top="150px" style="margin-top:70px ;min-height: 500px" width="50%">
-			
+		
-		<template #footer>
+		<template v-if="controlData.type=='associatedForms'">
-			<div class="dialog-footer">
+			<div class="common-layout">
-				<el-button @click="dialogFormVisible = false">Cancel</el-button>
+				<el-container>
-				<el-button type="primary" @click="dialogFormVisible = false">
+				<el-aside width="300px" style="height:400px;border: 1px solid gainsboro;margin-right: 5px;">
-				Confirm
+					<el-input
-				</el-button>
+						v-model="fieldTreeFilterText"
+						v-show="fieldTreeSearchFlag"
+						style="width:98%;margin: 3px;"
+						placeholder="搜索字段"
+						class="filter-tree"
+						default-expand-all
+						:filter-node-method="filterNode"
+					/>
+					<el-tree
+						ref="fieldTreeRef"
+						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
+						:data="associatedFormsCurrentFormFieldTree"
+						:props="defaultProps"
+						@node-expand="handleFieldTreeExpand"
+						@node-collapse="handleFieldTreeCollapse"
+					/>
+					<el-tree
+						style="max-width: 600px; border: 1px solid gainsboro; margin: 3px;"
+						:data="orgAndManTree"
+						:props="defaultProps"
+						
+					/>
+				</el-aside>
+				<el-main style="border: 1px solid gainsboro;">
+					Main
+				</el-main>
+				</el-container>
 			</div>
 		</template>
-	</el-dialog> -->
+		<template #footer>
+		<div class="dialog-footer">
+			<el-button @click="associatedFormsHideDialogFlag = false">取消</el-button>
+			<el-button type="primary" @click="associatedFormsHideDialogFlag = false">
+			确定
+			</el-button>
+		</div>
+    </template>
+	</el-dialog>
+
+	<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
+
+
+	
 </template>
 <style  lang='scss' scoped>
 
 
 //!!!!!!!!!!!!!!!!!穿梭框编辑树样式start
 .custom-tree-node {
-  flex: 1;
+	flex: 1;
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: space-between;
+	justify-content: space-between;
-  font-size: 14px;
+	font-size: 14px;
-  padding-right: 8px;
+	padding-right: 8px;
 }
 .custom-tree-node:hover{
 	background-color:antiquewhite;

src/widget/associatedforms/associatedForms.vue

@@ -1,7 +1,7 @@
 <template>
 
 
-  fdssdafsdaf
+  <el-input v-model="input" style="width: 240px" placeholder="" />
 
 
 </template>