36a44848d2
- ComponentHierarchy.vue : Affichage hiérarchique des composants - ComponentItem.vue : Affichage d'un composant individuel - CustomFieldsDisplay.vue : Affichage des champs personnalisés - PieceItem.vue : Affichage des pièces de machines - Support de l'affichage en lecture seule et édition - Gestion des relations parent-enfant entre composants
135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<template>
|
|
<div v-if="customFields && customFields.length > 0" class="space-y-4">
|
|
<h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div
|
|
v-for="field in customFields"
|
|
:key="field.id"
|
|
class="form-control"
|
|
>
|
|
<label class="label">
|
|
<span class="label-text">{{ field.name }}</span>
|
|
<span v-if="field.required" class="label-text-alt text-error">*</span>
|
|
</label>
|
|
|
|
<!-- Champ de type TEXT -->
|
|
<input
|
|
v-if="field.type === 'text'"
|
|
v-model="fieldValues[field.id]"
|
|
type="text"
|
|
:placeholder="field.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="field.required"
|
|
@blur="updateCustomFieldValue(field.id)"
|
|
/>
|
|
|
|
<!-- Champ de type NUMBER -->
|
|
<input
|
|
v-else-if="field.type === 'number'"
|
|
v-model="fieldValues[field.id]"
|
|
type="number"
|
|
:placeholder="field.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="field.required"
|
|
@blur="updateCustomFieldValue(field.id)"
|
|
/>
|
|
|
|
<!-- Champ de type SELECT -->
|
|
<select
|
|
v-else-if="field.type === 'select'"
|
|
v-model="fieldValues[field.id]"
|
|
class="select select-bordered select-sm"
|
|
:required="field.required"
|
|
@change="updateCustomFieldValue(field.id)"
|
|
>
|
|
<option value="">{{ field.defaultValue || 'Sélectionner...' }}</option>
|
|
<option
|
|
v-for="option in field.options"
|
|
:key="option"
|
|
:value="option"
|
|
>
|
|
{{ option }}
|
|
</option>
|
|
</select>
|
|
|
|
<!-- Champ de type BOOLEAN -->
|
|
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
|
|
<input
|
|
v-model="fieldValues[field.id]"
|
|
type="checkbox"
|
|
class="checkbox checkbox-sm"
|
|
:checked="fieldValues[field.id] === 'true'"
|
|
@change="updateCustomFieldValue(field.id)"
|
|
/>
|
|
<span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
|
|
</div>
|
|
|
|
<!-- Champ de type DATE -->
|
|
<input
|
|
v-else-if="field.type === 'date'"
|
|
v-model="fieldValues[field.id]"
|
|
type="date"
|
|
:placeholder="field.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="field.required"
|
|
@blur="updateCustomFieldValue(field.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
customFields: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
entityId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
entityType: {
|
|
type: String,
|
|
required: true, // 'machine', 'composant', 'piece'
|
|
validator: (value) => ['machine', 'composant', 'piece'].includes(value)
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update'])
|
|
|
|
// Valeurs des champs personnalisés
|
|
const fieldValues = reactive({})
|
|
|
|
// Initialiser les valeurs avec les valeurs par défaut
|
|
const initializeFieldValues = () => {
|
|
props.customFields.forEach(field => {
|
|
if (!fieldValues[field.id]) {
|
|
fieldValues[field.id] = field.defaultValue || ''
|
|
}
|
|
})
|
|
}
|
|
|
|
// Mettre à jour la valeur d'un champ personnalisé
|
|
const updateCustomFieldValue = (fieldId) => {
|
|
const field = props.customFields.find(f => f.id === fieldId)
|
|
if (field) {
|
|
emit('update', {
|
|
fieldId,
|
|
value: fieldValues[fieldId],
|
|
field
|
|
})
|
|
}
|
|
}
|
|
|
|
// Surveiller les changements dans les champs personnalisés
|
|
watch(() => props.customFields, () => {
|
|
initializeFieldValues()
|
|
}, { deep: true })
|
|
|
|
onMounted(() => {
|
|
initializeFieldValues()
|
|
})
|
|
</script> |