From 2f4a6e6b1f6489c1168e3267b66dd02812f9db76 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 12:39:11 +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=E8=A1=A8=E5=8D=95=E7=B1=BB=E5=9E=8B=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=EF=BC=8C=E7=9B=AE=E5=89=8D=E6=94=AF=E6=8C=81selector?=
 =?UTF-8?q?=E5=92=8Cimage=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/index.vue | 363 +++++++++++++---------
 web/src/components/fileSelector/types.ts  |   2 +-
 2 files changed, 211 insertions(+), 154 deletions(-)

diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index 1fd5d6d..4890c3b 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -1,61 +1,79 @@
 <template>
-	<el-select v-show="props.selectable" v-model="data" suffix-icon="arrow-down" clearable :multiple="props.multiple"
-		placeholder="请选择文件" @click="selectVisiable = true" @clear="selectedInit" @remove-tag="selectedInit">
-		<el-option v-for="item, index in listAllData" :key="index" :value="item[props.valueKey]" :label="item.name" />
-	</el-select>
-	<el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
-		@open="if (listData.length === 0) listRequest();" @closed="if (!props.selectable) clear();">
-		<template #header>
-			<span class="el-dialog__title">文件选择</span>
-			<el-divider style="margin: 0;" />
-		</template>
-		<div style="padding: 4px;">
-			<el-tabs v-model="tabsActived" :type="props.tabsType" :stretch="true" @tab-change="handleTabChange">
-				<el-tab-pane v-if="props.tabsShow & SHOW.IMAGE" :name="0" label="图片" />
-				<el-tab-pane v-if="props.tabsShow & SHOW.VIDEO" :name="1" label="视频" />
-				<el-tab-pane v-if="props.tabsShow & SHOW.AUDIO" :name="2" label="音频" />
-				<el-tab-pane v-if="props.tabsShow & SHOW.OTHER" :name="3" label="其他" />
-			</el-tabs>
-			<el-row justify="space-between" class="headerBar">
-				<el-span :span="16">
-					<el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived]}名`"
-						prefix-icon="search" clearable @change="listRequest" />
-					<div>
-						<el-tag v-if="props.multiple" type="primary" effect="light">
-							一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
-						</el-tag>
-					</div>
-				</el-span>
-				<el-span :span="8">
-					<el-button type="default" circle icon="refresh" @click="listRequest" />
-					<!-- 这里 show-file-list 和 clearFiles 一起使用确保不会显示上传列表 -->
-					<el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false"
-						:data="{ upload_method: 1 }" :drag="false" :show-file-list="false"
-						:accept="AcceptList[tabsActived]"
-						:on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }">
-						<el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived] }}</el-button>
-					</el-upload>
-				</el-span>
-			</el-row>
-			<el-empty v-if="!listData.length" description="无内容，请上传"
-				style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
-			<div ref="listContainerRef" class="listContainer" v-else>
-				<div v-for="item in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="item.id"
-					@click="onItemClick($event)" :data-id="item[props.valueKey]">
-					<FileItem :fileData="item" />
-				</div>
-			</div>
-			<div class="listPaginator">
-				<el-pagination background size="small" layout="total, sizes, prev, pager, next" :total="pageForm.total"
-					v-model:page-size="pageForm.limit" :page-sizes="[10, 20, 30, 40, 50]"
-					v-model:current-page="pageForm.page" :hide-on-single-page="false" @change="handlePageChange" />
-			</div>
-		</div>
-		<template #footer v-if="props.selectable">
-			<el-button type="default" @click="selectVisiable = false">取消</el-button>
-			<el-button type="primary" @click="selectVisiable = false">确定</el-button>
-		</template>
-	</el-dialog>
+  <div v-show="props.showInput" style="width: 100%;">
+    <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
+      :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true" @clear="selectedInit"
+      @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"
+      :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>
+          <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
+            <el-icon :size="24">
+              <Plus />
+            </el-icon>
+          </div>
+        </template>
+      </el-image>
+      <div @click="selectVisiable = true" class="imageHover"></div>
+      <el-icon v-show="!!data" class="imageCloseHover" :size="16" @click="data = null; onDataChange(null);">
+        <Close />
+      </el-icon>
+    </div>
+  </div>
+  <el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
+    @open="if (listData.length === 0) listRequest();" @closed="clear">
+    <template #header>
+      <span class="el-dialog__title">文件选择</span>
+      <el-divider style="margin: 0;" />
+    </template>
+    <div style="padding: 4px;">
+      <el-tabs v-model="tabsActived" :type="props.tabsType" :stretch="true" @tab-change="handleTabChange">
+        <el-tab-pane v-if="props.tabsShow & SHOW.IMAGE" :name="0" label="图片" />
+        <el-tab-pane v-if="props.tabsShow & SHOW.VIDEO" :name="1" label="视频" />
+        <el-tab-pane v-if="props.tabsShow & SHOW.AUDIO" :name="2" label="音频" />
+        <el-tab-pane v-if="props.tabsShow & SHOW.OTHER" :name="3" label="其他" />
+      </el-tabs>
+      <el-row justify="space-between" class="headerBar">
+        <el-span :span="16">
+          <el-input v-model="filterForm.name" :placeholder="`请输入${TypeLabel[tabsActived]}名`" prefix-icon="search"
+            clearable @change="listRequest" />
+          <div>
+            <el-tag v-if="props.multiple" type="primary" effect="light">
+              一共选中&nbsp;{{ data?.length || 0 }}&nbsp;个文件
+            </el-tag>
+          </div>
+        </el-span>
+        <el-span :span="8">
+          <el-button type="default" circle icon="refresh" @click="listRequest" />
+          <!-- 这里 show-file-list 和 clearFiles 一起使用确保不会显示上传列表 -->
+          <el-upload ref="uploadRef" :action="getBaseURL() + 'api/system/file/'" :multiple="false"
+            :data="{ upload_method: 1 }" :drag="false" :show-file-list="false" :accept="AcceptList[tabsActived]"
+            :on-success="() => { listRequest(); listRequestAll(); uploadRef.clearFiles(); }">
+            <el-button type="primary" icon="plus">上传{{ TypeLabel[tabsActived] }}</el-button>
+          </el-upload>
+        </el-span>
+      </el-row>
+      <el-empty v-if="!listData.length" description="无内容，请上传"
+        style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
+      <div ref="listContainerRef" class="listContainer" v-else>
+        <div v-for="item in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="item.id"
+          @click="onItemClick($event)" :data-id="item[props.valueKey]">
+          <FileItem :fileData="item" />
+        </div>
+      </div>
+      <div class="listPaginator">
+        <el-pagination background size="small" layout="total, sizes, prev, pager, next" :total="pageForm.total"
+          v-model:page-size="pageForm.limit" :page-sizes="[10, 20, 30, 40, 50]" v-model:current-page="pageForm.page"
+          :hide-on-single-page="false" @change="handlePageChange" />
+      </div>
+    </div>
+    <template #footer v-if="props.showInput">
+      <el-button type="default" @click="selectVisiable = false">取消</el-button>
+      <el-button type="primary" @click="selectVisiable = false">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -69,29 +87,38 @@ import FileItem from './fileItem.vue';
 const TypeLabel = ['图片', '视频', '音频', '文件']
 const AcceptList = ['image/*', 'video/*', 'audio/*', ''];
 const props = defineProps({
-	modelValue: {},
-	tabsType: { type: Object as PropType<'' | 'card' | 'border-card'>, default: '' },
-	itemSize: { type: Number, default: 100 },
+  modelValue: {},
+  tabsType: { type: Object as PropType<'' | 'card' | 'border-card'>, default: '' },
+  itemSize: { type: Number, default: 100 },
 
-	// 1000图片 100视频 10音频 1 其他 控制tabs的显示
-	tabsShow: { type: Number, default: SHOW.ALL },
+  // 1000图片 100视频 10音频 1 其他 控制tabs的显示
+  tabsShow: { type: Number, default: SHOW.ALL },
 
-	// 是否可以多选，默认单选
-	multiple: { type: Boolean, default: false },
+  // 是否可以多选，默认单选
+  multiple: { type: Boolean, default: false },
 
-	// 是否可选，该参数用于控制是否显示select输入框。若赋值为false，则不会显示select输入框，也不会显示底部按钮
-	// 如果不显示select输入框，则无法触发dialog，需要父组件通过修改本组件暴露的 selectVisiable 状态来控制dialog
-	selectable: { type: Boolean, default: true },
+  // 是否可选，该参数用于只上传和展示而不选择和绑定model的情况
+  selectable: { type: Boolean, default: true },
 
-	// v-model绑定的值是file数据的哪个key，默认是id
-	valueKey: { type: String, default: 'id' },
+  // 该参数用于控制是否显示表单item。若赋值为false，则不会显示表单item，也不会显示底部按钮
+  // 如果不显示表单item，则无法触发dialog，需要父组件通过修改本组件暴露的 selectVisiable 状态来控制dialog
+  showInput: { type: Boolean, default: true },
+
+  // 表单item类型，不为selector是需要设置valueKey，否则可能获取不到媒体数据
+  inputType: { type: Object as PropType<'selector' | 'image' | 'video' | 'audio'>, default: 'selector' },
+  // inputType为image时生效
+  inputImageSize: { type: Number, default: 100 },
+
+  // v-model绑定的值是file数据的哪个key，默认是id
+  valueKey: { type: String, default: 'id' },
 } as any);
+
 const selectVisiable = ref<boolean>(false);
 const tabsActived = ref<number>([3, 2, 1, 0][((props.tabsShow & (props.tabsShow - 1)) === 0) ? Math.log2(props.tabsShow) : 3]);
 const fileApiPrefix = '/api/system/file/';
 const fileApi = {
-	GetList: (query: UserPageQuery) => request({ url: fileApiPrefix, method: 'get', params: query }),
-	GetAll: () => request({ url: fileApiPrefix + 'get_all/' }),
+  GetList: (query: UserPageQuery) => request({ url: fileApiPrefix, method: 'get', params: query }),
+  GetAll: () => request({ url: fileApiPrefix + 'get_all/' }),
 };
 // 过滤表单
 const filterForm = reactive({ name: '' });
@@ -101,14 +128,18 @@ const pageForm = reactive({ page: 1, limit: 10, total: 0 });
 const listData = ref<any[]>([]);
 const listAllData = ref<any[]>([]);
 const listRequest = async () => {
-	let res = await fileApi.GetList({ page: pageForm.page, limit: pageForm.limit, file_type: tabsActived.value, ...filterForm });
-	listData.value = res.data;
-	pageForm.total = res.total;
-	pageForm.page = res.page;
-	pageForm.limit = res.limit;
-	selectedInit();
+  let res = await fileApi.GetList({ page: pageForm.page, limit: pageForm.limit, file_type: tabsActived.value, ...filterForm });
+  listData.value = res.data;
+  pageForm.total = res.total;
+  pageForm.page = res.page;
+  pageForm.limit = res.limit;
+  selectedInit();
+};
+const listRequestAll = async () => {
+  if (props.inputType !== 'selector') return;
+  let res = await fileApi.GetAll();
+  listAllData.value = res.data;
 };
-const listRequestAll = async () => { let res = await fileApi.GetAll(); listAllData.value = res.data; };
 // tab改变时触发
 const handleTabChange = (name: string) => { pageForm.page = 1; listRequest(); };
 // 分页器改变时触发
@@ -116,60 +147,60 @@ const handlePageChange = (currentPage: number, pageSize: number) => { pageForm.p
 // 选择的行为
 const listContainerRef = ref<any>();
 const onItemClick = async (e: MouseEvent) => {
-	if (!props.selectable) return;
-	let target = e.target as HTMLElement;
-	let flat = 0;  // -1删除 0不变 1添加
-	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 (data.value) {
-			if (flat === 1) data.value.push(fileId);
-			else data.value.splice(data.value.indexOf(fileId), 1);
-		}
-		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');
-		}
-		target.classList.add('active');
-		data.value = fileId;
-	}
-	onDataChange(data.value);
+  if (!props.selectable) return;
+  let target = e.target as HTMLElement;
+  let flat = 0;  // -1删除 0不变 1添加
+  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 (data.value) {
+      if (flat === 1) data.value.push(fileId);
+      else data.value.splice(data.value.indexOf(fileId), 1);
+    }
+    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');
+    }
+    target.classList.add('active');
+    data.value = fileId;
+  }
+  onDataChange(data.value);
 };
 // 每次列表刷新都得更新一下选择状态，因为所有标签页共享列表
 const selectedInit = async () => {
-	if (!props.selectable) return;
-	await nextTick();
-	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.selectable) return;
+  await nextTick();
+  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');
+    }
+  }
 };
 const uploadRef = ref<any>();
 // 清空状态
 const clear = () => {
-	filterForm.name = '';
-	pageForm.page = 1;
-	pageForm.limit = 10;
-	pageForm.total = 0;
-	listData.value = [];
-	// all数据不能清，因为all只会在挂载的时候赋值一次
-	// listAllData.value = [];
-	data.value = null;
+  filterForm.name = '';
+  pageForm.page = 1;
+  pageForm.limit = 10;
+  pageForm.total = 0;
+  listData.value = [];
+  // all数据不能清，因为all只会在挂载的时候赋值一次
+  // listAllData.value = [];
+  // data.value = null;
 };
 
 
@@ -180,9 +211,9 @@ watch(() => props.modelValue, (val) => { data.value = val; }, { immediate: true
 const { ui } = useUi();
 const formValidator = ui.formItem.injectFormItemContext();
 const onDataChange = (value: any) => {
-	emit('update:modelValue', value);
-	formValidator.onChange();
-	formValidator.onBlur();
+  emit('update:modelValue', value);
+  formValidator.onChange();
+  formValidator.onBlur();
 };
 defineExpose({ data, onDataChange, selectVisiable, clear });
 
@@ -191,42 +222,68 @@ onMounted(() => listRequestAll());
 
 <style scoped>
 .headerBar>* {
-	display: flex;
-	justify-content: space-between;
-	gap: 12px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .listContainer {
-	display: grid;
-	justify-items: center;
-	grid-template-columns: repeat(4, 1fr);
-	grid-auto-rows: min-content;
-	grid-gap: 36px;
-	margin-top: 24px;
-	padding: 8px;
-	height: calc(50vh);
-	overflow-y: auto;
-	scrollbar-width: thin;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: min-content;
+  grid-gap: 36px;
+  margin-top: 24px;
+  padding: 8px;
+  height: calc(50vh);
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .listContainer>* {
-	aspect-ratio: 1 / 1;
-	/* border: 1px solid rgba(0, 0, 0, .1); */
-	/* div阴影，2px范围，均匀投影，0偏移 */
-	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-	cursor: pointer;
-	border-radius: 8px;
-	overflow: hidden;
+  aspect-ratio: 1 / 1;
+  /* border: 1px solid rgba(0, 0, 0, .1); */
+  /* div阴影，2px范围，均匀投影，0偏移 */
+  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .active {
-	box-shadow: 0 0 8px var(--el-color-primary);
+  box-shadow: 0 0 8px var(--el-color-primary);
 }
 
 .listPaginator {
-	display: flex;
-	justify-content: flex-end;
-	justify-items: center;
-	padding-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  justify-items: center;
+  padding-top: 24px;
+}
+
+.imageHover {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 1px solid #dcdfe6;
+}
+
+.imageHover:hover {
+  border-color: #c0c4cc;
+}
+
+.imageCloseHover {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  cursor: pointer;
+}
+
+.imageCloseHover:hover {
+  color: black;
 }
 </style>
\ No newline at end of file
diff --git a/web/src/components/fileSelector/types.ts b/web/src/components/fileSelector/types.ts
index 76d135b..e428015 100644
--- a/web/src/components/fileSelector/types.ts
+++ b/web/src/components/fileSelector/types.ts
@@ -4,4 +4,4 @@ export const SHOW = {
 	AUDIO: 0b0010, // 音频
 	OTHER: 0b0001, // 其他
 	ALL: 0b1111, // 全部
-};
\ No newline at end of file
+};