ออกคำสั่ง => ปรับ form

src/modules/02_organizationalNew/components/DialogFormAgency.vue

@@ -484,8 +484,10 @@ function selectOrgLevele(val: string, status: boolean = true) {
             </div>
           </q-card-section>
           <q-separator />
-          <q-card-actions align="right" class="bg-white text-teal">
+          <q-card-actions align="right">
-            <q-btn type="submit" :label="`บันทึก`" color="public" />
+            <q-btn type="submit" :label="`บันทึก`" color="public">
+              <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+            >
           </q-card-actions>
         </form>
       </q-card>

src/modules/10_order/components/step/step01.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -812,9 +813,9 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit" class="q-pa-md">
+  <q-card>
-    <div class="q-pa-md">
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <div style="max-height: 68vh; overflow-y: scroll">
+      <q-card-section style="max-height: 50vh">
         <!-- Main -->
         <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
           <div class="col-xs-12 col-md-6">
@@ -834,8 +835,8 @@ const getClass = (val: boolean) => {
               input-debounce="0"
               @update:model-value="selectCMP(typeOrder)"
               @filter="(inputValue:any,
-                          doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                            doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
-                          ) "
+                            ) "
             />
           </div>
           <div class="col-xs-12 col-md-6">
@@ -2215,26 +2216,25 @@ const getClass = (val: boolean) => {
               typeOrder.commandCode === 'C-PM-32')
           "
         >
-          <div class="row col-12">
+          <div class="col-xs-12 col-md-6">
-            <div class="col-xs-12 col-md-6">
+            <selector
-              <selector
+              :class="getClass(true)"
-                :class="getClass(true)"
+              outlined
-                outlined
+              dense
-                dense
+              v-model="complaintId"
-                v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-                :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
-                emit-value
+              hide-bottom-space
-                hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
-                :label="`${'เรื่องร้องเรียน'}`"
+              map-options
-                map-options
+              option-label="name"
-                option-label="name"
+              :options="DataStore.complaintOption"
-                :options="DataStore.complaintOption"
+              option-value="id"
-                option-value="id"
+              use-input
-                use-input
+              input-debounce="0"
-                input-debounce="0"
+            />
-              />
-            </div>
           </div>
+          <div class="col-xs-12 col-md-6"></div>
 
           <div class="col-xs-12 col-md-6">
             <q-input
