提交 b609ba4c 编写于 作者: jlj05024111@163.com's avatar jlj05024111@163.com

feat: 更新文件上传-单项编辑器&更新dsf-web插件包

上级 0dc5c0a9
...@@ -120,6 +120,7 @@ import { ...@@ -120,6 +120,7 @@ import {
IBizGridPicker, IBizGridPicker,
GridEditor, GridEditor,
IBizSwitch, IBizSwitch,
IBizFileUploadOne,
} from './components/editor'; } from './components/editor';
export const AppRegister = { export const AppRegister = {
...@@ -231,6 +232,7 @@ export const AppRegister = { ...@@ -231,6 +232,7 @@ export const AppRegister = {
v.component('QuickSearch', QuickSearch); v.component('QuickSearch', QuickSearch);
v.component('NotSupportedEditor', NotSupportedEditor); v.component('NotSupportedEditor', NotSupportedEditor);
v.component('IBizSwitch', IBizSwitch); v.component('IBizSwitch', IBizSwitch);
v.component('IBizFileUploadOne', IBizFileUploadOne);
// 注册表格编辑器 // 注册表格编辑器
v.component('IBizGridInput', IBizGridInput); v.component('IBizGridInput', IBizGridInput);
v.component('IBizGridSpan', IBizGridSpan); v.component('IBizGridSpan', IBizGridSpan);
......
import { defineComponent, ref } from 'vue';
import {
getEditorEmits,
getUploadProps,
useNamespace,
} from '@ibiz-template/vue-util';
import '@ibiz-template/theme/style/components/editor/ibiz-file-upload/ibiz-file-upload.scss';
import { useIViewUpload } from '../use/use-iview-upload';
export const IBizFileUploadOne = defineComponent({
name: 'IBizFileUploadOne',
props: getUploadProps(),
emits: getEditorEmits(),
setup(props, { emit }) {
const ns = useNamespace('file-upload');
const c = props.controller;
const fileUpload = ref();
const {
uploadUrl,
headers,
files,
onDownload,
onError,
onRemove,
onSuccess,
beforeUpload,
} = useIViewUpload(
props,
value => {
emit('change', value);
},
c,
);
const handleBeforeUpload = (_files: IData) => {
// 先清除之前的文件 todo
fileUpload.value.clearFiles();
return beforeUpload();
};
return {
ns,
c,
uploadUrl,
headers,
files,
fileUpload,
onDownload,
onError,
onRemove,
onSuccess,
beforeUpload,
handleBeforeUpload,
};
},
render(h) {
return (
<div
class={[
this.ns.b(),
this.disabled ? this.ns.m('disabled') : '',
this.readonly ? this.ns.m('readonly') : '',
]}
>
{h(
'IUpload',
{
ref: 'fileUpload',
props: {
action: this.uploadUrl,
headers: this.headers,
disabled: this.disabled,
'default-file-list': this.files,
multiple: false,
type: this.c.model.isDrag ? 'drag' : 'select',
accept: this.c.model.accept,
'before-upload': this.handleBeforeUpload,
'on-success': this.onSuccess,
'on-error': this.onError,
'on-remove': this.onRemove,
'on-preview': this.onDownload,
},
},
[
this.c.model.isDrag ? (
<div class={this.ns.b('drag-box')}>
<i-icon type='md-cloud-upload' />
<div class={this.ns.be('drag-box', 'text')}>
<span>将文件拖到此处,或</span>
<span>点击上传</span>
</div>
</div>
) : (
<i-button
icon='ios-cloud-upload-outline'
class={this.ns.b('button')}
>
上传文件
</i-button>
),
],
)}
</div>
);
},
});
export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload'; export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload';
export { IBizGridFileUpload } from './ibiz-grid-file-upload/ibiz-grid-file-upload'; export { IBizGridFileUpload } from './ibiz-grid-file-upload/ibiz-grid-file-upload';
export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload'; export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload';
export { IBizFileUploadOne } from './ibiz-file-upload/ibiz-file-upload-one';
...@@ -100,10 +100,19 @@ export function useIViewUpload( ...@@ -100,10 +100,19 @@ export function useIViewUpload(
* @date 2022-11-17 14:11:54 * @date 2022-11-17 14:11:54
*/ */
const emitValue = () => { const emitValue = () => {
const _files = [...files.value, ...uploadCache.cacheFiles]; // 多选是合并,单选是替换
let _files = [];
if (c.model.editorType === 'FILEUPLOADER_ONE') {
files.value = [];
_files = [uploadCache.cacheFiles[uploadCache.cacheFiles.length - 1]];
} else {
_files = [...files.value, ...uploadCache.cacheFiles];
}
const value: string | null = const value: string | null =
_files.length > 0 _files.length > 0
? JSON.stringify(_files.map(file => ({ name: file.name, id: file.id }))) ? JSON.stringify(
_files.map((file: IData) => ({ name: file.name, id: file.id })),
)
: null; : null;
uploadCache.cacheFiles = []; uploadCache.cacheFiles = [];
valueChange(value); valueChange(value);
......
...@@ -22,6 +22,8 @@ export class FileUploaderEditorProvider implements IEditorProvider { ...@@ -22,6 +22,8 @@ export class FileUploaderEditorProvider implements IEditorProvider {
constructor(editorType: string) { constructor(editorType: string) {
if (editorType.includes('PICTURE')) { if (editorType.includes('PICTURE')) {
this.formEditor = 'IBizImageUpload'; this.formEditor = 'IBizImageUpload';
} else if (editorType === 'FILEUPLOADER_ONE') {
this.formEditor = 'IBizFileUploadOne';
} else if (editorType.includes('FILEUPLOADER')) { } else if (editorType.includes('FILEUPLOADER')) {
this.formEditor = 'IBizFileUpload'; this.formEditor = 'IBizFileUpload';
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册