ui ==> Workflow

src/components/Workflow/DialogSelectPerson.vue

@@ -12,11 +12,9 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const operator = defineModel<string>("operator", {
-  default: "officer",
-});
 
 /** table*/
+const selected = ref<any[]>([]);
 const rows = ref<any[]>([
   {
     fullName: "นายศรัณย์ ศิลาดี",
@@ -25,7 +23,6 @@ const rows = ref<any[]>([
     organization: "",
   },
 ]);
-const selected = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -65,25 +62,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
 function fetchLists() {}
 
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
-function convertLabelBtn(name: string) {
-  switch (name) {
-    case "officer":
-      return "การเจ้าหน้าที่";
-    case "personnelOfficer":
-      return "สำนักงานการเจ้าหน้าที่";
-    case "commander":
-      return "ผู้บังคับบัญชา";
-    case "authority":
-      return "ผู้มีอำนาจ";
-  }
-}
-
 function onCloseModal() {
   modal.value = false;
   selected.value = [];
@@ -115,7 +103,6 @@ watch(modal, (val) => {
             :paging="true"
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
-            class="tableTb"
             selection="single"
             v-model:selected="selected"
           >
@@ -152,19 +139,51 @@ watch(modal, (val) => {
                 </q-td>
               </q-tr>
             </template>
-          </d-table></q-card-section
-        >
+          </d-table>
+          <div class="q-gutter-xs q-pt-sm">
+            <div>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isAcknowledge"
+                label="ให้เลือกรับทราบ"
+                @update:model-value="(isConsider = false), (isComment = false)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isConsider"
+                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isComment"
+                label="ให้แสดงความเห็นในเอกสาร"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
         <q-separator />
 
         <q-card-actions align="right">
           <q-btn
-            :label="convertLabelBtn(operator)"
+            label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
             color="public"
             type="submit"
-            :disable="selected.length === 0"
+            :disable="
+              selected.length === 0 ||
+              (!isAcknowledge && !isConsider && !isComment)
+            "
           >
-            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
           </q-btn>
         </q-card-actions>
       </q-form>