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

1015 lines
30 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">
<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 v-slot:selection="data">
<p>
{{ data.item.Mgm_McuNumber }} - {{ data.item.Mgm_McuLabel }}
</p>
</template> -->
<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="cari"
v-model="search"
outline
></v-text-field>
</v-flex>
<v-flex xs2>
<!-- <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">{{ props.item.corporateName }}</td>
<td class="text-xs-left pa-2">
<v-text-field
label="email"
hide-details
@input="handleChangeEmail(props.item)"
v-model="props.item.patientEmail"
></v-text-field>
</td>
<td class="text-xs-left">
<v-chip
color="green"
v-if="props.item.status == 'Y'"
text-color="white"
>
<v-avatar class="green darken-4">{{
props.item.retry
}}</v-avatar>
Dikirim
</v-chip>
<v-chip
color="orange"
v-if="props.item.status == 'R'"
text-color="white"
>
<v-avatar class="orange darken-4">{{
props.item.retry
}}</v-avatar>
Kirim Ulang
</v-chip>
<v-chip
color="blue-grey"
v-if="props.item.status == 'NO'"
text-color="white"
>
<v-avatar class="blue-grey darken-4">{{
props.item.retry
}}</v-avatar>
Belum Dikirim
</v-chip>
<v-chip
color="blue"
v-if="props.item.status == 'N'"
text-color="white"
>
<v-avatar class="blue darken-4">{{
props.item.retry
}}</v-avatar>
Proses
</v-chip>
<v-chip
color="red"
v-if="props.item.status == 'E'"
text-color="white"
>
<v-avatar class="red darken-4">{{
props.item.retry
}}</v-avatar>
Error
</v-chip>
</td>
<td class="text-xs-center">
<v-btn
v-if="
validateEmail(props.item.patientEmail) &&
props.item.status === 'NO' &&
props.item.retry < 5
"
color="teal"
@click="sendEmailPatient(props.item)"
class="white--text"
>Kirim</v-btn
>
<kbd v-if="props.item.status === 'Y'">{{
props.item.sentDate
}}</kbd>
<v-btn
v-if="
(validateEmail(props.item.patientEmail) &&
props.item.status === 'E' &&
props.item.retry >= 5) ||
(validateEmail(props.item.patientEmail) &&
props.item.status === 'Y')
"
@click="sendEmailPatient(props.item)"
color="teal"
class="white--text"
>Kirim Ulang</v-btn
>
</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: {
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");
},
handleChangeEmail(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].patientEmail = val.patientEmail;
this.selectedData = arr;
console.log(val);
}
},
validateEmail(email) {
return String(email)
.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,}))$/
);
},
},
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_company(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_company();
// },
// 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 {
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: "15%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "TGL. ORDER",
align: "center",
sortable: false,
value: "lab",
width: "15%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "NAMA",
align: "center",
sortable: false,
value: "lab",
width: "20%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "CORPORATE",
align: "center",
sortable: false,
value: "name",
width: "15%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "EMAIL",
align: "center",
sortable: false,
value: "name",
width: "10%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "STATUS",
align: "center",
sortable: false,
value: "name",
width: "10%",
class: "pa-2 blue darken-2 white--text",
},
{
text: "AKSI",
align: "center",
sortable: false,
value: "name",
width: "10%",
class: "pa-2 blue darken-2 white--text",
},
],
};
},
};
</script>