วินัย ข้อมูลพื้นฐาน สิทธิ์

This commit is contained in:
STW_TTTY\stwtt 2024-08-09 11:07:14 +07:00
parent c3a32359de
commit 1dcefbd40a
6 changed files with 446 additions and 251 deletions

View file

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

View file

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

View file

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

View file

@ -9,6 +9,14 @@ import http from "@/plugins/http";
import type { typeItem } from "@/modules/11_discipline/interface/response/channel";
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 mixin = useCounterMixin();
const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
@ -39,9 +47,27 @@ const pagination = ref({
/**
* clickไปหนาเพมchanel
*/
function clickAdd() {
dataStore.getType("");
router.push(`/discipline/channel/add`);
function clickAdd(check: boolean) {
modal.value = true;
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 */
@ -96,6 +122,42 @@ function editPage(data: typeItem) {
dataStore.getType(data.name);
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(() => {
getComplaintChanal();
@ -109,9 +171,9 @@ onMounted(() => {
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
@click="clickAdd()"
size="12px"
v-if="checkPermission($route)?.attrIsCreate"
@click="clickAdd(false)"
dense
flat
round
color="add"
@ -172,18 +234,43 @@ onMounted(() => {
>
<template v-slot:header="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">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-if="checkPermission($route)?.attrIsDelete">
<q-tr :props="props">
<q-td auto-width>
<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
size="12px"
flat
round
color="red"
@ -197,7 +284,6 @@ onMounted(() => {
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="checkPermission($route)?.attrIsUpdate ? editPage(props.row):''"
>
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
@ -206,12 +292,51 @@ onMounted(() => {
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</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>
<style lang="scss" scope>

View file

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

View file

@ -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 { checkPermission } from "@/utils/permissions";
import DialogEdit from "@/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue";
const $q = useQuasar();
const dataStore = useDisciplineDirectorDataStore();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
const titleInvestigate = ref<string>("");
const personalId = ref<string>("");
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
@ -22,6 +25,8 @@ const rowsPerPage = ref<number>(10);
const totalList = ref<number>(0);
const modalDetail = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const modalEdit = ref<boolean>(false);
const type = ref<string>("");
const dataPopUp = ref<DirectorRowsResponse>();
/**
@ -132,6 +137,13 @@ function openDetail(data: DirectorRowsResponse, typeChange: string) {
function closeDetail() {
modalDetail.value = false;
}
function onEdit(id: string, check: boolean) {
modalEdit.value = true;
personalId.value = id;
isEdit.value = check;
}
/**
* งขอมลจำลองไปย store
*/
@ -148,10 +160,10 @@ onMounted(() => {
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
v-if="checkPermission($route)?.attrIsCreate"
@click="$router.push(`/discipline/director/add`)"
size="12px"
flat
dense
round
color="add"
icon="mdi-plus"
@ -225,18 +237,43 @@ onMounted(() => {
</template>
<template v-slot:header="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">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td auto-width v-if="checkPermission($route)?.attrIsDelete">
<q-tr :props="props">
<q-td auto-width>
<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
size="12px"
flat
round
color="red"
@ -247,10 +284,7 @@ onMounted(() => {
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'no'"
@click="$router.push(`/discipline/director/${props.row.id}`)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
@ -258,8 +292,16 @@ onMounted(() => {
col.name == 'totalInvestigate' &&
props.row.totalInvestigate > 0
"
class="text-blue"
@click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'investigate'):''"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'investigate')
: ''
"
>
{{ props.row.totalInvestigate }}
</div>
@ -268,15 +310,20 @@ onMounted(() => {
col.name == 'totalDisciplinary' &&
props.row.totalDisciplinary > 0
"
class="text-blue"
@click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'disciplinary'):''"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'disciplinary')
: ''
"
>
{{ props.row.totalDisciplinary }}
</div>
<div
v-else
@click="checkPermission($route)?.attrIsUpdate ? $router.push(`/discipline/director/${props.row.id}`):''"
>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
@ -293,4 +340,11 @@ onMounted(() => {
:type="type"
:data-list="dataPopUp"
/>
<DialogEdit
v-model:modal="modalEdit"
v-model:personalId="personalId"
:isEdit="isEdit"
:getList="getList"
/>
</template>