162 lines
7.2 KiB
Vue
162 lines
7.2 KiB
Vue
|
<template>
|
||
|
|
<div v-if="options_facility && inputs" class="row">
|
||
|
|
<div class="col-6">
|
||
|
|
<div class="mb-3">
|
||
|
|
<ViewOrderableLookup :client="client" label="Lab tests" xref="S.LAB" :qocall="ien" v-model="inputs.ORDERABLE" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6">
|
||
|
|
<template v-if="options_test">
|
||
|
|
<div v-if="(options_test['CollSamp']) && (options_test['CollSamp'].items)" class="form-floating mb-3">
|
||
|
|
<select class="form-select" v-model="inputs.SAMPLE"><option v-for="item in options_test['CollSamp'].items" :value="item.SampIEN">{{item.SampName}}</option></select>
|
||
|
|
<label>Collect Sample</label>
|
||
|
|
</div>
|
||
|
|
<div v-if="(options_test['Specimens']) && (options_test['Specimens'].items)" class="form-floating mb-3">
|
||
|
|
<select class="form-select" v-model="inputs.SPECIMEN"><option v-for="item in options_test['Specimens'].items" :value="item.value">{{item.text}}</option></select>
|
||
|
|
<label>Specimen</label>
|
||
|
|
</div>
|
||
|
|
<div v-if="(options_test['Urgencies']) && (options_test['Urgencies'].items)" class="form-floating mb-3">
|
||
|
|
<select class="form-select" v-model="inputs.URGENCY"><option v-for="item in options_test['Urgencies'].items" :value="item.value">{{item.text}}</option></select>
|
||
|
|
<label>Urgency</label>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="form-floating mb-3">
|
||
|
|
<select class="form-select" v-model="inputs.COLLECT"><option v-for="item in options_facility['Collection Types'].items" :value="item.value" :selected="item.default">{{item.text}}</option></select>
|
||
|
|
<label>Collection Type</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="mb-3">
|
||
|
|
<template v-if="(inputs.COLLECT == 'LC') && (options_facility['Lab Collection Times'])">
|
||
|
|
<Autocomplete label="Lab Collection Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
|
||
|
|
</template>
|
||
|
|
<template v-else-if="(inputs.COLLECT == 'WC') && (options_facility['Ward Collection Times'])">
|
||
|
|
<Autocomplete label="Ward Collection Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
|
||
|
|
</template>
|
||
|
|
<template v-else-if="(inputs.COLLECT == 'SP') && (options_facility['Send Patient Times'])">
|
||
|
|
<Autocomplete label="Send Patient Time" :items="Object.keys(mapping_START)" v-model="inputs.START" />
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<label>Collection Date/Time</label>
|
||
|
|
<DateTimePicker v-model="inputs.START" />
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="form-floating mb-3">
|
||
|
|
<select class="form-select" v-model="inputs.SCHEDULE"><option v-for="item in options_facility['Schedules'].items" :value="item.value" :selected="item.default">{{item.text}}</option></select>
|
||
|
|
<label>How Often?</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="form-floating mb-3" title="Enter a number of days, or an 'X' followed by a number of times.">
|
||
|
|
<input type="text" class="form-control" placeholder=" " v-model="inputs.DAYS" />
|
||
|
|
<label>How Long?</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-9">
|
||
|
|
<div v-if="preview" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre-wrap;">{{preview}}</div></div>
|
||
|
|
<div v-if="(options_test) && (options_test['CollSamp']) && (options_test['CollSamp'].text)" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre-wrap;">{{options_test['CollSamp'].text}}</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="btn-group-vertical mb-3" style="width: 100%;">
|
||
|
|
<button type="button" class="btn btn-primary" @click="e => $emit('submit', output)">Submit</button>
|
||
|
|
<button type="button" class="btn btn-danger" @click="e => $emit('cancel')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { debounce } from './util.mjs';
|
||
|
|
|
||
|
|
import ViewOrderableLookup from './ViewOrderableLookup.vue';
|
||
|
|
import Autocomplete from './Autocomplete.vue';
|
||
|
|
import DateTimePicker from './DateTimePicker.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
ViewOrderableLookup, Autocomplete, DateTimePicker
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
client: Object,
|
||
|
|
ien: String,
|
||
|
|
dlgdef: Object,
|
||
|
|
bldqrsp: Object,
|
||
|
|
modelValue: Object
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
'submit',
|
||
|
|
'cancel',
|
||
|
|
'update:modelValue'
|
||
|
|
],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
inputs: null,
|
||
|
|
options_facility: null,
|
||
|
|
options_test: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
mapping_START() {
|
||
|
|
if((this.inputs) && (this.inputs.COLLECT) && (this.options_facility)) {
|
||
|
|
var mapping = this.inputs.COLLECT == 'LC' ? this.options_facility['Lab Collection Times'] : this.inputs.COLLECT == 'WC' ? this.options_facility['Ward Collection Times'] : this.inputs.COLLECT == 'SP' ? this.options_facility['Send Patient Times'] : null;
|
||
|
|
if((mapping) && (mapping.items)) return mapping.items.reduce((acc, val) => (acc[val.text] = val.value.substring(1), acc), {});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
preview() {
|
||
|
|
if((this.options_test) && (this.inputs)) {
|
||
|
|
var res = [], inputs = this.inputs, x;
|
||
|
|
if(this.options_test['Test Name']) res.push(this.options_test['Test Name'].default);
|
||
|
|
if((inputs.SAMPLE) && (this.options_test['CollSamp']) && (x = this.options_test['CollSamp'].items.find(x => x.SampIEN == inputs.SAMPLE))) res.push(x.SampName.replace(/^\s+|\s+$/g, ''));
|
||
|
|
if((inputs.SPECIMEN) && (this.options_test['Specimens']) && (x = this.options_test['Specimens'].items.find(x => x.value == inputs.SPECIMEN))) res.push(x.text.replace(/^\s+|\s+$/g, ''));
|
||
|
|
if(inputs.COLLECT) res.push(inputs.COLLECT);
|
||
|
|
return res.join(' ');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
output() {
|
||
|
|
if((this.dlgdef) && (this.inputs)) {
|
||
|
|
var inputs = Object.assign({}, this.inputs);
|
||
|
|
if((this.mapping_START) && (inputs.START) && (this.mapping_START.hasOwnProperty(inputs.START))) inputs.START = this.mapping_START[inputs.START];
|
||
|
|
return this.dlgdef.reduce((acc, val) => (acc['"' + val.promptIEN + '","1"'] = inputs[val.promptID], acc), {});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$watch(
|
||
|
|
() => this.client,
|
||
|
|
async () => {
|
||
|
|
this.options_facility = this.client ? await this.client.ORWDLR32_DEF(0, 0) : null;
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
);
|
||
|
|
this.$watch(
|
||
|
|
() => (this.client, this.ien, this.dlgdef, {}),
|
||
|
|
async () => {
|
||
|
|
if((this.client) && (this.ien) && (this.dlgdef) && (this.bldqrsp)) {
|
||
|
|
this.inputs = this.dlgdef.reduce((acc, val) => (acc[val.promptID] = null, acc), {});
|
||
|
|
if((this.bldqrsp.ResponseID) && (this.bldqrsp.ResponseID != '0')) {
|
||
|
|
var loadrsp = await this.client.ORWDX_LOADRSP(this.bldqrsp.ResponseID, 0, 0);
|
||
|
|
if(loadrsp) Object.assign(this.inputs, loadrsp.reduce((acc, val) => (acc[val.promptID] = val.iValue, acc), {}));
|
||
|
|
}
|
||
|
|
} else this.inputs = null;
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
);
|
||
|
|
this.$watch(
|
||
|
|
() => (this.client, this.inputs && this.inputs.ORDERABLE, {}),
|
||
|
|
async () => {
|
||
|
|
this.options_test = (this.client) && (this.inputs) && (this.inputs.ORDERABLE) ? await this.client.ORWDLR32_LOAD(this.inputs.ORDERABLE) : null;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
this.$watch(
|
||
|
|
() => { return { dlgdef: this.dlgdef, inputs: this.inputs }; },
|
||
|
|
debounce(() => this.$emit('update:modelValue', this.output), 100),
|
||
|
|
{ deep: true }
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|