Skip to content

S
source-trace-manage
Commit 974d8085 authored by chenqikuai's avatar chenqikuai
Browse files
Options

feat：专辑详情 （差表格）

parent bc8af96a
Hide whitespace changes
Inline Side-by-side
Showing with 353 additions and 12 deletions
index.html
View file @ 974d8085
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="//at.alicdn.com/t/font_2990811_5ef22ofxikf.js"></script> <script src="//at.alicdn.com/t/font_2990811_5ef22ofxikf.js"></script>
<script src="//at.alicdn.com/t/font_2543933_zn6d44hoqhc.js"></script> <script src="//at.alicdn.com/t/font_2543933_22vuxpnfsb8.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
......
src/components/HandleAllKindsOfType/constants.ts
View file @ 974d8085
...@@ -53,4 +53,23 @@ export const boxConfig = { ...@@ -53,4 +53,23 @@ export const boxConfig = {
btnTxt: "上传文件", btnTxt: "上传文件",
choosedFileIconName: "iconyasuobao", choosedFileIconName: "iconyasuobao",
} as iUploadBox, } as iUploadBox,
uploadRemark: {
type: "upload",
accept: ".xlsx",
icon: {
tag: "icon",
iconName: "iconfileexcelbox",
style: {
marginTop: "41px",
marginBottom: "5px",
},
},
requiredMsg: "当前仅支持.xlsx文件",
btnTxt: "上传文件",
btnStyle: {
marginTop: "7px",
marginBottom: "7px",
},
choosedFileIconName: "iconhuazhuanjilu",
} as iUploadBox,
}; };
src/components/HandleAllKindsOfType/index.vue
View file @ 974d8085
...@@ -74,7 +74,7 @@ import { fileTypeChecked } from "../../utils/file"; ...@@ -74,7 +74,7 @@ import { fileTypeChecked } from "../../utils/file";
import { ElMessage, useFormItem } from "element-plus"; import { ElMessage, useFormItem } from "element-plus";
const props = defineProps<{ const props = defineProps<{
type: "uploadPicture" | "uploadAlbum" | "selectAlbum"; type: "uploadPicture" | "uploadAlbum" | "selectAlbum" | "uploadRemark";
file: File | any; file: File | any;
}>(); }>();
const inputRef = ref<HTMLInputElement | null>(); const inputRef = ref<HTMLInputElement | null>();
......
src/components/Title.vue
View file @ 974d8085
...@@ -11,7 +11,15 @@ ...@@ -11,7 +11,15 @@
grayTitle: i !== title.length - 1, grayTitle: i !== title.length - 1,
}" }"
class="cursor-pointer" class="cursor-pointer"
@click="$router.push({ name: t.routerName })" @click="
() => {
if ('routerName' in t) {
$router.push({
name: t.routerName,
});
}
}
"
> >
{{ t.name }} {{ t.name }}
</div> </div>
...@@ -27,13 +35,22 @@ ...@@ -27,13 +35,22 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useSlots } from "vue";
import Icon from "./Icon/index.vue"; import Icon from "./Icon/index.vue";
defineProps<{
title?: { type TuplePush<T extends any[], X> = [...T, X];
type tTitle = TuplePush<
{
name: string; name: string;
routerName: string; routerName: string;
}[]; }[],
{
name: string;
}
>;
defineProps<{
title?: tTitle;
}>(); }>();
</script> </script>
......
src/router.ts
View file @ 974d8085
...@@ -70,6 +70,11 @@ const routes = [ ...@@ -70,6 +70,11 @@ const routes = [
component: () => import("@/views/Collection/AlbumManagement/index.vue"), component: () => import("@/views/Collection/AlbumManagement/index.vue"),
}, },
{ {
path: "albumDetail",
name: "albumDetail",
component: () => import("@/views/Collection/AlbumDetail/index.vue"),
},
{
path: "/passManage", path: "/passManage",
name: "passManage", name: "passManage",
component: () => component: () =>
......
src/views/Collection/AlbumDetail/components/UploadFileDialog/index.vue 0 → 100644
View file @ 974d8085
<template>
<syCommonDialog
:visible="visible"
type="element"
:elementDialogProps="{
title: '上传文件',
}"
showMask
elementDialogSize="medium"
@closePopup="$emit('update:visible', false)"
>
<HandleAllKindsOfType
type="uploadAlbum"
:file="file"
@upload="(v) => (file = v)"
@clear="() => (file = null)"
></HandleAllKindsOfType>
<div class="tip" style="margin-top: 20px">
提示：系统根据您的文件名生成数字产品编号，一旦上传无法修改。
</div>
<syButton
mode="elementBtn"
type="primary"
style="width: 100%; height: 40px; margin-top: 50px; margin-bottom: 42px"
:disabled="!file"
>确定</syButton
>
</syCommonDialog>
</template>
<script setup lang="ts">
/**
* @description: 上传文件弹出框，用于专辑详情中的文件上传
*/
import { syCommonDialog, syButton } from "cqk-sy-ui";
import HandleAllKindsOfType from "@/components/HandleAllKindsOfType/index.vue";
import { ref, watch } from "vue";
const props = defineProps<{
visible: boolean;
}>();
watch(
() => props.visible,
() => {
if (props.visible) {
file.value = null;
}
}
);
const file = ref<File | null>(null);
const emit = defineEmits(["update:visible"]);
</script>
<style scoped lang="scss">
@mixin tip {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
}
.tip {
@include tip;
color: #565656;
}
</style>
src/views/Collection/AlbumDetail/components/UploadRemarkDialog/index.vue 0 → 100644
View file @ 974d8085
<template>
<syCommonDialog
:visible="visible"
type="element"
:elementDialogProps="{
title: '上传文件',
}"
showMask
elementDialogSize="medium"
@closePopup="$emit('update:visible', false)"
>
<div style="margin-top: -22px" class="flex justify-between">
<div class="tip">请下载模板，按照模板格式要求编辑后上传，完成导入。</div>
<div class="download">下载备注模板</div>
</div>
<HandleAllKindsOfType
style="margin-top: 22px"
type="uploadRemark"
:file="file"
@upload="(v) => (file = v)"
@clear="() => (file = null)"
></HandleAllKindsOfType>
<syButton
mode="elementBtn"
type="primary"
style="width: 100%; height: 40px; margin-top: 50px; margin-bottom: 42px"
:disabled="!file"
>确定</syButton
>
</syCommonDialog>
</template>
<script setup lang="ts">
/**
* @description: 上传备注弹出框，用于专辑详情中的备注上传
*/
import { syCommonDialog, syButton } from "cqk-sy-ui";
import HandleAllKindsOfType from "@/components/HandleAllKindsOfType/index.vue";
import { ref, watch } from "vue";
const props = defineProps<{
visible: boolean;
}>();
watch(
() => props.visible,
() => {
if (props.visible) {
file.value = null;
}
}
);
const file = ref<File | null>(null);
const emit = defineEmits(["update:visible"]);
</script>
<style lang="scss" scoped>
@mixin tip {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
}
.tip {
@include tip;
color: #565656;
}
.download {
@include tip;
color: var(--sy-blue);
cursor: pointer;
user-select: none;
}
</style>
src/views/Collection/AlbumDetail/index.vue 0 → 100644
View file @ 974d8085
<template>
<LayoutVue>
<div class="flex flex-col w-full h-full">
<div class="flex items-center">
<Search placeholder="搜索" v-model="searchStr"></Search>
<Avatar
class="ml-7"
@click="() => $router.push('/userCenter')"
></Avatar>
</div>
<div class="flex items-center justify-between" style="margin-top: 26px">
<Title
:title="[
{
name: '藏品管理',
routerName: 'collectionManagement',
},
{
name: '专辑管理',
routerName: 'albumManagement',
},
{
name: $route.query.id as string,
},
]"
></Title>
<div class="flex items-center">
<syButton style="width: 113px" mode="elementBtn" size="large">
<Icon icon-name="icona-bianzu52" style="margin-right: 3px"></Icon>
下载模板</syButton
>
<syButton
style="width: 113px"
mode="elementBtn"
size="large"
@click="uploadRemarkDialogVisible = true"
>
<Icon icon-name="icona-bianzu43" style="margin-right: 3px"></Icon
>上传备注</syButton
>
<syButton
style="width: 113px"
mode="elementBtn"
size="large"
type="primary"
@click="uploadFileDialogVisible = true"
>
上传文件</syButton
>
</div>
</div>
<div class="flex-grow overflow-hidden relative" style="margin-top: 50px">
<Empty
v-if="!loading && tableData.length === 0"
class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
没有找到匹配结果，尝试其他关键词搜索
</Empty>
</div>
</div>
<UploadFileDialog
v-model:visible="uploadFileDialogVisible"
></UploadFileDialog>
<UploadRemarkDialog
v-model:visible="uploadRemarkDialogVisible"
></UploadRemarkDialog>
</LayoutVue>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { syButton } from "cqk-sy-ui";
import LayoutVue from "@/components/Layout.vue";
import Search from "@/components/Search/index.vue";
import Avatar from "@/components/Avatar/index.vue";
import Title from "@/components/Title.vue";
import { useTableData } from "@/components/Table/hooks";
import Empty from "@/components/Empty/index.vue";
import Icon from "@/components/Icon/index.vue";
import UploadFileDialog from "./components/UploadFileDialog/index.vue";
import UploadRemarkDialog from "./components/UploadRemarkDialog/index.vue";
const searchStr = ref("");
const uploadFileDialogVisible = ref(false);
const uploadRemarkDialogVisible = ref(false);
const scroll = (e: Event) => {
const target = e.target as HTMLElement;
console.log(
"scroll",
target.scrollTop,
target.scrollHeight,
target.clientHeight
);
if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
fetchNextPage();
}
};
const fetchTableData = ({
page,
page_size,
}: {
page: number;
page_size: number;
}) => {
/* 请求所需要的参数 */
page;
page_size;
// 当前状态
return new Promise<any>((r) => {
setTimeout(() => {
r({
total: 100,
data: "1"
.repeat(page_size)
.split("")
.map((i, index) => ({
name: index + (page - 1) * page_size + "____" + searchStr.value,
address: searchStr.value,
status: 2,
})),
});
}, 1);
});
};
const {
fetchNextPage: fetchNextPage,
tableData: tableData,
loading: loading,
refetch: refetch,
} = useTableData({
fetchData: fetchTableData,
});
const scrollToEnd = () => {
console.log("toend");
fetchNextPage();
};
</script>
<style lang="scss" scoped></style>
src/views/Collection/AlbumManagement/Album/AlbumList.vue
View file @ 974d8085
...@@ -4,9 +4,10 @@ ...@@ -4,9 +4,10 @@
class="flex-shrink-0" class="flex-shrink-0"
name="alksdf" name="alksdf"
:time="new Date().getTime()" :time="new Date().getTime()"
v-for="n in list" v-for="(n, index) in list"
@rename="renameAlbum" @rename="renameAlbum"
@delete="deleteAlbum" @delete="deleteAlbum"
@click="$emit('clickAlbum', { id: index })"
> >
</AlbumItem> </AlbumItem>
<RenameDialog <RenameDialog
...@@ -33,6 +34,8 @@ const renameShow = ref(false); ...@@ -33,6 +34,8 @@ const renameShow = ref(false);
const oldName = ref(""); const oldName = ref("");
const currentId = ref(""); const currentId = ref("");
const emit = defineEmits(["clickAlbum"]);
const renameAlbum = (albumMsg: any) => { const renameAlbum = (albumMsg: any) => {
renameShow.value = true; renameShow.value = true;
oldName.value = albumMsg.name; oldName.value = albumMsg.name;
......
src/views/Collection/AlbumManagement/CreateAlbumDialog/index.vue
View file @ 974d8085
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<syButton <syButton
mode="elementBtn" mode="elementBtn"
type="primary" type="primary"
style="height: 40px" style="height: 40px; margin-bottom: 42px"
class="w-full" class="w-full"
:disabled="confirmDisabled" :disabled="confirmDisabled"
@click="handleClickConfirm" @click="handleClickConfirm"
......
src/views/Collection/AlbumManagement/index.vue
View file @ 974d8085
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
}, },
{ {
name: '专辑管理', name: '专辑管理',
routerName: 'albumManagement',
}, },
]" ]"
></Title> ></Title>
...@@ -42,7 +41,17 @@ ...@@ -42,7 +41,17 @@
</Empty> </Empty>
<div class="h-full overflow-auto" @scroll="scroll"> <div class="h-full overflow-auto" @scroll="scroll">
<syScrollBar @scrollToEnd="scrollToEnd" ref="syScrollBarRef"> <syScrollBar @scrollToEnd="scrollToEnd" ref="syScrollBarRef">
<AlbumList :list="tableData"></AlbumList> <AlbumList
:list="tableData"
@click-album="
$router.push({
name: 'albumDetail',
query: {
id: $event.id,
},
})
"
></AlbumList>
</syScrollBar> </syScrollBar>
</div> </div>
</div> </div>
...@@ -98,7 +107,7 @@ const fetchTableData = ({ ...@@ -98,7 +107,7 @@ const fetchTableData = ({
r({ r({
total: 100, total: 100,
data: "1" data: "1"
.repeat(0) .repeat(page_size)
.split("") .split("")
.map((i, index) => ({ .map((i, index) => ({
name: index + (page - 1) * page_size + "____" + searchStr.value, name: index + (page - 1) * page_size + "____" + searchStr.value,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment