ระบบการพัฒนา => รายการโครงการปรับการแสดงผลแบบฟอร์ม

src/modules/15_development/components/Target.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type {
@@ -19,27 +22,45 @@ import type {
   ResActualGoals,
 } from "@/modules/15_development/interface/response/Main";
 
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
-const checkRoutePermission = ref<boolean>(
-  route.name == "developmentDetailPage"
-);
+const { showLoader, hideLoader, messageError, success, dialogConfirm } =
+  useCounterMixin();
+
+/**
+ * props
+ */
 const props = defineProps({
   prevStep: { type: Function, required: true },
   nextStep: { type: Function, required: true },
 });
+
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
 const actualPeoples = ref<ResPeople[]>([]);
 
-const groupTargetData: any = reactive({
+const groupTargetData = reactive({
   targetData: [{}],
 });
 
@@ -484,7 +505,7 @@ onMounted(() => {
 <template>
   <!-- CARD เป้าหมายตามแผน -->
   <q-card bordered style="border: 1px solid #d6dee1">
-    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
       เป้าหมายตามแผน
       <q-btn
         v-if="store.projectStatus !== 'FINISH' && !checkRoutePermission"