|
|
@@ -39,6 +39,50 @@
|
|
|
<icon-close size="large" />
|
|
|
</div>
|
|
|
</header>
|
|
|
+ <div>
|
|
|
+ <section>
|
|
|
+ <a-upload
|
|
|
+ draggable
|
|
|
+ :multiple="true"
|
|
|
+ :limit="5"
|
|
|
+ @before-upload="onBeforeUpload"
|
|
|
+ @exceed-limit="onExceedLimit"
|
|
|
+ @before-remove="onBeforeRemove"
|
|
|
+ :custom-request="customRequest"
|
|
|
+ :show-upload-button="{ showOnExceedLimit: true }"
|
|
|
+ accept=".pdf,.doc,.docx,.txt,.csv"
|
|
|
+ >
|
|
|
+ <template #upload-button>
|
|
|
+ <div class="upload-main">
|
|
|
+ <p>拖拽文档到这里，或<span>点此上传</span></p>
|
|
|
+ <span> 支持上传.pdf, .doc, .docx, .txt, .csv文档，大小不超过30M </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-upload>
|
|
|
+ </section>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span>已解析文件列表</span>
|
|
|
+ <span>共0个</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-button @click="$modal.info({ title: 'Name', content: record.name })"
|
|
|
+ >删除</a-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-popover>
|
|
|
@@ -46,12 +90,14 @@
|
|
|
</main>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { defineComponent, ref, inject } from "vue";
|
|
|
+import { defineComponent, ref, inject, reactive } from "vue";
|
|
|
export default defineComponent({
|
|
|
components: {},
|
|
|
setup() {
|
|
|
- const showUpload = ref(false);
|
|
|
+ const showUpload = ref(true);
|
|
|
const { helper } = inject("$global");
|
|
|
+ const maxSize = 30 * 1024 * 1024;
|
|
|
+ const fileList = [];
|
|
|
const DEFAULT_DATA = [
|
|
|
{
|
|
|
background: "rgba(72, 177, 244, 0.06)",
|
|
|
@@ -68,12 +114,121 @@ export default defineComponent({
|
|
|
content: "支持勾选多个文档，实现基于限定文档的问答"
|
|
|
}
|
|
|
];
|
|
|
+ const onBeforeUpload = (file) => {
|
|
|
+ if (file.size > maxSize) {
|
|
|
+ helper.message("error", `上传文件大小不能超过10M`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+ const onExceedLimit = () => {
|
|
|
+ helper.message("error", `最多上传5个文件`);
|
|
|
+ };
|
|
|
+ const customRequest = async (option) => {
|
|
|
+ const { onSuccess, fileItem } = option;
|
|
|
+ const { file, uid } = fileItem;
|
|
|
+ fileList.push({
|
|
|
+ id: uid,
|
|
|
+ file
|
|
|
+ });
|
|
|
+ onSuccess();
|
|
|
+ };
|
|
|
+ const onBeforeRemove = (data) => {
|
|
|
+ fileList = fileList.filter((item) => item.id !== data.uid);
|
|
|
+ return true;
|
|
|
+ };
|
|
|
const data = ref(DEFAULT_DATA);
|
|
|
- return { data, getAssetURL: helper.getAssetURL, showUpload };
|
|
|
+ const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);
|
|
|
+
|
|
|
+ const rowSelection = reactive({
|
|
|
+ type: "checkbox",
|
|
|
+ showCheckedAll: true,
|
|
|
+ onlyCurrent: false
|
|
|
+ });
|
|
|
+
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: "文件名称",
|
|
|
+ dataIndex: "name"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "type"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "大小",
|
|
|
+ dataIndex: "size"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "上传时间",
|
|
|
+ dataIndex: "time"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ slotName: "methods"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ const tableData = reactive([
|
|
|
+ {
|
|
|
+ key: "1",
|
|
|
+ name: "文件名称1",
|
|
|
+ type: "pdf",
|
|
|
+ size: "13M",
|
|
|
+ time: "2024.9.8"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "2",
|
|
|
+ name: "文件名称2",
|
|
|
+ type: "pdf",
|
|
|
+ size: "13M",
|
|
|
+ time: "2024.9.8"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "3",
|
|
|
+ name: "文件名称3",
|
|
|
+ type: "pdf",
|
|
|
+ size: "13M",
|
|
|
+ time: "2024.9.8"
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ return {
|
|
|
+ data,
|
|
|
+ selectedKeys,
|
|
|
+ getAssetURL: helper.getAssetURL,
|
|
|
+ showUpload,
|
|
|
+ onBeforeUpload,
|
|
|
+ onExceedLimit,
|
|
|
+ onBeforeRemove,
|
|
|
+ customRequest,
|
|
|
+ columns,
|
|
|
+ tableData,
|
|
|
+ rowSelection
|
|
|
+ };
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.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;
|
|
|
+ > span {
|
|
|
+ color: #00aea3;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #7f7f7f;
|
|
|
+ }
|
|
|
+}
|
|
|
main {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -98,7 +253,8 @@ main {
|
|
|
}
|
|
|
> div {
|
|
|
font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
> span {
|
|
|
font-size: 15px;
|
|
|
font-weight: 400;
|
|
|
@@ -163,10 +319,14 @@ main {
|
|
|
.upload-wrap {
|
|
|
width: 800px;
|
|
|
height: 300px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 30px;
|
|
|
> header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ margin-bottom: 13px;
|
|
|
> p {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
@@ -184,5 +344,18 @@ main {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ > div {
|
|
|
+ > p {
|
|
|
+ margin: 20px 0;
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhangnuoyan
