rt-sim-training-client/src/components/QueryListPage/DataForm.vue

<template>
  <el-form ref="form" :rules="rules" :model="formModel" :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, '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 {};
            }
        }
    },
    data() {
        return {
        };
    },
    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;
      }
    }
    .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>