xiaoshu/src/components/PictureUpload.vue

<template>
<footer class="picture-upload-footer">
  <a-popover :popup-visible="showUpload" position="tl" @popup-visible-change="handlePopupChange">
    <div class="text-hide">
      <div class="upload-img-container" @click="handleUploadClick">
        <img src="@/assets/document/6.svg" class="img-normal" v-if="!showUpload" />
        <img src="@/assets/document/7.svg" class="img-hover" v-if="!showUpload" />
        <img src="@/assets/document/8.svg" class="img-active" v-if="showUpload" />
      </div>

      <p>{{ file_status_label_tips }}</p>
    </div>

    <template #content>
      <div :class="{ 'upload-wrap': true, 'upload-wrap-narrow': uploadFile }">
        <header>
          <p>{{ uploadFile ? "上传图片" : "上传图片" }}</p>

          <div @click="handleUploadClose">
            <icon-close size="large" />
          </div>
        </header>

        <div class="xiaoshuhuitu-image-upload">
          <section v-if="tableData.length === 0">
            <a-upload 
              :draggable="true"
              list-type="picture"
              :multiple="false" 
              :limit="1" 
              :show-file-list="false"
              :custom-request="customRequest" 
              :show-upload-button="{ showOnExceedLimit: false }"
              accept=".png,.jpg"
              @before-upload="onBeforeUpload" 
              @exceed-limit="onExceedLimit" 
              @before-remove="onBeforeRemove"
            >
              <template #upload-button>
                <div class="upload-main">
                  <p>拖拽图片到这里，或<span>点此上传</span></p>
                  <span>
                    支持上传 .png, .jpg，大小不超过10M
                  </span>
                </div>
              </template>
            </a-upload>
          </section>

          <!-- <div v-if="tableData.length > 0">
            <p>
              <span>已选择图片列表</span>
              <span>共{{ tableData.length }}个</span>
            </p>
            <div>
              <a-table 
                :pagination="false" 
                row-key="name" 
                :columns="columns" 
                :data="tableData"
                v-model:selectedKeys="selectedKeys"
              >
                <template #methods="{ record }">
                  <BtnImgDownload @download="downloadDocument(record)"/>
                  <BtnImgDelete @delete="deleteDocument"/>
                </template>
              </a-table>
            </div>
          </div> -->

          <FileListTable  
            v-if="tableData.length > 0" 
            :tableData="tableData" 
            :columns="columns" 
            :selectedKeys="selectedKeys"
            @download="downloadDocument"
            @delete="deleteDocument"
          />
        </div>
      </div>

      <div class="bottom-buttons">
        <div>
          <a-button type="outline" style="margin-right: 10px" @click="handleUploadClose">取消</a-button>

          <a-button :loading="buttonLoading" type="primary" @click="selectFiles(true, 'paper')">
            去{{ uploadFile ? '提问' : '提问' }} ({{ fileList.length}})
          </a-button>
        </div>
      </div>
    </template>
  </a-popover>

  <span class="placeholder-width-5px"></span>
  <BtnIframeComfyui />
</footer>
</template>
<script>
import dayjs from "dayjs";
import { defineComponent, ref, inject, reactive, onBeforeUnmount, computed } from "vue";

import { Message } from '@arco-design/web-vue';

import BtnIframeComfyui from './btn-iframe-comfyui/BtnIframeComfyui.vue';

import ImgEditBtn from './image-editor/ImgEditBtn.vue';

import BtnImgDownload from './picture-upload/BtnImgDownload.vue';
import BtnImgDelete from './picture-upload/BtnImgDelete.vue';

import FileListTable from './picture-upload/FileListTable.vue';

import {huituSetTempImageFile} from './dialog-wrap/temp-image'

import {useImageUploadStatus} from '../store/modules/xs-huitu-image-upload/index';

export default defineComponent({
  props: ["data", "uploadFile", "isQuestion", "agentId", "agengtName"],
  components: {
    BtnImgDownload,
    BtnImgDelete,
    FileListTable,

    BtnIframeComfyui,

    ImgEditBtn
  },
  setup(props) {
    const { helper, ajax } = inject("$global");

    const imageUploadStatus = useImageUploadStatus();
    
    const maxSize = 30 * 1024 * 1024;

    const showUpload = ref(false);
    let fileList = ref([]);
    const tableData = reactive([]);
    let formData = new FormData();
    let inputData = ref([]);
    const showDeleteTooltip = ref(false);
    const deleteId = ref("");
    const buttonLoading = ref(false);

    const file_status_label_tips = computed(() => {
      const can_upload = imageUploadStatus.canUploadContinue;

      if(!can_upload){
        // 不允许上传
        return `已保存 1 个图片`
      }else{
        return `已选择 ${fileList.value.length} 个图片`
      }
    });

    const handlePopupChange = () => {
      showDeleteTooltip.value = false;
    };
    const handleUploadClick = () => {
      // 检查上一次传图后有没有发布文字，如果没有发布文字，则不允许再次上传图片
      const can_upload = imageUploadStatus.canUploadContinue;
      if(can_upload){
        // console.log('允许继续上传图片', can_upload);
      }else{
        Message.warning('图片已保存，请输入文字进行提问');
        return;
      }

      showUpload.value = true;
    }

    const handleUploadClose = () => {
      showUpload.value = false;
    }
    const handleCancelDelete = () => {
      showDeleteTooltip.value = false;
    };


    const selectFiles = async (isSelect, type) => {
      if (isSelect) {
        if (props.uploadFile) {
          const data = await ajax.message.createDialog(props.agentId);
          fileList.value.forEach(file => {
            formData.append('file', file)
          });
          buttonLoading.value = true;
          const result = await ajax.file.uploadFile(props.agentId, data.chat_id, formData);
          showUpload.value = false;
          helper.dialogConfig = {
            isQuestion: props.isQuestion,
            selectedKeys: selectedKeys.value,
            type
          };
          buttonLoading.value = false;
          // if (result) {
          //     helper.write('docId', result.doc_ids[0]);
          // }

          // 以下为判断是毕生还是regflow
          // TODO 判断是毕生还是regflow
          // 以下为毕生
          inputData.value.push({
            name: result.file_name,
            file_path: result.file_path,
            value: ""
          });

          const sendData = {
            chatHistory: [],
            chat_id: data.chat_id,
            agent_id: props.agentId,
            name: "小数绘图",
            description: "小数绘图",
            inputs: {
              report_name: inputData.value.map(item => item.name).join(', '),
              id: "Report-PRcYL",
              data: inputData.value
            }
          };

          if (sendData) {
            helper.write('sendData', sendData);
          }
        } else {
          // 图片上传的状态



          let temp_file = null;
          fileList.value.forEach(file => {
            formData.append('file', file)

            temp_file = file;
          });

          const data = await ajax.message.createDialog(props.agentId);
          const result = await ajax.file.uploadFile(props.agentId, data.chat_id, formData);

          /**
           * 临时保存file里的图片
           * 此图片用于在客户端进行展示
           * 当用户使用图生文功能时，需要上传一张图片，但是用户上传的照片目前（2024-11-27）无法通过服务器拿到在前端展示
           * 于是前端将此图片保存，临时在界面上展示
           * 此方案在用户刷新页面后就会失效
           */
          huituSetTempImageFile(temp_file, props.agentId, data.chat_id);
          imageUploadStatus.uploadFinish(); // 记录图片的数据

          // 保存小数绘图数据
          helper.write('sendData', {
            name: '小数绘图',

            agent_id: props.agentId,
            chat_id: props.chat_id,

            upload_file_id: result.id,
            mime_type: result.mime_type,
            name: result.name,
            created_by: result.created_by,
          });

          // 隐藏 popover
          showUpload.value = false;

          Message.info('图片已保存，请输入文字进行提问');

          // 文件清空
          tableData.length = 0;
          fileList.value = [];
        }
      }else{

      }
    };

    const handleDeleteButton = (id) => {
      showDeleteTooltip.value = true;
      deleteId.value = id;
    };

    const onBeforeUpload = (file) => {
      if (file.size > maxSize) {
        helper.message("error", `上传文件大小不能超过10M`);
        return false;
      }
      return true;
    };

    const onExceedLimit = () => {
      helper.message("error", `最多上传1个文件`);
    };

    const customRequest = async (option) => {
      const { onSuccess, fileItem } = option;
      const { file } = fileItem;
      fileList.value.push(file);
      tableData.push({
        key: file.uid,
        name: file.name,
        type: file.type,
        size: helper.formatSize(file.size),
        time: dayjs(file.lastModified).format("YYYY-MM-DD HH:mm:ss")
      });
      onSuccess();
    };

    const onBeforeRemove = (data) => {
      fileList.value = fileList.value.filter((item) => item.id !== data.uid);
      return true;
    };
    const selectedKeys = ref([]);

    const rowSelection = reactive({
      type: "checkbox",
      showCheckedAll: true,
      onlyCurrent: false
    });

    const columns = [
      {
        title: "文件名称",
        dataIndex: "name",
        ellipsis: true,
        tooltip: true,
        width: 150
      },
      {
        title: "类型",
        dataIndex: "type",
        ellipsis: true,
        tooltip: true,
        width: 150
      },
      {
        title: "大小",
        dataIndex: "size"
      },
      {
        title: "上传时间",
        dataIndex: "time",
        ellipsis: true,
        tooltip: true,
        width: 150
      },
      {
        title: "操作",
        slotName: "methods"
      }
    ];

    const downloadDocument = (record) => {
      console.log('下载图片');
    };

    const deleteDocument = () => {
      // const index = tableData.findIndex(item => item.key === deleteId.value);
      // tableData.splice(index, 1);
      // fileList.value = fileList.value.filter(item => item.uid !== deleteId.value);

      tableData.length = 0;
      fileList.value = [];
    };


    // 组件卸载
    onBeforeUnmount(() => {

    });

    return {
      agengtName: props.agengtName,
      buttonLoading,
      fileList,
      selectedKeys,
      getAssetURL: helper.getAssetURL,
      showUpload,
      onBeforeUpload,
      onExceedLimit,
      onBeforeRemove,
      customRequest,
      columns,
      tableData,
      rowSelection,
      downloadDocument,
      deleteDocument,
      showDeleteTooltip,
      deleteId,
      handleDeleteButton,
      selectFiles,

      // image_list

      handlePopupChange,
      handleCancelDelete,
      handleUploadClick,
      handleUploadClose,

      file_status_label_tips,
    };
  }
});
</script>

