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

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-09 11:23:53 +07:00
parent 2263302976
commit b4f6c41021
2 changed files with 104 additions and 18 deletions

View file

@ -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">
<q-select
<div class="col-12" v-if="type === 'ADD'">
เลอกทำสำเนา
<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>

View file

@ -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