UI รายการรายงานของระบบงานวินัย

src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue

@@ -16,6 +16,7 @@ const complaintdetail = ref<string>("");
 const detail = ref<string>("");
 const fault = ref<string>("");
 const results = ref<string>("");
+const other = ref<string>("");
 const evidenceFiles = ref<any>(null);
 const fileComplaint = ref<any>(null);
 const clickTime = ref<boolean>(false);
@@ -23,19 +24,23 @@ const date = ref<Date | null>(null);
 const dateEnd = ref<Date | null>(null);
 const investigation = ref<string>("");
 const faultOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "001", value: "ยังไม่ระบุ" },
+  { id: "002", value: "ไม่ร้ายเเรง" },
+  { id: "003", value: "ร้ายเเรง" },
 ]);
 const faultOp = ref<any>();
 const investigationOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "001", value: "เเต่งตั้งการสืบสวน" },
+  { id: "002", value: "สืบสวนทางลับ" },
+  { id: "003", value: "อื่นๆ" },
 ]);
 const daysExtend = ref<string>("");
 const daysExtendOp = ref<any>();
 const daysExtendOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "000", value: "15 วัน" },
+  { id: "001", value: "30 วัน" },
+  { id: "002", value: "45 วัน" },
+  { id: "003", value: "60 วัน" },
 ]);
 const investigationOp = ref<any>();
 
@@ -92,54 +97,69 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   type="textarea"
                 />
               </div>
-              <div class="col-4 q-my-md q-mr-xs">
-                <q-select
-                  outlined
-                  dense
-                  v-model="fault"
-                  :options="faultOp"
-                  label="ลักษณะความผิด"
-                  emit-value
-                  map-options
-                  option-label="value"
-                  option-value="id"
-                  use-input
-                  @filter="(inputValue: any,
+              <div class="row no-wrap col-12">
+                <div class="col-4 q-my-md q-mr-xs">
+                  <q-select
+                    outlined
+                    dense
+                    v-model="fault"
+                    :options="faultOp"
+                    label="ลักษณะความผิด"
+                    emit-value
+                    map-options
+                    option-label="value"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
             doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
             )"
-                  ><template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4 q-my-md q-ml-xs">
-                <q-select
-                  outlined
-                  dense
-                  v-model="investigation"
-                  :options="investigationOp"
-                  label="ลักษณะการสืบสวน"
-                  emit-value
-                  map-options
-                  option-label="value"
-                  option-value="id"
-                  use-input
-                  @filter="(inputValue: any,
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+                <div class="col-4 q-my-md q-mr-xs">
+                  <q-select
+                    outlined
+                    dense
+                    v-model="investigation"
+                    :options="investigationOp"
+                    label="ลักษณะการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="value"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
             doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
             )"
-                  ><template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
               </div>
+              <div v-if="investigation === '003'" class="col-12 q-mb-md">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  borderless
+                  v-model="other"
+                  hide-bottom-space
+                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                  type="textarea"
+                />
+              </div>
+
               <div class="row items-start col-12">
                 <p
                   class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
@@ -347,11 +367,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
       </q-form>
     </div>
     <q-separator />
-      <div class="row col-12 q-pa-sm">
-        <q-space />
-        <q-btn flat round color="secondary" icon="mdi-content-save-outline"
-          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-        >
-      </div>
+    <div class="row col-12 q-pa-sm">
+      <q-space />
+      <q-btn flat round color="secondary" icon="mdi-content-save-outline"
+        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+      >
+    </div>
   </q-card>
 </template>