项目管理表单更新

src/api/course/course.js

@@ -8,8 +8,8 @@ const courseApi = {
 //   updateStatus: 'sys/menu/updateStatus',
   list: '/courseManagement/course/listPage',
   coursewareList:'/courseManagement/course/courseware/details',
-  questionList:'/courseManagement/course/questionList'
+  questionList:'/courseManagement/course/questionList',
-  
+  listByClass:'/courseManagement/course/list',
 }
 
 export function courseAdd (params) {
@@ -19,13 +19,13 @@ export function courseAdd (params) {
     data: params
   })
 }
-// export function menuGet (params) {
+export function listByClass (params) {
-//   return request({
+  return request({
-//     url: menuApi.get,
+    url: courseApi.listByClass,
-//     method: 'post',
+    method: 'get',
-//     data: params
+    params: params
-//   })
+  })
-// }
+}
 // export function menuUpdate (params) {
 //   return request({
 //     url: menuApi.update,

src/views/project/form/ProjectCourseList.vue

@@ -8,7 +8,7 @@
     </template>
     <a-space direction="vertical" style="width: 100%">
       <a-space direction="horizontal">
-        <span>总课时：{{ totalHours }}, 总学时要求：{{ totalLearnHours }}, 总题目数量：{{ totalTopicNum }} </span>
+        <span>总课时：{{ totalHours }}H , 总学时要求：{{ totalLearnHours }}H , 总题目数量：{{ totalTopicNum }} </span>
         课程名:
         <a-input v-model="queryParam.courseName" style="width: 100%" />
         <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
@@ -46,8 +46,8 @@
           </template>
         </span>
       </s-table>
-      <project-course-select ref="CourseSelect"></project-course-select>
     </a-space>
+    <project-course-select ref="CourseSelect" @selectKeyDataSubmit="selectKeyDataChange"></project-course-select>
   </a-card>
 </template>
 
@@ -86,8 +86,8 @@ export default {
         { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
         { title: '课程编号', dataIndex: 'courseNo', key: 'courseNo' },
         { title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
-        { title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + '分' },
+        { title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + 'H' },
-        { title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + '分' },
+        { title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + 'H' },
         { title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' },
         // { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
         { title: '操作', width: 200, align: 'center', scopedSlots: { customRender: 'action' } },
@@ -96,11 +96,13 @@ export default {
         if (this.$route.query.projectId) {
           /** 编辑进来的有项目id */
           return getCourseList(this.$route.query.projectId).then((res) => {
+            this.calc(res.data)
             return res.data
           })
         } else {
           /** 新建的没有项目id，传当前的所选的课程id */
           return getCourseListByCourseIds(Object.assign(parameter, this.queryParam)).then((res) => {
+            this.calc(res.data)
             return res.data
           })
         }
@@ -113,6 +115,17 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    //计算总学时，总分数，总课时
+    calc(data){
+      this.totalHours = 0
+      this.totalLearnHours = 0
+      this.totalTopicNum = 0
+      data.forEach((item)=>{
+          this.totalHours = this.totalHours + parseInt(item.courseHours)
+          this.totalLearnHours = this.totalLearnHours + parseInt(item.learnHours)
+          this.totalTopicNum = this.totalTopicNum + parseInt(item.topicNumber)
+      })
+    },
     //下一步
     toNext() {
       this.form.lessonIds = []
@@ -138,33 +151,21 @@ export default {
     },
     //初始化ids
     initIds() {
-      let str = this.projectForm.lessonIds.join(',')
+      console.log('this.projectForm.lessonIds',this.projectForm.lessonIds)
+      let str = '';
+      if(this.projectForm.lessonIds) str = this.projectForm.lessonIds.join(',') 
+      // let str = this.projectForm.lessonIds.join(',') || []
       console.log('initIds', str)
       if (str) {
         this.queryParam.ids = str
       }
     },
-    /**查询了列表数据 */
+    //选择课程完毕，提交到list页面
-    getProjectCourseList() {
+    selectKeyDataChange(childValue){
-      // if (this.$route.query.projectId) {
+      console.log('list page - selectKeyDataSubmit',childValue)
-      //   /** 编辑景来的有项目id */
+      this.queryParam.ids = childValue
-      //   getCourseList(this.$route.query.projectId).then((res) => {
+      this.$refs.table.refresh(true)
-      //     if (res.code == 200) {
+    }
-      //       // this.data1 = res.data
-      //       return res
-      //     }
-      //   })
-      // } else {
-      //   /** 新建的没有项目id，传当前的所选的课程id */
-      //   getCourseListByCourseIds(this.queryParam.ids.join(',')).then((res)=>{
-      //     if (res.code == 200) {
-      //       // this.data1 = res.data
-      //       // console.log(this.data1)
-      //       return res
-      //     }
-      //   })
-      // }
-    },
   },
 
   //生命周期 - 创建完成（可以访问当前this实例）

src/views/project/form/ProjectCourseSelect.vue

@@ -3,161 +3,188 @@
     id="modal"
     :title="modalTitle"
     :width="1500"
-    :height="750"
+    height="auto"
     :visible="visible"
-    :confirmLoading="confirmLoading"
-    :destroyOnClose="true"
     @ok="handleSubmit"
     @cancel="handleCancel"
   >
+    <a-card :bordered="false" title="项目课程选择">
       <a-row type="flex" justify="center" align="top">
-      <a-col :span="4">
+        <a-col :span="4" id="tree">
-        <a-menu v-model="current" mode="horizontal" @click="handleMenuClick">
+          <a-page-header title="单位列表" sub-title="" />
-          <a-menu-item key="sys">系统课程</a-menu-item>
-          <a-menu-item key="self">自制课程</a-menu-item>
-        </a-menu>
           <a-tree
-          :replace-fields="replaceFields"
+            :treeData="treeData"
-          :expanded-keys="expandedKeys"
-          :auto-expand-parent="autoExpandParent"
-          :tree-data="treeData"
-          @expand="onExpand"
             @select="onSelect"
+            :defaultExpandAll="true"
+            :defaultExpandedKeys="defaultExpandedKeys"
+            :replaceFields="replaceFields"
           >
+            <a-icon slot="switcherIcon" type="down" />
           </a-tree>
         </a-col>
-      <a-col :span="20">
+        <a-col :span="20" id="content">
-        <div id="content">
+          <a-page-header title="课程选择" sub-title="" />
-          <a-transfer
+          <a-col :span="18" id="table">
-            :data-source="courseList.courseData"
+            <a-form layout="inline">
-            :titles="['待选课程', '已选课程']"
+              <a-row>
-            :target-keys="courseList.targetKeys"
+                <a-form-item label="课程名称">
-            :selected-keys="courseList.selectedKeys"
+                  <a-input v-model="queryParam.name" placeholder="请输入课程名称" />
-            :render="(item) => item.title"
+                </a-form-item>
-            :disabled="courseList.disabled"
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-            @change="handleChange"
+              </a-row>
-            @selectChange="handleSelectChange"
+            </a-form>
-            @scroll="handleScroll"
+            <s-table
-            :list-style="{
+              ref="table"
-              width: '408px',
+              :columns="columns"
-              height: '500px',
+              :data="loadData"
-            }"
+              :rowKey="(record) => record.id"
+              :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }"
             >
-            <template
+              <span slot="serial" slot-scope="text, record, index">
-              slot="children"
+                {{ index + 1 }}
-              slot-scope="{
+              </span>
-                props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
+            </s-table>
-                on: { itemSelectAll, itemSelect },
+          </a-col>
-              }"
+          <a-col :span="6" id="select">
-            >
+            <p>点击列表项取消选择或【<a @click="removeAllSelece">清空所有</a>】</p>
-              <a-table
+            <a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
-                :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
+              <a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
-                :columns="direction === 'left' ? courseList.leftColumns : courseList.rightColumns"
+                {{ item.courseName + '（' + item.courseCode + '）' }}
-                :data-source="filteredItems"
+              </a-list-item>
-                size="default"
+            </a-list>
-                :style="{ pointerEvents: listDisabled ? 'none' : null }"
+          </a-col>
-                :custom-row="
-                  ({ key, disabled: itemDisabled }) => ({
-                    on: {
-                      click: () => {
-                        if (itemDisabled || listDisabled) return
-                        itemSelect(key, !selectedKeys.includes(key))
-                      },
-                    },
-                  })
-                "
-              />
-            </template>
-          </a-transfer>
-        </div>
         </a-col>
       </a-row>
+    </a-card>
   </a-modal>
 </template>
 
 <script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》'
 import { coursewareClassList } from '@/api/course/courseware'
-import { getCourseList } from '@/api/course/course'
+import { listByClass } from '@/api/course/course'
-import difference from 'lodash/difference'
+import { STable } from '@/components'
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+const rootParentId = 0
-//例如：import 《组件名称》 from '《组件路径》'
-
-// const coData = [];
-
-const leftTableColumns = [{dataIndex: 'courseCode', title: '课程编号', },{dataIndex: 'courseName', title: '课程名称', },]
-const rightTableColumns = [ {dataIndex: 'courseCode',title: '课程编号',},{dataIndex: 'courseName',title: '课程名称',},]
-
 
 export default {
-  //import引入的组件需要注入到对象中才能使用
+  // import引入的组件需要注入到对象中才能使用
-
   components: {
-    coursewareClassList,
+    STable,
-    difference,
-    getCourseList,
   },
   props: {},
   data() {
-    //这里存放数据
+    // 这里存放数据
     return {
-      replaceFields: {
+      visible: false, //是否显示弹框
-        children: 'children',
-        title: 'name',
-        key: 'id',
-      },
-      visible: false,
-      confirmLoading: false,
-      current: ['sys'],
       modalTitle: '',
+
+      // 查询参数
+      queryParam: { name: '', classType: 0 },
+      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
       expandedKeys: [],
-      searchValue: '',
       autoExpandParent: true,
+      defaultExpandedKeys: [],
+      selectedRowKeys: [],
+      selectedRows: [],
       treeData: [],
-      courseList: {
+      treeDataOne: [],
-        queryParam: {},
+      columns: [
-        courseData: [],
+        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
-        targetKeys: [],
+        { title: '课程编号', dataIndex: 'courseCode' },
-        selectedKeys: [],
+        { title: '课程名称', dataIndex: 'courseName' },
-        disabled: false,
+      ],
-        leftColumns: leftTableColumns,
+      //人员列表数据
-        rightColumns: rightTableColumns,
+      loadData: (parameter) => {
+        return listByClass(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
       },
     }
   },
-  //计算属性 类似于data概念
+  // 计算属性 类似于data概念
-  computed: {},
+  computed: {
-  //监控data中的数据变化
+    hasSelected() {
+      return this.selectedRowKeys.length > 0
+    },
+  },
+  // 监控data中的数据变化
   watch: {},
-  //方法集合
+  // 方法集合
   methods: {
     // 编辑打开页面初始化
     edit(record) {
-      console.log(record)
+      console.log('课程选择打开了', record)
       this.modalTitle = '选择课程'
       this.visible = true
-      this.formLoading = false
     },
     handleCancel() {
       console.log('课程选择关闭')
       this.visible = false
-      this.formLoading = false
     },
     handleSubmit() {
-      console.log('课程选择提交了')
+      console.log('课程选择提交了',this.selectedRowKeys)
       this.visible = false
-      this.formLoading = false
+      if (this.selectedRowKeys) this.$emit('selectKeyDataSubmit',this.selectedRowKeys.join(',')); 
-      this.$parent.queryParam.ids = this.courseList.selectedKeys.join(",")
+      else this.$emit('selectKeyDataSubmit','');
-      this.$parent.$refs.table.refresh(true);
     },
+
+    /** 表格行选中后触发 */
+    onSelectChange(selectedRowKeys, selectedRows) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys)
+      console.log('选择的表格数据 : ', selectedRows)
+      this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
+      this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
+    },
+
+    //对象去重
+    unique(arr) {
+      const res = new Map()
+      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
+    },
+
+    //key去重
+    uniqueKeys(arr) {
+      const res = new Map()
+      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
+    },
+
+    //列表点击删除列表项
+    changeList(item) {
+      console.log('列表点击删除列表项 : ', item)
+      this.selectedRows = this.selectedRows.filter(function (i) {
+        return i.id != item.item.id
+      })
+      this.selectedRowKeys = this.selectedRowKeys.filter(function (i) {
+        return i != item.item.id
+      })
+    },
+
+    //清空选择
+    removeAllSelece() {
+      this.selectedRowKeys = []
+      this.selectedRows = []
+    },
+
+    //选中后触发
+    onSelect(selectedKey, info) {
+      console.log('onSelect-------', selectedKey, info)
+      this.queryParam.classType = selectedKey.toString()
+      // this.orgId = selectedKey.toString()
+      this.$refs.table.refresh(true)
+    },
+
+    //树使用的方法
     onExpand(expandedKeys) {
       this.expandedKeys = expandedKeys
       this.autoExpandParent = false
     },
-    //菜单改变
+    //查询课程列表
-    handleMenuClick(e) {
+    queryCourseList() {
-      console.log('key============', e.key)
+      console.log('this.treeDataOne-------', this.treeDataOne)
-      this.getCourseTreeData(e.key)
+      listByClass({ classType: this.treeDataOne[0] || 0 }).then((res) => {
-      console.log(this.treeData)
+        this.courseData = res.data
+      })
     },
     //获取课程分类数据，转换成树结构
     getCourseTreeData(key) {
@@ -165,6 +192,8 @@ export default {
         //list转🌲
         const list2tree1 = (list, parentId) => {
           return list.filter((item) => {
+            // 默认选中第一个节点
+            if (this.treeDataOne) this.treeDataOne.push(item.id)
             if (item.parentId === parentId) {
               item.children = list2tree1(list, item.id)
               return true
@@ -172,78 +201,31 @@ export default {
             return false
           })
         }
-
         this.treeData = list2tree1(res.data, -1)
       })
     },
-    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)
-    },
-    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
-      return {
-        getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
-        onSelectAll(selected, selectedRows) {
-          const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
-          const diffKeys = selected
-            ? difference(treeSelectedKeys, selectedKeys)
-            : difference(selectedKeys, treeSelectedKeys)
-          itemSelectAll(diffKeys, selected)
-        },
-        onSelect({ key }, selected) {
-          itemSelect(key, selected)
-        },
-        selectedRowKeys: selectedKeys,
-      }
-    },
-    //查询课程列表
-    queryCourseList() {
-      getCourseList(this.courseList.queryParam).then((res) => {
-        if (res.code == 200) {
-          res.data.map(function (currentValue, index, arr) {
-            this.courseList.courseData.push({
-              key: currentValue.id,
-              courseCode: currentValue.courseCode,
-              courseName: currentValue.courseName,
-            })
-          })
-        }
-      })
-    },
   },
+  // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.handleMenuClick();
+    this.getCourseTreeData()
-    // this.queryCourseList();
+  },
-  }, //生命周期 - 创建完成（可以访问当前this实例）
+  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
+  // 生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
+  beforeCreate() {},
-  beforeUpdate() {}, //生命周期 - 更新之前
+  // 生命周期 - 挂载之前
-  updated() {}, //生命周期 - 更新之后
+  beforeMount() {},
-  beforeDestroy() {}, //生命周期 - 销毁之前
+  // 生命周期 - 更新之前
-  destroyed() {}, //生命周期 - 销毁完成
+  beforeUpdate() {},
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
 }
 </script>
 <style scoped>
