fix: bug

src/components/DocumentCards.vue

@@ -10,7 +10,15 @@
             </div>
         </section>
         <footer v-if="hasUpload">
-            <a-popover :popup-visible="showUpload" position="tl">
+            <a-popover
+                :popup-visible="showUpload"
+                position="tl"
+                @popup-visible-change="
+                    () => {
+                        showDeleteTooltip = false;
+                    }
+                "
+            >
                 <div :class="{ 'text-hide': showUpload }" v-if="!uploadImg">
                     <div
                         @click="
@@ -23,7 +31,7 @@
                         <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>已选择 0/0 个文档</p>
+                    <p>已选择 {{ selectedKeys.length }}/{{ tableData.length }} 个文档</p>
                 </div>
                 <div class="text-narrow" v-else>
                     <div
@@ -80,7 +88,7 @@
                             <div v-if="!uploadImg">
                                 <p>
                                     <span>已解析文件列表</span>
-                                    <span>共0个</span>
+                                    <span>共{{ tableData.length }}个</span>
                                 </p>
                                 <div>
                                     <a-table
@@ -92,15 +100,60 @@
                                         v-model:selectedKeys="selectedKeys"
                                     >
                                         <template #methods="{ record }">
-                                            <a-button @click="$modal.info({ title: 'Name', content: record.name })"
-                                                >删除</a-button
-                                            >
+                                            <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 type="primary" @click="selectFiles(true)"
+                                >去提问({{ selectedKeys.length }})</a-button
+                            >
+                        </div>
+                    </div>
                 </template>
             </a-popover>
             <section v-if="hasSlider">
@@ -119,6 +172,18 @@ export default defineComponent({
         const { helper } = inject("$global");
         const maxSize = 30 * 1024 * 1024;
         const fileList = [];
+        const showDeleteTooltip = ref(false);
+        const deleteId = ref("");
+        const selectFiles = (isSelect) => {
+            if (!isSelect) {
+                selectedKeys.value = [];
+            }
+            showUpload.value = false;
+        };
+        const handleDeleteButton = (id) => {
+            showDeleteTooltip.value = true;
+            deleteId.value = id;
+        };
         const onBeforeUpload = (file) => {
             if (file.size > maxSize) {
                 helper.message("error", `上传文件大小不能超过10M`);
@@ -142,7 +207,7 @@ export default defineComponent({
             fileList = fileList.filter((item) => item.id !== data.uid);
             return true;
         };
-        const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);
+        const selectedKeys = ref([]);
 
         const rowSelection = reactive({
             type: "checkbox",
@@ -195,6 +260,8 @@ export default defineComponent({
                 time: "2024.9.8"
             }
         ]);
+        const downloadDocument = (record) => {};
+        const deleteDocument = () => {};
         return {
             selectedKeys,
             getAssetURL: helper.getAssetURL,
@@ -205,12 +272,39 @@ export default defineComponent({
             customRequest,
             columns,
             tableData,
-            rowSelection
+            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;