mirror of https://github.com/Fabio286/antares.git
206 lines
5.5 KiB
Vue
206 lines
5.5 KiB
Vue
|
<template>
|
||
|
<fieldset class="input-group mb-0" :disabled="!fakerGroups.length">
|
||
|
<select
|
||
|
v-model="selectedGroup"
|
||
|
class="form-select"
|
||
|
:disabled="!isChecked"
|
||
|
style="flex-grow: 0;"
|
||
|
@change="onChange"
|
||
|
>
|
||
|
<option value="manual">
|
||
|
{{ $t('message.manualValue') }}
|
||
|
</option>
|
||
|
<option
|
||
|
v-for="group in fakerGroups"
|
||
|
:key="group.name"
|
||
|
:value="group.name"
|
||
|
>
|
||
|
{{ $t(`faker.${group.name}`) }}
|
||
|
</option>
|
||
|
</select>
|
||
|
<select
|
||
|
v-if="selectedGroup !== 'manual'"
|
||
|
v-model="selectedMethod"
|
||
|
class="form-select"
|
||
|
:disabled="!isChecked"
|
||
|
@change="onChange"
|
||
|
>
|
||
|
<option
|
||
|
v-for="method in fakerMethods"
|
||
|
:key="method.name"
|
||
|
:value="method.name"
|
||
|
>
|
||
|
{{ $t(`faker.${method.name}`) }}
|
||
|
</option>
|
||
|
</select>
|
||
|
<ForeignKeySelect
|
||
|
v-else-if="foreignKeys.includes(field.name)"
|
||
|
ref="formInput"
|
||
|
class="form-select"
|
||
|
:value.sync="selectedValue"
|
||
|
:key-usage="getKeyUsage(field.name)"
|
||
|
:disabled="!isChecked"
|
||
|
/>
|
||
|
<input
|
||
|
v-else-if="inputProps().mask"
|
||
|
ref="formInput"
|
||
|
v-model="selectedValue"
|
||
|
v-mask="inputProps().mask"
|
||
|
class="form-input"
|
||
|
:type="inputProps().type"
|
||
|
:disabled="!isChecked"
|
||
|
>
|
||
|
<input
|
||
|
v-else-if="inputProps().type === 'file'"
|
||
|
ref="formInput"
|
||
|
class="form-input"
|
||
|
type="file"
|
||
|
:disabled="!isChecked"
|
||
|
>
|
||
|
<input
|
||
|
v-else-if="inputProps().type === 'number'"
|
||
|
ref="formInput"
|
||
|
v-model="selectedValue"
|
||
|
class="form-input"
|
||
|
step="any"
|
||
|
:type="inputProps().type"
|
||
|
:disabled="!isChecked"
|
||
|
>
|
||
|
<input
|
||
|
v-else
|
||
|
ref="formInput"
|
||
|
v-model="selectedValue"
|
||
|
class="form-input"
|
||
|
:type="inputProps().type"
|
||
|
:disabled="!isChecked"
|
||
|
>
|
||
|
<slot />
|
||
|
</fieldset>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { mask } from 'vue-the-mask';
|
||
|
import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
|
||
|
import ForeignKeySelect from '@/components/ForeignKeySelect';
|
||
|
import FakerMethods from 'common/FakerMethods';
|
||
|
|
||
|
export default {
|
||
|
name: 'FakerSelect',
|
||
|
components: {
|
||
|
ForeignKeySelect
|
||
|
},
|
||
|
directives: {
|
||
|
mask
|
||
|
},
|
||
|
props: {
|
||
|
type: String,
|
||
|
field: Object,
|
||
|
isChecked: Boolean,
|
||
|
foreignKeys: Array,
|
||
|
keyUsage: Array,
|
||
|
fieldLength: Number,
|
||
|
fieldObj: Object
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
localType: null,
|
||
|
selectedGroup: 'manual',
|
||
|
selectedMethod: '',
|
||
|
selectedValue: '',
|
||
|
debounceTimeout: null
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
fakerGroups () {
|
||
|
if ([...TEXT, ...LONG_TEXT].includes(this.type))
|
||
|
this.localType = 'string';
|
||
|
else if (NUMBER.includes(this.type))
|
||
|
this.localType = 'number';
|
||
|
else if (FLOAT.includes(this.type))
|
||
|
this.localType = 'float';
|
||
|
else if ([...DATE, ...DATETIME].includes(this.type))
|
||
|
this.localType = 'datetime';
|
||
|
else if (TIME.includes(this.type))
|
||
|
this.localType = 'time';
|
||
|
|
||
|
return FakerMethods.getGroupsByType(this.localType);
|
||
|
},
|
||
|
fakerMethods () {
|
||
|
return FakerMethods.getMethods({ type: this.localType, group: this.selectedGroup });
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
fieldObj () {
|
||
|
if (this.fieldObj)
|
||
|
this.selectedValue = this.fieldObj.value;
|
||
|
},
|
||
|
selectedGroup () {
|
||
|
if (this.fakerMethods.length)
|
||
|
this.selectedMethod = this.fakerMethods[0].name;
|
||
|
else
|
||
|
this.selectedMethod = '';
|
||
|
},
|
||
|
selectedMethod () {
|
||
|
this.onChange();
|
||
|
},
|
||
|
selectedValue () {
|
||
|
clearTimeout(this.debounceTimeout);
|
||
|
this.debounceTimeout = null;
|
||
|
this.debounceTimeout = setTimeout(() => {
|
||
|
this.onChange();
|
||
|
}, 200);
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
inputProps () {
|
||
|
if ([...TEXT, ...LONG_TEXT].includes(this.type))
|
||
|
return { type: 'text', mask: false };
|
||
|
|
||
|
if ([...NUMBER, ...FLOAT].includes(this.type))
|
||
|
return { type: 'number', mask: false };
|
||
|
|
||
|
if (TIME.includes(this.type)) {
|
||
|
let timeMask = '##:##:##';
|
||
|
const precision = this.fieldLength;
|
||
|
|
||
|
for (let i = 0; i < precision; i++)
|
||
|
timeMask += i === 0 ? '.#' : '#';
|
||
|
|
||
|
return { type: 'text', mask: timeMask };
|
||
|
}
|
||
|
|
||
|
if (DATE.includes(this.type))
|
||
|
return { type: 'text', mask: '####-##-##' };
|
||
|
|
||
|
if (DATETIME.includes(this.type)) {
|
||
|
let datetimeMask = '####-##-## ##:##:##';
|
||
|
const precision = this.fieldLength;
|
||
|
|
||
|
for (let i = 0; i < precision; i++)
|
||
|
datetimeMask += i === 0 ? '.#' : '#';
|
||
|
|
||
|
return { type: 'text', mask: datetimeMask };
|
||
|
}
|
||
|
|
||
|
if (BLOB.includes(this.type))
|
||
|
return { type: 'file', mask: false };
|
||
|
|
||
|
if (BIT.includes(this.type))
|
||
|
return { type: 'text', mask: false };
|
||
|
|
||
|
return { type: 'text', mask: false };
|
||
|
},
|
||
|
getKeyUsage (keyName) {
|
||
|
return this.keyUsage.find(key => key.field === keyName);
|
||
|
},
|
||
|
onChange () {
|
||
|
this.$emit('update:value', {
|
||
|
group: this.selectedGroup,
|
||
|
method: this.selectedMethod,
|
||
|
value: this.selectedValue
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|