修改

package.json

@@ -15,7 +15,6 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^3.0.1",
     "axios": "0.18.1",
     "default-passive-events": "^1.0.10",
     "element-ui": "^2.12.0",
@@ -27,9 +26,9 @@
     "path-to-regexp": "2.4.0",
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
-    "tinymce": "^5.1.1",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/api/journal.js

@@ -30,3 +30,58 @@ export function setRead(data) {
     })
 } 
 
+// 查询课程投诉详情
+export function queryCourseScheduleComplaintsDetail(data) {
+    return request({
+        url: api + '/courseSchedule/queryCourseScheduleComplaintsDetail',
+        method: 'get',
+        params: data
+    })
+} 
+
+// 课程投诉审核
+export function courseScheduleCommplaintAudit(data) {
+    return request({
+        url: api + '/courseSchedule/courseScheduleCommplaintAudit',
+        method: 'get',
+        params: data
+    })
+} 
+
+// 获取vip课基本信息
+export function findTeachingRecordBaseInfo(data) {
+    return request({
+        url: api + '/vipGroupManage/findTeachingRecordBaseInfo',
+        method: 'get',
+        params: data
+    })
+} 
+
+// 退课申请审核
+export function applyRefundAudit(data) {
+    return request({
+        url: api + '/vipGroupManage/applyRefundAudit',
+        method: 'get',
+        params: data
+    })
+} 
+
+// 退团单查询
+export function musicGroupQuit(data) {
+    return request({
+        url: api + '/musicGroupQuit/query',
+        method: 'get',
+        params: data
+    })
+} 
+
+// 退课申请审核
+export function quitMusicGroup(data) {
+    return request({
+        url: api + '/musicGroupQuit/quitMusicGroup',
+        method: 'get',
+        params: data
+    })
+} 
+
+

src/utils/vueFilter.js

@@ -119,6 +119,19 @@ Vue.filter('formatTimer', (value) => {
     return value
   }
 })
