dy-admin-manager/src/components/save-form/index.vue

<template>
  <el-form
    class="save-form"
    v-bind="{...$attrs, ...$props}"
    v-on="$listeners"
    @submit.stop.native="submit"
    @reset.stop.native="reset"
    ref="form"
  >
    <slot/>
  </el-form>
</template>
<script>
import { Searchs } from '@/helpers'
export default {
  name: 'save-form',
  props: ['model', 'save-key', 'noclear'],
  data() {
    return {
      searchs: null
    }
  },

  mounted() {
    this.setFormValue()
  },
  methods: {
    setFormValue() {

      const searchs = new Searchs(this.saveKey || this.$route.path)
      this.searchs = searchs
      const active = searchs.get()
      for (const key in active.form) {
        if (active.form.hasOwnProperty(key)) {
          const item = active.form[key]
          this.model[key] = item
        }
      }
      if (this.saveKey) {
        this.searchs.update(this.$route.path, undefined, 'bind')
      }
    },
    submit(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      if (this.saveKey) {
        this.searchs.update(this.$route.path, undefined, 'bind')
      }
      this.searchs.update(this.model, undefined, 'form')
        // console.log(  new Searchs().searchs)
      if (this.$listeners.submit) {
        this.$listeners.submit(evt)
      }

    },
    reset(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      let setItemEvent = new Event('watchStorage')
      window.dispatchEvent(setItemEvent)

      if (this.$listeners.reset) {
        if (this.noclear == undefined) {
          this.$nextTick(() => {
            this.resetFields()
            // this.setFormValue()
          })
        } else {
          this.resetFields()
        }
        this.$listeners.reset()
      } else {
        this.resetFields()
      }
    },
    save(search = null, type = 'form') {
      search = search ? search : this.model
      this.searchs.update(search, undefined, type)
    },
    validate(FC) {
      this.$refs.form.validate(valid => {
        FC(valid)
        if (valid) {
          this.searchs.update(this.model, undefined, 'form')
        }
      })
    },
    resetFields() {
      this.$refs.form.resetFields()
      this.searchs.update(this.model, undefined, 'form')
      this.searchs.update({}, undefined, 'page')
    }
  },
}
</script>
<style lang="less" scoped>
.save-form{
  /deep/ .el-input__inner{
    width: 180px;
  }
  /deep/.el-date-editor.el-input{
    width: 180px;
  }
  /deep/ .el-form-item__content .el-col {
    width: 180px;
  }
  /deep/ .el-col.line{
    width: 15px!important;
    text-align: center;
  }
  /deep/ .el-date-editor--daterange{
    width: 375px;
  }
  /deep/ .el-form-item__content .el-col:last-child .el-form-item{
    margin-right: 0;
  }
}

</style>