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

433 lines
14 KiB
Vue

<template>
<v-layout class="fill-height" column>
<v-dialog v-model="dialogsuccess" persistent max-width="290">
<v-card>
<v-card-title color="success" class="headline">Berhasil !</v-card-title>
<v-card-text>
{{ msgsuccess }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="closeDialogSuccess"
>OK</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
<v-card class="mb-2 pa-2 searchbox">
<v-layout>
<v-text-field
class="xs6 ma-1"
label="NIP"
@keyup.enter="searchStaff"
outline
v-model="snik"
hide-details
></v-text-field>
<v-text-field
class="xs6 ma-1"
label="Nama"
@keyup.enter="searchStaff"
outline
v-model="name"
hide-details
></v-text-field>
<!--<v-select class="xs6 mini-select ma-1" :items="xstatuses"
item-text="label"
@change="searchStaff()"
return-object
v-model="xselectedstatus"
label="Status" outline hide-details></v-select>-->
<!--<v-btn class="xs3 ma-1" color="success" @click="searchStaff">Cari</v-btn>-->
<span
@click="setNewStaff"
class="icon-medium-fill-base xs1 white--text primary ml-1 icon-add"
></span>
</v-layout>
</v-card>
<v-card>
<v-layout row>
<v-flex xs12 pl-2 pr-2 pt-2 pb-2>
<v-data-table
:headers="headers"
:items="staffs"
:loading="isLoading"
:pagination.sync="pagination"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td
class="text-xs-left pa-2"
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
@click="selectMe(props.item)"
>
{{ props.item.M_StaffName }}
</td>
<td
class="text-xs-center pa-2"
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
@click="selectMe(props.item)"
>
{{ props.item.M_StaffNIK }}
<p style="color: #800000" class="mb-0 font-weight-bold caption">
NIK : {{ props.item.M_StaffIDNumber }}
</p>
</td>
<td
class="text-xs-center pa-2"
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
@click="selectMe(props.item)"
>
{{ props.item.M_StaffHP }}
</td>
<td
class="text-xs-center pa-2"
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
@click="selectMe(props.item)"
>
{{ props.item.M_PositionName }}
</td>
<td
class="text-xs-center pa-2"
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
@click="selectMe(props.item)"
>
{{ props.item.iskurir }}
</td>
</template>
<template>
<div class="text-xs-center">
<v-pagination
v-model="page"
:length="15"
:total-visible="7"
></v-pagination>
</div>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-card>
<one-dialog-alert
:status="openalertconfirmation"
:msg="msgalertconfirmation"
@forget-dialog-alert="forgetAlertConfirmation()"
@close-dialog-alert="closeAlertConfirmation()"
></one-dialog-alert>
</v-layout>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
min-height: 60px;
}
.searchbox .v-btn {
min-height: 60px;
}
table.v-table tbody td,
table.v-table tbody th {
height: 40px;
}
table.v-table thead tr {
height: 40px;
}
</style>
<script>
module.exports = {
components: {
"one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
"one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
},
mounted() {
this.$store.dispatch("staff/getsexreg");
this.$store.dispatch("staff/search", {
name: this.name,
snik: this.snik,
status: this.xselectedstatus.value,
lastid: -1,
});
},
methods: {
isSelected(p) {
return p.M_StaffID == this.$store.state.staff.selected_staff.M_StaffID;
},
searchStaff() {
this.$store.dispatch("staff/search", {
name: this.name,
snik: this.snik,
status: this.xselectedstatus.value,
lastid: -1,
});
},
selectMe(sta) {
this.doctorList = [];
if (this.$store.state.staff.no_save == 0) {
this.$store.commit("staff/update_selected_staff", sta);
this.$store.commit("staff/update_selected_branch", {
M_BranchID: sta.M_StaffM_BranchID,
M_BranchName: sta.M_BranchName,
});
this.$store.commit("staff/update_staff_name", sta.M_StaffName);
this.$store.commit("staff/update_dob", sta.M_StaffDOBx);
this.$store.commit("staff/update_selected_sex", {
M_SexID: sta.M_StaffM_SexID,
M_SexName: sta.M_SexName,
});
this.$store.commit("staff/update_address", sta.M_StaffAddress);
//this.$store.commit("staff/update_cities",[{M_CityID:sta.M_StaffM_CityID,M_CityName:sta.M_CityName}])
//this.$store.commit("staff/update_city_address",{M_CityID:sta.M_StaffM_CityID,M_CityName:sta.M_CityName})
//this.$store.commit("staff/update_subareas",[{M_SubareaID:sta.M_StaffM_SubareaID,M_SubareaName:sta.M_SubareaName}])
//.$store.commit("staff/update_subarea_address",{M_SubareaID:sta.M_StaffM_SubareaID,M_SubareaName:sta.M_SubareaName})
this.$store.commit("staff/update_phone", sta.M_StaffPhone);
this.$store.commit("staff/update_hp", sta.M_StaffHP);
/*this.$store.commit("staff/update_selected_religion", {
M_ReligionID: sta.M_StaffM_ReligionID,
M_ReligionName: sta.M_ReligionName
})*/
console.log('dsadas')
console.log(sta.M_StaffStartDate);
console.log(moment('2025-01-01').format('YYYY-MM-DD'));
if(moment(sta.M_StaffStartDate).format('YYYY-MM-DD') != 'Invalid Date' && sta.M_StaffStartDate != '0000-00-00'){
this.$store.commit("staff/update_startdate", moment(sta.M_StaffStartDate).format('YYYY-MM-DD'));
}else{
this.$store.commit("staff/update_startdate", '2025-01-01');
}
if(moment(sta.M_StaffEndDate).format('YYYY-MM-DD') != 'Invalid Date' && sta.M_StaffEndDate != '0000-00-00'){
this.$store.commit("staff/update_enddate", moment(sta.M_StaffEndDate).format('YYYY-MM-DD'));
}else{
this.$store.commit("staff/update_enddate", '2025-01-01');
}
// M_PositionIsDoctor
this.$store.commit("staff/update_selected_position", {
M_PositionID: sta.M_StaffM_PositionID,
M_PositionName: sta.M_PositionName,
M_PositionIsDoctor: sta.isDoctor,
});
this.$store.commit("staff/update_nik", sta.M_StaffNIK);
this.$store.commit("staff/update_idnumber", sta.M_StaffIDNumber);
this.$store.commit("staff/update_timework", sta.M_StaffTimeWork);
this.$store.commit(
"staff/update_timeworksaturday",
sta.M_StaffTimeWorkSaturday
);
this.$store.commit("staff/update_blood", sta.M_StaffBlood);
this.$store.commit("staff/update_study", sta.M_StaffStudy);
this.$store.commit("staff/update_iscourier", sta.M_StaffIsCourier);
this.$store.commit("staff/update_act", "edit");
this.isDoctor = sta.isDoctor;
if (sta.isDoctor == "Y") {
this.searchDoctor = sta.doctorName;
this.selectedDoctor = {
doctorID: sta.M_StaffM_DoctorID,
M_DoctorName: sta.doctorName,
doctorName: sta.doctorName,
};
} else {
this.searchDoctor = "";
this.selectedDoctor = {};
}
} else {
this.$store.commit("staff/update_open_alert_confirmation", true);
}
},
closeAlertConfirmation() {
this.$store.commit("staff/update_open_alert_confirmation", false);
},
forgetAlertConfirmation() {
this.$store.commit("staff/update_no_save", 0);
this.$store.commit("staff/update_open_alert_confirmation", false);
},
updateAlert_success(val) {
this.$store.commit("staff/update_alert_success", val);
},
setNewStaff() {
this.doctorList = [];
this.selectedDoctor = {};
this.searchDoctor = "";
this.$store.commit("staff/update_selected_staff", {});
this.$store.commit("staff/update_selected_branch", {});
this.$store.commit("staff/update_staff_name", "");
this.$store.commit("staff/update_dob", "");
this.$store.commit("staff/update_selected_sex", {});
this.$store.commit("staff/update_address", "");
this.$store.commit("staff/update_city_address", {});
this.$store.commit("staff/update_subarea_address", {});
this.$store.commit("staff/update_phone", "");
this.$store.commit("staff/update_hp", "");
this.$store.commit("staff/update_selected_religion", {});
this.$store.commit("staff/update_startdate", moment(new Date()).format('YYYY-MM-DD'));
this.$store.commit("staff/update_enddate", moment(new Date()).format('YYYY-MM-DD'));
this.$store.commit("staff/update_selected_position", {});
this.$store.commit("staff/update_nik", "");
this.$store.commit("staff/update_timework", "");
this.$store.commit("staff/update_timeworksaturday", "");
this.$store.commit("staff/update_blood", "");
this.$store.commit("staff/update_study", "");
this.$store.commit("staff/update_act", "new");
},
closeDialogSuccess() {
let arrstaff = this.$store.state.staff.staffs;
var idx = _.findIndex(
arrstaff,
(item) => item.M_StaffID === this.$store.state.staff.last_id
);
console.log(idx);
this.$store.dispatch("staff/search", {
name: this.name,
snik: this.snik,
status: this.xselectedstatus.value,
lastid: idx,
});
this.$store.commit("staff/update_dialog_success", false);
},
},
computed: {
doctorList: {
get() {
return this.$store.state.staff.doctorList;
},
set(val) {
this.$store.commit("staff/update_doctorList", val);
},
},
dialogsuccess: {
get() {
return this.$store.state.staff.dialog_success;
},
set(val) {
this.$store.commit("staff/update_dialog_success", val);
},
},
msgsuccess() {
return this.$store.state.staff.msg_success;
},
snackbar: {
get() {
return this.$store.state.staff.alert_success;
},
set(val) {
this.$store.commit("staff/update_alert_success", val);
},
},
isLoading() {
return this.$store.state.staff.search_status == 1;
},
xstatuses() {
return this.$store.state.staff.statuses;
},
xselectedstatus: {
get() {
return this.$store.state.staff.selected_status;
},
set(val) {
this.$store.commit("staff/update_selected_status", val);
},
},
isDoctor: {
get() {
return this.$store.state.staff.isDoctor;
},
set(val) {
this.$store.commit("staff/update_isDoctor", 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);
},
},
staffs() {
return this.$store.state.staff.staffs;
},
openalertconfirmation: {
get() {
return this.$store.state.staff.open_alert_confirmation;
},
set(val) {
this.$store.commit("staff/update_open_alert_confirmation", val);
},
},
},
data() {
return {
msgalertconfirmation:
"Perubahan yang telah dilakukan belum disimpan dong !",
items: [],
name: "",
snik: "",
page: 1,
headers: [
{
text: "NAMA",
align: "left",
sortable: false,
value: "mr",
width: "25%",
class: "pa-2 blue lighten-3 white--text",
},
{
text: "NIK",
align: "center",
sortable: false,
value: "lab",
width: "10%",
class: "pa-2 blue lighten-3 white--text",
},
{
text: "HP",
align: "center",
sortable: false,
value: "name",
width: "10%",
class: "pa-2 blue lighten-3 white--text",
},
{
text: "POSISI",
align: "left",
sortable: false,
value: "status",
width: "15%",
class: "pa-2 blue lighten-3 white--text",
},
{
text: "SEBAGAI KURIR",
align: "left",
sortable: false,
value: "status",
width: "10%",
class: "pa-2 blue lighten-3 white--text",
},
],
pagination: {
descending: false,
page: 1,
rowsPerPage: 5,
sortBy: "M_StaffName",
totalItems: this.$store.state.staff.total_staffs,
},
};
},
};
</script>