Files
REG_IBL/one-ui/masterdata/one-fisik-template/components/oneFisikTemplateMappingList.vue
2026-05-25 20:01:37 +07:00

783 lines
21 KiB
Vue

<template>
<v-layout>
<template>
<v-dialog v-model="dialogdeletealert" max-width="30%">
<v-card>
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
Peringatan !
</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 xs12>
{{ msgalert }}
</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="primary" flat @click="dialogdeletealert = false">
Tutup
</v-btn>
<v-btn color="primary" flat @click="closeDeleteAlert()">
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- ERROR DIALOG -->
<v-dialog v-model="dialog_error" max-width="500px">
<v-card>
<v-card-title>
<span>ERROR !</span>
<v-spacer></v-spacer>
</v-card-title>
<v-divider></v-divider>
<div class="ma-3 red--text">{{ msgError }}</div>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialog_error = false"
>Close</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
<!-- END ERROR DIALOG -->
<v-dialog v-model="dialog_fisik" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline"
>FORM FISIK TEMPLATE MAPPING</span
></v-card-title
>
<v-divider></v-divider>
<v-progress-linear
v-if="loading_save"
:indeterminate="true"
></v-progress-linear>
<v-card-text class="pt-0 pb-0">
<v-layout wrap>
<v-flex xs12>
<v-text-field
v-model="xname"
label="Nama*"
:error="nama_error_message !== ''"
:error-messages="nama_error_message"
@blur="namaValidation"
required
></v-text-field>
</v-flex>
<!--<v-flex xs12>
<v-autocomplete
label="Nat Test"
v-model="selected_nat_test"
:items="nat_tests"
style="font-size:12px;"
:search-input.sync="search_nat_test"
auto-select-first
no-filter
hide-details
return-object
:clearable="true"
item-text="Nat_TestName"
item-value="Nat_TestID"
no-data-text="Pilih Nat Test"
>
</v-autocomplete>
</v-flex>-->
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog_fisik = false"
:disabled="loading_save"
>Tutup</v-btn
>
<v-btn
v-if="xact === 'new'"
color="blue darken-1"
flat
:disabled="loading_save"
@click="saveAdd()"
>Simpan</v-btn
>
<v-btn
v-if="xact === 'edit'"
color="blue darken-1"
flat
:disabled="loading_save"
@click="updateFormUser()"
>Simpan Perubahan</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<v-flex xs12>
<v-card>
<v-toolbar color="blue lighten-3" dark height="50px">
<v-toolbar-title>FISIK TEMPLATE MAPPING</v-toolbar-title>
<v-spacer></v-spacer>
<div>
<v-btn icon @click="openAddForm()"
><v-icon>library_add</v-icon></v-btn
>
</div>
</v-toolbar>
<v-snackbar
v-model="snackbar"
:timeout="5000"
:multi-line="false"
:vertical="false"
:top="true"
>
{{ msgsnackbar }}
<v-btn flat @click="snackbar = false"> Tutup </v-btn>
</v-snackbar>
<v-layout row style="background: white; padding-top: 5px" justify-left>
<v-text-field
class="xs4 ma-1"
label="Nama"
placeholder="Cari..."
outline
v-model="fisikname"
@keyup.enter="searchFisik"
></v-text-field>
</v-layout>
<v-divider></v-divider>
<div>
<v-layout
row
class="scroll-container"
style="max-height: 600px; overflow: auto"
>
<v-flex xs12 pl-2 pr-2 pt-2 pb-2>
<v-data-table
:headers="headers"
:items="vfisiks"
:loading="isLoading"
hide-actions
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.FisikTemplateMappingName }}
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-pagination
style="margin-top: 10px; margin-bottom: 10px"
v-model="curr_page"
:length="xtotal_page"
></v-pagination>
</div>
</v-card>
</v-flex>
</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;
}
.textinput {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
width: 100%;
padding: 8px 10px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #607d8b;
}
.textinput:focus {
width: 100%;
}
.textinput:focus::-webkit-input-placeholder {
color: transparent;
}
.textinput:focus::-moz-placeholder {
color: transparent;
}
.textinput:-moz-placeholder {
color: transparent;
}
.boxoutline {
color: red;
border: 1px solid red;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 1px;
}
.boxoutline:hover {
background: rgba(0, 0, 0, 0.07) !important;
font-size: 15px;
font-weight: 700;
}
.boxsolid {
color: #ffffff;
border: 1px solid #ffffff;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #f44336;
font-size: 14px;
font-weight: 500;
border-radius: 1px;
}
.boxsolid:hover {
background: #f44336de;
font-size: 15px;
font-weight: 700;
}
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
width: 7px;
}
/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: #73baf3;
}
/* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #2196f3;
}
/* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #0079da;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
<script>
module.exports = {
data() {
return {
search_nat_test: "",
clr: "success",
msgalertconfirmation:
"Perubahan yang telah dilakukan belum disimpan dong !",
dialogdeletealert: false,
msgalert: "",
valid: false,
xid: 0,
search_instrument: "",
items: [],
xname: "",
nama_error_message: "",
xcode: "",
xnameRules: [(v) => !!v || "Nama harus diisi"],
instrumentRules: [(v) => !!v || "Instrument harus dipilih"],
name: "",
isdefault: false,
ispertest: "N",
isnonlab: "N",
scode: "",
search_doctor: "",
search_testheader: "",
search_template: "",
fisikname: "",
methodename: "",
page: 1,
headers: [
{
text: "NAMA",
align: "left",
sortable: false,
value: "mr",
width: "15%",
class: "pa-2 blue lighten-3 white--text",
},
],
pagination: {
descending: true,
page: 1,
rowsPerPage: 100,
sortBy: "id DESC",
totalItems: this.$store.state.fisik.total_filter_fisiks,
},
};
},
mounted() {
this.$store.dispatch("fisik/fisikTemplateMappingList", {
fisikname: this.fisikname,
current_page: 1,
lastid: -1,
});
},
computed: {
selected_nat_test: {
get() {
return this.$store.state.fisik.selected_nat_test;
},
set(val) {
this.$store.commit("fisik/update_selected_nat_test", val);
},
},
nat_tests: {
get() {
return this.$store.state.fisik.nat_tests;
},
set(val) {
this.$store.commit("fisik/update_nat_tests", val);
},
},
selected_filter_sex: {
get() {
return this.$store.state.user.selected_filter_sex;
},
set(val) {
this.$store.commit("user/update_selected_filter_sex", val);
this.searchFisik();
},
},
f_sexs: {
get() {
return this.$store.state.user.f_sexs;
},
set(val) {
this.$store.commit("user/update_f_sexs", val);
},
},
selected_filter_flag: {
get() {
return this.$store.state.user.selected_filter_flag;
},
set(val) {
this.$store.commit("user/update_selected_filter_flag", val);
this.searchFisik();
},
},
f_flags: {
get() {
return this.$store.state.user.f_flags;
},
set(val) {
this.$store.commit("user/update_f_flags", val);
},
},
xact: {
get() {
return this.$store.state.fisik.act;
},
set(val) {
this.$store.commit("fisik/update_act", val);
},
},
xerrors() {
return this.$store.state.user.errors;
},
xshowall() {
return this.$store.state.user.show_all;
},
vfisiks() {
return this.$store.state.fisik.fisiks;
},
xtotalusers() {
return this.$store.state.user.total_users;
},
// xtotalfilterusers() {
// return this.$store.state.user.total_filter_users
// },
xsearch: {
get() {
return this.$store.state.fisik.x_search;
},
set(val) {
this.$store.commit("fisik/update_x_search", val);
},
},
curr_page: {
get() {
return this.$store.state.fisik.current_page;
},
set(val) {
this.$store.commit("fisik/update_current_page", val);
this.$store.dispatch("fisik/fisikTemplateMappingList", {
fisikname: this.fisikname,
// methodename: this.methodename,
// sexid: this.selected_filter_sex.Nat_SexID,
// flagid: this.selected_filter_flag.Nat_FlagID,
current_page: val,
lastid: -1,
});
},
},
xtotal_page: {
get() {
return this.$store.state.fisik.total_fisiks;
},
set(val) {
this.$store.commit("fisik/update_total_fisiks", val);
},
},
dialog_fisik: {
get() {
return this.$store.state.fisik.dialog_fisik;
},
set(val) {
this.$store.commit("fisik/update_dialog_fisik", val);
},
},
lookupstatus() {
return this.$store.state.user.lookup_user;
},
xusertypes() {
return this.$store.state.user.usertypes;
},
xusertype: {
get() {
return this.$store.state.user.usertype;
},
set(val) {
this.$store.commit("user/update_usertype", val);
},
},
isLoading() {
return this.$store.state.fisik.lookup_fisik == 1;
},
xnonlabs() {
return this.$store.state.user.nonlabs;
},
xnonlab: {
get() {
return this.$store.state.user.selected_nonlab;
},
set(val) {
this.$store.commit("user/update_selected_nonlab", val);
},
},
xcities() {
return this.$store.state.user.cities;
},
detailaddress: {
get() {
return this.$store.state.user.detail_address;
},
set(val) {
this.$store.commit("user/update_detail_address", val);
this.$store.dispatch(
"user/getdistrict",
this.$store.state.user.detail_address
);
},
},
xdoctors() {
return this.$store.state.user.doctors;
},
doctor: {
get() {
return this.$store.state.user.doctor;
},
set(val) {
this.$store.commit("user/update_doctor", val);
},
},
xinstruments() {
return this.$store.state.user.instruments;
},
xinstrument: {
get() {
return this.$store.state.user.instrument;
},
set(val) {
this.$store.commit("user/update_instrument", val);
},
},
xautotemplates() {
return this.$store.state.user.autotemplates;
},
xautotemplate: {
get() {
return this.$store.state.user.autotemplate;
},
set(val) {
this.$store.commit("user/update_autotemplate", val);
},
},
xdistricts() {
return this.$store.state.user.districts;
},
districtaddress: {
get() {
return this.$store.state.user.district_address;
},
set(val) {
this.$store.commit("user/update_district_address", val);
this.$store.dispatch(
"user/getkelurahan",
this.$store.state.user.district_address
);
},
},
xkelurahans() {
return this.$store.state.user.kelurahans;
},
kelurahanaddress: {
get() {
return this.$store.state.user.kelurahan_address;
},
set(val) {
this.$store.commit("user/update_kelurahan_address", val);
},
},
loading_save: {
get() {
return this.$store.state.fisik.loading_save;
},
set(val) {
this.$store.commit("fisik/update_loading_save", val);
},
},
snackbar: {
get() {
return this.$store.state.fisik.alert_success;
},
set(val) {
this.$store.commit("fisik/update_alert_success", val);
},
},
msgsnackbar() {
return this.$store.state.fisik.msg_success;
},
dialog_error: {
get() {
return this.$store.state.fisik.alert_error;
},
set(val) {
this.$store.commit("fisik/update_alert_error", val);
},
},
msgError() {
return this.$store.state.fisik.error_message;
},
},
methods: {
searchFisik() {
this.$store.dispatch("fisik/fisikTemplateMappingList", {
fisikname: this.fisikname,
current_page: 1,
lastid: -1,
});
},
isSelected(p) {
return p.id == this.$store.state.fisik.selected_fisik.id;
},
subname(name) {
var xname = name;
if (xname.length > 18) {
xname = xname.substring(0, 18) + "...";
}
return xname;
},
selectMe(sc) {
this.$store.commit("fisik/update_selected_fisik", sc);
this.$store.dispatch("fisikdetail/findFisikTemplate", {
id: this.$store.state.fisik.selected_fisik.id,
name: this.$store.state.fisikdetail.xname,
status: this.$store.state.fisikdetail.selected_filter_flag.value,
current_page: 1,
lastid: -1,
});
this.$store.commit("fisikdetail/update_current_page", 1);
this.$store.commit("fisikdetail/update_selected_filter_status", {'value': 'Y', 'text': 'Sudah dipilih'});
this.$store.dispatch("fisik/searchNatTest", {
search_nat_test: "",
filter_status: this.$store.state.fisikdetail.selected_filter_status
});
},
thr_search_instrument: _.debounce(function () {
this.$store.dispatch("user/searchinstrument", {
tes: this.search_instrument,
});
}, 2000),
namaValidation() {
if (!this.xname) {
this.nama_error_message = "Anda belum mengisi";
}
if (this.xname) {
this.nama_error_message = "";
}
},
resetAllInput() {
this.xname = "";
this.nama_error_message = "";
},
openAddForm() {
this.dialog_fisik = true;
this.$store.commit("fisik/update_act", "new");
this.$store.commit("fisik/update_last_id", -1);
this.$store.commit("fisik/update_selected_nat_test", {});
this.xname = "";
this.search_nat_test = "";
this.resetAllInput();
},
saveAdd() {
this.namaValidation();
if (this.nama_error_message === "") {
let prm = {
name: this.xname,
nat_test_id: this.selected_nat_test.Nat_TestID
};
this.$store.dispatch("fisik/addFisikTemplateMapping", prm);
}
},
updateFormUser() {
if (this.$refs.formuser.validate()) {
this.$store.dispatch("user/update", {
id: this.xid,
name: this.xname,
ispertest: this.ispertest === true ? "Y" : "N",
isnonlab: this.isnonlab === true ? "Y" : "N",
suser: this.xsearch,
});
}
},
editUser(data) {
this.xid = data.id;
this.xcode = data.code;
this.xname = data.name;
this.isdefault = data.Nat_NormalValueIsDefault === "N" ? false : true;
this.ispertest = data.Nat_NormalValueFlagPerTest === "N" ? false : true;
this.isnonlab = data.Nat_NormalValueFlagNonLab === "N" ? false : true;
this.$store.commit("user/update_act", "edit");
this.$store.commit("user/update_dialog_form_user", true);
},
deleteUser(data) {
this.xid = data.id;
var xdata = {
id: data.id,
name: data.name,
suser: this.xsearch,
details: "xxx",
};
this.$store.commit("user/update_selected_user", xdata);
this.msgalert = "Yakin, mau hapus kelompok hasil " + data.name + " ?";
this.dialogdeletealert = true;
},
changeNewUserType(value) {
this.readonlytypeuser = value === true ? true : false;
this.readonlytypeusernew = value === true ? false : true;
},
newUserType() {
readonlytypeuser: true;
readonlytypeusernew: false;
},
closeDeleteAlert() {
this.$store.dispatch("user/delete", {
userid: this.$store.state.user.selected_user.id,
xname: this.$store.state.user.selected_user.name,
suser: this.xsearch,
sdetail: "",
});
this.dialogdeletealert = false;
},
thr_search: _.debounce(function () {
this.$store.dispatch("fisik/fisikTemplateMappingList", {
fisikname: this.fisikname,
current_page: 1,
lastid: -1,
});
}, 1000),
thr_search_nat_test() {
this.$store.dispatch("fisik/searchNatTest", {
search_nat_test: this.search_nat_test,
});
},
},
watch: {
search_nat_test(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
this.thr_search_nat_test();
},
xsearch(val, old) {
this.xsearch = val;
this.thr_search();
},
search_instrument(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
if (this.$store.state.user.update_autocomplete_status == 1) return;
this.thr_search_instrument();
},
},
};
</script>