train-student/src/views/user/experience.vue

<template>
  <div id="experience">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-form>
            <van-field v-model="form.title" name="标题" label="标题" placeholder="标题" :rules="[{ required: true, message: '请填写标题' }]" />
            <van-field
              v-model="form.content"
              name="内容"
              label="内容"
              placeholder="内容"
              type="textarea"
              :rules="[{ required: true, message: '请填写内容' }]"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: experience } = createNamespacedHelpers('experience');
const { mapActions: util } = createNamespacedHelpers('util');
export default {
  name: 'experience',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      title: '',
      isleftarrow: '',
      navShow: true,
      form: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...util({ modelFetch: 'fetch' }),
    ...experience(['update', 'create']),
    async search() {
      const { classid, userid } = this.user;
      const res = await this.modelFetch({ model: 'experience', classid, studentid: userid });
      if (this.$checkRes(res)) this.$set(this, `form`, res.data || {});
    },
    async onSubmit() {
      let msg = this.$toast({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      let duplicate = _.cloneDeep(this.form);
      let res;
      if (_.get(duplicate, '_id')) {
        res = await this.update(duplicate);
      } else {
        const { termid, batchid, classid, userid } = this.user;
        if (!termid) {
          this.$toast({ type: 'fail', message: '学生缺少期信息' });
          return;
        }
        if (!batchid) {
          this.$toast({ type: 'fail', message: '学生缺少批次信息' });
          return;
        }
        if (!classid) {
          this.$toast({ type: 'fail', message: '学生缺少班级信息' });
          return;
        }
        if (!userid) {
          this.$toast({ type: 'fail', message: '缺少学生信息' });
          return;
        }
        duplicate = { ...duplicate, termid, batchid, classid, studentid: userid };
        res = await this.create(duplicate);
      }
      msg.clear();
      this.$checkRes(res, '培训心得保存成功', res.errmsg || '培训心得保存失败');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>