表单组件

<template>
  <div class="dialog">
    <el-dialog :title="title"
               :visible.sync="visible"
               :before-close="cancelHandle"
               :close-on-click-modal="false"
               :width="formWidht|unitPx">
      <el-form :model="form"
               :rules="rules"
               :inline="inline"
               ref="ruleForm">
        <slot></slot>
        <el-col v-for="(item,index) in formList"
                :key="index"
                :span="inline?12:24">
          <el-form-item :label="item.lab"
                        :label-width="labelWidth|unitPx"
                        :prop="item.val">
            <el-input v-model.trim="form[item.val]"
                      v-if="item.type===1"
                      :readonly="item.readonly"
                      :placeholder="item.placeholder"
                      :disabled="item.disabled"
                      :show-password="item.showPassword"
                      :type="item.rows?'textarea':'text'"
                      :rows="item.rows"
                      :maxlength="item.maxlength"
                      :show-word-limit="item.showWordLimit"
                      clearable />
            <el-select v-model="form[item.val]"
                       placeholder="请选择"
                       v-if="item.type===2"
                       :multiple="item.multiple"
                       :disabled="item.disabled"
                       clearable>
              <el-option v-for="option in item.options"
                         :key="option.value"
                         :label="option.label"
                         :value="option.value"
                         :disabled="option.disabled">
              </el-option>
            </el-select>
            <el-cascader v-if="item.type===3"
                         v-model="form[item.val]"
                         :options="item.options"
                         :show-all-levels="item.showAllLevels"
                         :props="item.props"
                         clearable></el-cascader>
            <el-switch v-if="item.type===4"
                       v-model="form[item.val]"
                       :disabled="item.disabled"
                       active-value="1"
                       inactive-value="0">
            </el-switch>
            <el-date-picker v-if="item.type===5"
                            v-model="form[item.val]"
                            :type="item.dataType||datetime"
                            :picker-options="item.pickerOptions"
                            placeholder="选择日期时间"
                            :readonly="item.readonly"
                            :disabled="item.disabled"
                            clearable
                            :format="item.format"
                            @change="form[item.val]=changeTime(form[item.val],item.format)">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <div style="clear:both"
           v-if="inline"></div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancelHandle">取 消</el-button>
        <el-button type="primary"
                   @click="confirmHandle('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
/**
 * visible:是否显示
 * title：标题名
 * labelWidth：标签宽度（80）
 * formWidht：表单宽度（400）
 * inline：是否行内表单
 * formList：表单配置  输入框：type1 下拉框：type2 多级下拉框：type3 开关：type4 时间：type5 其他可通过slot配置
 * formObj：表单数据
 * formRules：表单验证规则
 */
