From 7a9ef47a68eb687aade463fbdecdb2aa07f5c507 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= <a@a.com>
Date: Tue, 19 Nov 2024 14:19:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81video=E7=9A=84=E8=A1=A8=E5=8D=95=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E9=80=89=E9=A1=B9=EF=BC=8C=E6=B7=BB=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E9=94=99=E8=AF=AF=E5=B1=9E=E6=80=A7=E5=80=BC=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=EF=BC=8C=E5=A4=9A=E9=80=89=E6=A8=A1=E5=BC=8F=E6=9C=89?=
 =?UTF-8?q?=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/index.vue | 59 +++++++++++++----------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index d3f04fc..e9f18f6 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -5,7 +5,7 @@
       @remove-tag="selectedInit">
       <el-option v-for="item, index in listAllData" :key="index" :value="item[props.valueKey]" :label="item.name" />
     </el-select>
-    <div v-if="props.inputType === 'image'" style="position: relative;" class="imageInput"
+    <div v-if="props.inputType === 'image'" style="position: relative;"
       :style="{ width: props.inputImageSize + 'px', height: props.inputImageSize + 'px' }">
       <el-image :src="data" fit="scale-down" :style="{ width: props.inputImageSize + 'px', aspectRatio: '1 / 1' }">
         <template #error>
@@ -16,8 +16,23 @@
           </div>
         </template>
       </el-image>
-      <div @click="selectVisiable = true" class="imageHover"></div>
-      <el-icon v-show="!!data" class="imageCloseHover" :size="16" @click="dataClear">
+      <div @click="selectVisiable = true" class="addControllorHover"></div>
+      <el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear">
+        <Close />
+      </el-icon>
+    </div>
+    <div v-if="props.inputType === 'video'"
+      style="position: relative; display: flex; align-items: center;  justify-items: center;"
+      :style="{ width: props.inputImageSize + 'px', height: props.inputImageSize + 'px' }">
+      <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"></video>
+      <div v-show="!(!!data)"
+        style="position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center;">
+        <el-icon :size="24">
+          <Plus />
+        </el-icon>
+      </div>
+      <div @click="selectVisiable = true" class="addControllorHover"></div>
+      <el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear">
         <Close />
       </el-icon>
     </div>
@@ -95,6 +110,7 @@ const props = defineProps({
   tabsShow: { type: Number, default: SHOW.ALL },
 
   // 是否可以多选，默认单选
+  // 该值为true时inputType必须是selector（暂不支持其他type的多选）
   multiple: { type: Boolean, default: false },
 
   // 是否可选，该参数用于只上传和展示而不选择和绑定model的情况
@@ -153,24 +169,16 @@ const onItemClick = async (e: MouseEvent) => {
   while (!target.dataset.id) target = target.parentElement as HTMLElement;
   let fileId = target.dataset.id;
   if (props.multiple) {
-    if (target.classList.contains('active')) {
-      target.classList.remove('active');
-      flat = -1;
-    } else {
-      target.classList.add('active');
-      flat = 1;
-    }
+    if (target.classList.contains('active')) { target.classList.remove('active'); flat = -1; }
+    else { target.classList.add('active'); flat = 1; }
     if (data.value) {
       if (flat === 1) data.value.push(fileId);
       else data.value.splice(data.value.indexOf(fileId), 1);
-    }
-    else data.value = [fileId];
+    } else data.value = [fileId];
     // 去重排序，<降序，>升序
     data.value = Array.from(new Set(data.value)).sort();
   } else {
-    for (let i of listContainerRef.value?.children) {
-      (i as HTMLElement).classList.remove('active');
-    }
+    for (let i of listContainerRef.value?.children) (i as HTMLElement).classList.remove('active');
     target.classList.add('active');
     data.value = fileId;
   }
@@ -183,11 +191,8 @@ const selectedInit = async () => {
   for (let i of (listContainerRef.value?.children || [])) {
     i.classList.remove('active');
     let fid = (i as HTMLElement).dataset.id;
-    if (props.multiple) {
-      if (data.value?.includes(fid)) i.classList.add('active');
-    } else {
-      if (fid === data.value) i.classList.add('active');
-    }
+    if (props.multiple) { if (data.value?.includes(fid)) i.classList.add('active'); }
+    else { if (fid === data.value) i.classList.add('active'); }
   }
 };
 const uploadRef = ref<any>();
@@ -219,7 +224,11 @@ const onDataChange = (value: any) => {
 defineExpose({ data, onDataChange, selectVisiable, clear, dataClear });
 
 
-onMounted(() => listRequestAll());
+onMounted(() => {
+  if (props.multiple && props.inputType !== 'selector')
+    throw new Error('FileSelector组件属性multiple为true时inputType必须为selector');
+  listRequestAll();
+});
 </script>
 
 <style scoped>
@@ -263,7 +272,7 @@ onMounted(() => listRequestAll());
   padding-top: 24px;
 }
 
-.imageHover {
+.addControllorHover {
   width: 100%;
   aspect-ratio: 1 / 1;
   position: absolute;
@@ -274,18 +283,18 @@ onMounted(() => listRequestAll());
   border: 1px solid #dcdfe6;
 }
 
-.imageHover:hover {
+.addControllorHover:hover {
   border-color: #c0c4cc;
 }
 
-.imageCloseHover {
+.closeHover {
   position: absolute;
   right: 2px;
   top: 2px;
   cursor: pointer;
 }
 
-.imageCloseHover:hover {
+.closeHover:hover {
   color: black;
 }
 </style>
\ No newline at end of file