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

src/components/DesignForm/formControlPropertiNew.vue

@@ -2581,14 +2581,33 @@ watch(associatedFormsDataRangeDialogFlag, (val) => {
     }
 })
 //关联表单数据填充规则根据已选择子表的数目和id将已选择的子表置为不可选择
-watch(() => controlData.value.control?.fillRoles?.child?.length, (newValue, oldValue) => {
-    /* if (newValue!== oldValue) {
-        console.log('变量值发生变化：', newValue);
-    } */
-    console.log(asfasfChildTableList.value)
-    console.log(controlData.value.control?.fillRoles?.child)
-});
-
+function selectedOrDelChildRole(){
+    
+    //console.log(asfasfChildTableList.value)
+    //console.log(controlData.value.control?.fillRoles?.child)
+    let selectedArr: any[] = []
+    controlData.value.control?.fillRoles?.child.forEach(function(item: any) {
+        if(item.tableKey!=""){
+            selectedArr.push(item)
+        }
+    });
+    //console.log(selectedArr)
+    if(asfasfChildTableList.value){
+        asfasfChildTableList.value[0].children?.forEach(function(item: any){   
+            item.disabled=false
+        })
+    }
+    if(asfasfChildTableList.value){
+        asfasfChildTableList.value[0].children?.forEach(function(item: any){   
+            selectedArr.forEach(function(i: any){
+                if(i.tableKey==item.id){
+                    item.disabled=true
+                }
+            })
+        })
+    }
+    
+}
 
 
 //确定回调
