文件选择器支持image类型的多选
This commit is contained in:
阿辉
@@ -8,7 +8,27 @@
|
||||
<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"
|
||||
|
||||
<div v-if="props.inputType === 'image' && props.multiple"
|
||||
style="width: 100%; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px;">
|
||||
<el-image v-for="item, index in (data || [])" :src="item" :key="index" fit="scale-down" class="itemList"
|
||||
:style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }" />
|
||||
<div style="position: relative;" :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
|
||||
<div
|
||||
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) && !props.multiple" class="closeHover" :size="16"
|
||||
@click="clear">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.inputType === 'image' && !props.multiple" class="form-display" style="position: relative;"
|
||||
@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' }">
|
||||
@@ -24,10 +44,11 @@
|
||||
</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">
|
||||
<el-icon v-show="(!!data && !props.disabled) && !props.multiple" 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;"
|
||||
@@ -46,6 +67,7 @@
|
||||
<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;"
|
||||
@@ -199,7 +221,7 @@ const props = defineProps({
|
||||
tabsShow: { type: Number, default: SHOW.ALL },
|
||||
|
||||
// 是否可以多选，默认单选
|
||||
// 该值为true时inputType必须是selector（暂不支持其他type的多选）
|
||||
// 该值为true时inputType必须是selector或image（暂不支持其他type的多选）
|
||||
multiple: { type: Boolean, default: false },
|
||||
|
||||
// 是否可选，该参数用于只上传和展示而不选择和绑定model的情况
|
||||
@@ -274,6 +296,7 @@ const onItemClick = async (e: MouseEvent) => {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@@ -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',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user