Conformance: Have activity Layout done.
This commit is contained in:
chiayin
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<p class="h2 pl-2">Activity list</p>
|
||||
<div class="h-[calc(100%_-_48px)]">
|
||||
<p class="h2 pl-2 border-b mb-3">Activity</p>
|
||||
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
|
||||
<div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
|
||||
<Checkbox v-model="actList" :inputId="index" name="actList" :value="act" />
|
||||
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}{{ index }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
actList: null,
|
||||
data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<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" />
|
||||
<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" />
|
||||
<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'">
|
||||
<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' || 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>
|
||||
</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 } = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// selectedRuleType: '',
|
||||
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'},
|
||||
],
|
||||
// selectedActivitySequence: '',
|
||||
activitySequence: [
|
||||
{id: 1, name: 'Start & End'},
|
||||
{id: 2, name: 'Sequence'},
|
||||
],
|
||||
// selectedMode: '',
|
||||
mode: [
|
||||
{id: 1, name: 'Directly follows'},
|
||||
{id: 2, name: 'Eventually follows'},
|
||||
{id: 3, name: 'Short loop(s)'},
|
||||
{id: 4, name: 'Self loop(s)'},
|
||||
],
|
||||
// selectedProcessScope: '',
|
||||
processScope: [
|
||||
{id: 1, name: 'End to end'},
|
||||
{id: 2, name: 'Partial'},
|
||||
],
|
||||
// selectedActSeqMore: '',
|
||||
actSeqMore: [
|
||||
{id: 1, name: 'All'},
|
||||
{id: 2, name: 'Start'},
|
||||
{id: 3, name: 'End'},
|
||||
{id: 4, name: 'Start & End '},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<section class="animate-fadein w-full h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
|
||||
<!-- {{ selectedRuleType }}
|
||||
{{ selectedActivitySequence }}
|
||||
{{ selectedMode }}
|
||||
{{ selectedProcessScope }}
|
||||
{{ selectedActSeqMore }} -->
|
||||
<ActList v-if="selectedRuleType === 'Have activity'"></ActList>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import LoadingStore from '@/stores/loading.js';
|
||||
import ConformanceStore from '@/stores/conformance.js';
|
||||
import ActList from './ActList.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loadingStore = LoadingStore();
|
||||
const conformanceStore = ConformanceStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
|
||||
|
||||
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
|
||||
},
|
||||
components: {
|
||||
ActList,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user