附件管理添加预览

web/src/views/system/fileList/crud.tsx

@@ -33,7 +33,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 				buttons: {
 					add: {
 						show: true,
-						// click: () => context.openAddHandle?.()
+						click: () => context.openAddHandle?.()
 					},
 				},
 			},
@@ -43,6 +43,17 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 				editRequest,
 				delRequest,
 			},
+			tabs: {
+				show: true,
+				name: 'file_type',
+				type: '',
+				options: [
+					{ value: 0, label: '图片' },
+					{ value: 1, label: '视频' },
+					{ value: 2, label: '音频' },
+					{ value: 3, label: '其他' },
+				]
+			},
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
@@ -118,6 +129,16 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						},
 					},
 				},
+				preview: {
+					title: '预览',
+					column: {
+						minWidth: 120,
+						align: 'center'
+					},
+					form: {
+						show: false
+					}
+				},
 				url: {
 					title: '文件地址',
 					type: 'file-uploader',
@@ -145,10 +166,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					type: 'input',
 					form: {
 						show: false,
-						component: {
-							placeholder: '请输入文件名称',
-							clearable: true
-						},
 					},
 					column: {
 						minWidth: 160
@@ -203,6 +220,15 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						show: true
 					}
 				},
+				create_datetime: {
+					title: '创建时间',
+					column: {
+						minWidth: 160
+					},
+					form: {
+						show: false
+					}
+				},
 				// fileselectortest: {
 				// 	title: '文件选择器测试',
 				// 	type: 'file-selector',

web/src/views/system/fileList/index.vue

@@ -10,8 +10,40 @@
       <template #cell_size="scope">
         <span>{{ scope.row.size ? getSizeDisplay(scope.row.size) : '0b' }}</span>
       </template>
+      <template #cell_preview="scope">
+        <div v-if="scope.row.file_type === 0">
+          <el-image style="width: 100%; aspect-ratio: 1 /1 ;" :src="scope.row.url" :preview-src-list="[scope.row.url]"
+            :preview-teleported="true" />
+        </div>
+        <div v-if="scope.row.file_type === 1" class="_preview" @click="openPreviewHandle(scope.row.url, 'video')">
+          <el-icon :size="60">
+            <VideoCamera />
+          </el-icon>
+        </div>
+        <div v-if="scope.row.file_type === 2" class="_preview" @click="openPreviewHandle(scope.row.url, 'video')">
+          <el-icon :size="60">
+            <Headset />
+          </el-icon>
+        </div>
+        <el-icon v-if="scope.row.file_type === 3" :size="60">
+          <Document />
+        </el-icon>
+        <div v-if="scope.row.file_type > 3">未知类型</div>
+      </template>
     </fs-crud>
-    <FileSelector ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120" :multiple="false" :selectable="false" />
+    <div class="preview" :class="{ show: openPreview }">
+      <video v-show="videoPreviewSrc" :src="videoPreviewSrc" class="previewItem" :controls="true" :autoplay="true"
+        :muted="true" :loop="false" ref="videoPreviewRef"></video>
+      <audio v-show="audioPreviewSrc" :src="audioPreviewSrc" class="previewItem" :controls="true" :autoplay="false"
+        :muted="true" :loop="false" ref="audioPreviewRef"></audio>
+      <div class="closePreviewBtn">
+        <el-icon :size="48" color="white" style="cursor: pointer;" @click="closePreview">
+          <CircleClose />
+        </el-icon>
+      </div>
+    </div>
+    <FileSelector inputStyle="display: none;" ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120"
+      :multiple="false" :selectable="false" />
   </fs-page>
 </template>
 
@@ -29,7 +61,7 @@ const getSizeDisplay = (n: number) => n < 1024 ? n + 'b' : (n < 1024 * 1024 ? (n
 const openAddHandle = async () => {
   fileSelectorRef.value.selectVisiable = true;
   await nextTick();
-}
+};
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -41,8 +73,76 @@ const { crudOptions } = createCrudOptions({ crudExpose, context: { openAddHandle
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
+const openPreview = ref<boolean>(false);
+const videoPreviewSrc = ref<string>('');
+const audioPreviewSrc = ref<string>('');
+const videoPreviewRef = ref<HTMLVideoElement>();
+const audioPreviewRef = ref<HTMLAudioElement>();
+const openPreviewHandle = (src: string, type: string) => {
+  openPreview.value = true;
+  (videoPreviewRef.value as HTMLVideoElement).muted = true;
+  (audioPreviewRef.value as HTMLAudioElement).muted = true;
+  if (type === 'video') videoPreviewSrc.value = src;
+  else audioPreviewSrc.value = src;
+  window.addEventListener('keydown', onPreviewKeydown);
+};
+const closePreview = () => {
+  openPreview.value = false;
+  videoPreviewSrc.value = '';
+  audioPreviewSrc.value = '';
+  window.removeEventListener('keydown', onPreviewKeydown);
+};
+const onPreviewKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Escape') return;
+  openPreview.value = false;
+  videoPreviewSrc.value = '';
+  audioPreviewSrc.value = '';
+  window.removeEventListener('keydown', onPreviewKeydown);
+};
+
 // 页面打开后获取列表数据
 onMounted(() => {
   crudExpose.doRefresh();
 });
 </script>
+<style lang="css" scoped>
+.preview {
+  display: none;
+  position: fixed;
+  top: 0;
+  height: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 9999;
+}
+
+.show {
+  display: block !important;
+}
+
+.previewItem {
+  width: 50%;
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(25%, -50%);
+}
+
+.closePreviewBtn {
+  width: 50%;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translate(-75%);
+  display: flex;
+  justify-content: center;
+}
+
+._preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+</style>