แก้ไขประวัติเงินเดือน === > Popup-Edit
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8725a4f79e
commit
783c3c6e50
4 changed files with 877 additions and 19 deletions
|
|
@ -8,4 +8,23 @@ interface DataProfile {
|
|||
org: string;
|
||||
}
|
||||
|
||||
export type { DataProfile };
|
||||
interface FormDataSalary {
|
||||
positionLevel: string;
|
||||
positionCee: string;
|
||||
amount: number;
|
||||
amountSpecial: number;
|
||||
posNoAbb: string;
|
||||
posNo: string;
|
||||
orgRoot: string;
|
||||
orgChild1: string;
|
||||
orgChild2: string;
|
||||
orgChild3: string;
|
||||
orgChild4: string;
|
||||
commandCode: string;
|
||||
posNumCodeSit: string;
|
||||
posNumCodeSitAbb: string;
|
||||
commandNo: string;
|
||||
commandYear: null | number;
|
||||
}
|
||||
|
||||
export type { DataProfile, FormDataSalary };
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ interface DataPosition {
|
|||
amount: number;
|
||||
amountSpecial: number;
|
||||
commandCode: string;
|
||||
commandDateAffect: string;
|
||||
commandDateSign: string;
|
||||
commandDateAffect: Date;
|
||||
commandDateSign: Date;
|
||||
commandId: string;
|
||||
commandName: string;
|
||||
commandNo: string;
|
||||
|
|
@ -68,6 +68,8 @@ interface DataPosition {
|
|||
remark: string;
|
||||
salaryId: string;
|
||||
status: string;
|
||||
posNumCodeSitAbb: string;
|
||||
posNumCodeSit: string;
|
||||
}
|
||||
|
||||
export type { DataSalaryPos, DataPosition };
|
||||
|
|
|
|||
|
|
@ -370,7 +370,7 @@ function classInput(val: boolean) {
|
|||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.positionType"
|
||||
:label="empType === 'officer' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
|
||||
:label="empType === 'officer' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { ref, onMounted, computed, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -9,7 +10,13 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
|
||||
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { FormDataSalary } from "@/modules/04_registryPerson/interface/index/Edit";
|
||||
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
||||
import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
|
||||
import type {
|
||||
DataPosType,
|
||||
DataPosLevel,
|
||||
} from "@/modules/04_registryPerson/interface/response/Position";
|
||||
|
||||
import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
|
||||
import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
|
||||
|
|
@ -28,6 +35,7 @@ const {
|
|||
success,
|
||||
findOrgNameHtml,
|
||||
dialogConfirm,
|
||||
convertDateToAPI,
|
||||
} = useCounterMixin();
|
||||
|
||||
const empType = ref<string>(route.params.type.toString());
|
||||
|
|
@ -120,9 +128,9 @@ const baseColumns = ref<QTableColumn[]>([
|
|||
style: "font-size: 14px",
|
||||
format(v, row) {
|
||||
return row.amount
|
||||
? `${row.amount.toLocaleString()}${
|
||||
? `${Number(row.amount).toLocaleString()}${
|
||||
row.amountSpecial !== 0 && row.amountSpecial
|
||||
? ` (${row.amountSpecial.toLocaleString()})`
|
||||
? ` (${Number(row.amountSpecial).toLocaleString()})`
|
||||
: ""
|
||||
}`
|
||||
: "-";
|
||||
|
|
@ -207,7 +215,7 @@ const baseColumns = ref<QTableColumn[]>([
|
|||
format(val, row) {
|
||||
return row.commandNo && row.commandYear
|
||||
? `${row.commandNo}/${Number(row.commandYear) + 543}`
|
||||
: "";
|
||||
: "-";
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -247,19 +255,19 @@ const baseColumns = ref<QTableColumn[]>([
|
|||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"commandDateAffect",
|
||||
"posNumCodeSit",
|
||||
"posNo",
|
||||
"positionName",
|
||||
"positionType",
|
||||
"positionLevel",
|
||||
"positionExecutive",
|
||||
"amount",
|
||||
"positionSalaryAmount",
|
||||
"mouthSalaryAmount",
|
||||
"commandNo",
|
||||
"commandCode",
|
||||
"commandDateSign",
|
||||
"positionSalaryAmount",
|
||||
"organization",
|
||||
"posNo",
|
||||
"posNumCodeSit",
|
||||
"commandNo",
|
||||
"commandDateSign",
|
||||
"commandCode",
|
||||
"remark",
|
||||
]);
|
||||
const columns = computed<QTableColumn[]>(() => {
|
||||
|
|
@ -403,8 +411,350 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
|
|||
: "";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
/** ฟังก์ชันดาวน์โหลดไฟล Excel */
|
||||
function exportToExcel() {
|
||||
const newData = rows.value.map((e: DataPosition) => {
|
||||
return {
|
||||
commandDateAffect: date2Thai(e.commandDateAffect),
|
||||
positionName: e.positionName,
|
||||
positionType: e.positionType,
|
||||
positionLevel: e.positionLevel
|
||||
? e.positionLevel
|
||||
: e.positionCee
|
||||
? e.positionCee
|
||||
: "",
|
||||
positionExecutive: e.positionExecutive,
|
||||
amount: e.amount,
|
||||
mouthSalaryAmount: e.mouthSalaryAmount,
|
||||
positionSalaryAmount: e.positionSalaryAmount,
|
||||
organization: findOrgName({
|
||||
root: e.orgRoot,
|
||||
child1: e.orgChild1,
|
||||
child2: e.orgChild2,
|
||||
child3: e.orgChild3,
|
||||
child4: e.orgChild4,
|
||||
}),
|
||||
posNo:
|
||||
e.posNoAbb && e.posNo
|
||||
? `${e.posNoAbb} ${e.posNo}`
|
||||
: e.posNo
|
||||
? e.posNo
|
||||
: "",
|
||||
posNumCodeSit:
|
||||
e.posNumCodeSitAbb && e.posNumCodeSit
|
||||
? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
|
||||
: e.posNumCodeSit
|
||||
? e.posNumCodeSit
|
||||
: "",
|
||||
commandNo:
|
||||
e.posNumCodeSitAbb && e.posNumCodeSit
|
||||
? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
|
||||
: e.posNumCodeSit
|
||||
? e.posNumCodeSit
|
||||
: "",
|
||||
commandDateSign: date2Thai(e.commandDateSign),
|
||||
commandCode: store.convertCommandCodeName(e.commandCode),
|
||||
remark: e.remark,
|
||||
};
|
||||
});
|
||||
|
||||
const headers = columns.value.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
|
||||
const worksheet = XLSX.utils.json_to_sheet(newData, {
|
||||
header: visibleColumns.value,
|
||||
});
|
||||
|
||||
//แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
|
||||
XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
|
||||
|
||||
// Create a new workbook and append the worksheet
|
||||
const workbook = XLSX.utils.book_new();
|
||||
|
||||
XLSX.utils.book_append_sheet(
|
||||
workbook,
|
||||
worksheet,
|
||||
`รายการประวัติตำแหน่งเงินเดือน`
|
||||
);
|
||||
XLSX.writeFile(workbook, "รายการประวัติตำแหน่งเงินเดือน.xlsx");
|
||||
}
|
||||
|
||||
const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
|
||||
const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
|
||||
const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
|
||||
const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
|
||||
|
||||
const formData = reactive<FormDataSalary>({
|
||||
positionLevel: "",
|
||||
positionCee: "",
|
||||
amount: 0,
|
||||
amountSpecial: 0,
|
||||
posNoAbb: "",
|
||||
posNo: "",
|
||||
orgRoot: "",
|
||||
orgChild1: "",
|
||||
orgChild2: "",
|
||||
orgChild3: "",
|
||||
orgChild4: "",
|
||||
commandCode: "",
|
||||
posNumCodeSit: "",
|
||||
posNumCodeSitAbb: "",
|
||||
commandNo: "",
|
||||
commandYear: null,
|
||||
});
|
||||
|
||||
const isPositionName = ref<boolean>(false); //เช็คว่ามี ตำแหน่งประเภท
|
||||
const isUpdateData = ref<boolean>(false); // สถานะการแก้ไข
|
||||
const colNameMain = ref<string>(""); //ชื่อ Coolumn ที่ต้องการแก้ไข
|
||||
const salaryId = ref<string>(""); // id ที่ต้องการแก้ไข
|
||||
|
||||
/**
|
||||
* ฟังก์ชันกำหนดค่าที่ต้องการแก้ไข
|
||||
* @param data ข้อมูลที่ต้องการแก้ไข
|
||||
* @param colName ชื่อ Columns ที่ต้เองการแก้ไข
|
||||
*/
|
||||
function onShow(data: DataPosition, colName: string) {
|
||||
salaryId.value = data.id;
|
||||
isUpdateData.value = false;
|
||||
commandCodeOptions.value = store.commandCodeData;
|
||||
posTypeOptions.value = store.posTypeData;
|
||||
if (colName === "positionLevel" && data.positionType) {
|
||||
updateSelectType(data.positionType);
|
||||
}
|
||||
colNameMain.value = colName;
|
||||
isPositionName.value = data.positionType ? true : false;
|
||||
formData.positionLevel = data.positionLevel;
|
||||
formData.positionCee = data.positionCee;
|
||||
formData.amount = data.amount;
|
||||
formData.amountSpecial = data.amountSpecial;
|
||||
formData.orgRoot = data.orgRoot;
|
||||
formData.orgChild1 = data.orgChild1;
|
||||
formData.orgChild2 = data.orgChild2;
|
||||
formData.orgChild3 = data.orgChild3;
|
||||
formData.orgChild4 = data.orgChild4;
|
||||
formData.posNoAbb = data.posNoAbb;
|
||||
formData.posNo = data.posNo;
|
||||
formData.commandCode = data.commandCode;
|
||||
formData.posNumCodeSit = data.posNumCodeSit;
|
||||
formData.posNumCodeSitAbb = data.posNumCodeSitAbb;
|
||||
formData.commandNo = data.commandNo;
|
||||
formData.commandYear = data.commandYear;
|
||||
}
|
||||
|
||||
/** ฟังก์ชันกำหนดค่า FormData ทำงานเมื่อ popup editปิด*/
|
||||
function onHide() {
|
||||
formData.positionLevel = "";
|
||||
formData.positionCee = "";
|
||||
formData.amount = 0;
|
||||
formData.amountSpecial = 0;
|
||||
formData.orgRoot = "";
|
||||
formData.orgChild1 = "";
|
||||
formData.orgChild2 = "";
|
||||
formData.orgChild3 = "";
|
||||
formData.orgChild4 = "";
|
||||
formData.posNoAbb = "";
|
||||
formData.posNo = "";
|
||||
formData.commandCode = "";
|
||||
formData.posNumCodeSit = "";
|
||||
formData.posNumCodeSitAbb = "";
|
||||
formData.commandNo = "";
|
||||
formData.commandYear = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันบันทึกข้อมูลการแก้ไข
|
||||
* @param val
|
||||
* @param id
|
||||
* @param close
|
||||
*/
|
||||
async function onSave(val: any, id: string, close?: () => void) {
|
||||
if (isUpdateData.value) {
|
||||
showLoader();
|
||||
const isCol = (key: string) => colNameMain.value === key;
|
||||
const toNumber = (v: any) =>
|
||||
v ? Number(String(v).replace(/,/g, "")) : null;
|
||||
const body: Record<string, any> = {};
|
||||
if (isCol("commandDateAffect")) {
|
||||
body.commandDateAffect = convertDateToAPI(val);
|
||||
}
|
||||
if (isCol("positionName")) {
|
||||
body.positionName = val;
|
||||
}
|
||||
if (isCol("positionType")) {
|
||||
body.positionType = val;
|
||||
}
|
||||
if (isCol("positionLevel")) {
|
||||
body.positionLevel = formData.positionLevel;
|
||||
body.positionCee = formData.positionCee;
|
||||
}
|
||||
if (isCol("positionExecutive")) {
|
||||
body.positionExecutive = val;
|
||||
}
|
||||
if (isCol("amount")) {
|
||||
body.amount = toNumber(formData.amount);
|
||||
body.amountSpecial = toNumber(formData.amountSpecial);
|
||||
}
|
||||
if (isCol("positionSalaryAmount")) {
|
||||
body.positionSalaryAmount = toNumber(val);
|
||||
}
|
||||
if (isCol("mouthSalaryAmount")) {
|
||||
body.mouthSalaryAmount = toNumber(val);
|
||||
}
|
||||
if (isCol("organization")) {
|
||||
body.orgRoot = formData.orgRoot;
|
||||
body.orgChild1 = formData.orgChild1;
|
||||
body.orgChild2 = formData.orgChild2;
|
||||
body.orgChild3 = formData.orgChild3;
|
||||
body.orgChild4 = formData.orgChild4;
|
||||
}
|
||||
if (isCol("posNo")) {
|
||||
body.posNo = formData.posNo;
|
||||
body.posNoAbb = formData.posNoAbb;
|
||||
}
|
||||
if (isCol("posNumCodeSit")) {
|
||||
body.posNumCodeSit = formData.posNumCodeSit;
|
||||
body.posNumCodeSitAbb = formData.posNumCodeSitAbb;
|
||||
}
|
||||
if (isCol("commandDateSign")) {
|
||||
body.commandDateSign = convertDateToAPI(val);
|
||||
}
|
||||
if (isCol("commandNo")) {
|
||||
body.commandNo = formData.commandNo;
|
||||
body.commandYear = formData.commandYear;
|
||||
}
|
||||
if (isCol("commandCode")) {
|
||||
body.commandCode = formData.commandCode;
|
||||
}
|
||||
if (isCol("remark")) {
|
||||
body.remark = val;
|
||||
}
|
||||
|
||||
await http
|
||||
.patch(config.API.salaryTemp + `/${salaryId.value}`, body)
|
||||
.then(async () => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
||||
rows.value = rows.value.map((item) => {
|
||||
if (item.id === salaryId.value) {
|
||||
return {
|
||||
...item,
|
||||
...body,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
rowsMain.value = rowsMain.value.map((item) => {
|
||||
if (item.id === salaryId.value) {
|
||||
return {
|
||||
...item,
|
||||
...body,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
})
|
||||
.catch(async (err) => {
|
||||
await fetchData?.();
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
if (close) close();
|
||||
});
|
||||
} else {
|
||||
if (close) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟิลเตอร์ข้อมูลจาก input
|
||||
* @param val ค่าที่ป้อนให้ input
|
||||
* @param update function จาก quasar
|
||||
* @param filtername type ที่กำหนด ของ input นั้นๆ
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, filtername: string) {
|
||||
switch (filtername) {
|
||||
case "commandCode":
|
||||
update(() => {
|
||||
commandCodeOptions.value = store.commandCodeData.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "posType":
|
||||
update(() => {
|
||||
posTypeOptions.value = store.posTypeData.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "posLevel":
|
||||
update(() => {
|
||||
posLevelOptions.value = store.posLevelData.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชันเรียกข้อมูลปรเภทตำแหน่งข้าราชการ */
|
||||
async function fetchType() {
|
||||
const entpont =
|
||||
empType.value === "officer"
|
||||
? config.API.orgPosType
|
||||
: config.API.orgEmployeeType;
|
||||
await http
|
||||
.get(entpont)
|
||||
.then((res) => {
|
||||
dataLevel.value = res.data.result;
|
||||
store.posTypeData = res.data.result.map((e: DataPosType) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
posTypeOptions.value = store.posTypeData;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเลือกประเภทตำแหน่ง
|
||||
* @param val id ประเภทตำแหน่ง
|
||||
*/
|
||||
async function updateSelectType(val: string) {
|
||||
console.log(val);
|
||||
|
||||
const listLevel = val
|
||||
? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
|
||||
: null;
|
||||
|
||||
// เช็คประเภทตำแหน่งงาน
|
||||
if (listLevel) {
|
||||
store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
|
||||
id: e.id,
|
||||
name:
|
||||
empType.value === "officer"
|
||||
? e.posLevelName
|
||||
: `${listLevel.posTypeShortName} ${e.posLevelName}`,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชันอัปเดทการแก้ไข*/
|
||||
function onUpdateData() {
|
||||
isUpdateData.value = true;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchData(), fetchType()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -427,6 +777,17 @@ onMounted(() => {
|
|||
<q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="download"
|
||||
:disable="rows.length == 0"
|
||||
@click="exportToExcel()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -538,6 +899,7 @@ onMounted(() => {
|
|||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.id"
|
||||
|
|
@ -554,6 +916,269 @@ onMounted(() => {
|
|||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
col.name === 'positionLevel' ||
|
||||
col.name === 'amount' ||
|
||||
col.name === 'posNo' ||
|
||||
col.name === 'posNumCodeSit' ||
|
||||
col.name === 'commandNo' ||
|
||||
col.name === 'commandCode'
|
||||
"
|
||||
>
|
||||
{{ col.value ?? "-" }}
|
||||
<q-popup-edit
|
||||
v-if="
|
||||
tabs === 'PENDING' &&
|
||||
statusCheckEdit == 'PENDING' &&
|
||||
isConfirmEdit
|
||||
"
|
||||
v-model="props.row[col.name]"
|
||||
v-slot="scope"
|
||||
label-set="บันทึก"
|
||||
label-cancel="ยกเลิก"
|
||||
@before-show="onShow(props.row, col.name)"
|
||||
@hide="onHide"
|
||||
:persistent="col.name === 'commandNo'"
|
||||
>
|
||||
<div class="q-mb-xs">
|
||||
{{ `แก้ไข${col.label}` }}
|
||||
</div>
|
||||
<div v-if="col.name === 'positionLevel'">
|
||||
<q-select
|
||||
v-if="isPositionName || props.row.positionLevel"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.positionLevel"
|
||||
:label="
|
||||
empType === 'officer' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'
|
||||
"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posLevelOptions"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
hide-selected
|
||||
clearable
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
@update:model-value="onUpdateData"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
|
||||
)"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-else
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.positionCee"
|
||||
hide-bottom-space
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm" v-if="col.name === 'amount'">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.amount"
|
||||
label="เงินเดือน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.amountSpecial"
|
||||
label="เงินค่าตอบแทนพิเศษ"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
hide-bottom-space
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm" v-else-if="col.name === 'posNo'">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.posNoAbb"
|
||||
hide-bottom-space
|
||||
:label="`${'ตัวย่อ'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.posNo"
|
||||
hide-bottom-space
|
||||
:label="
|
||||
empType === 'officer'
|
||||
? 'เลขที่ตำแหน่ง'
|
||||
: 'ตำแหน่งเลขที่'
|
||||
"
|
||||
@update:model-value="onUpdateData"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-gutter-sm"
|
||||
v-else-if="col.name === 'posNumCodeSit'"
|
||||
>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.posNumCodeSit"
|
||||
hide-bottom-space
|
||||
:label="`${'หน่วยงานที่ออกคำสั่ง'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.posNumCodeSitAbb"
|
||||
hide-bottom-space
|
||||
:label="`${'ตัวย่อหน่วยงานที่ออกคำสั่ง'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm" v-else-if="col.name === 'commandNo'">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.commandNo"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.commandYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
teleport-center
|
||||
@update:model-value="onUpdateData"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
formData.commandYear == null
|
||||
? null
|
||||
: formData.commandYear + 543
|
||||
"
|
||||
:label="`${'พ.ศ.'}`"
|
||||
clearable
|
||||
@clear="formData.commandYear = null"
|
||||
@update:model-value="onUpdateData"
|
||||
>
|
||||
<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="q-gutter-sm"
|
||||
v-else-if="col.name === 'commandCode'"
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.commandCode"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="commandCodeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
@update:model-value="onUpdateData"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
|
||||
)"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="row justify-around q-pt-sm">
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="ยกเลิก"
|
||||
@click="scope.cancel"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="บันทึก"
|
||||
@click="onSave(formData, props.row.id, scope.cancel)"
|
||||
/>
|
||||
</div>
|
||||
</q-popup-edit>
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'organization'" class="text-html">
|
||||
{{
|
||||
findOrgNameHtml({
|
||||
|
|
@ -564,13 +1189,225 @@ onMounted(() => {
|
|||
child4: props.row.orgChild4,
|
||||
})
|
||||
}}
|
||||
|
||||
<q-popup-edit
|
||||
v-if="
|
||||
tabs === 'PENDING' &&
|
||||
statusCheckEdit == 'PENDING' &&
|
||||
isConfirmEdit
|
||||
"
|
||||
v-model="props.row[col.name]"
|
||||
v-slot="scope"
|
||||
label-set="บันทึก"
|
||||
label-cancel="ยกเลิก"
|
||||
@before-show="onShow(props.row, col.name)"
|
||||
@hide="onHide"
|
||||
>
|
||||
<div class="q-mb-xs">
|
||||
{{ `แก้ไข${col.label}` }}
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.orgRoot"
|
||||
hide-bottom-space
|
||||
:label="`${'หน่วยงาน'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.orgChild1"
|
||||
hide-bottom-space
|
||||
:label="`${'ส่วนราชการระดับ 1'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.orgChild2"
|
||||
hide-bottom-space
|
||||
:label="`${'ส่วนราชการระดับ 2'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.orgChild3"
|
||||
hide-bottom-space
|
||||
:label="`${'ส่วนราชการระดับ 3'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.orgChild4"
|
||||
hide-bottom-space
|
||||
:label="`${'ส่วนราชการระดับ 4'}`"
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
</div>
|
||||
<div class="row justify-around q-pt-sm">
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="ยกเลิก"
|
||||
@click="scope.cancel"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="บันทึก"
|
||||
@click="onSave(formData, props.row.id, scope.cancel)"
|
||||
/>
|
||||
</div>
|
||||
</q-popup-edit>
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'commandCode'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
<q-popup-edit
|
||||
v-if="
|
||||
tabs === 'PENDING' &&
|
||||
statusCheckEdit == 'PENDING' &&
|
||||
isConfirmEdit
|
||||
"
|
||||
v-slot="scope"
|
||||
:persistent="
|
||||
col.name === 'commandDateAffect' ||
|
||||
col.name === 'commandDateSign'
|
||||
"
|
||||
v-model="props.row[col.name]"
|
||||
buttons
|
||||
label-set="บันทึก"
|
||||
label-cancel="ยกเลิก"
|
||||
@save="onSave"
|
||||
@before-show="onShow(props.row, col.name)"
|
||||
@hide="onHide"
|
||||
>
|
||||
<div class="q-mb-xs">
|
||||
{{ `แก้ไข${col.label}` }}
|
||||
</div>
|
||||
|
||||
<!-- แก้ไขวันที่คำสั่งมีผล -->
|
||||
<datepicker
|
||||
v-if="
|
||||
col.name === 'commandDateAffect' ||
|
||||
col.name === 'commandDateSign'
|
||||
"
|
||||
v-model="scope.value"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
autoApply
|
||||
teleport-center
|
||||
@update:model-value="onUpdateData"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
borderless
|
||||
:model-value="
|
||||
scope.value ? date2Thai(scope.value) : null
|
||||
"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
v-else-if="
|
||||
col.name === 'positionName' ||
|
||||
col.name === 'positionExecutive' ||
|
||||
col.name === 'remark'
|
||||
"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="scope.value"
|
||||
hide-bottom-space
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-else-if="
|
||||
col.name === 'mouthSalaryAmount' ||
|
||||
col.name === 'positionSalaryAmount'
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
v-model="scope.value"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="onUpdateData"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
v-else-if="col.name === 'positionType'"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="scope.value"
|
||||
:label="
|
||||
empType === 'officer' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'
|
||||
"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posTypeOptions"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
clearable
|
||||
input-debounce="0"
|
||||
@update:model-value="updateSelectType, onUpdateData()"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
|
||||
)"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-popup-edit>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue