Conformance: Have activity Layout done.
This commit is contained in:
chiayin committed
1 parent
147c9b16cf
commit
d976bc529d
16 files changed
+565
-36
No files matched your search
@@ -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>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="border-t border-neutral-300 p-4 mt-4">
|
||||
<!-- Have activity -->
|
||||
<div class=" space-y-2">
|
||||
<div class="flex justify-start items-center" v-for="(act, index) in data" :key="index">
|
||||
<span class="material-symbols-outlined text-primary mr-2">
|
||||
check_circle
|
||||
</span>
|
||||
<p class="px-2 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: ['到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院到院', '到院到院到院到Line truncated
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -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