From 00af09c4f06728864bbd1359120e867695b5ee82 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 19 Jul 2022 14:05:47 +0800
Subject: [PATCH] =?UTF-8?q?bug=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PutOnTheShelf.vue              | 58 +++++++++++++++----
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index cf225ee2..d6830f7a 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -308,6 +308,7 @@
               </div>
             </div>
           </div>
+          <!-- 来源应用 -->
           <div class="AssociatedApplication">
             <a-modal
               v-model:visible="visibleAssociatedApplication"
@@ -329,6 +330,28 @@
               </div>
             </a-modal>
           </div>
+          <!-- 关联组件 -->
+          <div class="AssociatedApplication">
+            <a-modal
+              v-model:visible="visibleAssociatedApplication"
+              :title="titleName"
+              @ok="handleOk"
+              @cancel="handleCancel"
+              style="width: 960px"
+            >
+              <div>
+                <a-transfer
+                  v-model:target-keys="targetKeys2"
+                  v-model:selected-keys="selectedKeys2"
+                  :data-source="mockData2"
+                  :titles="titles"
+                  :render="(item) => item.title"
+                  @change="handleChange1"
+                  @selectChange="handleSelectChange1"
+                />
+              </div>
+            </a-modal>
+          </div>
         </div>
       </template>
     </div>
@@ -630,11 +653,13 @@
   // 来源应用
   const visibleAssociatedApplication = ref(false)
   const mockData = ref([])
+  const mockData2 = ref([])
   const titles = ref(['未关联的应用名称', '已关联的应用名称'])
   const titleName = ref('来源应用')
   const targetKeys = ref([])
+  const targetKeys2 = ref([])
   // 上一步关联数据
-  const targetKeysBack = ref([])
+  // const targetKeysBack = ref([])
 
   const sourceClick = () => {
     mockData.value = []
@@ -679,7 +704,7 @@
   const componentsClick = () => {
     titles.value = ['未关联的组件名称', '已关联的组件名称']
     titleName.value = '关联组件'
-    mockData.value = []
+    mockData2.value = []
     visibleAssociatedApplication.value = true
     props.dataFrom.infoList.forEach((val) => {
       if (val.attrType === '关联组件信息' && val.attrValue != '') {
@@ -690,18 +715,18 @@
         }).then((res) => {
           // console.log(res.data.data.notLinked)
           res.data.data.notLinked.forEach((val, index) => {
-            mockData.value.push({
+            mockData2.value.push({
               key: val.id,
               title: val.name,
               description: val.id,
             })
           })
         })
-        targetKeys.value = []
+        targetKeys2.value = []
         val.attrValue.split(',').forEach((item) => {
-          targetKeys.value.push(item)
+          targetKeys2.value.push(item)
         })
-        console.log(targetKeys.value)
+        console.log(targetKeys2.value)
         // console.log('wowowo')
       } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
         queryResourceRelByKeyId({
@@ -711,7 +736,7 @@
         }).then((res) => {
           // console.log(res.data.data.notLinked)
           res.data.data.notLinked.forEach((val, index) => {
-            mockData.value.push({
+            mockData2.value.push({
               key: val.id,
               title: val.name,
               description: val.id,
@@ -722,6 +747,7 @@
     })
   }
   const selectedKeys = ref([])
+  const selectedKeys2 = ref([])
 
   const handleChange = (nextTargetKeys, direction, moveKeys) => {
     console.log('targetKeys: ', nextTargetKeys)
@@ -731,21 +757,33 @@
       targetKeys.value = moveKeys.filter((item, index) => index === 0)
     }
   }
+  const handleChange1 = (nextTargetKeys1, direction1, moveKeys1) => {
+    console.log('targetKeys: ', nextTargetKeys1)
+    console.log('direction: ', direction1)
+    console.log('moveKeys: ', moveKeys1)
+  }
 
   const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
     console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
-    // 左侧单选
-    // selectedKeys.value = [sourceSelectedKeys[sourceSelectedKeys.length - 1]]
     console.log('after', sourceSelectedKeys)
   }
+  const handleSelectChange1 = (sourceSelectedKeys1, targetSelectedKeys1) => {
+    console.log(
+      'targetSelectedKeys: ',
+      targetSelectedKeys1,
+      sourceSelectedKeys1
+    )
+  }
 
   const handleOk = (e) => {
     console.log(e)
     visibleAssociatedApplication.value = false
     // console.log('2222222222222', props.refData)
     data.value.list.map((item) => {
-      if (item.name === '来源应用' || item.name === '关联组件信息') {
+      if (item.name === '来源应用') {
         item.note1 = targetKeys.value + ''
+      } else if (item.name === '关联组件信息') {
+        item.note1 = targetKeys2.value + ''
       }
     })
   }