fix: Issues #259 done.

src/views/Upload/index.vue

@@ -14,15 +14,8 @@
         <!-- Upload text -->
         <div>
           <div v-if="!isDisabled"></div>
-          <div v-else-if="isInform" class="flex justify-start items-center space-x-2 duration-700">
-            <span class="material-symbols-outlined text-primary">notifications</span>
-            <p class="text-primary text-sm">
-              Please verify the label for each column before uploading.
-            </p>
-          </div>
           <div v-else class="flex justify-start items-center space-x-2 duration-700">
-            <span class="material-symbols-outlined material-fill text-danger">warning</span>
-            <p class="text-danger text-sm">
+            <p class="text-primary text-sm">
               Need to select
               <span v-for="(item, index) in informData" :key="index">{{ item.label }}<span v-if="index !== informData.length - 1">, </span></span>.
             </p>
@@ -51,12 +44,12 @@
                 v-model="selectedColumns[index]"
                 :options="columnType"
                 optionLabel="name"
-                placeholder="Not Assigned"
-                class="w-full !border-neutral-500"
+                placeholder=""
+                class="w-52 !border-neutral-500"
                 :data-type="item"
                 :inputId="index.toString()"
-                :inputClass="selectedColumns[index]?.color"
-                inputClass="!text-sm">
+                :inputClass="[selectedColumns[index]?.color, 'text-sm']"
+                >
                   <template #option="slotProps">
                     <div :class="slotProps.option.color" class="text-sm">
                       <span>{{ slotProps.option.name }}</span>
@@ -122,8 +115,7 @@ export default {
         { name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
       ],
       selectedColumns: [],
-      isInform: true, // true: 藍字提示; false: 紅字提示
-      informData: [], // 紅字提示，尚未選擇的 type
+      informData: [], // 藍字提示，尚未選擇的 type
       repeatedData: [], // 紅字提示，重複選擇的 type
       fileName: this.uploadFileName,
     };
@@ -197,7 +189,7 @@ export default {
       return width;
     },
     /**
-     * 驗證，根據新的 selectedColumns 更新 isInform、informData 和 repeatedData
+     * 驗證，根據新的 selectedColumns 更新 informData 和 repeatedData
      * @param {Array} data
      */
     updateValidationData(data) {
@@ -225,7 +217,6 @@ export default {
           this.informData = this.columnType.filter(item => item.required ? !selectedData.includes(item.name) : false);
         }
       });
-      this.isInform = (this.informData.length === 0 && this.repeatedData.length === 0) ? true : false;
     },
     /**
      * Reset Button
@@ -296,7 +287,7 @@ export default {
       this.uploadConfirm(fetchData);
     },
   },
-  mounted() {
+  async mounted() {
     // 只監聽第一次
     let unwatch = this.$watch('fileName', (newValue) => {
         if (newValue) {
@@ -308,9 +299,9 @@ export default {
       },
       { immediate: true }
     );
-    this.isInform = true; // 初始為藍字提示
     this.showEdit = true;
-    if(this.uploadId) this.filesStore.getUploadDetail();
+    if(this.uploadId) await this.filesStore.getUploadDetail();
+    this.selectedColumns = await Array.from({ length: this.uploadDetail.columns.length }, () => this.columnType[this.columnType.length - 1]); // 預設選 Not Assigned
     unwatch();
     this.isLoading = false;
   },