no message

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

@@ -26,9 +26,17 @@ const ReportingDate = ref<string>();
 const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
-
+const positionMasterUserNote = ref<string>();
 const $q = useQuasar(); // show dialog
-
+const clickEditRow = () => {
+  editRow.value = true;
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 const selectData = (props: TableName) => {
   if (editvisible.value == true) {
     editRow.value = false;
@@ -50,15 +58,14 @@ const selectData = (props: TableName) => {
     edit.value = true;
   }
 };
-const editDetail = (props:TableName, action:string) => {
-  if (action === 'cancel') {
+const editDetail = (props: TableName, action: string) => {
+  if (action === "cancel") {
     editRow.value = false;
     modalEdit.value = false;
     modal_right.value = true;
     edit.value = true;
     Name.value = props.Name;
-
-  } else if(action === 'wait'){
+  } else if (action === "wait") {
     editRow.value = false;
     modalEdit.value = true;
     modal_right.value = true;
@@ -88,8 +95,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Name",
@@ -110,8 +115,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "ExamOrder",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Unit",
@@ -143,8 +146,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Status",
@@ -331,46 +332,59 @@ const clickClose = async () => {
             </div>
           </q-td>
         </q-tr>
-        <q-dialog v-model="modal" persistent>
-          <q-card style="width: 800px">
-            <q-form ref="myForm">
-              <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-              <DialogHeader
-                :tittle="`รายละเอียดของ${Name}`"
-                :close="clickClose"
-              />
-              <q-separator />
-              <q-card-section class="q-p-sm"> text </q-card-section>
-              <q-separator />
-              <DialogFooter
-                :save="clickSave"
-                v-model:editvisible="edit"
-                v-model:modalEdit="modalEdit"
-              />
-            </q-form>
-          </q-card>
-        </q-dialog>
-
-        <q-dialog v-model="modal_right" persistent>
-          <q-card style="width: 800px">
-            <q-form ref="myForm">
-              <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-              <DialogHeader
-                :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
-                :close="clickClose"
-              />
-              <q-separator />
-              <q-card-section class="q-p-sm"> text </q-card-section>
-              <q-separator />
-              <DialogFooter
-                :save="clickSave"
-                v-model:editvisible="edit"
-                v-model:modalEdit="modalEdit"
-              />
-            </q-form>
-          </q-card>
-        </q-dialog>
       </template>
     </Table>
   </q-form>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader :tittle="`รายละเอียดของ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm"> text </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :save="clickSave"
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="modal_right" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader
+          :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="positionMasterUserNote"
+              :label="`${'กรอกเหตุผล'}`"
+              @update:modelValue="clickEditRow"
+              type="textarea"
+            />
+            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :save="clickSave"
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>