|
|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <div class="common-box" style="margin-top: 20px">
|
|
|
+ <TopTitle :messageType="messageType" :title="title" icon="laba"/>
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ v-model="searchText"
|
|
|
+ class="input-with-select"
|
|
|
+ clearable
|
|
|
+ placeholder="输入标题可以搜索..."
|
|
|
+ @clear="getDataList"
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Search" @click="getDataList"/>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="list-box">
|
|
|
+ <el-scrollbar style="width: 100%; height: 200px">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ class="line"
|
|
|
+ >
|
|
|
+ <div class="text-ellipsis" :content="item.fileTitle">{{ item.fileTitle }}</div>
|
|
|
+ <div class="text-ellipsis">{{ item.fileName }}</div>
|
|
|
+ <div class="date">{{ item.created }}</div>
|
|
|
+ <div
|
|
|
+ v-show="item.fileUrl != null && item.fileUrl != ''"
|
|
|
+ class="message-time download-btn"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="downloadFile(item)"
|
|
|
+ :loading="downloadBtnLoading = false"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ >下载
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <!-- <MessageDetail ref="messageDetailRef" />-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {getFileShareNoPageList, getUserMessageNoPageList} from "@/api/message";
|
|
|
+// import MessageDetail from "@/views/messages/MessageDetail.vue";
|
|
|
+import {Search} from "@element-plus/icons-vue";
|
|
|
+import buttonPermission from "@/common/configs/buttonPermission";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ // 消息类型 0 系统公告 1 工位消息 2-具体某些人员消息
|
|
|
+ messageType: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: "个人消息",
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const searchText = ref(null);
|
|
|
+const dataList = ref<any[]>();
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getDataList();
|
|
|
+});
|
|
|
+const downloadBtnLoading = ref(false);
|
|
|
+const downloadFile = async (row: any) => {
|
|
|
+ downloadBtnLoading.value = true;
|
|
|
+ let url = import.meta.env.VITE_APP_UPLOAD_URL + row.fileUrl;
|
|
|
+ // 1. 获取资源并转为Blob
|
|
|
+ const response = await fetch(url);
|
|
|
+ const blob = await response.blob();
|
|
|
+
|
|
|
+ // 2. 创建临时对象URL
|
|
|
+ const tempUrl = URL.createObjectURL(blob);
|
|
|
+
|
|
|
+ // 3. 创建隐藏a标签触发下载
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = tempUrl;
|
|
|
+ link.download = row.fileName;
|
|
|
+ link.style.display = "none";
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+
|
|
|
+ // 4. 清理内存
|
|
|
+ URL.revokeObjectURL(tempUrl);
|
|
|
+ document.body.removeChild(link);
|
|
|
+ downloadBtnLoading.value = false;
|
|
|
+};
|
|
|
+// const messageDetailRef = ref<InstanceType<typeof MessageDetail>>();
|
|
|
+// const showDetail = (item: any) => {
|
|
|
+// messageDetailRef.value?.handleOpenDrawer(item.id);
|
|
|
+// };
|
|
|
+
|
|
|
+const getDataList = () => {
|
|
|
+ getFileShareNoPageList(searchText.value).then((res) => {
|
|
|
+ console.log(res.data);
|
|
|
+ dataList.value = res.data ?? [];
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.text-ellipsis {
|
|
|
+ white-space: nowrap; /* 禁止换行 */
|
|
|
+ overflow: hidden; /* 超出部分隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 超出显示省略号 */
|
|
|
+ max-width: 30%; /* 可选：限制最大宽度 */
|
|
|
+}
|
|
|
+
|
|
|
+.list-box {
|
|
|
+ margin-top: 5px;
|
|
|
+ height: calc(100vh - 780px);
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 73%;
|
|
|
+ overflow: hidden; /*超出宽度部分隐藏*/
|
|
|
+ text-overflow: ellipsis; /*超出部分以点号代替*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888888;
|
|
|
+ text-align: right;
|
|
|
+ width: 35%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liziliang