Files
FE_CPONE/test/vuex/one-md-email-config-onhold/components/oneMdEmailConfig.vue
2026-04-27 10:13:31 +07:00

297 lines
8.7 KiB
Vue

<template>
<v-layout row>
<v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
{{msgsnackbar}}
<v-btn flat @click="updateAlert_success(false)">
Tutup
</v-btn>
</v-snackbar>
<v-flex xs6 mr-1>
<v-card>
<v-card-title class="headline grey darken-1 pt-2 pb-2" primary-title style="color:white">
<h4>Email Konfigurasi Invoice</h4>
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="email" label="Email"></v-text-field>
</v-flex>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="password" label="Password"></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="server" label="Server"></v-text-field>
</v-flex>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="emailcc" label="Email CC"></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="sender" label="Pengirim"></v-text-field>
</v-flex>
<v-flex xs6 pa-2>
<v-text-field v-model="title" label="Jabatan"></v-text-field>
</v-flex>
<v-flex xs6 pa-2>
<v-text-field v-model="titleeng" label="Jabatan (Inggris)"></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs6 pa-2 d-flex>
<v-text-field v-model="manager" label="Kepala Cabang"></v-text-field>
</v-flex>
<v-flex xs6 pa-2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT REMINDER H-7</h4>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-2 d-flex>
<v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 1" v-model="format1"
rows="14"></v-textarea>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT REMINDER HARI H</h4>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-2 d-flex>
<v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 2" v-model="format2"
rows="14"></v-textarea>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT TAGIHAN</h4>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-2 d-flex>
<v-textarea filled solo background-color="amber lighten-4" color="orange orange-darken-4" label="Format 3" v-model="format3"
rows="14"></v-textarea>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="doSave()" color="primary">SIMPAN</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6 ml-1>
<v-card>
<v-card-title class="headline grey darken-1 pt-2 pb-2" primary-title style="color:white">
<h4>Tampilan Email</h4>
</v-card-title>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT REMINDER H-7</h4>
</v-flex>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 pa-2 v-html="format1">
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT REMINDER HARI H</h4>
</v-flex>
<v-layout row>
<v-flex xs12 pa-2 v-html="format2">
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-flex xs12 class="text-md-center" pa-2 d-flex>
<h4>FORMAT TAGIHAN</h4>
</v-flex>
<v-layout row>
<v-flex xs12 pa-2 v-html="format3">
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.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: () => ({
color: "success"
}),
mounted() {
this.$store.dispatch("form/getdata")
},
computed: {
sender: {
get() {
return this.$store.state.form.sender
},
set(val) {
this.$store.commit("form/update_sender", val)
}
},
manager: {
get() {
return this.$store.state.form.manager
},
set(val) {
this.$store.commit("form/update_manager", val)
}
},
server: {
get() {
return this.$store.state.form.server
},
set(val) {
this.$store.commit("form/update_server", val)
}
},
email: {
get() {
return this.$store.state.form.email
},
set(val) {
this.$store.commit("form/update_email", val)
}
},
password: {
get() {
return this.$store.state.form.password
},
set(val) {
this.$store.commit("form/update_password", val)
}
},
title: {
get() {
return this.$store.state.form.title
},
set(val) {
this.$store.commit("form/update_title", val)
}
},
titleeng: {
get() {
return this.$store.state.form.titleeng
},
set(val) {
this.$store.commit("form/update_titleeng", val)
}
},
emailcc: {
get() {
return this.$store.state.form.emailcc
},
set(val) {
this.$store.commit("form/update_emailcc", val)
}
},
format1: {
get() {
return this.$store.state.form.format1
},
set(val) {
this.$store.commit("form/update_format1", val)
}
},
format2: {
get() {
return this.$store.state.form.format2
},
set(val) {
this.$store.commit("form/update_format2", val)
}
},
format3: {
get() {
return this.$store.state.form.format3
},
set(val) {
this.$store.commit("form/update_format3", val)
}
},
snackbar: {
get() {
return this.$store.state.form.alert_success
},
set(val) {
this.$store.commit("form/update_alert_success", val)
}
},
msgsnackbar() {
return this.$store.state.form.msg_success
},
},
methods: {
doSave() {
var prm = {
ConfOnHoldFinanceMgrReport: this.manager,
ConfOnHoldSenderName: this.sender,
ConfOnHoldServer: this.server,
ConfOnHoldSenderEmail: this.email,
ConfOnHoldSenderPassword: this.password,
ConfOnHoldSenderTitle: this.title,
ConfOnHoldSenderTitleEng: this.titleeng,
ConfOnHoldCc: this.emailcc,
ConfOnHoldTemplateHtml: this.format1,
ConfOnHoldTemplateHtml02: this.format2,
ConfOnHoldTemplateHtml03: this.format3,
ConfOnHoldID: this.$store.state.form.xid
}
this.$store.dispatch("form/save", prm)
}
}
}
</script>