From 093db03ab3e572e1dccd156fd166bbe4837139a1 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Tue, 15 Oct 2024 10:03:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BF=E6=A2=AD=E6=A1=86=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E9=80=89=E9=A1=B9=E6=97=B6=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=9A=84=E8=8A=82=E7=82=B9=E6=97=A0=E6=B3=95=E7=AB=8B?=
 =?UTF-8?q?=E5=8D=B3=E9=A2=84=E8=A7=88=E5=88=B0=EF=BC=8C=E9=9C=80=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E5=90=8E=E9=80=80=E5=87=BA=E9=87=8D=E8=BF=9B=E6=89=8D?=
 =?UTF-8?q?=E8=83=BD=E9=A2=84=E8=A7=88=E5=88=B0=E4=BF=AE=E6=94=B9=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84----bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DesignForm/formControlPropertiNew.vue     |  24 +-
 src/widget/lowcodetransfer/index.vue          |   9 +-
 .../lowcodetransfer/lowcodeTransfer.vue       | 458 ++++++++++++------
 3 files changed, 315 insertions(+), 176 deletions(-)

diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue
index 84eabfb..3a48fb3 100644
--- a/src/components/DesignForm/formControlPropertiNew.vue
+++ b/src/components/DesignForm/formControlPropertiNew.vue
@@ -1261,26 +1261,20 @@ const getPropByPath = (obj: any, path: string, val: any) => {
     }
     // 属性设置相关结束
 
-    const showAssociatedFormsFillRole = ref(true)
+    
 
     //关联表单数据填充时无法获取当前表单新增且保存的字段，只有关闭重启后方能获取----bug修改
-    const saveRefreshFormControlAttr = () => {
-        
-        //啊啊啊
-        
-            
-        //setTimeout(() => {
-            
-            getAssociatedFormsCurrentFieldTree1()
-        
-        
+    //穿梭框编辑固定选项时，修改的节点无法立即预览到，需保存后退出重进才能预览到修改后的----bug修改
+
+    const showAssociatedFormsFillRole = ref(true)
 
+    const saveRefreshFormControlAttr = () => {
+        getAssociatedFormsCurrentFieldTree1()
         showAssociatedFormsFillRole.value = false;
          // 等待一个短时间的延迟，确保组件卸载完成
-            setTimeout(() => {
-                showAssociatedFormsFillRole.value = true;
-            }, 200);
-        //}, 13000);
+        setTimeout(() => {
+            showAssociatedFormsFillRole.value = true;
+        }, 200);
     };
 
     // 多选固定选项删除
diff --git a/src/widget/lowcodetransfer/index.vue b/src/widget/lowcodetransfer/index.vue
index 4fe3971..cc71816 100644
--- a/src/widget/lowcodetransfer/index.vue
+++ b/src/widget/lowcodetransfer/index.vue
@@ -14,7 +14,7 @@
         <input  v-model="value" type="hidden" >
     </el-form-item>
 
-    <LowcodeTransfer :data="props.data" :selected-value="value" @checked-id-list-changed="checkedIdListChangedIndex" @update-model="updateModel" ></LowcodeTransfer>
+    <LowcodeTransfer  :key="componentKey"  :data="props.data"  :selected-value="value"  @checked-id-list-changed="checkedIdListChangedIndex" @update-model="updateModel"  @re-render-component="reRenderComponent"></LowcodeTransfer>
 </template>
 <script lang='ts' setup>
 import LowcodeTransfer   from './lowcodeTransfer.vue';
@@ -89,6 +89,13 @@ const value = computed({
 		updateModel(newVal)
     }
 })
