feat:add Table Operator

src/api/18_command/api.command.ts

@@ -27,4 +27,5 @@ export default {
   commandDirector: `${env.API_URI}/org/profile/commander-director`,
 
   commandEditSalary: `${command}/tab2/edit-salary`,
+  commandOperator: `${env.API_URI}/org/commandoperator`,
 };

src/modules/18_command/components/Step/1_Detail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import { useRoute } from "vue-router";
 
 import http from "@/plugins/http";
@@ -9,8 +9,10 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 
 import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
+import type { DataOperators } from "@/modules/18_command/interface/response/Main";
 
 import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
+import Dialog1_AddOperator from "@/modules/18_command/components/Step/Dialog1_AddOperetor.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -23,6 +25,7 @@ const {
   success,
   dialogConfirm,
   convertDateToAPI,
+  dialogRemove,
 } = useCounterMixin();
 
 /**
@@ -37,6 +40,7 @@ const props = defineProps({
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 const commandCode = ref<string>(""); //รหัสคำสั่ง
+const createdUserId = ref<string>(""); //ID ผู้สร้างคำสั่ง
 // ฟอร์มข้อมูล
 let formData = reactive<FormDataDetail>({
   issue: null, //คำสั่งเรื่อง
@@ -54,6 +58,57 @@ const commandChapter = ref<string>(""); //ตอนที่
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 const isIdofficer = ref<boolean>(false); //เช็ค สกจ.
 
+const rows = ref<Array<DataOperators>>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "roleName",
+    label: "บทบาท",
+    field: "roleName",
+    align: "left",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    label: "ชื่อ-นามสกุล",
+    field: "name",
+    align: "left",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+    },
+  },
+  {
+    name: "posNo",
+    label: "เลขที่ตำแหน่ง",
+    field: "posNo",
+    align: "left",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    label: "ตำแหน่ง",
+    field: "position",
+    align: "left",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<Array<string>>([
+  "name",
+  "posNo",
+  "position",
+  "roleName",
+]);
+
+const modalAddOperator = ref<boolean>(false); // แสดงเพิ่มรายชื่อเจ้าหน้าที่ดำเนินการ
+
 /** ฟังก์ชันเช็ค สกจ.*/
 async function fetchCheckIdofficer() {
   await http
@@ -97,311 +152,496 @@ async function onSubmit() {
   });
 }
 
