vue 編輯組件

Posted 2021-09-14 雨wAp5a

<template>
  <div class="form-wrap" v-if="visible" :style="style" ref="formWrap">
    <slot name="header">编辑</slot>
    <el-form
      ref="resetForm"
      :model="resetForm"
      :inline="isInline"
      :rules="rules"
      class="demo-form-inline edit-form"
      :label-position="labelPosition"
      label-
    >
      <el-form-item
        v-for="(item,key,index) in form"
        :label="item.label"
        :key="key+index"
        :prop="key"
        :class="{\'item-oneline\':item.oneline,\'item-inline-50\': isInline}"
      >
        <el-input
          v-if="item.filed==\'input\'"
          v-model="resetForm[key]"
          :disabled="item.isDisable"
          :placeholder="item.placeholder"
          :show-password="item.pwd"
          label="left"
        ></el-input>
        <el-select
          v-else-if="item.filed==\'select\'"
          v-model="resetForm[key]"
          :multiple="item.multiple"
        >
        <el-option
            v-for="(items) in item.options "
            :key="items.inputValue"
            v-model="items.inputValue"
            :label="items.label"
          ></el-option>
        </el-select>
        <el-date-picker
          v-else-if="item.filed==\'date\'"
          type="date"
          v-model="resetForm[key]"
          :label="item.label"
          placeholder="选择时间"
          :key="item.inputValue"
          style="width: 80%;"
        ></el-date-picker>

        <el-date-picker
          v-else-if="item.filed==\'datetime\'"
          type="datetime"
          v-model="resetForm[key]"
          :label="item.label"
          placeholder="选择日期"
          :key="item.inputValue"
          style="width: 80%;"
        ></el-date-picker>

        <el-switch
          v-else-if="item.filed==\'switch\'"
          v-model="resetForm[key]"
          :active-value="item.active"
          :inactive-value="item.inactive"
        ></el-switch>
        <el-radio-group v-else-if="item.filed==\'radio\'" v-model="resetForm[key]">
          <el-radio
            v-for="(item) in item.options"
            :label="item.inputValue"
            :key="item.inputValue"
          >{{item.label}}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-else-if="item.filed==\'checkbox\'" v-model="resetForm[key]">
          <el-checkbox
            v-for="(items) in item.options"
            :label="items.label"
            :name="item.type"
            :key="items.label+items.inputValue"
          ></el-checkbox>
        </el-checkbox-group>

        <el-input
          v-else-if="item.filed==\'textarea\'"
          type="textarea"
          v-model="resetForm[key]"
          :rows="item.rows"
          :placeholder="item.placeholder"
          style="width:100%"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{cancelText}}</el-button>
      <el-button type="primary" @click="send(\'resetForm\')">{{submitText}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {},
    query: {}
  },
  data() {
    return {
      resetForm: {},

      rules: {},
      style: "",
      isInline: false,
      labelPosition: "right",
      submitText: "确 定",
      cancelText: "取 消"
    };
  },
  created() {},
  methods: {
    initForm() {
      let data = this.form;
      let objForm = {};
      let objRules = {};
      let _this = this;
      let {
        style,
        isInline,
        labelPosition,
        submitText,
        cancelText
      } = this.query;
      this.style = style || "";
      this.labelPosition = labelPosition || "top";
      this.isInline = isInline || false;
      this.submitText = submitText || "确 定";
      this.cancelText = cancelText || "取 消";
      Object.keys(data).map((item, index, key) => {
        objForm[item] = data[item]["inputValue"];
        let rules = data[item]["rules"];
        if (rules) {
          if (rules == "required") {
            if (data[item]["filed"] == "checkbox") {
              objRules[item] = [
                {
                  type: "array",
                  required: true,
                  message: `请至少选择一个${data[item]["label"]}`,
                  trigger: "change"
                }
              ];
            } else if (data[item]["filed"] == "date") {
              objRules[item] = [
                {
                  required: true,
                  message: `请选择${data[item]["label"]}`,
                  trigger: "change"
                }
              ];
            } else {
              objRules[item] = [
                {
                  required: true,
                  message: `请输入${data[item]["label"]}`,
                  trigger: "blur"
                }
              ];
            }
          } else if (rules == "phone") {
            objRules[item] = [
              { required: true, message: "请输入手机号码", trigger: "blur" },
              {
                validator: function(rule, value, callback) {
                  if (
                    /^1[34578]\\d{9}$|(^5\\d{2,3}-\\d{3,9}$)/.test(value) == false
                  ) {
                    callback(new Error("请输入正确的手机号"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur"
              }
            ];
          } else if (rules == "num") {
            objRules[item] = [
              { required: true, message: "请输入数字", trigger: "blur" },
              {
                validator: function(rule, value, callback) {
                  if (/^\\d+$|^\\d+[.]?\\d+$/.test(value) == false) {
                    callback(new Error("请输入数字"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur"
              }
            ];
          } else if (rules == "pwd") {
            objRules[item] = [
              { required: true, message: "请输入密码", trigger: "blur" },
              {
                validator: function(rule, value, callback) {
                  if (
                    !/^(?![\\d]+$)(?![a-zA-Z]+$)(?![^\\da-zA-Z]+$)([^\\u4e00-\\u9fa5\\s]){8,20}$/.test(
                      value
                    )
                  ) {
                    callback(
                      new Error(
                        "请输入8-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"
                      )
                    );
                  } else {
                    callback();
                  }
                },
                trigger: "blur"
              }
            ];
          } else if (rules == "checkpwd") {
            objRules[item] = [
              { required: true, message: "请输入密码", trigger: "blur" },
              {
                validator: function(rule, value, callback) {
                  if (value !== _this.resetForm[data[item]["compare"]]) {
                    callback(new Error("两次输入密码不一致!"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur"
              }
            ];
          } else {
            objRules[item] = rules;
          }
        }
      });

      this.resetForm = { ...objForm };
      this.rules = { ...objRules };
    },
    destoryForm() {
      this.resetForm = {};
      this.rules = {};
    },
    createdOverBg() {
      let div = document.createElement("div");
      let overClass = document.createAttribute("class");
      overClass.value = "over-bg";

      div.setAttributeNode(overClass);
      document
        .getElementsByTagName("body")
        .item(0)
        .appendChild(div);
    },
    close() {
      this.closeDailog();
      this.$emit("close-edit-form", "");
    },
    closeDailog() {
      let overDiv = document.getElementsByClassName("over-bg")[0];
      if (overDiv) {
        overDiv.parentNode.removeChild(overDiv);
      }

      this.destoryForm();
    },

    send(formName) {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          this.$emit("close-edit-form", this.resetForm);
          this.closeDailog();
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    form: {
      immediate: true,
      handler(val) {
        //this.form=val;
      }
    },
    visible: {
      handler(val) {
        if (val) {
          this.createdOverBg();
          this.initForm();
        } else {
        }
      }
    }
  }
};
</script>

<style scoped>
.item-inline-50 {
  width: 50%;
  box-sizing: border-box;
  padding: 0px 0px 0px 8px;
  margin-right: 0px !important ;
}

.item-oneline {
  display: block;
  width: 90%;
}
.dialog-footer {
  text-align: center;
}

.form-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: auto;
  margin-top: 12vh;

  padding: 16px;
  z-index: 2001;
  width: 50vw;
  max-height: 85vh;
  height: fit-content;
  box-sizing: border-box;
  border-radius: 16px;
  background: white;
}

.edit-form {
  height: fit-content;
  overflow: auto;
  /* padding-bottom: 44px; */
  max-height: 70vh;
}
.form-wrap::-webkit-scrollbar,
.edit-form::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 1px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}
</style>