关于vue表单项目的一些总结

[chenjianou]

1、这是一次表单的总结。因为我们在页面中有使用很多组件进行切换时，我们采用了将每个每块拆分进行，也就是使用组件的方式进行。 2、同时 我们进行修改也是用父组件进行修改。在vue中的v-model是可以实现父子组件双向绑定的。所以我们可以使用这样的方式将父组件的对象传下去。 3、在使用element的form组件的时候，我们没办法在父组件进行判定或者说是表单验证的方法，即 form.validate((boo,obj)=>{})的方法进行验证，我们可以通过this.$refs['ComponentName'].validate()的方式调用子组件的方法。

<template>
  <div class="information">
    <HomeTitle title="填写引导">
      <div class="review" @click="$router.push({name:'VitaeView' , query:{ templetId}})">
        <img src="@/assets/images/curriculum/preview.png">
      </div>
      <template v-slot:text>
        <div class="temp">
          正在使用:{{templetName}}
        </div>
      </template>
    </HomeTitle>
    <div class="info-header">
      <div class="text">{{sideItem[currentSide]}}</div>
    </div>
    <div class="main">
      <div class="sidebar">
          <div class="side-item">
            <div v-for="(item, index) in sideItem" :key="item" @click="changeSide(item,index)" class="side " :class="{active: currentSide === index}"><span>{{item}}</span></div>
          </div>
      </div>
      <div class="content"  >
        <div v-if="resume">
          <BaseInfo v-if="currentSide === 0" ref="baseInfo" :model="resume"/>
          <Objective v-if="currentSide ===1" ref="objective" :model="resume" />
          <Describe v-if="currentSide === 2" :model="resume"  placeholder="请在此填入您的个人总结" nature="summary"/>
          <Internship v-if="currentSide ===3" :model="resume['resumePracticeDto']"/>
          <Education v-if="currentSide === 4" :model="resume['resumeEducationDto']"/>
          <Describe v-if="currentSide === 5"  :model="resume" placeholder="讲讲在学校里做过什么吧" nature="campusExperience"/>
          <Other v-if="currentSide === 6 && resume "  :skill="resume['resumeSkillDto']" :certificate="resume['resumeCertificateDto']"/>
        </div>
      </div>
      <div class="right-tips">
          <TipsInfo :info="currentDataInfo"/>
      </div>
    </div>
  </div>
</template>

<script>
import HomeTitle from '@/components/interview/HomeTitle'
import BaseInfo from './components/BaseInfo'
import TipsInfo from './components/TipsInfo'
import Internship from './components/Internship'
import Objective from './components/Objective'
import Education from './components/Education'
import Describe from './components/Describe'
import Other from './components/Other'
import mixins from './mixins/mixinValidate'
import formMixins from './mixins/formValidate'
export default {
  name: 'infomation',
  mixins: [mixins, formMixins],
  data () {
    return {
      sideItem: ['基本信息', '求职意向', '自我介绍', '实习经历', '教育经历', '校园经历', '其他信息'],
      tipsInfo: ['foundation', 'job', 'oneself', 'practice', 'education', 'campus', 'other'],
      tipsData: [],
      currentSide: 0,
      currentDataInfo: [],
      // 用户详情
      id: 106,
      resume: {},
      templetId: -1,
      templetName: null
    }
  },
  methods: {
    async saveResume () {
      const res = await this.api.updateResume({ id: this.$route.query.id, ...this.resume })
      if (res.data.message === '成功') {
        this.$message({
          type: 'success',
          message: '信息保存成功'
        })
      }
    },
    changeSide (item, index) {
      if (this.currentSide !== index) {
        this.formValidate(this.sideItem[this.currentSide], () => {
          this.validate(index)
        })
      }
      this.currentDataInfo = this.tipsData[this.tipsInfo[this.currentSide]]
    },
    getResumeDetail (id) {
      return this.api.getResumeDetail({ id }).then(res => {
        this.resume = res.data.data
        return res.data.data
      })
    }
  },
  async created () {
    if (this.$route.query.id) {
      const data = await this.getResumeDetail(this.$route.query.id)
      const res = await this.api.getTemplateTips({ id: 1 })
      this.templetId = data.templetId
      this.templetName = data.templetName
      this.tipsData = res.data.data
      this.currentDataInfo = res.data.data[this.tipsInfo[0]]
    }
  },
  beforeRouteLeave (to, from, next) {
    this.saveResume()
    next()
  },
  components: {
    HomeTitle,
    TipsInfo,
    BaseInfo,
    Internship,
    Objective,
    Education,
    Describe,
    Other
  }
}
</script>

<style lang="scss" scoped>
.information {
  .review {
    margin-right: 150px;
    cursor: pointer;
  }
  .temp {
    font-size: 14px;
    color: #585e70;
    transform: translate(-20%);
  }
  .info-header {
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    > .text {
      font-size: 22px;
      color: #585e70;
      font-weight: 600;
      position: relative;
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        top: 50%;
        transform: translate(0, -50%);
        background: url('../../../assets/images/curriculum/solid-line.png')
          no-repeat;
      }
      &::before {
        left: -30px;
      }
      &::after {
        right: -30px;
      }
    }
  }
  .main {
    display: flex;
    .sidebar {
      margin-left: 111px;
      width: 299px;
      min-width: 226px;
      height: 568px;
      box-shadow: 0px 0px 30px 0px rgba(74, 94, 153, 0.02);
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      .side-item {
        .side {
          width: 120px;
          margin: 50px auto 0;
          text-align: center;
          font-size: 17px;
          color: #585e70;
          cursor: pointer;
          &.active {
            border-left: 6px solid #ff8f4b;
            color: #ff8f4b;
          }
        }
      }
    }
    .content {
      flex: 1;
      min-height: 628px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(74, 94, 153, 0.02);
      border-radius: 8px;
      margin: 0 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>