+/** ฟังกชันดึงข้อมูลรายชื่อเจ้าหน้าที่ดำเนินการ */
+async function fetchDataOperatorList() {
+  try {
+    const res = await http.get(
+      config.API.commandOperator + `/${commandId.value}`
+    );
+
+    const data = res.data.result;
+    rows.value = data;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
 /**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ * ฟังก์ชันเลื่อนลำดับเจ้าหน้าที่ดำเนินการ
+ * @param type ประเภท UP,DOWN
+ * @param id ID เจ้าหน้าที่ดำเนินการที่ต้องการแก้ไขลำดับ
  */
+function onSwapData(type: string, id: string) {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      await http.get(config.API.commandOperator + `/swap/${type}/${id}`);
+
+      await fetchDataOperatorList();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันลบเจ้าหน้าที่ดำเนินการ
+ * @param id ID ที่ต้องการลบ
+ */
+function onDeleteData(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    try {
+      await http.delete(
+        config.API.commandOperator + `/${commandId.value}/${id}`
+      );
+
+      await fetchDataOperatorList();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
-  await fetchCheckIdofficer();
+  try {
-  formData.commandNo = props.formCommandList.commandNo;
+    showLoader();
-  formData.commandYear = props.formCommandList.commandYear;
+    await fetchCheckIdofficer();
-  formData.detailHeader = props.formCommandList.detailHeader;
+    await fetchDataOperatorList();
-  formData.detailBody = props.formCommandList.detailBody;
+    formData.commandNo = props.formCommandList.commandNo;
-  formData.detailFooter = props.formCommandList.detailFooter;
+    formData.commandYear = props.formCommandList.commandYear;
-  formData.issue = props.formCommandList.issue;
+    formData.detailHeader = props.formCommandList.detailHeader;
-  formData.commandAffectDate = props.formCommandList.commandAffectDate;
+    formData.detailBody = props.formCommandList.detailBody;
-  formData.commandExcecuteDate = props.formCommandList.commandExcecuteDate;
+    formData.detailFooter = props.formCommandList.detailFooter;
-  formData.isBangkok = !isIdofficer.value
+    formData.issue = props.formCommandList.issue;
-    ? null
+    formData.commandAffectDate = props.formCommandList.commandAffectDate;
-    : props.formCommandList.isBangkok;
+    formData.commandExcecuteDate = props.formCommandList.commandExcecuteDate;
-  commandCode.value = props.formCommandList.commandCode;
+    formData.isBangkok = !isIdofficer.value
-  const [volume, chapter] = props.formCommandList.commandNo.split("/");
+      ? null
-  commandVolume.value = volume || "";
+      : props.formCommandList.isBangkok;
-  commandChapter.value = chapter || "";
+    commandCode.value = props.formCommandList.commandCode;
+    const [volume, chapter] = props.formCommandList.commandNo.split("/");
+    commandVolume.value = volume || "";
+    commandChapter.value = chapter || "";
+    createdUserId.value = props.formCommandList.createdUserId || "";
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <div class="q-col-gutter-sm">
-    <q-card-section>
+    <div class="col">
-      <div class="row q-col-gutter-sm">
+      <q-card flat bordered>
-        <div class="col-12">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
-          <q-input
+          <q-card-section>
-            :class="store.classInput(!store.readonly)"
+            <div class="row q-col-gutter-sm">
-            :readonly="store.readonly"
+              <div class="col-12">
-            outlined
+                <q-input
-            dense
+                  :class="store.classInput(!store.readonly)"
-            v-model="formData.issue"
+                  :readonly="store.readonly"
-            hide-bottom-space
+                  outlined
-            :label="`${'คำสั่งเรื่อง'}`"
+                  dense
-            @update:model-value="onCheckChangeData()"
+                  v-model="formData.issue"
-          />
+                  hide-bottom-space
-        </div>
+                  :label="`${'คำสั่งเรื่อง'}`"
+                  @update:model-value="onCheckChangeData()"
+                />
+              </div>
 
-        <div :class="commandCode !== 'C-PM-47' ? 'col-4' : 'col-12'">
+              <div :class="commandCode !== 'C-PM-47' ? 'col-4' : 'col-12'">
-          <div class="col-12 row q-col-gutter-sm">
+                <div class="col-12 row q-col-gutter-sm">
-            <div class="col-6" v-if="commandCode !== 'C-PM-47'">
+                  <div class="col-6" v-if="commandCode !== 'C-PM-47'">
-              <q-input
+                    <q-input
-                :class="store.classInput(!store.readonly)"
+                      :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
+                      :readonly="store.readonly"
-                outlined
+                      outlined
-                dense
+                      dense
-                v-model="formData.commandNo"
+                      v-model="formData.commandNo"
-                hide-bottom-space
+                      hide-bottom-space
-                :label="`${'คำสั่งเลขที่'}`"
+                      :label="`${'คำสั่งเลขที่'}`"
-                @update:model-value="onCheckChangeData()"
+                      @update:model-value="onCheckChangeData()"
-              />
+                    />
-            </div>
+                  </div>
-            <label
+                  <label
-              class="col-1 flex justify-center items-center text-bold"
+                    class="col-1 flex justify-center items-center text-bold"
-              v-if="commandCode !== 'C-PM-47'"
+                    v-if="commandCode !== 'C-PM-47'"
-            >
-              /
-            </label>
-            <div class="col-4" v-if="commandCode === 'C-PM-47'">
-              <q-input
-                :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
-                outlined
-                dense
-                v-model="commandVolume"
-                hide-bottom-space
-                :label="`${'เล่มที่'}`"
-                @update:model-value="onCheckChangeData()"
-              />
-            </div>
-
-            <div class="col-4" v-if="commandCode === 'C-PM-47'">
-              <q-input
-                :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
-                outlined
-                dense
-                v-model="commandChapter"
-                hide-bottom-space
-                :label="`${'ตอนที่'}`"
-                @update:model-value="onCheckChangeData()"
-              />
-            </div>
-
-            <div :class="commandCode !== 'C-PM-47' ? 'col-5' : 'col-4'">
-              <datepicker
-                v-model="formData.commandYear"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
-                @update:model-value="onCheckChangeData()"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    hide-bottom-space
-                    :class="store.classInput(!store.readonly)"
-                    :readonly="store.readonly"
-                    :model-value="
-                      formData.commandYear == null
-                        ? null
-                        : formData.commandYear + 543
-                    "
-                    label="ปี พ.ศ."
                   >
-                    <template v-slot:prepend>
+                    /
-                      <q-icon
+                  </label>
-                        name="event"
+                  <div class="col-4" v-if="commandCode === 'C-PM-47'">
-                        class="cursor-pointer"
+                    <q-input
-                        style="color: var(--q-primary)"
+                      :class="store.classInput(!store.readonly)"
-                      >
+                      :readonly="store.readonly"
-                      </q-icon>
+                      outlined
-                    </template>
+                      dense
-                  </q-input>
+                      v-model="commandVolume"
+                      hide-bottom-space
+                      :label="`${'เล่มที่'}`"
+                      @update:model-value="onCheckChangeData()"
+                    />
+                  </div>
+
+                  <div class="col-4" v-if="commandCode === 'C-PM-47'">
+                    <q-input
+                      :class="store.classInput(!store.readonly)"
+                      :readonly="store.readonly"
+                      outlined
+                      dense
+                      v-model="commandChapter"
+                      hide-bottom-space
+                      :label="`${'ตอนที่'}`"
+                      @update:model-value="onCheckChangeData()"
+                    />
+                  </div>
+
+                  <div :class="commandCode !== 'C-PM-47' ? 'col-5' : 'col-4'">
+                    <datepicker
+                      v-model="formData.commandYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :class="store.classInput(!store.readonly)"
+                      :readonly="store.readonly"
+                      @update:model-value="onCheckChangeData()"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          hide-bottom-space
+                          :class="store.classInput(!store.readonly)"
+                          :readonly="store.readonly"
+                          :model-value="
+                            formData.commandYear == null
+                              ? null
+                              : formData.commandYear + 543
+                          "
+                          label="ปี พ.ศ."
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4">
+                <datepicker
+                  clearable
+                  v-model="formData.commandAffectDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  @update:model-value="onCheckChangeData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      hide-bottom-space
+                      :class="store.classInput(!store.readonly)"
+                      :readonly="store.readonly"
+                      :model-value="
+                        formData.commandAffectDate == null
+                          ? null
+                          : date2Thai(formData.commandAffectDate)
+                      "
+                      :label="`${'วันที่ลงนาม'}`"
+                      @clear="() => (formData.commandAffectDate = null)"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-4">
+                <datepicker
+                  clearable
+                  v-model="formData.commandExcecuteDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  @update:model-value="onCheckChangeData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      hide-bottom-space
+                      :class="store.classInput(!store.readonly)"
+                      :readonly="store.readonly"
+                      :model-value="
+                        formData.commandExcecuteDate == null
+                          ? null
+                          : date2Thai(formData.commandExcecuteDate)
+                      "
+                      :label="`${'วันที่คำสั่งมีผล'}`"
+                      @clear="() => (formData.commandExcecuteDate = null)"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <!-- เนื้อหาคำสั่งส่วนต้น -->
+              <div class="col-12" v-if="commandCode !== 'C-PM-47'">
+                <q-input
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  outlined
+                  dense
+                  v-model="formData.detailHeader"
+                  hide-bottom-space
+                  :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
+                  @update:model-value="onCheckChangeData()"
+                  type="textarea"
+                />
+              </div>
+
+              <!-- เนื้อหาคำสั่งส่วนกลาง -->
+              <div class="col-12" v-if="commandCode !== 'C-PM-47'">
+                <q-input
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  outlined
+                  dense
+                  v-model="formData.detailBody"
+                  hide-bottom-space
+                  :label="`${'เนื้อหาคำสั่งหลัก'}`"
+                  @update:model-value="onCheckChangeData()"
+                  type="textarea"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
+                  lazy-rules
+                />
+              </div>
+
+              <!-- เนื้อหาคำสั่งส่วนท้าย -->
+              <div class="col-12" v-if="commandCode !== 'C-PM-47'">
+                <q-input
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  outlined
+                  dense
+                  v-model="formData.detailFooter"
+                  hide-bottom-space
+                  :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
+                  @update:model-value="onCheckChangeData()"
+                  type="textarea"
+                />
+              </div>
+
+              <div
+                class="col-12 q-gutter-sm"
+                v-if="isIdofficer && commandCode !== 'C-PM-47'"
+              >
+                <q-radio
+                  :disable="store.readonly"
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="formData.isBangkok"
+                  label="คำสั่งสำนักปลัดกรุงเทพมหานคร"
+                  val="OFFICE"
+                />
+
+                <q-radio
+                  :disable="store.readonly"
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="formData.isBangkok"
+                  label="คำสั่งกรุงเทพมหานคร"
+                  val="BANGKOK"
+                />
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-separator />
+
+          <q-card-actions align="right" v-if="!store.readonly">
+            <q-btn label="บันทึก" color="public" type="submit" />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </div>
+
+    <div class="col">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12" v-if="!store.readonly">
+              <q-btn
+                icon="add"
+                flat
+                round
+                color="primary"
+                unelevated
+                @click.prevent.stop="modalAddOperator = true"
+              >
+                <q-tooltip>เพิ่มรายชื่อเจ้าหน้าที่ดำเนินการ</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-12">
+              <d-table
+                :rows="rows"
+                :columns="columns"
+                :visible-columns="visibleColumns"
+                row-key="name"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width v-if="!store.readonly" />
+
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
                 </template>
-              </datepicker>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <q-td auto-width v-if="!store.readonly">
+                      <q-btn
+                        icon="mdi-arrow-up-bold"
+                        :color="
+                          props.pageIndex === 0 || rows.length === 0
+                            ? 'grey'
+                            : 'green'
+                        "
+                        flat
+                        dense
+                        round
+                        :disable="props.pageIndex === 0 || rows.length === 0"
+                        @click.prevent.stop="onSwapData('up', props.row.id)"
+                      >
+                        <q-tooltip>เลื่อนขึ้น</q-tooltip>
+                      </q-btn>
+
+                      <q-btn
+                        icon="mdi-arrow-down-bold"
+                        :color="
+                          props.pageIndex === rows.length - 1 ||
+                          rows.length === 0
+                            ? 'grey'
+                            : 'red'
+                        "
+                        flat
+                        dense
+                        round
+                        :disable="
+                          props.pageIndex === rows.length - 1 ||
+                          rows.length === 0
+                        "
+                        @click.prevent.stop="onSwapData('down', props.row.id)"
+                      >
+                        <q-tooltip>เลื่อนลง</q-tooltip>
+                      </q-btn>
+
+                      <q-btn
+                        icon="mdi-delete"
+                        :color="
+                          props.row.roleName === 'เจ้าหน้าที่ดำเนินการ'
+                            ? 'grey'
+                            : 'red'
+                        "
+                        flat
+                        dense
+                        round
+                        :disable="props.row.roleName === 'เจ้าหน้าที่ดำเนินการ'"
+                        @click.prevent.stop="onDeleteData(props.row.id)"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div>
+                        {{ col.value ?? "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
             </div>
           </div>
-        </div>
+        </q-card-section>
-
+      </q-card>
-        <div class="col-4">
+    </div>
-          <datepicker
+  </div>
-            clearable
-            v-model="formData.commandAffectDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            :class="store.classInput(!store.readonly)"
-            :readonly="store.readonly"
-            @update:model-value="onCheckChangeData()"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                clearable
-                dense
-                outlined
-                hide-bottom-space
-                :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
-                :model-value="
-                  formData.commandAffectDate == null
-                    ? null
-                    : date2Thai(formData.commandAffectDate)
-                "
-                :label="`${'วันที่ลงนาม'}`"
-                @clear="() => (formData.commandAffectDate = null)"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-
-        <div class="col-4">
-          <datepicker
-            clearable
-            v-model="formData.commandExcecuteDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            :class="store.classInput(!store.readonly)"
-            :readonly="store.readonly"
-            @update:model-value="onCheckChangeData()"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                clearable
-                dense
-                outlined
-                hide-bottom-space
-                :class="store.classInput(!store.readonly)"
-                :readonly="store.readonly"
-                :model-value="
-                  formData.commandExcecuteDate == null
-                    ? null
-                    : date2Thai(formData.commandExcecuteDate)
-                "
-                :label="`${'วันที่คำสั่งมีผล'}`"
-                @clear="() => (formData.commandExcecuteDate = null)"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-
-        <!-- เนื้อหาคำสั่งส่วนต้น -->
-        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
-          <q-input
-            :class="store.classInput(!store.readonly)"
-            :readonly="store.readonly"
-            outlined
-            dense
-            v-model="formData.detailHeader"
-            hide-bottom-space
-            :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
-            @update:model-value="onCheckChangeData()"
-            type="textarea"
-          />
-        </div>
-
-        <!-- เนื้อหาคำสั่งส่วนกลาง -->
-        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
-          <q-input
-            :class="store.classInput(!store.readonly)"
-            :readonly="store.readonly"
-            outlined
-            dense
-            v-model="formData.detailBody"
-            hide-bottom-space
-            :label="`${'เนื้อหาคำสั่งหลัก'}`"
-            @update:model-value="onCheckChangeData()"
-            type="textarea"
-            :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
-            lazy-rules
-          />
-        </div>
-
-        <!-- เนื้อหาคำสั่งส่วนท้าย -->
-        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
-          <q-input
-            :class="store.classInput(!store.readonly)"
-            :readonly="store.readonly"
-            outlined
-            dense
-            v-model="formData.detailFooter"
-            hide-bottom-space
-            :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
-            @update:model-value="onCheckChangeData()"
-            type="textarea"
-          />
-        </div>
-
-        <div
-          class="col-12 q-gutter-sm"
-          v-if="isIdofficer && commandCode !== 'C-PM-47'"
-        >
-          <q-radio
-            :disable="store.readonly"
-            keep-color
-            color="primary"
-            dense
-            v-model="formData.isBangkok"
-            label="คำสั่งสำนักปลัดกรุงเทพมหานคร"
-            val="OFFICE"
-          />
-
-          <q-radio
-            :disable="store.readonly"
-            keep-color
-            color="primary"
-            dense
-            v-model="formData.isBangkok"
-            label="คำสั่งกรุงเทพมหานคร"
-            val="BANGKOK"
-          />
-        </div>
-      </div>
-    </q-card-section>
-
-    <q-separator />
-
-    <q-card-actions align="right" v-if="!store.readonly">
-      <q-btn label="บันทึก" color="public" type="submit" />
-    </q-card-actions>
-  </q-form>
 
   <DialogPerview
     v-model:modal="modalPreview"
     v-model:data-template-detail="formData"
   />
+
+  <Dialog1_AddOperator
+    v-model:modal="modalAddOperator"
+    :command-id="commandId"
+    :refresh-data="fetchDataOperatorList"
+    :created-user-id="createdUserId"
+  />
 </template>

src/modules/18_command/components/Step/Dialog1_AddOperetor.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { usePagination } from "@/composables/usePagination";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOperators } from "@/modules/18_command/interface/response/Main";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, messageError, hideLoader, success } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListOperator);
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps<{
+  commandId: string;
+  createdUserId: string;
+  refreshData: Function;
+}>();
+
+const selected = ref<DataOperators[]>([]);
+const keyword = ref<string>("");
+const isAct = ref<boolean>(true);
+const rows = ref<DataOperators[]>([]);
+const visibleColumns = ref<string[]>([
+  "posNo",
+  "fullName",
+  "posExecutiveName",
+  "actFullName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "actFullName",
+    align: "left",
+    label: "รักษาการแทน",
+    field: "actFullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const roleName = ref<string>("");
+const roleNameList = ref<string[]>([
+  "เจ้าหน้าที่ดำเนินการ",
+  "ผอ.สกจ.",
+  "รักษาการ ผอ.สกจ.",
+  "ผอ. กบห.",
+  "รักษาการ ผอ. กบห.",
+  "ผอ. ส่วน",
+]);
+const roleNameOption = ref<string[]>(roleNameList.value);
+
+/** ฟังก์ชันบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const data = selected.value[0];
+      const playload = {
+        profileId: data.id,
+        prefix: data.prefix ?? "",
+        firstName: data.firstName ?? "",
+        lastName: data.lastName ?? "",
+        posNo: data.posNo ?? "",
+        posType: data.posType ?? "",
+        posLevel: data.posLevel ?? "",
+        position: data.position ?? "",
+        positionExecutive: data.posExecutiveName ?? "",
+        roleName: roleName.value.trim(),
+      };
+      showLoader();
+      await http.post(
+        config.API.commandOperator + `/${props.commandId}`,
+        playload
+      );
+      await props.refreshData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      onClose();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** ฟังก์ชันปิด Popup และรีเซ็ตข้อมูล */
+function onClose() {
+  modal.value = false;
+  rows.value = [];
+  selected.value = [];
+  keyword.value = "";
+  pagination.value.rowsNumber = 0;
+  roleName.value = "";
+}
+
+/** ฟังก์ชันดึงข้อมูลรายชื่อเจ้าหน้าที่ดำเนินการ */
+async function fetchListOperator() {
+  try {
+    showLoader();
+    selected.value = [];
+    const res = await http.put(config.API.workflowCommanderOperate, {
+      ...params.value,
+      keyword: keyword.value,
+      isAct: isAct.value,
+      keycloakId: props.createdUserId,
+      type: "officer",
+    });
+    const data = res.data.result;
+    pagination.value.rowsNumber = data.total;
+    rows.value = data.data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ฟังก์ชันรีเซ็ตหน้าและดึงข้อมูลรายชื่อเจ้าหน้าที่ดำเนินการใหม่ */
+function fetchNewListOperator() {
+  pagination.value.page = 1;
+  fetchListOperator();
+}
+
+/**
+ * ฟังก์ชันกรองรายการบทบาท
+ * @param val ค่าที่กรอก
+ * @param update ฟังก์ชันอัพเดตรายการ
+ */
+function filterOptionFnRoleName(val: string, update: Function) {
+  update(() => {
+    if (val === "") {
+      roleNameOption.value = [];
+    } else {
+      const needle = val.toLowerCase();
+      roleNameOption.value = roleNameList.value.filter((item: string) =>
+        item.toLowerCase().includes(needle)
+      );
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันกำหนดค่าบทบาท
+ * @param val ค่าที่เลือก
+ */
+function setModel(val: string) {
+  roleName.value = val;
+}
+
+watch(modal, (newVal) => {
+  if (newVal) {
+    fetchListOperator();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <DialogHeader
+        tittle="เพิ่มรายชื่อเจ้าหน้าที่ดำเนินการ"
+        :close="onClose"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="col-12 row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-gutter-x-xs">
+              <!-- input suggestion  -->
+              <div class="col-xs-12 col-md-3">
+                <q-select
+                  borderless
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="roleName"
+                  :label="`${'บทบาท'}`"
+                  :options="roleNameOption"
+                  use-input
+                  fill-input
+                  input-debounce="0"
+                  @filter="filterOptionFnRoleName"
+                  @input-value="setModel"
+                  hide-selected
+                  hide-dropdown-icon
+                  hide-bottom-space
+                />
+              </div>
+
+              <q-space />
+
+              <div class="row col-xs-12 col-md-6 q-col-gutter-sm">
+                <div class="col-xs-12 col-md-6">
+                  <q-checkbox
+                    keep-color
+                    v-model="isAct"
+                    label="แสดงเฉพาะรักษาการแทน"
+                    color="primary"
+                    @update:model-value="fetchNewListOperator"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-md-6">
+                  <q-input
+                    dense
+                    outlined
+                    label="ค้นหา"
+                    v-model="keyword"
+                    @keyup.enter="fetchNewListOperator"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="search"></q-icon>
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <p-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="key"
+              flat
+              bordered
+              :paging="false"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              class="custom-header-table"
+              :visible-columns="visibleColumns"
+              @request="onRequest"
+              v-model:pagination="pagination"
+              :selection="'single'"
+              v-model:selected="selected"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th auto-width />
+
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    {{ col.value ?? "-" }}
+                  </q-td>
+                </q-tr>
+              </template>
+            </p-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          label="บันทึก"
+          color="public"
+          @click="onSubmit"
+          :disable="!roleName"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/18_command/interface/response/Main.ts

@@ -98,6 +98,29 @@ interface DataAuthority {
   isSignatory: boolean;
 }
 
+interface DataOperators {
+  commandId: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  orderNo: number;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  positionExecutive: string;
+  prefix: string;
+  profileId: string;
+  roleName: string;
+  posExecutiveName?: string;
+}
+
 export type {
   ResListCommand,
   DataListCommand,
@@ -106,4 +129,5 @@ export type {
   DataFileOrder,
   DataDirector,
   DataAuthority,
+  DataOperators,
 };

src/modules/18_command/views/detail.vue

@@ -157,15 +157,13 @@ onMounted(async () => {
           </q-card>
         </q-tab-panel>
 
-        <q-tab-panel style="padding: 0px" name="Detail">
+        <q-tab-panel class="bg-grey-2" style="padding: 0px" name="Detail">
-          <q-card>
+          <Detail
-            <Detail
+            v-model:is-change-data="isChangeData"
-              v-model:is-change-data="isChangeData"
+            :on-check-change-data="onCheckChangeData"
-              :on-check-change-data="onCheckChangeData"
+            :fetch-data-command-list="fetchDataCommandList"
-              :fetch-data-command-list="fetchDataCommandList"
+            :form-command-list="formCommandList"
-              :form-command-list="formCommandList"
+          />
-            />
-          </q-card>
         </q-tab-panel>
         <q-tab-panel class="bg-grey-2" style="padding: 0px" name="ListPersons">
           <ListPersons