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 class="top">证据模板：买卖合同</div>
          <!-- <div class="empty">
            <img src="@/assets/common/file_empty.png" alt="">
            <span>暂无结果，请在右侧输入调试内容或上传文档</span>
          </div> -->
        </div>
      </div>
      <div class="right">
        <div class="right-item">
          <span>调试内容</span>
          <el-input
            v-model="textarea"
            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-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'
export default {
  name: 'PromptDebug',
  data() {
    return {
      drawerOption: {
        show: false,
        title: '提示词调试',
        width: '1200px',
        hiddenFooter: true
      },
      textarea: '',
      // 上传配置
      uploadOption: {
        action: `${baseURL}/minio/uploadFile`,
        accept: '.txt,.doc,.docx'
      },
      token: getAccessToken(),
      fileId: '',
      fileList: [],
      dataInfo: undefined
    }
  },
  methods: {
    show(data) {
      this.drawerOption.show = true
      this.dataInfo = data
    },
    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
      // const obj = {
      //   name: file.name,
      //   fileId: res.data
      // }
      // this.fileList.push(obj)
      // this.imgOcrIdentify(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;
            }
        }
    }
    .right {
        margin-left: 32px;
        flex: 1;
        .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>