export default {
  name: "gisForm",
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    title: {
      default: "新增"
    },
    labelWidth: {
      default: "80"
    },
    formWidht: {
      default: "400"
    },
    inline: {
      default: false,
      type: Boolean
    },
    formList: {
      default: [
        {
          type: 1,
          lab: "名称",
          val: "name"
        }
      ]
    },
    formObj: {
      default: () => {
        return {};
      }
    },
    formRules: {
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      form: {},
      rules: {}
    };
  },
  computed: {},
  methods: {
    dateFormat(date, format = "yyyy-MM-dd") {
      if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
          date = parseInt(mts[2]);
        }
      }
      date = new Date(date);
      if (!date || date.toUTCString() == "Invalid Date") {
        return "";
      }
      var map = {
        M: date.getMonth() + 1, //月份
        d: date.getDate(), //日
        h: date.getHours(), //小时
        m: date.getMinutes(), //分
        s: date.getSeconds(), //秒
        q: Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      };
      format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
        var v = map[t];
        if (v !== undefined) {
          if (all.length > 1) {
            v = "0" + v;
            v = v.substr(v.length - 2);
          }
          return v;
        } else if (t === "y") {
          return (date.getFullYear() + "").substr(4 - all.length);
        }
        return all;
      });
      return format;
    },
    // 时间格式处理
    changeTime(val, format = "yyyy-MM-dd hh:mm:ss") {
      return this.dateFormat(val, format);
    },
    // 关闭弹框
    cancelHandle() {
      this.$emit("update:visible", false);
    },
    // 保存数据
    confirmHandle(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let val = { ...this.form };
          this.$emit("update-form", val);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 清除验证提示
    clearValidate() {
      this.$nextTick(() => {
        if (this.$refs["ruleForm"]) {
          this.$refs["ruleForm"].clearValidate();
        }
      });
    },
    init() {
      this.form = { ...this.formObj };
      let rules = {};
      this.formList.forEach(item => {
        // 必填项
        if (item.required) {
          rules[item.val] = [
            {
              required: true,
              message: "不能为空",
              trigger: "blur"
            }
          ];
        }
      });
      // 验证规则
      this.rules = { ...rules, ...this.formRules };
      console.log('init',this.form)
    }
  },
  mounted() {
    this.init();
  },
  filters: {
    unitPx(val) {
      return val + "px";
    }
  },
  watch: {
    formObj: {
      handler() {
        this.init();
      },
      deep: true
    },
    visible: {
      handler(val) {
        if (!val) {
          // 清空数据
          this.formList.forEach(item => {
            if (item.multiple || item.type === 3) {
              this.$set(this.form, item.val, []);
            } else {
              this.$set(this.form, item.val, "");
            }
          });
          // 清空验证
          this.clearValidate();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog {
  text-align: left;
}
.el-textarea {
  /deep/ .el-textarea__inner {
    width: 217px;
  }
}
/deep/ .el-form-item__content {
  width: 217px;
}
/deep/ .el-form-item--small .el-form-item__content{
  line-height: 35px;
}
</style>

<template>
  <div>

    <el-button type="primary"
               @click="visibleForm=true">表单</el-button>
    <gis-form :visible.sync="visibleForm"
              :title="formTitle"
              :formList="formData"
              :formObj="formObj"
              :formWidht="formWidht"
              :labelWidth="labelWidth"
              :inline="inline"
              @update-form="updateHandle">
    </gis-form>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      visibleForm: false,
      formTitle: "新增",
      formData: [
        {
          type: 1,
          lab: "用户名",
          val: "name",
          required: true,
        },
        {
          type: 1,
          lab: "单位",
          val: "unit",
          showPassword: true
        },
        {
          type: 1,
          lab: "职位",
          val: "position",
          placeholder: "请输入内容",
        },
        {
          type: 1,
          lab: "描述",
          val: "desc",
          placeholder: "请输入内容",
          rows: 2,
          showWordLimit: true,
          maxlength: 30
        },
        {
          type:2,
          lab:'城市',
          val:'city',
          multiple:true,
          options:[
            {
          value: 'bj',
          label: '北京'
        }, {
          value: 'sh',
          label: '上海'
        }, {
          value: 'gz',
          label: '广州',
        },
          ]
        },
        {
          type:3,
          lab:'地区',
          val:'area',
          options:[
            {
              value:'hz',
              label:'杭州',
              children:[
                {
                  value:'xh',
                  label:'西湖区'
                },
                {
                  value:'gs',
                  label:'拱墅区'
                }
              ]
              
            }
          ],
          showAllLevels:false,
          props:{
             checkStrictly: true
          }
        },
        {
          type:4,
          lab:'状态',
          val:'state'
        },
        {
          type:5,
          lab:'时间',
          val:'time',
          dataType:'date',
          format:'yyyy-MM-dd',
          pickerOptions:{
            disabledDate: (time) => {
          // 时间限制
          return time.getTime() > new Date() * 1 + 600 * 1000;
        }
          }
        }
      ],
      formObj: {
        name: "1",
        unit: "1",
        position: "",
        desc: "",
        city:['sh'],
        area:['hz','gs'],
        state:'1',
        time:''
      },
      labelWidth: "80",
      formWidht: "660",
      inline: true
    };
  },
  methods: {
    updateHandle(val) {
      console.log(val);
      this.visibleForm = false;
    }
  }
};
</script>

<style lang="sass" scoped>
</style>