|
@@ -1,498 +1,521 @@
|
|
|
<template>
|
|
<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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ <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;
|
|
|
|
|
+ }
|
|
|
">
|
|
">
|
|
|
- <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" />
|
|
|
|
|
|
|
+ <icon-close size="large" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </header>
|
|
|
|
|
+ <div>
|
|
|
|
|
+
|
|
|
|
|
+ <section>
|
|
|
|
|
+ <a-upload draggable :multiple="!uploadFile" :limit="50" @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>
|
|
</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>
|
|
|
|
|
- <a-upload draggable :multiple="!uploadFile" :limit="50" @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="!uploadFile && false">
|
|
|
|
|
- <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>
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </a-upload>
|
|
|
|
|
+ </section>
|
|
|
|
|
+ <div v-if="!uploadFile && false">
|
|
|
|
|
+ <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>
|
|
</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">
|
|
|
|
|
|
|
+ </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>
|
|
<p>出题随机性</p>
|
|
|
<a-slider :default-value="50" :style="{ width: '100px' }" />
|
|
<a-slider :default-value="50" :style="{ width: '100px' }" />
|
|
|
</section> -->
|
|
</section> -->
|
|
|
- </footer>
|
|
|
|
|
- </main>
|
|
|
|
|
|
|
+ </footer>
|
|
|
|
|
+ </main>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import { defineComponent, ref, inject, reactive } from "vue";
|
|
import { defineComponent, ref, inject, reactive } from "vue";
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
- props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId"],
|
|
|
|
|
- setup(props) {
|
|
|
|
|
- const showUpload = ref(false);
|
|
|
|
|
- const { helper, ajax } = inject("$global");
|
|
|
|
|
- const maxSize = 30 * 1024 * 1024;
|
|
|
|
|
- let fileList = ref([]);
|
|
|
|
|
- let formData = new FormData();
|
|
|
|
|
- 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]);
|
|
|
|
|
- }
|
|
|
|
|
- } 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);
|
|
|
|
|
- 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"
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- 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"
|
|
|
|
|
|
|
+ props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId"],
|
|
|
|
|
+ setup(props) {
|
|
|
|
|
+ const showUpload = ref(false);
|
|
|
|
|
+ const { helper, ajax } = inject("$global");
|
|
|
|
|
+
|
|
|
|
|
+ const maxSize = 30 * 1024 * 1024;
|
|
|
|
|
+ let fileList = ref([]);
|
|
|
|
|
+ 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;
|
|
|
|
|
+
|
|
|
|
|
+ // TODO 判断是毕生还是regflow
|
|
|
|
|
+ // 以下为毕生
|
|
|
|
|
+ inputData.push({
|
|
|
|
|
+ name: result.file_name,
|
|
|
|
|
+ file_path: result.file_path,
|
|
|
|
|
+ value: ""
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const sendData = {
|
|
|
|
|
+ chatHistory: [],
|
|
|
|
|
+ name: "文档智能",
|
|
|
|
|
+ description: "文档智能",
|
|
|
|
|
+ inputs: {
|
|
|
|
|
+ report_name: inputData.map(item => item.name).join(', '),
|
|
|
|
|
+ id: "Report-PRcYL",
|
|
|
|
|
+ data: inputData
|
|
|
}
|
|
}
|
|
|
- ]);
|
|
|
|
|
- const downloadDocument = (record) => { };
|
|
|
|
|
- const deleteDocument = () => { };
|
|
|
|
|
- return {
|
|
|
|
|
- buttonLoading,
|
|
|
|
|
- fileList,
|
|
|
|
|
- selectedKeys,
|
|
|
|
|
- getAssetURL: helper.getAssetURL,
|
|
|
|
|
- showUpload,
|
|
|
|
|
- onBeforeUpload,
|
|
|
|
|
- onExceedLimit,
|
|
|
|
|
- onBeforeRemove,
|
|
|
|
|
- customRequest,
|
|
|
|
|
- columns,
|
|
|
|
|
- tableData,
|
|
|
|
|
- rowSelection,
|
|
|
|
|
- downloadDocument,
|
|
|
|
|
- deleteDocument,
|
|
|
|
|
- showDeleteTooltip,
|
|
|
|
|
- deleteId,
|
|
|
|
|
- handleDeleteButton,
|
|
|
|
|
- selectFiles
|
|
|
|
|
- };
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ helper.$bus.emit("send-message", sendData);
|
|
|
|
|
+ }, 500);
|
|
|
|
|
+
|
|
|
|
|
+ // if (result) {
|
|
|
|
|
+ // helper.write('docId', result.doc_ids[0]);
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ } 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);
|
|
|
|
|
+ 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"
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ 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"
|
|
|
|
|
+ }
|
|
|
|
|
+ ]);
|
|
|
|
|
+ const downloadDocument = (record) => { };
|
|
|
|
|
+ const deleteDocument = () => { };
|
|
|
|
|
+ return {
|
|
|
|
|
+ buttonLoading,
|
|
|
|
|
+ fileList,
|
|
|
|
|
+ selectedKeys,
|
|
|
|
|
+ getAssetURL: helper.getAssetURL,
|
|
|
|
|
+ showUpload,
|
|
|
|
|
+ onBeforeUpload,
|
|
|
|
|
+ onExceedLimit,
|
|
|
|
|
+ onBeforeRemove,
|
|
|
|
|
+ customRequest,
|
|
|
|
|
+ columns,
|
|
|
|
|
+ tableData,
|
|
|
|
|
+ rowSelection,
|
|
|
|
|
+ downloadDocument,
|
|
|
|
|
+ deleteDocument,
|
|
|
|
|
+ showDeleteTooltip,
|
|
|
|
|
+ deleteId,
|
|
|
|
|
+ handleDeleteButton,
|
|
|
|
|
+ selectFiles
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.bottom-buttons {
|
|
.bottom-buttons {
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: right;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: right;
|
|
|
|
|
|
|
|
- >div {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >div {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.delete-buttons {
|
|
.delete-buttons {
|
|
|
- margin-top: 10px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.method-button {
|
|
.method-button {
|
|
|
- display: inline-block;
|
|
|
|
|
- padding: 4px 8px;
|
|
|
|
|
- border-radius: 5px;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
-
|
|
|
|
|
- &:hover {
|
|
|
|
|
- background: rgba(150, 171, 185, 0.2);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ padding: 4px 8px;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: rgba(150, 171, 185, 0.2);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.upload-main {
|
|
.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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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 {
|
|
>span {
|
|
|
- font-size: 13px;
|
|
|
|
|
- color: #7f7f7f;
|
|
|
|
|
|
|
+ color: #00aea3;
|
|
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ >span {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #7f7f7f;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
main {
|
|
|
- height: 100%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
|
|
- >section {
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- gap: 20px;
|
|
|
|
|
|
|
+ >section {
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
|
|
|
- &.section-full {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.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 {
|
|
|
|
|
+ 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;
|
|
|
|
|
|
|
|
- >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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >footer {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: auto;
|
|
|
|
|
|
|
|
- &.text-narrow {
|
|
|
|
|
- width: 100px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ >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;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- >div>img {
|
|
|
|
|
- width: 100px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >p {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- >p {
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >div {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ width: 110px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
|
|
|
- >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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .img-normal {
|
|
|
|
|
+ display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- >section {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- background: rgba(150, 171, 185, 0.2);
|
|
|
|
|
- border-radius: 20px;
|
|
|
|
|
- padding: 5px 10px;
|
|
|
|
|
|
|
+ .img-hover {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- >p {
|
|
|
|
|
- margin-right: 5px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &: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 {
|
|
.upload-wrap {
|
|
|
- width: 800px;
|
|
|
|
|
- height: 300px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- padding-bottom: 30px;
|
|
|
|
|
|
|
+ width: 800px;
|
|
|
|
|
+ height: 300px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding-bottom: 30px;
|
|
|
|
|
|
|
|
- &.upload-wrap-narrow {
|
|
|
|
|
- height: 200px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.upload-wrap-narrow {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- >header {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- margin-bottom: 13px;
|
|
|
|
|
|
|
+ >header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin-bottom: 13px;
|
|
|
|
|
|
|
|
- >p {
|
|
|
|
|
- font-size: 18px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >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 {
|
|
|
|
|
+ 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 {
|
|
>div {
|
|
|
- flex: 1;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
-
|
|
|
|
|
- >div {
|
|
|
|
|
- >p {
|
|
|
|
|
- margin: 20px 0;
|
|
|
|
|
- color: #7f7f7f;
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ >p {
|
|
|
|
|
+ margin: 20px 0;
|
|
|
|
|
+ color: #7f7f7f;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|