156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<template>
|
|
<BFormGroup
|
|
:id="'form-label-' + key"
|
|
:key="key"
|
|
class="mb-2"
|
|
:label="field.label"
|
|
:label-for="'form-label-' + key"
|
|
:description="field.description"
|
|
>
|
|
<BFormInput
|
|
v-if="(field.widget ?? 'text') === 'text'"
|
|
:id="'form-input-' + key"
|
|
v-model="form.data[field.key]"
|
|
:type="field.type"
|
|
:required="field.required"
|
|
/>
|
|
|
|
<BFormFile
|
|
v-if="(field.widget ?? 'text') === 'file'"
|
|
:id="'form-input-' + key"
|
|
v-model="form.data[field.key]"
|
|
:type="field.type"
|
|
:required="field.required"
|
|
/>
|
|
|
|
<BFormSelect
|
|
v-if="(field.widget ?? 'text') === 'select'"
|
|
:id="'form-input-' + key"
|
|
v-model="form.data[field.key]"
|
|
:options="field.options"
|
|
:required="field.required"
|
|
/>
|
|
|
|
<div
|
|
v-if="field.widget === 'rules'"
|
|
id="rules"
|
|
>
|
|
<div v-if="form.data[field.key] !== null && form.data[field.key].length > 0">
|
|
<div
|
|
v-for="(rule, key) in form.data[field.key]"
|
|
:key="key"
|
|
class="p-3"
|
|
:class="{ 'border-bottom': key + 1 !== form.data[field.key].length }"
|
|
>
|
|
<div class="d-block d-lg-flex justify-content-between gap-1">
|
|
<BFormInput
|
|
v-if="form.data[field.key][key].id !== null"
|
|
v-model="form.data[field.key][key].id"
|
|
type="hidden"
|
|
/>
|
|
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Libellé contient"
|
|
:label-for="'form-rule-contain-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-contain-' + key"
|
|
v-model="form.data[field.key][key].contain"
|
|
/>
|
|
</BFormGroup>
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Regex libellé"
|
|
:label-for="'form-rule-match-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-match-' + key"
|
|
v-model="form.data[field.key][key].match"
|
|
/>
|
|
</BFormGroup>
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Catégorie banque"
|
|
:label-for="'form-rule-contain-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-bank-category-contain-' + key"
|
|
v-model="form.data[field.key][key].bank_category"
|
|
/>
|
|
</BFormGroup>
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Montant"
|
|
:label-for="'form-rule-amount-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-amount-' + key"
|
|
v-model="form.data[field.key][key].amount"
|
|
type="number"
|
|
/>
|
|
</BFormGroup>
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Du"
|
|
:label-for="'form-rule-datefrom-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-datefrom-' + key"
|
|
v-model="form.data[field.key][key].date_from"
|
|
type="date"
|
|
/>
|
|
</BFormGroup>
|
|
<BFormGroup
|
|
class="mb-2"
|
|
label="Au"
|
|
:label-for="'form-rule-dateto-' + key"
|
|
>
|
|
<BFormInput
|
|
:id="'form-rule-dateto-' + key"
|
|
v-model="form.data[field.key][key].date_to"
|
|
type="date"
|
|
/>
|
|
</BFormGroup>
|
|
<BButton
|
|
variant="none"
|
|
@click="form.data[field.key] = doRemoveRule(form.data[field.key], key)"
|
|
>
|
|
<i class="fa fa-trash"></i>
|
|
</BButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BFormGroup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BFormGroup, BFormSelect, BFormInput, BFormFile, BButton } from 'bootstrap-vue-next'
|
|
|
|
defineProps({
|
|
key: {
|
|
required: true,
|
|
},
|
|
form: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
field: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const doRemoveRule = (item, key) => {
|
|
let values = []
|
|
|
|
item.forEach((v, k) => {
|
|
if (k !== key) {
|
|
values.push(v)
|
|
}
|
|
})
|
|
|
|
return values
|
|
}
|
|
</script>
|