1275 lines
38 KiB
Vue
1275 lines
38 KiB
Vue
<template>
|
|
<a-spin size="large" :spinning="loading" :tip="spinTip">
|
|
<search
|
|
@on-submit="onSubmit"
|
|
@on-print="onPrint"
|
|
@on-reset="onReset"
|
|
@use-pagination="onPagination"
|
|
:scrollx="200"
|
|
@handle-change-bind-value="handleChangeBindValue"
|
|
:is-modal="isModal"
|
|
:loading="loading"
|
|
:pagination="result"
|
|
:rowSelectionType="selectionType"
|
|
@on-select-change="onSelectChange"
|
|
>
|
|
<template #control>
|
|
<a-button
|
|
type="primary"
|
|
v-if="canCreate && !isModal"
|
|
:icon="h(FolderAddOutlined)"
|
|
@click.prevent="onCreate"
|
|
>新增</a-button
|
|
>
|
|
</template>
|
|
|
|
<template #headerCell="{ column }">
|
|
<template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
|
|
<span
|
|
style="color: darkgoldenrod; font-size: large; cursor: pointer"
|
|
@click.prevent="onChangeFolder(rootPath)"
|
|
>
|
|
<LaptopOutlined
|
|
style="color: darkgoldenrod; font-size: larger"
|
|
title="返回顶层"
|
|
/>返回顶层
|
|
</span>
|
|
<span
|
|
style="color: darkgoldenrod; font-size: large; cursor: pointer"
|
|
@click.prevent="onLastFolder()"
|
|
>
|
|
<RollbackOutlined
|
|
style="color: darkgoldenrod; font-size: larger; margin-left: 16px"
|
|
title="返回上层"
|
|
/>返回上层
|
|
</span>
|
|
</template>
|
|
</template>
|
|
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
|
|
<template v-if="!fileTypePolicy.isImage(record.OrderKey)">
|
|
<template v-if="record.IsDirectoryIndc == 'Y'">
|
|
<a-card hoverable style="width: 300px">
|
|
<a-card-meta>
|
|
<template #description>
|
|
<span
|
|
style="
|
|
color: darkgoldenrod;
|
|
margin-left: 4pxr;
|
|
cursor: pointer;
|
|
font-size: 26px;
|
|
"
|
|
@click.prevent="onChangeFolder(record.FileName)"
|
|
>
|
|
<FolderOutlined
|
|
style="color: darkgoldenrod; font-size: 48px"
|
|
title="打开文件夹"
|
|
/>{{ record.OrgFileName }}
|
|
</span>
|
|
</template>
|
|
</a-card-meta>
|
|
<template #actions>
|
|
<template v-if="record.PermissionIndc == 'Y'">
|
|
<span style="font-size: 24px">
|
|
<CheckCircleTwoTone
|
|
style="color: darkgoldenrod; font-size: larger"
|
|
/>有权限
|
|
</span>
|
|
</template>
|
|
<template v-if="record.PermissionIndc == 'N'">
|
|
<span style="font-size: 24px">
|
|
<CloseCircleOutlined
|
|
style="color: rgb(19, 185, 190); font-size: larger"
|
|
/>无权限
|
|
</span>
|
|
</template>
|
|
<template
|
|
v-if="
|
|
record.FavoriteIndc == 'Y' && record.PermissionIndc == 'Y'
|
|
"
|
|
>
|
|
<span
|
|
style="font-size: 24px; cursor: pointer; color: salmon"
|
|
@click.prevent="
|
|
onDeleteFamilyFolderFavorite(record.FolderName)
|
|
"
|
|
>
|
|
<heart-two-tone
|
|
two-tone-color="salmon"
|
|
style="font-size: 24px"
|
|
/>已分享
|
|
</span>
|
|
</template>
|
|
<template
|
|
v-if="
|
|
record.FavoriteIndc == 'N' && record.PermissionIndc == 'Y'
|
|
"
|
|
>
|
|
<span
|
|
style="font-size: 24px; cursor: pointer"
|
|
@click.prevent="
|
|
onInsertFamilyFolderFavorite(record.FolderName)
|
|
"
|
|
>
|
|
<LoginOutlined
|
|
two-tone-color="#0010"
|
|
style="font-size: 24px"
|
|
/>未分享
|
|
</span>
|
|
</template>
|
|
<template v-if="record.PermissionIndc == 'N'">
|
|
<span style="font-size: 24px">
|
|
<LoginOutlined
|
|
two-tone-color="green"
|
|
style="font-size: 24px"
|
|
/>不能分享
|
|
</span>
|
|
</template>
|
|
</template>
|
|
</a-card>
|
|
</template>
|
|
<template v-else-if="fileTypePolicy.isVideo(record.OrderKey)">
|
|
<a-card style="width: 300px">
|
|
<template #cover>
|
|
<img
|
|
style="height: 220px"
|
|
:src="record.Url.replace('.m3u8', '.png')"
|
|
:title="record.OrgFileName"
|
|
/>
|
|
</template>
|
|
<a-card-meta>
|
|
<template #description>
|
|
<a-flex>
|
|
<cust-icon-font
|
|
size="26"
|
|
type="icon-foldervideo"
|
|
@click.prevent="
|
|
onUrlVideoPlay(record.Url, record.OrgFileName)
|
|
"
|
|
/>
|
|
<span
|
|
style="
|
|
color: darkgoldenrod;
|
|
margin-left: 4pxr;
|
|
margin-top: 2px;
|
|
"
|
|
>
|
|
{{ record.OrgFileName }}
|
|
</span>
|
|
<cust-icon-font
|
|
size="26"
|
|
type="icon-mp3-play"
|
|
@click.prevent="onVideoPlay(record.FileId)"
|
|
/>
|
|
</a-flex>
|
|
</template>
|
|
</a-card-meta>
|
|
</a-card>
|
|
</template>
|
|
<template v-else-if="fileTypePolicy.isAudio(record.OrderKey)">
|
|
<a-card hoverable style="width: 300px">
|
|
<a-flex>
|
|
<cust-icon-font
|
|
size="60"
|
|
type="icon-foldermp3"
|
|
@click.prevent="onPlayAudio(toFamilyView(record))"
|
|
/>
|
|
<span
|
|
style="
|
|
color: darkgoldenrod;
|
|
margin-left: 4pxr;
|
|
margin-top: 10px;
|
|
"
|
|
>
|
|
{{ record.OrgFileName }}
|
|
</span>
|
|
<div
|
|
v-if="record.IsPlay == 'Y'"
|
|
style="margin-left: 16px; height: 60px; width: 60px"
|
|
:class="record.IsPause == '' ? 'rotating-element' : ''"
|
|
>
|
|
<cust-icon-font
|
|
size="60"
|
|
type="icon-playmp3"
|
|
v-if="record.IsPause == ''"
|
|
@click.prevent="onPauseAudio(toFamilyView(record))"
|
|
/>
|
|
<cust-icon-font
|
|
size="54"
|
|
type="icon-mp3-play"
|
|
style="color: #ff7878"
|
|
v-if="record.IsPlay == 'Y' && record.IsPause == 'Y'"
|
|
@click.prevent="onContinueAudio(toFamilyView(record))"
|
|
/>
|
|
</div>
|
|
</a-flex>
|
|
</a-card>
|
|
</template>
|
|
<template v-else>
|
|
<DownloadOutlined
|
|
style="
|
|
color: rgb(19, 185, 190);
|
|
font-size: larger;
|
|
margin-right: 12px;
|
|
"
|
|
title="下载"
|
|
@click.prevent="
|
|
onDownloadFile(record.FileId, record.OrgFileName)
|
|
"
|
|
/>
|
|
<span>{{ record.OrgFileName }} </span>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<a-card hoverable style="width: 300px">
|
|
<template #cover>
|
|
<img
|
|
style="height: 260px; object-fit: cover"
|
|
:src="record.Url"
|
|
:title="record.OrgFileName"
|
|
@click="onPreviewFile(record.CreatedBy, record.OrderKey)"
|
|
/>
|
|
</template>
|
|
<a-card-meta>
|
|
<template #description>
|
|
<span
|
|
style="color: darkgoldenrod; margin-left: 4pxr"
|
|
@click.prevent="
|
|
onViewPictureFile(record.FileId, record.OrgFileName)
|
|
"
|
|
>
|
|
<cust-icon-font size="26" type="icon-source-pic" />
|
|
{{ record.OrgFileName }}
|
|
</span>
|
|
</template>
|
|
</a-card-meta>
|
|
</a-card>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div v-if="!isModal" class="page-footer">
|
|
<a-row :gutter="24">
|
|
<a-col :lg="24" :sm="24">
|
|
<a-row v-if="!isEdit" :gutter="[16, 8]">
|
|
<a-space>
|
|
<a-button
|
|
type="primary"
|
|
v-if="canAmend"
|
|
:icon="h(FileImageOutlined)"
|
|
:disabled="!(keys && keys.length > 0)"
|
|
@click.prevent="onViewPic"
|
|
>预览</a-button
|
|
>
|
|
<a-popconfirm
|
|
:disabled="
|
|
!(
|
|
keys &&
|
|
keys.length > 0 &&
|
|
keys[0].PermissionIndc == 'Y'
|
|
)
|
|
"
|
|
title="确定是否删除这条记录?"
|
|
ok-text="是"
|
|
cancel-text="否"
|
|
@confirm="onDelete"
|
|
>
|
|
<a-button
|
|
type="primary"
|
|
danger
|
|
:icon="h(DeleteOutlined)"
|
|
:disabled="
|
|
!(
|
|
keys &&
|
|
keys.length > 0 &&
|
|
keys[0].PermissionIndc == 'Y'
|
|
)
|
|
"
|
|
v-if="canDelete"
|
|
>删除</a-button
|
|
>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
</search>
|
|
<a-image
|
|
:width="1024"
|
|
:style="{ display: 'none' }"
|
|
:preview="{
|
|
visible,
|
|
onVisibleChange: setPicVisible,
|
|
}"
|
|
:src="imageSrc"
|
|
/>
|
|
<dmsFolder @on-submit="onReload"></dmsFolder>
|
|
<videoPlay></videoPlay>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
reactive,
|
|
inject,
|
|
onUnmounted,
|
|
onMounted,
|
|
ref,
|
|
unref,
|
|
provide,
|
|
h,
|
|
} from "vue";
|
|
import { BindOption } from "@/data/custom/bindOption";
|
|
import { SelectOption } from "@/data/auto/selectOption";
|
|
import search from "@/components/basic/Search.vue";
|
|
import {
|
|
DeleteOutlined,
|
|
LoginOutlined,
|
|
LaptopOutlined,
|
|
CheckCircleTwoTone,
|
|
RollbackOutlined,
|
|
CheckSquareTwoTone,
|
|
NotificationOutlined,
|
|
PictureOutlined,
|
|
HeartTwoTone,
|
|
CloseCircleOutlined,
|
|
FolderAddOutlined,
|
|
DownloadOutlined,
|
|
FolderOutlined,
|
|
FileImageOutlined,
|
|
CrownOutlined,
|
|
} from "@ant-design/icons-vue";
|
|
import { DmsFileEntity } from "@/data/auto/dmsFileEntity";
|
|
import { DmsFileResultData } from "@/data/auto/dmsFileResultData";
|
|
import { FamilyGroupFolderEntity } from "@/data/auto/familyGroupFolderEntity";
|
|
import { FamilyDmsFileViewEntity } from "@/data/auto/familyDmsFileViewEntity";
|
|
import { SearchFilter } from "@/data/auto/searchFilter";
|
|
import dmsFileService from "@/service/master/dmsFileService";
|
|
import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
|
|
import FamilyGroupService from "@/service/master/familyGroupService";
|
|
import publishPhotoService from "@/service/master/publishPhotoService";
|
|
import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
|
|
import {
|
|
PermissionContext,
|
|
usePermissionContext,
|
|
} from "@/hooks/PermissionContext";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
import { useBindOption } from "@/hooks/useBindOption";
|
|
import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
|
|
import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
|
|
import { notification } from "ant-design-vue";
|
|
import { GridColumnInfo } from "@/data/auto/gridColumnInfo";
|
|
import { useGridColumnInfo } from "@/hooks/gridColumnInfo";
|
|
import dmsFolder from "./DmsFolderModal.vue";
|
|
|
|
import { useLoginProfileStore } from "@/store/modules/loginProfile";
|
|
import type { UploadProps } from "ant-design-vue";
|
|
import { WebSitePolicy } from "@/policy/custom/webSitePolicy";
|
|
import { forEach, orderBy } from "lodash-es";
|
|
import { bsInfo } from "@/utils/browser";
|
|
import axios from "axios";
|
|
import { getuid } from "process";
|
|
import VideoPlay from "./PlayVideo.vue";
|
|
import {
|
|
enquiryMethodKey,
|
|
searchCriteriaManagerKey,
|
|
masterOperationToEnquiryMethodKey,
|
|
MasterOperationToEnquiryModelOption,
|
|
layoutProviderMethodKey,
|
|
} from "@/injections";
|
|
import { useOrderedChildren } from "@/hooks/use-ordered-children";
|
|
import { SearchCriteriaContext } from "@/injections";
|
|
import fileTypePolicy from "@/policy/custom/fileTypePolicy";
|
|
import { Howl, Howler } from "howler";
|
|
import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
|
|
|
|
//page from-----------------------------------------------------------------------------------------------------------------------------------
|
|
//================inject================
|
|
//报表名称
|
|
const layoutProviderMethod = inject(layoutProviderMethodKey);
|
|
|
|
//当前是弹出的Modal,还是Page
|
|
const isModal = ref(inject("isModalFamilyDmsFile", false) as boolean);
|
|
//初始化查询条件的值
|
|
const initBindOptions = ref(
|
|
inject("initBindOptionsFamilyDmsFile", []) as BindOption[],
|
|
);
|
|
//记录单选还是多选
|
|
const selectionType = ref(
|
|
inject("selectionTypeFamilyDmsFile", "radio") as string,
|
|
);
|
|
|
|
//================inject================
|
|
|
|
const widthColumn = ref<string>("3%");
|
|
if (bsInfo.size.sm) {
|
|
widthColumn.value = "8%";
|
|
} else {
|
|
widthColumn.value = "3%";
|
|
}
|
|
const spinTip = ref<string>("加載中...");
|
|
const loading = ref<boolean>(false);
|
|
const isEdit = ref<boolean>(false);
|
|
const canView = ref<boolean>(false);
|
|
const canAmend = ref<boolean>(false);
|
|
const canDelete = ref<boolean>(false);
|
|
const canCreate = ref<boolean>(false);
|
|
const modalTitle = ref<string>("新建文件夹");
|
|
const rootPath = ref<string>("");
|
|
const imageSrc = ref<string>("");
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const fileList = ref<UploadProps["fileList"]>([]);
|
|
const uploadUrl = ref<string>(WebSitePolicy.WebApiRoot + "DmsFile/UploadFile");
|
|
if (process.env.NODE_ENV === "development") {
|
|
uploadUrl.value = WebSitePolicy.WebApiRootDev + "/DmsFile/UploadFile";
|
|
} else {
|
|
uploadUrl.value = WebSitePolicy.WebApiRoot + "/DmsFile/UploadFile";
|
|
}
|
|
const previousFilePath = ref<string>("");
|
|
const currFilePath = ref<string>("");
|
|
const headers = ref({
|
|
Authorization: useLoginProfileStore().getToken(),
|
|
"Content-Type": "multipart/form-data",
|
|
FilePath: currFilePath.value,
|
|
});
|
|
|
|
const columns = ref([
|
|
{
|
|
title: "",
|
|
dataIndex: FamilyDmsFileViewEntity.URL,
|
|
sorter: false,
|
|
width: "50%",
|
|
sequence: 1,
|
|
hidden: "N",
|
|
},
|
|
]);
|
|
|
|
const viewOption = {
|
|
Value: "default",
|
|
SelectOptions: [{ BindValue: "default", DisplayName: "默认" }],
|
|
Columns: [{ BindValue: "default", BindColumn: columns }],
|
|
};
|
|
|
|
const bindOptions = ref<BindOption[]>([]);
|
|
const datas = ref<FamilyDmsFileViewDisplayData[]>([]);
|
|
const pagingParams = ref<PagingParams>({ pageSize: 20, page: 1 });
|
|
const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
|
|
|
|
const data = ref<DmsFileResultData>(new DmsFileResultData());
|
|
const currentFilter = ref<SearchFilter[]>([]);
|
|
const isSearched = ref<boolean>(false);
|
|
const currentSearchCriteria = ref<DmsFileSearchCriteria>(
|
|
new DmsFileSearchCriteria(),
|
|
);
|
|
|
|
const keys = ref<FamilyDmsFileViewDisplayData[]>([]);
|
|
const dmsFolderModal = ref<boolean>(false);
|
|
const dmsFolderTitle = ref<string>("新建文件夹");
|
|
const dmsFolderIsRename = ref<boolean>(false);
|
|
const dmsFolderIsMove = ref<boolean>(false);
|
|
const entity = ref<DmsFileEntity>(new DmsFileEntity());
|
|
const videoPlayModal = ref<boolean>(false);
|
|
const videoSrc = ref<string>("");
|
|
const videoType = ref<string>("");
|
|
const videoPlayTitle = ref<string>("");
|
|
const currentFamilyName = ref<string>("");
|
|
|
|
const {
|
|
children: items,
|
|
addChild: addItem,
|
|
removeChild: removeItem,
|
|
} = useOrderedChildren<SearchCriteriaContext>();
|
|
|
|
//================provide================
|
|
//初始化查询条件UI
|
|
|
|
provide("dmsFolderModal", dmsFolderModal);
|
|
provide("dmsFolderTitle", dmsFolderTitle);
|
|
provide("dmsFolderIsRename", dmsFolderIsRename);
|
|
provide("dmsFolderIsMove", dmsFolderIsMove);
|
|
provide("dmsFolderIsFamilyGroup", true);
|
|
provide("dmsFolderFamilyName", currentFamilyName);
|
|
provide("DmsFileEntity", entity);
|
|
|
|
provide("videoPlayModal", videoPlayModal);
|
|
provide("videoPlayTitle", videoPlayTitle);
|
|
provide("videoSrc", videoSrc);
|
|
provide("videoType", videoType);
|
|
provide(enquiryMethodKey, {
|
|
getLayoutSetting: () => {
|
|
return {
|
|
controlLeft: 16,
|
|
controlRight: 8,
|
|
space: true,
|
|
soltLeft: 24,
|
|
soltRight: 24,
|
|
};
|
|
},
|
|
getBindOptions: () => {
|
|
return unref(bindOptions);
|
|
},
|
|
getViewOption: () => {
|
|
return unref(viewOption);
|
|
},
|
|
getDatas: () => {
|
|
return datas;
|
|
},
|
|
});
|
|
|
|
provide(
|
|
searchCriteriaManagerKey,
|
|
reactive({
|
|
items,
|
|
addItem,
|
|
removeItem,
|
|
}),
|
|
);
|
|
//================provide================
|
|
|
|
const sound = ref();
|
|
|
|
// 表格 bodyCell 的 record 被透传为 Record<string, any>，转成具体展示类型
|
|
const toFamilyView = (r: Record<string, any>): FamilyDmsFileViewDisplayData =>
|
|
r as FamilyDmsFileViewDisplayData;
|
|
|
|
onUnmounted(() => {
|
|
sound.value?.stop();
|
|
});
|
|
|
|
const play = (src: string) => {
|
|
sound.value?.stop();
|
|
if (!src || src == undefined || src == "") {
|
|
return;
|
|
}
|
|
|
|
sound.value = new Howl({
|
|
src: src,
|
|
volume: 0.5,
|
|
autoplay: true,
|
|
loop: false,
|
|
html5: true,
|
|
preload: true,
|
|
onload: () => {
|
|
// console.log('loaded');
|
|
},
|
|
onplay: () => {
|
|
// console.log('play');
|
|
},
|
|
onpause: () => {
|
|
// console.log('pause');
|
|
},
|
|
onend: () => {
|
|
// console.log('end');
|
|
datas.value.forEach((element) => {
|
|
element.IsPlay = "";
|
|
});
|
|
},
|
|
});
|
|
|
|
sound.value.play();
|
|
};
|
|
|
|
const onPauseAudio = (record: FamilyDmsFileViewDisplayData) => {
|
|
record.IsPause = "Y";
|
|
sound.value.pause();
|
|
};
|
|
|
|
const onContinueAudio = (record: FamilyDmsFileViewDisplayData) => {
|
|
record.IsPause = "";
|
|
sound.value.play();
|
|
};
|
|
|
|
const onPlayAudio = (record: FamilyDmsFileViewDisplayData) => {
|
|
datas.value.forEach((element) => {
|
|
if (element.FileId == record.FileId && element.IsPlay == "Y") {
|
|
element.IsPlay = "";
|
|
} else if (
|
|
element.FileId == record.FileId &&
|
|
(element.IsPlay == "" ||
|
|
element.IsPlay == null ||
|
|
element.IsPlay == undefined)
|
|
) {
|
|
element.IsPlay = "Y";
|
|
} else {
|
|
element.IsPlay = "";
|
|
}
|
|
record.IsPause = "";
|
|
});
|
|
|
|
if (record.IsPlay == "") {
|
|
sound.value?.stop();
|
|
return;
|
|
}
|
|
|
|
play(record.Url);
|
|
};
|
|
|
|
defineExpose({
|
|
keys,
|
|
initBindOptions,
|
|
});
|
|
|
|
onMounted(async () => {
|
|
let pContext: PermissionContext = usePermissionContext();
|
|
canView.value = pContext.canView(route.meta.permission as string);
|
|
canAmend.value = pContext.canAmend(route.meta.permission as string);
|
|
canDelete.value = pContext.canDelete(route.meta.permission as string);
|
|
canCreate.value = pContext.canCreate(route.meta.permission as string);
|
|
|
|
await initBindOption("");
|
|
|
|
onSearchByFilePath(rootPath.value);
|
|
});
|
|
|
|
const onViewPreview = async () => {
|
|
router.push({
|
|
name: "Preview",
|
|
params: { id: currentFamilyName.value, mode: "view" },
|
|
});
|
|
};
|
|
|
|
const onSelectChange = (selected: FamilyDmsFileViewDisplayData[]) => {
|
|
keys.value = selected;
|
|
};
|
|
|
|
const onPoublicFile = async (fid: number) => {
|
|
// publishPhotoService.InsertPublishPhotoDetailByFamilyGroup(fid).then(() => {
|
|
// notification.info({
|
|
// message: '系统提示：',
|
|
// description: '图片已发布',
|
|
// placement: "topRight",
|
|
// });
|
|
// });
|
|
};
|
|
|
|
const onChangeFolder = async (fvalue: string) => {
|
|
onSearchByFilePath(fvalue);
|
|
};
|
|
|
|
const onLastFolder = async () => {
|
|
if (!datas.value || datas.value.length == 0) {
|
|
onSearchByFilePath(previousFilePath.value);
|
|
} else {
|
|
onPreviousFolder();
|
|
}
|
|
};
|
|
|
|
const onPreviousFolder = async () => {
|
|
let filePath: string = "";
|
|
if (datas.value && datas.value.length > 0) filePath = datas.value[0].FilePath;
|
|
dmsFileService.FindFolderNameParentByFolderName(filePath).then((res) => {
|
|
if (res && res.length > 0) onSearchByFilePath(res);
|
|
});
|
|
};
|
|
|
|
const onVideoPlay = async (fid: number) => {
|
|
//从服务器取出源视频
|
|
dmsFileService
|
|
.FindSourceVideoPath(fid)
|
|
.then((res) => {
|
|
videoType.value = "video/mp4";
|
|
videoSrc.value = res;
|
|
videoPlayModal.value = true;
|
|
})
|
|
.catch(() => {
|
|
videoPlayModal.value = false;
|
|
});
|
|
};
|
|
|
|
const DownloadFileCombine = (
|
|
fs: string[],
|
|
mergedData: Uint8Array,
|
|
index: number,
|
|
ttl: number,
|
|
total: number,
|
|
preview: boolean,
|
|
fname: string,
|
|
) => {
|
|
loading.value = true;
|
|
fs[fs.length - 2] = index.toString();
|
|
spinTip.value = "加载中(" + index + "/" + total + ")...";
|
|
dmsFileService
|
|
.DownloadFileCombine(fs.toString().replace(/,/g, "-"))
|
|
.then((res) => {
|
|
mergedData.set(new Uint8Array(res), ttl);
|
|
if (index < total) {
|
|
DownloadFileCombine(
|
|
fs,
|
|
mergedData,
|
|
index + 1,
|
|
ttl + res.byteLength,
|
|
total,
|
|
preview,
|
|
fname,
|
|
);
|
|
} else if (index == total) {
|
|
loading.value = false;
|
|
spinTip.value = "加载中...";
|
|
const downloadUrl = window.URL.createObjectURL( new Blob([mergedData as unknown as BlobPart]),);
|
|
imageSrc.value = downloadUrl;
|
|
if (!preview) {
|
|
const link = document.createElement("a");
|
|
link.href = downloadUrl;
|
|
link.setAttribute("download", fname);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
} else {
|
|
setPicVisible(true);
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
spinTip.value = "加载中...";
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
const onDownloadFile = async (fid: number, fname: string) => {
|
|
GetOrgPictureFile(fid, fname, false);
|
|
};
|
|
|
|
const onPreviewFile = async (username: string, orderKey: string) => {
|
|
loading.value = true;
|
|
getPreviewFile(username, orderKey);
|
|
};
|
|
|
|
const getPreviewFile = (username: string, fname: string) => {
|
|
let dms: DmsFileEntity = new DmsFileEntity();
|
|
dms.CreatedBy = username;
|
|
dms.OrderKey = fname;
|
|
dmsFileService
|
|
.DownloadFilePreview(dms)
|
|
.then((res) => {
|
|
const downloadUrl = window.URL.createObjectURL(new Blob([res]));
|
|
imageSrc.value = downloadUrl;
|
|
loading.value = false;
|
|
setPicVisible(true);
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
const GetOrgPictureFile = async (
|
|
fid: number,
|
|
fname: string,
|
|
preview: boolean,
|
|
) => {
|
|
if (fileTypePolicy.isVideo(fname)) {
|
|
onVideoPlay(keys.value[0].FileId);
|
|
return;
|
|
}
|
|
if (preview && !fileTypePolicy.isImage(fname)) {
|
|
onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
dmsFileService
|
|
.FindByKey(fid)
|
|
.then((res) => {
|
|
let fs: string[] = res.OrderKey.split("-");
|
|
let index: string = fs[fs.length - 2];
|
|
let total: string = fs[fs.length - 1].split(".")[0];
|
|
var mergedData = new Uint8Array((res.FileSize + 1) * 1024);
|
|
let ttl: number = 0;
|
|
fs[fs.length - 2] = "1";
|
|
spinTip.value = "加载中(1/" + total + ")...";
|
|
DownloadFileCombine(
|
|
fs,
|
|
mergedData,
|
|
1,
|
|
ttl,
|
|
parseInt(total),
|
|
preview,
|
|
fname,
|
|
);
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
const onUrlVideoPlay = (url: string, title: string) => {
|
|
sound.value?.stop();
|
|
datas.value.forEach((element) => {
|
|
element.IsPlay = "";
|
|
});
|
|
videoType.value = "m3u8";
|
|
videoSrc.value = url;
|
|
videoPlayModal.value = true;
|
|
videoPlayTitle.value = title;
|
|
};
|
|
|
|
const onViewPictureFile = async (fid: number, fname: string) => {
|
|
GetOrgPictureFile(fid, fname, true);
|
|
};
|
|
|
|
const onDeleteFamilyFolderFavorite = async (folderName: string) => {
|
|
FamilyGroupService.DeleteFamilyFolderFavorite(folderName).then(() => {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "收藏分享成功移除",
|
|
placement: "topRight",
|
|
});
|
|
onReload();
|
|
});
|
|
};
|
|
|
|
const onInsertFamilyFolderFavorite = async (folderName: string) => {
|
|
FamilyGroupService.InsertFamilyFolderFavorite(folderName).then(() => {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "收藏分享成功加入",
|
|
placement: "topRight",
|
|
});
|
|
onReload();
|
|
});
|
|
};
|
|
|
|
const onSearchByFilePath = async (fvalue: string) => {
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
fvalue,
|
|
"",
|
|
[fvalue],
|
|
false,
|
|
);
|
|
previousFilePath.value = unref(currFilePath.value);
|
|
currFilePath.value = fvalue;
|
|
|
|
currentSearchCriteria.value.Filter = [];
|
|
let filter: SearchFilter;
|
|
filter = new SearchFilter();
|
|
filter.Column = FamilyDmsFileViewEntity.DB_FAMILY_NAME;
|
|
filter.Type = "SingleSelection";
|
|
filter.Operator = "single";
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
)[0];
|
|
filter.Value = bindOption.Value;
|
|
|
|
currentSearchCriteria.value.Filter.push(filter);
|
|
filter = new SearchFilter();
|
|
filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
|
|
filter.Type = "SingleSelection";
|
|
filter.Operator = "single";
|
|
filter.Value = fvalue;
|
|
currentSearchCriteria.value.Filter.push(filter);
|
|
|
|
await findBySearchCriteria(unref(currentSearchCriteria));
|
|
};
|
|
|
|
const onReset = () => {
|
|
keys.value = [];
|
|
result.value.Total = 0;
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
};
|
|
|
|
const onViewPic = () => {
|
|
if (keys.value.length == 0) return;
|
|
if (keys.value[0].IsDirectoryIndc == "Y") {
|
|
onChangeFolder(keys.value[0].FileName);
|
|
} else if (
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("png") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("jpg") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("jpeg") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("gif") > 0
|
|
) {
|
|
onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
|
|
} else if (
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("mp4") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("mp3") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("rm") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("mpeg") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("mov") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("wmv") > 0 ||
|
|
keys.value[0].OrgFileName.toLowerCase().indexOf("avi") > 0
|
|
) {
|
|
onVideoPlay(keys.value[0].FileId);
|
|
} else {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "未知格式无法预览",
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
};
|
|
|
|
const visible = ref<boolean>(false);
|
|
const setPicVisible = (value: boolean): void => {
|
|
visible.value = value;
|
|
};
|
|
|
|
const onCreate = () => {
|
|
if (currFilePath.value == currentFamilyName.value) {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "群组一级目录,请在群组管理创建.",
|
|
placement: "topRight",
|
|
});
|
|
return;
|
|
}
|
|
|
|
dmsFolderTitle.value = "新建文件夹";
|
|
dmsFolderIsRename.value = false;
|
|
dmsFolderIsMove.value = false;
|
|
dmsFolderModal.value = true;
|
|
|
|
entity.value = new DmsFileEntity();
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
)[0];
|
|
|
|
entity.value.FilePath = bindOption.SelectOptions.filter(
|
|
(x) => x.BindValue == bindOption.Value,
|
|
)[0].DisplayName;
|
|
entity.value.OrgFileName = bindOption.Value;
|
|
|
|
previousFilePath.value = unref(currFilePath.value);
|
|
currFilePath.value = bindOption.Value;
|
|
};
|
|
|
|
const onDelete = async () => {
|
|
let fgfs: FamilyGroupFolderEntity[] = [];
|
|
let fgf: FamilyGroupFolderEntity;
|
|
keys.value.forEach((element) => {
|
|
fgf = new FamilyGroupFolderEntity();
|
|
fgf.FamilyName = element.FamilyName;
|
|
fgf.FolderName = keys.value[0].FolderName;
|
|
fgf.TopFolderName = element.TopFolderName;
|
|
fgf.FilePath = element.FilePath;
|
|
fgfs.push(fgf);
|
|
});
|
|
|
|
await dmsFileService.DeleteFamilyGroupFolder(fgfs).then(() => {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "记录删除成功",
|
|
placement: "topRight",
|
|
});
|
|
onReload();
|
|
});
|
|
};
|
|
|
|
const setBindOptionValue = (
|
|
bindValue: string,
|
|
value: string,
|
|
value1: string,
|
|
values: string[],
|
|
disabled: boolean,
|
|
) => {
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == bindValue,
|
|
)[0];
|
|
if (!bindOption) return;
|
|
bindOption.Value = value;
|
|
bindOption.Value1 = value1;
|
|
bindOption.Values = values;
|
|
bindOption.disabled = disabled;
|
|
};
|
|
|
|
const setBindSelectOption = (
|
|
bindValue: string,
|
|
SelectOptions: SelectOption[],
|
|
) => {
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == bindValue,
|
|
)[0];
|
|
if (!bindOption) return;
|
|
bindOption.SelectOptions = SelectOptions;
|
|
};
|
|
|
|
//初始化查询条件
|
|
const initBindOption = async (familyName: string) => {
|
|
let ubo = useBindOption();
|
|
bindOptions.value = [];
|
|
bindOptions.value.splice(0, bindOptions.value.length);
|
|
let bindOption: BindOption = ubo.getBindOption(
|
|
FamilyDmsFileViewEntity.DB_ORG_FILE_NAME,
|
|
"名称",
|
|
SearchFilterTypePolicy.TEXT,
|
|
SearchFilterOperatorPolicy.CONTAIN,
|
|
);
|
|
bindOptions.value.push(bindOption);
|
|
let fps: SelectOption[] = [];
|
|
fps.push({ BindValue: "", DisplayName: "" });
|
|
|
|
let rps: SelectOption[] = await dmsFileService.FindFamilyDmsFolders();
|
|
if (rps && rps.length > 0) {
|
|
if (familyName && familyName.length > 0) {
|
|
currentFamilyName.value = rootPath.value = familyName;
|
|
} else {
|
|
currentFamilyName.value = rootPath.value = rps[0].BindValue;
|
|
}
|
|
fps = await dmsFileService.FindFamilyDmsFoldersByFamilyName(
|
|
currentFamilyName.value,
|
|
);
|
|
}
|
|
|
|
bindOption = ubo.getBindSelectOption(
|
|
FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
"当前群组",
|
|
SearchFilterTypePolicy.SINGLE_SELECTION,
|
|
SearchFilterOperatorPolicy.SINGLE,
|
|
rps,
|
|
);
|
|
bindOptions.value.push(bindOption);
|
|
|
|
bindOption = ubo.getBindSelectOption(
|
|
FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
"当前路径",
|
|
SearchFilterTypePolicy.SINGLE_SELECTION,
|
|
SearchFilterOperatorPolicy.SINGLE,
|
|
fps,
|
|
);
|
|
//bindOption.disabled = true;
|
|
//bindOption.lg = 24;
|
|
bindOptions.value.push(bindOption);
|
|
|
|
initBindOptions.value.forEach((element) => {
|
|
setBindOptionValue(
|
|
element.BindValue,
|
|
element.Value,
|
|
element.Value1,
|
|
element.Values,
|
|
element.disabled,
|
|
);
|
|
});
|
|
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
};
|
|
|
|
//table from-----------------------------------------------------------------------------------------------------------------------------------
|
|
|
|
result.value.Page = pagingParams.value.page ?? 1;
|
|
result.value.Limit = pagingParams.value.pageSize;
|
|
|
|
const onSubmit = async (filters: SearchFilter[]) => {
|
|
loading.value = true;
|
|
let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
|
|
currentFilter.value = filters;
|
|
isSearched.value = true;
|
|
c.Filter = filters;
|
|
c.limit = pagingParams.value.pageSize;
|
|
c.page = pagingParams.value.page ?? 1;
|
|
c.GridColumns = [];
|
|
currentSearchCriteria.value = c;
|
|
|
|
await findBySearchCriteria(c);
|
|
};
|
|
|
|
const handleChangeBindValue = async (bindValue: string, value: string) => {
|
|
if (value == FamilyDmsFileViewEntity.DB_FAMILY_NAME) {
|
|
let rps: SelectOption[] =
|
|
await dmsFileService.FindFamilyDmsFoldersByFamilyName(bindValue);
|
|
|
|
setBindSelectOption(FamilyDmsFileViewEntity.DB_FILE_PATH, rps);
|
|
|
|
if (rps && rps.length > 0) {
|
|
currentFamilyName.value = rootPath.value = rps[0].BindValue;
|
|
|
|
currentSearchCriteria.value.Filter = [];
|
|
let filter: SearchFilter;
|
|
filter = new SearchFilter();
|
|
filter.Column = FamilyDmsFileViewEntity.DB_FAMILY_NAME;
|
|
filter.Type = "SingleSelection";
|
|
filter.Operator = "single";
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
)[0];
|
|
filter.Value = bindOption.Value;
|
|
|
|
currentSearchCriteria.value.Filter.push(filter);
|
|
filter = new SearchFilter();
|
|
filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
|
|
filter.Type = "SingleSelection";
|
|
filter.Operator = "single";
|
|
filter.Value = bindOption.Value;
|
|
currentSearchCriteria.value.Filter.push(filter);
|
|
|
|
currFilePath.value = filter.Value;
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
|
|
await findBySearchCriteria(unref(currentSearchCriteria));
|
|
}
|
|
} else if (value == FamilyDmsFileViewEntity.DB_FILE_PATH) {
|
|
currentSearchCriteria.value.Filter = [];
|
|
let filter: SearchFilter;
|
|
filter = new SearchFilter();
|
|
filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
|
|
filter.Type = "SingleSelection";
|
|
filter.Operator = "single";
|
|
let bindOption: BindOption = bindOptions.value.filter(
|
|
(x) => x.BindValue == FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
)[0];
|
|
|
|
currFilePath.value = filter.Value = bindOption.Value;
|
|
|
|
currentSearchCriteria.value.Filter.push(filter);
|
|
|
|
await findBySearchCriteria(unref(currentSearchCriteria));
|
|
}
|
|
};
|
|
const onPrint = async () => {
|
|
loading.value = true;
|
|
let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
|
|
if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
|
|
else c.Filter = [];
|
|
|
|
c.limit = pagingParams.value.pageSize;
|
|
c.page = pagingParams.value.page ?? 1;
|
|
c.GridColumns = useGridColumnInfo().getGridColumnInfo(unref(columns));
|
|
c.ReportName = layoutProviderMethod?.getLayoutProvider().layoutTitle!;
|
|
try {
|
|
//let sss = await dmsFileService.PrintBySearchCriteria(c);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const findBySearchCriteria = async (c: DmsFileSearchCriteria) => {
|
|
keys.value = [];
|
|
try {
|
|
if (c.limit == 0) c.limit = pagingParams.value.pageSize;
|
|
if (c.page == 0) c.page = pagingParams.value.page ?? 1;
|
|
data.value = await dmsFileService.FindFamilyBySearchCriteria(c);
|
|
result.value.Total = data.value.Total;
|
|
result.value.Page = data.value.Page;
|
|
result.value.Limit = data.value.Limit;
|
|
if (data.value.Families)
|
|
data.value.Families = orderBy(
|
|
data.value.Families,
|
|
(x) => x.IsDirectoryIndc,
|
|
"desc",
|
|
);
|
|
|
|
datas.value = data.value.Families;
|
|
loading.value = false;
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const onPagination = async (params: PagingParams) => {
|
|
try {
|
|
if (!isSearched.value) return;
|
|
let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
|
|
|
|
if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
|
|
else c.Filter = [];
|
|
|
|
c.limit = params.pageSize;
|
|
c.page = params.page ?? 1;
|
|
if (params.sortField) c.orderby = params.sortField!;
|
|
if (params.sortOrder)
|
|
c.orderbytag = params.sortOrder?.toString().substring(0, 4)!;
|
|
c.GridColumns = [];
|
|
loading.value = true;
|
|
currentSearchCriteria.value = c;
|
|
await findBySearchCriteria(c);
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const onReSearch = async () => {
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
await findBySearchCriteria(unref(currentSearchCriteria));
|
|
};
|
|
|
|
const onReload = async () => {
|
|
let orgFn: string = currentFamilyName.value;
|
|
let orgFp: string = currFilePath.value;
|
|
|
|
await initBindOption(currentFamilyName.value);
|
|
|
|
currentFamilyName.value = orgFn;
|
|
currFilePath.value = orgFp;
|
|
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FAMILY_NAME,
|
|
currentFamilyName.value,
|
|
"",
|
|
[currentFamilyName.value],
|
|
false,
|
|
);
|
|
setBindOptionValue(
|
|
FamilyDmsFileViewEntity.DB_FILE_PATH,
|
|
currFilePath.value,
|
|
"",
|
|
[currFilePath.value],
|
|
false,
|
|
);
|
|
|
|
await findBySearchCriteria(unref(currentSearchCriteria));
|
|
};
|
|
//table end-----------------------------------------------------------------------------------------------------------------------------------
|
|
</script>
|
|
<style scoped>
|
|
.folder-list {
|
|
height: 80px;
|
|
width: 90vw;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.folder-right {
|
|
position: relative;
|
|
right: 0;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.rotating-element {
|
|
animation: rotate 2s linear infinite;
|
|
}
|
|
</style>
|