From d8f41919eae3d57a53795a31fa21f7420a07bbe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= <a@a.com>
Date: Thu, 5 Dec 2024 11:56:15 +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=B7=BB=E5=8A=A0=E6=8F=92=E6=A7=BD=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8B=E6=8B=89=E6=A1=86=E5=A4=9A=E9=80=89=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=E6=95=B0=E6=8D=AE=E4=B8=8D=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/index.vue | 134 ++++++++++++----------
 1 file changed, 71 insertions(+), 63 deletions(-)

diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index a21871d..44c058b 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -1,69 +1,71 @@
 <template>
-  <div style="width: 100%;" :style="props.style">
-    <div v-show="props.showInput" style="width: 100%;" :class="props.class" :style="props.inputStyle">
-      <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
-        :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true && !props.disabled"
-        :disabled="props.disabled" @clear="selectedInit" @remove-tag="selectedInit">
-        <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
-          :label="item.name" />
-      </el-select>
-      <div v-if="props.inputType === 'image'" style="position: relative;" class="form-display"
-        @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
-        :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
-        <el-image :src="data" fit="scale-down" :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }">
-          <template #error>
-            <div></div>
-          </template>
-        </el-image>
-        <div v-show="!(!!data)"
-          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
-          <el-icon :size="24">
-            <Plus />
+  <div style="width: 100%;" :class="props.class" :style="props.style">
+    <slot name="input" v-bind="{}">
+      <div v-if="props.showInput" style="width: 100%;" :class="props.inputClass" :style="props.inputStyle">
+        <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
+          :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true && !props.disabled"
+          :disabled="props.disabled" @clear="selectedInit" @remove-tag="selectedInit">
+          <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
+            :label="item.name" />
+        </el-select>
+        <div v-if="props.inputType === 'image'" style="position: relative;" class="form-display"
+          @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
+          :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
+          <el-image :src="data" fit="scale-down" :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }">
+            <template #error>
+              <div></div>
+            </template>
+          </el-image>
+          <div v-show="!(!!data)"
+            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
+            <el-icon :size="24">
+              <Plus />
+            </el-icon>
+          </div>
+          <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
+            :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
+          <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
+            <Close />
           </el-icon>
         </div>
-        <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
-          :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
-        <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
-          <Close />
-        </el-icon>
-      </div>
-      <div v-if="props.inputType === 'video'" class="form-display" @mouseenter="formDisplayEnter"
-        @mouseleave="formDisplayLeave"
-        style="position: relative; display: flex; align-items: center;  justify-items: center;"
-        :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
-        <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"
-          :style="{ maxWidth: props.inputSize * 2 + 'px', maxHeight: props.inputSize + 'px', margin: '0 auto' }"></video>
-        <div v-show="!(!!data)"
-          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
-          <el-icon :size="24">
-            <Plus />
+        <div v-if="props.inputType === 'video'" class="form-display" @mouseenter="formDisplayEnter"
+          @mouseleave="formDisplayLeave"
+          style="position: relative; display: flex; align-items: center;  justify-items: center;"
+          :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
+          <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"
+            :style="{ maxWidth: props.inputSize * 2 + 'px', maxHeight: props.inputSize + 'px', margin: '0 auto' }"></video>
+          <div v-show="!(!!data)"
+            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
+            <el-icon :size="24">
+              <Plus />
+            </el-icon>
+          </div>
+          <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
+            :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
+          <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
+            <Close />
           </el-icon>
         </div>
-        <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
-          :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
-        <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
-          <Close />
-        </el-icon>
-      </div>
-      <div v-if="props.inputType === 'audio'" class="form-display" @mouseenter="formDisplayEnter"
-        @mouseleave="formDisplayLeave"
-        style="position: relative; display: flex; align-items: center;  justify-items: center;"
-        :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
-        <audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"
-          style="width: 100%; z-index: 1;"></audio>
-        <div v-show="!(!!data)"
-          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
-          <el-icon :size="24">
-            <Plus />
+        <div v-if="props.inputType === 'audio'" class="form-display" @mouseenter="formDisplayEnter"
+          @mouseleave="formDisplayLeave"
+          style="position: relative; display: flex; align-items: center;  justify-items: center;"
+          :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
+          <audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"
+            style="width: 100%; z-index: 1;"></audio>
+          <div v-show="!(!!data)"
+            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
+            <el-icon :size="24">
+              <Plus />
+            </el-icon>
+          </div>
+          <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
+            :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
+          <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
+            <Close />
           </el-icon>
         </div>
-        <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
-          :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
-        <el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="clear">
-          <Close />
-        </el-icon>
       </div>
-    </div>
+    </slot>
     <el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false" :append-to-body="true"
       @open="if (listData.length === 0) listRequest();" @close="onClose" @closed="onClosed" modal-class="_overlay">
       <template #header>
@@ -117,7 +119,8 @@
         <div ref="listContainerRef" class="listContainer" v-else>
           <div v-for="item, index in listData" :key="index" @click="onItemClick($event)" :data-id="item[props.valueKey]"
             :style="{ width: (props.itemSize || 100) + 'px', cursor: props.selectable ? 'pointer' : 'normal' }">
-            <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent" @onDelFile="listRequest(); listRequestAll();" />
+            <FileItem :fileData="item" :api="fileApi" :showClose="tabsActived < 4 || isSuperTenent"
+              @onDelFile="listRequest(); listRequestAll();" />
           </div>
         </div>
         <div class="listPaginator">
@@ -174,7 +177,8 @@ const TypeLabel = ['图片', '视频', '音频', '文件']
 const AcceptList = ['image/*', 'video/*', 'audio/*', ''];
 const props = defineProps({
   modelValue: {},
-  class: { type: String, default: '' },
+  class: { type: Object as PropType<String | Object>, default: '' },
+  inputClass: { type: Object as PropType<String | Object>, default: '' },
   style: { type: Object as PropType<Object | string>, default: {} },
   inputStyle: { type: Object as PropType<Object | string>, default: {} },
   disabled: { type: Boolean, default: false },
@@ -263,7 +267,7 @@ const onItemClick = async (e: MouseEvent) => {
   if (props.multiple) {
     if (target.classList.contains('active')) { target.classList.remove('active'); flat = -1; }
     else { target.classList.add('active'); flat = 1; }
-    if (data.value) {
+    if (data.value.length) {
       if (flat === 1) data.value.push(fileId);
       else data.value.splice(data.value.indexOf(fileId), 1);
     } else data.value = [fileId];
@@ -279,7 +283,7 @@ const onItemClick = async (e: MouseEvent) => {
 // 每次列表刷新都得更新一下选择状态，因为所有标签页共享列表
 const selectedInit = async () => {
   if (!props.selectable) return;
-  await nextTick();
+  await nextTick(); // 不等待一次不会刷新
   for (let i of (listContainerRef.value?.children || [])) {
     i.classList.remove('active');
     let fid = (i as HTMLElement).dataset.id;
@@ -363,7 +367,11 @@ const confirmNetUrl = () => {
 // fs-crud部分
 const data = ref<any>(null);
 const emit = defineEmits(['update:modelValue', 'onSave', 'onClose', 'onClosed']);
-watch(() => props.modelValue, (val) => { data.value = val; }, { immediate: true });
+watch(
+  () => props.modelValue,
+  (val) => data.value = val,
+  { immediate: true }
+);
 const { ui } = useUi();
 const formValidator = ui.formItem.injectFormItemContext();
 const onDataChange = (value: any) => {