dy-admin-manager/src/views/workBenchManager/journal/musicGroup.vue

<template>
  <div class='infoWrap'>
    <div class="left">
      <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"
           @click="onLookMessage('1')">
        <img :src="img.bookicon"
             alt="">
        已读消息</div>
    </div>
    <div class="middle">
      <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">
          {{ item.memo.type == 'VIPGROUP' ? '学员退课' : '学生退团' }}
          <span class='time'>{{ item.createOn | dateForMinFormat}}</span>
          <div class="dot"
               v-if="item.readStatus == 0"></div>
        </h4>
        <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"
         v-if="showRight">
      <div v-if="showMessage.type == 'VIPGROUP'"
           kay="group">
        <el-row>
          <el-col :span="24">
            <h3 class="title">学员退课
              <el-tag v-if="showMessage.studentApplyRefunds.status == 'DONE'"
                      type="success"
                      effect="plain">已处理</el-tag>
              <el-tag v-if="showMessage.studentApplyRefunds.status == 'REJECT'"
                      type="danger"
                      effect="plain">已拒绝</el-tag>
              <span class="time">时间: {{ showMessage.studentApplyRefunds.createTime | dateForMinFormat}}</span>
            </h3>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"> 学员姓名： </el-col>
          <el-col :span="20"> {{ showMessage.student }} </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">课程名称： </el-col>
          <el-col :span="20"> {{ showMessage.className }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4"> 应退金额： </el-col>
          <el-col :span="20"> {{ showMessage.studentApplyRefunds.expectAmount }}元 </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input :disabled="showMessage.studentApplyRefunds.status != 'ING'"
                      type="textarea"
                      :rows="8"
                      placeholder="请输入内容"
                      v-model.trim="remark"> </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"> 实退金额： </el-col>
          <el-col :span="20">
            <el-input :disabled="showMessage.studentApplyRefunds.status != 'ING'"
                      type="number"
                      placeholder="请输入内容"
                      @mousewheel.native.prevent
                      v-model.trim="actualAmount">
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-permission="'vipGroupManage/applyRefundAudit'">
          <el-col :span="24"
                  v-if="showMessage.studentApplyRefunds.status == 'ING'">
            <el-button type="primary"
                       @click="onSubmit(showMessage.studentApplyRefunds.id, showMessage.type, 'DONE')">确认</el-button>
            <el-button type="danger"
                       @click="onSubmit(showMessage.studentApplyRefunds.id, showMessage.type, 'REJECT')">拒绝</el-button>
          </el-col>
        </el-row>
      </div>

      <div v-else
           kay="group">
        <el-row>
          <el-col :span="24">
            <h3 class="title">乐团名称
              <el-tag v-if="showMessage.status == 'APPROVED'"
                      type="success"
                      effect="plain">已处理</el-tag>
              <el-tag v-if="showMessage.status == 'DENIED'"
                      type="danger"
                      effect="plain">已拒绝</el-tag>
              <span class="time">时间: {{ showMessage.createTime }}</span>
            </h3>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"> 学员姓名： </el-col>
          <el-col :span="20"> {{ showMessage.user.username }} </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">乐团名称： </el-col>
          <el-col :span="20"> {{ showMessage.musicGroup.name }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4">用户备注： </el-col>
          <el-col :span="20"> {{ showMessage.userComment }}</el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="24">
            <el-input :disabled="showMessage.status != 'PROCESSING'"
                      type="textarea"
                      :rows="8"
                      placeholder="请输入内容"
                      v-model.trim="remark"> </el-input>
          </el-col>
        </el-row> -->
        <el-form :model="quitForm"
                status-icon
               ref="quitForm"
               :rules="quitRules">
            <el-form-item label="退还课程费用" v-if="showMessage.status == 'PROCESSING'"
                          prop="isRefundCourseFee">
              <el-radio v-model.trim="quitForm.isRefundCourseFee"
                        :label="true">是</el-radio>
              <el-radio v-model.trim="quitForm.isRefundCourseFee"
                        :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退还乐器费用" v-if="showMessage.status == 'PROCESSING'"
                          prop="isRefundInstrumentFee">
              <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                        :label="true">是</el-radio>
              <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                        :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退还教辅费用" v-if="showMessage.status == 'PROCESSING'"
                          prop="isRefundTeachingAssistantsFee">
              <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                        :label="true">是</el-radio>
              <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                        :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="退团原因"
                          prop="reason">
              <el-input type="textarea" :disabled="showMessage.status != 'PROCESSING'"
                        v-model.trim="quitForm.reason"></el-input>
            </el-form-item>
          </el-form>
        <el-row v-permission="'musicGroupQuit/quitMusicGroup'">
          <el-col :span="24"
                  v-if="showMessage.status == 'PROCESSING'">
            <el-button type="primary"
                       @click="onSubmitGroup(showMessage, 'APPROVED')">确认</el-button>
            <el-button type="danger"
                       @click="onSubmitGroup(showMessage, 'DENIED')">拒绝</el-button>
          </el-col>
        </el-row>

        <!-- <div class="infoFoot" v-if="showMessage.auditStatus == 'ING'">
          <div class="noBtn" @click="onSubmit(showMessage, 'REJECT')">拒绝</div>
          <div class="yesBtn" @click="onSubmit(showMessage, 'PASS')">同意</div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import {  queryCountOfUnread, sysMessageList, setRead,
  queryApplyRefundDetail, applyRefundAudit, musicGroupQuit, quitMusicGroup} from '@/api/journal'
import cleanDeep from 'clean-deep'
export default {
  name: 'musicGroup',
  data () {
    return {
      img: {
        bookicon: require('@/assets/images/base/bookicon.png'),
        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
        trashicon: require('@/assets/images/base/trashicon.png'),
        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
        boxicon: require('@/assets/images/base/boxicon.png'),
        Hboxicon: require('@/assets/images/base/boxicon-h.png')
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        reason: ""
      },
      quitRules: {
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用", trigger: 'change' }
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用", trigger: 'change' }
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用", trigger: 'change' }
        ],
        reason: [{ required: true, message: "请填写退团退费原因" }]
      },
      pageInfo: {
        isSinglePage: false, // 是否只有一页
        limit: 10,
        page: 1,
        readStatus: null,
        total: 0,
      },
      remark: null,
      actualAmount: null,
      noReadMessage: 0, // 未读消息
      dataList: [],
      isCheckMessage: null,
      showRight: false,
      showMessage: {}
    }
  },
  mounted () {
    this.__init()
    this.sysMessageList()
  },
  methods: {
    __init () {
      // 未读消息
      queryCountOfUnread().then(res => {
        if (res.code == 200) {
          if (res.data && res.data.MUSICGROUP) {
            this.noReadMessage = res.data.MUSICGROUP
          }
        }
      })
    },
    sysMessageList () { // 列表
      sysMessageList({
        group: 'MUSICGROUP',
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        readStatus: this.pageInfo.readStatus
      }).then(res => {
        if (res.code == 200) {
          res.data.rows.forEach(item => {
            item.memo = JSON.parse(item.memo)
          })
          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
      if (item.readStatus == 1) {
        this.getItemInfo(item.memo)
      } else {
        setRead({ id: item.id }).then(res => {
          let result = res.data
          if (res.code == 200) {
            item.readStatus = 1
            this.getItemInfo(item.memo)
            this.noReadMessage--
          }
        })
      }
    },
    getItemInfo (memo) {
      if (memo.type == 'VIPGROUP') {
        queryApplyRefundDetail({ id: memo.Id }).then(res => {
          if (res.code == 200) {
            this.showRight = true
            this.showMessage = res.data
            this.showMessage.type = memo.type
            this.remark = res.data.studentApplyRefunds.remark
            this.actualAmount = res.data.studentApplyRefunds.actualAmount
            //
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (memo.type == 'MUSICGROUP') {
        musicGroupQuit({ id: memo.Id }).then(res => {
          if (res.code == 200) {
            this.showRight = true
            this.showMessage = res.data
            this.showMessage.type = memo.type
            this.remark = res.data.reason
            if(this.$refs.quitForm){
              this.$refs.quitForm.resetFields()
            }
            this.quitForm.reason = res.data.reason
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    onSubmitGroup (params, status) {
      if(status == 'DENIED') {
        this.$refs['quitForm'].resetFields()
        this.$refs['quitForm'].validateField('reason', res => {
          if(!res) {
            this.onSubmitGroups(params, status)
          }
        })
      } else {
        this.$refs["quitForm"].validate(res => {
          if (res) {
            this.onSubmitGroups(params, status)
          }
        });
      }
    },
    onSubmitGroups(params, status) {
      this.$confirm("确定此操作吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
            let query = this.quitForm
            query.id = params.id,
            query.status = status
            await quitMusicGroup(cleanDeep(query)).then(res => {
              this.$message.success('处理成功')
              this.getItemInfo({
                Id: params.id,
                type: params.type
              })
            })
        }).catch(() => { });
    },
    onSubmit (id, str, type) {
      if (!this.remark || this.remark == '') {
        this.$message.error('请输入退课理由')
        return
      }
      if (!this.actualAmount && typeof this.actualAmount == 'string') {
        this.$message.error('退课金额输入有误')
        return
      }
      applyRefundAudit({
        id: id,
        remark: this.remark,
        status: type,
        amount: this.actualAmount
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('处理成功')

          this.getItemInfo({
            Id: id,
            type: str
          })
        } else {
          this.$message.errot(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.infoWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: calc(100vh - 266px);
  overflow: auto;
  .left {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: left;
    > div {
      height: 26px;
      line-height: 26px;
      margin-top: 26px;
      img {
        position: relative;
        top: 6px;
      }
    }
    .unread,
    .read,
    .recovery {
      cursor: pointer;
    }
    .unread {
      position: relative;
      img {
        width: 26px;
        height: 25px;
      }
      .count {
        position: absolute;
        width: 38px;
        height: 23px;
        background: rgba(20, 146, 138, 0.5);
        border-radius: 100px;
        font-size: 12px;
        line-height: 23px;
        text-align: center;
        color: #225551;
        right: -44px;
        top: 8px;
      }
    }
    .read {
      img {
        width: 20px;
        height: 26px;
      }
    }
    .recovery {
      img {
        width: 19px;
        height: 26px;
      }
    }
  }
  .middle {
    width: 25%;
    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;
        font-weight: 400;
        padding-bottom: 4px;
      }
      .name {
        position: relative;
        color: #444;
        font-size: 16px;
        padding-bottom: 9px;
        clear: both;
        .time {
          font-weight: 400;
          color: #aaa;
          float: right;
        }
        .dot {
          width: 7px;
          height: 7px;
          background-color: #f97215;
          border-radius: 50%;
          position: absolute;
          left: -13px;
          top: 4px;
        }
      }
      .msg {
        color: #444;
        font-size: 14px;
        line-height: 24px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .msgItem.active {
      background-color: #f3f4f8;
      border-radius: 5px;
      .msg {
        color: #aaa;
      }
    }
  }
  .right {
    border: 1px solid #e4e8eb;
    margin-left: 25px;
    position: relative;
    overflow: auto;
    padding: 20px;
    min-width: 50%;
  }
}
.el-timeline-item__dot {
  width: 20px;
  height: 20px;
}
.el-timeline-item {
  min-height: 80px !important;
}
.el-timeline-item__tail {
  left: 9px !important;
}
/deep/.el-row {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
/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>