302 lines
10 KiB
Vue
302 lines
10 KiB
Vue
<template>
|
|
<el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel">
|
|
<template v-for="item in form.items">
|
|
<template v-if="checkFieldType(item, 'select')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<template v-if="item.change">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
@change="item.deviceChange"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option[item.optionValue]"
|
|
:label="handleLabel(option, item.optionLabel)"
|
|
:value="option[item.optionValue]"
|
|
/>
|
|
</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[item.optionValue]"
|
|
:label="handleLabel(option, item.optionLabel)"
|
|
:value="option[item.optionValue]"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'selectHover')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option.code"
|
|
:label="handleLabel(option, item.optionLabel)"
|
|
:value="option.code"
|
|
/>
|
|
</el-select>
|
|
<el-button
|
|
:type="item.buttonShowType ? 'danger' : 'primary'"
|
|
@click="item.hover(item.buttonType)"
|
|
>{{ $t('map.activate') }}</el-button>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'input')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" show-word-limit />
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'number')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<div v-if="!item.firstLevel">
|
|
<el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
|
|
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
|
</div>
|
|
<div v-else>
|
|
<el-input-number v-model="formModel[item.firstLevel][item.secondLevel]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
|
|
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
|
</div>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'color')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-color-picker v-model="formModel[item.prop]" show-alpha :predefine="skins" :disabled="item.disabled" />
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'radio')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-radio-group v-model="formModel[item.prop]" :disabled="item.disabled">
|
|
<el-radio v-for="(opts, index) in item.radioList" :key="index" :border="item.border" :label="opts.value">{{ opts.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</template>
|
|
<!-- 坐标点并列显示 -->
|
|
<template v-if="checkFieldType(item, 'coordinate')">
|
|
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
|
<span class="title" :style="{width: item.width}">{{ 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">
|
|
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" />
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 多个坐标点绘制 -->
|
|
<template v-if="checkFieldType(item, 'points')">
|
|
<div v-if="!item.isHidden" :key="item.prop" class="coordinate">
|
|
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
|
<div class="point-section">
|
|
<template v-for="(point, index) in formModel[item.prop]">
|
|
<div :key="index" style="overflow: hidden;">
|
|
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;">{{ index == 0 ? '(起点)' : index == formModel[item.prop].length - 1 ? '(终点)' : `(中点${index})` }}</span>
|
|
<el-form-item
|
|
label=""
|
|
:prop="'points[' + index + '].x'"
|
|
style="display: table; float: left;"
|
|
label-width="0px"
|
|
>
|
|
<el-input-number v-model="point.x" :disabled="item.pointDisabled" />
|
|
</el-form-item>
|
|
<span
|
|
style="display: table; margin-left: 8px; float: left; line-height: 28px;"
|
|
>
|
|
, </span>
|
|
<el-form-item
|
|
label=""
|
|
:prop="'points[' + index + '].y'"
|
|
style="display: table; float: left; margin-right: 5px;"
|
|
label-width="4px"
|
|
>
|
|
<el-input-number v-model="point.y" :disabled="item.pointDisabled" />
|
|
</el-form-item>
|
|
<el-button
|
|
icon="el-icon-plus"
|
|
:disabled="item.pointDisabled"
|
|
circle
|
|
class="point-button"
|
|
@click="item.addPoint(index)"
|
|
/>
|
|
<el-button
|
|
icon="el-icon-minus"
|
|
:disabled="index == 0 || index == formModel[item.prop].length - 1"
|
|
circle
|
|
class="point-button"
|
|
style="margin-left: 4px;"
|
|
@click="item.delPoint(index)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'checkbox')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-checkbox v-model="formModel[item.prop]" :disabled="item.disabled" />
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'font')">
|
|
<el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-font v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" />
|
|
</el-form-item>
|
|
</template>
|
|
</template>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
import ElFont from '@/views/components/font/index';
|
|
export default {
|
|
name: 'ConfigList',
|
|
components: {
|
|
ElFont
|
|
},
|
|
props: {
|
|
formModel: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
form: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
rules: {
|
|
type: Object,
|
|
default: function () {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
skins: []
|
|
};
|
|
},
|
|
methods: {
|
|
handleLabel(option, label) {
|
|
if (label == 'name') {
|
|
return option.name;
|
|
} else if (label == 'code') {
|
|
return option.code;
|
|
} else if (label == 'label') {
|
|
return option.label;
|
|
} else if (label == 'name&&code') {
|
|
if (option.code) {
|
|
return option.name + ' (' + option.code + ')';
|
|
} else {
|
|
return option.name;
|
|
}
|
|
} else if (label == 'code&&name') {
|
|
return option.code + ' (' + option.name + ')';
|
|
} else {
|
|
return option.label;
|
|
}
|
|
},
|
|
decompose(item, prop) {
|
|
if (!prop.includes('.')) {
|
|
return prop;
|
|
}
|
|
const keyArr = prop.split('.');
|
|
return keyArr[0][keyArr[1]];
|
|
},
|
|
checkFieldType(field, type) {
|
|
if (field.hasOwnProperty('show')) {
|
|
return field.type === type && field.show;
|
|
} else {
|
|
return field.type === type;
|
|
}
|
|
},
|
|
validate(callback) {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
callback(true);
|
|
} else {
|
|
callback(false);
|
|
}
|
|
});
|
|
},
|
|
resetForm() {
|
|
this.$refs.form.resetFields();
|
|
},
|
|
clearValidate() {
|
|
this.$refs.form.clearValidate();
|
|
},
|
|
resetFields() {
|
|
this.$refs.form.resetFields();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.point-section {
|
|
float: left;
|
|
width: calc(100% - 180px);
|
|
}
|
|
|
|
.point-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
float: left;
|
|
|
|
/deep/ {
|
|
.el-icon-plus,
|
|
.el-icon-minus {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-input-number--mini {
|
|
width: 110px;
|
|
}
|
|
|
|
</style>
|
|
|