ylrz_his_scrm_adminUI/src/views/fastGpt/fastGptChatSession/fastGptChatMsgDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
         查看聊天记录
      </div>
      <div class="contentx" v-if="item!=null">
          <div class="desct"> 会话详情</div>
          <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="会话标识"><span v-if="item!=null">{{item.chatId}}</span></el-descriptions-item>
            <el-descriptions-item label="咨询客户"><span v-if="item!=null">{{item.nickName}}</span></el-descriptions-item>
            <el-descriptions-item label="客服账号" span="3"><span v-if="item!=null">{{item.roleName}}</span></el-descriptions-item>
            <el-descriptions-item label="接待时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
            <el-descriptions-item label="结束时间"><span v-if="item!=null">{{item.updateTime}}</span></el-descriptions-item>
            <el-descriptions-item label="服务状态">
              <span v-if="item!=null"><dict-tag :options="sessionStatusOptions" :value="item.status"/> </span>
            </el-descriptions-item>
          </el-descriptions>
      </div>
      <div class="contentx" v-if="item!=null">
          <div class="desct"> 查看聊天记录</div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(i, index) in msgList" :key="index" :timestamp="i.createTime" placement="top">
                <el-card>
                  <h4 v-if="i.sendType==1">{{ item.nickName }}</h4>
                  <h4 v-else>{{item.roleName}}</h4>
                  <p>{{i.content}}</p>
                 <!-- <p v-if="i.sendType==2" style="color: #c8cacb;">{{i.status==1?'正确':'未标记'}}</p>
                  <el-link type="primary" :underline="false" v-if="i.sendType==2" class="ivu-pl-8" @click="updateLogs(i.msgId)" style="float: right; margin-right: 20px; margin-bottom: 20px;">修改记录</el-link>
                  <el-link type="primary" :underline="false" v-if="i.sendType==2" class="ivu-pl-8" @click="updateMsgStatus(i.msgId)" style="float: right; margin-right: 20px; ">√</el-link>
                  <el-link type="primary" :underline="false" v-if="i.sendType==2" class="ivu-pl-8" @click="updateMsg(i.msgId)" style="float: right; margin-right: 20px; ">X</el-link> -->
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
      </div>
    <!-- 添加或修改聊天消息记录对话框 -->
    <el-dialog title="修改聊天消息" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form"  label-width="80px">
        <el-form-item label="消息内容">
          <el-input type="textarea" v-model="form.content" :rows="12"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改记录" :visible.sync="logsOpen" width="800px" append-to-body>
      <el-timeline>
        <el-timeline-item v-for="(i, index) in chatMsgLogsList" :key="index" :timestamp="i.createTime" placement="top">
          <el-card>
            <h4 v-if="i.logsType==1">标记正确</h4>
            <h4 v-else>修改回复</h4>
            <p style="float: right;">{{i.nickName}}</p>
            <p>{{i.content}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="logsCancel">确 定</el-button>
      </div>
    </el-dialog>


    </div>
</template>

<script>
import { getFastGptChatMsg, updateFastGptChatMsg } from "@/api/fastGpt/fastGptChatMsg";

import { getFastGptChatSession } from "@/api/fastGpt/fastGptChatSession";
import { getAllRoleList } from "@/api/fastGpt/fastGptRole";
import { listFastGptChatMsgLogs} from "@/api/fastGpt/fastGptChatMsgLogs";
  export default {
    name: "fastGptChatMsgDetails",
    data() {
      return {
        sessionStatusOptions:[],
        open:false,
        logsOpen:false,
        // 方剂类型字典
        typeOptions:[],
        sendTypeOptions:[],
        roles:[],
        msgList:[],
        chatMsgLogsList:[],
        // 状态字典
        statusOptions: [],
        item:null,
        form: {},
      }
    },
    created() {
      this.getDicts("sys_chat_session_status").then(response => {
        this.sessionStatusOptions = response.data;
      });
      this.getDicts("chat_msg_type").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("chat_msg_send_type").then((response) => {
        this.sendTypeOptions = response.data;
      });
      getAllRoleList().then(response => {
          this.roles = response.data;
      });
    },
    methods: {
      getDetails(id) {
        this.item=null;
        getFastGptChatSession(id).then(response => {
            this.item = response.data;
            this.msgList = response.list;
        });
      },
      updateMsg(row){
         this.form = null;
          getFastGptChatMsg(row).then(response => {
          this.open = true;
          this.form = response.data;
        });
      },
      updateMsgStatus(row){
        var statusForm={
          msgId:row,
          status:1
        }
        this.$confirm('是否确认标记?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.exportLoading = true;
            return updateFastGptChatMsg(statusForm);
          }).then(response => {
            this.msgSuccess("修改成功");
            this.open = false;
          var status=  this.msgList.find(item => item.msgId ==row);
          status.status=1;
          }).catch(() => {});


      },
      updateLogs(row){
        this.logsOpen=true;
        var queryParams= {
          msgId: row
        }
        listFastGptChatMsgLogs(queryParams).then(response => {
          this.chatMsgLogsList = response.rows;
        });
      },
      logsCancel(){
        this.logsOpen=false;
      },
      submitForm(){
        var submitForm={
          msgId:this.form.msgId,
          content:this.form.content
        }
        updateFastGptChatMsg(submitForm).then(response => {
          this.msgSuccess("修改成功");
          this.open = false;
          var status=  this.msgList.find(item => item.msgId ==this.form.msgId);
          status.content=this.form.content;
        });
      },
      cancel(){
          this.open = false;
      }
    }
  }
</script>
<style>
  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
  .padding-a{
    padding-right: 10px;

  }
</style>