เพิ่มคำสั่งแต่งตั้ง เลื่อน ย้ายจากราชกิจจาฯ

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

@@ -36,6 +36,7 @@ const props = defineProps({
 });
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+const commandCode = ref<string>(""); //รหัสคำสั่ง
 // ฟอร์มข้อมูล
 let formData = reactive<FormDataDetail>({
   issue: null, //คำสั่งเรื่อง
@@ -48,6 +49,8 @@ let formData = reactive<FormDataDetail>({
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
   isBangkok: null, //คำสั่งสำนักปลัดกรุงเทพมหานคร
 });
+const commandVolume = ref<string>(""); //เล่มที่
+const commandChapter = ref<string>(""); //ตอนที่
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 const isIdofficer = ref<boolean>(false); //เช็ค สกจ.
 
@@ -73,6 +76,10 @@ async function onSubmit() {
     await http
       .put(config.API.commandAction(commandId.value, "tab1"), {
         ...formData,
+        commandNo:
+          commandCode.value === "C-PM-47"
+            ? `${commandVolume.value}/${commandChapter.value}`
+            : formData.commandNo,
         commandAffectDate: convertDateToAPI(formData.commandAffectDate),
         commandExcecuteDate: convertDateToAPI(formData.commandExcecuteDate),
       })
@@ -106,6 +113,10 @@ onMounted(async () => {
   formData.isBangkok = !isIdofficer.value
     ? null
     : props.formCommandList.isBangkok;
+  commandCode.value = props.formCommandList.commandCode;
+  const [volume, chapter] = props.formCommandList.commandNo.split("/");
+  commandVolume.value = volume || "";
+  commandChapter.value = chapter || "";
 });
 </script>
 
@@ -126,62 +137,93 @@ onMounted(async () => {
           />
         </div>
 
-        <div class="col-4 row">
-          <div class="col-6">
-            <q-input
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              outlined
-              dense
-              v-model="formData.commandNo"
-              hide-bottom-space
-              :label="`${'คำสั่งเลขที่'}`"
-              @update:model-value="onCheckChangeData()"
-            />
-          </div>
-          <label class="col-1 flex justify-center items-center text-bold">
-            /
-          </label>
-          <div class="col-5">
-            <datepicker
-              v-model="formData.commandYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              @update:model-value="onCheckChangeData()"
+        <div :class="commandCode !== 'C-PM-47' ? 'col-4' : 'col-12'">
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-6" v-if="commandCode !== 'C-PM-47'">
+              <q-input
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                outlined
+                dense
+                v-model="formData.commandNo"
+                hide-bottom-space
+                :label="`${'คำสั่งเลขที่'}`"
+                @update:model-value="onCheckChangeData()"
+              />
+            </div>
+            <label
+              class="col-1 flex justify-center items-center text-bold"
+              v-if="commandCode !== 'C-PM-47'"
             >
-              <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>
+              /
+            </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
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </div>
 
@@ -278,7 +320,7 @@ onMounted(async () => {
         </div>
 
         <!-- เนื้อหาคำสั่งส่วนต้น -->
-        <div class="col-12">
+        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
           <q-input
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
@@ -293,7 +335,7 @@ onMounted(async () => {
         </div>
 
         <!-- เนื้อหาคำสั่งส่วนกลาง -->
-        <div class="col-12">
+        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
           <q-input
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
@@ -310,7 +352,7 @@ onMounted(async () => {
         </div>
 
         <!-- เนื้อหาคำสั่งส่วนท้าย -->
-        <div class="col-12">
+        <div class="col-12" v-if="commandCode !== 'C-PM-47'">
           <q-input
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
@@ -324,7 +366,10 @@ onMounted(async () => {
           />
         </div>
 
-        <div class="col-12 q-gutter-sm" v-if="isIdofficer">
+        <div
+          class="col-12 q-gutter-sm"
+          v-if="isIdofficer && commandCode !== 'C-PM-47'"
+        >
           <q-radio
             :disable="store.readonly"
             keep-color