项目管理更新

src/views/project/form/ProjectCourseSelect.vue

@@ -27,7 +27,21 @@
       </a-col>
       <a-col :span="18">
         <div id="content">
-          <p>dsfdsfdsfdsfds</p>
+          <a-transfer
+            :data-source="courseList.mockData"
+            :titles="['待选课程', '已选课程']"
+            :target-keys="courseList.targetKeys"
+            :selected-keys="courseList.selectedKeys"
+            :render="(item) => item.title"
+            :disabled="courseList.disabled"
+            @change="handleChange"
+            @selectChange="handleSelectChange"
+            @scroll="handleScroll"
+            :list-style="{
+              width: '408px',
+              height: '500px',
+            }"
+          />
         </div>
       </a-col>
     </a-row>
@@ -46,12 +60,23 @@ export default {
   },
   props: {},
   data() {
+    const mockData = []
+    for (let i = 0; i < 20; i++) {
+      mockData.push({
+        key: i.toString(),
+        title: `content${i + 1}`,
+        description: `description of content${i + 1}`,
+        disabled: i % 3 < 1,
+      })
+    }
+
+    // const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
     //这里存放数据
     return {
       replaceFields: {
         children: 'children',
         title: 'name',
-        key: 'id'
+        key: 'id',
       },
       visible: false,
       confirmLoading: false,
@@ -61,6 +86,12 @@ export default {
       searchValue: '',
       autoExpandParent: true,
       treeData: [],
+      courseList: {
+        mockData: [],
+        targetKeys: [],
+        selectedKeys: [],
+        disabled: false,
+      },
     }
   },
   //计算属性 类似于data概念
@@ -113,9 +144,25 @@ export default {
         this.treeData = list2tree1(res.data, -1)
       })
     },
-    onSelect(selectedKeys, e){
-      
-    }
+    onSelect(selectedKeys, e) {},
+
+    handleChange(nextTargetKeys, direction, moveKeys) {
+      this.courseList.targetKeys = nextTargetKeys
+
+      console.log('targetKeys: ', nextTargetKeys)
+      console.log('direction: ', direction)
+      console.log('moveKeys: ', moveKeys)
+    },
+    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
+      this.courseList.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
+
+      console.log('sourceSelectedKeys: ', sourceSelectedKeys)
+      console.log('targetSelectedKeys: ', targetSelectedKeys)
+    },
+    handleScroll(direction, e) {
+      console.log('direction:', direction)
+      console.log('target:', e.target)
+    },
   },
   created() {
     this.handleMenuClick()
@@ -132,7 +179,7 @@ export default {
 </script>
 <style scoped>
 #content {
-  background-color: aquamarine;
+  background-color: beige;
   width: 100%;
   height: 500px;
 }