ui การเพิ่มโครงสร้าง

src/modules/02_organization/components/DialogNewStructure.vue

@@ -62,6 +62,8 @@ const typeOp = ref<DataOption[]>([
   },
 ]);
 
+const selectType = ref<string[]>([]);
+
 //ฟอร์มเพิ่มโครงสร้าง
 const formData = reactive<FormDataNewStructure>({
   orgRevisionId: "",
@@ -69,10 +71,30 @@ const formData = reactive<FormDataNewStructure>({
   typeDraft: "",
 });
 
-/**
+/** ฟังก์ชันยืนยันการบันทึกการกสร้างโครงสร้าง*/
- * ฟังก์ชันยืนยันการบันทึกการกสร้างโครงสร้าง
- */
 function onSubmit() {
+  //เช็คการทำสำเนา
+  formData.typeDraft =
+    selectType.value.includes("ORG") &&
+    selectType.value.includes("PERSON") &&
+    selectType.value.includes("POSITION") &&
+    selectType.value.includes("ROLE")
+      ? "ORG_POSITION_PERSON_ROLE"
+      : selectType.value.includes("ORG") &&
+        selectType.value.includes("PERSON") &&
+        selectType.value.includes("POSITION")
+      ? "ORG_POSITION_PERSON"
+      : selectType.value.includes("ORG") &&
+        selectType.value.includes("POSITION") &&
+        selectType.value.includes("ROLE")
+      ? "ORG_POSITION_ROLE"
+      : selectType.value.includes("ORG") &&
+        selectType.value.includes("POSITION")
+      ? "ORG_POSITION"
+      : selectType.value.includes("ORG")
+      ? "ORG"
+      : "NEW";
+
   dialogConfirm(
     $q,
     async () => {
@@ -102,19 +124,16 @@ function onSubmit() {
   );
 }
 
-/**
+/** ฟังก์ชัน ปิด popup และกำหนดฟอร์มเพิ่มโครงสร้างเป็น Default*/
- * ฟังก์ชัน ปิด popup และกำหนดฟอร์มเพิ่มโครงสร้างเป็น Default
- */
 function close() {
   modal.value = false;
   formData.orgRevisionId = "";
   formData.orgRevisionName = "";
   formData.typeDraft = "";
+  selectType.value = [];
 }
 
-/**
+/** ฟังก์ชันเรียกข้อมูลประวัติโครงสร้าง*/
- * ฟังก์ชันเรียกข้อมูลประวัติโครงสร้าง
- */
 function fetchOrgRevision() {
   showLoader();
   http
@@ -138,15 +157,25 @@ function fetchOrgRevision() {
     });
 }
 
+/**
+ * ฟังก์ชันเลือกทำสำเนา
+ * @param val รายการที่เลือก
+ */
+function updateSelectCopy(val: string[]) {
+  if (!val.includes("ORG")) {
+    selectType.value = [];
+  } else if (!val.includes("POSITION")) {
+    selectType.value = ["ORG"];
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true
- *
  * type ไม่เป็นการสร้างใหม่ให้เรียกข้อมูลประวัติโครงสร้าง
  */
 watch(
   () => modal.value,
   () => {
-    modal.value && (formData.typeDraft = type.value);
     modal.value && type.value !== "NEW" && fetchOrgRevision();
   }
 );
@@ -161,7 +190,7 @@ watch(
 
           <q-card-section>
             <div class="row q-col-gutter-sm">
-              <div class="col-6">
+              <div class="col-12">
                 <q-input
                   v-model="formData.orgRevisionName"
                   ref="orgRevisionNameRef"
@@ -173,8 +202,55 @@ watch(
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงสร้าง'}`]"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-12" v-if="type === 'ADD'">
-                <q-select
+                เลือกทำสำเนา
+                <div class="column">
+                  <div class="col">
+                    <q-checkbox
+                      v-model="selectType"
+                      label="โครงสร้าง"
+                      color="primary"
+                      val="ORG"
+                      @update:model-value="updateSelectCopy"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-checkbox
+                      v-model="selectType"
+                      :disable="!selectType.includes('ORG')"
+                      label="ตำแหน่ง"
+                      color="primary"
+                      val="POSITION"
+                      @update:model-value="updateSelectCopy"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-checkbox
+                      v-model="selectType"
+                      label="คนครอง"
+                      color="primary"
+                      val="PERSON"
+                      :disable="
+                        !selectType.includes('ORG') ||
+                        !selectType.includes('POSITION')
+                      "
+                    />
+                  </div>
+                  <div class="col">
+                    <q-checkbox
+                      v-model="selectType"
+                      label="สิทธิ์"
+                      color="primary"
+                      val="ROLE"
+                      :disable="
+                        !selectType.includes('ORG') ||
+                        !selectType.includes('POSITION')
+                      "
+                    />
+                  </div>
+                </div>
+
+                <!-- <q-select
                   for="#type"
                   ref="typeRef"
                   readonly
@@ -190,12 +266,12 @@ watch(
                   label="ประเภทการโคลน"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
                   lazy-rules
-                />
+                /> -->
               </div>
             </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-card-actions>
         </q-form>

src/modules/02_organization/views/main.vue

@@ -285,7 +285,17 @@ onMounted(async () => {
               </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown
+            <q-btn
+              v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
+              color="green-6"
+              dense
+              unelevated
+              label="เพิ่มโครงสร้าง"
+              @click="ocClickAddStructure('ADD')"
+              class="q-px-md"
+            />
+
+            <!-- <q-btn-dropdown
               v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
               dense
               unelevated
@@ -307,7 +317,7 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-            </q-btn-dropdown>
+            </q-btn-dropdown> -->
 
             <q-space />
             <q-btn