fu-hsi-web/src/views/promptManagement/PromptConfig/add/PromptDebug.vue

<template>
  <cs-drawer
    :drawer-option="drawerOption"
  >
    <div slot="content" class="PromptDebug">
      <div class="left">
        <div class="title">识别结果预览</div>
        <div class="left-content">
          <div v-if="dataInfo.name" class="top">{{ `证据模板：${dataInfo.name}` }}</div>
          <div v-if="dataList.length === 0" class="empty">
            <img src="@/assets/common/file_empty.png" alt="">
            <span>暂无结果，请在右侧输入调试内容或上传文档</span>
          </div>
          <div v-if="dataList.length > 0" class="data-list">
            <div v-for="(item,index) in dataList" :key="index" class="data-item">
              <div class="left">{{ item.attrName }}</div>
              <div class="right">{{ item.attrValue }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" class="btn" @click="submit">执行调试</el-button>
        <div class="right-item">
          <span>调试内容</span>
          <el-input
            v-model="text"
            type="textarea"
            :rows="8"
            placeholder="请输入"
          />
        </div>
        <div class="right-item">
          <span>选择文件</span>
          <el-upload
            :headers="{
              token: token
            }"
            :action="uploadOption.action"
            :accept="uploadOption.accept"
            :data="{
              temp: true
            }"
            :on-remove="remove"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <div class="up-btn">
              请选择文件
            </div>
            <div class="desc">支持上传扩展名为txt、doc、docx文件，且仅限一份文件</div>
          </el-upload>
        </div>
      </div>
    </div>
  </cs-drawer>
</template>

<script>
import { baseURL } from '@/config'
import { getAccessToken } from '@/utils/accessToken'
import { promptDebugging } from '@/api/promptManagement'
export default {
  name: 'PromptDebug',
  data() {
    return {
      drawerOption: {
        show: false,
        title: '提示词调试',
        width: '1200px',
        hiddenFooter: true
      },
      text: '',
      // 上传配置
      uploadOption: {
        action: `${baseURL}/minio/uploadFile`,
        accept: '.txt,.doc,.docx'
      },
      token: getAccessToken(),
      fileId: '',
      fileList: [],
      dataList: [],
      tripleList: [],
      dataInfo: undefined
    }
  },
  methods: {
    show(data, list) {
      this.fileId = ''
      this.dataList = []
      this.drawerOption.show = true
      this.dataInfo = data
      if (list) {
        this.list = list
      }
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      const filename = file.name
      const postfix = filename.substring(filename.lastIndexOf('.'))
      if (!['.txt', '.doc', '.docx'].includes(postfix)) {
        this.$message.error('上传图片只能是 txt,doc,docx 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
      return true
    },
    handleSuccess(res, file) {
      this.fileId = res.data
    },
    remove() {
      this.fileId = ''
    },
    // 调试
    submit() {
      if (!this.text && !this.fileId) {
        this.$message.error('请上传文件或者输入调试内容！')
        return
      }
      const params = {
        text: this.text,
        type: this.dataInfo.type,
        prompt: this.dataInfo.prompt,
        extractAttributes: this.dataInfo.extractAttributes,
        fileId: this.fileId
      }
      if (params.type === '2') {
        params.tripleList = this.list
      }
      promptDebugging(params).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.PromptDebug {
    display: flex;
    padding: 16px;
    overflow: auto;
    .left {
        width: 50%;

        .title {
            font-size: 18px;
            color: #333333;
            margin-bottom: 16px;
        }
        .left-content {
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #D9D9D9;
            width: 100%;
            height: calc(100vh - 300px);
            .empty {
                margin: 260px auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img {
                    width: 200px;
                    height: 200px;
                }
                span {
                    font-size: 16px;
                    color: #333333;
                }
            }
            .top {
                height: 53px;
                background: #F2F6FA;font-size: 16px;
                color: #888888;
                line-height: 53px;
                padding-left: 24px;
            }
            .data-list {
              display: flex;
              flex-direction: column;
              padding: 24px;
              overflow: auto;
              height: calc(100vh - 400px);
              .data-item {
                display: flex;
                margin-bottom: 24px;
                align-items: center;
                .left {
                  width: 120px;
                  font-size: 16px;
                  color: #666666;
                  text-align: right;
                }
                .right {
                  margin-left: 24px;font-size: 16px;
                  color: #333333;
                }
              }
            }
        }
    }
    .right {
        margin-left: 32px;
        flex: 1;
        position: relative;
        .btn {
          position: absolute;
          right: 0;
          top: 16px;
        }
        .right-item {
            display: flex;
            flex-direction: column;
            margin-top: 24px;
            span {
                font-size: 16px;
                color: #333333;
                margin-bottom: 16px;
            }
            .up-btn {
                width: 128px;
                height: 42px;
                background: #FFFFFF;
                border-radius: 6px 6px 6px 6px;
                border: 1px solid #3763FF;
                line-height: 42px;
                font-size: 16px;
                color: #3763FF;
                cursor: pointer;
            }
            .desc {
                font-size: 16px;
                color: #B4B4B4;
                margin-top: 16px;
            }
        }
    }
}
</style>