简柏林 / thingskit-front · Commits

Commit c6bfc535a4d7795adb17788149f2c8f0d09af222

Authored by ww
1 parent 648aa8dd

feat: implement ApiUpload component

Inline Side-by-side
Showing 5 changed files with 51 additions and 44 deletions
@@ -33,6 +33,7 @@ import JAddInput from './externalCompns/components/JAddInput.vue'; @@ -33,6 +33,7 @@ import JAddInput from './externalCompns/components/JAddInput.vue';
33 import { JEasyCron } from './externalCompns/components/JEasyCron'; 33 import { JEasyCron } from './externalCompns/components/JEasyCron';
34 import ColorPicker from './components/ColorPicker.vue'; 34 import ColorPicker from './components/ColorPicker.vue';
35 import IconDrawer from './components/IconDrawer.vue'; 35 import IconDrawer from './components/IconDrawer.vue';
  36 +import ApiUpload from './components/ApiUpload.vue';
36 37
37 const componentMap = new Map<ComponentType, Component>(); 38 const componentMap = new Map<ComponentType, Component>();
38 39
@@ -73,6 +74,7 @@ componentMap.set('JAddInput', JAddInput); @@ -73,6 +74,7 @@ componentMap.set('JAddInput', JAddInput);
73 componentMap.set('JEasyCron', JEasyCron); 74 componentMap.set('JEasyCron', JEasyCron);
74 componentMap.set('ColorPicker', ColorPicker); 75 componentMap.set('ColorPicker', ColorPicker);
75 componentMap.set('IconDrawer', IconDrawer); 76 componentMap.set('IconDrawer', IconDrawer);
  77 +componentMap.set('ApiUpload', ApiUpload);
76 78
77 export function add(compName: ComponentType, component: Component) { 79 export function add(compName: ComponentType, component: Component) {
78 componentMap.set(compName, component); 80 componentMap.set(compName, component);
@@ -7,18 +7,21 @@ @@ -7,18 +7,21 @@
7 import { Upload, Spin } from 'ant-design-vue'; 7 import { Upload, Spin } from 'ant-design-vue';
8 import { InboxOutlined } from '@ant-design/icons-vue'; 8 import { InboxOutlined } from '@ant-design/icons-vue';
9 import { useMessage } from '/@/hooks/web/useMessage'; 9 import { useMessage } from '/@/hooks/web/useMessage';
10 - import { isBoolean, isFunction } from '/@/utils/is';  
11 - import { computed, ref, unref } from 'vue'; 10 + import { computed, ref, unref, useAttrs } from 'vue';
12 import { cloneDeep } from 'lodash-es'; 11 import { cloneDeep } from 'lodash-es';
13 - interface FileItem { 12 + import { isFunction, isObject } from '/@/utils/is';
  13 +
  14 + export interface FileItem {
14 uid: string; 15 uid: string;
15 - name?: string; 16 + name: string;
16 status?: string; 17 status?: string;
17 response?: string; 18 response?: string;
18 url?: string; 19 url?: string;
19 } 20 }
20 21
21 - const emit = defineEmits(['update:fileList']); 22 + const emit = defineEmits(['update:fileList', 'preview', 'download']);
  23 +
  24 + const attrs = useAttrs();
22 25
23 const { createMessage } = useMessage(); 26 const { createMessage } = useMessage();
24 27
@@ -26,8 +29,9 @@ @@ -26,8 +29,9 @@
26 29
27 const componentDisabled = ref(false); 30 const componentDisabled = ref(false);
28 31
29 - const setLoading = (spin: boolean) => {  
30 - loading.value = spin; 32 + const setUploadStatus = (status: boolean) => {
  33 + loading.value = status;
  34 + componentDisabled.value = status;
31 }; 35 };
32 36
33 const props = withDefaults( 37 const props = withDefaults(
@@ -60,28 +64,28 @@ @@ -60,28 +64,28 @@
60 64
61 const getDisabled = computed(() => { 65 const getDisabled = computed(() => {
62 const { disabled } = props; 66 const { disabled } = props;
63 - if (isBoolean(disabled)) {  
64 - return disabled ? componentDisabled.value : disabled;  
65 - }  
66 - return componentDisabled.value; 67 + return disabled ? disabled : unref(componentDisabled);
67 }); 68 });
68 69
69 const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => { 70 const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => {
70 try { 71 try {
71 - setLoading(true);  
72 - componentDisabled.value = true;  
73 - console.log({ componentDisabled: unref(componentDisabled), getDisabled: unref(getDisabled) }); 72 + setUploadStatus(true);
74 const { transformFile, api } = props; 73 const { transformFile, api } = props;
75 if (transformFile && isFunction(transformFile)) file = await transformFile(file as File); 74 if (transformFile && isFunction(transformFile)) file = await transformFile(file as File);
76 if (api && isFunction(api)) { 75 if (api && isFunction(api)) {
77 const data = await api(file); 76 const data = await api(file);
78 - emit('update:fileList', cloneDeep([...props.fileList, data])); 77 + if (isObject(data) && Reflect.has(data, 'uid') && Reflect.has(data, 'name')) {
  78 + emit('update:fileList', cloneDeep([...props.fileList, data]));
  79 + return;
  80 + }
  81 + window.console.error(
  82 + `The ApiUpload component's api properties need to return an object, that object requires a uid field and a name field`
  83 + );
79 } 84 }
80 } catch (error) { 85 } catch (error) {
81 window.console.error(error); 86 window.console.error(error);
82 } finally { 87 } finally {
83 - setLoading(false);  
84 - componentDisabled.value = false; 88 + setUploadStatus(false);
85 } 89 }
86 }; 90 };
87 91
@@ -92,17 +96,34 @@ @@ -92,17 +96,34 @@
92 emit('update:fileList', _fileList); 96 emit('update:fileList', _fileList);
93 }; 97 };
94 98
  99 + const defaultPreview = (file: FileItem) => {
  100 + console.log('default preview', file);
  101 + };
  102 +
  103 + const defaultDownload = (file: FileItem) => {
  104 + console.log('default download', file);
  105 + };
  106 +
95 const handlePreview = (file: FileItem) => { 107 const handlePreview = (file: FileItem) => {
96 - console.log('preview', file); 108 + if (Reflect.has(attrs, 'preview')) {
  109 + emit('preview', file);
  110 + return;
  111 + }
  112 + defaultPreview(file);
97 }; 113 };
98 114
99 const handleDownload = (file: FileItem) => { 115 const handleDownload = (file: FileItem) => {
100 - console.log('download', file); 116 + if (Reflect.has(attrs, 'download')) {
  117 + emit('download', file);
  118 + return;
  119 + }
  120 + defaultDownload(file);
101 }; 121 };
102 </script> 122 </script>
103 123
104 <template> 124 <template>
105 <Upload.Dragger 125 <Upload.Dragger
  126 + class="block"
106 :file-list="props.fileList" 127 :file-list="props.fileList"
107 :disabled="getDisabled" 128 :disabled="getDisabled"
108 :before-upload="handleBeforeUpload" 129 :before-upload="handleBeforeUpload"
@@ -111,7 +132,6 @@ @@ -111,7 +132,6 @@
111 :remove="handleRemove" 132 :remove="handleRemove"
112 > 133 >
113 <Spin :spinning="loading"> 134 <Spin :spinning="loading">
114 - {{ getDisabled }}  
115 <div class="w-full h-full flex flex-col justify-center content-center"> 135 <div class="w-full h-full flex flex-col justify-center content-center">
116 <InboxOutlined class="text-[3rem] !text-blue-500" /> 136 <InboxOutlined class="text-[3rem] !text-blue-500" />
117 <div class="m-2 text-gray-400">点击上传或拖拽上传</div> 137 <div class="m-2 text-gray-400">点击上传或拖拽上传</div>
@@ -119,3 +139,5 @@ @@ -119,3 +139,5 @@
119 </Spin> 139 </Spin>
120 </Upload.Dragger> 140 </Upload.Dragger>
121 </template> 141 </template>
  142 +
  143 +<style></style>
@@ -114,4 +114,5 @@ export type ComponentType = @@ -114,4 +114,5 @@ export type ComponentType =
114 | 'JAddInput' 114 | 'JAddInput'
115 | 'Rate' 115 | 'Rate'
116 | 'ColorPicker' 116 | 'ColorPicker'
117 - | 'IconDrawer'; 117 + | 'IconDrawer'
  118 + | 'ApiUpload';
@@ -7,7 +7,7 @@ export enum PackageField { @@ -7,7 +7,7 @@ export enum PackageField {
7 DEVICE_CONFIGURATION = 'deviceConfiguration', 7 DEVICE_CONFIGURATION = 'deviceConfiguration',
8 PACKAGE_TYPE = 'packageType', 8 PACKAGE_TYPE = 'packageType',
9 PACKAGE_UPDATE_TYPE = 'PackageUpdateType', 9 PACKAGE_UPDATE_TYPE = 'PackageUpdateType',
10 - PACKAGE_BINARY_FILE = 'packageBinaryFile', 10 + PACKAGE_BINARY_FILE = 'fileList',
11 PACKAGE_EXTERNAL_URL = 'packageEexternalUrl', 11 PACKAGE_EXTERNAL_URL = 'packageEexternalUrl',
12 CHECK_SUM_WAY = 'checkSumWay', 12 CHECK_SUM_WAY = 'checkSumWay',
13 ALG = 'alg', 13 ALG = 'alg',
@@ -119,9 +119,11 @@ export const formSchema: FormSchema[] = [ @@ -119,9 +119,11 @@ export const formSchema: FormSchema[] = [
119 ifShow: ({ model }) => { 119 ifShow: ({ model }) => {
120 return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE; 120 return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE;
121 }, 121 },
122 - component: 'Upload', 122 + component: 'ApiUpload',
  123 + valueField: PackageField.PACKAGE_BINARY_FILE,
  124 + changeEvent: `update:${PackageField.PACKAGE_BINARY_FILE}`,
123 componentProps: { 125 componentProps: {
124 - api: () => { 126 + api: (_file: File) => {
125 return {}; 127 return {};
126 }, 128 },
127 }, 129 },
@@ -5,8 +5,6 @@ @@ -5,8 +5,6 @@
5 import { BasicTable, useTable } from '/@/components/Table'; 5 import { BasicTable, useTable } from '/@/components/Table';
6 import PackageDetailModal from './components/PackageDetailModal.vue'; 6 import PackageDetailModal from './components/PackageDetailModal.vue';
7 import { useModal } from '/@/components/Modal'; 7 import { useModal } from '/@/components/Modal';
8 - // import { ApiUpload } from '/@/components/Form';  
9 - // import { ref } from 'vue';  
10 8
11 const [register] = useTable({ 9 const [register] = useTable({
12 columns, 10 columns,
@@ -24,28 +22,10 @@ @@ -24,28 +22,10 @@
24 const handleCreatePackage = () => { 22 const handleCreatePackage = () => {
25 openModal(true); 23 openModal(true);
26 }; 24 };
27 -  
28 - // const fileList = ref([]);  
29 - // const handleUpload = async (file: File) => {  
30 - // console.log(file);  
31 - // return new Promise((resolve) => {  
32 - // setTimeout(() => {  
33 - // resolve({  
34 - // uid: file.uid,  
35 - // type: file.type,  
36 - // name: file.name,  
37 - // linkProps: { download: 'http://www.baidu.cn' },  
38 - // });  
39 - // }, 3000);  
40 - // });  
41 - // };  
42 </script> 25 </script>
43 26
44 <template> 27 <template>
45 <PageWrapper dense contentFullHeight contentClass="flex flex-col"> 28 <PageWrapper dense contentFullHeight contentClass="flex flex-col">
46 - <!-- <div class="w-40 h-40">  
47 - <ApiUpload v-model:file-list="fileList" :api="handleUpload" />  
48 - </div> -->  
49 <BasicTable @register="register"> 29 <BasicTable @register="register">
50 <template #toolbar> 30 <template #toolbar>
51 <Button @click="handleCreatePackage" type="primary">新增包</Button> 31 <Button @click="handleCreatePackage" type="primary">新增包</Button>