119 lines
5.0 KiB
Vue
119 lines
5.0 KiB
Vue
|
<template>
|
||
|
|
<div v-if="prompts">
|
||
|
|
<div class="row">
|
||
|
|
<template v-for="item in prompts">
|
||
|
|
<template v-if="(item.hid == '1') || (item.type == 'H')"></template>
|
||
|
|
<div v-else-if="(odslct) && (odslct[item.id]) && (odslct[item.id].items)" class="col-12">
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
|
||
|
|
<ul class="list-group list-group-flush" style="max-height: 25vh; overflow-y: auto;"><li v-for="item in odslct[item.id].items" class="list-group-item"><input class="form-check-input me-1" type="checkbox" /> {{item}}</li></ul>
|
||
|
|
<div v-if="item.help" class="card-footer form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="item.type == 'P'" class="col-12">
|
||
|
|
<div class="card mb-3">
|
||
|
|
<ViewLocationLookup :client="client" :dfn="dfn" :label="item.prompt.replace(/\:\s*$/, '')" />
|
||
|
|
<div v-if="item.help" class="form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="item.type == 'Y'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input class="form-check-input" type="checkbox" role="switch" v-model="inputs[item.id]" />
|
||
|
|
<label class="form-check-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
|
||
|
|
<div v-if="item.help" class="form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="item.type == 'R'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
|
||
|
|
<DateTimePicker dateonly v-model="inputs[item.id]" />
|
||
|
|
<div v-if="item.help" class="form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="item.type == 'N'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
|
||
|
|
<div class="form-floating mb-3">
|
||
|
|
<input type="number" class="form-control" :placeholder="item.default || ' '" v-model="inputs[item.id]" />
|
||
|
|
<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
|
||
|
|
<div v-if="item.help" class="form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="item.type == 'W'" class="col-12">
|
||
|
|
<div class="card mb-3" style="background-color: #fdfbd7;">
|
||
|
|
<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
|
||
|
|
<div class="card-body" style="font-family: monospace; white-space: pre;">{{item.detail}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="col col-12">
|
||
|
|
<div class="form-floating mb-3">
|
||
|
|
<input type="text" class="form-control" :placeholder="item.default || ' '" :disabled="item.type == 'P'" v-model="inputs[item.id]" />
|
||
|
|
<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
|
||
|
|
<div v-if="item.help" class="form-text">{{item.help}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div v-if="(odslct) && (odslct.Info) && (odslct.Info.text)" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre;">{{odslct.Info.text}}</div></div>
|
||
|
|
<div class="btn-group mb-3">
|
||
|
|
<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>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ViewLocationLookup from './ViewLocationLookup.vue';
|
||
|
|
import DateTimePicker from './DateTimePicker.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
ViewLocationLookup, DateTimePicker
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
client: Object,
|
||
|
|
ien: String,
|
||
|
|
dfn: String,
|
||
|
|
location_ien: String,
|
||
|
|
dlgname: Object,
|
||
|
|
dlgdef: Object,
|
||
|
|
modelValue: Object
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
'submit',
|
||
|
|
'cancel',
|
||
|
|
'update:modelValue'
|
||
|
|
],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
prompts: null,
|
||
|
|
inputs: null,
|
||
|
|
odslct: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
output() {
|
||
|
|
if((this.dlgdef) && (this.prompts) && (this.inputs)) {
|
||
|
|
return this.dlgdef.reduce((acc, val) => (acc['"' + val.promptIEN + '","1"'] = this.inputs[val.promptID] || this.prompts[val.promptID].idflt, acc), {});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$watch(
|
||
|
|
() => (this.client, this.ien, this.dlgdef, {}),
|
||
|
|
async () => {
|
||
|
|
var bldqrsp, loadrsp;
|
||
|
|
if((this.client) && (this.ien) && (this.dlgdef) && (bldqrsp = (await this.client.ORWDXM1_BLDQRSP(this.ien, '^^^^^^;;;^^^^', 0, 0))[0])) {
|
||
|
|
this.inputs = this.dlgdef.reduce((acc, val) => (acc[val.promptID] = null, acc), {});
|
||
|
|
this.prompts = await client.ORWDXM_PROMPTS(this.dlgname.BaseDialogIEN);
|
||
|
|
if(this.prompts) Object.assign(this.inputs, this.prompts.reduce((acc, val) => (acc[val.id] = val.default, acc), {}));
|
||
|
|
if((bldqrsp.ResponseID) && (bldqrsp.ResponseID != '0')) {
|
||
|
|
loadrsp = await this.client.ORWDX_LOADRSP(bldqrsp.ResponseID, 0, 0);
|
||
|
|
if(loadrsp) Object.assign(this.inputs, loadrsp.reduce((acc, val) => (acc[val.promptID] = val.iValue, acc), {}));
|
||
|
|
}
|
||
|
|
} else this.prompts = this.inputs = null;
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|