新建页面

package.json

@@ -27,7 +27,8 @@
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/layout/index.vue

@@ -81,7 +81,7 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 111;
+  z-index: 11111;
   width: calc(100% - #{$sideBarWidth});
   transition: width 0.28s;
 }

src/views/contentManager/components/activity.vue

@@ -1,49 +1,34 @@
 <template>
   <div>
-    <!-- 头部展示 -->
-    <!-- <div class="headWrap">
-      <div class="left">
-        <div class="headItem">
-          <p>本月请假:<span>12345</span></p>
-        </div>
-      </div>
-      <div class="right">
-      </div>
-    </div> -->
     <!-- 搜索标题 -->
-    <el-form :inline="true"
-             class="searchForm"
-             v-model="searchForm">
-      <el-form-item>
-        <el-date-picker style="width: 400px;"
-          v-model="courseDate"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          @change="searchCourseDate"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getList" type="danger">搜索</el-button>
-        <el-button @click="onReSet" type="primary">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <div @click="openTeaching('create')"
+           class='newBand'>新建</div>
     <!-- 列表 -->
     <div class="tableWrap">
       <el-table :data='tableList' :header-cell-style="{background:'#EDEEF0',color:'#444'}">
-        <el-table-column align='center' prop="createTime"
-                         label="请假发起时间">
+        <el-table-column align='center'
+                         label="轮播图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.coverImage" alt="">
+          </template>
         </el-table-column>
         <el-table-column align='center'
-                         label="请假时间">
+                         label="跳转连接">
           <template slot-scope="scope">
-            {{ scope.row.startTime }} - {{ scope.row.endTime }}
+            {{ scope.row.linkUrl + '/' + scope.row.id }}
           </template>
         </el-table-column>
         <el-table-column align='center' prop="remark"
-                         label="请假说明">
+                         label="是否使用">
+          <template slot-scope="scope">
+            {{ scope.row.status == 1 ? '是' : '否' }}
+          </template>
+        </el-table-column>
+        <el-table-column align='center' label="操作">
+            <template slot-scope="scope">
+              <el-button @click="onDel(scope.row)" type="text">删除</el-button>
+              <el-button @click="onStop(scope.row)"  type="text">停用</el-button>
+            </template>
         </el-table-column>
       </el-table>
       <pagination :total="pageInfo.total"
@@ -55,23 +40,15 @@
   </div>
 </template>
 <script>
-import { teacherLeaveRecordQuery } from '@/api/teacherManager'
+import { newsList, newsUpdate } from '@/api/contentManager'
 import pagination from '@/components/Pagination/index'
 import store from '@/store'
