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"
          />
          <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-model="formModel[item.prop]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :min="isNaN(item.min) ? -Infinity : item.min"
            :max="isNaN(item.max)? Infinity : item.max"
          />
          <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, '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, '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>
  </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>
    .el-input__inner.el-range-editor {
        width: 100%;
    }
</style>