hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ui วินัย ส่วน เรื่องร้องเรียน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-10-16 18:07:42 +07:00
parent 0ee7dff491
commit 37b6c32e45
10 changed files with 739 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

385
src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue Normal file
View file

@ -0,0 +1,385 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { DataOption } from "../../interface/index/Main";
// importStroe
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const complainstStore = useComplainstDataStore();
const { selectComplainantTpye } = complainstStore;
const complainantType = ref<string>("");
const complainantoptions = ref<DataOption[]>([
{ id: "0", name: "บุคคล" },
{ id: "1", name: "หน่ายงาน" },
{ id: "2", name: "กรุงเทพหมานคร" },
]);
const complainant = ref<string>("");
const office = ref<string>("");
const agency = ref<string>("");
const agencytoptions = ref<DataOption[]>([
{ id: "0", name: "หน่ายงานเอ" },
{ id: "1", name: "หน่ายงานบี" },
{ id: "2", name: "หน่ายงานชี" },
]);
const topicComplaint = ref<string>("");
const detail = ref<string>("");
const datereceive = ref<Date>();
const files = ref<any>();
const fileDocDataUpload = ref<File[]>([]);
async function selectComplainant(val: string) {
complainant.value = "";
office.value = "";
agency.value = "";
if (val === "0") {
await fectListname();
} else if (val === "1") {
await fectOffice();
}
}
// เรียกรายชื่อ
async function fectListname() {
const listName = [
{
id: "1",
name: "นายเอ",
},
{
id: "2",
name: "นายบี",
},
{
id: "3",
name: "นายชี",
},
];
selectComplainantTpye(listName);
}
async function fectOffice() {
// const listOffice = [
// {
// id: "1",
// name: "สำนักเอ",
// },
// {
// id: "2",
// name: "สำนักเอ",
// },
// {
// id: "3",
// name: "สำนักเอ",
// },
// ];
}
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
</script>
<template>
<div class="toptitle text-dark 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/complaints`)"
/>
เพิ่มเรื่องร้องเรียน
</div>
<div class="col-12 q-mt-sm">
<q-card flat bordered>
<div class="col-12 row q-pa-md">
<div
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-2">
<q-select
dense
outlined
v-model="complainantType"
:options="complainantoptions"
label="ผู้ร้องเรียน"
option-value="id"
option-label="name"
emit-value
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
lazy-rules
@update:model-value="selectComplainant(complainantType)"
/>
</div>
<div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
<q-select
dense
outlined
v-model="complainant"
:options="complainstStore.optionListName"
label="ราชชื่อจากทะเบียรประวัติ"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
<q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
</div>
<div class="col-xs-12 col-sm-2">
<q-select
dense
outlined
v-model="agency"
:options="agencytoptions"
label="หน่วยงานที่พิจารณา"
option-value="id"
option-label="name"
emit-value
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
lazy-rules
/>
</div>
<div class="col-xs-12 col-sm-12">
<q-input
dense
outlined
v-model="topicComplaint"
:rules="[(val) => !!val || 'กรุณาการข้อมูล']"
lazy-rules
label="เรื่องร้องเรียน"
type="textarea"
rows="5"
/>
</div>
<div class="col-xs-12 col-sm-12">
<q-input
dense
outlined
v-model="detail"
:rules="[(val) => !!val || 'กรุณาการข้อมูล']"
lazy-rules
label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
type="textarea"
rows="5"
/>
</div>
<div class="col-xs-12 col-sm-2">
<datepicker
menu-class-name="modalfix"
v-model="datereceive"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
datereceive != null ? date2Thai(datereceive) : null
"
label="วันที่รับเรื่อง"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-2">
<datepicker
menu-class-name="modalfix"
v-model="datereceive"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
datereceive != null ? date2Thai(datereceive) : null
"
label="วันที่กำหนดวันพิจารณา"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-2">
<q-select
dense
outlined
v-model="complainantType"
:options="complainantoptions"
label="ลักษณะความผิด"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col-xs-12 col-sm-2">
<q-select
dense
outlined
v-model="complainantType"
:options="complainantoptions"
label="ระดับการพิจารณา"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-2">
<datepicker
menu-class-name="modalfix"
v-model="datereceive"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
datereceive != null ? date2Thai(datereceive) : null
"
label="วันที่แจ้งเตือนล่ววงหน้า"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่ววงหน้า'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-2">
<q-select
dense
outlined
v-model="complainantType"
:options="complainantoptions"
label="รับเรื่องร้องเรียน"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-4">
<q-input
dense
outlined
v-model="office"
label="ผู้ร้องเรียน"
:rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
lazy-rules
/>
</div>
<div class="col-xs-12 col-sm-4">
<q-file
class="col-xs-12 col-sm-10"
outlined
dense
v-model="files"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn flat round color="secondary" icon="mdi-content-save-outline"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</div>
</q-card>
</div>
</template>
<style scoped></style>

256
src/modules/11_discipline/components/1_Complaint/MainPage.vue
View file

@ -1,9 +1,257 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { QTableProps } from "quasar";
// importStroe
import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
const router = useRouter();
const complainstStore = useComplainstDataStore();
const { fectComplainst } = complainstStore;
//ข้อมูล Table
const filterTable = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "subject",
align: "left",
label: "เรื่อง",
sortable: true,
field: "subject",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "detail",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "detail",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "complainant",
align: "left",
label: "ผู้ถูกร้องเรียน",
sortable: true,
field: "complainant",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "offenseDescription",
align: "left",
label: "ลักษณะความผิด",
sortable: true,
field: "offenseDescription",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "creationDate",
align: "left",
label: "วันที่สร้างเรื่องร้องเรียน",
sortable: true,
field: "creationDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "considerationLevel",
align: "left",
label: "ระดับการพิจารณา",
sortable: true,
field: "considerationLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "considerationDeadlineDate",
align: "left",
label: "วันที่กำหนดพิจารณา",
sortable: true,
field: "considerationDeadlineDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"subject",
"detail",
"complainant",
"offenseDescription",
"creationDate",
"considerationLevel",
"considerationDeadlineDate",
]);
onMounted(async () => {
await fecthListComplaints();
});
async function fecthListComplaints() {
const listData = [
{
subject: "ทุจริตในหน้าที่",
detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
complainant: "นางศิรินภา คงน้อย",
offenseDescription: "ร้ายแรง",
creationDate: "2023-10-16",
considerationLevel: "ด่วนมาก",
considerationDeadlineDate: "2023-11-01",
},
{
subject: "ทุจริตในหน้าที่",
detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
complainant: "นายแก้ว คำ",
offenseDescription: "ร้ายแรง",
creationDate: "2023-10-16",
considerationLevel: "ด่วนมาก",
considerationDeadlineDate: "2023-11-01",
},
{
subject: "ทุจริตในหน้าที่",
detail:
"มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
complainant: "นายภัทรานุย คงนอย",
offenseDescription: "ร้ายแรง",
creationDate: "2023-10-16",
considerationLevel: "ด่วนมาก",
considerationDeadlineDate: "2023-11-01",
},
];
await fectComplainst(listData);
}
function redirectToPageadd() {
router.push(`/discipline/complaints/add`);
}
//pagination
const pagination = ref({
descending: true,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div>
<h1>เรื่องร้องเรียน</h1>
<div class="toptitle text-dark col-12 row items-center">เรื่องร้องเรียน</div>
<div class="col-12 q-mt-sm">
<q-card flat bordered>
<div class="q-pa-md">
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
<q-btn
flat
dense
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่ม</q-tooltip></q-btn
>
<q-space />
<div class="col-2">
<q-input dense outlined v-model="filterTable" label="ค้นหา" />
</div>
<div class="col-2">
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
/>
</div>
</q-toolbar>
<d-table
ref="table"
:columns="columns"
:rows="complainstStore.rows"
:filter="filterTable"
row-key="subject"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<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" style="height: 40px">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="subject" :props="props">
{{ props.row.subject }}
</q-td>
<q-td key="detail" :props="props">
<div class="table_ellipsis">
{{ props.row.detail }}
</div>
</q-td>
<q-td key="complainant" :props="props">
{{ props.row.complainant }}
</q-td>
<q-td key="offenseDescription" :props="props">
{{ props.row.offenseDescription }}
</q-td>
<q-td key="creationDate" :props="props">
{{ props.row.creationDate }}
</q-td>
<q-td key="considerationLevel" :props="props">
{{ props.row.considerationLevel }}
</q-td>
<q-td key="considerationDeadlineDate" :props="props">
{{ props.row.considerationDeadlineDate }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>
</q-card>
</div>
</template>
<style scoped></style>
<style scoped></style>

2
src/modules/11_discipline/components/4_Order/MainPage.vue
View file

@ -2,7 +2,7 @@
<template>
<div>
<h1>เรื่องร้องเรียน</h1>
<h1>ออกคำสั่ง</h1>
</div>
</template>

4
src/modules/11_discipline/components/5_Report/MainPage.vue
View file

@ -2,8 +2,8 @@
<template>
<div>
<h1>เรื่องร้องเรียน</h1>
<h1>รายงาน</h1>
</div>
</template>
<style scoped></style>
<style scoped></style>

4
src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
View file

@ -2,8 +2,8 @@
<template>
<div>
<h1>เรื่องร้องเรียน</h1>
<h1>ช่องทางการร้องเรียน</h1>
</div>
</template>
<style scoped></style>
<style scoped></style>

2
src/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue
View file

@ -2,7 +2,7 @@
<template>
<div>
<h1>เรื่องร้องเรียน</h1>
<h1>กรรมการ</h1>
</div>
</template>

7
src/modules/11_discipline/interface/index/Main.ts
View file

@ -1,4 +1,7 @@
interface DataOption {
id: string;
name: string;
}
export type {
DataOption
};

57
src/modules/11_discipline/router.ts
View file

@ -2,6 +2,11 @@
const complaintMain = () => import("@/modules/11_discipline/components/1_Complaint/MainPage.vue")
const factsMain = () => import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue")
const disciplinaryMain = () => import("@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue")
const oredrMain = () => import("@/modules/11_discipline/components/4_Order/MainPage.vue")
const report = () => import("@/modules/11_discipline/components/5_Report/MainPage.vue")
const directorMain = () => import("@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue")
const channelMain = () => import("@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue")
const complaintAdd = () => import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue")
export default [
@ -15,6 +20,16 @@ export default [
Role: "coin",
},
},
{
path: "/discipline/complaints/add",
name: "/discipline-complaints-add",
component: complaintAdd,
meta: {
Auth: true,
Key: [11.1],
Role: "coin",
},
},
{
path: "/discipline/investigatefacts",
name: "/discipline-investigatefacts",
@ -31,7 +46,47 @@ export default [
component: disciplinaryMain,
meta: {
Auth: true,
Key: [9],
Key: [11.3],
Role: "coin",
},
},
{
path: "/discipline/order",
name: "/discipline-order",
component: oredrMain,
meta: {
Auth: true,
Key: [11.4],
Role: "coin",
},
},
{
path: "/discipline/report",
name: "/discipline-report",
component: report,
meta: {
Auth: true,
Key: [11.5],
Role: "coin",
},
},
{
path: "/discipline/director",
name: "/discipline-director",
component: directorMain,
meta: {
Auth: true,
Key: [11.6],
Role: "coin",
},
},
{
path: "/discipline/channel",
name: "/discipline-channel",
component: channelMain,
meta: {
Auth: true,
Key: [11.6],
Role: "coin",
},
},

31
src/modules/11_discipline/stroes/ComplaintsStore.ts
View file

@ -0,0 +1,31 @@
import { defineStore } from "pinia";
import { ref } from "vue";
export const useComplainstDataStore = defineStore("complainst", () => {
const rows = ref<any>([])
const optionListName = ref<any>([])
function fectComplainst(data: any) {
let datalist = data.map((e: any) => ({
subject: e.subject,
detail: e.detail,
complainant: e.complainant,
offenseDescription: e.offenseDescription,
creationDate: e.creationDate,
considerationLevel: e.considerationLevel,
considerationDeadlineDate: e.considerationDeadlineDate,
}))
rows.value = datalist
}
function selectComplainantTpye(list: any) {
console.log(list);
optionListName.value = list
}
return {
rows,
optionListName,
fectComplainst,
selectComplainantTpye
}
})