ow

WebVue/src/views/master/Preview.vue

@@ -0,0 +1,190 @@
+<template>
+    <div class="main-list" :style="{ height: (height - 150) + 'px' }">
+        <a-row style="margin-left:-8px;margin-top:-8px;">
+            <a-col :sm="24" :lg="24">
+                <section class="vertical" :style='imgStyle'>
+                    <photo-provider>
+                        <photo-consumer v-for="(src, index) in images" :key="src.DetailId" :src="src.FileName">
+                            <img :src="src.PublishName" class="view-box">
+                        </photo-consumer>
+                    </photo-provider>
+
+                </section>
+            </a-col>
+        </a-row>
+    </div>
+    <div class="main-page-footer">
+        <a-pagination v-model:current="result.Page" v-model:page-size="result.Limit" :total="result.Total"
+            @change="onPagination" :pageSizeOptions="pageSizeOptions"></a-pagination>
+    </div>
+</template>
+<script lang="ts" setup>
+import { watch, computed, inject, reactive, ref, VNode, h, unref, onMounted, onBeforeMount } from "vue";
+import { useRoute, useRouter } from 'vue-router'
+import { PublishPhotoDetailEntity } from "@/data/auto/publishPhotoDetailEntity";
+import publishPhotoService from "@/service/master/publishPhotoService";
+import { useWindowSize } from '@vueuse/core'
+import { bsInfo } from "@/utils/browser"
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
+import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
+import { DmsFileResultData } from "@/data/auto/dmsFileResultData";
+import dmsFileService from "@/service/master/dmsFileService";
+import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
+import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
+
+const { width, height } = useWindowSize()
+
+const images = ref<PublishPhotoDetailEntity[]>([]);
+
+
+const route = useRoute();
+const router = useRouter();
+
+
+const publishName = ref<string>(route.params.id as string)
+const mode = ref<string>(route.params.mode as string)
+
+const toIndex = ref<number>(0)
+const beforeChange = (from: number, to: number) => {
+    if (to > 0) {
+        toIndex.value = to;
+    }
+}
+
+const imgStyle = computed(() => {
+    if (!bsInfo.size.sm) {
+        return ' object-fit: cover;width:100%; height:' + (height.value - 260) + 'px;'
+    }
+    else {
+        return ' object-fit: cover;width:' + width.value + 'px; height:' + height.value + 'px;'
+    }
+})
+
+const pagingParams = ref<PagingParams>({ pageSize: bsInfo.size.sm ? 30 : 100, page: 1 });
+const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
+const pageSizeOptions = ref<string[]>(['30', '60', '90', '100', '120']);
+
+result.value.Page = pagingParams.value.page ?? 1;
+result.value.Limit = pagingParams.value.pageSize;
+
+onMounted(async () => {
+    if (mode.value == "list") {
+        findData(1);
+    }
+    else if (publishName.value && publishName.value.length > 0) {
+        publishPhotoService.FindPublishPhotoDetailByPublishName(publishName.value).then(res => {
+            for (let i = 0; i <res.length; i++) {
+                res[i].PublishName = res[i].FileName;
+            }
+            images.value = res;
+        });
+    }
+    else {
+        publishPhotoService.FindPublishPhotoDetail().then(res => {
+            for (let i = 0; i <res.length; i++) {
+                res[i].PublishName = res[i].FileName;
+            }
+            images.value = res;
+        });
+    }
+})
+
+const findData = async (params: number) => {
+    try {
+        let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
+        c.page = params;
+        c.limit = pagingParams.value.pageSize;
+        let filter: SearchFilter;
+        filter = new SearchFilter();
+        filter.Column = DmsFileUploadViewDisplayData.DB_FILE_PATH;
+        filter.Type = "SingleSelection";
+        filter.Operator = "single";
+        filter.Value = publishName.value;
+        c.Filter.push(filter);
+        filter = new SearchFilter();
+        filter.Column = DmsFileUploadViewDisplayData.DB_FILE_TYPE;
+        filter.Type = "SingleSelection";
+        filter.Operator = "single";
+        filter.Value = FileTypePolicy.PHOTO;
+        c.Filter.push(filter);
+        let dr: DmsFileResultData = await dmsFileService.FindBySearchCriteria(c);
+        result.value.Total = dr.Total;
+        result.value.Page = dr.Page;
+
+        if (dr && dr.Datas && dr.Datas.length > 0) {
+
+            images.value = [];
+            let detail: PublishPhotoDetailEntity;
+            for (let i = 0; i < dr.Datas.length; i++) {
+                detail = new PublishPhotoDetailEntity()
+                detail.FileName = dr.Datas[i].FormattedPic;
+                detail.Notice = dr.Datas[i].LandscapeIndc;
+                detail.PublishName = dr.Datas[i].Url;
+                images.value.push(detail);
+            }
+        }
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+const onPagination = (async (params: number) => {
+    findData(params);
+});
+
+const showSizeChange = (async (current: number, size: number) => {
+    pagingParams.value.page = 1;
+    pagingParams.value.pageSize = size;
+    result.value.Page = 1;
+    result.value.Limit = size;
+});
+
+</script>
+
+
+<style lang="less" scoped>
+.vertical {
+    position: relative;
+    z-index: 10;
+}
+
+.main-list {
+    /* 设置高度 */
+    overflow-y: auto;
+    /* 显示纵向滚动条 */
+
+    background-color: bisque;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 8px;
+    margin-right: 8px;
+    background-image: url('/images/main/p3.png');
+    background-size: cover;
+    width: 100%;
+}
+
+.view-box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    object-fit: cover;
+}
+
+.main-page-footer {
+    background-color: aliceblue;
+    z-index: 999;
+    padding-left: 8px;
+    padding-right: 18px;
+    padding-top: 8px;
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    bottom: 0;
+    border-top: 1px solid silver;
+}
+</style>