项目管理更新

src/api/course/courseware.js

@@ -9,6 +9,7 @@ const coursewareApi = {
   // list: '/courseManagement/course/listPage',
   //   coursewareList:'/courseManagement/course/courseware/details',
   //   questionList:'/courseManagement/course/questionList'
+  classList: '/courseManagement/coursewareClassify/listPage'
 
 }
 
@@ -31,3 +32,12 @@ export function deleteCourseware (params) {
     data: params
   })
 }
+
+// 课件分类列表
+export function coursewareClassList(params) {
+  return request({
+    url: coursewareApi.classList,
+    method: 'get',
+    params: params
+  })
+}

src/utils/util.js

@@ -85,3 +85,19 @@ export function listToTree (list, tree, parentId) {
   })
   return tree
 }
+
+//列表转🌲
+// export function list2Tree(list, parentId) {
+//   let obj = []
+//   list.forEach(item => {
+//     item.children = []
+//     obj[item.id] = item
+//   })
+//   return list.filter(item => {
+//     if (item.parentId !== parentId) {
+//       obj[item.parentId].children.push(item)
+//       return false
+//     }
+//     return true
+//   })
+// }

src/views/project/ProjectStepForm.vue

@@ -10,11 +10,13 @@
       <a-step title="完成" />
     </a-steps>
     <div class="content">
+      <keep-alive>
         <step1 v-if="currentTab === 0" @nextStep="nextStep" />
         <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" />
         <step3 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" />
         <step4 v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep" />
         <step5 v-if="currentTab === 4" @prevStep="prevStep" @finish="finish" />
+      </keep-alive>
     </div>
   </a-card>
 </template>
@@ -67,6 +69,7 @@ export default {
     // handler
     //下一步
     nextStep() {
+      console.log('1111', this)
       if (this.currentTab < 5) {
         this.currentTab += 1
       }

src/views/project/form/ProjectCourseSelect.vue

@@ -11,53 +11,56 @@
   >
     <a-row type="flex" justify="center" align="top">
       <a-col :span="6">
-        <a-menu v-model="current" mode="horizontal">
-          <a-menu-item key="sys"> <a-icon type="mail" />系统课程</a-menu-item>
-          <a-menu-item key="self"> <a-icon type="appstore" />自制课程</a-menu-item>
+        <a-menu v-model="current" mode="horizontal" @click="handleMenuClick">
+          <a-menu-item key="sys"> <a-icon type="sys" />系统课程</a-menu-item>
+          <a-menu-item key="self"> <a-icon type="self" />自制课程</a-menu-item>
         </a-menu>
-        <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
         <a-tree
+          :replace-fields="replaceFields"
           :expanded-keys="expandedKeys"
           :auto-expand-parent="autoExpandParent"
-          :tree-data="gData"
+          :tree-data="treeData"
           @expand="onExpand"
+          @select="onSelect"
         >
-          <template slot="title" slot-scope="{ title }">
-            <span v-if="title.indexOf(searchValue) > -1">
-              {{ title.substr(0, title.indexOf(searchValue)) }}
-              <span style="color: #f50">{{ searchValue }}</span>
-              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
-            </span>
-            <span v-else>{{ title }}</span>
-          </template>
         </a-tree>
       </a-col>
       <a-col :span="18">
-        <p class="height-50">col-4</p>
+        <div id="content">
+          <p>dsfdsfdsfdsfds</p>
+        </div>
       </a-col>
     </a-row>
   </a-modal>
 </template>
 
 <script>
+import { coursewareClassList } from '@/api/course/courseware'
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》'
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {
+    coursewareClassList,
+  },
   props: {},
   data() {
     //这里存放数据
     return {
+      replaceFields: {
+        children: 'children',
+        title: 'name',
+        key: 'id'
+      },
       visible: false,
       confirmLoading: false,
-      current: ['mail'],
+      current: ['sys'],
       modalTitle: '',
       expandedKeys: [],
       searchValue: '',
       autoExpandParent: true,
-      gData: [],
+      treeData: [],
     }
   },
   //计算属性 类似于data概念
@@ -87,25 +90,36 @@ export default {
       this.expandedKeys = expandedKeys
       this.autoExpandParent = false
     },
-    onChange(e) {
-      console.log(this.gData)
-      const value = e.target.value
-      const expandedKeys = dataList
-        .map((item) => {
-          if (item.title.indexOf(value) > -1) {
-            return getParentKey(item.key, gData)
+    //菜单改变
+    handleMenuClick(e) {
+      console.log('key============', e.key)
+      this.getCourseTreeData(e.key)
+      console.log(this.treeData)
+    },
+    //获取课程分类数据，转换成树结构
+    getCourseTreeData(key) {
+      coursewareClassList().then((res) => {
+        //list转🌲
+        const list2tree1 = (list, parentId) => {
+          return list.filter((item) => {
+            if (item.parentId === parentId) {
+              item.children = list2tree1(list, item.id)
+              return true
             }
-          return null
+            return false
           })
-        .filter((item, i, self) => item && self.indexOf(item) === i)
-      Object.assign(this, {
-        expandedKeys,
-        searchValue: value,
-        autoExpandParent: true,
+        }
+
+        this.treeData = list2tree1(res.data, -1)
       })
     },
+    onSelect(selectedKeys, e){
+      
+    }
   },
-  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleMenuClick()
+  }, //生命周期 - 创建完成（可以访问当前this实例）
   mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -117,4 +131,9 @@ export default {
 }
 </script>
 <style scoped>
+#content {
+  background-color: aquamarine;
+  width: 100%;
+  height: 500px;
+}
 </style>

src/views/project/form/ProjectForm.vue

@@ -140,6 +140,7 @@ export default {
     ClassList,
   },
   created(ClassList) {
+    console.log('第一个表单创建了');
     this.fetchTemplateData()
   },
   methods: {
@@ -185,5 +186,8 @@ export default {
       this.form.resitNumber = Math.floor(Math.random() * (5 - 1) + 1)
     },
   },
+  destroyed() {
+    console.log('第一个表单销毁了')
+  }
 }
 </script>

src/views/project/form/ProjectUnitSelect.vue

@@ -122,6 +122,9 @@ export default {
       },
     }
   },
+  created(){
+    console.log('第2个表单创建了')
+  },
   computed: {
     treeData() {
       return handleTreeData(treeData, this.targetKeys)
@@ -172,5 +175,8 @@ export default {
       }
     },
   },
+  destroyed() {
+    console.log('第2个表单销毁了')
+  },
 }
 </script>