xcx

src/pages/system/courseManager/courseList/add.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>课程主图：</span>
+          <div class="flex-item">
+            <div>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.CourseImg" :src="postData.CourseImg" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程名称：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-input
+                placeholder="请输入课程名称"
+                v-model="postData.CourseName"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程类型：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-select v-model="postData.LocationId" placeholder="请选择">
+                <el-option
+                  v-for="item in courseTypeList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程价格：</span>
+          <div class="flex-item">
+            <div style="width: 200px;">
+              <el-input
+                placeholder="请输入课程价格"
+                v-model="postData.Price"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>案场：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-select v-model="postData.CaseId" placeholder="请选择">
+                <el-option
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>开课人数：</span>
+          <div class="flex-item">
+            <div style="width: 200px;">
+              <el-input
+                placeholder="请输入开课人数"
+                v-model="postData.MaxNum"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>最小开课人数：</span>
+          <div class="flex-item">
+            <div style="width: 200px;">
+              <el-input
+                placeholder="请输入开课人数"
+                v-model="postData.MinNum"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课时数：</span>
+          <div class="flex-item">
+            <div style="width: 200px;">
+              <el-input
+                placeholder="请输入课时数"
+                v-model="postData.CourseNum"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程时间：</span>
+          <div class="flex-item">
+            <div>
+              <el-date-picker
+                v-model="postData.BeginDate"
+                type="date"
+                placeholder="选择开始日期">
+              </el-date-picker>
+              <span style="line-height:40px;display:inline-block;">-</span>
+              <el-date-picker
+                v-model="postData.EndDate"
+                type="date"
+                placeholder="选择结束日期">
+              </el-date-picker>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程计划备注：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-input
+                type="textarea"
+                autosize
+                placeholder="请输入备注"
+                v-model="postData.Remark"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程标签：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-select
+                v-model="postData.tagids"
+                multiple
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请选择课程标签">
+                <el-option
+                  v-for="item in tagList"
+                  :key="item.value"
+                  :label="item.id"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>课程简介：</span>
+          <div class="flex-item">
+            <div style="width: 50%;">
+              <el-input
+                type="textarea"
+                autosize
+                placeholder="请输入课程简介"
+                v-model="postData.CourseDesc"
+                clearable
+                >
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>是否精选课程：</span>
+          <div class="flex-item">
+            <div>
+              <el-radio v-model="postData.IsSelect" label="1">是</el-radio>
+              <el-radio v-model="postData.IsSelect" label="0">否</el-radio>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        CourseImg: '', // 课程主图
+        CourseName: '', // 课程名称
+        LocationId: '', // 课程类型
+        Price: '', // 课程价格
+        CaseId: '', // 案场id
+        MaxNum: '', // 上课人数
+        MinNum: '', // 最小开课人数
+        CourseNum: '', // 课时数
+        BeginDate: '', // 课程开始时间
+        EndDate: '', // 课程结束时间
+        Remark: '', // 课程计划备注
+        tagids: [], // 课程标签（已有标签数据存入此字段）
+        tagnames: [], // 课程标签（新增标签数据存入此字段）
+        CourseDesc: '', // 课程描述
+        IsSelect: '0', // 是否精选课程
+      },
+      courseTypeList: [], // 课程类型列表
+      tagList: [], // 标签列表
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId === '' ? this.defaultCaseId || '' : this.postData.CaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    handleAvatarSuccess (res, file) {
+      this.postData.CourseImg = res.result.url
+    },
+    submit () { // 提交数据
+    },
+    cancel () {
+      this.$router.push({ name: 'courseList' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/courseManager/courseList/edit.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <!-- <span>选择案场：</span> -->
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-select v-model="CaseId" placeholder="请选择">
+                <el-option
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>渠道名：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入渠道名"
+                v-model="postData.ChannelName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        ChannelId: '', // 渠道id
+        ChannelName: '', // 渠道名称
+        CaseId: '', // 案场id
+        OrgId: '', // 机构id
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId === '' ? this.defaultCaseId || '' : this.postData.CaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  created () {
+    this.getChannelInfo()
+  },
+  components: {},
+  methods: {
+    getChannelInfo () {
+      this.$ajax(this.$api.channelManager.getChannelInfo.url, {
+        method: this.$api.channelManager.getChannelInfo.method,
+        urlData: { channelId: this.$route.query.id }
+      }).then(res => {
+        this.postData = res
+      })
+    },
+    submit () { // 提交数据
+      if (this.postData.ChannelName === '') {
+        this.$message({
+          type: 'error',
+          message: '渠道名称不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      if (this.postData.CaseId === '') this.postData.CaseId = this.CaseId
+      this.$ajax(this.$api.channelManager.editChannel.url, {
+        method: this.$api.channelManager.editChannel.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.$router.push({ name: 'channelList' })
+      })
+    },
+    cancel () {
+      this.$router.push({ name: 'channelList' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/courseManager/courseList/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click="addCourse">新增课程</el-button>
+        </div>
+        <ul>
+          <li>
+            <!-- <span>选择案场：</span> -->
+            <el-select v-model="postData.caseid" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <el-select v-model="postData.typeid" placeholder="课程分类">
+              <el-option
+                key=""
+                label=""
+                value=""
+              >
+              </el-option>
+              <el-option
+                v-for="item in courseTypeList"
+                :key="item.typeId"
+                :label="item.typeName"
+                :value="item.typeId">
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <el-input
+              placeholder="请输入课程名称"
+              v-model="postData.name"
+            >
+            </el-input>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="CourseName"
+          label="课程名称"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="Price"
+          label="课程价格"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="LocationId"
+          label="课程类别"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="CaseId"
+          label="所在案场"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="BeginDate"
+          label="课程开始时间"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          prop="EndDate"
+          label="课程结束时间"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="600">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="success">添加课程详情</el-button>
+            <el-button
+              size="mini"
+              type="warning">排课</el-button>
+            <el-button
+              size="mini"
+              type="primary">复制课程</el-button>
+            <el-button
+              size="mini"
+              type="warning">发布</el-button>
+            <el-button
+              size="mini"
+              type="danger">取消发布</el-button>
+            <el-button
+              size="mini"
+              type="warning"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+        typeid: '', // 课程类型
+        name: '', // 课程名称
+      },
+      currentList: [{
+        CourseName: 'xxx',
+        Price: 'xxx',
+        LocationId: 'xxx',
+        CaseId: 'xxx',
+        BeginDate: 'xxx',
+        EndDate: 'xxx',
+        CourseId: 'xxx',
+      }],
+      courseTypeList: [],
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getList()
+    })
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  methods: {
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    handleEdit (index, row) { // 编辑
+      this.$router.push({ name: 'addCourse', query: { id: row.CourseId } })
+    },
+    handleDelete (index, row) { // 删除
+    },
+    addCourse () {
+      this.$router.push({ name: 'addCourse' })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/courseManager/courseList/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/page.js

@@ -61,6 +61,8 @@ import courseManager from './courseManager/index' // 课程管理
 import fiveA from './courseManager/fiveA/index' // 全龄生活5A
 import addFiveA from './courseManager/fiveA/add' // 全龄生活5A添加
 import editFiveA from './courseManager/fiveA/edit' // 全龄生活5A编辑
+import courseList from './courseManager/courseList/index' // 课程列表
+import addCourse from './courseManager/courseList/add' // 新增课程
 import courseTag from './courseManager/courseTag/index' // 课程标签
 
 import dataStatistics from './dataStatistics/index' // 数据统计
@@ -346,6 +348,16 @@ export default {
             component: editFiveA,
             children: []
           }]
+        }, { // 课程列表
+          path: 'courseList',
+          name: 'courseList',
+          component: courseList,
+          children: [{ // 新增课程
+            path: 'addCourse',
+            name: 'addCourse',
+            component: addCourse,
+            children: []
+          }]
         }, { // 课程标签
           path: 'courseTag',
           name: 'courseTag',

src/style/main.css

@@ -352,6 +352,22 @@ select:focus {
   margin-bottom: 10px;
 }
 
+.el-textarea__inner{
+  line-height: 20px;
+  padding: 10px 15px;
+}
+
+.el-radio{
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.el-radio>*{
+  display: inline-block;
+  line-height: 40px;
+  vertical-align: middle;
+}
+