rt-sim-training-client/src/views/newMap/newMapdraft/mapoperate/config/list.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="card">
        <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">
              <template v-if="item.change">
                <el-select
                  v-model="formModel[item.prop]"
                  filterable
                  :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>
              </template>
              <template v-else>
                <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[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 :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
                  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>
              </template>
              <template v-else>
                <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[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 :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, 'input')">
            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
              <template v-if="item.change">
                <el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" :show-word-limit="true" @input="item.deviceChange" />
              </template>
              <template v-else>
                <el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" :show-word-limit="true" />
              </template>
            </el-form-item>
          </template>
          <template v-if="checkFieldType(item, 'number')">
            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
              <template v-if="!item.firstLevel">
                <template v-if="item.change">
                  <el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" style="width: 140px" @change="item.deviceChange" />
                </template>
                <template v-else>
                  <el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" style="width: 140px" />
                </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 :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 :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 :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 v-if="opt.change">
                    <el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" @change="opt.deviceChange" />
                  </template>
                  <template v-else>
                    <el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" />
                  </template>
                </el-form-item>
              </div>
            </div>
          </template>
          <!-- 多个坐标点绘制 -->
          <template v-if="checkFieldType(item, 'points')">
            <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: 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')">
            <template v-if="item.change">
              <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
                <el-checkbox v-model="formModel[item.prop]" :disabled="item.disabled" @change="item.deviceChange" />
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item :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>
          <template v-if="checkFieldType(item, 'font')">
            <el-form-item :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 :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: {
        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(-5px);
		}
	}
}

.el-input-number--mini {
	width: 110px;
}

.form_data{
  padding: 10px;
  padding-top: 6px;
  padding-bottom: 10px;
}

.card{
  border: 1px solid #ccc;
  margin-bottom: 5px;

  .card_title {
    padding: 0px 5px;
  }
}
/deep/ {
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
}

</style>