@@ -2655,6 +2674,7 @@ function addChildFillRole(){
     //子表填充规则要受到子表数量的限制
     //currentChildTableCount
     //controlData.value.control.fillRoles.child.length
+    selectedOrDelChildRole()
 if(controlData.value.control.fillRoles.child.length<currentChildTableCount){
         let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码
         let onlyNumber1 = uuidv4().replaceAll('-','').toString();   //获取唯一编码
@@ -2693,7 +2713,9 @@ function delRole(id:String){
 }
 
 
+
 function delChildRole(id:String){
+    
     const delRoleData:any = controlData.value.control.fillRoles.child
         for (var i = 0; i < delRoleData.length; i++) {
             if(delRoleData[i].id===id){
@@ -2701,6 +2723,7 @@ function delChildRole(id:String){
                 i--; // 如果不减，将漏掉一个元素
             }
         }
+        selectedOrDelChildRole()
 }
 const associatedFormsChooseDialogFlag = ref(false)
 function chooseAssociatedForm(){
@@ -4590,7 +4613,7 @@ const radioChangeSet = (val:any) => {
                         v-model:selected-child-table="controlData.control.fillRoles.child[index].tableKey"  
                         v-model:filter-condition="controlData.control.fillRoles.child[index].filterCondition"
                         v-model:child-roles = "controlData.control.fillRoles.child[index].childRoles"
-                        v-model:child-table-list="asfasfChildTableList"
+                        :child-table-list="asfasfChildTableList"
                         :asfasf-field-tree="asfasfFieldTree"
                         :tree-default-props="treeDefaultProps"
                         :filter-node="filterNode"
@@ -4602,7 +4625,7 @@ const radioChangeSet = (val:any) => {
                         :associated-forms-current-form-field-tree= "associatedFormsCurrentFormFieldTree"  
                         :asfasf-child-table-fields = "asfasfChildTableFields"
                         :current-key="controlData.control.fillRoles.child[index].id" 
-                        
+                        @selected-or-del-child-role = "selectedOrDelChildRole"
                         @del-role = "delChildRole"
                         >
                     </AssociatedFormsChildFillRole>

src/widget/associatedforms/associatedFormsChildFillRole.vue

@@ -1,12 +1,12 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <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;padding-bottom:16px;color: black;"><!-- {{asfasfChildTableFields}} -->
+    style="background-color: #F0F0F0;padding: 12px;border-radius: 5px;padding-left:45px;margin-bottom:20px;margin-right:11px;min-height: 65px;padding-top: 16px;padding-bottom: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="selectedChildTable1" style="width: 270px;margin-bottom: -1px" :data="childTableList1"
+      v-model="selectedChildTable1"  style="width: 270px;margin-bottom: -1px" :data="childTableList" :disabled="isDisabled"
       placeholder="请选择关联表单子表" check-strictly :render-after-expand="false" filterable
       @change="selectedChildTableChanged" />
     <el-popover placement="top-end" title="" :width="200" trigger="hover" content="若【设置筛选条件】，则仅填充满足筛选条件的子表数据">
@@ -25,16 +25,16 @@
     <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;"><!-- {{ asfasfChildTableFields[0].children.filter((item :any)=>{return item.id==selectedChildTable}) }} -->
+      <template v-for="(item, index) in childRoles1" :key="childRoles1[index].id">
+        <div style="display: flex;margin-bottom: 10px;">
         <el-tree-select 
-            v-model="leftValue1" style="width: 270px;" :data="asfasfChildTableFields[0].children.filter((item :any)=>{return item.id==selectedChildTable})" placeholder="关联表单子表字段"
-            check-strictly :render-after-expand="false" filterable  @change="leftChanged" />
+            v-model="childRoles1[index].leftValue" style="width: 270px;" :data="asfasfChildTableFields[0].children.filter((item :any)=>{return item.id==selectedChildTable})" placeholder="关联表单子表字段"
+            check-strictly :render-after-expand="false" filterable />
           <span style="margin-left: 8px;margin-right: 8px;">的值填充到</span>
           <el-tree-select 
-            v-model="rightValue1" style="width: 270px;" :data="rightTreeSource"
+            v-model="childRoles1[index].rightValue" 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)" />
+            <Delete v-if="childRoles1.length>1" style="width: 22px; height: 22px;cursor: pointer; color: #50A6FF; display: block;  float:right;margin-left: 35px;margin-top: 4px;" @click="delChildRole(item)" />
 
         </div>
         
@@ -112,7 +112,7 @@
 import { Close } from '@element-plus/icons-vue'
 import AsfTmFillRoleFilterCondi from '@/widget/associatedforms/asfTmFillRoleFilterCondi.vue'
 import { v4 as uuidv4 } from "uuid";
-let emit = defineEmits(["delRole", "update:selectedChildTable","update:childTableList"]);
+let emit = defineEmits(["delRole", "update:selectedChildTable","update:childTableList","selectedOrDelChildRole"]);
 const props = defineProps({
   asfasfChildTableFields: {
     type: Object,
@@ -197,8 +197,6 @@ const filterConditionDialogFlag = ref(false)
 const selectedChildTable1 = ref()
 selectedChildTable1.value = props.selectedChildTable
 
-const childTableList1 = ref()
-childTableList1.value = props.childTableList
 
 const childRoles1 = ref()
 childRoles1.value = props.childRoles
@@ -206,15 +204,9 @@ childRoles1.value = props.childRoles
 const filterCondition1 = ref()
 filterCondition1.value = props.filterCondition
 
+const isDisabled = computed(() =>!!selectedChildTable1.value&&(childRoles1.value.length>1||childRoles1.value[0]?.leftValue!=""));
 
 
-/* for(let i=0;i<props.asfasfChildTableFields.value[0].children.length;i++){
-  childTable.push({
-    id:props.asfasfChildTableFields.value[0].children[i].id
-  })
-}
- */
-
 
 function filterConditionDialogHandle() {
   filterConditionDialogFlag.value = !filterConditionDialogFlag.value
@@ -230,18 +222,9 @@ function aftGongshiChangedRange(gongshi: any) {
   filterCondition1.value.gongShi.mathsString = gongshi.mathsString
 }
 
-function selectedChildTableChanged() {
-  emit('update:selectedChildTable', selectedChildTable1)
-  //选择了某个子表,要求已经被选中的子表设其为不可选
-  console.log(childTableList1.value)
-  for(let i = 0;i<childTableList1.value[0].children.length;i++){
-    if(childTableList1.value[0].children[i].id==selectedChildTable1.value){
-      //alert(1)
-      childTableList1.value[0].children[i].disabled = true
-    }
-  }
-  console.log(childTableList1)
-  emit('update:childTableList', childTableList1)
+function selectedChildTableChanged(event:any) {
+    emit('update:selectedChildTable', selectedChildTable1)
+    emit('selectedOrDelChildRole')
 }
 
 function delChildRole(item: any) {
@@ -273,6 +256,9 @@ function handleRoleTreeContextmenuRange(MouseEvent: any, object: any, Node: any,
 function handleFieldTreeContextmenuRange(MouseEvent: any, object: any, Node: any, element: any) {
   tinymceRef.value.addIcon(object)
 }
+onMounted(() => {
+  emit('selectedOrDelChildRole')
+})
 </script>
 
 <style></style>