项目管理新增选择课程页面

src/views/project/ProjectStepForm.vue

@@ -32,7 +32,7 @@
 <script>
 import Step1 from './form/ProjectForm'
 import Step2 from './form/ProjectUnitSelect'
-import Step3 from './form/ProjectCourseSelect'
+import Step3 from './form/ProjectCourseList'
 
 export default {
   components: {
@@ -82,6 +82,7 @@ export default {
     },
     //上一步
     prevStep () {
+      console.log("返回上一步")
       if (this.currentTab > 0) {
         this.currentTab -= 1
       }

src/views/project/form/ProjectCourseList.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
+    <a-space direction="vertical" style="width: 100%">
+      <a-space direction="horizontal">
+        <span>总课时：{{ totalHours }}, 总学时要求：{{ totalLearnHours }}, 总题目数量：{{ totalTopicNum }} </span>
+        课程名:
+        <a-input v-model="queryParam.projectName" style="width: 100%" />
+        <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
+        <a-button icon="select" @click="$refs.CourseSelect.edit({})">添加课程</a-button>
+      </a-space>
+
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData">
+        <span slot="serial" slot-scope="text, record, index">
+          {{ index + 1 }}
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <template>
+            <a-button type="primary" @click="$refs.table.refresh(true)">课程预览</a-button>
+            <a-button type="primary" @click="$refs.table.refresh(true)">题库预览</a-button>
+            <a-button type="primary" @click="$refs.table.refresh(true)">必选题设置</a-button>
+            <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+              <a-button type="primary" @click="$refs.table.refresh(true)">删除</a-button>
+            </a-popconfirm>
+          </template>
+        </span>
+      </s-table>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="toNext"> 下一步 </a-button>
+        <a-button style="margin-left: 10px" @click="toPrep"> 上一步 </a-button>
+      </a-form-model-item>
+    </a-space>
+    <project-course-select ref="CourseSelect"></project-course-select>
+  </a-form-model>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》'
+import { STable } from '@/components'
+import ProjectCourseSelect from './ProjectCourseSelect.vue'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    STable,
+    ProjectCourseSelect,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      form: this.$form.createForm(this, { name: 'project' }),
+      totalHours: 0, //总课时
+      totalLearnHours: 0, //总学时
+      totalTopicNum: 0, //题目数量
+      //查询数据
+      queryParam: {},
+      // 表头
+      columns: [
+        { 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: 'learnHours', key: 'learnHours', customRender: (text) => text + '分' },
+        { title: '题量', dataIndex: 'topicNumber', key: 'projectName' },
+        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
+        {
+          title: '操作',
+          width: 200,
+          align: 'center',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toNext() {
+      console.log('ProjectCourseSelect-toNext', this.form)
+      const {
+        form: { validateFields },
+      } = this
+      // 先校验，通过表单校验后，才进入下一步
+      validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextStep')
+        }
+      })
+    },
+    toPrep() {
+      console.log('toPrep', this.form)
+      this.$emit('prevStep', this.form)
+    },
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+</style>

src/views/project/form/ProjectCourseSelect.vue

@@ -1,85 +1,41 @@
 <template>
-  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
+  <a-modal
-    <a-space direction="vertical" style="width: 100%">
+    :title="modalTitle"
-      <a-space direction="horizontal">
+    :width="1000"
-        <span>总课时：{{ totalHours }}, 总学时要求：{{ totalLearnHours }}, 总题目数量：{{ totalTopicNum }} </span>
+    :visible="visible"
-        课程名:
+    :confirmLoading="confirmLoading"
-        <a-input v-model="queryParam.projectName" style="width: 100%" />
+    :destroyOnClose="true"
-        <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
+    @ok="handleSubmit"
-        <a-button icon="select" @click="() => (queryParam = {})">添加课程</a-button>
+    @cancel="handleCancel"
-      </a-space>
-
-      <s-table
-        ref="table"
-        size="default"
-        rowKey="id"
-        :columns="columns"
-        :data="loadData"
   >
-        <span slot="serial" slot-scope="text, record, index">
+    <a-layout>
-          {{ index + 1 }}
+      <a-layout-sider>
-        </span>
+        <a-menu v-model="current" mode="horizontal">
-        <span slot="action" slot-scope="text, record" >
+          <a-menu-item key="mail"> <a-icon type="mail" />系统课程</a-menu-item>
-          <template>
+          <a-menu-item key="app"> <a-icon type="appstore" />自制课程</a-menu-item>
-            <a-button type="primary" @click="$refs.table.refresh(true)">课程预览</a-button>
+        </a-menu>
-            <a-button type="primary" @click="$refs.table.refresh(true)">题库预览</a-button>
+      </a-layout-sider>
-            <a-button type="primary" @click="$refs.table.refresh(true)">必选题设置</a-button>
+      <a-layout>
-            <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+        <a-layout-content>Content</a-layout-content>
-              <a-button type="primary" @click="$refs.table.refresh(true)">删除</a-button>
+      </a-layout>
-            </a-popconfirm>
+    </a-layout>
-          </template>
+  </a-modal>
-        </span>
-      </s-table>
-      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
-        <a-button type="primary" @click="toNext"> 下一步 </a-button>
-        <a-button style="margin-left: 10px"> 取消 </a-button>
-      </a-form-model-item>
-    </a-space>
-  </a-form-model>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》'
-import { STable } from '@/components'
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {
+  components: {},
-    STable,
-  },
   props: {},
   data() {
     //这里存放数据
     return {
-      form: this.$form.createForm(this, { name: 'project' }),
+      visible: false,
-      totalHours: 0, //总课时
+      confirmLoading: false,
-      totalLearnHours: 0, //总学时
+      current: ['mail'],
-      totalTopicNum: 0, //题目数量
-      //查询数据
-      queryParam: {},
-      // 表头
-      columns: [
-        { 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: 'learnHours', key: 'learnHours', customRender: (text) => text + '分' },
-        { title: '题量', dataIndex: 'topicNumber', key: 'projectName' },
-        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
-        {
-          title: '操作',
-          width: 200,
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
-      // 加载数据方法 必须为 Promise 对象
-      loadData: (parameter) => {
-        return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
-          return res
-        })
-      },
     }
   },
   //计算属性 类似于data概念
@@ -88,22 +44,25 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    toNext() {
+    // 编辑打开页面初始化
-      console.log('ProjectCourseSelect-toNext', this.form)
+    edit(record) {
-      const {
+      console.log(record)
-        form: { validateFields },
+      this.modalTitle = '选择课程'
-      } = this
+      this.visible = true
-      // 先校验，通过表单校验后，才进入下一步
+      this.formLoading = false
-      validateFields((err, values) => {
+    },
-        if (!err) {
+    handleCancel() {
-          this.$emit('nextStep')
+      console.log('课程选择关闭')
-        }
+      this.visible = false
-      })
+      this.formLoading = false
+    },
+    handleSubmit() {
+      console.log('课程选择提交了')
+      this.visible = false
+      this.formLoading = false
     },
   },
-
+  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
   mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -115,4 +74,24 @@ export default {
 }
 </script>
 <style scoped>
+#components-layout-demo-basic {
+  text-align: center;
+}
+#components-layout-demo-basic .ant-layout-sider {
+  background: #3ba0e9;
+  color: #fff;
+  line-height: 150px;
+}
+#components-layout-demo-basic .ant-layout-content {
+  background: rgba(16, 142, 233, 1);
+  color: #fff;
+  min-height: 1100px;
+  line-height: 120px;
+}
+#components-layout-demo-basic > .ant-layout {
+  margin-bottom: 48px;
+}
+#components-layout-demo-basic > .ant-layout:last-child {
+  margin: 0;
+}
 </style>

src/views/project/form/ProjectForm.vue

@@ -112,7 +112,6 @@
       <a-col :span="24">
         <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
           <a-button type="primary" @click="toNext"> 下一步 </a-button>
-          <a-button style="margin-left: 10px" @click="toNext"> 上一步 </a-button>
         </a-form-model-item>
       </a-col>
     </a-row>

src/views/project/form/ProjectUnitSelect.vue

@@ -38,7 +38,7 @@
     </a-transfer>
     <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
       <a-button type="primary" @click="toNext"> 下一步 </a-button>
-      <a-button style="margin-left: 10px"> 取消 </a-button>
+      <a-button style="margin-left: 10px" @click="toPrep">上一步</a-button>
     </a-form-model-item>
   </a-form-model>
 </template>
@@ -140,6 +140,10 @@ export default {
         }
       })
     },
+    toPrep() {
+      console.log('toPrep', this.form)
+      this.$emit('prevStep',this.form)
+    },
     onChange(targetKeys) {
       console.log('Target Keys:', targetKeys)
       this.targetKeys = targetKeys