145 lines
4.7 KiB
Vue
145 lines
4.7 KiB
Vue
<template>
|
|
<div class="text-xs-center">
|
|
<v-dialog
|
|
v-model="dialog"
|
|
width="600"
|
|
>
|
|
|
|
<v-card>
|
|
<v-card-title
|
|
v-if="info_mr.title"
|
|
class="headline grey lighten-2"
|
|
primary-title
|
|
>
|
|
{{ info_mr.title }}
|
|
</v-card-title>
|
|
|
|
<div style="padding:10px;font-size:16px;background-color:#efefef;" v-html="info_mr.sub_title">
|
|
</div>
|
|
|
|
<v-card-text v-if="info_mr.note" v-html='info_mr.note' >
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
color="primary"
|
|
flat
|
|
@click="dialog = false"
|
|
>
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
<style >
|
|
table.mr-table {
|
|
border-collapse: collapse;
|
|
width:100%;
|
|
border: 1px solid #e6e6e6;
|
|
font-size:14px;
|
|
}
|
|
table.mr-table th {
|
|
padding: 10px;
|
|
background-color: #e6e6e6;
|
|
}
|
|
table.mr-table td {
|
|
padding: 10px;
|
|
}
|
|
table.mr-table tr.reflex-ok td {
|
|
background-color: #ccffcc;
|
|
}
|
|
table.mr-table tr.reflex-not-ok td {
|
|
background-color: #ffcccc ;
|
|
}
|
|
table.mr-table tr.reflex-not-ok-argument td {
|
|
background-color: #ffcc99;
|
|
}
|
|
|
|
table.mr-table tr.reflex-not-ok-global td {
|
|
background-color: #ffffb3;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
computed : {
|
|
dialog : {
|
|
get () { return this.$store.state.re_px.dialog_mr},
|
|
set (v) { this.$store.commit("re_px/update_dialog_mr", v) }
|
|
},
|
|
info_mr() {
|
|
let mr = this.$store.state.re_px.selected_mr_state
|
|
let title = mr[3]["title"];
|
|
let sub_title = mr[3]["sub_title"];
|
|
let overlimit = mr[3]["overlimit"];
|
|
if (overlimit) {
|
|
sub_title = '<span style="font-weight:bold; color:red">' + sub_title + "</font>";
|
|
}
|
|
let note = ""
|
|
|
|
if ( mr[3]["argument_1"]) {
|
|
let arg= mr[3]["argument_1"];
|
|
|
|
for(let idx =0; idx < arg.length ; idx++ ) {
|
|
if ( note != "" ) note += "<br/>";
|
|
let px_arg = arg[idx]["px"];
|
|
let note_arg = arg[idx]["note"];
|
|
note += '<table class="mr-table" >';
|
|
note += '<tr>';
|
|
note += '<th>Argument 1</th><th style="text-align:center" >Hasil</th> <th style="text-align:center" >Condition</th>';
|
|
note += '</tr>';
|
|
let xtr_class = 'reflex-not-ok-argument';
|
|
if ( arg[idx]['is_ok'] ) xtr_class = 'reflex-ok';
|
|
if ( arg[idx]['is_ok'] == false && arg[idx]['is_ok_argument']) xtr_class = 'reflex-not-ok-global';
|
|
note += '<tr class="' + xtr_class + '" />';
|
|
note += '<td>' + px_arg + '</td>';
|
|
note += '<td style="text-align:center" >' + arg[idx]['result'] + '</td>';
|
|
note += '<td style="text-align:center" >' + arg[idx]['condition'] + '</td>';
|
|
note += '</tr>';
|
|
if ( ! arg[idx]['is_show_mandatory']) {
|
|
note += '</table>';
|
|
continue;
|
|
}
|
|
if ( arg[idx]['mandatory'].length == 0 ) {
|
|
note += '<tr><td colspan="3">Tidak ada mandatory</td></tr>';
|
|
note += '</table>';
|
|
continue;
|
|
}
|
|
note += '<th>Mandatory</th><th style="text-align:center" >Hasil</th> <th style="text-align:center" >Condition</th>';
|
|
note += '</tr>';
|
|
let mandatory = arg[idx]['mandatory'];
|
|
for(let jdx=0; jdx < mandatory.length ; jdx++) {
|
|
let px = mandatory[jdx]['px'];
|
|
let result = mandatory[jdx]['result'];
|
|
let condition= mandatory[jdx]['condition'];
|
|
let tr_class = 'reflex-not-ok';
|
|
if ( mandatory[jdx]['is_ok'] ) tr_class = 'reflex-ok';
|
|
note += '<tr class="' + tr_class + '" />';
|
|
note += '<td>' + px + '</td>';
|
|
note += '<td style="text-align:center" >' + result + '</td>';
|
|
note += '<td style="text-align:center" >' + condition + '</td>';
|
|
note += '</tr>';
|
|
}
|
|
note += '</table>';
|
|
}
|
|
}
|
|
|
|
|
|
let result ={
|
|
title : title,
|
|
sub_title : sub_title,
|
|
overlimit: overlimit,
|
|
note : note
|
|
};
|
|
return result;
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|