413 lines
16 KiB
Vue
413 lines
16 KiB
Vue
<template>
|
|
<el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel" class="form_data">
|
|
<template v-for="(items, index) in form.items">
|
|
<fieldset v-if="items.item.length" :key="index" :class="items.name?'card':'noCard'">
|
|
<legend class="card_title">{{ items.name }}</legend>
|
|
<template v-for="item in items.item">
|
|
<template v-if="checkFieldType(item, 'select')">
|
|
<el-form-item :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"
|
|
:clearable="item.clearable"
|
|
@change="((val)=>{deviceChange(val, item)})"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option[item.optionValue]"
|
|
:label="handleLabel(option, item.optionLabel)"
|
|
:value="option[item.optionValue]"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'multiSelect')">
|
|
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
multiple
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:clearable="item.clearable"
|
|
@change="((val)=>{deviceChange(val, item)})"
|
|
>
|
|
<el-option
|
|
v-for="option in item.options"
|
|
:key="option[item.optionValue]"
|
|
:label="handleLabel(option, item.optionLabel)"
|
|
:value="option[item.optionValue]"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="checkFieldType(item, 'selectHover')">
|
|
<el-form-item :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"
|
|
:clearable="item.clearable"
|
|
>
|
|
<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, 'multiSelectHover')">
|
|
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
|
<el-select
|
|
v-model="formModel[item.prop]"
|
|
filterable
|
|
multiple
|
|
:placeholder="item.placeholder"
|
|
:disabled="item.disabled"
|
|
:clearable="item.clearable"
|
|
>
|
|
<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="true" @input="((val)=>{deviceChange(val, item)})" />
|
|
</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">
|
|
<template v-if="!item.firstLevel">
|
|
<template>
|
|
<el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" style="width: 140px" @change="((val)=>{deviceChange(val,item)})" />
|
|
</template>
|
|
<span style="padding-left: 1px;">{{ item.placeholder }}</span>
|
|
</template>
|
|
<template 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>
|
|
</template>
|
|
</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, indexs) in item.radioList" :key="indexs" :border="item.border" :label="opts[item.optionValue]">{{ opts[item.optionLabel] }}</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">
|
|
<template>
|
|
<el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" @change="((val)=>{deviceChange(val, opt)})" />
|
|
</template>
|
|
</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, j) in formModel[item.prop]">
|
|
<div :key="j" style="overflow: hidden;">
|
|
<span v-if="!item.hiddenSpan" style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;" :style="{'margin-right': j == 0 || j == formModel[item.prop].length - 1 ? '9px' : '5px'}">{{ j == 0 ? '起 点' : j == formModel[item.prop].length - 1 ? '终 点' : `中点${j}` }}</span>
|
|
<el-form-item
|
|
label=""
|
|
:prop="'points[' + j + '].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[' + j + '].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(j)"
|
|
/>
|
|
<el-button
|
|
icon="el-icon-minus"
|
|
:disabled="j == 0 || j == formModel[item.prop].length - 1"
|
|
circle
|
|
class="point-button"
|
|
style="margin-left: 4px;"
|
|
@click="item.delPoint(j)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 多个坐标点绘制 -->
|
|
<template v-if="checkFieldType(item, 'coordinatePoint')">
|
|
<div :key="item.prop" class="coordinate">
|
|
<span class="title" :style="{width: item.width}">{{ item.label }}</span>
|
|
<div class="point-section" :style="{ width: `calc(100% - 10px - ${item.width})` }">
|
|
<template v-for="(point, j) in formModel[item.prop]">
|
|
<div :key="j" style="overflow: hidden;">
|
|
<span style="display: table; margin-right: 6px; font-size: 14px; float: left; line-height: 28px;">{{ j + 1 }}.</span>
|
|
<el-form-item 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 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(j)"
|
|
/>
|
|
<el-button
|
|
icon="el-icon-minus"
|
|
:disabled="j == 0"
|
|
circle
|
|
class="point-button"
|
|
style="margin-left: 4px;"
|
|
@click="item.delPoint(j)"
|
|
/>
|
|
</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" @change="((val)=>{deviceChange(val, item)})" />
|
|
</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 v-if="checkFieldType(item, 'fontContent')">
|
|
<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.content]" :placeholder="item.placeholder" class="input-with-select">
|
|
<el-select slot="prepend" v-model="formModel[item.prepend]" :placeholder="item.placeholder">
|
|
<el-option :label="$t('map.horizontal')" value="H" />
|
|
<el-option :label="$t('map.vertical')" value="V" />
|
|
</el-select>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</template>
|
|
</fieldset>
|
|
</template>
|
|
<slot />
|
|
</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: {
|
|
deviceChange(data, item) {
|
|
if (item.deviceChange) {
|
|
item.deviceChange(data);
|
|
}
|
|
},
|
|
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('isHidden')) {
|
|
return field.type === type && !field.isHidden;
|
|
} 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;
|
|
-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;
|
|
}
|
|
|
|
.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(0px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-input-number--mini {
|
|
width: 110px;
|
|
}
|
|
|
|
.form_data{
|
|
padding: 6px 10px 10px 10px;
|
|
}
|
|
|
|
.card{
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 5px;
|
|
|
|
.card_title {
|
|
padding: 0px 5px;
|
|
}
|
|
}
|
|
.noCard{
|
|
border: none;
|
|
margin-bottom: 0px;
|
|
padding: 0;
|
|
}
|
|
|
|
/deep/ {
|
|
.input-with-select .el-input-group__prepend {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|