xiaoshu/src/components/DocumentCards.vue

<template>
  <main>
    <section>
      <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
        <img :src="getAssetURL(item.img)" />
        <div :style="{ color: item.color }">
          {{ item.title }}
          <span>{{ item.content }}</span>
        </div>
      </div>
    </section>
    <footer v-if="hasUpload">
      <a-popover :popup-visible="showUpload" position="tl" @popup-visible-change="() => {
        showDeleteTooltip = false;
      }
        ">
        <div :class="{ 'text-hide': showUpload }">
          <div @click="() => {
            showUpload = true;
          }
            ">
            <img src="@/assets/document/3.svg" class="img-normal" v-if="!showUpload" />
            <img src="@/assets/document/4.svg" class="img-hover" v-if="!showUpload" />
            <img src="@/assets/document/5.svg" class="img-active" v-if="showUpload" />
          </div>
          <p>已选择 {{ fileList.length }} 个文档</p>
        </div>
        <template #content>
          <div :class="{ 'upload-wrap': true, 'upload-wrap-narrow': uploadFile }">
            <header>
              <p>{{ uploadFile ? "上传文档" : "文档解析站" }}</p>
              <div @click="() => {
                showUpload = false;
              }
                ">
                <icon-close size="large" />
              </div>
            </header>
            <div>
              <section v-if="agengtName == '智能数据'">
                <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
                  @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
                  :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }"
                  accept=".xls,.xlsx,.csv,.db">
                  <template #upload-button>
                    <div class="upload-main">
                      <p>拖拽文档到这里，或<span>点此上传</span></p>
                      <span>
                        支持上传 Excel (.xls, .xlsx)，CSV (.csv)，DB (.db)，大小不超过30M
                      </span>
                    </div>
                  </template>
                </a-upload>
              </section>

              <section v-else>
                <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
                  @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
                  :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }" accept="*">
                  <template #upload-button>
                    <div class="upload-main">
                      <p>拖拽文档到这里，或<span>点此上传</span></p>
                      <span>
                        支持上传{{ uploadFile ? ".txt,.pdf" : ".xlsx‌文档" }}，大小不超过30M
                      </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"
                    :row-selection="rowSelection" v-model:selectedKeys="selectedKeys">
                    <template #methods="{ record }">
                      <a-tooltip content="下载">
                        <div class="method-button" @click="downloadDocument(record)">
                          <icon-cloud-download />
                        </div>
                      </a-tooltip>
                      <a-popover :popup-visible="showDeleteTooltip && deleteId === record.key">
                        <a-tooltip content="删除">
                          <div class="method-button" @click="handleDeleteButton(record.key)">
                            <icon-delete />
                          </div>
                        </a-tooltip>
                        <template #content>
                          <div>
                            <p>删除后无法恢复，您是否删除？</p>
                            <div class="delete-buttons">
                              <div>
                                <a-button size="mini" type="primary" style="margin-right: 10px"
                                  @click="deleteDocument">确认</a-button>
                                <a-button size="mini" type="outline" @click="() => {
                                  showDeleteTooltip = false;
                                }
                                  ">取消</a-button>
                              </div>
                            </div>
                          </div>
                        </template>
                      </a-popover>
                    </template>
                  </a-table>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-buttons">
            <div>
              <a-button type="outline" style="margin-right: 10px" @click="selectFiles(false)">取消</a-button>
              <a-button :loading="buttonLoading" type="primary" @click="selectFiles(true, 'paper')">去{{
                uploadFile ? '提问'
                  : '合并'
              }}({{ fileList.length
                }})</a-button>
            </div>
          </div>
        </template>
      </a-popover>
      <!-- <section v-if="hasSlider">
        <p>出题随机性</p>
        <a-slider :default-value="50" :style="{ width: '100px' }" />
      </section> -->
    </footer>
  </main>
</template>
<script>
import dayjs from "dayjs";
import { defineComponent, ref, inject, reactive } from "vue";
export default defineComponent({
  props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId", "agengtName"],
  setup(props) {
    const showUpload = ref(false);
    const { helper, ajax } = inject("$global");

    const maxSize = 30 * 1024 * 1024;
    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 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 {
          fileList.value.forEach(file => {
            formData.append('files', file)
          });
          await ajax.file.uploadExcels(formData);
          helper.$bus.emit("open-dialog", '合并Excel');
        }
      }

    };
    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", `最多上传50个文件`);
    };
    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) => {
      console.log('data', 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) => { };
    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);
    };
    return {
      agengtName: props.agengtName,
      buttonLoading,
      fileList,
      selectedKeys,
      getAssetURL: helper.getAssetURL,
      showUpload,
      onBeforeUpload,
      onExceedLimit,
      onBeforeRemove,
      customRequest,
      columns,
      tableData,
      rowSelection,
      downloadDocument,
      deleteDocument,
      showDeleteTooltip,
      deleteId,
      handleDeleteButton,
      selectFiles
    };
  }
});
</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);
  }
}

.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;
  }
}

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>