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:
@@ -69,110 +69,118 @@
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useMapPathStore } from '@/stores/mapPathStore';
|
||||
import { mapState, mapActions, } from 'pinia';
|
||||
export default {
|
||||
props: {
|
||||
sidebarView: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectFrequency: [
|
||||
{ value:"total", label:"Total", disabled:false, },
|
||||
{ value:"rel_freq", label:"Relative", disabled:false, },
|
||||
{ value:"average", label:"Average", disabled:false, },
|
||||
{ value:"median", label:"Median", disabled:false, },
|
||||
{ value:"max", label:"Max", disabled:false, },
|
||||
{ value:"min", label:"Min", disabled:false, },
|
||||
{ value:"cases", label:"Number of cases", disabled:false, },
|
||||
],
|
||||
selectDuration:[
|
||||
{ value:"total", label:"Total", disabled:false, },
|
||||
{ value:"rel_duration", label:"Relative", disabled:false, },
|
||||
{ value:"average", label:"Average", disabled:false, },
|
||||
{ value:"median", label:"Median", disabled:false, },
|
||||
{ value:"max", label:"Max", disabled:false, },
|
||||
{ value:"min", label:"Min", disabled:false, },
|
||||
],
|
||||
curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
|
||||
mapType: 'processMap', // processMap | bpmn
|
||||
dataLayerType: null, // freq | duration
|
||||
dataLayerOption: null,
|
||||
selectedFreq: '',
|
||||
selectedDuration: '',
|
||||
rank: 'LR', // 直向 TB | 橫向 LR
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMapPathStore, ['isBPMNOn']),
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* switch map type
|
||||
* @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
|
||||
*/
|
||||
switchMapType(type) {
|
||||
this.mapType = type;
|
||||
this.$emit('switch-map-type', this.mapType);
|
||||
},
|
||||
/**
|
||||
* switch curve style
|
||||
* @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
|
||||
*/
|
||||
switchCurveStyles(style) {
|
||||
this.curveStyle = style;
|
||||
this.$emit('switch-curve-styles', this.curveStyle);
|
||||
},
|
||||
/**
|
||||
* switch rank
|
||||
* @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
|
||||
*/
|
||||
switchRank(rank) {
|
||||
this.rank = rank;
|
||||
this.$emit('switch-rank', this.rank);
|
||||
},
|
||||
/**
|
||||
* switch Data Layoer Type or Option.
|
||||
* @param {string} e 切換時傳入的選項
|
||||
* @param {string} type 'freq' | 'duration'，可傳入以上任一。
|
||||
*/
|
||||
switchDataLayerType(e, type){
|
||||
let value = '';
|
||||
|
||||
if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
|
||||
switch (type) {
|
||||
case 'freq':
|
||||
value = value || this.selectedFreq || 'total';
|
||||
this.dataLayerType = type;
|
||||
this.dataLayerOption = value;
|
||||
this.selectedFreq = value;
|
||||
break;
|
||||
case 'duration':
|
||||
value = value || this.selectedDuration || 'total';
|
||||
this.dataLayerType = type;
|
||||
this.dataLayerOption = value;
|
||||
this.selectedDuration = value;
|
||||
break;
|
||||
}
|
||||
this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
|
||||
},
|
||||
onProcessMapClick() {
|
||||
this.setIsBPMNOn(false);
|
||||
this.switchMapType('processMap');
|
||||
},
|
||||
onBPMNClick() {
|
||||
this.setIsBPMNOn(true);
|
||||
this.switchMapType('bpmn');
|
||||
},
|
||||
...mapActions(useMapPathStore, ['setIsBPMNOn',]),
|
||||
defineProps({
|
||||
sidebarView: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
mounted() {
|
||||
this.dataLayerType = 'freq';
|
||||
this.dataLayerOption = 'total';
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'switch-map-type',
|
||||
'switch-curve-styles',
|
||||
'switch-rank',
|
||||
'switch-data-layer-type',
|
||||
]);
|
||||
|
||||
const mapPathStore = useMapPathStore();
|
||||
const { isBPMNOn } = storeToRefs(mapPathStore);
|
||||
|
||||
const selectFrequency = ref([
|
||||
{ value:"total", label:"Total", disabled:false, },
|
||||
{ value:"rel_freq", label:"Relative", disabled:false, },
|
||||
{ value:"average", label:"Average", disabled:false, },
|
||||
{ value:"median", label:"Median", disabled:false, },
|
||||
{ value:"max", label:"Max", disabled:false, },
|
||||
{ value:"min", label:"Min", disabled:false, },
|
||||
{ value:"cases", label:"Number of cases", disabled:false, },
|
||||
]);
|
||||
const selectDuration = ref([
|
||||
{ value:"total", label:"Total", disabled:false, },
|
||||
{ value:"rel_duration", label:"Relative", disabled:false, },
|
||||
{ value:"average", label:"Average", disabled:false, },
|
||||
{ value:"median", label:"Median", disabled:false, },
|
||||
{ value:"max", label:"Max", disabled:false, },
|
||||
{ value:"min", label:"Min", disabled:false, },
|
||||
]);
|
||||
const curveStyle = ref('unbundled-bezier'); // unbundled-bezier | taxi
|
||||
const mapType = ref('processMap'); // processMap | bpmn
|
||||
const dataLayerType = ref(null); // freq | duration
|
||||
const dataLayerOption = ref(null);
|
||||
const selectedFreq = ref('');
|
||||
const selectedDuration = ref('');
|
||||
const rank = ref('LR'); // 直向 TB | 橫向 LR
|
||||
|
||||
/**
|
||||
* switch map type
|
||||
* @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
|
||||
*/
|
||||
function switchMapType(type) {
|
||||
mapType.value = type;
|
||||
emit('switch-map-type', mapType.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* switch curve style
|
||||
* @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
|
||||
*/
|
||||
function switchCurveStyles(style) {
|
||||
curveStyle.value = style;
|
||||
emit('switch-curve-styles', curveStyle.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* switch rank
|
||||
* @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
|
||||
*/
|
||||
function switchRank(rankValue) {
|
||||
rank.value = rankValue;
|
||||
emit('switch-rank', rank.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* switch Data Layoer Type or Option.
|
||||
* @param {string} e 切換時傳入的選項
|
||||
* @param {string} type 'freq' | 'duration'，可傳入以上任一。
|
||||
*/
|
||||
function switchDataLayerType(e, type) {
|
||||
let value = '';
|
||||
|
||||
if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
|
||||
switch (type) {
|
||||
case 'freq':
|
||||
value = value || selectedFreq.value || 'total';
|
||||
dataLayerType.value = type;
|
||||
dataLayerOption.value = value;
|
||||
selectedFreq.value = value;
|
||||
break;
|
||||
case 'duration':
|
||||
value = value || selectedDuration.value || 'total';
|
||||
dataLayerType.value = type;
|
||||
dataLayerOption.value = value;
|
||||
selectedDuration.value = value;
|
||||
break;
|
||||
}
|
||||
emit('switch-data-layer-type', dataLayerType.value, dataLayerOption.value);
|
||||
}
|
||||
|
||||
function onProcessMapClick() {
|
||||
mapPathStore.setIsBPMNOn(false);
|
||||
switchMapType('processMap');
|
||||
}
|
||||
|
||||
function onBPMNClick() {
|
||||
mapPathStore.setIsBPMNOn(true);
|
||||
switchMapType('bpmn');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
dataLayerType.value = 'freq';
|
||||
dataLayerOption.value = 'total';
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user