ylrz_his_scrm_companyUI/src/views/fastGpt/fastGptKeywordSend/fastGptKeyWordDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
        营销指令内容
      </div>
      <!-- 使用 el-form 包裹表单项 -->
      <el-form label-width="120px" style="padding: 20px;">
        <!-- 发送文字内容 -->
        <el-form-item label="发送文字内容" >
          <div class="el-form-item__content readonly-field" style="line-height: 28px;">
            {{ form.content || '-' }}
          </div>
        </el-form-item>

        <!-- 图片访问地址 -->
        <el-form-item label="图片访问地址">
          <div class="el-form-item__content readonly-field">
            <div v-if="form.contentType !== 0 && form.imgUrl && form.imgUrl.trim()">
              <el-image
                v-for="(url, index) in form.imgUrl.split(',')"
                :key="index"
                :src="url"              style="width: 100px; height: 100px; margin-right: 10px;"
                fit="cover"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div v-else class="el-form-item__content" style="line-height: 28px;">-</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>

import {getFastGptKeywordSend} from "@/api/fastGpt/fastGptKeywordSend";

  export default {
    name: "fastGptChatMsgDetails",
    data() {
      return {
        open:false,
        logsOpen:false,
        roles:[],
        msgList:[],
        item:null,
        form: {
          content: '',
          imgUrl: ''
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyword: null,
          content: null,
          contentType: null,
          imgUrl: null,
          status: null,
          roleId: null,
          createTime: null,
        }
      }
    },

    methods: {
      getDetails(id) {
        getFastGptKeywordSend(id).then(response => {
          console.log(response);
          this.form = response.data;
        });
      },

      cancel(){
          this.open = false;
      }
    }
  }
</script>
<style>
  .readonly-field {
    background-color: #fafafa;
    padding: 10px;
    border-radius: 4px;
  }
  .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>