Commit 534b8dcfbb4f6df19cea48ed2bff36f55d843851

Authored by xp.Huang
2 parents caa8a7fe f9a7dc46

Merge branch 'fix/DEFECT-1565' into 'main_dev'

fix: DEFECT-1565 修复设备导入上传文件后返回上一步文件消失

See merge request yunteng/thingskit-front!859
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"