dvcp_v2_webapp/project/xiushan/apps/AppMassMessage/mmDetail.vue

<template>
  <section class="mmDetail">
    <ai-detail>
      <ai-title slot="title" title="留言详情" isShowBottomBorder isShowBack @onBackClick="back">
        <template #rightBtn v-if="!isClosed">
          <el-button type="primary" @click="dialog=true">回复留言</el-button>
          <el-button @click="handleCloseMass(detail.id)">关闭留言</el-button>
        </template>
      </ai-title>
      <template #content>
        <el-form size="small">
          <ai-card class="header">
            <template #title>
              <b v-text="detail.title||'标题'"/>
              <el-row type="flex">
                <el-form-item label="留言编号">{{ detail.messageCode || "-" }}</el-form-item>
                <el-form-item label="留言时间">{{ detail.createTime || "-" }}</el-form-item>
                <el-form-item label="留言人">{{ detail.leaveName || "-" }}</el-form-item>
              </el-row>
              <ai-icon type="svg" :icon="statusImages[detail.status||0]"/>
            </template>
            <template #content>
              <div v-html="detail.content"/>
              <div class="mar-t8">
                <el-image class="thumb" v-for="img in detail.images" :key="img.url" :src="img.url"
                          :preview-src-list="[img.url]"/>
              </div>
            </template>
          </ai-card>
          <ai-card title="沟通记录">
            <template #content>
              <div class="commentItem" v-for="op in detail.appLeaveMessageReplyList" :key="op.id">
                <b v-text="userTypeLabel[op.userType]"/>
                <div :class="{reply:op.userType==1}">
                  <div v-text="op.content"/>
                  <div class="rightText" v-text="`留言时间：${op.createTime}`"/>
                </div>
              </div>
              <ai-empty v-if="detail.appLeaveMessageReplyList.length==0"/>
            </template>
          </ai-card>
        </el-form>
      </template>
    </ai-detail>
    <ai-dialog :visible.sync="dialog" title="回复留言" width="500px" @onConfirm="submit">
      <el-form size="small" :model="form" :rules="rules" label-width="80px" ref="ReplyForm">
        <el-form-item label="回复内容" prop="content">
          <el-input type="textarea" v-model="form.content" rows="4" clearable placeholder="请输入回复内容"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "mmDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    statusImages() {
      return {
        0: "iconno_response",
        1: "iconreplied",
        2: "iconfinished"
      }
    },
    userTypeLabel() {
      return {
        0: "留言",
        1: "回复"
      }
    },
    isClosed() {
      return this.detail.status == 2
    }
  },
  data() {
    return {
      detail: {},
      dialog: false,
      form: {},
      rules: {
        content: [{required: true, message: "请输入回复内容"}]
      }
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post("/app/appleavemessage/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
          this.detail.images = this.detail.images ? JSON.parse(this.detail.images) : []
        }
      })
    },
    back() {
      this.$router.push({})
    },
    handleCloseMass(id) {
      this.$confirm("是否要关闭留言?").then(() => {
        this.instance.post("/app/appleavemessage/close", null, {
          params: {id}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("关闭成功")
            this.back()
          }
        })
      }).catch(() => 0)
    },
    submit() {
      this.$refs.ReplyForm.validate(v => {
        if (v) {
          let {id: messageId} = this.detail
          this.instance.post("/app/appleavemessagereply/addOrUpdate", {...this.form, messageId, userType: 1}).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.back()
            }
          })
        }
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.mmDetail {
  height: 100%;

  :deep(.header ){
    position: relative;

    .el-form-item {
      width: 33%;
    }

    .aibar {
      height: auto;

      .aibar-left {
        width: 100%;
        font-weight: normal;
      }

      b {
        line-height: 56px;
      }
    }

    .AiIcon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 80px;
      height: 80px;
    }
  }

  .commentItem {
    min-height: 50px;
    margin-bottom: 40px;

    & > b {
      font-size: 14px;
      font-weight: normal;
      background: #408CFF;
      color: #fff;
      box-sizing: border-box;
      display: block;
      border-radius: 4px 4px 0 0;
      overflow: hidden;
      height: 20px;
      line-height: 20px;
      width: 50px;
      text-align: center;
    }

    & > div {
      position: relative;
      padding: 16px 8px;
      box-sizing: border-box;
      font-size: 14px;
      color: #000;
      background: #fff;
      border: 1px solid #ccc;

      &.reply {
        background: #ddd;
      }
    }

    .rightText {
      text-align: right;
      color: #666;
      font-size: 12px;
    }
  }

  .thumb {
    width: 120px;
    height: 120px;
    margin: 4px 4px 0 0;
  }
}
</style>