58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-text">🔎</span>
|
||
|
|
<input class="form-control" v-model="query_raw" />
|
||
|
|
</div>
|
||
|
|
<div style="max-height: 30em; overflow-y: auto;">
|
||
|
|
<table class="table table-striped" style="font-family: monospace;" v-if="(resultset) && (resultset.length > 0)">
|
||
|
|
<thead>
|
||
|
|
<tr><th>DFN</th><th>Name</th><th>PID</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="row in resultset">
|
||
|
|
<td>{{row.dfn}}</td>
|
||
|
|
<td><router-link :to="'/patient/' + row.dfn">{{row.name}}</router-link></td>
|
||
|
|
<td>{{row.pid}}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { debounce } from './util.mjs';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
client: Object,
|
||
|
|
selection: {}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
resultset: [],
|
||
|
|
query_raw: '',
|
||
|
|
query_view: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
query_raw(value) {
|
||
|
|
this.query_sync(value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.query_sync = debounce(async function(value) {
|
||
|
|
this.query_view = value = value.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');
|
||
|
|
this.resultset = value ? (await this.client.ORWPT16_LOOKUP(value)) : [];
|
||
|
|
}, 500);
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|