Files
FE_CPONE/test/vuex/one-md-staff/components/oneMdStaffDetail.vue
2026-04-27 10:13:31 +07:00

933 lines
30 KiB
Vue

<template>
<div>
<v-layout class="mb-2" column>
<v-dialog v-model="dialogconfirmationdelete" persistent max-width="290">
<v-card>
<v-card-title
dark
class="headline error pt-2 pb-2"
primary-title
style="color: white"
>
<h4 dark>Konfirmasi</h4>
</v-card-title>
<v-card-text>
{{ msgconfirmationdelete }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
small
color="error darken-1 text-sm-left"
flat
@click="doDeleteData()"
>Hapus</v-btn
>
<v-btn
small
color="primary darken-1 text-sm-right"
flat
@click="dialogconfirmationdelete = false"
>Batal</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
<v-card>
<v-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1>
DETAIL KARYAWAN
<v-flex text-md-right>
<v-btn
v-if="xact === 'new'"
@click="saveNewStaff()"
small
color="info"
>Simpan</v-btn
>
<v-btn
v-if="xact === 'edit'"
@click="deleteData()"
small
color="error"
>Hapus</v-btn
>
<v-btn
v-if="xact === 'edit'"
@click="saveData()"
small
color="primary"
>Simpan</v-btn
>
</v-flex>
</v-subheader>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12 pa-2>
<v-layout row>
<v-flex xs6 pa-1>
<v-select
item-text="M_BranchName"
return-object
:items="xbranchs"
v-model="xbranch"
label="Cabang*"
></v-select>
</v-flex>
<v-flex xs6 pa-1>
<v-text-field
v-model="xstaffname"
label="Nama Karyawan*"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-1>
<v-text-field v-model="xnik" label="NIP"></v-text-field>
</v-flex>
<v-flex xs6 pa-1>
<v-text-field
v-model="xidnumber"
label="NIK (KTP)"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4 pa-1>
<v-text-field
v-model="xdob"
label="Tanggal Lahir*"
hint="format : DD-MM-YYYY , contoh : 22-06-1988"
></v-text-field>
</v-flex>
<v-flex xs4 pa-1>
<v-select
item-text="M_SexName"
return-object
:items="xsexes"
v-model="xsex"
label="Jenis Kelamin*"
></v-select>
</v-flex>
<v-flex xs4 pa-1>
<v-text-field v-model="xhp" label="HP"></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-1>
<v-text-field
v-model="xaddress"
label="Alamat"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4 pa-1>
<v-select
item-text="M_PositionName"
return-object
:items="xpositions"
v-model="xposition"
label="Posisi"
></v-select>
</v-flex>
<v-flex xs2 pa-1>
<span
@click="addPosition"
class="icon-medium-fill-base xs1 white--text primary ml-1 icon-add"
></span>
</v-flex>
<v-flex xs3 pa-1>
<v-text-field
v-model="xstudy"
label="Pendidikan Terakhir"
></v-text-field>
</v-flex>
<v-flex xs3 pa-1>
<v-text-field
v-model="xblood"
label="Golongan Darah"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-1>
<v-menu
ref="menustartdate"
v-model="menustartdate"
:close-on-content-click="false"
:nudge-right="0"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="startComputedDateFormatted"
label="Tgl. Mulai Bekerja"
readonly
v-on="on"
@blur="
date = deFormatedDate(startComputedDateFormatted)
"
></v-text-field>
</template>
<v-date-picker
v-model="xstartdate"
no-title
@input="menustartdate = false"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs6 pa-1>
<v-menu
ref="menuenddate"
v-model="menuenddate"
:close-on-content-click="false"
:nudge-right="0"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="endComputedDateFormatted"
label="Tgl. Selesai"
readonly
v-on="on"
@blur="
date = deFormatedDate(endComputedDateFormatted)
"
></v-text-field>
</template>
<v-date-picker
v-model="xenddate"
no-title
@input="menuenddate = false"
></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-1>
<v-text-field
v-model="xtimework"
label="Jam Kerja"
></v-text-field>
</v-flex>
<v-flex xs6 pa-1>
<v-text-field
v-model="xtimeworksaturday"
label="Jam Kerja (Sabtu)"
></v-text-field>
</v-flex>
</v-layout>
<v-layout v-if="xposition.M_PositionIsDoctor == 'Y'" row>
<v-flex xs12 pa-1>
<v-autocomplete
v-model="selectedDoctor"
:items="doctorList"
:search-input.sync="searchDoctor"
item-text="doctorName"
flat
hide-no-data
hide-details
return-object
label="Dokter"
></v-autocomplete>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-1>
<div>
<v-btn
@click="changeBtnFlagCourier(xiscourier)"
v-if="xiscourier === 'N'"
small
color="error"
>
<v-icon left>close</v-icon> Kurir</v-btn
>
<v-btn
@click="changeBtnFlagCourier(xiscourier)"
v-if="xiscourier === 'Y'"
small
color="success"
>
<v-icon left>check</v-icon> Kurir</v-btn
>
</div>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card>
</v-layout>
<template>
<v-dialog v-model="dialogerrormsg" max-width="30%">
<v-card>
<v-card-title class="headline red en-1 pt-2 pb-2" primary-title>
<h4 style="color: #ffebee">Peringatan !</h4>
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 v-html="errormsg" xs12> </v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error" flat @click="dialogerrormsg = false">
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogposition" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline">Posisi</span>
</v-card-title>
<v-card-text class="pt-0 pb-0">
<v-form ref="formposition" v-model="valid" lazy-validation>
<v-layout wrap>
<v-flex xs12>
<v-layout>
<v-flex xs6 pa-1>
<v-text-field
v-model="positionname"
label="Nama"
></v-text-field>
</v-flex>
<v-flex xs6 pa-1>
<span
@click="saveFormPosition()"
class="icon-medium-fill-base xs1 white--text primary ml-1 icon-save"
></span>
</v-flex>
</v-layout>
</v-flex>
<v-layout row wrap>
<v-flex xs12 pt-2 pb-1>
<table
style="
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 0px;
"
class="px"
>
<tr>
<td
style="
border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
"
width="40%"
class="pa-2 blue lighten-1 white--text"
>
POSISI
</td>
<td
style="
border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
"
width="20%"
class="pa-2 blue lighten-1 white--text"
>
AKSI
</td>
</tr>
<tr class="mini-input" v-for="(vpx, idx) in xpositions">
<td
style="
border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;
text-align: left;
vertical-align: left;
"
align="left"
>
<v-text-field
style="margin-top: 0; padidng-top: 0"
v-model="vpx.M_PositionName"
hide-details
></v-text-field>
</td>
<td
style="
border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;
"
class="text-md-center pr-2"
>
<v-icon color="blue" @click="updateFormPosition(vpx)"
>edit</v-icon
>
<v-icon
color="#c75c3a"
:disabled="vpx.used != 0"
@click="deleteFormPosition(vpx)"
>delete</v-icon
>
</td>
</tr>
<tfoot></tfoot>
</table>
</v-flex>
</v-layout>
</v-layout>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
flat
@click="updateDialogFormPosition()"
>Tutup</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</div>
</template>
<style scoped>
table,
td,
th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 5px;
}
.mini-input .v-input {
margin-top: 0px;
}
.mini-input .v-input,
.mini-input .v-input--selection-controls,
.mini-input .v-input__slot {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
.mini-input .v-messages {
min-height: 0px;
}
input.fhm-input {
border: 1px solid black;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1);
padding: 2px 4px;
background: rgba(255, 255, 255, 0.5);
margin: 0 0 1px 0;
width: 30px;
text-align: center;
}
</style>
<script>
module.exports = {
data: () => ({
dialogerrormsg: false,
valid: false,
errormsg: "",
search_city: "",
startdate: "",
enddate: "",
menustartdate: false,
menuenddate: false,
positionname: "",
date: new Date().toISOString().substr(0, 10),
}),
computed: {
dialogconfirmationdelete: {
get() {
return this.$store.state.staff.dialog_confirmation_delete;
},
set(val) {
this.$store.commit("staff/update_dialog_confirmation_delete", val);
},
},
msgconfirmationdelete() {
return this.$store.state.staff.msg_confirmation_delete;
},
xact() {
return this.$store.state.staff.act;
},
detail() {
return this.$store.state.staff.selected_staff;
},
xbranchs() {
return this.$store.state.staff.branchs;
},
xbranch: {
get() {
return this.$store.state.staff.selected_branch;
},
set(val) {
this.$store.commit("staff/update_selected_branch", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xstaffname: {
get() {
return this.$store.state.staff.staff_name;
},
set(val) {
this.$store.commit("staff/update_staff_name", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xnik: {
get() {
return this.$store.state.staff.nik;
},
set(val) {
this.$store.commit("staff/update_nik", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xidnumber: {
get() {
return this.$store.state.staff.idnumber;
},
set(val) {
this.$store.commit("staff/update_idnumber", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xdob: {
get() {
return this.$store.state.staff.dob;
},
set(val) {
this.$store.commit("staff/update_dob", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xsexes() {
return this.$store.state.staff.sexes;
},
xsex: {
get() {
return this.$store.state.staff.selected_sex;
},
set(val) {
this.$store.commit("staff/update_selected_sex", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xreligions() {
return this.$store.state.staff.religions;
},
xreligion: {
get() {
return this.$store.state.staff.selected_religion;
},
set(val) {
this.$store.commit("staff/update_selected_religion", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xphone: {
get() {
return this.$store.state.staff.phone;
},
set(val) {
this.$store.commit("staff/update_phone", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xhp: {
get() {
return this.$store.state.staff.hp;
},
set(val) {
this.$store.commit("staff/update_hp", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xaddress: {
get() {
return this.$store.state.staff.address;
},
set(val) {
this.$store.commit("staff/update_address", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xcities() {
return this.$store.state.staff.cities;
},
cityaddress: {
get() {
return this.$store.state.staff.city_address;
},
set(val) {
this.$store.commit("staff/update_city_address", val);
this.$store.dispatch(
"staff/getsubarea",
this.$store.state.staff.city_address
);
},
},
xsubareas() {
return this.$store.state.staff.subareas;
},
subareaaddress: {
get() {
return this.$store.state.staff.subarea_address;
},
set(val) {
this.$store.commit("staff/update_subarea_address", val);
},
},
xpositions() {
return this.$store.state.staff.positions;
},
xposition: {
get() {
return this.$store.state.staff.selected_position;
},
set(val) {
this.$store.commit("staff/update_selected_position", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xtimework: {
get() {
return this.$store.state.staff.timework;
},
set(val) {
this.$store.commit("staff/update_timework", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xtimeworksaturday: {
get() {
return this.$store.state.staff.timeworksaturday;
},
set(val) {
this.$store.commit("staff/update_timeworksaturday", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xblood: {
get() {
return this.$store.state.staff.blood;
},
set(val) {
this.$store.commit("staff/update_blood", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xstudy: {
get() {
return this.$store.state.staff.study;
},
set(val) {
this.$store.commit("staff/update_study", val);
this.$store.commit("staff/update_no_save", 1);
},
},
xiscourier: {
get() {
return this.$store.state.staff.iscourier;
},
set(val) {
this.$store.commit("staff/update_iscourier", val);
this.$store.commit("staff/update_no_save", 1);
},
},
startComputedDateFormatted() {
return this.formatDate(this.xstartdate);
},
xstartdate: {
get() {
return this.$store.state.staff.startdate;
},
set(val) {
this.$store.commit("staff/update_startdate", val);
},
},
endComputedDateFormatted() {
return this.formatDate(this.xenddate);
},
xenddate: {
get() {
return this.$store.state.staff.enddate;
},
set(val) {
this.$store.commit("staff/update_enddate", val);
},
},
doctorList: {
get() {
return this.$store.state.staff.doctorList;
},
set(val) {
this.$store.commit("staff/update_doctorList", val);
},
},
selectedDoctor: {
get() {
return this.$store.state.staff.selectedDoctor;
},
set(val) {
this.$store.commit("staff/update_selectedDoctor", val);
},
},
searchDoctor: {
get() {
return this.$store.state.staff.searchDoctor;
},
set(val) {
this.$store.commit("staff/update_searchDoctor", val);
},
},
isDoctor: {
get() {
return this.$store.state.staff.isDoctor;
},
set(val) {
this.$store.commit("staff/update_isDoctor", val);
},
},
dialogposition() {
return this.$store.state.staff.dialog_form_position;
},
},
methods: {
changeBtnFlagCourier(value) {
var newval = value === "Y" ? "N" : "Y";
this.xiscourier = newval;
},
changeBtnFlagDefaultCourier(value) {
var newval = value === "Y" ? "N" : "Y";
this.xdiscourier = newval;
},
updateDialogFormPosition() {
this.$store.commit("staff/update_dialog_form_position", false);
},
addPosition() {
this.$store.commit("staff/update_dialog_form_position", true);
},
saveFormPosition() {
this.$store.dispatch("staff/saveposition", {
name: this.positionname,
});
this.positionname = "";
},
updateFormPosition(val) {
this.$store.dispatch("staff/updateposition", {
id: val.M_PositionID,
name: val.M_PositionName,
});
},
deleteFormPosition(val) {
this.$store.dispatch("staff/deleteposition", {
id: val.M_PositionID,
});
},
saveData() {
var prm = {};
prm.M_StaffID = this.$store.state.staff.selected_staff.M_StaffID;
prm.M_StaffM_BranchID =
this.$store.state.staff.selected_branch.M_BranchID;
prm.M_StaffName = this.xstaffname;
prm.M_StaffDOB = this.xdob;
prm.M_StaffM_SexID = this.$store.state.staff.selected_sex.M_SexID;
prm.M_StaffM_ReligionID =
this.$store.state.staff.selected_religion.M_ReligionID;
prm.M_StaffHP = this.xhp;
prm.M_StaffPhone = this.xphone;
prm.M_StaffAddress = this.xaddress;
prm.M_StaffNIK = this.xnik;
prm.M_StaffIDNumber = this.xidnumber;
prm.M_StaffM_CityID = this.cityaddress.M_CityID;
prm.M_StaffM_SubareaID = this.subareaaddress.M_SubareaID;
prm.M_StaffM_PositionID =
this.$store.state.staff.selected_position.M_PositionID;
prm.M_StaffStartDate = this.xstartdate;
prm.M_StaffEndDate = this.xenddate;
prm.M_StaffTimeWork = this.xtimework;
prm.M_StaffTimeWorkSaturday = this.xtimeworksaturday;
prm.M_StaffBlood = this.xblood;
prm.M_StaffStudy = this.xstudy;
prm.M_StaffIsCourier = this.xiscourier;
prm.M_StaffM_DoctorID = this.selectedDoctor.doctorID ?? "0";
this.$store.dispatch("staff/save", prm);
},
saveNewStaff() {
var error_count = 0;
var error_msg = "";
if (_.isEmpty(this.xbranch)) {
error_count++;
error_msg +=
"<p><kbd class='text-uppercase'>Cabang</kbd> : Ayo, pilih salah satu cabang</p>";
}
if (this.xstaffname === "") {
error_count++;
error_msg +=
"<p><kbd class='text-uppercase'>Nama Karyawan</kbd> : Diisi dong nama karyawannya</p>";
}
if (_.isEmpty(this.xsex)) {
error_count++;
error_msg +=
"<p><kbd class='text-uppercase'>Jenis Kelamin</kbd> : Ayo, pilih salah satu jenis kelamin</p>";
}
if (this.xdob === "") {
error_count++;
error_msg +=
"<p><kbd class='text-uppercase'>Tanggal Lahir</kbd> : Diisi dong tanggal lahirnya</p>";
}
var aDOB = moment(this.xdob, "DD-MM-YYYY", true);
var isValidDOB = aDOB.isValid();
if (!isValidDOB) {
error_count++;
error_msg +=
"<p><kbd class='text-uppercase'>Tanggal Lahir</kbd> : Diisi sesuai format dong (DD-MM-YYYY, contoh : 22-06-1988)</p>";
}
if (error_count > 0) {
this.errormsg = error_msg;
this.dialogerrormsg = true;
} else {
var prm = {};
prm.M_StaffID = 0;
prm.M_StaffM_BranchID =
this.$store.state.staff.selected_branch.M_BranchID;
prm.M_StaffName = this.xstaffname;
prm.M_StaffDOB = this.xdob;
prm.M_StaffM_SexID = this.$store.state.staff.selected_sex.M_SexID;
prm.M_StaffM_ReligionID =
this.$store.state.staff.selected_religion.M_ReligionID;
prm.M_StaffHP = this.xhp;
prm.M_StaffPhone = this.xphone;
prm.M_StaffAddress = this.xaddress;
prm.M_StaffNIK = this.xnik;
prm.M_StaffIDNumber = this.xidnumber;
prm.M_StaffM_CityID = this.cityaddress.M_CityID;
prm.M_StaffM_SubareaID = this.subareaaddress.M_SubareaID;
prm.M_StaffM_PositionID =
this.$store.state.staff.selected_position.M_PositionID;
prm.M_StaffStartDate = this.xstartdate;
prm.M_StaffEndDate = this.xenddate;
prm.M_StaffTimeWork = this.xtimework;
prm.M_StaffTimeWorkSaturday = this.xtimeworksaturday;
prm.M_StaffBlood = this.xblood;
prm.M_StaffStudy = this.xstudy;
prm.M_StaffIsCourier = this.xiscourier;
prm.M_StaffM_DoctorID = this.selectedDoctor.doctorID ?? "0";
this.$store.dispatch("staff/newstaff", prm);
}
},
thr_search_city: _.debounce(function () {
this.$store.dispatch("staff/searchcity", this.search_city);
}, 2000),
thr_search_doctor: _.debounce(function () {
this.$store.dispatch("staff/getdoctor");
}, 500),
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split("-");
return `${day}-${month}-${year}`;
},
deFormatedDate(date) {
if (!date) return null;
const [day, month, year] = date.split("-");
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
},
deleteData() {
let msg = "Yakin, akan menghapus data pasien " + this.xstaffname + " ?";
this.$store.commit("staff/update_msg_confirmation_delete", msg);
this.$store.commit("staff/update_dialog_confirmation_delete", true);
},
doDeleteData() {
var prm = {};
prm.M_StaffID = this.$store.state.staff.selected_staff.M_StaffID;
prm.M_StaffName = this.xstaffname;
this.$store.dispatch("staff/delete", prm);
},
},
watch: {
search_city(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
if (this.$store.state.staff.update_autocomplete_status == 1) return;
this.thr_search_city();
},
searchDoctor(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
if (this.$store.state.staff.update_autocomplete_status == 1) return;
this.thr_search_doctor();
},
},
};
</script>