วินัย ข้อมูลพื้นฐาน สิทธิ์
This commit is contained in:
parent
c3a32359de
commit
1dcefbd40a
6 changed files with 446 additions and 251 deletions
|
|
@ -1,72 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRouter, useRoute } from "vue-router";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import Form from '@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* รวมตัวแปร
|
|
||||||
*/
|
|
||||||
const $q = useQuasar()
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
success,
|
|
||||||
} = mixin;
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
|
|
||||||
/* บันทึกข้อมูล**/
|
|
||||||
function onSubmit(channelReturn:string){
|
|
||||||
dialogConfirm($q,()=>saveData(channelReturn))
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveData(channelReturn:string){
|
|
||||||
showLoader()
|
|
||||||
http
|
|
||||||
.post(config.API.complaintChannel(),{
|
|
||||||
name:channelReturn
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
router.push(`/discipline/channel`);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ย้อนกลับหน้ารายการ
|
|
||||||
*/
|
|
||||||
function clickBack(){
|
|
||||||
router.push(`/discipline/channel`);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
||||||
<div class="toptitle col-12 row items-center">
|
|
||||||
<q-btn
|
|
||||||
icon="mdi-arrow-left"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
color="primary"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="clickBack"
|
|
||||||
/>
|
|
||||||
{{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
|
|
||||||
</div>
|
|
||||||
<Form :on-submit="onSubmit" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import Form from "@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import router from "@/router";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const typeId = ref<string>(route.params.id.toString());
|
|
||||||
const $q = useQuasar();
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { messageError, showLoader, dialogConfirm, success } = mixin;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกข้อมูลที่เเก้ไข
|
|
||||||
* @param id ระบุ บุคคล
|
|
||||||
*/
|
|
||||||
function onSubmit(type:string) {
|
|
||||||
dialogConfirm($q, () => putData(type));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* อัปเดตข้อมูล
|
|
||||||
* @param type ช่องทางการร้องเรียน
|
|
||||||
*/
|
|
||||||
function putData(type: string) {
|
|
||||||
showLoader();
|
|
||||||
http
|
|
||||||
.put(config.API.complaintChannelbyId(typeId.value), {
|
|
||||||
name:type
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
router.push(`/discipline/channel`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
||||||
<div class="toptitle col-12 row items-center">
|
|
||||||
<q-btn
|
|
||||||
icon="mdi-arrow-left"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
color="primary"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="router.push(`/discipline/channel`)"
|
|
||||||
/>
|
|
||||||
แก้ไขช่องทางการร้องเรียน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Form :on-submit="onSubmit"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch } from "vue";
|
|
||||||
import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
|
|
||||||
|
|
||||||
const dataStore = useDisciplineChannelDataStore();
|
|
||||||
const channel = ref<string>(dataStore.type);
|
|
||||||
const channelRef = ref<any>();
|
|
||||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
|
||||||
/**
|
|
||||||
* รับ props มาจาก page หลัก
|
|
||||||
*/
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
onSubmit: {
|
|
||||||
type: Function,
|
|
||||||
default: () => "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* เช็คข้อมูลจาก props
|
|
||||||
* เมื่อมีข้อมูล
|
|
||||||
* เก็บข้อมูลลง formData
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
|
||||||
function save() {
|
|
||||||
channelRef.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (channel.value) {
|
|
||||||
props.onSubmit(channel.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function inputEdit(val: boolean) {
|
|
||||||
return {
|
|
||||||
"full-width cursor-pointer ": val,
|
|
||||||
"full-width cursor-pointer inputgreen": !val,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<q-form ref="channelRef">
|
|
||||||
<div class="col-12">
|
|
||||||
<q-card bordered>
|
|
||||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
|
||||||
<div class="col-xs-12 col-sm-12 row">
|
|
||||||
<q-separator />
|
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
|
||||||
<q-input
|
|
||||||
:class="inputEdit(isReadonly)"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
v-model="channel"
|
|
||||||
for="channel"
|
|
||||||
hide-bottom-space
|
|
||||||
label="ชื่อช่องทาง"
|
|
||||||
lazy-rules
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-separator />
|
|
||||||
<div class="row col-12 q-pa-sm">
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
for="ButtonOnSubmit"
|
|
||||||
id="formSubmit"
|
|
||||||
label="บันทึก"
|
|
||||||
color="public"
|
|
||||||
@click="save"
|
|
||||||
>
|
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</template>
|
|
||||||
|
|
@ -9,6 +9,14 @@ import http from "@/plugins/http";
|
||||||
import type { typeItem } from "@/modules/11_discipline/interface/response/channel";
|
import type { typeItem } from "@/modules/11_discipline/interface/response/channel";
|
||||||
|
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const isEdit = ref<boolean>(false);
|
||||||
|
const isRead = ref<boolean>(false);
|
||||||
|
const isId = ref<string>("");
|
||||||
|
const channel = ref<string>("");
|
||||||
|
|
||||||
const dataStore = useDisciplineChannelDataStore();
|
const dataStore = useDisciplineChannelDataStore();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
|
const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
|
||||||
|
|
@ -39,9 +47,27 @@ const pagination = ref({
|
||||||
/**
|
/**
|
||||||
* clickไปหน้าเพิ่มchanel
|
* clickไปหน้าเพิ่มchanel
|
||||||
*/
|
*/
|
||||||
function clickAdd() {
|
function clickAdd(check: boolean) {
|
||||||
dataStore.getType("");
|
modal.value = true;
|
||||||
router.push(`/discipline/channel/add`);
|
isEdit.value = check;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* clickไปหน้าเพิ่มchanel
|
||||||
|
*/
|
||||||
|
function clickEdit(check: boolean, id: string, name: string) {
|
||||||
|
modal.value = true;
|
||||||
|
isEdit.value = check;
|
||||||
|
isId.value = id;
|
||||||
|
channel.value = name;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* clickไปหน้าเพิ่มchanel
|
||||||
|
*/
|
||||||
|
function clickRead(check: boolean, name: string) {
|
||||||
|
modal.value = true;
|
||||||
|
isEdit.value = check;
|
||||||
|
isRead.value = true;
|
||||||
|
channel.value = name;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** get data */
|
/** get data */
|
||||||
|
|
@ -96,6 +122,42 @@ function editPage(data: typeItem) {
|
||||||
dataStore.getType(data.name);
|
dataStore.getType(data.name);
|
||||||
router.push(`/discipline/channel/${data.id}`);
|
router.push(`/discipline/channel/${data.id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
channel.value = "";
|
||||||
|
isId.value = "";
|
||||||
|
isRead.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function inputEdit(val: boolean) {
|
||||||
|
return {
|
||||||
|
"full-width cursor-pointer ": val,
|
||||||
|
"full-width cursor-pointer inputgreen": !val,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
const url = isEdit.value
|
||||||
|
? config.API.complaintChannelbyId(isId.value)
|
||||||
|
: config.API.complaintChannel();
|
||||||
|
showLoader();
|
||||||
|
http[isEdit.value ? "put" : "post"](url, {
|
||||||
|
name: channel.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
getComplaintChanal();
|
||||||
|
closeDialog();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า เรียกใช้ฟังชั่น*/
|
/**เมื่อเริ่มโหลดหน้า เรียกใช้ฟังชั่น*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getComplaintChanal();
|
getComplaintChanal();
|
||||||
|
|
@ -109,9 +171,9 @@ onMounted(() => {
|
||||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||||
<div>
|
<div>
|
||||||
<q-btn
|
<q-btn
|
||||||
v-if="checkPermission($route)?.attrIsCreate"
|
v-if="checkPermission($route)?.attrIsCreate"
|
||||||
@click="clickAdd()"
|
@click="clickAdd(false)"
|
||||||
size="12px"
|
dense
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
color="add"
|
color="add"
|
||||||
|
|
@ -172,18 +234,43 @@ onMounted(() => {
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
|
<q-th auto-width />
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</q-th>
|
</q-th>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props">
|
||||||
<q-td v-if="checkPermission($route)?.attrIsDelete">
|
<q-td auto-width>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="info"
|
||||||
|
@click="clickRead(true, props.row.name)"
|
||||||
|
icon="mdi-eye"
|
||||||
|
>
|
||||||
|
<q-tooltip>รายละเอียด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="
|
||||||
|
checkPermission($route)?.attrIsGet &&
|
||||||
|
checkPermission($route)?.attrIsUpdate
|
||||||
|
"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="edit"
|
||||||
|
@click="clickEdit(true, props.row.id, props.row.name)"
|
||||||
|
icon="edit"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="checkPermission($route)?.attrIsDelete"
|
||||||
dense
|
dense
|
||||||
size="12px"
|
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
color="red"
|
color="red"
|
||||||
|
|
@ -197,7 +284,6 @@ onMounted(() => {
|
||||||
v-for="col in props.cols"
|
v-for="col in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:props="props"
|
:props="props"
|
||||||
@click="checkPermission($route)?.attrIsUpdate ? editPage(props.row):''"
|
|
||||||
>
|
>
|
||||||
<div v-if="col.name === 'no'">
|
<div v-if="col.name === 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
|
|
@ -206,12 +292,51 @@ onMounted(() => {
|
||||||
{{ col.value ?? "-" }}
|
{{ col.value ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
|
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card class="col-12" style="width: 50%">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<Header
|
||||||
|
:tittle="
|
||||||
|
isRead
|
||||||
|
? 'รายละเอียดช่องทางการร้องเรียน'
|
||||||
|
: isEdit
|
||||||
|
? 'แก้ไขช่องทางการร้องเรียน'
|
||||||
|
: 'เพิ่มช่องทางการร้องเรียน'
|
||||||
|
"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section>
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(false)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="isRead"
|
||||||
|
v-model="channel"
|
||||||
|
for="channel"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ชื่อช่องทาง"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator v-if="!isRead" />
|
||||||
|
|
||||||
|
<q-card-actions align="right" v-if="!isRead">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type { FormData } from "@/modules/11_discipline/interface/request/director";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
|
||||||
|
const isReadonly = ref<boolean>(false);
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const personalId = defineModel<string>("personalId", { required: true });
|
||||||
|
const isEdit = defineModel<boolean>("isEdit", { required: true });
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
getList: Function,
|
||||||
|
});
|
||||||
|
const data = reactive<FormData>({
|
||||||
|
personalId: "",
|
||||||
|
prefix: "",
|
||||||
|
firstname: "",
|
||||||
|
lastname: "",
|
||||||
|
position: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
qualification: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function inputEdit(val: boolean) {
|
||||||
|
return {
|
||||||
|
"full-width cursor-pointer ": val,
|
||||||
|
"full-width cursor-pointer inputgreen": !val,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
personalId.value = "";
|
||||||
|
data.personalId = "";
|
||||||
|
data.prefix = "";
|
||||||
|
data.firstname = "";
|
||||||
|
data.lastname = "";
|
||||||
|
data.position = "";
|
||||||
|
data.email = "";
|
||||||
|
data.phone = "";
|
||||||
|
data.qualification = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.put(config.API.directorbyId(personalId.value), {
|
||||||
|
prefix: data.prefix,
|
||||||
|
firstName: data.firstname,
|
||||||
|
lastName: data.lastname,
|
||||||
|
position: data.position,
|
||||||
|
email: data.email,
|
||||||
|
phone: data.phone,
|
||||||
|
qualification: data.qualification,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
props.getList?.()
|
||||||
|
closeDialog();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ดึงค่าจาก api
|
||||||
|
*/
|
||||||
|
async function fetchData() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.directorbyId(personalId.value))
|
||||||
|
.then((res) => {
|
||||||
|
const dataApi = res.data.result;
|
||||||
|
personalId.value = dataApi.id;
|
||||||
|
data.prefix = dataApi.prefix;
|
||||||
|
data.firstname = dataApi.firstName;
|
||||||
|
data.lastname = dataApi.lastName;
|
||||||
|
data.position = dataApi.position;
|
||||||
|
data.phone = dataApi.phone;
|
||||||
|
data.email = dataApi.email;
|
||||||
|
data.qualification = dataApi.qualification;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
|
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
(n) => {
|
||||||
|
if (n) {
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card class="col-12" style="width: 80%">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<Header
|
||||||
|
:tittle="`${isEdit ? 'แก้ไข' : 'รายละเอียด'}รายชื่อกรรมการ`"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!isEdit"
|
||||||
|
v-model="data.prefix"
|
||||||
|
label="คำนำหน้า"
|
||||||
|
ref="prefixRef"
|
||||||
|
for="prefixRef"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!isEdit"
|
||||||
|
v-model="data.firstname"
|
||||||
|
label="ชื่อ"
|
||||||
|
ref="firstnameRef"
|
||||||
|
for="firstnameRef"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!isEdit"
|
||||||
|
v-model="data.lastname"
|
||||||
|
label="นามสกุล"
|
||||||
|
ref="lastnameRef"
|
||||||
|
for="lastnameRef"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!isEdit"
|
||||||
|
v-model="data.position"
|
||||||
|
label="ตำแหน่ง"
|
||||||
|
ref="positionRef"
|
||||||
|
for="positionRef"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="!isEdit"
|
||||||
|
v-model="data.phone"
|
||||||
|
label="เบอร์โทร"
|
||||||
|
ref="phoneRef"
|
||||||
|
for="phoneRef"
|
||||||
|
type="tel"
|
||||||
|
mask="##########"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="data.email"
|
||||||
|
:readonly="!isEdit"
|
||||||
|
label="อีเมล"
|
||||||
|
ref="emailRef"
|
||||||
|
hide-bottom-space
|
||||||
|
for="emailRef"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="inputEdit(isReadonly)"
|
||||||
|
label="คุณวุฒิ"
|
||||||
|
type="textarea"
|
||||||
|
dense
|
||||||
|
:readonly="!isEdit"
|
||||||
|
outlined
|
||||||
|
v-model="data.qualification"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator v-if="isEdit" />
|
||||||
|
|
||||||
|
<q-card-actions align="right" v-if="isEdit">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -9,12 +9,15 @@ import DialogTotal from "@/modules/11_discipline/components/6_BasicInformation/D
|
||||||
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
|
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
|
||||||
|
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import DialogEdit from "@/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const dataStore = useDisciplineDirectorDataStore();
|
const dataStore = useDisciplineDirectorDataStore();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
|
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
|
||||||
|
|
||||||
const titleInvestigate = ref<string>("");
|
const titleInvestigate = ref<string>("");
|
||||||
|
const personalId = ref<string>("");
|
||||||
const currentPage = ref<number>(1);
|
const currentPage = ref<number>(1);
|
||||||
const maxPage = ref<number>(1);
|
const maxPage = ref<number>(1);
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1);
|
||||||
|
|
@ -22,6 +25,8 @@ const rowsPerPage = ref<number>(10);
|
||||||
const totalList = ref<number>(0);
|
const totalList = ref<number>(0);
|
||||||
|
|
||||||
const modalDetail = ref<boolean>(false);
|
const modalDetail = ref<boolean>(false);
|
||||||
|
const isEdit = ref<boolean>(false);
|
||||||
|
const modalEdit = ref<boolean>(false);
|
||||||
const type = ref<string>("");
|
const type = ref<string>("");
|
||||||
const dataPopUp = ref<DirectorRowsResponse>();
|
const dataPopUp = ref<DirectorRowsResponse>();
|
||||||
/**
|
/**
|
||||||
|
|
@ -132,6 +137,13 @@ function openDetail(data: DirectorRowsResponse, typeChange: string) {
|
||||||
function closeDetail() {
|
function closeDetail() {
|
||||||
modalDetail.value = false;
|
modalDetail.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onEdit(id: string, check: boolean) {
|
||||||
|
modalEdit.value = true;
|
||||||
|
personalId.value = id;
|
||||||
|
isEdit.value = check;
|
||||||
|
}
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
* ส่งข้อมูลจำลองไปยัง store
|
* ส่งข้อมูลจำลองไปยัง store
|
||||||
*/
|
*/
|
||||||
|
|
@ -148,10 +160,10 @@ onMounted(() => {
|
||||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||||
<div>
|
<div>
|
||||||
<q-btn
|
<q-btn
|
||||||
v-if="checkPermission($route)?.attrIsCreate"
|
v-if="checkPermission($route)?.attrIsCreate"
|
||||||
@click="$router.push(`/discipline/director/add`)"
|
@click="$router.push(`/discipline/director/add`)"
|
||||||
size="12px"
|
|
||||||
flat
|
flat
|
||||||
|
dense
|
||||||
round
|
round
|
||||||
color="add"
|
color="add"
|
||||||
icon="mdi-plus"
|
icon="mdi-plus"
|
||||||
|
|
@ -225,18 +237,43 @@ onMounted(() => {
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
|
<q-th auto-width />
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</q-th>
|
</q-th>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props">
|
||||||
<q-td auto-width v-if="checkPermission($route)?.attrIsDelete">
|
<q-td auto-width>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="info"
|
||||||
|
@click="onEdit(props.row.id, false)"
|
||||||
|
icon="mdi-eye"
|
||||||
|
>
|
||||||
|
<q-tooltip>รายละเอียด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="
|
||||||
|
checkPermission($route)?.attrIsUpdate &&
|
||||||
|
checkPermission($route)?.attrIsGet
|
||||||
|
"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="edit"
|
||||||
|
@click="onEdit(props.row.id, true)"
|
||||||
|
icon="edit"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="checkPermission($route)?.attrIsDelete"
|
||||||
dense
|
dense
|
||||||
size="12px"
|
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
color="red"
|
color="red"
|
||||||
|
|
@ -247,10 +284,7 @@ onMounted(() => {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<div
|
<div v-if="col.name == 'no'">
|
||||||
v-if="col.name == 'no'"
|
|
||||||
@click="$router.push(`/discipline/director/${props.row.id}`)"
|
|
||||||
>
|
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -258,8 +292,16 @@ onMounted(() => {
|
||||||
col.name == 'totalInvestigate' &&
|
col.name == 'totalInvestigate' &&
|
||||||
props.row.totalInvestigate > 0
|
props.row.totalInvestigate > 0
|
||||||
"
|
"
|
||||||
class="text-blue"
|
:class="
|
||||||
@click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'investigate'):''"
|
checkPermission($route)?.attrIsGet
|
||||||
|
? 'text-blue cursor-pointer'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
@click="
|
||||||
|
checkPermission($route)?.attrIsGet
|
||||||
|
? openDetail(props.row, 'investigate')
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{ props.row.totalInvestigate }}
|
{{ props.row.totalInvestigate }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -268,15 +310,20 @@ onMounted(() => {
|
||||||
col.name == 'totalDisciplinary' &&
|
col.name == 'totalDisciplinary' &&
|
||||||
props.row.totalDisciplinary > 0
|
props.row.totalDisciplinary > 0
|
||||||
"
|
"
|
||||||
class="text-blue"
|
:class="
|
||||||
@click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'disciplinary'):''"
|
checkPermission($route)?.attrIsGet
|
||||||
|
? 'text-blue cursor-pointer'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
@click="
|
||||||
|
checkPermission($route)?.attrIsGet
|
||||||
|
? openDetail(props.row, 'disciplinary')
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{ props.row.totalDisciplinary }}
|
{{ props.row.totalDisciplinary }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-else>
|
||||||
v-else
|
|
||||||
@click="checkPermission($route)?.attrIsUpdate ? $router.push(`/discipline/director/${props.row.id}`):''"
|
|
||||||
>
|
|
||||||
{{ col.value ?? "-" }}
|
{{ col.value ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
|
|
@ -293,4 +340,11 @@ onMounted(() => {
|
||||||
:type="type"
|
:type="type"
|
||||||
:data-list="dataPopUp"
|
:data-list="dataPopUp"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DialogEdit
|
||||||
|
v-model:modal="modalEdit"
|
||||||
|
v-model:personalId="personalId"
|
||||||
|
:isEdit="isEdit"
|
||||||
|
:getList="getList"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue