348 lines
13 KiB
Vue
348 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<v-layout column pb-2>
|
|
<v-card class="pa-1 mb-2" height="100%">
|
|
<v-layout align-center row>
|
|
<v-flex xs12>
|
|
<v-card tile class="pa-2" flat color="#64b2cd">
|
|
<h5 style="color:#fff" class="subtitle-1 font-weight-bold">PROYEK DAN FISIK TEMPLATE DAN AGREEMENT</h5>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row>
|
|
<v-flex xs6 class="pa-2">
|
|
<v-autocomplete
|
|
label="Proyek"
|
|
v-model="selected_project"
|
|
:items="projects"
|
|
:search-input.sync="search_project"
|
|
auto-select-first
|
|
style="font-size:12px;padding:4px 0"
|
|
no-filter
|
|
:readonly="isHavingTest"
|
|
return-object
|
|
clearable
|
|
:item-text="item => item.code + ' - ' + item.label"
|
|
:loading="is_loading_project"
|
|
color="primary"
|
|
no-data-text="Pilih Proyek"
|
|
hide-details
|
|
>
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs6 class="pa-2">
|
|
<v-autocomplete
|
|
label="Fisik Template"
|
|
v-model="selected_fisik_template"
|
|
:items="fisik_templates"
|
|
:search-input.sync="search_fisik_template"
|
|
auto-select-first
|
|
style="font-size:12px;padding:4px 0"
|
|
:readonly="!_.isEmpty(selected_project) || isHavingTest"
|
|
no-filter
|
|
return-object
|
|
:clearable="_.isEmpty(selected_project)"
|
|
:item-text="item => item.fisik_template_label"
|
|
:loading="is_loading_fisik_template"
|
|
color="primary"
|
|
no-data-text="Pilih Fisik Template"
|
|
hide-details
|
|
>
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
<v-card class="pa-1 mb-0" >
|
|
<v-layout align-center row>
|
|
<v-flex xs12>
|
|
<v-card tile class="pa-2" flat color="#64b2cd">
|
|
<h5 style="color:#fff" class="subtitle-1 font-weight-bold">KEL. PELANGGAN DAN AGREEMENT</h5>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="!_.isEmpty(selected_project)" class="pb-2" row>
|
|
<v-flex pt-1 pl-2 pr-1 xs6>
|
|
<v-text-field
|
|
label="Kel. Pelanggan"
|
|
:value="selected_company.CorporateName"
|
|
readonly
|
|
hide-details
|
|
style="font-size:12px;"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pt-1 pl-2 pr-1 xs6>
|
|
<v-text-field
|
|
label="Agreement"
|
|
:value="selected_mou.price_header_name"
|
|
readonly
|
|
hide-details
|
|
style="font-size:12px;"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="_.isEmpty(selected_project)" row>
|
|
<v-flex pt-1 pl-2 pr-1 xs6>
|
|
<v-autocomplete
|
|
label="Kel. Pelanggan"
|
|
v-model="selected_company"
|
|
:items="companies"
|
|
style="font-size:12px;"
|
|
:search-input.sync="search"
|
|
:readonly="isHavingTest"
|
|
auto-select-first
|
|
no-filter
|
|
hide-details
|
|
return-object
|
|
|
|
item-text="CorporateName"
|
|
:loading="is_loading"
|
|
color="primary"
|
|
no-data-text="Pilih Kel. Pelanggan"
|
|
>
|
|
<template
|
|
slot="item"
|
|
slot-scope="{ item }"
|
|
>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.CorporateName"></v-list-tile-title>
|
|
<v-list-tile-sub-title v-text="getMou(item)"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
<v-flex pt-1 pl-1 pr-2 xs6>
|
|
<v-select
|
|
v-model="selected_mou"
|
|
:items="company_mou"
|
|
:readonly="isHavingTest"
|
|
style="font-size:12px;"
|
|
auto-select-first
|
|
item-text = "price_header_name"
|
|
return-object
|
|
label="Agreement"
|
|
hide-details
|
|
class="mb-1"
|
|
>
|
|
<template
|
|
slot="item"
|
|
slot-scope="{ item }"
|
|
>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.price_header_name"></v-list-tile-title>
|
|
<v-list-tile-sub-title v-text="getMouDate(item)"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
</v-select>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="selected_mou_note.length > 0" mt-1 pt-1 pl-2 pr-2 style="border:1px dashed #64b2cd" row>
|
|
<v-flex xs12>
|
|
<p class="mb-1"><kbd style="background:#ec4d4d">Catatan :</kbd></p>
|
|
<p v-for="(note, n) in selected_mou_note" v-bind:key="n" class="mb-1 caption">{{ note }}</p>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-card>
|
|
</v-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
computed: {
|
|
is_loading_fisik_template(){
|
|
return this.$store.state.company.is_loading_fisik_template === true || this.$store.state.company.is_loading_fisik_template === 1
|
|
},
|
|
fisik_templates: {
|
|
get(){
|
|
return this.$store.state.company.fisik_templates
|
|
},
|
|
set(val){
|
|
this.$store.commit('company/update_fisik_templates',val)
|
|
}
|
|
},
|
|
selected_fisik_template:{
|
|
get(){
|
|
return this.$store.state.company.selected_fisik_template
|
|
},
|
|
set(val){
|
|
this.$store.commit('company/update_selected_fisik_template',val)
|
|
}
|
|
},
|
|
is_loading_project(){
|
|
return this.$store.state.company.is_loading_project === true || this.$store.state.company.is_loading_project === 1
|
|
},
|
|
projects(){
|
|
return this.$store.state.company.projects
|
|
},
|
|
selected_project:{
|
|
get(){
|
|
return this.$store.state.company.selected_project
|
|
},
|
|
set(val){
|
|
this.$store.commit('company/update_selected_project',val)
|
|
if(val && !_.isEmpty(val)){
|
|
this.search_fisik_template = val.fisik_mapping_label;
|
|
this.selected_fisik_template = {fisik_template_label:val.fisik_mapping_label,fisik_template_id:val.fisik_mapping_id}
|
|
this.selected_company = {CorporateName:val.CorporateName,CorporateID:val.CorporateID,corporate_prices:val.corporate_prices}
|
|
this.companies = [this.selected_company]
|
|
}else{
|
|
this.search_fisik_template = ''
|
|
this.selected_fisik_template = {}
|
|
this.selected_company = {}
|
|
this.companies = []
|
|
}
|
|
}
|
|
},
|
|
order_companies(){
|
|
return this.$store.state.company.order_companies
|
|
},
|
|
show_doctor_alert(){
|
|
return this.$store.state.doctor.show_doctor_alert
|
|
},
|
|
search:{
|
|
get(){
|
|
return this.$store.state.company.search
|
|
},
|
|
set(val) {
|
|
if (val == null) return
|
|
this.$store.commit('company/update_search',val)
|
|
}
|
|
},
|
|
isHavingTest() {
|
|
return this.$store.state.px.selected_test.length > 0 ||
|
|
this.$store.state.px.selected_panel.length > 0
|
|
},
|
|
selected_mou: {
|
|
get() {
|
|
return this.$store.state.company.selected_mou
|
|
},
|
|
set(val) {
|
|
this.$store.commit("px/update_tests",{records:[],total:0})
|
|
this.$store.commit("company/update_selected_mou", val)
|
|
if(val && !_.isEmpty(val)){
|
|
console.log('in not empty');
|
|
console.log('mulai cari px dari mou');
|
|
this.$store.dispatch('px/search');
|
|
}else{
|
|
console.log('in empty');
|
|
this.$store.commit("px/update_tests",{records:[],total:0})
|
|
}
|
|
}
|
|
},
|
|
selected_company: {
|
|
get() {
|
|
return this.$store.state.company.selected_company
|
|
},
|
|
set(val) {
|
|
this.$store.commit("company/update_selected_company", val)
|
|
this.$store.dispatch('delivery/search_deliveries',{type:'company',id:val.CorporateID})
|
|
console.log(val);
|
|
if(val && !_.isEmpty(val)){
|
|
this.$store.commit("px/update_tests",{records:[],total:0})
|
|
if(val.corporate_prices.length > 0){
|
|
let prices = val.corporate_prices;
|
|
let _this = this;
|
|
prices.forEach(function(price){
|
|
if(price.is_default == 'Y'){
|
|
_this.selected_mou = price;
|
|
console.log('selected_mou_default', _this.selected_mou);
|
|
|
|
|
|
}
|
|
});
|
|
}else{
|
|
this.$store.commit("px/update_tests",{records:[],total:0})
|
|
}
|
|
}else{
|
|
this.$store.commit("px/update_tests",{records:[],total:0})
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
company_mou() {
|
|
if (! this.$store.state.company.selected_company) return []
|
|
if (! this.$store.state.company.selected_company.corporate_prices) return []
|
|
return this.$store.state.company.selected_company.corporate_prices
|
|
},
|
|
|
|
companies() {
|
|
return this.$store.state.company.companies
|
|
},
|
|
is_loading() {
|
|
return this.$store.state.company.search_status == 1
|
|
},
|
|
|
|
selected_mou_note() {
|
|
let x = this.selected_mou
|
|
if (!x)
|
|
return []
|
|
if (!x.note)
|
|
return []
|
|
|
|
return x.note.split(/\n/)
|
|
}
|
|
},
|
|
methods: {
|
|
getMouDate(item) {
|
|
return item.corporate_price_start_date + ' s/d ' + item.corporate_price_end_date
|
|
},
|
|
getMou(item) {
|
|
if (!item) return ''
|
|
if (!item.corporate_prices) return ''
|
|
let s_mou = ''
|
|
item.corporate_prices.forEach( function(price,idx) {
|
|
if (s_mou!='') s_mou += ', '
|
|
s_mou += price.price_header_name
|
|
});
|
|
return s_mou
|
|
},
|
|
thr_search: _.debounce( function () {
|
|
this.$store.dispatch("company/search")
|
|
}, 200),
|
|
thr_search_project: _.debounce( function () {
|
|
this.$store.dispatch("company/search_project",{search:this.search_project})
|
|
}, 200),
|
|
thr_search_fisik_template: _.debounce( function () {
|
|
this.$store.dispatch("company/search_fisik_template",{search:this.search_fisik_template})
|
|
}, 200)
|
|
},
|
|
watch: {
|
|
search(val,old) {
|
|
if (this.$store.state.order.is_from_clinic)
|
|
return
|
|
if (val == null || typeof val == 'undefined') val = ""
|
|
if (val == old ) return
|
|
if (this.$store.state.company.search_status == 1 ) return
|
|
this.$store.commit("company/update_search",val)
|
|
this.thr_search()
|
|
},
|
|
search_project(val,old) {
|
|
if (this.$store.state.order.is_from_clinic)
|
|
return
|
|
if (val == null || typeof val == 'undefined') val = ""
|
|
if (val == old ) return
|
|
if (this.$store.state.company.is_loading_project == true ) return
|
|
this.thr_search_project()
|
|
}
|
|
},
|
|
data: function() {
|
|
return {
|
|
search_project: '',
|
|
search_fisik_template: ''
|
|
// search : ''
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$store.dispatch('company/search_fisik_template',{search:''})
|
|
// this.$store.dispatch('company/search_default')
|
|
}
|
|
}
|
|
</script>
|