11.20

src/permission.js

@@ -5,7 +5,7 @@ import 'nprogress/nprogress.css'// Progress 进度条样式
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // 验权
 
-const whiteList = ['/userList','/courseList','/pianoList','/courseEdit','/bannerList','/bannerEdit'] // 不重定向白名单
+const whiteList = ['/userList','/courseList','/pianoList','/courseEdit','/bannerList','/bannerEdit','/bargainList','/bargainEdit'] // 不重定向白名单
 router.beforeEach((to, from, next) => {
   NProgress.start()
   if (getToken()) {

src/router/index.js

@@ -110,6 +110,25 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/bargainList',
+        component: () => import('@/views/bargain/index'),
+        name: 'bargainList',
+        meta: { title: '砍价活动管理', noCache: false }
+      },
+      {
+        path: '/bargainEdit',
+        component: () => import('@/views/bargain/bargainEdit'),
+        name: 'bargainEdit',
+        meta: { title: '砍价活动编辑', noCache: false },
+        hidden: true
+      }
+    ]
+  },
   { path: '*', redirect: '/404', hidden: true }
 ]
 

src/views/bargain/bargainEdit.vue

+<template>
+  <div class="app-container">
+    <sticky className="sub-navbar">
+      <div style="text-align: right;margin-bottom: 20px">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button type="danger" @click="backList">取消</el-button>
+      </div>
+    </sticky>
+    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px"
+             style='width: 650px; margin-left:50px;'>
+      <el-form-item label="活动名称" prop="activityName">
+        <el-input type="text" placeholder="请输入活动名称"
+                  v-model.trim="temp.activityName">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="活动天数" prop="activityDay">
+        <el-input type="text" placeholder="请输入活动天数"
+                  v-model.trim="temp.activityDay">
+        </el-input>
+      </el-form-item>      
+      <el-form-item label="参与人数" prop="numberOfParticipants">
+        <el-input type="text" placeholder="请输入参与人数"
+                  v-model.trim="temp.numberOfParticipants">
+        </el-input>
+      </el-form-item>      
+      <el-form-item label="原价" prop="originalPrice">
+        <el-input type="text" placeholder="请输入原价"
+                  v-model.trim="temp.originalPrice">
+        </el-input>
+      </el-form-item>      
+      <el-form-item label="活动价格" prop="activityPrice">
+        <el-input type="text" placeholder="请输入活动价格"
+                  v-model.trim="temp.activityPrice">
+        </el-input>
+      </el-form-item>      
+      <el-form-item label="实际可砍价金额" prop="ActualAmountAvailable">
+        <el-input type="text" placeholder="请输入实际可砍价金额"
+                  v-model.trim="temp.ActualAmountAvailable">
+        </el-input>
+      </el-form-item>      
+    </el-form>
+
+    <div class="editor-container">
+      <Tinymce :height="500" ref="editor" v-model="temp.commodity_introduction"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { upload_url } from '@/common/config'
+
+export default {
+  name: 'courseEdit',
+  components: { Tinymce, Sticky},
+  props: ['currentId'],
+  data() {
+    return {
+      bannerTypes: [],
+      // 临时的表单值
+      temp: {
+        id: undefined,
+        activityName:undefined,
+        activityDay: undefined,
+        numberOfParticipants: undefined,
+        originalPrice:undefined,
+        activityPrice: undefined,
+        ActualAmountAvailable: undefined,
+        createDate: undefined,
+        creteUser: undefined,
+        commodity_introduction: undefined
+      },
+      uploadUrl: upload_url,
+      // 表单验证的规则
+      rules: {
+        activityName: [
+          { required: true, message: '活动名称不能为空', trigger: 'blur'},
+          { type: 'string', max: 25, message: '活动名称不允许大于25位数', trigger: 'blur' },
+        ],
+        activityDay: [
+            { required: true, message: '活动天数不能为空', trigger: 'blur' },
+            { type: 'number', message: '只允许输入数字', trigger: 'blur' }
+            ],
+        numberOfParticipants: [
+            { required: true, message: '参与人数不能为空', trigger: 'blur' },
+            { type: 'number', message: '只允许输入数字', trigger: 'blur' }
+            ],
+        originalPrice: [
+            { required: true, message: '原价不能为空', trigger: 'blur' },
+            { type: 'number', message: '只允许输入数字', trigger: 'blur' }
+            ],
+        activityPrice: [
+            { required: true, message: '活动价格不能为空', trigger: 'blur' },
+            { type: 'number', message: '只允许输入数字', trigger: 'blur' }
+            ],
+        ActualAmountAvailable: [
+            { required: true, message: '实际可砍价金额不能为空', trigger: 'blur' },
+            { type: 'number', message: '只允许输入数字', trigger: 'blur' }
+            ],
+      },
+      videoFlag: false,
+      videoUploadPercent: 0,
+      pickerOptions1: {
+        // 大于当前时间
+        disabledDate: (time) => {
+          return time.getTime() < Date.now()
+        }
+      }
+    }
+  },
+  filters: {},
+  created() {
+    const params = this.$route.params
+    if (params && params.id) {
+      this.$fetch.sysCourse.query({ id: params.id }).then(({ data }) => {
+        this.temp = data;
+      })
+    }
+  },
+  computed: {
+    // 加载显示的文字
+    displays() {
+      return this.$store.getters.displays
+    }
+  },
+  mounted() {
+    this.createTime();
+    this.$fetch.sysCourseType.findAll().then(({ data }) => {
+      console.log(data);
+      this.bannerTypes = data
+      const params = this.$route.params
+      if (!params || !params.id) {
+        this.temp.type = data[0].value
+      }
+    })
+  },
+  methods: {
+    // 返回
+    backList() {
+      this.$confirm('是否放弃当前编辑信息?', '提示', {
+        confirmButtonText: '继续编辑',
+        cancelButtonText: '放弃',
+        type: 'warning'
+      }).then(() => {
+
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消编辑'
+        })
+        this.back()
+      })
+    },
+    createTime(){
+      var date=new Date();
+      var year = date.getFullYear();       //年
+      var month = date.getMonth() + 1;     //月
+      var day = date.getDate(); 
+      this.temp.createDate=year+'-'+month+'-'+day;
+    },
+    // 返回
+    back() {
+      this.$router.push({ name: 'courseList' })
+    },
+    saveData() {
+      if (this.videoFlag) {
+        this.$message.warning('请等待视频上传成功')
+        return
+      }
+      console.log(this.$refs['dataForm'])
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          if (!tempData.id) {
+            this.createTime();
+            this.$fetch.sysCourse.insert(tempData).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.back()
+            })
+          } else {
+            this.$fetch.sysCourse.update(tempData).then(() => {
+              this.$message({
+                message: '更新成功',
+                type: 'success'
+              })
+              this.back()
+            })
+          }
+        } else {
+          console.log('valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .el-rate {
+  }
+
+  .editor-container {
+    min-height: 500px;
+    margin: 0 0 30px;
+
+  }
+
+  .editor-upload-btn-container {
+    text-align: right;
+    margin-right: 10px;
+  }
+
+  .editor-upload-btn {
+    display: inline-block;
+  }
+
+  .avatar {
+    width: 500px;
+    height: 300px;
+    display: block;
+  }
+  .avatar-img {
+    width: 150px;
+    height: 150px;
+    display: block;
+  }
+</style>

src/views/bargain/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+
+      <router-link :to="{name:'bargainEdit'}">
+        <el-button class="filter-item" style="margin-left: 10px;" v-waves type="primary" icon="el-icon-plus">添加
+        </el-button>
+      </router-link>
+      <el-button @click.native.prevent="openShowLog()" class="filter-item" style="margin-left: 10px;" v-waves type="primary" icon="el-icon-plus">添加类型
+        </el-button>
+      <modal @on-close="closeThis()":is-show='isShowLog'>
+          <el-form :rules="rules" ref="dataForm" :model="types" label-position="left" label-width="100px"
+             style='width: 350px; margin-left:50px;'>
+            <el-form-item label="阶段人数" prop="courseName">
+              <el-input type="text" placeholder="请输入阶段人数"
+                   v-model.trim="types.courseName">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="金额范围" prop="courseName">
+              <el-input type="text" placeholder="请输入金额范围"
+                   v-model.trim="types.courseName">
+              </el-input>
+            </el-form-item>
+          </el-form>  
+          <el-button type="primary" @click="saveData">保存</el-button>
+      </modal>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top-start" :hide-after="toolTipTime">
+        <el-button class="filter-item" style="margin-left: 10px;" v-waves @click="refresh" type="success"
+                   icon="el-icon-refresh" size="medium" circle></el-button>
+      </el-tooltip>
+    </div>
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" border fit
+              highlight-current-row style="width: 100%">
+      <el-table-column align="center" :label="table.activityName">
+        <template slot-scope="scope">
+          <span v-for="item in bannerTypes" :key="item.key">
+            {{scope.row.activityName}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.activityDay">
+        <template slot-scope="scope">
+          <span v-for="item in bannerTypes" :key="item.key">
+            {{scope.row.activityDay}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.numberOfParticipants">
+        <template slot-scope="scope">
+          <span>{{scope.row.numberOfParticipants}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.originalPrice">
+        <template slot-scope="scope">
+          <span>{{scope.row.originalPrice}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.activityDay">
+        <template slot-scope="scope">
+          <span>{{scope.row.activityDay}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.ActualAmountAvailable">
+        <template slot-scope="scope">
+          <span>{{scope.row.ActualAmountAvailable}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.createDate">
+        <template slot-scope="scope">
+          <span>{{scope.row.createDate}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.createUser">
+        <template slot-scope="scope">
+          <span>{{scope.row.createUser}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="200">
+        <template slot-scope="scope">
+          <router-link :to="{name:'bargainEdit',params:{id:scope.row.id}}">
+            <el-button type="primary" icon="el-icon-edit" size="mini"
+                       round></el-button>
+          </router-link>
+          <el-button type="danger" icon="el-icon-delete"
+                     @click.native.prevent="handleDelete(scope.row)" size="mini" round></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页  -->
+    <div class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="listQuery.currentPage" :page-sizes="[10, 20, 30, 40,50,100]"
+                     :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { parseTime } from '@/utils'
+  import Modal from '@/components/Modal'
+  export default {
+    name: 'banner',
+    components: { Modal},
+    data() {
+      return {
+        isShowLog: false,
+        tableKey: 0,
+        // 是否加载
+        listLoading: true,
+        // 查询参数
+        listQuery: {
+          currentPage: 1,
+          pageSize: 10,
+          name: undefined,
+          code: undefined
+        },
+        // 表格的数据
+        list: null,
+        // 总数量
+        total: null,
+        // 表单显示的名称
+        table: {
+          activityName:'活动名称',
+          activityDay: '活动天数',
+          numberOfParticipants: '参与人数',
+          originalPrice:'原价',
+          activityPrice: '活动价格',
+          ActualAmountAvailable: '实际可砍价金额',
+          createDate: '创建时间',
+          createUser: '创建人',
+        },
+        types: {
+          id: undefined,
+          courseName: undefined,
+        },
+        // 临时的表单值
+        temp: {
+          id: undefined,
+          activityName:undefined,
+          activityDay: undefined,
+          numberOfParticipants: undefined,
+          originalPrice:undefined,
+          activityPrice: undefined,
+          ActualAmountAvailable: undefined,
+          createDate: undefined,
+          creteUser: undefined,
+          commodity_introduction: undefined
+        },
+        // 表单验证的规则
+        rules: {
+          courseName: [
+            { required: true, message: '课程名称不能为空', trigger: 'blur' },
+            { type: 'string', max: 20, message: '课程名称不允许大于20位数', trigger: 'blur' }
+            ]
+        },
+        bannerTypes: []
+      }
+    },
+    created() {
+      // 初始化数据
+      this.getList()
+    },
+    mounted() {
+      this.$fetch.sysDict.optionsChildren('BANNER_TYPE').then(({ data }) => {
+        this.bannerTypes = data
+      })
+    },
+    computed: {
+      // 提示--显示的时间
+      toolTipTime() {
+        return this.$store.getters.toolTipTime
+      },
+      // 加载显示的文字
+      elementLoadingText() {
+        return this.$store.getters.elementLoadingText
+      },
+      // 加载显示的文字
+      displays() {
+        return this.$store.getters.displays
+      }
+    },
+    methods: {
+      closeThis(){
+        this.isShowLog=false;
+      },
+      openShowLog(){
+        this.isShowLog=true;
+      },
+      getList() {
+        // 初始化数据 开始加载数据
+        this.listLoading = true
+        this.$fetch.sysCourse
+          .pageList(this.listQuery)
+          .then(({ data, total }) => {
+            // 赋值数据
+            this.list = data;
+            // 数据加载完成
+            this.listLoading = false
+          })
+      },
+      // 处理搜索
+      handleFilter() {
+        this.listQuery.currentPage = 1
+        this.getList()
+      },
+      // 处理每页条数
+      handleSizeChange(val) {
+        this.listQuery.pageSize = val
+        this.getList()
+      },
+      // 处理当前页面
+      handleCurrentChange(val) {
+        this.listQuery.currentPage = val
+        this.getList()
+      },
+      handleSuccess(response, file) {
+        this.temp.url = response.data
+      },
+      handleRemove(file) {
+        this.temp.url = undefined
+      },
+      beforeUpload(file) {
+        const _URL = window.URL || window.webkitURL
+        return new Promise((resolve, reject) => {
+          const img = new Image()
+          img.src = _URL.createObjectURL(file)
+          img.onload = function() {
+          }
+          resolve(true)
+        })
+      },
+      // 初始化temp值
+      resetTemp() {
+        this.temp = {
+          id: undefined,
+          title: undefined,
+          curriculumType: undefined,
+          pictureAddress: undefined,
+          videoAddress: undefined,
+          createDate: undefined,
+          cretePerson: undefined,
+          numberOrder: undefined
+        }
+      },
+      // 删除
+      handleDelete(row) {
+        if (!row.id) {
+          this.$message('请刷新后再试')
+          return
+        }
+        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.$fetch.sysCourse.deletes(row.id).then(() => {
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+              const index = this.list.indexOf(row)
+              this.list.splice(index, 1)
+            }).catch(function(reason) {
+                 console.log( reason);
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            })
+          })
+      },
+      refresh() {
+        // 初始化查询参数
+        this.listQuery = {
+          currentPage: 1,
+          pageSize: 10
+        }
+        this.tableKey = this.tableKey + 1
+        this.getList()
+      },
+      getShowType(row, dispaly = 1) {
+        if (row.display === dispaly) {
+          return {
+            type: 'info',
+            label: '隐藏'
+          }
+        }
+        return {
+          type: 'success',
+          label: '显示'
+        }
+      },
+      saveData() {
+      if (this.videoFlag) {
+        this.$message.warning('请等待视频上传成功')
+        return
+      }
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.types)
+          if (!tempData.id) {
+            this.$fetch.sysCourseType.insert(tempData).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.isShowLog=false;
+              this.back()
+            })
+          } else {
+            this.$fetch.sysCourseType.update(tempData).then(() => {
+              this.$message({
+                message: '更新成功',
+                type: 'success'
+              })
+              this.isShowLog=false;
+              this.back()
+            })
+          }
+        } else {
+          console.log('valid error')
+        }
+      })
+    }
+    }
+  }
+</script>
+<style scoped>
+</style>
\ No newline at end of file