课程管理

src/api/course/course.js

@@ -1,12 +1,12 @@
 import request from '@/utils/request'
 
-const projectApi = {
+const courseApi = {
 //   add: 'sys/menu/add',
-//   get: 'sys/menu/get',
+  get: '/courseManagement/course/details',
 //   update: 'sys/menu/update',
 //   del: 'sys/menu/delete',
 //   updateStatus: 'sys/menu/updateStatus',
-  list: 'course/pageList'
+  list: '/courseManagement/course/listPage'
 }
 
 // export function menuAdd (params) {
@@ -37,6 +37,8 @@ const projectApi = {
 //     data: params
 //   })
 // }
+
+// 查询课程列表
 export function getCourseList (params) {
   return request({
     url: courseApi.list,
@@ -44,6 +46,18 @@ export function getCourseList (params) {
     params: params
   })
 }
+
+// 查看课程详情
+export function getCourseDetails (params) {
+  return request({
+    url:courseApi.get,
+    method:'get',
+    params:params
+  })
+}
+
+
+
 // export function menuUpdateStatus (params) {
 //   return request({
 //     url: menuApi.updateStatus,

src/api/course/customCourse.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+const projectApi = {
+//   add: 'sys/menu/add',
+//   get: 'sys/menu/get',
+//   update: 'sys/menu/update',
+//   del: 'sys/menu/delete',
+//   updateStatus: 'sys/menu/updateStatus',
+  list: 'courseManagement/customCourse/listPage'
+}
+
+// export function menuAdd (params) {
+//   return request({
+//     url: menuApi.add,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuGet (params) {
+//   return request({
+//     url: menuApi.get,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuUpdate (params) {
+//   return request({
+//     url: menuApi.update,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuDelete (params) {
+//   return request({
+//     url: menuApi.del,
+//     method: 'post',
+//     data: params
+//   })
+// }
+export function getcustomCourseList (params) {
+  return request({
+    url: customApi.list,
+    method: 'get',
+    params: params
+  })
+}
+// export function menuUpdateStatus (params) {
+//   return request({
+//     url: menuApi.updateStatus,
+//     method: 'post',
+//     data: params
+//   })
+// }

src/config/router.config.js

@@ -101,27 +101,27 @@ export const asyncRouterMap = [
       // 课程管理
       {
         path: '/courseManagement',
-        redirect: '/course/courseManagement/courseList',
+        redirect: '/courseManagement/course/courseList',
         component: RouteView,
         meta: { title: '课程管理', icon: bxAnaalyse, permission: ['from'] },
         children: [
           {
-            path: '/course/courseManagement/courseList',
+            path: '/courseManagement/course/courseList',
             name: 'courseList',
             component: () => import('@/views/course/CourseList'),
-            meta: { title: '课程项目', keepAlive: true, permission: ['form'] }
+            meta: { title: '系统课程', keepAlive: true, permission: ['form'] }
           },
           {
-            path: '/form/step-form',
+            path: '/courseManagement/customCourseList',
-            name: 'StepForm',
+            name: 'customCourse',
-            component: () => import('@/views/form/stepForm/StepForm'),
+            component: () => import('@/views/course/customCourseList'),
-            meta: { title: '系统推荐', keepAlive: true, permission: ['form'] }
+            meta: { title: '自制课程', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/form/advanced-form',
             name: 'AdvanceForm',
             component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: '终端培训', keepAlive: true, permission: ['form'] }
+            meta: { title: '资源库', keepAlive: true, permission: ['form'] }
           }
         ]
       },

src/views/course/CourseList.vue

@@ -3,72 +3,11 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
         <a-row :gutter="48">
-          <a-col :md="8" :sm="24">
+          <a-col :md="6" :sm="24">
-            <a-form-item label="项目名">
+            <a-form-item label="课程名称">
-              <a-input v-model="queryParam.projectName" style="width: 100%" />
+              <a-input v-model="queryParam.courseName" style="width: 100%" />
             </a-form-item>
           </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="项目状态">
-              <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" weight="20px">
-                <a-select-option value="null">全部</a-select-option>
-                <a-select-option value="1">运行中</a-select-option>
-                <a-select-option value="2">已结束</a-select-option>
-                <a-select-option value="1">未发布</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="开始时间">
-              <a-date-picker v-model="queryParam.stateDate" style="width: 100%" placeholder="请输入开始时间" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="结束时间">
-              <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="培训方式">
-              <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" weight="20px">
-                <a-select-option value="null">全部</a-select-option>
-                <a-select-option value="1">培训</a-select-option>
-                <a-select-option value="2">考试</a-select-option>
-                <a-select-option value="3">培训-练习</a-select-option>
-                <a-select-option value="4">培训-练习-考试</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <!-- <template v-if="advanced">
-            <a-col :md="8" :sm="24">
-              <a-form-item label="调用次数">
-                <a-input-number v-model="queryParam.callNo" style="width: 100%" />
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="更新日期">
-                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </template> -->
           <a-col :md="(!advanced && 8) || 24" :sm="24">
             <span
               class="table-page-search-submitButtons"
@@ -89,7 +28,6 @@
       <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
-          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
         </a-menu>
         <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
       </a-dropdown>
@@ -104,29 +42,19 @@
       :alert="options.alert"
       :rowSelection="options.rowSelection"
     >
-      <span slot="serial" slot-scope="text, record, index">
+      
-        {{ index + 1 }}
+        <template slot="action" slot-scope="text, record">
-      </span>
+          <a href="javascript:;" @click="handleEdit(record)">详情</a>
-      <span slot="action" slot-scope="text, record">
-        <template>
-          <a @click="handleEdit(record)">编辑</a>
           <a-divider type="vertical" />
-        </template>
+          <a href="javascript:;" @click="handleDetail(record)">课程</a>
-        <a-dropdown>
+          <a-divider type="vertical" />
-          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+          <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
-          <a-menu slot="overlay">
-            <a-menu-item>
-              <a href="javascript:;">详情</a>
-            </a-menu-item>
-            <a-menu-item v-if="$auth('table.disable')">
-              <a href="javascript:;">禁用</a>
-            </a-menu-item>
-            <a-menu-item v-if="$auth('table.delete')">
             <a href="javascript:;">删除</a>
-            </a-menu-item>
+            <a-divider type="vertical" />
-          </a-menu>
+          </a-popconfirm>
-        </a-dropdown>
+          <router-link :to="'/dictionary/dictionaryItem/list/' + record.dictionaryCode">题库</router-link>
-      </span>
+        </template>
+      
     </s-table>
   </div>
 </template>
@@ -152,52 +80,36 @@ export default {
       columns: [
         {
           title: '序号',
+          dataIndex: 'index',
           width: 60,
-          scopedSlots: { customRender: 'serial' },
+          customRender: (text, record, index) => {
+	          return index + 1
+	        }
         },
         {
-          title: '项目名称',
+          title: '课程编号',
-          dataIndex: 'projectName',
+          dataIndex: 'id',
-          key: 'projectName'
+          align: 'center',
         },
         {
-          title: '时间',
+          title:'课程名称',
-          dataIndex: 'description',
+          dataIndex:'courseName',
+          align:'center'
         },
         {
-          title: '人数',
+          title: '课时/分',
-          dataIndex: 'callNo',
+          dataIndex: 'hour',
-          // sorter: true,
+          align:'center'
-          needTotal: true,
-          // customRender: (text) => text + ' 次',
         },
         {
-          title: '项目类型',
+          title: '数量',
-          dataIndex: 'description',
+          dataIndex: 'questionCount',
+          align:'center'
         },
-        {
-          title: '项目状态',
-          dataIndex: 'description',
-        },
-        {
-          title: '创建人员',
-          dataIndex: 'projectStatus',
-        },
-        {
-          title: '创建时间',
-          dataIndex: 'updatedAt',
-          sorter: true,
-        },
-        // {
-        //   title: '操作',
-        //   dataIndex: 'action',
-        //   width: '150px',
-        //   scopedSlots: { customRender: 'action' },
-        // },
         {
           title: '操作',
           key: 'operation',
-          width: 100,
+          width: 300,
           align: 'center',
           scopedSlots: { customRender: 'action' }
         }

src/views/course/courseDetail.vue

@@ -0,0 +1,27 @@
+<template>
+  <a-descriptions title="User Info">
+    <a-descriptions-item label="UserName">
+      Zhou Maomao
+    </a-descriptions-item>
+    <a-descriptions-item label="Telephone">
+      1810000000
+    </a-descriptions-item>
+    <a-descriptions-item label="Live">
+      Hangzhou, Zhejiang
+    </a-descriptions-item>
+    <a-descriptions-item label="Remark">
+      empty
+    </a-descriptions-item>
+    <a-descriptions-item label="Address">
+      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+
+
+
+<script>
+    import moment from 'moment'
+    import { STable } from '@/components'
+    import { getCourseList } from '@/api/course/course'
+</script>

src/views/course/customCourseList.vue

@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目名">
+              <a-input v-model="queryParam.projectName" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">运行中</a-select-option>
+                <a-select-option value="2">已结束</a-select-option>
+                <a-select-option value="1">未发布</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="开始时间">
+              <a-date-picker v-model="queryParam.stateDate" style="width: 100%" placeholder="请输入开始时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="结束时间">
+              <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="培训方式">
+              <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">培训</a-select-option>
+                <a-select-option value="2">考试</a-select-option>
+                <a-select-option value="3">培训-练习</a-select-option>
+                <a-select-option value="4">培训-练习-考试</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <!-- <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template> -->
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" icon="search"  @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" icon="redo" @click="() => (queryParam = {})">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="primary" icon="minus" @click="handleEdit()">删除</a-button>
+      <!-- <a-button type="dashed" @click="tableOption">{{ (optionAlertShow && '关闭') || '开启' }} alert</a-button> -->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+        </template>
+        <a-dropdown>
+          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.disable')">
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.delete')">
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import {  getcustomCourseList } from '@/api/course/customCourse'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+  },
+  data() {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          width: 60,
+          scopedSlots: { customRender: 'serial' },
+        },
+        {
+          title: '课程编号',
+          dataIndex: 'ID',
+          key: 'id'
+        },
+        {
+          title: '课程名称',
+          dataIndex: 'courseName',
+        },
+        {
+          title: '课时/分',
+          dataIndex: 'hors',
+          needTotal: true,
+        },
+        {
+          title: '课件大小',
+          dataIndex: 'description',
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 100,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getcustomCourseList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange,
+        },
+      },
+      optionAlertShow: false,
+    }
+  },
+  created() {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption() {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+          },
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null,
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit(record) {
+      this.$emit('onEdit', record)
+    },
+    handleOk() {},
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+
+    resetSearchForm() {
+      this.queryParam = {
+        date: moment(new Date()),
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+ 
+</style>