+
+// 时间处理
+Vue.filter('timer', (value) => {
+  if (value) {
+    let tempDate = new Date(value)
+    let month = tempDate.getMonth() + 1 >= 10 ? tempDate.getMonth() + 1 : '0' + tempDate.getMonth() + 1
+    let days = tempDate.getDate() >= 10 ? tempDate.getDate() : '0' + tempDate.getDate()
+    return month + ':' + days
+  } else {
+    return value
+  }
+})
+
 // 格式化成星期
 Vue.filter('formatWeek', date => {
   let nd = new Date(date)

src/views/contentManager/contentOperation.vue

@@ -26,13 +26,13 @@
         </el-form-item>
         <el-form-item label="商品描述" prop="desc" >
           <!-- bidirectional data binding（双向数据绑定） -->
-            <!-- <quill-editor v-model="content"
+            <quill-editor v-model="content"
                 ref="myQuillEditor"
                 :options="editorOption"
                 @blur="onEditorBlur($event)"
                 @focus="onEditorFocus($event)"
                 @ready="onEditorReady($event)">
-            </quill-editor> -->
+            </quill-editor>
         </el-form-item>
         <el-form-item>
           <el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
@@ -48,11 +48,11 @@ import store from '@/store'
 import { getToken } from '@/utils/auth'
 // import E from 'wangeditor'
 // require styles
-// import 'quill/dist/quill.core.css'
-// import 'quill/dist/quill.snow.css'
-// import 'quill/dist/quill.bubble.css'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
 
-// import { quillEditor } from 'vue-quill-editor'
+import { quillEditor } from 'vue-quill-editor'
 export default {
     components: {
         quillEditor
@@ -66,7 +66,7 @@ export default {
             headers: {
                 Authorization: getToken()
             },
-            content: '<h2>I am Example</h2>',
+            content: null,
             editorOption: {
             // some quill options
             },
@@ -89,7 +89,7 @@ export default {
         }
     },
     mounted() {
-        // console.log('this is current quill instance object', this.editor)
+        console.log('this is current quill instance object', this.editor)
     },
     methods: {
         onSubmit(formName) {
@@ -197,25 +197,25 @@ export default {
         }
         return tempTitle[type]
         },
-        // onEditorBlur(quill) {
-        //     console.log('editor blur!', quill)
-        // },
-        // onEditorFocus(quill) {
-        //     console.log('editor focus!', quill)
-        // },
-        // onEditorReady(quill) {
-        //     console.log('editor ready!', quill)
-        // },
-        // onEditorChange({ quill, html, text }) {
-        //     console.log('editor change!', quill, html, text)
-        //     this.content = html
-        // }
+        onEditorBlur(quill) {
+            console.log('editor blur!', quill)
+        },
+        onEditorFocus(quill) {
+            console.log('editor focus!', quill)
+        },
+        onEditorReady(quill) {
+            console.log('editor ready!', quill)
+        },
+        onEditorChange({ quill, html, text }) {
+            console.log('editor change!', quill, html, text)
+            this.content = html
+        }
+    },
+    computed: {
+      editor() {
+        return this.$refs.myQuillEditor.quill
+      }
     },
-    // computed: {
-    //   editor() {
-    //     return this.$refs.myQuillEditor.quill
-    //   }
-    // },
 }
 </script>
 <style lang="scss" scoped>
@@ -225,6 +225,9 @@ export default {
 .el-input {
   width: 300px;
 }
+/deep/.ql-editor {
+    min-height: 300px;
+}
 .el-button--primary {
   background: #14928a;
   border-color: #14928a;

src/views/journal/index.vue

@@ -36,8 +36,8 @@ export default {
   },
   data () {
     return {
-      activeIndex: '1',
-      activeStatus: [false, true, false, false]
+      activeIndex: '2',
+      activeStatus: [false, false, true, false]
     }
   },
   methods: {

src/views/journal/journalItem.vue

@@ -196,12 +196,13 @@ export default {
     }
   }
   .middle {
-    // width: 100%;
+    width: 40%;
     margin-left: 76px;
     padding-top: 50px;
     overflow: auto;
     .msgItem {
       padding: 16px 18px 23px 30px;
+      border-bottom: 1px solid #ccc;
       .type {
         font-size: 14px;
         color: #777;

src/views/journal/leaveOperation.vue

@@ -1,34 +1,31 @@
 <template>
   <div class='infoWrap'>
     <div class="left">
-      <div class="unread"> <img :src="img.boxicon"
+      <div class="unread" @click="onLookMessage('all')">全部</div>
+      <div class="unread" @click="onLookMessage('0')"> <img :src="img.boxicon"
              alt=""> 未读消息
         <div class="count" v-if="noReadMessage >= 1">{{ noReadMessage }}</div>
       </div>
-      <div class="read">
+      <div class="read" @click="onLookMessage('1')">
         <img :src="img.bookicon"
              alt="">
         已读消息</div>
-      <div class="recovery">
-        <img :src="img.trashicon"
-             alt="">
-        回收站</div>
     </div>
     <div class="middle">
-      <div class="msgItem">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
-        </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
-      </div>
-      <div class="msgItem active">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
+      <div class="msgItem" :class="[isCheckMessage == item.id ? 'active' : '']" v-for="(item, index) in dataList" :key="index">
+        <!-- <h6 class="type"></h6> -->
+        <h4 class="name">学生申诉<span class='time'>{{ item.createOn }}</span>
+          <div class="dot" v-if="item.readStatus == 0"></div>
         </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+        <p class='msg'>{{ item.content }}</p>
       </div>
+      <el-pagination style="text-align: right"
+        small v-if="dataList.length > 0"
+        @current-change="onChange"
+        :hide-on-single-page="pageInfo.isSinglePage"
+        layout="prev, pager, next"
+        :total="pageInfo.total">
+      </el-pagination>
     </div>
     <div class="right">
       <div class="rightWrap">
@@ -93,15 +90,23 @@ export default {
         boxicon: require('@/assets/images/base/boxicon.png'),
         Hboxicon: require('@/assets/images/base/boxicon-h.png')
       },
-      activities: [{
-
-      }],
+      pageInfo: {
+        isSinglePage: false, // 是否只有一页
+        limit: 10,
+        page: 1,
+        readStatus: null,
+        total: 0,
+      },
       noReadMessage: 0, // 未读消息
-      dataList: []
+      dataList: [],
+      isCheckMessage: null,
+      showRight: false,
+      showMessage: {}
     }
   },
   mounted() {
     this.__init()
+    this.sysMessageList()
   },
   methods: {
     __init() {
@@ -109,23 +114,40 @@ export default {
       queryCountOfUnread().then(res => {
         if(res.code == 200) {
           if(res.data && res.data.SYSTEM) {
-            this.noReadMessage = res.data.SYSTEM
+            this.noReadMessage = res.data.STUDENT
           }
-          
         }
       })
-
-      sysMessageList().then(res => {
-        console.log(res)
+    },
+    sysMessageList() { // 列表
+      sysMessageList({
+        group: 'LEAVE',
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        readStatus: this.pageInfo.readStatus
+      }).then(res => {
         if(res.code == 200) {
           this.dataList = res.data.rows
+          this.pageInfo.total = res.data.total
         }
       })
-    }
+    },
+    onLookMessage(type) { // 查看对应的数据
+      if(type == "all") {
+        this.pageInfo.readStatus = null
+      } else {
+        this.pageInfo.readStatus = type
+      }
+      this.pageInfo.page = 1
+      this.showRight = false
+      this.showMessage = {}
+      this.isCheckMessage = null
+      this.sysMessageList()
+    },
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .infoWrap {
   display: flex;
   flex-direction: row;
@@ -180,12 +202,13 @@ export default {
     }
   }
   .middle {
-    width: 390px;
+    width: 40%;
     margin-left: 76px;
     padding-top: 50px;
     overflow: auto;
     .msgItem {
       padding: 16px 18px 23px 30px;
+      border-bottom: 1px solid #ccc;
       .type {
         font-size: 14px;
         color: #777;

src/views/journal/musicGroup.vue

@@ -1,87 +1,74 @@
 <template>
   <div class='infoWrap'>
     <div class="left">
-      <div class="unread"> <img :src="img.boxicon"
+      <div class="unread" @click="onLookMessage('all')">全部</div>
+      <div class="unread" @click="onLookMessage('0')"> <img :src="img.boxicon"
              alt=""> 未读消息
         <div class="count" v-if="noReadMessage >= 1">{{ noReadMessage }}</div>
       </div>
-      <div class="read">
+      <div class="read" @click="onLookMessage('1')">
         <img :src="img.bookicon"
              alt="">
         已读消息</div>
-      <div class="recovery">
-        <img :src="img.trashicon"
-             alt="">
-        回收站</div>
     </div>
     <div class="middle">
-      <div class="msgItem">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
-        </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
-      </div>
-      <div class="msgItem active">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
+      <div class="msgItem" :class="[isCheckMessage == item.id ? 'active' : '']" v-for="(item, index) in dataList" :key="index">
+        <!-- <h6 class="type"></h6> -->
+        <h4 class="name">学员退学<span class='time'>{{ item.createOn }}</span>
+          <div class="dot" v-if="item.readStatus == 0"></div>
         </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+        <p class='msg'>{{ item.content }}</p>
       </div>
+      <el-pagination style="text-align: right"
+        small v-if="dataList.length > 0"
+        @current-change="onChange"
+        :hide-on-single-page="pageInfo.isSinglePage"
+        layout="prev, pager, next"
+        :total="pageInfo.total">
+      </el-pagination>
     </div>
     <div class="right">
-      <div class="rightWrap">
-        <img src="@/assets/images/base/placehorder-icon.png"
-             class="header"
-             alt="">
-        <div class="info">
-          <h2>黄老师<span>【185****2109】</span></h2>
-          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
-          <div class="textWrap">
-            <p>审批事项: 合班</p>
-            <p>开始时间: 2019-09-01 09:00</p>
-            <p>结束时间: 2019-09-01 09:00</p>
-            <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
-          </div>
-          <div class="timeline">
-            <el-timeline>
-              <el-timeline-item placement='center'>
-                <div class='timeMsg'>
-                  <p class="name">我</p>
-                  <p class='status'>审批中</p>
-                </div>
-                <div slot='dot'>
-                  <img class='dot'
-                       src="@/assets/images/base/clock.png"
-                       alt="">
-                </div>
-              </el-timeline-item>
-              <el-timeline-item placement='center'>
-                <div class='timeMsg'>
-                  <p class="name">我</p>
-                  <p class='status'>审批中</p>
-                </div>
-                <div slot='dot'>
-                  <img class='dot'
-                       src="@/assets/images/base/clock.png"
-                       alt="">
-                </div>
-              </el-timeline-item>
-            </el-timeline>
-          </div>
+      <el-row>
+        <el-col :span="24">
+          <h3 class="title">学员退学
+              <el-tag v-if="false" type="success" effect="plain">已处理</el-tag>
+              <el-tag v-if="false" type="danger" effect="plain">已拒绝</el-tag>
+             <span class="time">时间: 2019年11月9日14:25:31</span></h3>
+        </el-col>
+      </el-row>
 
-        </div>
-      </div>
-      <div class="infoFoot">
-        <div class="noBtn">拒绝</div>
-        <div class="yesBtn">同意</div>
-      </div>
+      <el-row>
+        <el-col :span="4"> 学员姓名： </el-col>
+        <el-col :span="20">  </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4">  乐团名称： </el-col>
+        <el-col :span="20"> </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24">
+          <el-input
+            type="textarea"
+            :rows="8"
+            placeholder="请输入内容"
+            v-model="remark">
+          </el-input>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-button type="primary" @click="onSubmit(1, 'submit')">确认</el-button>
+          <el-button type="danger" @click="onSubmit(1, 'reject')">拒绝</el-button>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script>
-import { queryCountOfUnread, sysMessageList } from '@/api/journal'
+import { queryCountOfUnread, sysMessageList, setRead, 
+  findTeachingRecordBaseInfo, applyRefundAudit, musicGroupQuit, quitMusicGroup } from '@/api/journal'
 export default {
   data () {
     return {
@@ -93,15 +80,24 @@ export default {
         boxicon: require('@/assets/images/base/boxicon.png'),
         Hboxicon: require('@/assets/images/base/boxicon-h.png')
       },
-      activities: [{
-
-      }],
+      pageInfo: {
+        isSinglePage: false, // 是否只有一页
+        limit: 10,
+        page: 1,
+        readStatus: null,
+        total: 0,
+      },
+      remark: null,
       noReadMessage: 0, // 未读消息
-      dataList: []
+      dataList: [],
+      isCheckMessage: null,
+      showRight: false,
+      showMessage: {}
     }
   },
   mounted() {
     this.__init()
+    this.sysMessageList()
   },
   methods: {
     __init() {
@@ -109,23 +105,72 @@ export default {
       queryCountOfUnread().then(res => {
         if(res.code == 200) {
           if(res.data && res.data.SYSTEM) {
-            this.noReadMessage = res.data.SYSTEM
+            this.noReadMessage = res.data.STUDENT
           }
-          
         }
       })
-
-      sysMessageList().then(res => {
-        console.log(res)
+    },
+    sysMessageList() { // 列表
+      sysMessageList({
+        group: 'MUSICGROUP',
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        readStatus: this.pageInfo.readStatus
+      }).then(res => {
         if(res.code == 200) {
           this.dataList = res.data.rows
+          this.pageInfo.total = res.data.total
         }
       })
-    }
+    },
+    onLookMessage(type) { // 查看对应的数据
+      if(type == "all") {
+        this.pageInfo.readStatus = null
+      } else {
+        this.pageInfo.readStatus = type
+      }
+      this.pageInfo.page = 1
+      this.showRight = false
+      this.showMessage = {}
+      this.isCheckMessage = null
+      this.sysMessageList()
+    },
+    onChange(page) { // 分页
+      this.pageInfo.page = page
+      this.sysMessageList()
+    },
+    onClickRead(item) {
+      this.isCheckMessage = item.id
+      let memo = JSON.parse(item.memo)
+      if(item.readStatus == 1) {
+        this.getCourseDetail(memo.courseScheduleComplaintsId)
+      } else {
+        setRead({ id: item.id }).then(res => {
+          let result = res.data
+          if(res.code == 200) {
+            item.readStatus = 1
+            this.getCourseDetail(memo.courseScheduleComplaintsId)
+          }
+        })
+      }
+    },
+    getCourseDetail(id) {
+      queryCourseScheduleComplaintsDetail({ courseScheduleComplaintsId: id }).then(res => {
+        let result = res.data
+        if(res.code == 200) {
+          this.showRight = true
+          this.showMessage = result
+          if(result.complaints.status != 'ING') {
+            this.teacherRate = result.complaints.teacherLiabilityRatio
+            this.studentRate = result.complaints.studentLiabilityRatio
+          }
+        }
+      })
+    },
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .infoWrap {
   display: flex;
   flex-direction: row;
@@ -180,12 +225,13 @@ export default {
     }
   }
   .middle {
-    width: 390px;
+    width: 40%;
     margin-left: 76px;
     padding-top: 50px;
     overflow: auto;
     .msgItem {
       padding: 16px 18px 23px 30px;
+      border-bottom: 1px solid #ccc;
       .type {
         font-size: 14px;
         color: #777;
@@ -234,127 +280,12 @@ export default {
     }
   }
   .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border: 1px solid #e4e8eb;
+     border: 1px solid #e4e8eb;
     margin-left: 25px;
     position: relative;
     overflow: auto;
-    .rightWrap {
-      // overflow: auto;
-      padding: 18px 24px;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      width: 570px;
-      box-sizing: border-box;
-      .header {
-        width: 30px;
-        height: 30px;
-        position: relative;
-        top: 7px;
-        border-radius: 50%;
-        margin-right: 12px;
-      }
-      .info {
-        position: relative;
-        h2 {
-          color: #212223;
-          font-size: 16px;
-          margin-bottom: 0px;
-          span {
-            font-size: 12px;
-            color: #444;
-          }
-        }
-        .subMsg {
-          position: relative;
-          font-size: 12px;
-          color: #444;
-          margin-bottom: 12px;
-          .san {
-            // margin-left: 110px;
-            float: left;
-            position: absolute;
-            top: 0px;
-            width: 0;
-            height: 0;
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent #909191 transparent transparent;
-            transform: rotate(180deg); /*顺时针旋转90°*/
-            margin: 0 8px;
-          }
-        }
-        .textWrap {
-          width: 316px;
-          line-height: 21px;
-          font-size: 14px;
-          color: #212223;
-          margin: 12px 0 34px;
-        }
-        .dot {
-          width: 20px;
-          height: 20px;
-        }
-        .timeMsg {
-          position: relative;
-          top: 5px;
-          margin-left: 20px;
-          .name {
-            font-size: #444;
-            font-size: 16px;
-            margin-bottom: 3px;
-            font-weight: 600;
-          }
-          .status {
-            font-size: 14px;
-            color: #62a070;
-          }
-          .status.waring {
-            color: #f97215;
-          }
-          .status.end {
-            color: #aaaaaa;
-          }
-        }
-      }
-    }
-    .infoFoot {
-      min-height: 60px;
-      height: 60px;
-      line-height: 60px;
-      border-top: 1px solid #e4e8eb;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      .noBtn {
-        cursor: pointer;
-        width: 100px;
-        height: 32px;
-        line-height: 32px;
-        color: #444;
-        border-radius: 3px;
-        border: 1px solid rgba(228, 232, 235, 1);
-        text-align: center;
-        margin-left: 70px;
-      }
-      .yesBtn {
-        cursor: pointer;
-        margin-left: 15px;
-        text-align: center;
-        width: 100px;
-        height: 32px;
-        line-height: 32px;
-        background: rgba(249, 114, 21, 1);
-        border-radius: 3px;
-        color: #fff;
-      }
-      // width: 570px;
-    }
+    padding: 20px;
+    min-width: 40%;
   }
 }
 .el-timeline-item__dot {
@@ -367,4 +298,25 @@ export default {
 .el-timeline-item__tail {
   left: 9px !important;
 }
+/deep/.el-row {
+  padding-bottom: 10px;
+}
+/deep/.el-col-4 {
+  font-size: 16px;
+}
+
+/deep/.el-col {
+  .el-input {
+    width: 200px;
+  }
+}
+
+.title {
+  font-size: 16px;
+  .time {
+    float: right;
+    font-size: 12px;
+    color: #ccc;
+  }
+}
 </style>

src/views/journal/studentComplain.vue

@@ -12,73 +12,94 @@
         已读消息</div>
     </div>
     <div class="middle">
-      <div class="msgItem">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
+      <div class="msgItem" :class="[isCheckMessage == item.id ? 'active' : '']" @click="onClickRead(item)" v-for="(item, index) in dataList" :key="index">
+        <!-- <h6 class="type"></h6> -->
+        <h4 class="name">学生申诉<span class='time'>{{ item.createOn }}</span>
+          <div class="dot" v-if="item.readStatus == 0"></div>
         </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
-      </div>
-      <div class="msgItem active">
-        <h6 class="type">审批</h6>
-        <h4 class="name">黄老师 <span class='time'>10:03</span>
-          <div class="dot"></div>
-        </h4>
-        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+        <p class='msg'>{{ item.content }}</p>
       </div>
+      <el-pagination style="text-align: right"
+        small v-if="dataList.length > 0"
+        @current-change="onChange"
+        :hide-on-single-page="pageInfo.isSinglePage"
+        layout="prev, pager, next"
+        :total="pageInfo.total">
+      </el-pagination>
     </div>
-    <div class="right">
-      <div class="rightWrap">
-        <img src="@/assets/images/base/placehorder-icon.png"
-             class="header"
-             alt="">
-        <div class="info">
-          <h2>黄老师<span>【185****2109】</span></h2>
-          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
-          <div class="textWrap">
-            <p>审批事项: 合班</p>
-            <p>开始时间: 2019-09-01 09:00</p>
-            <p>结束时间: 2019-09-01 09:00</p>
-            <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
+    <div class="right" v-if="showRight">
+      <el-row>
+        <el-col :span="24">
+          <h3 class="title">学员投诉
+              <el-tag v-if="showMessage.complaints.status == 'PASS'" type="success" effect="plain">已处理</el-tag>
+              <el-tag v-if="showMessage.complaints.status == 'REJECT'" type="danger" effect="plain">已拒绝</el-tag>
+             <span class="time">发起投诉时间: 2019年11月9日14:25:31</span></h3>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4"> 学员姓名： </el-col>
+        <el-col :span="20"> {{ showMessage.complaints.user.username }} </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4">  课程名称： </el-col>
+        <el-col :span="20"> {{ showMessage.courseSchedule.name }} </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4"> 课程时间： </el-col>
+        <el-col :span="20"> {{ showMessage.courseSchedule.classDate | formatTimer }} {{ showMessage.courseSchedule.startClassTime | timer }} </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4"> 老师名称： </el-col>
+        <el-col :span="20"> {{ showMessage.courseSchedule.teacher.username }} </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4">投诉理由：</el-col>
+        <el-col :span="20">
+          {{ showMessage.complaints.reason }}
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="4">
+          责任比：
+        </el-col>
+        <el-col :span="20" v-if="showMessage.complaints.status == 'ING'">
+          <div style="padding-bottom: 8px;">
+            <span style="padding-right: 8px;">老师</span>
+            <el-input type="number" min="0" max="10" v-model="teacherRate" placeholder="请输入内容"></el-input>
           </div>
-          <div class="timeline">
-            <el-timeline>
-              <el-timeline-item placement='center'>
-                <div class='timeMsg'>
-                  <p class="name">我</p>
-                  <p class='status'>审批中</p>
-                </div>
-                <div slot='dot'>
-                  <img class='dot'
-                       src="@/assets/images/base/clock.png"
-                       alt="">
-                </div>
-              </el-timeline-item>
-              <el-timeline-item placement='center'>
-                <div class='timeMsg'>
-                  <p class="name">我</p>
-                  <p class='status'>审批中</p>
-                </div>
-                <div slot='dot'>
-                  <img class='dot'
-                       src="@/assets/images/base/clock.png"
-                       alt="">
-                </div>
-              </el-timeline-item>
-            </el-timeline>
+          <div>
+            <span style="padding-right: 8px;">学生</span>
+            <el-input type="number" min="0" max="10" v-model="studentRate" placeholder="请输入内容"></el-input>
           </div>
-
-        </div>
-      </div>
-      <div class="infoFoot">
-        <div class="noBtn">拒绝</div>
-        <div class="yesBtn">同意</div>
-      </div>
+        </el-col>
+        <el-col :span="20" v-else>
+          <div style="padding-bottom: 8px;">
+            <span style="padding-right: 8px;">老师</span>
+            <el-input disabled type="number" min="0" max="10" v-model="teacherRate" placeholder="请输入内容"></el-input>
+          </div>
+          <div>
+            <span style="padding-right: 8px;">学生</span>
+            <el-input disabled type="number" min="0" max="10" v-model="studentRate" placeholder="请输入内容"></el-input>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row v-if="showMessage.complaints.status == 'ING'">
+        <el-col :span="24">
+          <el-button type="primary" @click="onSubmit(showMessage.complaints.id, 'submit')">确认</el-button>
+          <el-button type="danger" @click="onSubmit(showMessage.complaints.id, 'reject')">拒绝</el-button>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script>
-import { queryCountOfUnread, sysMessageList } from '@/api/journal'
+import { queryCountOfUnread, sysMessageList, setRead, queryCourseScheduleComplaintsDetail, courseScheduleCommplaintAudit } from '@/api/journal'
 export default {
   data () {
     return {
@@ -90,7 +111,6 @@ export default {
         boxicon: require('@/assets/images/base/boxicon.png'),
         Hboxicon: require('@/assets/images/base/boxicon-h.png')
       },
-      activities: [{ }],
       pageInfo: {
         isSinglePage: false, // 是否只有一页
         limit: 10,
@@ -99,7 +119,12 @@ export default {
         total: 0,
       },
       noReadMessage: 0, // 未读消息
-      dataList: []
+      dataList: [],
+      isCheckMessage: null,
+      showRight: false,
+      showMessage: {},
+      teacherRate: null,
+      studentRate: null
     }
   },
   mounted() {
@@ -130,6 +155,19 @@ export default {
         }
       })
     },
+    getCourseDetail(id) {
+      queryCourseScheduleComplaintsDetail({ courseScheduleComplaintsId: id }).then(res => {
+        let result = res.data
+        if(res.code == 200) {
+          this.showRight = true
+          this.showMessage = result
+          if(result.complaints.status != 'ING') {
+            this.teacherRate = result.complaints.teacherLiabilityRatio
+            this.studentRate = result.complaints.studentLiabilityRatio
+          }
+        }
+      })
+    },
     onLookMessage(type) { // 查看对应的数据
       if(type == "all") {
         this.pageInfo.readStatus = null
@@ -142,6 +180,77 @@ export default {
       this.isCheckMessage = null
       this.sysMessageList()
     },
+    onChange(page) { // 分页
+      this.pageInfo.page = page
+      this.sysMessageList()
+    },
+    onClickRead(item) {
+      this.isCheckMessage = item.id
+      let memo = JSON.parse(item.memo)
+      if(item.readStatus == 1) {
+        this.getCourseDetail(memo.courseScheduleComplaintsId)
+      } else {
+        setRead({ id: item.id }).then(res => {
+          let result = res.data
+          if(res.code == 200) {
+            item.readStatus = 1
+            this.getCourseDetail(memo.courseScheduleComplaintsId)
+          }
+        })
+      }
+    },
+    onSubmit(id, type) {
+      let params = {
+        id: id
+      }
+      let teacherRate = this.teacherRate
+      let studentRate = this.studentRate
+      if(type == 'submit') {
+        if(teacherRate < 0 || teacherRate > 10 || typeof teacherRate == 'string') {
+          this.$message.error('老师责任比输入有误')
+          return
+        }
+        if(studentRate < 0 || studentRate > 10 || typeof studentRate == 'string') {
+          this.$message.error('学生责任比输入有误')
+          return
+        }
+        if(studentRate + teacherRate != 10) {
+          this.$message.error('责任比之和为必须为10')
+          return
+        }
+        params.status = 'PASS'
+        params.studentLiabilityRatio = studentRate
+        params.teacherLiabilityRatio = teacherRate
+      } else if(type == 'reject') {
+        params.status = 'REJECT'
+        params.studentLiabilityRatio = 0
+        params.teacherLiabilityRatio = 0
+      }
+
+      courseScheduleCommplaintAudit(params).then(res => {
+        if(res.code == 200) {
+          this.$message({
+            message: '处理成功',
+            type: 'success'
+          })
+          this.getCourseDetail(id)
+        } else {
+          this.$message.errot(res.msg)
+        }
+      })
+    }
+  },
+  watch: {
+    teacherRate(newvalue, oldvalue) {
+      if(newvalue) {
+        this.studentRate = 10 - newvalue
+      }
+    },
+    studentRate(newvalue, oldvalue) {
+      if(newvalue) {
+        this.teacherRate = 10 - newvalue
+      }
+    }
   }
 }
 </script>
@@ -200,12 +309,13 @@ export default {
     }
   }
   .middle {
-    width: 390px;
+    width: 40%;
     margin-left: 76px;
     padding-top: 50px;
     overflow: auto;
     .msgItem {
       padding: 16px 18px 23px 30px;
+      border-bottom: 1px solid #ccc;
       .type {
         font-size: 14px;
         color: #777;
@@ -254,127 +364,12 @@ export default {
     }
   }
   .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     border: 1px solid #e4e8eb;
     margin-left: 25px;
     position: relative;
     overflow: auto;
-    .rightWrap {
-      // overflow: auto;
-      padding: 18px 24px;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      width: 570px;
-      box-sizing: border-box;
-      .header {
-        width: 30px;
-        height: 30px;
-        position: relative;
-        top: 7px;
-        border-radius: 50%;
-        margin-right: 12px;
-      }
-      .info {
-        position: relative;
-        h2 {
-          color: #212223;
-          font-size: 16px;
-          margin-bottom: 0px;
-          span {
-            font-size: 12px;
-            color: #444;
-          }
-        }
-        .subMsg {
-          position: relative;
-          font-size: 12px;
-          color: #444;
-          margin-bottom: 12px;
-          .san {
-            // margin-left: 110px;
-            float: left;
-            position: absolute;
-            top: 0px;
-            width: 0;
-            height: 0;
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent #909191 transparent transparent;
-            transform: rotate(180deg); /*顺时针旋转90°*/
-            margin: 0 8px;
-          }
-        }
-        .textWrap {
-          width: 316px;
-          line-height: 21px;
-          font-size: 14px;
-          color: #212223;
-          margin: 12px 0 34px;
-        }
-        .dot {
-          width: 20px;
-          height: 20px;
-        }
-        .timeMsg {
-          position: relative;
-          top: 5px;
-          margin-left: 20px;
-          .name {
-            font-size: #444;
-            font-size: 16px;
-            margin-bottom: 3px;
-            font-weight: 600;
-          }
-          .status {
-            font-size: 14px;
-            color: #62a070;
-          }
-          .status.waring {
-            color: #f97215;
-          }
-          .status.end {
-            color: #aaaaaa;
-          }
-        }
-      }
-    }
-    .infoFoot {
-      min-height: 60px;
-      height: 60px;
-      line-height: 60px;
-      border-top: 1px solid #e4e8eb;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      .noBtn {
-        cursor: pointer;
-        width: 100px;
-        height: 32px;
-        line-height: 32px;
-        color: #444;
-        border-radius: 3px;
-        border: 1px solid rgba(228, 232, 235, 1);
-        text-align: center;
-        margin-left: 70px;
-      }
-      .yesBtn {
-        cursor: pointer;
-        margin-left: 15px;
-        text-align: center;
-        width: 100px;
-        height: 32px;
-        line-height: 32px;
-        background: rgba(249, 114, 21, 1);
-        border-radius: 3px;
-        color: #fff;
-      }
-      // width: 570px;
-    }
+    padding: 20px;
+    min-width: 40%;
   }
 }
 .el-timeline-item__dot {
@@ -387,4 +382,25 @@ export default {
 .el-timeline-item__tail {
   left: 9px !important;
 }
+/deep/.el-row {
+  padding-bottom: 10px;
+}
+/deep/.el-col-4 {
+  font-size: 16px;
+}
+
+/deep/.el-col {
+  .el-input {
+    width: 200px;
+  }
+}
+
+.title {
+  font-size: 16px;
+  .time {
+    float: right;
+    font-size: 12px;
+    color: #ccc;
+  }
+}
 </style>

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 = {
   /**