-import { attendance } from '@/utils/searchArray'
 export default {
   components: {
     pagination
   },
   data () {
     return {
-      attendance: attendance,
-      courseDate: null,
-      searchForm: {
-        startTime: null,
-        endTime: null,
-      },
-      tableList: [],
       tableList: [],
       organId: store.getters.organ,
       teacherId: this.$route.query.teacherId,
@@ -89,35 +66,39 @@ export default {
   },
   methods: {
     getList() {
-      let params = this.searchForm
-      params.rows = this.pageInfo.limit
-      params.page = this.pageInfo.page,
-      params.teacherId = this.teacherId
-      teacherLeaveRecordQuery(params).then(res => {
+      let params = {
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        type: 3
+      }
+      newsList(params).then(res => {
+        console.log(res)
         if(res.code == 200) {
           this.tableList = res.data.rows
           this.pageInfo.total = res.data.total
         }
       })
     },
-    searchCourseDate(value) {
-      if(value) {
-        this.searchForm.startTime = value[0]
-        this.searchForm.endTime = value[1]
-      } else {
-        this.searchForm.startTime = null
-        this.searchForm.endTime = null
-      }
+    openTeaching(type, rows) {
+        this.$router.push({
+            path: '/contentManager/contentOperation',
+            query: {
+              type: 1,
+              pageType: type
+            }
+        })
     },
-    onReSet() {
-      this.courseDate = null
-      this.searchForm = {
-        startTime: null,
-        endTime: null,
-      }
+    onDel(row) { // 删除
+
+    },
+    onStop(row) { // 停止
+      // newsUpdate
     }
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.bannerImg {
+  height: 60px;
+}
 </style>

src/views/contentManager/components/banner.vue

@@ -1,38 +1,33 @@
 <template>
   <div>
-    <!-- 头部展示 -->
-    <!-- <div class="headWrap">
-      <div class="left">
-        <div class="headItem">
-          <p>本月请假:<span>12345</span></p>
-        </div>
-      </div>
-      <div class="right">
-      </div>
-    </div> -->
     <!-- 搜索标题 -->
     <div @click="openTeaching('create')"
            class='newBand'>新建</div>
     <!-- 列表 -->
     <div class="tableWrap">
       <el-table :data='tableList' :header-cell-style="{background:'#EDEEF0',color:'#444'}">
-        <el-table-column align='center' prop="createTime"
+        <el-table-column align='center'
                          label="轮播图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.coverImage" alt="">
+          </template>
         </el-table-column>
         <el-table-column align='center'
                          label="跳转连接">
           <template slot-scope="scope">
-            {{ scope.row.startTime }} - {{ scope.row.endTime }}
+            {{ scope.row.linkUrl + '/' + scope.row.id }}
           </template>
         </el-table-column>
         <el-table-column align='center' prop="remark"
                          label="是否使用">
+          <template slot-scope="scope">
+            {{ scope.row.status == 1 ? '是' : '否' }}
+          </template>
         </el-table-column>
-        <el-table-column align='center' prop="remark"
-                         label="操作">
+        <el-table-column align='center' label="操作">
             <template slot-scope="scope">
-              <el-button type="text">删除</el-button>
-              <el-button type="text">停用</el-button>
+              <el-button @click="onDel(scope.row)" type="text">删除</el-button>
+              <el-button @click="onStop(scope.row)"  type="text">停用</el-button>
             </template>
         </el-table-column>
       </el-table>
@@ -45,7 +40,7 @@
   </div>
 </template>
 <script>
-import { teacherLeaveRecordQuery } from '@/api/teacherManager'
+import { newsList, newsUpdate } from '@/api/contentManager'
 import pagination from '@/components/Pagination/index'
 import store from '@/store'
 export default {
@@ -71,11 +66,12 @@ export default {
   },
   methods: {
     getList() {
-      let params = this.searchForm
-      params.rows = this.pageInfo.limit
-      params.page = this.pageInfo.page,
-      params.teacherId = this.teacherId
-      teacherLeaveRecordQuery(params).then(res => {
+      let params = {
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        type: 3
+      }
+      newsList(params).then(res => {
         if(res.code == 200) {
           this.tableList = res.data.rows
           this.pageInfo.total = res.data.total
@@ -84,11 +80,24 @@ export default {
     },
     openTeaching(type, rows) {
         this.$router.push({
-            path: '/contentManager/contentOperation'
+            path: '/contentManager/contentOperation',
+            query: {
+              type: 3,
+              pageType: type
+            }
         })
+    },
+    onDel(row) { // 删除
+
+    },
+    onStop(row) { // 停止
+      // newsUpdate
     }
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.bannerImg {
+  height: 60px;
+}
 </style>

src/views/contentManager/components/information.vue

@@ -1,49 +1,34 @@
 <template>
   <div>
-    <!-- 头部展示 -->
-    <!-- <div class="headWrap">
-      <div class="left">
-        <div class="headItem">
-          <p>本月请假:<span>12345</span></p>
-        </div>
-      </div>
-      <div class="right">
-      </div>
-    </div> -->
     <!-- 搜索标题 -->
-    <el-form :inline="true"
-             class="searchForm"
-             v-model="searchForm">
-      <el-form-item>
-        <el-date-picker style="width: 400px;"
-          v-model="courseDate"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          @change="searchCourseDate"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getList" type="danger">搜索</el-button>
-        <el-button @click="onReSet" type="primary">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <div @click="openTeaching('create')"
+           class='newBand'>新建</div>
     <!-- 列表 -->
     <div class="tableWrap">
       <el-table :data='tableList' :header-cell-style="{background:'#EDEEF0',color:'#444'}">
-        <el-table-column align='center' prop="createTime"
-                         label="请假发起时间">
+        <el-table-column align='center'
+                         label="轮播图">
+          <template slot-scope="scope">
+            <img class="bannerImg" :src="scope.row.coverImage" alt="">
+          </template>
         </el-table-column>
         <el-table-column align='center'
-                         label="请假时间">
+                         label="跳转连接">
           <template slot-scope="scope">
-            {{ scope.row.startTime }} - {{ scope.row.endTime }}
+            {{ scope.row.linkUrl + '/' + scope.row.id }}
           </template>
         </el-table-column>
         <el-table-column align='center' prop="remark"
-                         label="请假说明">
+                         label="是否使用">
+          <template slot-scope="scope">
+            {{ scope.row.status == 1 ? '是' : '否' }}
+          </template>
+        </el-table-column>
+        <el-table-column align='center' label="操作">
+            <template slot-scope="scope">
+              <el-button @click="onDel(scope.row)" type="text">删除</el-button>
+              <el-button @click="onStop(scope.row)"  type="text">停用</el-button>
+            </template>
         </el-table-column>
       </el-table>
       <pagination :total="pageInfo.total"
@@ -55,23 +40,15 @@
   </div>
 </template>
 <script>
-import { teacherLeaveRecordQuery } from '@/api/teacherManager'
+import { newsList, newsUpdate } from '@/api/contentManager'
 import pagination from '@/components/Pagination/index'
 import store from '@/store'
-import { attendance } from '@/utils/searchArray'
 export default {
   components: {
     pagination
   },
   data () {
     return {
-      attendance: attendance,
-      courseDate: null,
-      searchForm: {
-        startTime: null,
-        endTime: null,
-      },
-      tableList: [],
       tableList: [],
       organId: store.getters.organ,
       teacherId: this.$route.query.teacherId,
@@ -89,35 +66,39 @@ export default {
   },
   methods: {
     getList() {
-      let params = this.searchForm
-      params.rows = this.pageInfo.limit
-      params.page = this.pageInfo.page,
-      params.teacherId = this.teacherId
-      teacherLeaveRecordQuery(params).then(res => {
+      let params = {
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        type: 3
+      }
+      newsList(params).then(res => {
+        console.log(res)
         if(res.code == 200) {
           this.tableList = res.data.rows
           this.pageInfo.total = res.data.total
         }
       })
     },
-    searchCourseDate(value) {
-      if(value) {
-        this.searchForm.startTime = value[0]
-        this.searchForm.endTime = value[1]
-      } else {
-        this.searchForm.startTime = null
-        this.searchForm.endTime = null
-      }
+    openTeaching(type, rows) {
+        this.$router.push({
+            path: '/contentManager/contentOperation',
+            query: {
+              type: 2,
+              pageType: type
+            }
+        })
     },
-    onReSet() {
-      this.courseDate = null
-      this.searchForm = {
-        startTime: null,
-        endTime: null,
-      }
+    onDel(row) { // 删除
+
+    },
+    onStop(row) { // 停止
+      // newsUpdate
     }
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.bannerImg {
+  height: 60px;
+}
 </style>

src/views/contentManager/contentOperation.vue

@@ -1,48 +1,17 @@
 <template>
   <div class="m-container">
     <h2>
-      <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + '商品'"></el-page-header>
+      <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + typeChange(type)"></el-page-header>
     </h2>
     
     <div class="m-core">
-      <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 500px">
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 100%">
         <el-form-item label="品牌" prop="brand">
           <el-input v-model="form.brand"></el-input>
         </el-form-item>
         <el-form-item label="商品名称" prop="name">
           <el-input  v-model="form.name"></el-input>
         </el-form-item>
-        <el-form-item label="商品类型" prop="type">
-          <el-select v-model="form.type">
-              <el-option label="乐器" value="INSTRUMENT"></el-option>
-              <el-option label="辅件" value="ACCESSORIES"></el-option>
-              <el-option label="教材" value="TEACHING"></el-option>
-              <el-option label="教谱" value="STAFF"></el-option>
-              <el-option label="其它" value="OTHER"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="商品分类" prop="goodsCategoryId">
-          <el-select v-model="form.goodsCategoryId">
-              <el-option
-                v-for="item in categoryList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="商品型号" prop="specification">
-          <el-input v-model="form.specification" ></el-input>
-        </el-form-item>
-        <el-form-item label="商品价格" prop="marketPrice">
-          <el-input type="number" v-model="form.marketPrice" ></el-input>
-        </el-form-item>
-        <el-form-item label="商品团购价" prop="groupPurchasePrice">
-          <el-input type="number" v-model="form.groupPurchasePrice" ></el-input>
-        </el-form-item>
-        <el-form-item label="商品采购价" prop="discountPrice">
-          <el-input type="number" v-model="form.discountPrice" ></el-input>
-        </el-form-item>
         <el-form-item label="商品图片" prop="image">
           <el-upload
             class="avatar-uploader"
@@ -55,8 +24,10 @@
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         </el-form-item>
-        <el-form-item label="商品描述" prop="desc">
-          <el-input type="textarea" v-model="form.desc" ></el-input>
+        <el-form-item label="商品描述" prop="desc" >
+          <div id="wangeditor">
+            <div ref="editorElem" style="text-align:left;"></div>
+          </div>
         </el-form-item>
         <el-form-item>
           <el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
@@ -70,37 +41,19 @@
 import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
-let validPrice = (rule, value,callback)=>{
-    if (!value){
-        callback(new Error('请输入金额'))
-    }else  if (value < 0){
-        callback(new Error('输入金额必须大于0'))
-    }else if(value >= 100000) {
-        callback(new Error('输入金额必须小于100000'))
-    }else {
-      callback()
-    }
-}
+
+import E from 'wangeditor'
 export default {
   data () {
     return {
       categoryList: [],
-      pageType: this.$route.query.type,
+      type: this.$route.query.type,
+      pageType: this.$route.query.pageType,
       organId: store.getters.organ,
       headers: {
         Authorization: getToken()
       },
       form: {
-        // brand: 'xxxl',
-        // name: '长号',
-        // type: 'INSTRUMENT',
-        // goodsCategoryId: 7,
-        // specification: 'xxxeed',
-        // marketPrice: 10000,
-        // groupPurchasePrice: 9000,
-        // discountPrice: 8000,
-        // image: null,
-        // desc: 'C调、法式键、曲列、E键、白铜按键、台湾镍白'
         brand: null,
         name: null,
         type: null,
@@ -114,49 +67,64 @@ export default {
       },
       rules: {
         brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
-          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
-        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },
-          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
-        type: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
-        goodsCategoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
-        specification: [{ required: true, message: '请输入商品型号', trigger: 'blur' },
-          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }],
-        marketPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        groupPurchasePrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        discountPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        // marketPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
-        // groupPurchasePrice: [{ required: true, message: '请输入商品团购价', trigger: 'blur' }],
-        // discountPrice: [{ required: true, message: '请输入商品采购价', trigger: 'blur' }],
-        image: [{ required: true, message: '请选择图片', trigger: 'blur' }],
-        desc: [{ required: true, message: '请输入商品描述', trigger: 'blur' }]
+          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
       }
     }
   },
   mounted() {
-    this.getList()
-    this.getCatagory()
+    // this.getList()
+    this.editor = new E(this.$refs.editorElem)
+    // 编辑器的事件，每次改变会获取其html内容
+    this.editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      // this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
+    };
+    this.editor.customConfig.menus = [
+      // 菜单配置
+      'head', // 标题
+      'bold', // 粗体
+      'fontSize', // 字号
+      'fontName', // 字体
+      'italic', // 斜体
+      'underline', // 下划线
+      'strikeThrough', // 删除线
+      'foreColor', // 文字颜色
+      'backColor', // 背景颜色
+      'link', // 插入链接
+      'list', // 列表
+      'justify', // 对齐方式
+      'quote', // 引用
+      'emoticon', // 表情
+      'image', // 插入图片
+      'table', // 表格
+      'code', // 插入代码
+      'undo', // 撤销
+      'redo' // 重复
+    ]
+    this.editor.create() // 创建富文本实例
   },
   methods: {
     onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          if (this.pageType == 'create') {
-            if(this.form.id) { // 判断有没有Id，如果有则删除
-              delete this.form.id
-            }
-            this.form.status = 'YES' // 默认上架
-            goodsAdd(this.form).then(res => {
-              this.messageTips('添加', res)
-            })
-          } else if (this.pageType == 'update') {
-            goodsUpdate(this.form).then(res => {
-              this.messageTips('修改', res)
-            })
-          }
-        } else {
-          return false
-        }
-      })
+      console.log(this.editorContent)
+      // this.$refs[formName].validate((valid) => {
+      //   if (valid) {
+      //     if (this.pageType == 'create') {
+      //       if(this.form.id) { // 判断有没有Id，如果有则删除
+      //         delete this.form.id
+      //       }
+      //       this.form.status = 'YES' // 默认上架
+      //       goodsAdd(this.form).then(res => {
+      //         this.messageTips('添加', res)
+      //       })
+      //     } else if (this.pageType == 'update') {
+      //       goodsUpdate(this.form).then(res => {
+      //         this.messageTips('修改', res)
+      //       })
+      //     }
+      //   } else {
+      //     return false
+      //   }
+      // })
     },
     messageTips(title, res) {
       if(res.code == 200) {
@@ -164,13 +132,23 @@ export default {
           message: title + '成功',
           type: 'success'
         })
-        this.$router.push('/shopManager/shopManager')
+        this.$router.push({
+          path: '/contentManager/contentManager',
+          query: {
+            type: this.typeIndex(this.type)
+          }
+        })
       } else {
         this.$message.error(res.msg)
       }
     },
     onCancel() {
-      this.$router.push('/shopManager/shopManager')
+      this.$router.push({
+        path: '/contentManager/contentManager',
+        query: {
+          type: this.typeIndex(this.type)
+        }
+      })
     },
     onReSet(formName) {
       this.$refs[formName].resetFields()
@@ -178,10 +156,8 @@ export default {
     getList() {
       if(this.pageType == 'create') return false
       goodsSingleQuery(this.$route.query.id).then(res => {
-        console.log(res)
         if(res.code == 200) {
           let result = res.data
-          console.log(result)
           this.form = {
             id: result.id,
             brand: result.brand,
@@ -198,27 +174,8 @@ export default {
         }
       })
     },
-    getCatagory() {
-      categoryListTree({
-        delFlag: 0,
-        rows: 9999
-      }).then(res => {
-        let result = res.data
-        if(res.code == 200) {
-          let tempArray = []
-          result.rows.forEach(row => {
-            tempArray.push({
-              label: row.name,
-              value: row.id
-            })
-          })
-          this.categoryList = tempArray
-        }
-      })
-    },
     handleAvatarSuccess(res, file) {
       this.form.image = res.data.url
-        
     },
     beforeAvatarUpload(file) {
       const imageType = {
@@ -236,10 +193,32 @@ export default {
       }
       return isImage && isLt2M;
     },
+    typeChange(type) {
+      let tempTitle = {
+        1: "精彩活动",
+        2: "热门资讯",
+        3: "活动列表"
+      }
+      return tempTitle[type]
+    },
+    typeIndex(type) {
+      let tempTitle = {
+        3: 0,
+        1: 1,
+        2: 2
+      }
+      return tempTitle[type]
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
+.m-container {
+  min-width: 100%;
+}
+.el-input {
+  width: 300px;
+}
 .el-button--primary {
   background: #14928a;
   border-color: #14928a;

src/views/contentManager/index.vue

@@ -30,11 +30,18 @@ export default {
   name: 'teacherDetail',
   data () {
     return {
-      teacherName: this.$route.query.teacherName,
       activeName: "0",
       activeStatus: [true, false, false]
     }
   },
+  created() {
+    let type = this.$route.query.type
+    if(type != null) {
+      console.log(type)
+      this.activeName = type.toString()
+      this.activeStatus[type] = true
+    }
+  },
   methods: {
     handleClick (val, event) {
       this.activeName = val.name

vue.config.js

@@ -19,8 +19,8 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // let target = 'http://192.168.3.27:8000' // 箭河
 // let target = 'http://192.168.3.28:8000' //邹璇
 // let target = 'http://192.168.3.8:8000' //勇哥
-// let target = 'http://47.99.212.176:8000' // 测试服
-let target = 'http://192.168.3.48:8000' // 乔
+let target = 'http://47.99.212.176:8000' // 测试服
+// let target = 'http://192.168.3.48:8000' // 乔
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -61,6 +61,13 @@ module.exports = {
           '^api-web': ''
         }
       },
+      '/api-cms': {
+        target: target,
+        changeOrigin: true,
+        pathRewrite: {
+          '^api-cms': ''
+        }
+      },
       '/api-teacher': {
         target: target,
         changeOrigin: true,