116 lines
4.8 KiB
Vue
116 lines
4.8 KiB
Vue
<template>
|
|
<section class="space-y-2 text-sm">
|
|
<!-- Rule Type -->
|
|
<div>
|
|
<p class="h2">Rule Type</p>
|
|
<div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
|
|
<label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
|
|
</div>
|
|
</div>
|
|
<!-- Activity Sequence (2 item) -->
|
|
<div v-show="selectedRuleType === 'Activity sequence'">
|
|
<p class="h2">Activity Sequence</p>
|
|
<div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeSeqRadio"/>
|
|
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
|
</div>
|
|
</div>
|
|
<!-- Mode -->
|
|
<div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
|
|
<p class="h2">Mode</p>
|
|
<div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
|
|
<label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
|
|
</div>
|
|
</div>
|
|
<!-- Process Scope -->
|
|
<div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'">
|
|
<p class="h2">Process Scope</p>
|
|
<div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" />
|
|
<label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
|
|
</div>
|
|
</div>
|
|
<!-- Activity Sequence (4 item) -->
|
|
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'">
|
|
<p class="h2">Activity Sequence</p>
|
|
<div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" />
|
|
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
|
</div>
|
|
</div>
|
|
<!-- Activity Sequence (3 item) -->
|
|
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')">
|
|
<p class="h2">Activity Sequence</p>
|
|
<div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
|
|
<RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" />
|
|
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import { storeToRefs } from 'pinia';
|
|
import ConformanceStore from '@/stores/conformance.js';
|
|
|
|
export default {
|
|
setup() {
|
|
const conformanceStore = ConformanceStore();
|
|
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
|
|
|
|
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
|
|
},
|
|
data() {
|
|
return {
|
|
ruleType: [
|
|
{id: 1, name: 'Have activity'},
|
|
{id: 2, name: 'Activity sequence'},
|
|
{id: 3, name: 'Activity duration'},
|
|
{id: 4, name: 'Processing time'},
|
|
{id: 5, name: 'Waiting time'},
|
|
{id: 6, name: 'Cycle time'},
|
|
],
|
|
activitySequence: [
|
|
{id: 1, name: 'Start & End'},
|
|
{id: 2, name: 'Sequence'},
|
|
],
|
|
mode: [
|
|
{id: 1, name: 'Directly follows'},
|
|
{id: 2, name: 'Eventually follows'},
|
|
{id: 3, name: 'Short loop(s)'},
|
|
{id: 4, name: 'Self loop(s)'},
|
|
],
|
|
processScope: [
|
|
{id: 1, name: 'End to end'},
|
|
{id: 2, name: 'Partial'},
|
|
],
|
|
actSeqMore: [
|
|
{id: 1, name: 'All'},
|
|
{id: 2, name: 'Start'},
|
|
{id: 3, name: 'End'},
|
|
{id: 4, name: 'Start & End'},
|
|
],
|
|
actSeqFromTo: [
|
|
{id: 1, name: 'From'},
|
|
{id: 2, name: 'To'},
|
|
{id: 3, name: 'From & To'},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
changeRadio() {
|
|
this.selectedActivitySequence = 'Start & End';
|
|
this.selectedMode = 'Directly follows';
|
|
this.selectedProcessScope = 'End to end';
|
|
this.selectedActSeqMore = 'All';
|
|
this.selectedActSeqFromTo = 'From';
|
|
this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
|
|
},
|
|
changeSeqRadio() {
|
|
this.$emitter.emit('isRadioSeqChange',true);
|
|
}
|
|
}
|
|
}
|
|
</script>
|