@@ -2281,22 +2281,15 @@ const getClass = (val: boolean) => {
             />
           </div>
         </div>
-      </div>
+      </q-card-section>
-    </div>
+      <q-separator />
-
+      <q-card-actions align="right">
-    <q-separator />
+        <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
-    <div class="flex justify-end q-gutter-sm q-mt-md">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      <q-btn
+        </q-btn>
-        unelevated
+      </q-card-actions>
-        label="บันทึก"
+    </q-form>
-        id="onSubmit"
+  </q-card>
-        type="submit"
-        color="public"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-    </div>
-  </q-form>
 
   <q-dialog v-model="dialogVisible">
     <q-card style="width: 900px; max-width: 80vw">

src/modules/10_order/components/step/step02.vue

@@ -458,8 +458,8 @@ const pagination = ref({
 </script>
 
 <template>
-  <div>
+  <q-card>
-    <div class="q-py-md q-pl-md" style="max-height: 68vh; overflow-y: scroll">
+    <q-card-section>
       <div class="col-12 row q-pb-sm items-center">
         <q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
@@ -599,11 +599,11 @@ const pagination = ref({
           </q-tr>
         </template>
       </d-table>
-    </div>
+    </q-card-section>
+
     <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-card-actions align="right">
       <q-btn
-        dense
         outline
         color="primary"
         icon="chevron_left"
@@ -612,18 +612,11 @@ const pagination = ref({
         label="กรอกรายละเอียด"
       >
       </q-btn>
-      <q-btn
+      <q-btn label="บันทึก" color="public" @click="save" class="q-px-md">
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-      >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </q-card-actions>
-  </div>
+  </q-card>
   <!--********************************** เงินเดือน ********************************** -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 50vw; max-width: 50vw">
@@ -691,8 +684,6 @@ const pagination = ref({
         <q-separator />
         <q-card-actions align="right">
           <q-btn
-            dense
-            unelevated
             label="บันทึก"
             color="public"
             @click="saveModal"
@@ -761,8 +752,6 @@ const pagination = ref({
         <q-separator />
         <q-card-actions align="right">
           <q-btn
-            dense
-            unelevated
             label="บันทึก"
             color="public"
             @click="saveModalAdd"

src/modules/10_order/components/step/step03.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+
 import type { QInput, QForm } from "quasar";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
@@ -42,52 +42,13 @@ const filterRef = ref<QInput>();
 const filter = ref<string>("");
 
 const modal = ref<boolean>(false);
-const search = ref<string>("");
+
 const expanded = ref<string[]>([]);
 const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
 
 const selectedModal = ref<ResponseOrganiz[]>([]);
 
-const filterModal = ref<string>("");
-const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
-const columnsModal = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: false,
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    field: "position",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
 const rowsModal = ref<ResponseOrganiz[]>([]);
 
 const optionSelect = ref<DataOption[]>([
@@ -245,7 +206,6 @@ const getData = async (id: string) => {
 };
 // เลือกรายชื่อจากหน่วยงาน
 const saveData = async () => {
-  
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
@@ -377,8 +337,8 @@ const updateData = (row: DataCopyOrder) => {
 </script>
 
 <template>
-  <div>
+  <q-card>
-    <div class="q-py-md q-pl-md" style="max-height: 68vh; overflow-y: scroll">
+    <q-card-section>
       <div class="col-12 row q-py-sm items-center">
         <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
@@ -506,11 +466,11 @@ const updateData = (row: DataCopyOrder) => {
           </template>
         </d-table>
       </q-form>
-    </div>
+    </q-card-section>
+
     <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-card-actions align="right">
       <q-btn
-        dense
         outline
         color="primary"
         icon="chevron_left"
@@ -520,8 +480,6 @@ const updateData = (row: DataCopyOrder) => {
       >
       </q-btn>
       <q-btn
-        dense
-        unelevated
         label="บันทึก"
         color="public"
         @click="saveDataCopyOrder"
@@ -529,140 +487,8 @@ const updateData = (row: DataCopyOrder) => {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </q-card-actions>
-  </div>
+  </q-card>
-
-  <!-- <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-      <q-separator />
-      <q-card-section class="q-pa-sm bg-grey-1">
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-xs-12 col-sm-5 row">
-            <q-card flat bordered class="fit q-pa-sm">
-              <q-scroll-area visible style="height: 70vh">
-                <q-input
-                  outlined
-                  dense
-                  v-model="search"
-                  placeholder="ค้นหา"
-                  class="q-mb-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-magnify" />
-                  </template>
-                </q-input>
-                <q-tree
-                  :nodes="nodesTree"
-                  dense
-                  node-key="id"
-                  v-model:selected="selected"
-                  v-model:expanded="expanded"
-                  no-selection-unset
-                  selected-color="primary"
-                  @update:selected="onSelected"
-                  default-expand-all
-                />
-              </q-scroll-area>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7">
-            <div class="col-12 row q-py-sm items-center">
-              <q-space />
-              <div class="items-center" style="display: flex">
-                <q-input
-                  standout
-                  dense
-                  v-model="filterModal"
-                  ref="filterRef"
-                  outlined
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  style="max-width: 200px"
-                  class="q-ml-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="filterModal == ''" name="search" />
-                    <q-icon
-                      v-if="filterModal !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="resetFilter"
-                    />
-                  </template>
-                </q-input>
-
-                <q-select
-                  v-model="visibleColumnsModal"
-                  :display-value="$q.lang.table.columns"
-                  multiple
-                  outlined
-                  dense
-                  :options="columnsModal"
-                  options-dense
-                  option-value="name"
-                  map-options
-                  emit-value
-                  style="min-width: 150px"
-                  class="gt-xs q-ml-sm"
-                />
-              </div>
-            </div>
-            <d-table
-              :rows="rowsModal"
-              :columns="columnsModal"
-              :visible-columns="visibleColumnsModal"
-              :filter="filterModal"
-              row-key="profileId"
-              selection="multiple"
-              v-model:selected="selectedModal"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-cell="props">
-                <q-td :props="props">
-                  <div v-if="props.col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
-
-                  <div v-else>
-                    {{ props.value }}
-                  </div>
-                </q-td>
-              </template>
-            </d-table>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="saveData"
-          class="q-px-md"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog> -->
 
   <DialogOrgSelectOneStep
     v-model:modal="modal"