289 lines
9.7 KiB
Vue
289 lines
9.7 KiB
Vue
<template>
|
|
<el-form ref="form" :rules="rules" :model="formModel" :label-width="form.labelWidth">
|
|
<template v-for="item in form.items">
|
|
<template v-if="checkFieldType(item, 'text')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-input
|
|
v-model="formModel[item.prop]"
|
|
type="text"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:style="{width: item.rightWidth ? 'calc(100% - 100px)' : '100%'}"
|
|
:readonly="item.readonly"
|
|
/>
|
|
<span
|
|
v-if="item.message"
|
|
style="padding-left: 10px; font-size: 12px; color: #a9a9a9;"
|
|
>{{ item.message }}</span>
|
|
<el-tooltip v-if="item.tooltip" class="item" effect="dark" :content="item.info" placement="top">
|
|
<i class="el-icon-warning" style="cursor: pointer" />
|
|
</el-tooltip>
|
|
<el-button v-if="item.buttontip" size="mini" @click="item.buttonClick">{{ item.buttontip }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'complete')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-autocomplete
|
|
v-model="formModel[item.prop]"
|
|
:fetch-suggestions="item.querySearchAsync"
|
|
:placeholder="item.placeholder"
|
|
:style="{width: '80%'}"
|
|
clearable
|
|
@select="item.handleSelect"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'textarea')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-input
|
|
v-model="formModel[item.prop]"
|
|
type="textarea"
|
|
:autosize='item.isAutoSize||false'
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:style="{width: item.tooltip ? 'calc(100% - 50px)' : '100%'}"
|
|
:readonly="item.readonly"
|
|
/>
|
|
<el-tooltip v-if="item.tooltip" class="item" effect="dark" :content="item.info" placement="top">
|
|
<i class="el-icon-warning" style="cursor: pointer" />
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'number')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-input-number
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:min="isNaN(item.min) ? -Infinity : item.min"
|
|
:max="isNaN(item.max)? Infinity : item.max"
|
|
/>
|
|
<span
|
|
v-if="item.message"
|
|
style="padding-left: 20px; font-size: 12px; color: #a9a9a9;"
|
|
>{{ item.message }}</span>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'button')">
|
|
<el-form-item :key="item.prop" :label="item.label" :style="item.style">
|
|
<el-button
|
|
v-for="(nor, index) in item.options"
|
|
:key="index"
|
|
size="mini"
|
|
:type="item.typeBtn"
|
|
round
|
|
@click="item.click(nor)"
|
|
>{{ nor.name }}</el-button>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'switch')">
|
|
<el-form-item :key="item.prop" :label="item.label" :style="item.style">
|
|
<el-radio v-model="formModel[item.prop]" :label="true" :disabled="item.disabled">是</el-radio>
|
|
<el-radio v-model="formModel[item.prop]" :label="false" :disabled="item.disabled">否</el-radio>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-else-if="checkFieldType(item, 'radio')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-radio-group
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
>
|
|
<el-radio v-for="option in item.options" :key="option.value" :label="option.value">{{
|
|
option.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'select')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<template v-if="item.remote">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
remote
|
|
:remote-method="item.remote"
|
|
:loading="item.loading"
|
|
filterable
|
|
default-first-option
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<template v-else-if="item.allowCreate">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
allow-create
|
|
filterable
|
|
default-first-option
|
|
@change="item.onChange"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<template v-else-if="item.multiple">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<template v-else-if="item.change">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
@change="item.onChange"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<template v-else>
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.value"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-form-item>
|
|
</template>
|
|
<template
|
|
v-else-if="checkFieldType(item, 'datetime') || checkFieldType(item, 'date') || checkFieldType(item, 'daterange') || checkFieldType(item, 'datetimerange')"
|
|
>
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" style="width: 100%;">
|
|
<el-date-picker
|
|
v-model="formModel[item.prop]"
|
|
align="right"
|
|
:type="item.type"
|
|
:format="item.viewFormat"
|
|
:value-format="item.valueFormat"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:picker-options="item.picker"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'time')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-time-select
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:picker-options="item.picker"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="checkFieldType(item, 'point')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-input-number
|
|
v-model="formModel[item.prop].x"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:readonly="item.readonly"
|
|
/>
|
|
<el-input-number
|
|
v-model="formModel[item.prop].y"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:readonly="item.readonly"
|
|
style="margin-left: 30px"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
</template>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DataForm',
|
|
props: {
|
|
form: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
formModel: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
rules: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
methods: {
|
|
checkFieldType(field, type) {
|
|
if (field.hasOwnProperty('show')) {
|
|
return field.type === type && field.show;
|
|
} else {
|
|
return field.type === type;
|
|
}
|
|
},
|
|
validateForm(callback) {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
callback();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm() {
|
|
this.$refs.form.resetFields();
|
|
},
|
|
clearValidate() {
|
|
this.$refs.form.clearValidate();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.el-input__inner.el-range-editor {
|
|
width: 100%;
|
|
}
|
|
</style>
|