地图绘图代码优化
This commit is contained in:
joylink_cuiweidong
parent
da2fa63253
commit
56089e1a55
@ -1,15 +1,16 @@
|
||||
<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')">
|
||||
<template v-if="checkFieldType(item, ['select','multiSelect','selectHover'])">
|
||||
<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
|
||||
clearable
|
||||
:multi-select="checkFieldType(item,['multiSelect'])"
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
@change="item.deviceChange"
|
||||
@change="item.deviceChange||deviceChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
@ -18,71 +19,19 @@
|
||||
: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, 'multiSelect')">
|
||||
<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
|
||||
multiple
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
:clearable="item.clearable"
|
||||
@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>
|
||||
</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
|
||||
v-if="checkFieldType(item,['selectHover'])"
|
||||
: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')">
|
||||
<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')">
|
||||
<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" />
|
||||
@ -94,12 +43,12 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'color')">
|
||||
<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')">
|
||||
<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>
|
||||
@ -107,7 +56,7 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 坐标点并列显示 -->
|
||||
<template v-if="checkFieldType(item, 'coordinate')">
|
||||
<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">
|
||||
@ -118,7 +67,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<!-- 多个坐标点绘制 -->
|
||||
<template v-if="checkFieldType(item, 'points')">
|
||||
<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">
|
||||
@ -163,12 +112,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'checkbox')">
|
||||
<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')">
|
||||
<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>
|
||||
@ -225,6 +174,9 @@ export default {
|
||||
} else {
|
||||
return option.label;
|
||||
}
|
||||
},
|
||||
deviceChange() {
|
||||
|
||||
},
|
||||
decompose(item, prop) {
|
||||
if (!prop.includes('.')) {
|
||||
@ -235,9 +187,9 @@ export default {
|
||||
},
|
||||
checkFieldType(field, type) {
|
||||
if (field.hasOwnProperty('show')) {
|
||||
return field.type === type && field.show;
|
||||
return type.includes(field.type) && field.show;
|
||||
} else {
|
||||
return field.type === type;
|
||||
return type.includes(field.type);
|
||||
}
|
||||
},
|
||||
validate(callback) {
|
||||
|
||||
@ -182,7 +182,7 @@ export default {
|
||||
const type = device._type;
|
||||
if (this.selectDevice) {
|
||||
this.enabledTab = this.selectDevice;
|
||||
} else if (type == 'AutomaticRoute' || type == 'AutoTurnBack' || type == 'AxleReset' || type == 'LimitControl' || type == 'GuideLock' || type == 'StationTurnBack') {
|
||||
} else if (['AutomaticRoute', 'AutoTurnBack', 'AxleReset', 'LimitControl', 'GuideLock', 'StationTurnBack'].includes(type)) {
|
||||
this.enabledTab = 'ControlDraft';
|
||||
} else if (controlLampTypeList.includes(type)) {
|
||||
this.enabledTab = 'ControlLamp';
|
||||
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'change' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
|
||||
@ -86,7 +86,7 @@ export default {
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'change' }
|
||||
],
|
||||
width: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user