还原

WebVue/src/components/basic/OperatorStationDelete.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="operator-station">
+        <div class="operator-group selection-actions" v-if="hasSelection">
+            <template v-if="true">
+                <a-tooltip title="下载" v-if="!isDirectorySelected && isSingleItem">
+                    <a-button type="text" :icon="h(DownloadOutlined)" :disabled="!canAmend"
+                        @click="onDownload">下载</a-button>
+                </a-tooltip>
+
+                <a-tooltip title="还原" >
+                    <a-button type="text" :icon="h(UndoOutlined)" :disabled="!canDelete"
+                     @click="$emit('restore', selectedItems)"   >还原</a-button>
+                </a-tooltip>
+
+                <a-tooltip title="删除">
+                    <a-button type="text" :icon="h(DeleteOutlined)" :disabled="!canCreate"
+                        @click="$emit('delete', selectedItems)">彻底删除</a-button>
+                </a-tooltip>
+
+                <template v-if="isSingleVideo">
+                    <a-tooltip title="播放">
+                        <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
+                            @click="onPlayVideo">播放</a-button>
+                    </a-tooltip>
+                </template>
+
+                <template v-if="isSingleAudio">
+                    <a-tooltip v-if="selectedItem.IsPlay != 'Y'" title="播放">
+                        <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
+                            @click="onPlayAudio">播放</a-button>
+                    </a-tooltip>
+                    <a-tooltip v-else-if="selectedItem.IsPause != 'Y'" title="暂停">
+                        <a-button type="text" :icon="h(PauseCircleOutlined)" @click="onPauseAudio">暂停</a-button>
+                    </a-tooltip>
+                    <a-tooltip v-else title="继续">
+                        <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
+                            @click="onContinueAudio">继续</a-button>
+                    </a-tooltip>
+                </template>
+            </template>
+        </div>
+
+        <a-divider type="vertical" v-if="hasSelection" />
+
+        <div style="display: none">
+            <a-upload v-if="canCreate" v-model:file-list="fileList" name="file" :before-upload="onBeforeUpload"
+                :headers="headers" :show-upload-list="false" :action="uploadUrl" ref="uploadRef">
+            </a-upload>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, h } from "vue";
+import {
+    UploadOutlined,
+    FolderAddOutlined,
+    DownloadOutlined,
+    ShareAltOutlined,
+    NotificationOutlined,
+    UnorderedListOutlined,
+    PlayCircleOutlined,
+    PauseCircleOutlined,
+    EyeOutlined,
+    EditOutlined,
+    ScissorOutlined,
+    DeleteOutlined,
+    UndoOutlined,
+    DownOutlined,
+} from "@ant-design/icons-vue";
+import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
+import type { UploadProps } from "ant-design-vue";
+
+const props = defineProps<{
+    selectedItems: DmsFileUploadViewDisplayData[];
+    uploadUrl: string;
+    headers: any;
+    canCreate: boolean;
+    canAmend: boolean;
+    canDelete: boolean;
+    canView: boolean;
+}>();
+
+const emit = defineEmits([
+    "create-folder",
+    "before-upload",
+    "download",
+    "share",
+    "publish",
+    "view-preview",
+    "play-video",
+    "play-audio",
+    "pause-audio",
+    "continue-audio",
+    "preview",
+    "rename",
+    "move",
+    "delete",
+    "restore",
+]);
+
+const fileList = ref<UploadProps["fileList"]>([]);
+const uploadRef = ref<any>(null);
+
+const hasSelection = computed(() => props.selectedItems.length > 0);
+const isDirectorySelected = computed(() =>
+    props.selectedItems.some((s) => s.IsDirectoryIndc == "Y"),
+);
+const isSingleItem = computed(() => props.selectedItems.length === 1);
+
+const selectedItem = computed(() => {
+    return props.selectedItems[0] || ({} as DmsFileUploadViewDisplayData);
+});
+
+const selectedOrderKey = computed(() => {
+    return selectedItem.value?.OrderKey || selectedItem.value?.OrgFileName || "";
+});
+
+const isImage = (key: string) => {
+    if (!key) return false;
+    return /\.(png|jpe?g|gif|bmp|webp)$/i.test(key);
+};
+
+const isVideo = (key: string) => {
+    if (!key) return false;
+    return /\.(mp4|m3u8|rm|mpeg|mov|wmv|avi)$/i.test(key);
+};
+
+const isAudio = (key: string) => {
+    if (!key) return false;
+    return /\.(mp3|wav|flac|aac|ogg|wma)$/i.test(key);
+};
+
+const isSingleVideo = computed(() => {
+    return isSingleItem.value && isVideo(selectedOrderKey.value);
+});
+
+const isSingleAudio = computed(() => {
+    return isSingleItem.value && isAudio(selectedOrderKey.value);
+});
+
+const publishTooltip = computed(() => {
+    if (isImage(selectedOrderKey.value)) return "发布相册";
+    if (isVideo(selectedOrderKey.value)) return "发布影视专辑";
+    if (isAudio(selectedOrderKey.value)) return "发布音乐专辑";
+    return "发布";
+});
+
+const previewTooltip = computed(() => {
+    if (isImage(selectedOrderKey.value)) return "相册展览";
+    if (isVideo(selectedOrderKey.value)) return "影视厅播放";
+    if (isAudio(selectedOrderKey.value)) return "音乐厅播放";
+    return "预览";
+});
+
+const triggerUpload = () => {
+    uploadRef.value?.$el?.querySelector("input")?.click();
+};
+
+const onBeforeUpload: UploadProps["beforeUpload"] = (file) => {
+    emit("before-upload", file);
+    return false;
+};
+
+const onDownload = () => {
+    emit("download", props.selectedItems);
+};
+
+const onShare = () => {
+    emit("share", props.selectedItems);
+};
+
+const onPublish = () => {
+    emit("publish", props.selectedItems);
+};
+
+const onViewPreview = () => {
+    emit("view-preview", props.selectedItems);
+};
+
+const onPlayVideo = () => {
+    emit("play-video", selectedItem.value);
+};
+
+const onPlayAudio = () => {
+    emit("play-audio", selectedItem.value);
+};
+
+const onPauseAudio = () => {
+    emit("pause-audio", selectedItem.value);
+};
+
+const onContinueAudio = () => {
+    emit("continue-audio", selectedItem.value);
+};
+</script>
+
+<style scoped>
+.operator-station {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    background: #fafafa;
+    border-bottom: 1px solid #e8e8e8;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.operator-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.main-actions :deep(.ant-btn) {
+    height: 32px;
+}
+
+.selection-actions :deep(.ant-btn) {
+    padding: 4px 8px;
+    font-size: 16px;
+}
+</style>