กลุุ่มเป้าหมาย สร้างarray
This commit is contained in:
oat_dev
parent
128603af75
commit
9afdfa5c58
1 changed files with 272 additions and 5 deletions
|
|
@ -26,7 +26,9 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
const $q = useQuasar();
|
||||
const store = useDevelopmentDataStore();
|
||||
const { dialogRemove, success, messageError } = useCounterMixin();
|
||||
|
||||
const groupTargetData: any = reactive({
|
||||
targetData: [{}],
|
||||
});
|
||||
const columnsPlannedGoals = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "groupTarget",
|
||||
|
|
@ -142,7 +144,10 @@ const groupSubOp = ref<DataOption[]>([
|
|||
{ id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
|
||||
]);
|
||||
|
||||
const isEdit = ref<boolean>(false);
|
||||
const rowIndex = ref<number>(null);
|
||||
const modalGroupTarget = ref<boolean>(false);
|
||||
const newModalGroupTarget = ref<boolean>(false);
|
||||
const modalRelate = ref<boolean>(false);
|
||||
const isTarget = ref<string>("");
|
||||
|
||||
|
|
@ -187,7 +192,7 @@ function fetchType() {
|
|||
function onClickOpenDialog(type: string, target: string) {
|
||||
isTarget.value = target;
|
||||
if (type === "group") {
|
||||
modalGroupTarget.value = true;
|
||||
newModalGroupTarget.value = true;
|
||||
} else {
|
||||
modalRelate.value = true;
|
||||
}
|
||||
|
|
@ -285,10 +290,12 @@ function cleanFormData() {
|
|||
formGroupTarget.amount = null;
|
||||
formGroupRelate.relate = "";
|
||||
formGroupRelate.amount = null;
|
||||
isEdit.value = false;
|
||||
}
|
||||
|
||||
function onClickCloseDialog() {
|
||||
modalGroupTarget.value = false;
|
||||
newModalGroupTarget.value = false;
|
||||
groupTargetData.targetData = [{}];
|
||||
modalRelate.value = false;
|
||||
cleanFormData();
|
||||
}
|
||||
|
|
@ -327,6 +334,18 @@ function convertTypeGoals(id: string) {
|
|||
return data && data?.posTypeName;
|
||||
}
|
||||
|
||||
const addGroupTargetData = async () => {
|
||||
groupTargetData.targetData.push({
|
||||
position: "",
|
||||
posType: "",
|
||||
level: "",
|
||||
});
|
||||
};
|
||||
|
||||
function deleteTargetData(index: any) {
|
||||
groupTargetData.targetData.splice(index, 1);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchType();
|
||||
plannedGoals.value = store.formAddProject.plannedGoals
|
||||
|
|
@ -406,6 +425,22 @@ onMounted(() => {
|
|||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
size="14px"
|
||||
@click="
|
||||
() => {
|
||||
isEdit = true;
|
||||
rowIndex = props.rowIndex;
|
||||
newModalGroupTarget = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
|
|
@ -414,7 +449,7 @@ onMounted(() => {
|
|||
@click="onclickDelete(props.rowIndex, 'plannedGoals')"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn> -->
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -527,6 +562,22 @@ onMounted(() => {
|
|||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
size="14px"
|
||||
@click="
|
||||
() => {
|
||||
isEdit = true;
|
||||
rowIndex = props.rowIndex;
|
||||
newModalGroupTarget = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
|
|
@ -535,7 +586,7 @@ onMounted(() => {
|
|||
@click="onclickDelete(props.rowIndex, 'actualGoals')"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn> -->
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -764,6 +815,222 @@ onMounted(() => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="newModalGroupTarget" persistent>
|
||||
<q-card style="width: 700px">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitGroup">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
isEdit ? 'แก้ไขกลุ่มเป้าหมาย (ใหม่)' : 'เพิ่มกลุ่มเป้าหมาย (ใหม่)'
|
||||
"
|
||||
:close="onClickCloseDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formGroupTarget.groupTarget"
|
||||
:options="groupOp"
|
||||
label="กลุ่มเป้าหมาย"
|
||||
hide-bottom-space
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
emit-value
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
@update:model-value="updateGroupTarget"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-6 col-md-6"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
v-model="formGroupTarget.groupTargetSub"
|
||||
:options="
|
||||
formGroupTarget.groupTarget === 'OFFICER'
|
||||
? groupSubOp.slice(0, 2)
|
||||
: groupSubOp.slice(2, 5)
|
||||
"
|
||||
label="กลุ่มเป้าหมายย่อย"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
emit-value
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 row items-center"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<div class="text-weight-bold">เพิ่ม</div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
size="14px"
|
||||
@click="addGroupTargetData()"
|
||||
>
|
||||
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div
|
||||
v-for="(items, index) in groupTargetData.targetData"
|
||||
class="col-12 row q-col-gutter-md"
|
||||
>
|
||||
<div
|
||||
class="col"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="items.position"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
v-model="items.posType"
|
||||
:options="posTypeOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="ประเภทตำแหน่ง"
|
||||
@update:model-value="updatePosTypeName"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
v-model="items.level"
|
||||
:options="posLevelOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="ระดับ"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกระดับ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-1 q-mt-sm"
|
||||
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="12px"
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="deleteTargetData(index)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-6 col-md-8"
|
||||
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
|
||||
>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.type"
|
||||
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="formGroupTarget.amount"
|
||||
label="จำนวน(คน)"
|
||||
mask="#"
|
||||
reverse-fill-mask
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<div class="text-right q-pa-sm">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalRelate" persistent>
|
||||
<q-card style="width: 400px">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitRelate">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue