รายการอุทธรณ์ร้องทุกข์

src/modules/11_discipline/components/8_AppealComplain/Form.vue

@@ -8,11 +8,12 @@ import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+import DialogHistory from '@/modules/11_discipline/components/8_AppealComplain/dialog/DialogEditStatus.vue'
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type { MyObjectAppealRef } from "@/modules/11_discipline/interface/response/appealComplain";
+import type { MyObjectAppealRef,HistoryStatusType } from "@/modules/11_discipline/interface/response/appealComplain";
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mainStore = useDisciplineMainStore();
 const router = useRouter();
@@ -33,6 +34,8 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
+const modalHistory = ref<boolean>(false)
+const statusCheck = ref<string>("");
 const modalPerson = ref<boolean>(false);
 const mixin = useCounterMixin();
 const {
@@ -47,6 +50,12 @@ const {
 const dataStore = useAppealComplainStore();
 
 const modalEdit = ref<boolean>(false);
+
+const historyStatusOb = reactive<HistoryStatusType[]>([{
+  status: "",
+  createdAt: "",
+}]);
+
 const formData = reactive<any>({
   profileId: "xx",
   title: "",
@@ -56,6 +65,7 @@ const formData = reactive<any>({
   type: "",
   file: null,
   disciplineComplaint_Appeal_Docs: [],
+  historyStatus: historyStatusOb,
   year: new Date().getFullYear().toString(),
 });
 
@@ -75,18 +85,10 @@ const objectAppeal: MyObjectAppealRef = {
 };
 
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
-const visibleColumns = ref<string[]>(["info", "no", "citizenId", "fullname"]);
+const visibleColumns = ref<string[]>(["no", "citizenId", "fullname"]);
 /** หัวตารางผู้ถูกร้องเรียน */
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "left",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
+
   {
     name: "no",
     align: "left",
@@ -226,6 +228,7 @@ watch(props.data, async () => {
     formData.title = props.data.title;
     formData.description = props.data.description;
     formData.status = props.data.status;
+    statusCheck.value = props.data.status;
     formData.type = props.data.type;
     formData.year = props.data.year;
     formData.caseType = props.data.caseType;
@@ -234,6 +237,7 @@ watch(props.data, async () => {
     formData.citizenId = props.data.citizenId;
     formData.profileId = props.data.profileId;
     formData.lastUpdatedAt = props.data.lastUpdatedAt;
+    formData.historyStatus = props.data.historyStatus;
     formData.disciplineComplaint_Appeal_Docs =
       props.data.disciplineComplaint_Appeal_Docs;
     dataStore.getRow([
@@ -245,6 +249,15 @@ watch(props.data, async () => {
     ]);
   }
 });
+
+function close() {
+  modalHistory.value = false;
+}
+
+function historyStatus(){
+  modalHistory.value = true
+}
+
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -281,7 +294,7 @@ onMounted(() => {
         <q-card bordered>
           <div class="q-pa-md">
             <div class="q-gutter-y-sm">
-              <div class="row">
+              <div class="row q-gutter-x-sm">
                 <div class="col-3">
                   <q-select
                     ref="typeRef"
@@ -301,6 +314,37 @@ onMounted(() => {
                     hide-bottom-space
                   />
                 </div>
+                <div class="col-3" v-if="isReadonly">
+                  <q-select
+                    ref="statusRef"
+                    v-model="formData.status"
+                    label="สถานะ"
+                    dense
+                    bg-color="white"
+                    outlined
+                    emit-value
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                    map-options
+                    hide-bottom-space
+                    option-label="name"
+                    option-value="id"
+                    :options="dataStore.statusOptionsEdit"
+                  />
+                </div>
+                <div class="col-2 self-center" v-if="isReadonly">
+                  <q-btn
+                    size="16px"
+                    flat
+                    round
+                    dense
+                    color="info"
+                    class="q-ml-sm"
+                    icon="mdi-history"
+                    @click="historyStatus"
+                  >
+                    <q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip>
+                  </q-btn>
+                </div>
               </div>
               <div class="row col-12">
                 <q-card
@@ -364,22 +408,6 @@ onMounted(() => {
                             <div v-if="col.name == 'no'">
                               {{ props.rowIndex + 1 }}
                             </div>
-                            <div v-else-if="col.name == 'info'">
-                              <q-btn
-                                size="14px"
-                                flat
-                                round
-                                dense
-                                color="info"
-                                icon="info"
-                                @click="
-                                  router.push(`/registry/${props.row.personId}`)
-                                "
-                                ><q-tooltip
-                                  >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
-                                ></q-btn
-                              >
-                            </div>
                             <div
                               v-else-if="col.name === 'organization'"
                               class="table_ellipsis"
@@ -604,6 +632,12 @@ onMounted(() => {
     @returnData="handleSave"
     selecetSwitch="single"
   />
+
+  <DialogHistory
+  :modal="modalHistory"
+  :close="close"
+  :data="formData.historyStatus"
+  />
 </template>
 
 <style lang="scss">