文件选择器

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

@@ -1,7 +1,17 @@
 import * as api from './api';
-import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import {
+	UserPageQuery,
+	AddReq,
+	DelReq,
+	EditReq,
+	CrudExpose,
+	CrudOptions,
+	CreateCrudOptionsProps,
+	CreateCrudOptionsRet,
+	dict
+} from '@fast-crud/fast-crud';
 
-export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
@@ -20,7 +30,8 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 			actionbar: {
 				buttons: {
 					add: {
-						show: false,
+						show: true,
+						click: () => context.openAddHandle?.()
 					},
 				},
 			},
@@ -34,7 +45,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				//固定右侧
 				fixed: 'right',
 				width: 200,
-				show:false,
+				show: false,
 				buttons: {
 					view: {
 						show: false,
@@ -95,12 +106,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 						show: true,
 					},
 					type: 'input',
-					column:{
-						minWidth: 120,
+					column: {
+						minWidth: 200,
 					},
 					form: {
 						component: {
 							placeholder: '请输入文件名称',
+							clearable: true
 						},
 					},
 				},
@@ -110,8 +122,8 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 					search: {
 						disabled: true,
 					},
-					column:{
-						minWidth: 200,
+					column: {
+						minWidth: 360,
 					},
 				},
 				md5sum: {
@@ -119,13 +131,76 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 					search: {
 						disabled: true,
 					},
-					column:{
-						minWidth: 120,
+					column: {
+						minWidth: 300,
 					},
 					form: {
-						disabled: false,
+						disabled: false
 					},
 				},
+				mime_type: {
+					title: '文件类型',
+					type: 'input',
+					form: {
+						show: false,
+						component: {
+							placeholder: '请输入文件名称',
+							clearable: true
+						},
+					},
+					column: {
+						minWidth: 160
+					}
+				},
+				file_type: {
+					title: '文件类型',
+					type: 'dict-select',
+					dict: dict({
+						data: [
+							{ label: '图片', value: 0, color: 'success' },
+							{ label: '视频', value: 1, color: 'warning' },
+							{ label: '音频', value: 2, color: 'danger' },
+							{ label: '其他', value: 3, color: 'primary' },
+						]
+					}),
+					column: {
+						show: false
+					},
+					search: {
+						show: true
+					},
+					form: {
+						show: false,
+						component: {
+							placeholder: '请选择文件类型'
+						}
+					}
+				},
+				size: {
+					title: '文件大小',
+					column: {
+						minWidth: 120
+					},
+					form: {
+						show: false
+					}
+				},
+				upload_method: {
+					title: '上传方式',
+					type: 'dict-select',
+					dict: dict({
+						data: [
+							{ label: '默认上传', value: 0, color: 'primary' },
+							{ label: '文件选择器上传', value: 1, color: 'warning' },
+						]
+					}),
+					column: {
+						minWidth: 140
+					},
+					search: {
+						show: true
+					}
+				}
 			},
 		},
 	};

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

@@ -1,13 +1,40 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-left="scope">
+        <el-upload :action="getBaseURL() + 'api/system/file/'" :multiple="false"
+          :on-success="() => crudExpose.doRefresh()" :drag="false" :show-file-list="false">
+          <el-button type="primary" icon="plus">上传</el-button>
+        </el-upload>
+      </template>
+      <template #cell_size="scope">
+        <span>{{ scope.row.size ? getSizeDisplay(scope.row.size) : '0b' }}</span>
+      </template>
+    </fs-crud>
+    <el-dialog v-model="selectorVisiable" @closed="fileSelectorRef.clear();">
+      <el-form-item label="文件">
+        <FileSelector ref="fileSelectorRef" :tabsShow="SHOW.ALL" :itemSize="120" :multiple="true" />
+      </el-form-item>
+    </el-dialog>
   </fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import { getBaseURL } from '/@/utils/baseUrl';
+import FileSelector from '/@/components/fileSelector/index.vue';
+import { SHOW } from '/@/components/fileSelector/types';
+
+const selectorVisiable = ref(false);
+const fileSelectorRef = ref<any>(null);
+const getSizeDisplay = (n: number) => n < 1024 ? n + 'b' : (n < 1024 * 1024 ? (n / 1024).toFixed(2) + 'Kb' : (n / (1024 * 1024)).toFixed(2) + 'Mb');
+
+const openAddHandle = async () => {
+  selectorVisiable.value = true;
+  await nextTick();
+}
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -15,7 +42,7 @@ const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
 // 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
+const { crudOptions } = createCrudOptions({ crudExpose, context: { openAddHandle } });
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
@@ -23,4 +50,4 @@ const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 onMounted(() => {
   crudExpose.doRefresh();
 });
-</script>
+</script>