Merge branch 'develop' into develop-champ

This commit is contained in:
watcharanondh 2023-06-08 14:31:55 +07:00
commit 4aee623885
4 changed files with 99 additions and 47 deletions

View file

@ -48,6 +48,7 @@
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
v-model:inputfilter="filter" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:inputvisible="visibleColumns"
v-model:pagination="pagination"
:nornmalData="false" :nornmalData="false"
:conclude="true" :conclude="true"
> >

View file

@ -13,18 +13,7 @@
<q-tooltip>แกไขขอม</q-tooltip> <q-tooltip>แกไขขอม</q-tooltip>
</q-btn> </q-btn>
<div v-else> <div v-else>
<!-- <q-btn
flat
round
:disabled="!editvisible"
:outline="!editvisible"
:color="!editvisible ? 'grey-7' : 'red'"
@click="cancel()"
icon="mdi-undo"
v-if="modalEdit == true"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn> -->
<q-btn <q-btn
flat flat
round round
@ -80,11 +69,6 @@ const edit = async () => {
const checkSave = () => { const checkSave = () => {
props.validate(); props.validate();
props.save(); props.save();
// if (myForm.value !== null) {
// myForm.value.validate().then((success) => {
// if (success) {
// }
// });
// }
}; };
</script> </script>

View file

@ -12,8 +12,8 @@
</q-toolbar> </q-toolbar>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue";
import { ref, useAttrs } from "vue";
const props = defineProps({ const props = defineProps({
tittle: String, tittle: String,
close: { close: {
@ -24,4 +24,5 @@ const props = defineProps({
const close = async () => { const close = async () => {
props.close(); props.close();
}; };
</script> </script>

View file

@ -16,6 +16,7 @@ const filter = ref<string>("");
const { placementData } = store; const { placementData } = store;
const editRow = ref<boolean>(false); // const editRow = ref<boolean>(false); //
const modal = ref<boolean>(false); //modal add detail const modal = ref<boolean>(false); //modal add detail
const modal_right = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal const modalEdit = ref<boolean>(false); //modal
const position = ref<number>(); const position = ref<number>();
const Name = ref<string>(); const Name = ref<string>();
@ -25,9 +26,18 @@ const ReportingDate = ref<string>();
const BMAOfficer = ref<boolean>(); const BMAOfficer = ref<boolean>();
const Status = ref<string>(); const Status = ref<string>();
const checkList = ref<string>(); const checkList = ref<string>();
const positionMasterUserNote = ref<string>();
const $q = useQuasar(); // show dialog const $q = useQuasar(); // show dialog
const files = ref<File[]>([]);
const clickEditRow = () => {
editRow.value = true;
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const selectData = (props: TableName) => { const selectData = (props: TableName) => {
if (editvisible.value == true) { if (editvisible.value == true) {
editRow.value = false; editRow.value = false;
@ -42,7 +52,7 @@ const selectData = (props: TableName) => {
BMAOfficer.value = props.BMAOfficer; BMAOfficer.value = props.BMAOfficer;
Status.value = props.Status; Status.value = props.Status;
checkList.value = props.checkList; checkList.value = props.checkList;
}else{ } else {
editRow.value = false; editRow.value = false;
modalEdit.value = true; modalEdit.value = true;
modal.value = true; modal.value = true;
@ -50,6 +60,26 @@ const selectData = (props: TableName) => {
} }
}; };
const getNumFile = ref(0);
const editDetail = (props: TableName, action: "cancel" | "wait") => {
if (action === "cancel") {
getNumFile.value = 0;
editRow.value = false;
modalEdit.value = false;
modal_right.value = true;
edit.value = true;
Name.value = props.Name;
} else if (action === "wait") {
getNumFile.value = 1;
editRow.value = false;
modalEdit.value = true;
modal_right.value = true;
edit.value = true;
Name.value = props.Name;
}
};
placementData.mappingPosition.columns.length == 0 placementData.mappingPosition.columns.length == 0
? (visibleColumns.value = [ ? (visibleColumns.value = [
"position", "position",
@ -71,8 +101,6 @@ const columns = ref<QTableProps["columns"]>([
field: "position", field: "position",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "Name", name: "Name",
@ -93,8 +121,6 @@ const columns = ref<QTableProps["columns"]>([
field: "ExamOrder", field: "ExamOrder",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "Unit", name: "Unit",
@ -126,8 +152,6 @@ const columns = ref<QTableProps["columns"]>([
field: "BMAOfficer", field: "BMAOfficer",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "Status", name: "Status",
@ -150,7 +174,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "บรรจุเเล้ว", Status: "บรรจุเเล้ว",
checkList:null checkList: null,
}, },
{ {
position: 1, position: 1,
@ -160,7 +184,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "ยังไม่บรรจุ", Status: "ยังไม่บรรจุ",
checkList:null checkList: null,
}, },
{ {
position: 1, position: 1,
@ -170,7 +194,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "เตรียมบรรจุ", Status: "เตรียมบรรจุ",
checkList:null checkList: null,
}, },
{ {
@ -181,7 +205,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "เตรียมบรรจุ", Status: "เตรียมบรรจุ",
checkList:null checkList: null,
}, },
{ {
@ -192,7 +216,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "เตรียมบรรจุ", Status: "เตรียมบรรจุ",
checkList:null checkList: null,
}, },
{ {
position: 1, position: 1,
@ -202,7 +226,7 @@ const rows = ref<TableName[]>([
ReportingDate: "30 พ.ค. 2566", // ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true, BMAOfficer: true,
Status: "บรรจุเเล้ว", Status: "บรรจุเเล้ว",
checkList:null checkList: null,
}, },
]); ]);
const clickCancel = async () => { const clickCancel = async () => {
@ -217,12 +241,15 @@ const clickClose = async () => {
ok: "ยืนยัน", ok: "ยืนยัน",
persistent: true, persistent: true,
}).onOk(async () => { }).onOk(async () => {
modal_right.value = false;
modal.value = false; modal.value = false;
}); });
} else { } else {
modal_right.value = false;
modal.value = false; modal.value = false;
} }
}; };
</script> </script>
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
@ -271,15 +298,6 @@ const clickClose = async () => {
class="text-h5" class="text-h5"
/> />
</div> </div>
<q-toggle
v-else
v-model="props.row.isActive"
dense
color="green"
@update:model-value="
clickIsActive(props.row.id, props.row.isActive)
"
/>
</div> </div>
<div v-else class="table_ellipsis"> <div v-else class="table_ellipsis">
{{ col.value }} {{ col.value }}
@ -297,6 +315,7 @@ const clickClose = async () => {
round round
size="14px" size="14px"
icon="mdi-account-alert" icon="mdi-account-alert"
@click="editDetail(props.row, 'wait')"
/> />
<q-btn <q-btn
color="red" color="red"
@ -305,6 +324,7 @@ const clickClose = async () => {
round round
size="14px" size="14px"
icon="mdi-account-remove" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')"
/> />
</div> </div>
<div v-else align="right"> <div v-else align="right">
@ -315,6 +335,7 @@ const clickClose = async () => {
round round
size="14px" size="14px"
icon="mdi-account-remove" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')"
/> />
</div> </div>
</q-td> </q-td>
@ -322,17 +343,62 @@ const clickClose = async () => {
</template> </template>
</Table> </Table>
</q-form> </q-form>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
<DialogHeader :tittle="`รายละเอียดของ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm"> text </q-card-section>
<q-separator />
<DialogFooter
:save="clickSave"
v-model:editvisible="edit"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="modal_right" persistent>
<q-card style="width: 800px"> <q-card style="width: 800px">
<q-form ref="myForm"> <q-form ref="myForm">
<!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" --> <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
<DialogHeader <DialogHeader
:tittle="`รายละเอียดของ`" :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
:close="clickClose" :close="clickClose"
/> />
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
text <div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionMasterUserNote"
:label="`${'กรอกเหตุผล'}`"
@update:modelValue="clickEditRow"
type="textarea"
/>
<q-file
v-if="getNumFile == 1"
v-model="files"
dense
:label="'เลือกไฟล์เอกสารหลักฐาน'"
outlined
use-chips
multiple
class="q-py-sm"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
</div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<DialogFooter <DialogFooter