Commit 534b8dcfbb4f6df19cea48ed2bff36f55d843851
Merge branch 'fix/DEFECT-1565' into 'main_dev'
fix: DEFECT-1565 修复设备导入上传文件后返回上一步文件消失 See merge request yunteng/thingskit-front!859
Showing
2 changed files
with
20 additions
and
8 deletions
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | import { Upload, Button } from 'ant-design-vue'; | 2 | import { Upload, Button } from 'ant-design-vue'; |
3 | import { InboxOutlined } from '@ant-design/icons-vue'; | 3 | import { InboxOutlined } from '@ant-design/icons-vue'; |
4 | - import { computed, ref } from 'vue'; | 4 | + import { computed } from 'vue'; |
5 | import StepContainer from './StepContainer.vue'; | 5 | import StepContainer from './StepContainer.vue'; |
6 | import XLSX, { CellObject } from 'xlsx'; | 6 | import XLSX, { CellObject } from 'xlsx'; |
7 | import { basicProps } from './props'; | 7 | import { basicProps } from './props'; |
@@ -10,15 +10,17 @@ | @@ -10,15 +10,17 @@ | ||
10 | 10 | ||
11 | const props = defineProps({ | 11 | const props = defineProps({ |
12 | ...basicProps, | 12 | ...basicProps, |
13 | + fileList: { | ||
14 | + required: true, | ||
15 | + type: Array as PropType<(Record<'uid' | 'name', string> & File)[]>, | ||
16 | + }, | ||
13 | value: { | 17 | value: { |
14 | require: true, | 18 | require: true, |
15 | type: Object as PropType<UploadFileParseValue>, | 19 | type: Object as PropType<UploadFileParseValue>, |
16 | }, | 20 | }, |
17 | }); | 21 | }); |
18 | 22 | ||
19 | - const emit = defineEmits(['update:value']); | ||
20 | - | ||
21 | - const fileList = ref<Record<'uid' | 'name', string>[]>([]); | 23 | + const emit = defineEmits(['update:value', 'update:fileList']); |
22 | 24 | ||
23 | interface FileRequestParams { | 25 | interface FileRequestParams { |
24 | file: File & { uid: string }; | 26 | file: File & { uid: string }; |
@@ -83,19 +85,19 @@ | @@ -83,19 +85,19 @@ | ||
83 | }; | 85 | }; |
84 | 86 | ||
85 | const handleParseFile = async ({ file, onSuccess, onError }: FileRequestParams) => { | 87 | const handleParseFile = async ({ file, onSuccess, onError }: FileRequestParams) => { |
86 | - fileList.value = []; | ||
87 | const value = await readFile(file); | 88 | const value = await readFile(file); |
88 | if (!value) { | 89 | if (!value) { |
89 | onError(); | 90 | onError(); |
90 | return; | 91 | return; |
91 | } | 92 | } |
92 | - fileList.value = [file]; | 93 | + |
94 | + emit('update:fileList', [file]); | ||
93 | emit('update:value', value); | 95 | emit('update:value', value); |
94 | onSuccess({}, file); | 96 | onSuccess({}, file); |
95 | }; | 97 | }; |
96 | 98 | ||
97 | const canGoNextStep = computed(() => { | 99 | const canGoNextStep = computed(() => { |
98 | - return !!fileList.value.length; | 100 | + return !!props.fileList.length; |
99 | }); | 101 | }); |
100 | 102 | ||
101 | const handlePreviousStep = () => { | 103 | const handlePreviousStep = () => { |
@@ -105,16 +107,22 @@ | @@ -105,16 +107,22 @@ | ||
105 | const handleNextStep = () => { | 107 | const handleNextStep = () => { |
106 | props.goNextStep?.(); | 108 | props.goNextStep?.(); |
107 | }; | 109 | }; |
110 | + | ||
111 | + const handleRemove = () => { | ||
112 | + emit('update:fileList', []); | ||
113 | + return true; | ||
114 | + }; | ||
108 | </script> | 115 | </script> |
109 | 116 | ||
110 | <template> | 117 | <template> |
111 | <StepContainer> | 118 | <StepContainer> |
112 | <div class="">设备文件</div> | 119 | <div class="">设备文件</div> |
113 | <Upload.Dragger | 120 | <Upload.Dragger |
114 | - v-model:fileList="fileList" | 121 | + :fileList="fileList" |
115 | :customRequest="handleParseFile" | 122 | :customRequest="handleParseFile" |
116 | accept=".csv" | 123 | accept=".csv" |
117 | name="file" | 124 | name="file" |
125 | + :remove="handleRemove" | ||
118 | > | 126 | > |
119 | <section class="cursor-pointer flex flex-col justify-center items-center"> | 127 | <section class="cursor-pointer flex flex-col justify-center items-center"> |
120 | <InboxOutlined class="text-[4rem] !text-blue-400" /> | 128 | <InboxOutlined class="text-[4rem] !text-blue-400" /> |
@@ -17,6 +17,8 @@ | @@ -17,6 +17,8 @@ | ||
17 | 17 | ||
18 | const basicInfo = ref({}); | 18 | const basicInfo = ref({}); |
19 | 19 | ||
20 | + const fileList = ref<(File & Record<'uid' | 'name', string>)[]>([]); | ||
21 | + | ||
20 | const fileParseValue = ref<UploadFileParseValue>({ header: [], content: [] }); | 22 | const fileParseValue = ref<UploadFileParseValue>({ header: [], content: [] }); |
21 | 23 | ||
22 | const columnConfiguration = ref<Record<'type', string>[]>([]); | 24 | const columnConfiguration = ref<Record<'type', string>[]>([]); |
@@ -61,6 +63,7 @@ | @@ -61,6 +63,7 @@ | ||
61 | 63 | ||
62 | const reset = () => { | 64 | const reset = () => { |
63 | basicInfo.value = {}; | 65 | basicInfo.value = {}; |
66 | + fileList.value = []; | ||
64 | fileParseValue.value = { header: [], content: [] }; | 67 | fileParseValue.value = { header: [], content: [] }; |
65 | columnConfiguration.value = []; | 68 | columnConfiguration.value = []; |
66 | importResult.value = {} as unknown as ImportDeviceResponse; | 69 | importResult.value = {} as unknown as ImportDeviceResponse; |
@@ -109,6 +112,7 @@ | @@ -109,6 +112,7 @@ | ||
109 | /> | 112 | /> |
110 | <ImportCsv | 113 | <ImportCsv |
111 | v-if="StepsEnum[item] === StepsEnum.IMPORT_FILE && StepsEnum[item] === currentStep" | 114 | v-if="StepsEnum[item] === StepsEnum.IMPORT_FILE && StepsEnum[item] === currentStep" |
115 | + v-model:fileList="fileList" | ||
112 | v-model:value="fileParseValue" | 116 | v-model:value="fileParseValue" |
113 | :go-next-step="goNextStep" | 117 | :go-next-step="goNextStep" |
114 | :go-previous-step="goPreviousStep" | 118 | :go-previous-step="goPreviousStep" |