122 lines
3.8 KiB
Vue
122 lines
3.8 KiB
Vue
<template>
|
|
<div class="maintenance-schedule-workflow">
|
|
<div class="step-header mb-4">
|
|
<h4 class="mb-2">{{ getCurrentStepName() }}</h4>
|
|
<p class="text-muted">{{ getCurrentStepDescription() }}</p>
|
|
</div>
|
|
|
|
<!-- Step Progress -->
|
|
<div class="progress mb-4" style="height: 8px;">
|
|
<div
|
|
class="progress-bar"
|
|
:style="{ width: (parseInt(step) / meta.stepDefinitions.length) * 100 + '%' }"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Generic Step Content -->
|
|
<div class="card mb-4">
|
|
<div class="card-body text-center py-5">
|
|
<b-icon-tools class="text-muted mb-3" style="font-size: 3rem;"></b-icon-tools>
|
|
<h5 class="text-muted">{{ getCurrentStepName() }}</h5>
|
|
<p class="text-muted">Implementation coming soon...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="step-navigation d-flex justify-content-between">
|
|
<button
|
|
v-if="parseInt(step) > 1"
|
|
class="btn btn-outline-secondary"
|
|
@click="$emit('prev')"
|
|
>
|
|
<b-icon-chevron-left class="me-1"></b-icon-chevron-left>
|
|
Previous
|
|
</button>
|
|
<div v-else></div>
|
|
|
|
<button
|
|
v-if="parseInt(step) < meta.stepDefinitions.length"
|
|
class="btn btn-primary"
|
|
@click="$emit('next')"
|
|
>
|
|
Next
|
|
<b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="btn btn-success"
|
|
@click="$emit('complete')"
|
|
>
|
|
Complete
|
|
<b-icon-check-circle class="ms-1"></b-icon-check-circle>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BIcons from 'bootstrap-icons-vue';
|
|
|
|
export default {
|
|
name: 'MaintenanceScheduleWorkflow',
|
|
meta: {
|
|
id: 'maintenance-schedule',
|
|
name: 'Maintenance Schedule',
|
|
category: 'Tool Maintenance',
|
|
description: 'Create and execute maintenance schedules for tools and equipment.',
|
|
icons: ['b-icon-tools', 'b-icon-calendar'],
|
|
estimatedDuration: '30 minutes',
|
|
stepDefinitions: [
|
|
{ step: '1', name: 'Identify Equipment', description: 'Select tools and equipment for maintenance' },
|
|
{ step: '2', name: 'Create Schedule', description: 'Define maintenance intervals and tasks' },
|
|
{ step: '3', name: 'Assign Responsibilities', description: 'Assign maintenance tasks to users' },
|
|
{ step: '4', name: 'Activate Schedule', description: 'Enable automatic maintenance reminders' }
|
|
],
|
|
getInitialPayload() {
|
|
return {
|
|
schedule_config: {
|
|
frequency: 'monthly'
|
|
}
|
|
};
|
|
}
|
|
},
|
|
components: {
|
|
...BIcons
|
|
},
|
|
props: {
|
|
workflowInstance: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
step: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
payload: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
methods: {
|
|
getCurrentStepName() {
|
|
const stepDef = this.meta.stepDefinitions.find(s => s.step === this.step);
|
|
return stepDef ? stepDef.name : `Step ${this.step}`;
|
|
},
|
|
getCurrentStepDescription() {
|
|
const stepDef = this.meta.stepDefinitions.find(s => s.step === this.step);
|
|
return stepDef ? stepDef.description : '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.maintenance-schedule-workflow {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.step-navigation {
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
|