From c781d1f55939ea90ab46db8cea87d9f9dcaa0461 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= Date: Wed, 22 Jan 2025 15:53:01 +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=81image=E7=B1=BB=E5=9E=8B=E7=9A=84=E5=A4=9A?= =?UTF-8?q?=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/fileSelector/index.vue | 37 +- web/src/views/system/fileList/crud.tsx | 493 +++++++++++----------- 2 files changed, 280 insertions(+), 250 deletions(-) diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue index 1e1862c348..e07a91949f 100644 --- a/web/src/components/fileSelector/index.vue +++ b/web/src/components/fileSelector/index.vue @@ -8,7 +8,27 @@ -
+ +
+
+ + + +
+
+ + + +
+
+
@@ -24,10 +44,11 @@
- + +
+
{ while (!target.dataset.id) target = target.parentElement as HTMLElement; let fileId = target.dataset.id; if (props.multiple) { + if (!!!data.value) data.value = []; if (target.classList.contains('active')) { target.classList.remove('active'); flat = -1; } else { target.classList.add('active'); flat = 1; } if (data.value.length) { @@ -394,7 +417,8 @@ const onDataChange = (value: any) => { defineExpose({ data, onDataChange, selectVisiable, clearState, clear }); onMounted(() => { - if (props.multiple && props.inputType !== 'selector') + + if (props.multiple && !['selector', 'image'].includes(props.inputType)) throw new Error('FileSelector组件属性multiple为true时inputType必须为selector'); listRequestAll(); console.log('fileselector tenentmdoe', isTenentMode); @@ -475,4 +499,9 @@ onMounted(() => { top: 2px; cursor: pointer; } + +.itemList { + border: 1px solid #dcdfe6; + border-radius: 8px; +} \ No newline at end of file diff --git a/web/src/views/system/fileList/crud.tsx b/web/src/views/system/fileList/crud.tsx index 5dc388ecbd..48143c45d8 100644 --- a/web/src/views/system/fileList/crud.tsx +++ b/web/src/views/system/fileList/crud.tsx @@ -1,253 +1,254 @@ import * as api from './api'; import { - UserPageQuery, - AddReq, - DelReq, - EditReq, - CrudExpose, - CrudOptions, - CreateCrudOptionsProps, - CreateCrudOptionsRet, - dict + UserPageQuery, + AddReq, + DelReq, + EditReq, + CrudExpose, + CrudOptions, + CreateCrudOptionsProps, + CreateCrudOptionsRet, + dict } from '@fast-crud/fast-crud'; import fileSelector from '/@/components/fileSelector/index.vue'; -import { shallowRef } from 'vue'; export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { - const pageRequest = async (query: UserPageQuery) => { - return await api.GetList(query); - }; - const editRequest = async ({ form, row }: EditReq) => { - form.id = row.id; - return await api.UpdateObj(form); - }; - const delRequest = async ({ row }: DelReq) => { - return await api.DelObj(row.id); - }; - const addRequest = async ({ form }: AddReq) => { - return await api.AddObj(form); - }; - return { - crudOptions: { - actionbar: { - buttons: { - add: { - show: true, - click: () => context.openAddHandle?.() - }, - }, - }, - request: { - pageRequest, - addRequest, - editRequest, - delRequest, - }, - tabs: { - show: true, - name: 'file_type', - type: '', - options: [ - { value: 0, label: '图片' }, - { value: 1, label: '视频' }, - { value: 2, label: '音频' }, - { value: 3, label: '其他' }, - ] - }, - rowHandle: { - //固定右侧 - fixed: 'right', - width: 200, - show: false, - buttons: { - view: { - show: false, - }, - edit: { - iconRight: 'Edit', - type: 'text', - }, - remove: { - iconRight: 'Delete', - type: 'text', - }, - }, - }, - columns: { - _index: { - title: '序号', - form: { show: false }, - column: { - //type: 'index', - align: 'center', - width: '70px', - columnSetDisabled: true, //禁止在列设置中选择 - formatter: (context) => { - //计算序号,你可以自定义计算规则，此处为翻页累加 - let index = context.index ?? 1; - let pagination = crudExpose!.crudBinding.value.pagination; - return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1; - }, - }, - }, - search: { - title: '关键词', - column: { - show: false, - }, - search: { - show: true, - component: { - props: { - clearable: true, - }, - placeholder: '请输入关键词', - }, - }, - form: { - show: false, - component: { - props: { - clearable: true, - }, - }, - }, - }, - name: { - title: '文件名称', - search: { - show: true, - }, - type: 'input', - column: { - minWidth: 200, - }, - form: { - component: { - placeholder: '请输入文件名称', - clearable: true - }, - }, - }, - preview: { - title: '预览', - column: { - minWidth: 120, - align: 'center' - }, - form: { - show: false - } - }, - url: { - title: '文件地址', - type: 'file-uploader', - search: { - disabled: true, - }, - column: { - minWidth: 360, - }, - }, - md5sum: { - title: '文件MD5', - search: { - disabled: true, - }, - column: { - minWidth: 300, - }, - form: { - disabled: false - }, - }, - mime_type: { - title: '文件类型', - type: 'input', - form: { - show: false, - }, - 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 - } - }, - create_datetime: { - title: '创建时间', - column: { - minWidth: 160 - }, - form: { - show: false - } - }, - // fileselectortest: { - // title: '文件选择器测试', - // type: 'file-selector', - // width: 200, - // form: { - // component: { - // name: shallowRef(fileSelector), - // vModel: 'modelValue', - // tabsShow: 0b0100, - // itemSize: 100, - // multiple: false, - // selectable: true, - // showInput: true, - // inputType: 'video', - // valueKey: 'url', - // } - // } - // } - }, - }, - }; + const pageRequest = async (query: UserPageQuery) => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + const addRequest = async ({ form }: AddReq) => { + return await api.AddObj(form); + }; + return { + crudOptions: { + actionbar: { + buttons: { + add: { + show: true, + click: () => context.openAddHandle?.() + }, + }, + }, + request: { + pageRequest, + addRequest, + editRequest, + delRequest, + }, + tabs: { + show: true, + name: 'file_type', + type: '', + options: [ + { value: 0, label: '图片' }, + { value: 1, label: '视频' }, + { value: 2, label: '音频' }, + { value: 3, label: '其他' }, + ] + }, + rowHandle: { + //固定右侧 + fixed: 'right', + width: 200, + show: false, + buttons: { + view: { + show: false, + }, + edit: { + iconRight: 'Edit', + type: 'text', + }, + remove: { + iconRight: 'Delete', + type: 'text', + }, + }, + }, + columns: { + _index: { + title: '序号', + form: { show: false }, + column: { + //type: 'index', + align: 'center', + width: '70px', + columnSetDisabled: true, //禁止在列设置中选择 + formatter: (context) => { + //计算序号,你可以自定义计算规则，此处为翻页累加 + let index = context.index ?? 1; + let pagination = crudExpose!.crudBinding.value.pagination; + return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1; + }, + }, + }, + search: { + title: '关键词', + column: { + show: false, + }, + search: { + show: true, + component: { + props: { + clearable: true, + }, + placeholder: '请输入关键词', + }, + }, + form: { + show: false, + component: { + props: { + clearable: true, + }, + }, + }, + }, + name: { + title: '文件名称', + search: { + show: true, + }, + type: 'input', + column: { + minWidth: 200, + }, + form: { + component: { + placeholder: '请输入文件名称', + clearable: true + }, + }, + }, + preview: { + title: '预览', + column: { + minWidth: 120, + align: 'center' + }, + form: { + show: false + } + }, + url: { + title: '文件地址', + type: 'file-uploader', + search: { + disabled: true, + }, + column: { + minWidth: 360, + }, + }, + md5sum: { + title: '文件MD5', + search: { + disabled: true, + }, + column: { + minWidth: 300, + }, + form: { + disabled: false + }, + }, + mime_type: { + title: '文件类型', + type: 'input', + form: { + show: false, + }, + 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 + } + }, + create_datetime: { + title: '创建时间', + column: { + minWidth: 160 + }, + form: { + show: false + } + }, + fileselectortest: { + title: '文件选择器测试', + type: 'file-selector', + column: { + minWidth: 200 + }, + form: { + component: { + name: fileSelector, + vModel: 'modelValue', + tabsShow: 0b1111, + itemSize: 100, + multiple: true, + selectable: true, + showInput: true, + inputType: 'image', + valueKey: 'url', + } + } + } + }, + }, + }; }; -- Gitee