<style lang="scss" scoped>
.bottom-buttons {
  display: flex;
  justify-content: right;

  >div {
    display: flex;
  }
}

.delete-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.method-button {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: rgba(150, 171, 185, 0.2);
  }
}

/**宽度占位 */
.placeholder-width-5px{
  display: inline-block;
  width: 10px;
}
.pictures-upload-info{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.upload-main {
  width: 800px;
  height: 109px;
  background: url("@/assets/document/upload.svg");
  margin: 0 auto;
  padding: 24px 0px 24px 277px;
  background-size: 100%;

  >p {
    color: #000;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;

    >span {
      color: #00aea3;
      text-decoration: underline;
    }
  }

  >span {
    font-size: 13px;
    color: #7f7f7f;
  }
}

footer.picture-upload-footer{
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .text-hide {
    // width: 110px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .upload-img-container{
    cursor: pointer;
    // width: 110px;
    height: 32px;

    .img-normal {
      display: block;
    }

    .img-hover {
      display: none;
    }

    &:hover {
      .img-normal {
        display: none;
      }

      .img-hover {
        display: block;
      }
    }

    >img {
      width: 110px;
      height: 32px;
    }
  }
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // >section {
  //   overflow-y: auto;
  //   display: flex;
  //   flex-wrap: wrap;
  //   gap: 20px;

  //   &.section-full {
  //     flex: 1;
  //   }

  //   >div {
  //     width: 382px;
  //     height: 120px;
  //     padding: 20px 24px;
  //     border-radius: 8px;
  //     display: flex;

  //     >img {
  //       width: 38px;
  //       height: 38px;
  //       margin-right: 12px;
  //     }

  //     >div {
  //       font-size: 18px;
  //       font-weight: bold;

  //       >span {
  //         font-size: 15px;
  //         font-weight: 400;
  //         color: #797d7f;
  //         margin-top: 8px;
  //         overflow: hidden;
  //         text-overflow: ellipsis;
  //         display: -webkit-box;
  //         -webkit-line-clamp: 2;
  //         -webkit-box-orient: vertical;
  //         line-height: 1.4;
  //       }
  //     }
  //   }
  // }


  >footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;

    >div {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 32px;
      border-radius: 21px;
      border: 1px solid #e3e3e3;
      white-space: nowrap;
      overflow: hidden;
      transition-duration: 0.3s;
      width: 250px;

      /**
      &.text-hide {
        width: 110px;
        overflow: hidden;
      }
       */

      &.text-narrow {
        width: 100px;
        overflow: hidden;

        >div>img {
          width: 100px;
        }
      }

      >p {
        overflow: hidden;
        white-space: nowrap;
      }

      >div {
        cursor: pointer;
        width: 110px;
        height: 32px;

        .img-normal {
          display: block;
        }

        .img-hover {
          display: none;
        }

        &:hover {
          .img-normal {
            display: none;
          }

          .img-hover {
            display: block;
          }
        }

        >img {
          width: 110px;
          height: 32px;
        }
      }
    }

    >section {
      display: flex;
      align-items: center;
      background: rgba(150, 171, 185, 0.2);
      border-radius: 20px;
      padding: 5px 10px;

      >p {
        margin-right: 5px;
      }
    }
  }
}

.upload-wrap {
  width: 800px;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;

  &.upload-wrap-narrow {
    height: auto;
  }

  >header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;

    >p {
      font-size: 18px;
      font-weight: bold;
    }

    >div {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      display: flex;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  >div {
    flex: 1;
    overflow-y: auto;

    >div {
      >p {
        margin: 20px 0;
        color: #7f7f7f;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>