458 lines
17 KiB
Vue
458 lines
17 KiB
Vue
<template>
|
|
<el-form ref="form" :rules="rules" :model="formModel" :inline="inline" :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"
|
|
:maxlength="item.maxlength"
|
|
/>
|
|
<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-if="item.precisionFlag"
|
|
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"
|
|
:step="isNaN(item.step) ? -Infinity : item.step"
|
|
:precision="item.precision"
|
|
/>
|
|
<el-input-number
|
|
v-else
|
|
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"
|
|
:step="isNaN(item.step) ? -Infinity : item.step"
|
|
/>
|
|
<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, 'tel')">
|
|
<div :key="item.prop" class="form_box" :prop="item.prop">
|
|
<div class="title" :style="{width: form.labelWidth}">
|
|
<span v-if="item.required" class="required_box">*</span>{{ item.label }}
|
|
</div>
|
|
<div>
|
|
<el-form-item :prop="item.prop" :required="item.required">
|
|
<el-input v-model="formModel[item.prop]" :placeholder="item.placeholder" maxlength="11" class="input_box" />
|
|
</el-form-item>
|
|
<el-form-item :prop="item.propCode" :required="item.required">
|
|
<el-input v-model="formModel[item.propCode]" :placeholder="item.placeholderCode" class="code_box" style="width: 40%;" />
|
|
<el-button style="margin-left: 10px;" :disabled="item.mobileCodeTime != 0" @click="item.buttonClick">
|
|
获取验证码
|
|
<span v-if="item.mobileCodeTime">{{ item.mobileCodeTime }}</span>
|
|
</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</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, 'checkBox')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-radio-group v-model="formModel[item.prop]">
|
|
<el-radio v-for="item in item.children" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
|
|
</el-radio-group>
|
|
</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"
|
|
:disabled="option.disabled"
|
|
/>
|
|
</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"
|
|
:disabled="option.disabled"
|
|
/>
|
|
</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"
|
|
:disabled="option.disabled"
|
|
/>
|
|
</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"
|
|
:disabled="option.disabled"
|
|
/>
|
|
</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"
|
|
:disabled="option.disabled"
|
|
/>
|
|
</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, 'timePicker')">
|
|
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
|
|
<el-time-picker
|
|
v-model="formModel[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:value-format="'HH:mm:ss'"
|
|
:picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
|
|
/>
|
|
</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 v-else-if="checkFieldType(item, 'coordinate')">
|
|
<div :key="item.prop" class="coordinate">
|
|
<span class="title" :style="{width: form.labelWidth}">{{ item.label }}</span>
|
|
<div v-for="opt in item.children" :key="opt.code" class="listWidth">
|
|
<el-form-item :label="opt.label" :prop="opt.prop" :label-width="opt.labelWidth">
|
|
<template v-if="opt.change">
|
|
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" style="width: 160px;" @change="opt.deviceChange" />
|
|
</template>
|
|
<template v-else>
|
|
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" style="width: 160px;" />
|
|
</template>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="checkFieldType(item, 'table')">
|
|
<div :key="item.prop" style="margin-left:150px;margin-bottom:20px">
|
|
<el-button v-if="item.buttontip" size="mini" style="margin-bottom:10px" @click="item.buttonClick">{{ item.buttontip }}
|
|
</el-button>
|
|
<el-table :data="formModel[item.prop]" border :style="item.style" class="table_item">
|
|
<el-table-column v-for="data in item.tableList" :key="data.prop" :prop="data.prop" :label="data.label">
|
|
<template slot-scope="scope">
|
|
<el-form-item v-if="data.isEdit" :prop="item.prop+'.' + scope.$index + '.'+data.prop" :required="false" :rules="data.rules[data.prop]">
|
|
<el-input-number
|
|
v-model="scope.row[data.prop]"
|
|
:min="isNaN(data.min) ? -Infinity : data.min"
|
|
:max="isNaN(data.max)? Infinity : data.max"
|
|
size="mini"
|
|
/>
|
|
</el-form-item>
|
|
<div v-else>
|
|
{{ scope.row[data.prop] }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="item.operate" width="180">
|
|
<template slot-scope="scope">
|
|
<el-button v-for="buttonObj in item.operateButton" :key="buttonObj.name" type="text" size="small" @click="buttonObj.clickFunc(scope.row)">{{ buttonObj.name }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</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 {};
|
|
}
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default() {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
mobileCodeTime: 0
|
|
};
|
|
},
|
|
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 lang="scss">
|
|
.el-input__inner.el-range-editor {
|
|
width: 100%;
|
|
}
|
|
.table_item {
|
|
.el-form-item__content{
|
|
margin-left:0px !important;
|
|
.el-input-number{
|
|
width:100% !important;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
text-align: right;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
line-height: 40px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
line-height: 40px;
|
|
width: 120px;
|
|
font-weight: bold;
|
|
display: block;
|
|
float: left;
|
|
padding-right: 12px;
|
|
}
|
|
.listWidth{
|
|
display: table;
|
|
float: left;
|
|
margin-right: 20px;
|
|
&:last-child{
|
|
margin: 0;
|
|
}
|
|
}
|
|
.form_box{
|
|
overflow: hidden;
|
|
}
|
|
.required_box{
|
|
// content: '*';
|
|
color: #F56C6C;
|
|
margin-right: 4px;
|
|
}
|
|
.coordinate {
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
text-align: right;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
line-height: 40px;
|
|
// padding: 0 12px 0 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
line-height: 28px;
|
|
width: 120px;
|
|
font-weight: bold;
|
|
display: block;
|
|
float: left;
|
|
margin-right: 7px;
|
|
}
|
|
.listWidth{
|
|
display: table;
|
|
float: left;
|
|
margin-right: 20px;
|
|
&:last-child{
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|