pc_shop_site/components/PcGlobalForm.vue

<template>
  <div class="form global-form">
    <el-form class="form-list" :model="formData" :rules="rules" ref="ruleForm">
      <el-form-item
        v-for="item in formConfig"
        :prop="item.prop"
        :key="item.label"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          :style="{ width: item.width }"
          @change="item.change && item.change(formData[item.prop])"
          :placeholder="item.placeholder"
          clearable
        ></el-input>

        <!-- 密码框 -->
        <el-input
          v-if="item.type === 'password'"
          :type="flag ? 'text' : 'password'"
          v-model="formData[item.prop]"
          autocomplete="off"
          :style="{ width: item.width }"
          @change="item.change && item.change(formData[item.prop])"
          :placeholder="item.placeholder"
          clearable
        >
          <i
            v-if="!flag"
            slot="suffix"
            class="el-input__icon iconfont"
            style="font-size: 22px;"
            @click="showPassword"
            >&#xebcc;</i
          >
          <i
            v-else
            slot="suffix"
            class="el-input__icon iconfont"
            style="font-size: 22px"
            @click="showPassword"
            >&#xebcd;</i
          >
        </el-input>

        <!-- 文本域 -->
        <el-input
          v-if="item.type === 'textarea'"
          type="textarea"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          :style="{ width: item.width }"
          :maxlength="item.maxlength"
          :rows="item.rows"
          :show-word-limit="item.showWordLimit"
          @change="item.change && item.change(formData[item.prop])"
        ></el-input>

        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          :style="{ width: item.width }"
          @change="item.change && item.change(formData[item.prop])"
          clearable
          :multiple="multiple"
          :placeholder="item.placeholder">
          <el-option
            v-for="option in item.selectList"
            :label="option.name"
            :value="option.id"
            :key="option.id"
          ></el-option>
        </el-select>

        <!-- 下拉框: selectList为obj类型-->
        <el-select
          v-if="item.type === 'selectObj'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          :style="{ width: item.width }"
          @change="item.change && item.change(formData[item.prop])"
          filterable
          clearable
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(item, key) in item.selectList"
            :key="parseInt(key)"
            :label="item"
            :value="parseInt(key)"
          ></el-option>
        </el-select>

        <!-- 单选框 -->
        <el-radio-group
          v-if="item.type === 'radio'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          @change="item.change && item.change(formData[item.prop])"
        >
          <el-radio
            v-for="radio in item.radios"
            :label="radio.label"
            :key="radio.label"
          ></el-radio>
        </el-radio-group>

        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.type === 'checkbox'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          @change="item.change && item.change(formData[item.prop])"
        >
          <el-checkbox
            v-for="item in item.checkboxs"
            :label="item.label"
            :key="item.label"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>

        <!-- 开关 -->
        <el-switch
          v-if="item.type === 'switch'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          @change="item.change && item.change(formData[item.prop])"
        ></el-switch>

        <!-- 插槽 -->
        <template v-if="item.type === 'slot'">
          <slot :name="item.slotName"></slot>
        </template>
      </el-form-item>
    </el-form>
    <div class="submit-btn">
      <el-button
        @click.native="submit"
        :loading="submitLoading"
        v-if="showLoginBtn"
      >
        LOGIN
      </el-button>
      <el-button
        @click.native="submit"
        :loading="submitLoading"
        v-if="showRegisterBtn"
      >
        REGISTER
      </el-button>
      <el-button @click.native="close" v-if="showDeleteBtn">取 消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "GlobalForm",
  props: {
    showDeleteBtn: {
      type: Boolean,
      default: true,
    },
    showLoginBtn: {
      type: Boolean,
      default: true,
    },
    showRegisterBtn: {
      type: Boolean,
      default: true,
    },
    // 表单配置
    formConfig: {
      type: Array,
      required: true,
    },
    // 表单数据
    formData: {
      type: Object,
      required: true,
    },
    // 表单规则
    rules: {
      type: Object,
    },
    submitLoading: {
      type: Boolean,
    },
  },
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("handleSubmit");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close() {
      this.$emit("handleClose");
    },
    showPassword() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style lang="scss" scope>
.global-form {
  padding: 0 30px;
  margin-top: 20px;
  .el-input__inner {
    height: 50px;
    line-height: 50px;
  }
  .el-input__suffix .el-input__suffix-inner{
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .submit-btn {
    display: flex;
    justify-content: center;

    .el-button {
      background-color: #e90000;
      width: 156px;
      height: 50px;
      color: #fff;
      border-radius: 6px;
      font-weight: 600;
    }
  }
}
</style>