文件选择器添加插槽，修复在下拉框多选情况下数据不同步的bug

web/src/components/fileSelector/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div style="width: 100%;" :style="props.style">
+  <div style="width: 100%;" :class="props.class" :style="props.style">
-    <div v-show="props.showInput" style="width: 100%;" :class="props.class" :style="props.inputStyle">
+    <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">
@@ -64,6 +65,7 @@
           </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) => {