+
+let componentKey = 0
+
+function reRenderComponent() {
+	componentKey++;
+}
+
 function waitModelHasValue(){
 	//console.log("waitModelHasValue")
 	setTimeout(()=>{
diff --git a/src/widget/lowcodetransfer/lowcodeTransfer.vue b/src/widget/lowcodetransfer/lowcodeTransfer.vue
index 2c57ec5..b5a6997 100644
--- a/src/widget/lowcodetransfer/lowcodeTransfer.vue
+++ b/src/widget/lowcodetransfer/lowcodeTransfer.vue
@@ -1,5 +1,9 @@
 <template>
-    <div  v-if="dataFinished" class="transfer"><!-- {{props.selectedValue}} -->
+    <!-- {{ props.data?.control.fixedOptions }} --><!-- {{transferConfig}} --><!-- {{ resData }} --><!-- {{ count1 }} -->
+    <!-- <hr>
+    <hr>
+    <hr> -->
+    <div v-if="dataFinished"  class="transfer"><!-- {{props.selectedValue}} -->
         <div class="leftArea"><!-- {{ selectedValueCompu }}{{checkedIdList}} -->
             <div class="transferName">{{ transferConfig.transferName }}</div>
             <div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;">
@@ -13,30 +17,33 @@
             </div>
             <div class="leftScroll">
                 <ElScrollbar height="100%">
-                    <ElTree
-                        ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" show-checkbox
-                        highlight-current :default-expand-all="isExpandAll" :filter-node-method="filterNode"
-                        @check="handleCheckList" @check-change="getCheckedList" />
+                    <ElTree ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps"
+                        show-checkbox highlight-current :default-expand-all="isExpandAll"
+                        :filter-node-method="filterNode" @check="handleCheckList" @check-change="getCheckedList" />
                 </ElScrollbar>
             </div>
         </div>
-        
+
         <div class="rigthArea">
             <div style="margin-bottom: 8px;">
-                <div class="transferName"><span>已选: {{ checkList.length }}</span><ElButton link  style="float: right;margin-right: 5px;" @click="clearCheckList" >清空</ElButton></div>
-                
-                
-                
+                <div class="transferName"><span>已选: {{ checkList.length }}</span>
+                    <ElButton link style="float: right;margin-right: 5px;" @click="clearCheckList">清空</ElButton>
+                </div>
+
+
+
             </div>
             <ElScrollbar height="calc(100% - 50px)">
-                <ElTag  v-for="user in checkList" :key="user.id" style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;" closable @close="handleCloseTag(user)">
-                {{
-                    user.label
-                }}[{{
+                <ElTag v-for="user in checkList" :key="user.id"
+                    style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;"
+                    closable @close="handleCloseTag(user)">
+                    {{
+                        user.label
+                    }}[{{
                         user.parent.data.label
                     }}]
                 </ElTag>
-                
+
             </ElScrollbar>
         </div>
     </div>
@@ -48,141 +55,183 @@ import { ref, watch, onMounted } from 'vue'
 import request from '@/utils/request';
 
 const props = defineProps({
-  // eslint-disable-next-line vue/require-default-prop
+    // eslint-disable-next-line vue/require-default-prop
     data: {
-		type: Object,
-		default() {
-			return {};
-		},
-	},
+        type: Object,
+        default() {
+            return {};
+        },
+    },
     selectedValue: {
-		type: Array,
-		default() {
-			return [];
-		},
-	},
+        type: Array,
+        default() {
+            return [];
+        },
+    },
 })
 
 
-const emits = defineEmits(['checkedIdListChanged','updateModel']);
-const fixedOptions = props.data?.control.fixedOptions
-const transferConfig = props.data?.config
+const emits = defineEmits(['checkedIdListChanged', 'updateModel','reRenderComponent']);
+/* const fixedOptions = ref([]) */
+/* fixedOptions.value = props.data?.control.fixedOptions */
+
+
+
+//const transferConfig = props.data?.config
+const transferConfig = computed({
+    set(){
+
+    },
+    get(){
+        
+        return props.data?.config
+        
+    }
+})
+
 const treeProps = {
     value: 'id',
     label: 'label',
     disabled: 'disabled',
     children: 'children'
 }
-let dataFinished = false
+let dataFinished = ref(false)
 const treeRef = ref()
 const isExpandAll = ref(false) // 是否全展开
 const keyword = ref('') // 搜索关键字
 const checkList = ref([]) // 选中的list
-const userList = ref([])
+const userList = computed({
+    
+    get(){
+        if (transferConfig.value.transferDataSource === "数据源") {
+            return [{
+                id: '全选',
+                label: '全选',
+                children: [...resData.value]
+            }]
+        }else{
+            return [{
+                id: '全选',
+                label: '全选',
+                children: props.data?.control.fixedOptions
+            }]
+        }
+        
+    },
+    set(){
+
+    }
+})
 let checkedIdList = ref([]);
 let count = 0
-function waitAndReGet(){
+function waitAndReGet() {
     /* console.log("waitAndReGet")
     console.log(props.selectedValue)
     console.log(props.selectedValue.value) */
-    setTimeout(()=>{
+    setTimeout(() => {
         let values = props.selectedValue.map(item => {
-                // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
-                return item;
-            });
-        if(props.selectedValue&&values){
+            // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
+            return item;
+        });
+        if (props.selectedValue && values) {
 
             /* console.log("有值")
             console.log(props.selectedValue)
             console.log(values) */
-			//return props.selectedValue.value
+            //return props.selectedValue.value
             checkedIdList.value = values
-		}else{
-            if(count<3){
+        } else {
+            if (count < 3) {
                 count++
                 waitAndReGet()
             }
-            
+
             /* console.log("waitAndReGet---else") */
-                
+
         }
-    },2000)
+    }, 2000)
 }
+/*
+
+    
+
+*/
+
 
 const selectedValueCompu = computed({
     get() {
         //console.log("get")
         //nextTick(()=>{
-            let values = props.selectedValue.map(item => {
-                // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
-                return item;
-            });
-			if(props.selectedValue&&values){
-                /* console.log(props.selectedValue.value)
-                console.log("computed---if") */
-				return values
-			}else{
-                waitAndReGet()
-                /* console.log("computed---else") */
-                return []
-                
-            }
-            
-		//})
-        
+        let values = props.selectedValue.map(item => {
+            // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
+            return item;
+        });
+        if (props.selectedValue && values) {
+            /* console.log(props.selectedValue.value)
+            console.log("computed---if") */
+            return values
+        } else {
+            waitAndReGet()
+            /* console.log("computed---else") */
+            return []
+
+        }
+
+        //})
+
     },
-    set(){}
+    set() { }
 })
 /* console.log(props.selectedValue) */
 
 
 
 
-const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
-
+const url = transferConfig.value.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
+let resData = ref([])
 
 
 function getDetail() {
     //console.log(11111)
-    if(transferConfig.transferDataSource==="数据源"){
+    if (transferConfig.value.transferDataSource === "数据源") {
         return request({
             url: url,
-            method: transferConfig.method,
+            method: transferConfig.value.method,
         });
     }
 }
-if(transferConfig.transferDataSource==="数据源"){
-    getDetail().then(({ data }) => {   
+if (transferConfig.value.transferDataSource === "数据源") {
+    getDetail().then(({ data }) => {
         //console.log(`获取穿梭框接口数据`);
-        let resData = ref(data.children)
+        resData.value = data.children
         // 全选方法2:插入 全选node
         userList.value = [{
             id: '全选',
             label: '全选',
             children: [...resData.value]
         }]
-        treeRef.value.setCheckedKeys(checkedIdList.value,true)
+        treeRef.value.setCheckedKeys(checkedIdList.value, true)
         setTimeout(() => {
             checkedIdList.value.forEach(element => {
-            const _node = treeRef?.value?.getNode(element)
-            if (!_node) return
-            const _checkList = checkList.value
-            if (_node.checked) { // 勾选时
-                if (_node.checked && _node.childNodes.length === 0) {   
-                    _checkList.push(_node)
-                }
-                // 通过new Set() 实现数据去重
-                checkList.value = Array.from(new Set(_checkList))
-                // 遍历子级,递归,直到获取最后一级的人员
-                if (_node.childNodes.length > 0) {
-                    _node.childNodes.map(item => handleCheckList(item.data))
+                const _node = treeRef?.value?.getNode(element)
+                if (!_node) return
+                const _checkList = checkList.value
+                if (_node.checked) { // 勾选时
+                    if (_node.checked && _node.childNodes.length === 0) {
+                        _checkList.push(_node)
+                    }
+                    // 通过new Set() 实现数据去重
+                    checkList.value = Array.from(new Set(_checkList))
+                    // 遍历子级,递归,直到获取最后一级的人员
+                    if (_node.childNodes.length > 0) {
+                        _node.childNodes.map(item => handleCheckList(item.data))
+                    }
+                } else if (!_node.checked) { // 取消勾选
+                    checkList.value = checkList.value.filter(item => item.checked)
                 }
-            } else if (!_node.checked) { // 取消勾选
-                checkList.value = checkList.value.filter(item => item.checked)
-            }   
             });
         }, 50);
-        
+
 
     });
 }
@@ -192,7 +241,7 @@ const getCheckedList = () => {
 
 
 
-    
+
 
 let resData1 = ref([
     {
@@ -261,15 +310,15 @@ let resData1 = ref([
             },
         ]
     }
-]) 
+])
 
 
 // 勾选或者取消勾选
 const handleCheckList = (val) => {
     const valId = val.id;
-    
+
     const _node = treeRef?.value?.getNode(valId)
-    
+
     if (!_node) return
     const _checkList = checkList.value
     if (_node.checked) { // 勾选时
@@ -323,7 +372,7 @@ const filterNode = (value, data, node) => {
 }
 // 通过tag 取消勾选
 const handleCloseTag = (tag) => {
-    
+
     if (!treeRef?.value) return
     checkList.value = checkList.value.filter(item => {
         treeRef.value.setChecked(tag, false)
@@ -364,103 +413,191 @@ watch(keyword, (newVal) => {
 
 
 //获取配置接口相应或获取固定选项值
-if(transferConfig.transferDataSource==="固定选项"){
+if (transferConfig.value.transferDataSource === "固定选项") {
     setTimeout(() => {
-        
-         // 全选方法2:插入 全选node
+
+        // 全选方法2:插入 全选node
         userList.value = [{
             id: '全选',
             label: '全选',
-            children: fixedOptions
+            children: props.data?.control.fixedOptions
         }]
         //console.log(treeRef)
         /* console.log(checkedIdList.value) */
-        treeRef.value.setCheckedKeys(checkedIdList.value,true)
+        treeRef.value.setCheckedKeys(checkedIdList.value, true)
         setTimeout(() => {
             checkedIdList.value.forEach(element => {
-            const _node = treeRef?.value?.getNode(element)
-            if (!_node) return
-            const _checkList = checkList.value
-            if (_node.checked) { // 勾选时
-                if (_node.checked && _node.childNodes.length === 0) {   
-                    _checkList.push(_node)
-                }
-                // 通过new Set() 实现数据去重
-                checkList.value = Array.from(new Set(_checkList))
-                // 遍历子级,递归,直到获取最后一级的人员
-                if (_node.childNodes.length > 0) {
-                    _node.childNodes.map(item => handleCheckList(item.data))
+                const _node = treeRef?.value?.getNode(element)
+                if (!_node) return
+                const _checkList = checkList.value
+                if (_node.checked) { // 勾选时
+                    if (_node.checked && _node.childNodes.length === 0) {
+                        _checkList.push(_node)
+                    }
+                    // 通过new Set() 实现数据去重
+                    checkList.value = Array.from(new Set(_checkList))
+                    // 遍历子级,递归,直到获取最后一级的人员
+                    if (_node.childNodes.length > 0) {
+                        _node.childNodes.map(item => handleCheckList(item.data))
+                    }
+                } else if (!_node.checked) { // 取消勾选
+                    checkList.value = checkList.value.filter(item => item.checked)
                 }
-            } else if (!_node.checked) { // 取消勾选
-                checkList.value = checkList.value.filter(item => item.checked)
-            }   
             });
         }, 50);
-        }, 50);
-        dataFinished = true
-    }else{
-        getDetail
-        dataFinished = true
+    }, 50);
+    dataFinished.value = true
+} else {
+    getDetail
+    dataFinished.value = true
+}
+/* setTimeout(()=>{
+    console.log("setTimeout")
+    if(props.data?.config.transferDataSource==="数据源"){
+        //emits('reRenderComponent');
+        count1.value++
     }
-    
-
-onMounted(() => {
-    
-})
+},1500) */
 
 
 
 // 监听 checkedIdList 的变化
 watch(checkedIdList, (newValue, oldValue) => {
     //console.log('checkedIdList 发生了变化', newValue);
-    emits('checkedIdListChanged',newValue);
-},{deep:true});
+    emits('checkedIdListChanged', newValue);
+}, { deep: true });
+
+let count1 = ref(0);
+
+
+    /* onBeforeMount(() => {
+            console.log('onBeforeMount: 组件即将挂载');
+            });
+
+            onMounted(() => {
+            console.log('onMounted: 组件已挂载');
+            });
+            onBeforeUpdate(() => {
+            console.log('onBeforeUpdate: 数据即将更新到 DOM');
+            
+            
+            });
+
+            onUpdated(() => {
+            console.log('onUpdated: DOM 已更新');
+            if(props.data?.config.transferDataSource==="数据源"){
+                console.log("emits('reRenderComponent');")
+                emits('reRenderComponent');
+            }
+            });
+            onBeforeUnmount(() => {
+            
+            console.log('onBeforeUnmount: 组件即将卸载，清除定时器');
+            });
+            onUnmounted(() => {
+            console.log('onUnmounted: 组件已卸载');
+            }); */
+
+watch(transferConfig, (newValue, oldValue) => {
+    
+    count1.value++
+    
+    //emits('reRenderComponent', newValue);
+    try {
+        
+        count1.value++
+		if (newValue.transferDataSource === "数据源") {
+            emits('reRenderComponent');
+            
+            
+            getDetail().then(({ data }) => {
+                //console.log(`获取穿梭框接口数据`);
+                resData.value = data.children
+                // 全选方法2:插入 全选node
+                userList.value = [{
+                    id: '全选',
+                    label: '全选',
+                    children: [...resData.value]
+                }]
+                treeRef.value.setCheckedKeys(checkedIdList.value, true)
+                setTimeout(() => {
+                    checkedIdList.value.forEach(element => {
+                        const _node = treeRef?.value?.getNode(element)
+                        if (!_node) return
+                        const _checkList = checkList.value
+                        if (_node.checked) { // 勾选时
+                            if (_node.checked && _node.childNodes.length === 0) {
+                                _checkList.push(_node)
+                            }
+                            // 通过new Set() 实现数据去重
+                            checkList.value = Array.from(new Set(_checkList))
+                            // 遍历子级,递归,直到获取最后一级的人员
+                            if (_node.childNodes.length > 0) {
+                                _node.childNodes.map(item => handleCheckList(item.data))
+                            }
+                        } else if (!_node.checked) { // 取消勾选
+                            checkList.value = checkList.value.filter(item => item.checked)
+                        }
+                    });
+                }, 50);
+
+
+            });
+        }
+        
+	} catch (error) {
+		console.error('Error :', error);
+		// 可以在这里进行一些错误处理，比如设置默认值或其他操作
+		//parsedData.value = null;
+	}
+    
+}, { deep: true });
 
 
 watch(selectedValueCompu, (newValue, oldValue) => {
     //console.log('selectedValueCompu 发生了变化', newValue);
     checkedIdList.value = selectedValueCompu.value
     //获取配置接口相应或获取固定选项值
-if(transferConfig.transferDataSource==="固定选项"){
-    setTimeout(() => {
-        
-         // 全选方法2:插入 全选node
-        userList.value = [{
-            id: '全选',
-            label: '全选',
-            children: fixedOptions
-        }]
-        //console.log(treeRef)
-        /* console.log(checkedIdList.value) */
-        treeRef.value.setCheckedKeys(checkedIdList.value,true)
+    if (transferConfig.value.transferDataSource === "固定选项") {
         setTimeout(() => {
-            checkedIdList.value.forEach(element => {
-            const _node = treeRef?.value?.getNode(element)
-            if (!_node) return
-            const _checkList = checkList.value
-            if (_node.checked) { // 勾选时
-                if (_node.checked && _node.childNodes.length === 0) {   
-                    _checkList.push(_node)
-                }
-                // 通过new Set() 实现数据去重
-                checkList.value = Array.from(new Set(_checkList))
-                // 遍历子级,递归,直到获取最后一级的人员
-                if (_node.childNodes.length > 0) {
-                    _node.childNodes.map(item => handleCheckList(item.data))
-                }
-            } else if (!_node.checked) { // 取消勾选
-                checkList.value = checkList.value.filter(item => item.checked)
-            }   
-            });
-        }, 50);
+
+            // 全选方法2:插入 全选node
+            userList.value = [{
+                id: '全选',
+                label: '全选',
+                children: props.data?.control.fixedOptions
+            }]
+            //console.log(treeRef)
+            /* console.log(checkedIdList.value) */
+            treeRef.value.setCheckedKeys(checkedIdList.value, true)
+            setTimeout(() => {
+                checkedIdList.value.forEach(element => {
+                    const _node = treeRef?.value?.getNode(element)
+                    if (!_node) return
+                    const _checkList = checkList.value
+                    if (_node.checked) { // 勾选时
+                        if (_node.checked && _node.childNodes.length === 0) {
+                            _checkList.push(_node)
+                        }
+                        // 通过new Set() 实现数据去重
+                        checkList.value = Array.from(new Set(_checkList))
+                        // 遍历子级,递归,直到获取最后一级的人员
+                        if (_node.childNodes.length > 0) {
+                            _node.childNodes.map(item => handleCheckList(item.data))
+                        }
+                    } else if (!_node.checked) { // 取消勾选
+                        checkList.value = checkList.value.filter(item => item.checked)
+                    }
+                });
+            }, 50);
         }, 50);
-        dataFinished = true
-    }else{
+        dataFinished.value = true
+    } else {
         getDetail
-        dataFinished = true
+        dataFinished.value = true
     }
     //emits('updateModel',newValue);
-},{deep:true});
+}, { deep: true });
 
 </script>
 
@@ -482,7 +619,7 @@ if(transferConfig.transferDataSource==="固定选项"){
     padding-left: 10px;
     border-radius: 5px 5px 0 0;
     border-bottom: 1px solid gainsboro;
-    
+
 }
 
 .buttonArea {
@@ -515,5 +652,6 @@ if(transferConfig.transferDataSource==="固定选项"){
     border-radius: 5px;
     height: 456px;
     background-color: white;
-    
-}</style>
+
+}
+</style>