Migrate all Vue components from Options API to <script setup>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,264 +1,258 @@
|
||||
<template>
|
||||
<div class="px-4 text-sm">
|
||||
<!-- Have activity -->
|
||||
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
|
||||
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="state.containstTasksData" :select="isSubmitTask"></ResultCheck>
|
||||
<!-- Activity sequence -->
|
||||
<ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="state.selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="state.selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
||||
<!-- Activity duration -->
|
||||
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
|
||||
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="state.durationData" :select="isSubmitDurationData"></ResultCheck>
|
||||
<!-- Processing time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
|
||||
<!-- Waiting time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
|
||||
<!-- Cycle time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
|
||||
import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
|
||||
import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
|
||||
},
|
||||
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE'],
|
||||
components: {
|
||||
ResultCheck,
|
||||
ResultArrow,
|
||||
ResultDot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
containstTasksData: null,
|
||||
startEndData: null,
|
||||
selectCfmSeqStart: null,
|
||||
selectCfmSeqEnd: null,
|
||||
selectCfmSeqDirectly: [],
|
||||
selectCfmSeqEventually: [],
|
||||
durationData: null,
|
||||
selectCfmPtEteStart: null, // Processing time
|
||||
selectCfmPtEteEnd: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPStart: null,
|
||||
selectCfmPtPEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteStart: null, // Waiting time
|
||||
selectCfmWtEteEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPStart: null,
|
||||
selectCfmWtPEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteStart: null, // Cycle time
|
||||
selectCfmCtEteEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
startAndEndIsReset: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectCfmSeqSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
|
||||
if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmPtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
|
||||
if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmPtPSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart);
|
||||
if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmWtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart);
|
||||
if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmWtPSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart);
|
||||
if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmCtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart);
|
||||
if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
reset() {
|
||||
this.containstTasksData = null;
|
||||
this.startEndData = null;
|
||||
this.selectCfmSeqStart = null;
|
||||
this.selectCfmSeqEnd = null;
|
||||
this.selectCfmSeqDirectly = [];
|
||||
this.selectCfmSeqEventually = [];
|
||||
this.durationData = null;
|
||||
this.selectCfmPtEteStart = null;
|
||||
this.selectCfmPtEteEnd = null;
|
||||
this.selectCfmPtEteSEStart = null;
|
||||
this.selectCfmPtEteSEEnd = null;
|
||||
this.selectCfmPtPStart = null;
|
||||
this.selectCfmPtPEnd = null;
|
||||
this.selectCfmPtPSEStart = null;
|
||||
this.selectCfmPtPSEEnd = null;
|
||||
this.selectCfmWtEteStart = null; // Waiting time
|
||||
this.selectCfmWtEteEnd = null;
|
||||
this.selectCfmWtEteSEStart = null;
|
||||
this.selectCfmWtEteSEEnd = null;
|
||||
this.selectCfmWtPStart = null;
|
||||
this.selectCfmWtPEnd = null;
|
||||
this.selectCfmWtPSEStart = null;
|
||||
this.selectCfmWtPSEEnd = null;
|
||||
this.selectCfmCtEteStart = null; // Cycle time
|
||||
this.selectCfmCtEteEnd = null;
|
||||
this.selectCfmCtEteSEStart = null;
|
||||
this.selectCfmCtEteSEEnd = null;
|
||||
this.startAndEndIsReset = true;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$emitter.on('actListData', (data) => {
|
||||
this.containstTasksData = data;
|
||||
});
|
||||
this.$emitter.on('actRadioData', (newData) => {
|
||||
const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
|
||||
const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE']);
|
||||
|
||||
const categoryMapping = {
|
||||
'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
|
||||
'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
|
||||
'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
|
||||
'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
|
||||
'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
|
||||
'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
|
||||
'cfmPtPStart': ['From', 'selectCfmPtPStart'],
|
||||
'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
|
||||
'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
|
||||
'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
|
||||
'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
|
||||
'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
|
||||
'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
|
||||
'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
|
||||
'cfmWtPStart': ['From', 'selectCfmWtPStart'],
|
||||
'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
|
||||
'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
|
||||
'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
|
||||
'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
|
||||
'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
|
||||
'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
|
||||
'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
|
||||
};
|
||||
const state = reactive({
|
||||
containstTasksData: null,
|
||||
startEndData: null,
|
||||
selectCfmSeqStart: null,
|
||||
selectCfmSeqEnd: null,
|
||||
selectCfmSeqDirectly: [],
|
||||
selectCfmSeqEventually: [],
|
||||
durationData: null,
|
||||
selectCfmPtEteStart: null, // Processing time
|
||||
selectCfmPtEteEnd: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPStart: null,
|
||||
selectCfmPtPEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteStart: null, // Waiting time
|
||||
selectCfmWtEteEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPStart: null,
|
||||
selectCfmWtPEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteStart: null, // Cycle time
|
||||
selectCfmCtEteEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
startAndEndIsReset: false,
|
||||
});
|
||||
|
||||
const updateSelection = (key, mainSelector, secondarySelector) => {
|
||||
if (this[mainSelector]) {
|
||||
if (data.task !== this[mainSelector]) this[secondarySelector] = null;
|
||||
}
|
||||
data.category = categoryMapping[key][0];
|
||||
this[mainSelector] = data;
|
||||
};
|
||||
const selectCfmSeqSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
|
||||
if(state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
if (categoryMapping[data.category]) {
|
||||
const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
|
||||
if (secondarySelector) {
|
||||
updateSelection(data.category, mainSelector, secondarySelector);
|
||||
} else {
|
||||
data.category = category;
|
||||
this[mainSelector] = [data];
|
||||
}
|
||||
} else if (this.selectedRuleType === 'Activity duration') {
|
||||
this.durationData = [data.task];
|
||||
}
|
||||
});
|
||||
this.$emitter.on('getListSequence', (data) => {
|
||||
switch (data.category) {
|
||||
case 'cfmSeqDirectly':
|
||||
this.selectCfmSeqDirectly = data.task;
|
||||
break;
|
||||
case 'cfmSeqEventually':
|
||||
this.selectCfmSeqEventually = data.task;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.reset();
|
||||
});
|
||||
// Radio 切換時，資料要清空
|
||||
this.$emitter.on('isRadioChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
},
|
||||
const selectCfmPtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
|
||||
if(state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmPtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
|
||||
if(state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmWtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
|
||||
if(state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmWtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
|
||||
if(state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmCtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
|
||||
if(state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
function reset() {
|
||||
state.containstTasksData = null;
|
||||
state.startEndData = null;
|
||||
state.selectCfmSeqStart = null;
|
||||
state.selectCfmSeqEnd = null;
|
||||
state.selectCfmSeqDirectly = [];
|
||||
state.selectCfmSeqEventually = [];
|
||||
state.durationData = null;
|
||||
state.selectCfmPtEteStart = null;
|
||||
state.selectCfmPtEteEnd = null;
|
||||
state.selectCfmPtEteSEStart = null;
|
||||
state.selectCfmPtEteSEEnd = null;
|
||||
state.selectCfmPtPStart = null;
|
||||
state.selectCfmPtPEnd = null;
|
||||
state.selectCfmPtPSEStart = null;
|
||||
state.selectCfmPtPSEEnd = null;
|
||||
state.selectCfmWtEteStart = null; // Waiting time
|
||||
state.selectCfmWtEteEnd = null;
|
||||
state.selectCfmWtEteSEStart = null;
|
||||
state.selectCfmWtEteSEEnd = null;
|
||||
state.selectCfmWtPStart = null;
|
||||
state.selectCfmWtPEnd = null;
|
||||
state.selectCfmWtPSEStart = null;
|
||||
state.selectCfmWtPSEEnd = null;
|
||||
state.selectCfmCtEteStart = null; // Cycle time
|
||||
state.selectCfmCtEteEnd = null;
|
||||
state.selectCfmCtEteSEStart = null;
|
||||
state.selectCfmCtEteSEEnd = null;
|
||||
state.startAndEndIsReset = true;
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('actListData', (data) => {
|
||||
state.containstTasksData = data;
|
||||
});
|
||||
emitter.on('actRadioData', (newData) => {
|
||||
const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
|
||||
|
||||
const categoryMapping = {
|
||||
'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
|
||||
'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
|
||||
'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
|
||||
'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
|
||||
'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
|
||||
'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
|
||||
'cfmPtPStart': ['From', 'selectCfmPtPStart'],
|
||||
'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
|
||||
'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
|
||||
'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
|
||||
'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
|
||||
'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
|
||||
'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
|
||||
'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
|
||||
'cfmWtPStart': ['From', 'selectCfmWtPStart'],
|
||||
'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
|
||||
'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
|
||||
'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
|
||||
'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
|
||||
'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
|
||||
'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
|
||||
'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
|
||||
};
|
||||
|
||||
const updateSelection = (key, mainSelector, secondarySelector) => {
|
||||
if (state[mainSelector]) {
|
||||
if (data.task !== state[mainSelector]) state[secondarySelector] = null;
|
||||
}
|
||||
data.category = categoryMapping[key][0];
|
||||
state[mainSelector] = data;
|
||||
};
|
||||
|
||||
if (categoryMapping[data.category]) {
|
||||
const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
|
||||
if (secondarySelector) {
|
||||
updateSelection(data.category, mainSelector, secondarySelector);
|
||||
} else {
|
||||
data.category = category;
|
||||
state[mainSelector] = [data];
|
||||
}
|
||||
} else if (selectedRuleType.value === 'Activity duration') {
|
||||
state.durationData = [data.task];
|
||||
}
|
||||
});
|
||||
emitter.on('getListSequence', (data) => {
|
||||
switch (data.category) {
|
||||
case 'cfmSeqDirectly':
|
||||
state.selectCfmSeqDirectly = data.task;
|
||||
break;
|
||||
case 'cfmSeqEventually':
|
||||
state.selectCfmSeqEventually = data.task;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
emitter.on('reset', (data) => {
|
||||
reset();
|
||||
});
|
||||
// Radio 切換時，資料要清空
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.disc) {
|
||||
|
||||
Reference in New Issue
Block a user