ปรับ fe sprint2

This commit is contained in:
Kittapath 2023-06-19 15:50:50 +07:00
parent 8576f3c387
commit 0d6ff7be0a
83 changed files with 6932 additions and 2571 deletions

View file

@ -26,6 +26,10 @@
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
@ -59,7 +63,7 @@
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
@ -102,7 +106,7 @@
</template>
</datepicker>
</div>
<div class="col-6">
<!-- <div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
@ -117,8 +121,124 @@
@update:modelValue="clickEditRow"
type="number"
/>
</div> -->
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-12">
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSumTotal"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
hide-bottom-space
:label="`${'ผลรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSum"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="text-subtitle2 col-12 row items-center">
<q-space></q-space>
ผลการประเม:
<div class="text-bold items-center q-px-sm">
{{ textPoint(pointSum) }}
</div>
{{ textRangePoint(pointSum) }}
</div>
<!-- <div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
@ -132,7 +252,7 @@
:label="`${'ชื่อแบบประเมิน'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div> -->
</div>
</q-card-section>
<q-separator />
@ -171,6 +291,10 @@
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
@ -194,6 +318,7 @@ import type {
DataProps,
} from "@/modules/04_registry/interface/request/Assessment";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
@ -216,12 +341,16 @@ const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const { date2Thai, success, dateToISO, messageError } = mixin;
const route = useRoute();
const id = ref<string>("");
const name = ref<string>();
const point = ref<number>();
const point1Total = ref<number>();
const point1 = ref<number>();
const point2Total = ref<number>();
const point2 = ref<number>();
const pointSumTotal = ref<number>();
const pointSum = ref<number>();
const date = ref<Date>(new Date());
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); // dialog
@ -242,7 +371,16 @@ const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.assessment.columns.length == 0
? (visibleColumns.value = ["name", "point", "date"])
? (visibleColumns.value = [
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
])
: (visibleColumns.value = profileData.assessment.columns);
const columns = ref<QTableProps["columns"]>([
{
@ -257,22 +395,77 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
name: "point1Total",
align: "left",
label: "ชื่อแบบประเมิน",
label: "ส่วนที่1 (คะแนน)",
sortable: true,
field: "name",
field: "point1Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
name: "point1",
align: "left",
label: "คะแนน",
label: "ผลประเมินส่วนที่1 (คะแนน)",
sortable: true,
field: "point",
field: "point1",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2Total",
align: "left",
label: "ส่วนที่2 (คะแนน)",
sortable: true,
field: "point2Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2",
align: "left",
label: "ผลประเมินส่วนที่2 (คะแนน)",
sortable: true,
field: "point2",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSumTotal",
align: "left",
label: "ผลรวม (คะแนน)",
sortable: true,
field: "pointSumTotal",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSum",
align: "left",
label: "ผลประเมินรวม (คะแนน)",
sortable: true,
field: "pointSum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ผลประเมิน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -281,11 +474,66 @@ const columns = ref<QTableProps["columns"]>([
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "date",
name: "point1Total",
align: "left",
label: "วันที่ได้รับ",
label: "ส่วนที่1 (คะแนน)",
sortable: true,
field: "date",
field: "point1Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point1",
align: "left",
label: "ผลประเมินส่วนที่1 (คะแนน)",
sortable: true,
field: "point1",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2Total",
align: "left",
label: "ส่วนที่2 (คะแนน)",
sortable: true,
field: "point2Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2",
align: "left",
label: "ผลประเมินส่วนที่2 (คะแนน)",
sortable: true,
field: "point2",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSumTotal",
align: "left",
label: "ผลรวม (คะแนน)",
sortable: true,
field: "pointSumTotal",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSum",
align: "left",
label: "ผลประเมินรวม (คะแนน)",
sortable: true,
field: "pointSum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -294,7 +542,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อแบบประเมิน",
label: "ผลประเมิน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
@ -302,17 +550,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
align: "left",
label: "คะแนน",
sortable: true,
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
@ -337,8 +574,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
const visibleColumnsHistory = ref<String[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"point",
"date",
"createdFullName",
"createdAt",
@ -353,7 +595,7 @@ onMounted(async () => {
});
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileAssessmentId(profileId.value))
.then((res) => {
@ -363,7 +605,12 @@ const fetchData = async () => {
rows.value.push({
id: e.id,
name: e.name,
point: e.point,
point1Total: e.point1Total,
point1: e.point1,
point2Total: e.point2Total,
point2: e.point2,
pointSumTotal: e.pointSumTotal,
pointSum: e.pointSum,
date: new Date(e.date),
createdAt: new Date(e.createdAt),
createdFullName: e.createdFullName,
@ -374,7 +621,7 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -404,7 +651,12 @@ const clickNext = async () => {
const getData = () => {
const row = rows.value[rowIndex.value];
name.value = row.name;
point.value = row.point;
point1Total.value = row.point1Total;
point1.value = row.point1;
point2Total.value = row.point2Total;
point2.value = row.point2;
pointSumTotal.value = row.pointSumTotal;
pointSum.value = row.pointSum;
date.value = row.date;
id.value = row.id;
};
@ -460,12 +712,17 @@ const clickSave = async () => {
* นทกเพมขอม
*/
const saveData = async () => {
showLoader();
loaderPage(true);
await http
.post(config.API.profileAssessmentId(profileId.value), {
id: id.value,
name: name.value,
point: point.value,
point1Total: point1Total.value,
point1: point1.value,
point2Total: point2Total.value,
point2: point2.value,
pointSumTotal: pointSumTotal.value,
pointSum: pointSum.value,
date: dateToISO(date.value),
})
.then((res) => {
@ -484,12 +741,17 @@ const saveData = async () => {
* นทกแกไขขอม
*/
const editData = async () => {
showLoader();
loaderPage(true);
await http
.put(config.API.profileAssessmentId(id.value), {
id: id.value,
name: name.value,
point: point.value,
point1Total: point1Total.value,
point1: point1.value,
point2Total: point2Total.value,
point2: point2.value,
pointSumTotal: pointSumTotal.value,
pointSum: pointSum.value,
date: dateToISO(date.value),
})
.then((res) => {
@ -516,7 +778,7 @@ const clickDelete = async () => {
persistent: true,
})
.onOk(async () => {
showLoader();
loaderPage(true);
await http
.delete(config.API.profileAssessmentId(id.value))
.then((res) => {
@ -569,7 +831,12 @@ const selectData = async (props: DataProps) => {
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
name.value = props.row.name;
point.value = props.row.point;
point1Total.value = props.row.point1Total;
point1.value = props.row.point1;
point2Total.value = props.row.point2Total;
point2.value = props.row.point2;
pointSumTotal.value = props.row.pointSumTotal;
pointSum.value = props.row.pointSum;
date.value = props.row.date;
id.value = props.row.id;
await checkRowPage();
@ -583,7 +850,12 @@ const addData = () => {
modal.value = true;
edit.value = true;
name.value = "";
point.value = 0;
point1Total.value = 0;
point1.value = 0;
point2Total.value = 0;
point2.value = 0;
pointSumTotal.value = 0;
pointSum.value = 0;
date.value = new Date();
};
@ -623,7 +895,7 @@ const clickEditRow = () => {
const clickHistory = async (row: RequestItemsObject) => {
tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
modalHistory.value = true;
showLoader();
loaderPage(true);
await http
.get(config.API.profileAssessmentHisId(row.id))
.then((res) => {
@ -633,7 +905,12 @@ const clickHistory = async (row: RequestItemsObject) => {
rowsHistory.value.push({
id: e.id,
name: e.name,
point: e.point,
point1Total: e.point1Total,
point1: e.point1,
point2Total: e.point2Total,
point2: e.point2,
pointSumTotal: e.pointSumTotal,
pointSum: e.pointSum,
date: new Date(e.date),
createdAt: new Date(e.createdAt),
createdFullName: e.createdFullName,
@ -644,7 +921,7 @@ const clickHistory = async (row: RequestItemsObject) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -670,6 +947,26 @@ const getClass = (val: boolean) => {
"full-width cursor-pointer": !val,
};
};
const textRangePoint = (val: number | undefined) => {
if (val == undefined) val = -1;
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
if (val >= 60 && val <= 69) return "(ร้อยละ 60 69)";
if (val >= 70 && val <= 79) return "(ร้อยละ 70 79)";
if (val >= 80 && val <= 89) return "(ร้อยละ 80 89)";
if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
else return "";
};
const textPoint = (val: number | undefined) => {
if (val == undefined) val = -1;
if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
if (val >= 60 && val <= 69) return "พอใช้";
if (val >= 70 && val <= 79) return "ดี";
if (val >= 80 && val <= 89) return "ดีมาก";
if (val >= 90 && val <= 100) return "ดีเด่น";
else return "-";
};
</script>
<style lang="scss">
.modalfix {