ui ออกคำสั่ง
This commit is contained in:
STW_TTTY\stwtt
parent
d04ddebcfc
commit
a8026c75f5
7 changed files with 277 additions and 54 deletions
|
|
@ -4,17 +4,24 @@ import { useQuasar, type QTableProps } from "quasar";
|
|||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
|
||||
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/18_command/interface/index/Main";
|
||||
import type { ListCommandSalaryType } from "@/modules/18_command/interface/request/Main";
|
||||
import type {
|
||||
ListCommandSalaryType,
|
||||
PersonInfo,
|
||||
} from "@/modules/18_command/interface/request/Main";
|
||||
|
||||
import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
|
||||
import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
|
||||
|
||||
const storePosSalary = usePosSalaryDataStore();
|
||||
const store = useCommandDetail();
|
||||
const {
|
||||
|
|
@ -36,23 +43,27 @@ const props = defineProps({
|
|||
|
||||
const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
|
||||
|
||||
let selectPersonData = reactive<PersonInfo>({
|
||||
id: "",
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
profileId: "",
|
||||
order: 0,
|
||||
remarkVertical: null,
|
||||
remarkHorizontal: null,
|
||||
amount: 0,
|
||||
positionSalaryAmount: 0,
|
||||
mouthSalaryAmount: 0,
|
||||
});
|
||||
const commandReciveId = ref<string>(""); //เก็บ id commandReciveId
|
||||
const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
|
||||
const templatePos = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
|
||||
const filter = ref<string>("");
|
||||
const rows = ref<any[]>([
|
||||
{
|
||||
idCard: "6796519798790",
|
||||
fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
|
||||
salaryAmount: 0,
|
||||
},
|
||||
{
|
||||
idCard: "7707218775803",
|
||||
fullName: "นายศรัณย์ ศิลาดี",
|
||||
salaryAmount: 1,
|
||||
},
|
||||
]);
|
||||
const rows = ref<PersonInfo[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -64,10 +75,10 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "idCard",
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "idCard",
|
||||
field: "citizenId",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -80,9 +91,12 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
|
||||
},
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<String[]>(["no", "idCard", "fullName"]);
|
||||
const visibleColumns = ref<String[]>(["no", "citizenId", "fullName"]);
|
||||
|
||||
const modalSalary = ref<boolean>(false);
|
||||
const titleName = ref<string>("");
|
||||
|
|
@ -94,18 +108,55 @@ const modalPerson = ref<boolean>(false);
|
|||
* @param val
|
||||
*/
|
||||
function updatePos(val: string) {
|
||||
position.value = val;
|
||||
const data = ListCommandSalary.value.find(
|
||||
(item: ListCommandSalaryType) => item.id === val
|
||||
);
|
||||
if (data) {
|
||||
position.value = data.name; // เก็บแค่ค่า name
|
||||
} else {
|
||||
position.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function onSawpPos(val: any, type: string) {}
|
||||
async function onSawpPos(val: any, type: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandSwap("tab2", type, val.id))
|
||||
.then((res) => {
|
||||
success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {});
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandAction(id, "tab2"))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function selectModal(data: any) {
|
||||
titleName.value = data.fullName;
|
||||
function selectModal(data: PersonInfo) {
|
||||
selectPersonData = data
|
||||
titleName.value = `${data.prefix ?? ""}${data.firstName ?? ""} ${
|
||||
data.lastName ?? ""
|
||||
}`;
|
||||
modalSalary.value = true;
|
||||
commandReciveId.value = data.id;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -129,12 +180,34 @@ function filterSelector(val: string, update: Function, filtername: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function getCommandSalaryList(type: string) {
|
||||
/** บันทึกข้แมูล ตำแหน่ง */
|
||||
function savePosition() {
|
||||
dialogConfirm($q, () => {
|
||||
const body = {
|
||||
commandSalaryId: templatePos.value,
|
||||
positionDetail: position.value,
|
||||
};
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.commandAction(commandId.value, "tab2"), body)
|
||||
.then(async (res) => {
|
||||
await getPersonList();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function getCommandSalaryList(type: string) {
|
||||
showLoader();
|
||||
http
|
||||
await http
|
||||
.get(config.API.commandSalaryList(type))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
ListCommandSalary.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -147,9 +220,29 @@ function getCommandSalaryList(type: string) {
|
|||
|
||||
function onSubmit() {}
|
||||
|
||||
onMounted(() => {
|
||||
/** ดึงข้อมูล บุคคล */
|
||||
async function getPersonList() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandAction(commandId.value, "tab2"))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
templatePos.value = data.commandSalaryId;
|
||||
position.value = data.positionDetail;
|
||||
rows.value = data.commandRecives;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (props.commandSysId) {
|
||||
getCommandSalaryList(props.commandSysId);
|
||||
await getCommandSalaryList(props.commandSysId);
|
||||
await getPersonList();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -180,10 +273,11 @@ defineExpose({
|
|||
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
||||
option-label="name"
|
||||
:options="ListCommandSalary"
|
||||
option-value="name"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
use-input
|
||||
emit-value
|
||||
map-options
|
||||
input-debounce="0"
|
||||
@update:modelValue="updatePos"
|
||||
@filter="(inputValue: any,
|
||||
|
|
@ -209,7 +303,7 @@ defineExpose({
|
|||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" v-if="!store.readonly">
|
||||
<q-btn label="บันทึก" color="public" />
|
||||
<q-btn label="บันทึก" color="public" @click="savePosition" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -292,7 +386,7 @@ defineExpose({
|
|||
round
|
||||
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
|
||||
:disable="props.rowIndex + 1 == 1"
|
||||
@click="onSawpPos(props, 'up')"
|
||||
@click="onSawpPos(props.row, 'up')"
|
||||
icon="mdi-arrow-up-bold"
|
||||
>
|
||||
<q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
|
||||
|
|
@ -308,7 +402,7 @@ defineExpose({
|
|||
rows.length == props.rowIndex + 1 ? 'grey' : 'red'
|
||||
"
|
||||
:disable="rows.length == props.rowIndex + 1"
|
||||
@click="onSawpPos(props, 'down')"
|
||||
@click="onSawpPos(props.row, 'down')"
|
||||
icon="mdi-arrow-down-bold"
|
||||
>
|
||||
<q-tooltip>เลื่อนลำดับลง</q-tooltip>
|
||||
|
|
@ -336,7 +430,7 @@ defineExpose({
|
|||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="onDelete(props.row.personalId)"
|
||||
@click="onDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
|
|
@ -360,5 +454,11 @@ defineExpose({
|
|||
</div>
|
||||
|
||||
<DialogAddPerson v-model:modal="modalPerson" />
|
||||
<DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
|
||||
<DialogSalary
|
||||
v-model:modal="modalSalary"
|
||||
:title-name="titleName"
|
||||
:command-edit-recive="commandReciveId"
|
||||
:get-data="getPersonList"
|
||||
:select-person-data="selectPersonData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
import { reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import CurruncyInput from "@/components/CurruncyInput.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm } = useCounterMixin();
|
||||
const { dialogConfirm, messageError, success } = useCounterMixin();
|
||||
|
||||
const props = defineProps({
|
||||
getData: Function,
|
||||
selectPersonData: Object,
|
||||
});
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const titleName = defineModel<string>("titleName", { required: true });
|
||||
const commandEditRecive = defineModel<string>("commandEditRecive", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const formData = reactive({
|
||||
salaryAmount: 0,
|
||||
|
|
@ -23,7 +32,23 @@ const formData = reactive({
|
|||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
onClose();
|
||||
http
|
||||
.put(config.API.commandEditRecive("tab2", commandEditRecive.value), {
|
||||
mouthSalaryAmount: formData.salaryAmount, //เงินเดือน
|
||||
positionSalaryAmount: formData.positionSalaryAmount, //เงินประจำตำแหน่ง
|
||||
amount: formData.monthSalaryAmount, //เงินค่าตอบแทนรายเดือน
|
||||
remarkHorizontal: formData.remarkVertical, //หมายเหตุแนวตั้ง
|
||||
remarkVertical: formData.remarkHorizontal, //หมายเหตุแนวนอน
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
onClose();
|
||||
props.getData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -35,6 +60,22 @@ function onClose() {
|
|||
formData.remarkVertical = null;
|
||||
formData.remarkHorizontal = null;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
if (props.selectPersonData) {
|
||||
const list = props.selectPersonData;
|
||||
formData.salaryAmount = list.mouthSalaryAmount;
|
||||
formData.positionSalaryAmount = list.positionSalaryAmount;
|
||||
formData.monthSalaryAmount = list.amount;
|
||||
formData.remarkVertical = list.remarkVertical;
|
||||
formData.remarkHorizontal = list.remarkHorizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue