Conformance: processing time, waiting time, cycle time, showbox list done.

This commit is contained in:
chiayin
2023-08-22 12:48:58 +08:00
parent 66e09aa85c
commit bdbd506734
5 changed files with 247 additions and 43 deletions

View File

@@ -5,8 +5,8 @@
<p class="h2 pl-2 border-b mb-3">Sort</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">
<RadioButton v-model="selectedRadio" :inputId="index.toString()" :name="select" :value="act" @change="actRadioData" />
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
<RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
<label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div>
</div>
</div>
@@ -26,6 +26,7 @@ export default {
category: this.category,
task: this.selectedRadio,
});
this.$emit('selected-task', this.selectedRadio);
}
},
created() {

View File

@@ -12,7 +12,7 @@
<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"/>
<RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
</div>
</div>
@@ -28,7 +28,7 @@
<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" />
<RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" @change="changeRadioProcessScope"/>
<label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
</div>
</div>
@@ -36,7 +36,7 @@
<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" />
<RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" @change="changeRadioActSeqMore"/>
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
</div>
</div>
@@ -44,7 +44,7 @@
<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" />
<RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" @change="changeRadioActSeqFromTo"/>
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
</div>
</div>
@@ -107,9 +107,18 @@ export default {
this.selectedActSeqFromTo = 'From';
this.$emitter.emit('isRadioChange', true); // Radio 切換時,資料要清空
},
changeSeqRadio() {
changeRadioSeq() {
this.$emitter.emit('isRadioSeqChange',true);
}
},
changeRadioProcessScope() {
this.$emitter.emit('isRadioProcessScopeChange', true);
},
changeRadioActSeqMore() {
this.$emitter.emit('isRadioActSeqMoreChange', true);
},
changeRadioActSeqFromTo() {
this.$emitter.emit('isRadioActSeqFromToChange', true);
},
}
}
</script>

View File

@@ -3,48 +3,47 @@
<!-- Have activity -->
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
<!-- Activity sequence -->
<div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="conformanceStart" :category="'Start'" />
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" />
<div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="conformanceStart" :category="'Start'" class="w-1/2" />
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" class="w-1/2" />
</div>
<!-- actSeqDrag -->
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
<!-- Activity duration -->
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" />
<!-- Processing time -->
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="cfmPtEteStartData" :category="'cfmPtEteStart'" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="cfmPtEteEndData" :category="'cfmPtEteEnd'" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="cfmPtEteSEStartData" :category="'cfmPtEteSEStart'" @selected-task="selectStart" class="w-1/2" />
<ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="cfmPtEteSEEndData" :category="'cfmPtEteSEEnd'" @selected-task="selectEnd" class="w-1/2" />
</div>
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="data" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
<ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="cfmPtPStartData" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="cfmPtPEndData" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="cfmPtPSEStartData" class="w-1/2" :category="'cfmPtPSEStart'" @selected-task="selectStart" />
<ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="cfmPtPSEEndData" class="w-1/2" :category="'cfmPtPSEEnd'" @selected-task="selectEnd" />
</div>
<!-- Waiting time -->
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="cfmWtEteStartData" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="cfmWtEteEndData" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="cfmWtEteSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
<ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="cfmWtEteSEEndData" class="w-1/2" :category="'cfmWtEteSEEnd'" @selected-task="selectEnd" />
</div>
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="data" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
<ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="cfmWtPStartData" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="cfmWtPEndData" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="cfmWtPSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
<ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="cfmWtPSEEndData" class="w-1/2" :category="'cfmWtEteSEEnd'" @selected-task="selectEnd" />
</div>
<!-- Cycle time -->
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="cfmCtEteStartData" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="cfmCtEteEndData" />
<div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
<ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="cfmCtEteSEStartData" class="w-1/2" :category="'cfmCtEteSEStart'" @selected-task="selectStart" />
<ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="cfmCtEteSEEndData" class="w-1/2" :category="'cfmCtEteSEEnd'" @selected-task="selectEnd" />
</div>
</section>
</template>
<script>
@@ -60,9 +59,9 @@ export default {
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd } = storeToRefs(conformanceStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE } = storeToRefs(conformanceStore);
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd }
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
},
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitListSeq', 'isSubmitDurationData'],
components: {
@@ -73,7 +72,146 @@ export default {
data() {
return {
data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院'],
task: null,
isStartSelected: null,
isEndSelected: null,
}
},
computed: {
// Processing time
cfmPtEteStartData: function() {
return this.cfmPtEteStart.map(i => i.task);
},
cfmPtEteEndData: function() {
return this.cfmPtEteEnd.map(i => i.task);
},
cfmPtEteSEStartData: function() {
return this.isEndSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'end', this.task) : this.setTaskData(this.cfmPtEteSE, 'start');
},
cfmPtEteSEEndData: function() {
return this.isStartSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'start', this.task) : this.setTaskData(this.cfmPtEteSE, 'end');
},
cfmPtPStartData: function() {
return this.cfmPtPStart.map(i => i.task);
},
cfmPtPEndData: function() {
return this.cfmPtPEnd.map(i => i.task);
},
cfmPtPSEStartData: function() {
return this.isEndSelected ? this.setStartAndEndData(this.cfmPtPSE, 'end', this.task) : this.setTaskData(this.cfmPtPSE, 'start');
},
cfmPtPSEEndData: function() {
return this.isStartSelected ? this.setStartAndEndData(this.cfmPtPSE, 'start', this.task) : this.setTaskData(this.cfmPtPSE, 'end');
},
// Waiting time
cfmWtEteStartData: function() {
return this.cfmWtEteStart.map(i => i.task);
},
cfmWtEteEndData: function() {
return this.cfmWtEteEnd.map(i => i.task);
},
cfmWtEteSEStartData: function() {
return this.isEndSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'end', this.task) : this.setTaskData(this.cfmWtEteSE, 'start');
},
cfmWtEteSEEndData: function() {
return this.isStartSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'start', this.task) : this.setTaskData(this.cfmWtEteSE, 'end');
},
cfmWtPStartData: function() {
return this.cfmWtPStart.map(i => i.task);
},
cfmWtPEndData: function() {
return this.cfmWtPEnd.map(i => i.task);
},
cfmWtPSEStartData: function() {
return this.isEndSelected ? this.setStartAndEndData(this.cfmWtPSE, 'end', this.task) : this.setTaskData(this.cfmWtPSE, 'start');
},
cfmWtPSEEndData: function() {
return this.isStartSelected ? this.setStartAndEndData(this.cfmWtPSE, 'start', this.task) : this.setTaskData(this.cfmWtPSE, 'end');
},
// Cycle time
cfmCtEteStartData: function() {
return this.cfmCtEteStart.map(i => i.task);
},
cfmCtEteEndData: function() {
return this.cfmCtEteEnd.map(i => i.task);
},
cfmCtEteSEStartData: function() {
return this.isEndSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'end', this.task) : this.setTaskData(this.cfmCtEteSE, 'start');
},
cfmCtEteSEEndData: function() {
return this.isStartSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'start', this.task) : this.setTaskData(this.cfmCtEteSE, 'end');
},
},
methods: {
/**
* 設定 start and end 的 Radio Data
* @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
* @param {string} category start | end
* @returns {array}
*/
setTaskData(data, category) {
let newData = data.map(i => i[category]);
newData = [...new Set(newData)]; // Set 是一種集合型別,只會儲存獨特的值。
return newData;
},
/**
* 重新設定連動的 start and end 的 Radio Data
* @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
* @param {string} category start | end
* @param {string} task task
* @returns {array}
*/
setStartAndEndData(data, category, task) {
let oppositeCategory = '';
category === 'start' ? oppositeCategory = 'end' : oppositeCategory = 'start';
let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]);
newData = [...new Set(newData)];
return newData;
},
selectStart(e) {
if(this.isStartSelected === null || this.isStartSelected === true){
this.isStartSelected = true;
this.isEndSelected = false;
this.task = e;
};
},
selectEnd(e) {
if(this.isEndSelected === null || this.isEndSelected === true){
this.isEndSelected = true;
this.isStartSelected = false;
this.task = e;
}
},
},
created() {
this.$emitter.on('isRadioChange', (data) => {
if(data) {
this.task = null;
this.isStartSelected = null;
this.isEndSelected = null;
};
});
this.$emitter.on('isRadioProcessScopeChange', (data) => {
if(data) {
this.task = null;
this.isStartSelected = null;
this.isEndSelected = null;
};
});
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
if(data) {
this.task = null;
this.isStartSelected = null;
this.isEndSelected = null;
};
});
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
if(data) {
this.task = null;
this.isStartSelected = null;
this.isEndSelected = null;
};
});
}
}
</script>