05 popup

src/modules/05_placement/components/PlacementTable.vue

@@ -28,6 +28,7 @@ const Status = ref<string>();
 const checkList = ref<string>();
 const positionMasterUserNote = ref<string>();
 const $q = useQuasar(); // show dialog
+const files = ref<File[]>([]);
 const clickEditRow = () => {
   editRow.value = true;
 };
@@ -58,22 +59,27 @@ const selectData = (props: TableName) => {
     edit.value = true;
   }
 };
-const editDetail = (props: TableName, action: string) => {
+
+const getNumFile = ref(0);
+const editDetail = (props: TableName, action: "cancel" | "wait") => {
+ 
   if (action === "cancel") {
+    getNumFile.value = 0;
     editRow.value = false;
     modalEdit.value = false;
     modal_right.value = true;
     edit.value = true;
     Name.value = props.Name;
   } else if (action === "wait") {
+    getNumFile.value = 1;
     editRow.value = false;
     modalEdit.value = true;
     modal_right.value = true;
     edit.value = true;
     Name.value = props.Name;
   }
-};
 
+};
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
       "position",
@@ -243,6 +249,7 @@ const clickClose = async () => {
     modal.value = false;
   }
 };
+
 </script>
 <template>
   <q-form ref="myForm">
@@ -328,6 +335,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
           </q-td>
@@ -375,6 +383,20 @@ const clickClose = async () => {
               @update:modelValue="clickEditRow"
               type="textarea"
             />
+            <q-file
+              v-if="getNumFile == 1"
+              v-model="files"
+              dense
+              :label="'เลือกไฟล์เอกสารหลักฐาน'"
+              outlined
+              use-chips
+              multiple
+              class="q-py-sm"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
             <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
           </div>
         </q-card-section>