Files
FE_CPONE/test/vuex/one-send-email-cpone-v2/components/oneSendEmail.vue
2026-04-27 10:13:31 +07:00

842 lines
26 KiB
Vue

<template>
<div>
<v-snackbar color="success" v-model="snackbarSuccess" right="right" :timeout="3000" top="top">
{{ successMsg }}
<v-btn color="white" flat @click="snackbarSuccess = false"> Close </v-btn>
</v-snackbar>
<v-snackbar color="error" v-model="snackbarError" right="right" :timeout="3000" top="top">
{{ errorMsg }}
<v-btn color="white" flat @click="snackbarError = false"> Close </v-btn>
</v-snackbar>
<v-dialog persistent v-model="dialogAdd" width="50%">
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
Kirim Hasil
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex xs12>
<p class="font-weight-bold mb-2">
Apakah anda yakin akan mengirim hasil berikut ?
</p>
</v-flex>
<v-flex xs12 v-if="selectedData.length > 0">
<fieldset>
<legend class="px-3">
{{ selectedData.length }} item terpilih
</legend>
<v-layout row wrap class="pa-2">
<v-chip v-for="(data, index) in selectedData" :key="index" class="mr-2">{{ data.orderNumber
}}</v-chip>
</v-layout>
</fieldset>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="error" :disabled="loading" flat @click="dialogAdd = false">
Batal
</v-btn>
<v-btn color="primary" :disabled="loading" flat @click="saveData()">
Simpan
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-layout column>
<v-layout align-center column>
<v-toolbar dark color="primary">
<v-toolbar-title class="white--text">KIRIM HASIL</v-toolbar-title>
<v-spacer></v-spacer>
<!-- <v-btn @click="print()" icon>
<v-icon>print</v-icon>
</v-btn> -->
<!-- <v-btn
v-if="!isAdd && !isObjectEmpty(selectedEmail)"
@click="searchForAdd()"
color="warning"
>Tambahkan</v-btn
> -->
<v-btn v-if="this.selectedData.length > 0" @click="openDialogSave()" color="warning">Simpan</v-btn>
</v-toolbar>
<v-card style="width: 100%" class="mb-2 pa-2">
<v-layout row wrap>
<v-flex xs3 class="mb-2 pr-2">
<v-autocomplete style="font-size: 12px" label="Cari Proyek ..." v-model="selectedSetup" :items="setupList"
:search-input.sync="search_project" auto-select-first outline no-filter item-text="Mgm_McuLabel"
return-object :loading="loading" hide-details no-data-text="Proyek MCU">
<template slot="item" slot-scope="{ item }">
<v-list-tile-content>
<v-list-tile-title>{{ item.Mgm_McuNumber }} -
{{ item.Mgm_McuLabel }}</v-list-tile-title>
<v-list-tile-sub-title>
{{ item.Mgm_McuStartDate }}/
{{ item.Mgm_McuEndDate }}</v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-autocomplete>
<!--<v-autocomplete v-model="selectedSetup" :loading="loading" :items="setupList" item-text="Mgm_McuLabel"
outline class="mini-select mr-2" hide-details return-object label="Proyek MCU">
<template slot="item" slot-scope="{ item }">
<template>
<v-list-tile-content>
<v-list-tile-title>{{ item.Mgm_McuNumber }} -
{{ item.Mgm_McuLabel }}</v-list-tile-title>
<v-list-tile-sub-title>
{{ item.Mgm_McuStartDate }}/
{{ item.Mgm_McuEndDate }}</v-list-tile-sub-title>
</v-list-tile-content>
</template>
</template>
</v-autocomplete>-->
</v-flex>
<v-flex xs2>
<v-menu v-model="menuFormDateStart" :close-on-content-click="false" :nudge-right="40" lazy
transition="scale-transition" offset-y full-width max-width="290px" min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field class="mr-2" v-model="formatedStartDateDetail" label="Tanggal Awal" outline hide-details
readonly v-on="on" @blur="deFormatedDate(formatedStartDateDetail)"></v-text-field>
</template>
<v-date-picker v-model="startDateDetailForm" no-title
@input="menuFormDateStart = false"></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs2>
<v-menu v-model="menuFormDateEnd" :close-on-content-click="false" :nudge-right="40" lazy
transition="scale-transition" offset-y full-width max-width="290px" min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field class="mr-2" v-model="formatedEndDateDetail" label="Tanggal Akhir" outline readonly
hide-details v-on="on" @blur="deFormatedDate(formatedEndDateDetail)"></v-text-field>
</template>
<v-date-picker v-model="endDateDetailForm" no-title @input="menuFormDateEnd = false"></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs3>
<v-text-field class="mr-2" hide-details label="Ketikkan nomor lab atau nama pasien" v-model="search"
outline></v-text-field>
</v-flex>
<v-flex xs2>
<v-btn @click="searchTransaction()" color="primary">Cari</v-btn>
<!-- <v-btn @click="addNew" v-if="!isAdd">
<v-icon>add_box</v-icon>
</v-btn> -->
<!-- <div>
<v-btn v-if="!isAdd" @click="searchForAdd()" color="success"
>Tambahkan Hasil</v-btn
>
</div> -->
<!-- <v-select v-if="isAdd" :items="statusDetail" label="Status" class="mini-select" item-text="text"
item-value="value" v-model="selectedStatusDetail" hide-details outline></v-select> -->
</v-flex>
<v-flex xs12 v-if="selectedData.length > 0">
<fieldset>
<legend class="px-3">
{{ selectedData.length }} item terpilih
</legend>
<v-layout row wrap class="pa-2">
<v-chip v-for="(data, index) in selectedData" @input="changeCheckBox(data)" :disabled="loading"
:key="index" class="mr-2" close>{{ data.orderNumber }}</v-chip>
</v-layout>
</fieldset>
</v-flex>
</v-layout>
</v-card>
</v-layout>
<v-card>
<div class="pa-2">
<span class="light-green--text font-weight-bold">Dikirim : {{ totalEmail }}</span>
|
<span class="blue-grey--text text--lighten-1 font-weight-bold">Belum Dikirim :{{ totalNotEmail }}</span>
|
<span class="red--text text--lighten-1 font-weight-bold">Error :{{ totalError }}</span>
|
<span class="orange--text font-weight-bold">Total : {{ totalData }}</span>
</div>
<div style="overflow-y: scroll; height: 65vh" class="fill-height">
<v-data-table :headers="headers" :items="orderList" :loading="loading" hide-actions class="elevation-1">
<template v-slot:headers="props">
<tr>
<th class="blue darken-2 white--text">
<v-checkbox :disabled="loading" :input-value="headerCheckboxValueAll()"
:indeterminate="headerCheckboxValuePartial()" primary hide-details
@click.stop="toggleAll"></v-checkbox>
</th>
<th v-for="header in props.headers" :key="header.text" :class="header.class" :width="header.width">
{{ header.text }}
</th>
</tr>
</template>
<v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
<template v-slot:items="props">
<td class="text-xs-center">
<div class="text-xs-center">
<v-checkbox :disabled="loading" @change="changeCheckBox(props.item)"
:input-value="checkBoxValue(props.item)" hide-details v-if="
(validateEmail(props.item.patientEmail) &&
props.item.status === 'NO') ||
(validateEmail(props.item.patientEmail) &&
props.item.status === 'E' &&
props.item.retry >= 5) ||
(validateEmail(props.item.patientEmail) &&
props.item.status === 'Y')
"></v-checkbox>
</div>
</td>
<td>{{ props.item.orderNumber }}</td>
<td class="text-xs-left">{{ props.item.orderDate }}</td>
<td class="text-xs-left">{{ props.item.patientName }}</td>
<td class="text-xs-left pa-2">
<v-text-field @input="handleChangeEmailPatient(props.item)"
v-model="props.item.M_PatientEmail"></v-text-field>
</td>
<td class="text-xs-left pa-2">
<v-text-field disabled @input="handleChangeEmailCorporate(props.item)"
v-model="props.item.CorporateEmail"></v-text-field>
</td>
</template>
</v-data-table>
</div>
</v-card>
<v-card class="pa-2">
<div class="text-xs-left">
<v-pagination v-model="page" :length="totalPage"></v-pagination>
</div>
</v-card>
</v-layout>
<one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint"
@close-dialog-print="closePrint"></one-dialog-print>
</div>
</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;
}
.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;
}
</style>
<script>
module.exports = {
// components: {
// "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
// "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
// },
components: {
"one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
},
mounted() {
//this.$store.dispatch("email/getsetup");
// this.$store.dispatch("email/getdetail");
},
methods: {
searchTransaction() {
if (!_.isEmpty(this.selectedSetup)) {
this.$store.dispatch("email/getdetail");
} else {
alert("Pilih proyek MCU terlebih dahulu");
}
},
closePrint() {
this.openprint = false;
},
print() {
let user = one_user();
var d = new Date();
var n = d.getTime();
// https://devcpone.aplikasi.web.id/birt/run?__report=report/one/rekap/rpt_list_email_001.rptdesign&__format=pdf&PID=4&username=joko@gmail.com&tm=1722401933188
let rptname = "rpt_list_email_001";
this.urlprint =
"/birt/run?__report=report/one/rekap/" +
rptname +
".rptdesign&__format=pdf&username=" +
user.M_StaffName +
"&PID=" +
this.selectedEmail.emailID +
"&tm=" +
n;
this.openprint = true;
},
deleteData(val) {
if (this.loading) {
return;
}
let text =
"Apakah anda yakin menghapus data berikut " +
val.orderNumber +
" " +
val.patientName +
" ?";
if (confirm(text)) {
this.$store.dispatch("email/deleteemaildetail", val.detailID);
} else {
return;
}
},
saveData() {
this.$store.dispatch("email/sendemail");
},
sendEmailPatient(val) {
this.selectedData = [val];
this.$store.dispatch("email/sendemail");
},
isObjectEmpty(objectName) {
return (
Object.keys(objectName).length === 0 &&
objectName.constructor === Object
);
},
openDialogSave() {
if (this.selectedData.length === 0) {
alert("Tidak ada hasil yang bisa diserahkan");
return;
}
let error = [];
this.selectedData.forEach((element) => {
if (!this.validateEmail(element.patientEmail)) {
error.push(element.orderNumber);
}
});
if (error.length > 0) {
let labnum = error.join(", ");
alert("Validasi email gagal, cek ulang email pada order : " + labnum);
return;
}
this.dialogAdd = true;
},
toggleAll() {
let raw = JSON.stringify(this.selectedData);
let arr = [...JSON.parse(raw)];
let ckAll = this.headerCheckboxValueAll();
for (let i = 0; i < this.orderList.length; i++) {
const element = this.orderList[i];
let foundItem = arr.find((e) => e.orderID === element.orderID);
const index = arr.findIndex((e) => e.orderID === element.orderID);
if (ckAll) {
arr.splice(index, 1);
} else {
if (
!foundItem &&
(element.status === "NO" || element.status === "Y") &&
this.validateEmail(element.patientEmail)
) {
arr.push(element);
}
}
}
this.selectedData = arr;
},
headerCheckboxValueAll() {
// debugger;
let ret = 0;
for (let i = 0; i < this.orderList.length; i++) {
const element = this.orderList[i];
let foundItem = this.selectedData.find(
(e) => e.orderID === element.orderID
);
if (foundItem) {
ret = ret + 1;
}
}
if (ret === this.orderList.length && ret > 0) {
return true;
} else {
return false;
}
},
headerCheckboxValuePartial() {
let ret = 0;
for (let i = 0; i < this.orderList.length; i++) {
const element = this.orderList[i];
let foundItem = this.selectedData.find(
(e) => e.orderID === element.orderID
);
if (foundItem) {
ret = ret + 1;
}
}
if (ret != this.orderList.length && ret > 0) {
return true;
} else {
return false;
}
},
changeCheckBox(val) {
// debugger;
let raw = JSON.stringify(this.selectedData);
let arr = [...JSON.parse(raw)];
if (arr.length == 0) {
arr.push(val);
} else {
let foundItem = arr.find((e) => e.orderID === val.orderID);
const index = arr.findIndex((e) => e.orderID === val.orderID);
if (foundItem) {
arr.splice(index, 1);
} else {
arr.push(val);
}
}
this.selectedData = arr;
console.log(val);
},
checkBoxValue(val) {
let foundItem = this.selectedData.find((e) => e.orderID === val.orderID);
if (foundItem) {
return true;
} else {
return false;
}
},
checkBoxValueFalse(val) {
let foundItem = this.selectedData.find((e) => e.orderID === val.orderID);
if (foundItem) {
return false;
} else {
return true;
}
},
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")}`;
},
searchForAdd() {
this.selectedStatusDetail = "N";
this.isAdd = true;
this.note = this.selectedEmail.emailnote;
this.receiver = this.selectedEmail.emailReceivedBy;
this.$store.commit("email/update_detailPage", 1);
console.log("func search for add");
this.$store.dispatch("email/getdetail");
},
handleChangeEmailPatient(val) {
// debugger;
let raw = JSON.stringify(this.selectedData);
let arr = [...JSON.parse(raw)];
let foundItem = arr.find((e) => e.orderID === val.orderID);
if (foundItem) {
const index = arr.findIndex((e) => e.orderID === val.orderID);
arr[index].M_PatientEmail = val.M_PatientEmail;
this.selectedData = arr;
console.log(val);
}
},
handleChangeEmailCorporate(val) {
// debugger;
let raw = JSON.stringify(this.selectedData);
let arr = [...JSON.parse(raw)];
let foundItem = arr.find((e) => e.orderID === val.orderID);
if (foundItem) {
const index = arr.findIndex((e) => e.orderID === val.orderID);
arr[index].CorporateEmail = val.CorporateEmail;
this.selectedData = arr;
console.log(val);
}
},
validateEmail(email) {
if (!email) return false;
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const emails = email.split(',').map(e => e.trim());
for (const singleEmail of emails) {
if (!emailRegex.test(singleEmail)) {
return false;
}
}
return true;
},
validateEmailX(email) {
console.log(email);
let expl = email.split(",");
let rtn = true;
/*for (let i = 0; i < expl.length; i++) {
const element = expl[i];
if (String(element)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
)
) {
rtn = false;
break;
}
}*/
return rtn;
},
thr_search_project: _.debounce(function () {
console.log(this.search_project);
this.$store.dispatch("email/searchproject", {
search: this.search_project,
});
}, 2000),
},
computed: {
totalData() {
return this.$store.state.email.totalData;
},
totalEmail() {
return this.$store.state.email.totalEmail;
},
totalError() {
return this.$store.state.email.totalError;
},
totalNotEmail() {
return this.$store.state.email.totalNotEmail;
},
selectedEmail: {
get() {
return this.$store.state.email.selectedEmail;
},
set(val) {
this.$store.commit("email/update_selectedEmail", val);
},
},
note: {
get() {
return this.$store.state.email.note;
},
set(val) {
this.$store.commit("email/update_note", val);
},
},
receiver: {
get() {
return this.$store.state.email.receiver;
},
set(val) {
this.$store.commit("email/update_receiver", val);
},
},
dialogAdd: {
get() {
return this.$store.state.email.dialogAdd;
},
set(val) {
this.$store.commit("email/update_dialogAdd", val);
},
},
selectedData: {
get() {
return this.$store.state.email.selectedData;
},
set(val) {
this.$store.commit("email/update_selectedData", val);
},
},
isAdd: {
get() {
return this.$store.state.email.isAdd;
},
set(val) {
this.$store.commit("email/update_isAdd", val);
},
},
orderList() {
return this.$store.state.email.orderList;
},
totalPage() {
return this.$store.state.email.totalPage;
},
page: {
get() {
return this.$store.state.email.page;
},
set(val) {
this.$store.commit("email/update_page", val);
console.log("func detail page");
this.$store.dispatch("email/getdetail");
},
},
statusDetail: {
get() {
return this.$store.state.email.statusDetail;
},
set(val) {
this.$store.commit("email/update_statusDetail", val);
},
},
selectedStatusDetail: {
get() {
return this.$store.state.email.selectedStatusDetail;
},
set(val) {
this.$store.commit("email/update_selectedStatusDetail", val);
this.page = 1;
//this.$store.dispatch("email/getdetail");
},
},
loading: {
get() {
return this.$store.state.email.loading;
},
set(val) {
this.$store.commit("email/update_loading", val);
},
},
setupList: {
get() {
return this.$store.state.email.setupList;
},
set(val) {
this.$store.commit("email/update_setupList", val);
},
},
selectedSetup: {
get() {
return this.$store.state.email.selectedSetup;
},
set(val) {
this.$store.commit("email/update_selectedSetup", val);
this.selectedData = [];
this.page = 1;
//this.$store.dispatch("email/getdetail");
},
},
search: {
get() {
return this.$store.state.email.search;
},
set(val) {
this.$store.commit("email/update_search", val);
this.page = 1;
console.log("func search detail");
//this.$store.dispatch("email/getdetail");
},
},
errorMsg: {
get() {
return this.$store.state.email.errorMsg;
},
set(val) {
this.$store.commit("email/update_errorMsg", val);
},
},
snackbarError: {
get() {
return this.$store.state.email.snackbarError;
},
set(val) {
this.$store.commit("email/update_snackbarError", val);
},
},
snackbarSuccess: {
get() {
return this.$store.state.email.snackbarSuccess;
},
set(val) {
this.$store.commit("email/update_snackbarSuccess", val);
},
},
successMsg: {
get() {
return this.$store.state.email.successMsg;
},
set(val) {
this.$store.commit("email/update_successMsg", val);
},
},
startDateDetailForm: {
get() {
return this.$store.state.email.startDate;
},
set(val) {
this.$store.commit("email/update_startDate", val);
this.page = 1;
console.log("func start date");
this.$store.dispatch("email/getdetail");
},
},
endDateDetailForm: {
get() {
return this.$store.state.email.endDate;
},
set(val) {
this.$store.commit("email/update_endDate", val);
this.page = 1;
console.log("func end date");
this.$store.dispatch("email/getdetail");
},
},
formatedStartDateDetail() {
return this.formatDate(this.startDateDetailForm);
},
formatedEndDateDetail() {
return this.formatDate(this.endDateDetailForm);
},
},
watch: {
search_project(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
this.thr_search_project();
},
// search_doctor(val, old) {
// if (val == old) return;
// if (!val) return;
// if (val.length < 1) return;
// if (this.$store.state.patient.update_autocomplete_status == 1) return;
// this.thr_search_doctor();
// },
// search_test(val, old) {
// if (val == old) return;
// if (!val) return;
// if (val.length < 1) return;
// if (this.$store.state.patient.update_autocomplete_status == 1) return;
// this.thr_search_test();
// },
searchemailHeaderCopy(val, old) {
if (val == old) return;
if (!val) return;
if (val.length < 1) return;
this.thrsearchphautocomplete();
},
},
data() {
return {
search_project: "",
printtitle: "",
printwidth: "80%",
openprint: false,
urlprint: "",
searchemailHeaderCopy: "",
selected_delivery: {},
search_company: "",
search_test: "",
menuFormDateStart: false,
menuFormDateEnd: false,
date: new Date().toISOString().substr(0, 10),
dialogAct: "add",
items: [],
menuFormDateEnd: false,
menuFormDateStart: false,
errors: [],
sheet: false,
indeterminatex: false,
checkednotall: false,
bar_chx_all: false,
selected_barcode: [],
dialogtimeline: false,
search_doctor: "",
headers: [
{
text: "NOMOR",
align: "center",
sortable: false,
value: "lab",
width: "10%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "TGL. ORDER",
align: "center",
sortable: false,
value: "lab",
width: "10%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "NAMA",
align: "center",
sortable: false,
value: "lab",
width: "15%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "EMAIL PASIEN",
align: "center",
sortable: false,
value: "name",
width: "25%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "EMAIL CORPORATE",
align: "center",
sortable: false,
value: "name",
width: "25%",
class: "pa-2 blue darken-2 white--text",
},
],
};
},
};
</script>