136 lines
3.6 KiB
Vue
136 lines
3.6 KiB
Vue
<template>
|
|
<div class="recent-upload">
|
|
<div class="photo-header">
|
|
<AButton type="primary" shape="round" size="middle" @click="upload.openUploadDrawerFn()">
|
|
<template #icon>
|
|
<PlusOutlined/>
|
|
</template>
|
|
上传照片
|
|
</AButton>
|
|
<APopover placement="right" trigger="click">
|
|
<AButton type="default" shape="round" size="middle">
|
|
<template #icon>
|
|
<PlusSquareOutlined/>
|
|
</template>
|
|
创建相册
|
|
</AButton>
|
|
|
|
<template #content>
|
|
<span style="color: #999; font-size: 15px;">创建相册</span>
|
|
<AInput placeholder="请填写相册名称" class="phoalbum-create-input"
|
|
style="margin-top: 15px"
|
|
v-model:value="albumNameValue" size="large">
|
|
<template #suffix>
|
|
<AButton type="text" @click.prevent size="middle" style="color: #0e87cc" @click="createAlbumSubmit">
|
|
确认
|
|
</AButton>
|
|
</template>
|
|
</AInput>
|
|
</template>
|
|
</APopover>
|
|
</div>
|
|
<image-toolbar :selected="imageStore.selected" :image-list="imageList"/>
|
|
<div class="photo-list">
|
|
<div class="photo-list-container">
|
|
<ImageWaterfallList :image-list="imageList"/>
|
|
</div>
|
|
</div>
|
|
<ImageUpload/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
|
|
import useStore from "@/store";
|
|
import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
|
|
import {createAlbumApi, queryRecentImagesApi} from "@/api/storage";
|
|
import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
|
|
|
|
import {message} from "ant-design-vue";
|
|
import router from "@/router/router.ts";
|
|
import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
|
|
|
|
const imageStore = useStore().image;
|
|
const upload = useStore().upload;
|
|
const imageList = ref<any[]>([]);
|
|
|
|
|
|
const getRecentImages = async () => {
|
|
if (!upload.storageSelected?.[0] || !upload.storageSelected?.[1]) {
|
|
message.error("请选择存储配置");
|
|
return;
|
|
}
|
|
imageStore.imageListLoading = true;
|
|
const res: any = await queryRecentImagesApi(upload.storageSelected?.[0], upload.storageSelected?.[1]);
|
|
if (res && res.code === 200) {
|
|
imageList.value = res.data.records;
|
|
}
|
|
imageStore.imageListLoading = false;
|
|
};
|
|
|
|
const albumNameValue = ref<string>("未命名相册");
|
|
|
|
/**
|
|
* 创建相册
|
|
*/
|
|
async function createAlbumSubmit() {
|
|
if (albumNameValue.value.trim() === "") {
|
|
message.error("相册名称不能为空");
|
|
return;
|
|
}
|
|
const res: any = await createAlbumApi(albumNameValue.value);
|
|
if (res && res.code === 200) {
|
|
router.push({
|
|
path: "/main/album/albums/" + `${res.data.id}`,
|
|
query: {name: albumNameValue.value}
|
|
});
|
|
} else {
|
|
message.error("创建相册失败");
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getRecentImages();
|
|
});
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.recent-upload {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.photo-header {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
border-bottom: 1px solid #e2e2e2;
|
|
}
|
|
|
|
.photo-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: calc(100% - 65px);
|
|
margin-top: 10px;
|
|
.photo-list-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|