From 0d4fa6bb0f76f13c77aaa828aaa10496c7271271 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Tue, 23 Sep 2025 11:34:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=94=A8=E6=88=B7=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=8C=83=E5=9B=B4=20=E6=A0=B9=E6=8D=AE=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E8=AE=BE=E7=BD=AE=E5=8F=AF=E9=80=89=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lowcodetransfer/lowcodeTransfer1.vue      | 896 ++++++++++++++++++
 1 file changed, 896 insertions(+)
 create mode 100644 src/widget/lowcodetransfer/lowcodeTransfer1.vue

diff --git a/src/widget/lowcodetransfer/lowcodeTransfer1.vue b/src/widget/lowcodetransfer/lowcodeTransfer1.vue
new file mode 100644
index 0000000..33c733d
--- /dev/null
+++ b/src/widget/lowcodetransfer/lowcodeTransfer1.vue
@@ -0,0 +1,896 @@
+<template>
+    <!-- {{ 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;">
+                <ElInput v-model="keyword" placeholder="搜索">
+                    <template #prefix>
+                        <ElIcon class="el-input__icon">
+                            <Search />
+                        </ElIcon>
+                    </template>
+                </ElInput>
+            </div>
+            <div class="leftScroll">
+                <ElScrollbar height="100%">
+                    <ElTree ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList1" :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>
+            <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
+                    }}[{{
+                        user.parent.data.label
+                    }}]
+                </ElTag>
+
+            </ElScrollbar>
+        </div>
+    </div>
+</template>
+
+<script setup name="MultiTreeSelector">
+import { ref, watch, onMounted } from 'vue'
+
+import request from '@/utils/request';
+import { forEach } from 'jszip';
+
+const props = defineProps({
+    // eslint-disable-next-line vue/require-default-prop
+    data: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+    selectedValue: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+})
+
+
+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 = ref(false)
+const treeRef = ref()
+const isExpandAll = ref(transferConfig.value.transferDataSource != "数据源") // 是否全展开
+const keyword = ref('') // 搜索关键字
+const checkList = ref([]) // 选中的list
+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 userList1 = ref([]);
+//
+let checkedIdList = ref([]);
+let count = 0
+function waitAndReGet() {
+    /* console.log("waitAndReGet")
+    console.log(props.selectedValue)
+    console.log(props.selectedValue.value) */
+    setTimeout(() => {
+        let values = props.selectedValue.map(item => {
+            // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
+            return item;
+        });
+        if (props.selectedValue && values) {
+
+            /* console.log("有值")
+            console.log(props.selectedValue)
+            console.log(values) */
+            //return props.selectedValue.value
+            checkedIdList.value = values
+        } else {
+            if (count < 3) {
+                count++
+                waitAndReGet()
+            }
+
+            /* console.log("waitAndReGet---else") */
+
+        }
+    }, 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 []
+
+        }
+
+        //})
+
+    },
+    set() { }
+})
+/* console.log(props.selectedValue) */
+
+
+
+
+const url = transferConfig.value.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
+let resData = ref([])
+function endsWithGetOrgAndManTree(str) {
+    // 检查输入是否为字符串
+    if (typeof str !== 'string') {
+        return false;
+    }
+    const suffix = 'getOrgAndManTree';
+    // 当字符串长度小于后缀长度时，直接返回false
+    if (str.length < suffix.length) {
+        return false;
+    }
+    // 获取字符串末尾与后缀长度相同的子字符串并比较
+    return str.slice(-suffix.length) === suffix;
+}
+function processTreeData(node) {
+    if(!endsWithGetOrgAndManTree(url)){
+        return node
+    }
+    // 检查节点及其所有子孙节点中是否存在id长度大于4的节点
+    function hasLongIdNode(node) {
+        // 检查当前节点id长度
+        if (node.id && node.id.length > 4) {
+            return true;
+        }
+        
+        // 处理子节点（考虑children为null的情况）
+        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+            for (const child of node.children) {
+                if (hasLongIdNode(child)) {
+                    return true;
+                }
+            }
+        }
+        
+        return false;
+    }
+    
+    // 递归处理节点
+    function processNode(node) {
+        // 如果当前节点及其所有子孙都没有长id，则移除该节点
+        if (!hasLongIdNode(node)) {
+            return null;
+        }
+        
+        // 复制节点避免修改原对象
+        const newNode = {...node};
+        
+        // 处理子节点
+        if (newNode.children && Array.isArray(newNode.children) && newNode.children.length > 0) {
+            // 递归处理每个子节点并过滤掉需要移除的
+            newNode.children = newNode.children
+                .map(child => processNode(child))
+                .filter(child => child !== null);
+            
+            // 如果所有子节点都被移除，保持children为null
+            if (newNode.children.length === 0) {
+                newNode.children = null;
+            }
+        }
+        
+        return newNode;
+    }
+    
+    return processNode(node);
+}
+
+function getDetail() {
+    //console.log(11111)
+    if (transferConfig.value.transferDataSource === "数据源") {
+        return request({
+            url: url,
+            method: transferConfig.value.method,
+        });
+    }
+}
+if (transferConfig.value.transferDataSource === "数据源") {
+    getDetail().then(({ data }) => {
+        checkedIdList.value = props.selectedValue
+        
+        const data1 = processTreeData(data)
+
+
+
+
+        //console.log(`获取穿梭框接口数据`);
+        resData.value = data1.children
+        // 全选方法2:插入 全选node
+        userList.value = [{
+            id: '全选',
+            label: '全选',
+            children: [...resData.value]
+        }]
+        userList1.value = userList.value
+        if( treeRef.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);
+
+
+    });
+}
+const getCheckedList = () => {
+    checkedIdList.value = treeRef.value.getCheckedKeys(true)
+}
+
+
+
+
+
+let resData1 = ref([
+    {
+        id: '3',
+        label: '营销部',
+        children: [
+            {
+                id: '3-1',
+                label: '威震天'
+            },
+            {
+                id: '3-2',
+                label: '嫦娥'
+            }
+        ]
+    },
+    {
+        id: '2',
+        label: '业务部',
+        children: [
+            {
+                id: '2-1-1',
+                label: '业务部子部1',
+                children: [
+                    {
+                        id: '2-1-0001',
+                        label: '李白'
+                    },
+                    {
+                        id: '2-1-0002',
+                        label: '萧峰'
+                    }
+                ]
+            },
+            {
+                id: '2-2-1',
+                label: '业务部子部2',
+                children: [
+                    {
+                        id: '2-2-00006',
+                        label: '武则天'
+                    },
+                    {
+                        id: '2-2-00005',
+                        label: '拿破仑'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: '4',
+        label: '软件开发部',
+        children: [
+            {
+                id: '5-3',
+                label: '张辽'
+            },
+            {
+                id: '5-9',
+                label: '吕布'
+            },
+            {
+                id: '5-0',
+                label: '许褚'
+            },
+        ]
+    }
+])
+
+
+
+// 勾选或者取消勾选
+const handleCheckList = (val) => {
+    //console.log(val)
+    const valId = val.id;
+    //console.log(valId)
+    const _node = treeRef?.value?.getNode(valId)
+    //console.log(_node)
+    
+
+    if (!_node) return
+    const _checkList = checkList.value
+    //console.log(checkedIdList.value)
+    if (_node.checked||_node.childNodes.length > 0) {
+        if (_node.checked && _node.childNodes.length === 0) {
+            
+            let count = 0
+            checkedIdList.value.forEach(element1 => {
+                if(element1==valId){
+                    
+                    count++
+                }
+            });
+            
+            if(count==1){
+                _checkList.push(_node)
+            }
+            
+        }
+        //console.log(_checkList)
+        
+        /* checkList.value.forEach(element => {
+            console.log(element.data.id)
+        }); */
+
+        //使用 Map 对象实现真正的按 id 去重
+        checkList.value = Array.from(new Map(
+            _checkList.map(item => [item.data.id, item])
+        ).values());
+
+        // 遍历子级,递归,直到获取最后一级的人员
+        if (_node.childNodes.length > 0) {
+            _node.childNodes.map(item => handleCheckList(item.data))
+        }
+    } else if (!_node.checked) { // 取消勾选
+        checkList.value = checkList.value.filter(item => item.checked)
+    }
+}
+
+/* 人员树 父级过滤的递归
+* @node 当前节点
+* @result 存结果的数组
+* @key
+* */
+const getParentNode = (node, result, key) => {
+    let isPass = node?.data?.label?.indexOf(key) !== -1
+    isPass ? result.push(isPass) : ''
+    if (!isPass && node.level !== 1 && node.parent) {
+        return getParentNode(node.parent, result, key)
+    }
+}
+/*人员树过滤
+* @value 过滤的关键字
+* @data 被过滤的tree
+* @node
+* */
+const filterNode = (value, data, node) => {
+    if (!value) {
+        data.disabled = false
+        return true
+    } else {
+        //带过滤条件时,所有父级都禁止勾选
+        // array.map(k => (!k.disabled) && (_childArr.push(k)))
+        (data.children) && (data.disabled = true)
+    }
+    let _arr = []
+    getParentNode(node, _arr, value)
+    let result = false
+    _arr.forEach(item => {
+        result = result || item
+    })
+    return result
+}
+// 通过tag 取消勾选
+const handleCloseTag = (tag) => {
+    checkedIdList.value = checkedIdList.value.filter(item => item !== tag.data.id);
+
+    if (!treeRef?.value) return
+    checkList.value = checkList.value.filter(item => {
+        treeRef.value.setChecked(tag, false)
+        if (!item?.data) return
+        return item.data.id !== tag.data.id
+        
+    })
+}
+
+// 清空CheckList
+const clearCheckList = () => {
+    if (!treeRef?.value) return
+    treeRef.value.setCheckedKeys([])
+    while (checkList.value.length > 0) {
+        checkList.value.pop()
+    }
+}
+
+// 全选 /全不选
+const handleCheckAll = (array) => {
+    treeRef.value.setCheckedNodes(array)
+    array.map(item => {
+        handleCheckList(item)
+    })
+}
+
+// 折叠/展开
+const expandAll = () => {
+    const nodesMap = treeRef.value.store.nodesMap
+    for (let key in nodesMap) {
+        nodesMap[key].expanded = isExpandAll.value
+    }
+}
+
+let watchCount = 0
+
+
+// 执行tree数据过滤
+watch(keyword, (newVal) => {
+    
+    
+    
+    //console.log(fuzzyTreeSearch(userList.value,newVal))
+    
+    
+    userList1.value = fuzzyTreeSearch(userList.value,newVal)
+    //console.log(userList1.value)
+    //treeRef.value.data = fuzzyTreeSearch(treeRefValueData,newVal)
+    watchCount++
+    isShowMore()
+})
+
+
+function isShowMore() {
+        isExpandAll.value = true
+        let nodes = treeRef.value.store._getAllNodes();
+        nodes.forEach(item => {
+            item.expanded = true;
+        });
+}
+
+
+function fuzzyTreeSearch(treeData, keyword) {
+    if (!keyword?.trim()) return deepClone(treeData); // 空关键词返回完整树
+
+    
+    const processNode = (node) => {
+        const newNode = deepClone(node); // 深拷贝当前节点
+        const isSelfMatch = newNode.label.toLowerCase().includes(keyword.toLowerCase());
+        
+        // 处理子节点（关键修复点）
+        let hasValidChild = false;
+        if (newNode.children?.length) {
+            newNode.children = newNode.children
+                .map(child => processNode(child))
+                .filter(Boolean); // 过滤无效子节点
+            hasValidChild = newNode.children.length > 0;
+        }
+
+        // 保留条件：自身匹配 或 子节点有匹配（修复子节点丢失问题）
+        if (isSelfMatch || hasValidChild) {
+            // 自身匹配时保留完整子树（即使子节点未匹配）
+            if (isSelfMatch && newNode.children?.length === 0) {
+                newNode.children = deepClone(node.children); // 直接复制原子节点
+            }
+            return newNode;
+        }
+        return null;
+    };
+
+    return treeData.map(root => processNode(root)).filter(Boolean);
+}
+
+function deepClone(obj) {
+    if (obj === null || typeof obj !== 'object') return obj;
+    const clone = Array.isArray(obj) ? [] : {};
+    for (const key in obj) {
+        clone[key] = deepClone(obj[key]);
+    }
+    return clone;
+}
+
+
+
+//获取配置接口相应或获取固定选项值
+if (transferConfig.value.transferDataSource === "固定选项") {
+    setTimeout(() => {
+
+        // 全选方法2:插入 全选node
+        userList.value = [{
+            id: '全选',
+            label: '全选',
+            children: props.data?.control.fixedOptions
+        }]
+        userList1.value = userList.value
+        //console.log(treeRef)
+        /* console.log(checkedIdList.value) */
+        if( treeRef.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.value = true
+} else {
+    getDetail
+    dataFinished.value = true
+}
+/* setTimeout(()=>{
+    console.log("setTimeout")
+    if(props.data?.config.transferDataSource==="数据源"){
+        //emits('reRenderComponent');
+        count1.value++
+    }
+},1500) */
+function arrayEquals(arr1, arr2) {
+    // 首先检查是否都是数组
+    if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+        return false;
+    }
+    
+    // 检查数组长度是否相同
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    
+    // 逐个比较元素
+    for (let i = 0; i < arr1.length; i++) {
+        const item1 = arr1[i];
+        const item2 = arr2[i];
+        
+        // 如果两个元素都是数组，则递归比较
+        if (Array.isArray(item1) && Array.isArray(item2)) {
+            if (!arrayEquals(item1, item2)) {
+                return false;
+            }
+        } 
+        // 如果两个元素都是对象，则比较它们的属性
+        else if (typeof item1 === 'object' && item1 !== null && 
+                 typeof item2 === 'object' && item2 !== null) {
+            // 简单对象比较（不考虑原型链）
+            const keys1 = Object.keys(item1);
+            const keys2 = Object.keys(item2);
+            
+            if (keys1.length !== keys2.length) return false;
+            
+            for (const key of keys1) {
+                if (!keys2.includes(key) || !arrayEquals([item1[key]], [item2[key]])) {
+                    return false;
+                }
+            }
+        } 
+        // 其他类型直接比较
+        else {
+            if (item1 !== item2) {
+                return false;
+            }
+        }
+    }
+    
+    return true;
+}
+
+
+// 监听 checkedIdList 的变化
+watch(checkedIdList, (newValue, oldValue) => {
+    /* console.log(oldValue)
+    console.log('checkedIdList 发生了变化', newValue); */
+
+    if(!arrayEquals(newValue,oldValue)){
+        //console.log(1)
+        emits('checkedIdListChanged', newValue);
+    }else{
+        //console.log(2)
+    }
+
+    //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 }) => {
+                alert(2)
+                const data1 = processTreeData(data)
+                //console.log(`获取穿梭框接口数据`);
+                resData.value = data1.children
+                // 全选方法2:插入 全选node
+                userList.value = [{
+                    id: '全选',
+                    label: '全选',
+                    children: [...resData.value]
+                }]
+                userList1.value = userList.value
+                if( treeRef.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.value.transferDataSource === "固定选项") {
+        setTimeout(() => {
+
+            // 全选方法2:插入 全选node
+            userList.value = [{
+                id: '全选',
+                label: '全选',
+                children: props.data?.control.fixedOptions
+            }]
+            userList1.value = userList.value
+            //console.log(treeRef)
+            /* console.log(checkedIdList.value) */
+            if( treeRef.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.value = true
+    } else {
+        getDetail
+        dataFinished.value = true
+    }
+    //emits('updateModel',newValue);
+}, { deep: true });
+
+</script>
+
+
+
+
+<style scoped>
+.transfer {
+    display: flex;
+
+
+}
+
+
+.transferName {
+    height: 30px;
+    padding-top: 8px;
+    background-color: #F5F7FA;
+    padding-left: 10px;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid gainsboro;
+
+}
+
+.buttonArea {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.buttonArea2 {
+    height: 33px;
+}
+
+.leftScroll {
+    height: 367px;
+}
+
+.leftArea {
+    border: 1px solid gainsboro;
+    width: 300px;
+    border-radius: 5px;
+    height: 456px;
+    position: relative;
+    background-color: white;
+}
+
+.rigthArea {
+    border: 1px solid gainsboro;
+    width: 300px;
+    border-radius: 5px;
+    height: 456px;
+    background-color: white;
+
+}
+</style>