-#content {
-  background-color: rgb(202, 221, 188);
-  width: 100%;
-  height: 100%;
-}
 </style>

src/views/project/form/ProjectUnitSelect.vue

@@ -14,19 +14,17 @@
     <a-transfer
       class="tree-transfer"
       :data-source="dataSource"
-      :titles="['全部单位列表', '已经选中单位']"
       :target-keys="targetKeys"
       :render="(item) => item.title"
-      :operations="['选  中', '取  消']"
+      :show-select-all="false"
-      :show-select-all="true"
-      :filter-option="filterOption"
       @change="onChange"
     >
-      <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll } }">
+      <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
         <a-tree
           v-if="direction === 'left'"
           blockNode
           checkable
+          checkStrictly
           defaultExpandAll
           :checkedKeys="[...selectedKeys, ...targetKeys]"
           :treeData="treeData"
@@ -46,112 +44,143 @@
   </a-card>
 </template>
 
-
 <script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》'
 import { orgList } from '@/api/org/org'
 import { listToTree } from '@/utils/util'
 
-//复制过来的方法
+const treeData = [
-function handleTreeData(data, targetKeys = []) {
+  { key: '0-0', title: '0-0' },
-  data.forEach((item) => {
+  {
-    item['disabled'] = targetKeys.includes(item.key)
+    key: '0-1',
-    if (item.children) {
+    title: '0-1',
-      handleTreeData(item.children, targetKeys)
+    children: [
-    }
+      { key: '0-1-0', title: '0-1-0' },
+      { key: '0-1-1', title: '0-1-1' },
+    ],
+  },
+  { key: '0-2', title: '0-3' },
+]
+
+const transferDataSource = []
+
+function flatten(list = []) {
+  list.forEach((item) => {
+    transferDataSource.push(item)
+    flatten(item.children)
   })
-  return data
 }
+flatten(JSON.parse(JSON.stringify(treeData)))
 
 function isChecked(selectedKeys, eventKey) {
-  return selectedKeys.indexOf(eventKey) !== -1;
+  return selectedKeys.indexOf(eventKey) !== -1
 }
 
+//打开就报错
+// function handleTreeData(data, targetKeys = []) {
+//   data.forEach((item) => {
+//     item['disabled'] = targetKeys.includes(item.key)
+//     if (item.children) {
+//       handleTreeData(item.children, targetKeys)
+//     }
+//   })
+//   return data
+// }
+
 export default {
-  props: {
+  // import引入的组件需要注入到对象中才能使用
-    projectForm: {
+  components: {},
-      type: Object,
+  props: { projectForm: { type: Object } },
-    },
-  },
   data() {
+    // 这里存放数据
     return {
       form: this.projectForm,
-      targetKeys: [],
+      targetKeys: this.projectForm.unitIds || [],
-      dataSource: [],
+      dataSource: transferDataSource,
-      treeData: [],
+      // treeData() {return handleTreeData(treeData, this.targetKeys)},
-      checkedKeys:[],
+      treeData: []
     }
   },
-  created() {
+  // 计算属性 类似于data概念
-    console.log('第2个表单创建了')
+  computed: {},
-    this.getSourceList()
+  // 监控data中的数据变化
-  },
+  watch: {},
-  computed: {
+  // 方法集合
-    treeDataComputed() {
-      return handleTreeData(treeData, this.targetKeys)
-    },
-  },
   methods: {
+    onChange(targetKeys) {
+      console.log('Target Keys:', targetKeys)
+      this.targetKeys = targetKeys
+    },
+    onChecked(_, e, checkedKeys, itemSelect) {
+      const { eventKey } = e.node
+      itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
+    },
     //获取数据源
     getSourceList(orgType) {
-      return orgList({ orgType: orgType || 1 }).then((res) => {
+      orgList({ orgType: orgType || 1 }).then((res) => {
         if (res.data) {
+          this.dataSource = []
           res.data.forEach((item) => {
             this.dataSource.push({
-              key: item.id,
+              id: item.id,
+              key: item.id.toString(),
               title: item.name,
               children: [],
-              pid: item.pid
+              pid: item.pid,
             })
           })
           console.log('dataSource', this.dataSource)
           this.treeData = listToTree(this.dataSource, [], 0)
+          console.log('treeData', this.treeData)
         }
       })
     },
-
     //下一步
     toNext() {
       this.form.unitIds = this.targetKeys
       console.log('toNext', this.form)
       this.$emit('nextStep', this.form)
     },
-    
     //上一步
     toPrep() {
       this.form.unitIds = this.targetKeys
       console.log('toPrep', this.form)
       this.$emit('prevStep', this.form)
     },
-    onChange(targetKeys) {
-      console.log('Target Keys:', targetKeys)
-      this.targetKeys = targetKeys
-      // this.form = targetKeys
   },
-    onChecked(_, e, checkedKeys, itemSelect) {
+  // 生命周期 - 创建完成（可以访问当前this实例）
-      const { eventKey } = e.node
+  created() {
-      itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
+    console.log('第2个表单创建了')
+    this.getSourceList()
+    console.log('form',this.form)
   },
-    //搜索使用
-    filterOption(value, tree) {
-      console.log('filterOption:', value, tree)
-      // getParentKey(value, tree) {
-      if (!value) return
 
-      for (let i = 0; i < tree.length; i++) {
+  // 生命周期 - 挂载完成（可以访问DOM元素）
-        const node = tree[i]
+  mounted() {},
-
+  // 生命周期 - 创建之前
-        if (node.children) {
+  beforeCreate() {},
-          if (node.children.some((item) => item.title.indexOf(value) > -1)) {
+  // 生命周期 - 挂载之前
-            this.expandedKeys.push(node.key)
+  beforeMount() {},
-          }
+  // 生命周期 - 更新之前
-
+  beforeUpdate() {},
-          this.filterOption(value, node.children)
+  // 生命周期 - 更新之后
-        }
+  updated() {},
-      }
+  // 生命周期 - 销毁之前
-    },
+  beforeDestroy() {},
-  },
+  // 生命周期 - 销毁完成
   destroyed() {
     console.log('第2个表单销毁了')
   },
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
 }
 </script>
+<style scoped>
+.tree-transfer .ant-transfer-list:first-child {
+  width: 50%;
+  flex: none;
+}
+</style>
+
+