ruoyi-project/java代码/ruoyi-ui/src/views/merits/apply/form-frame.vue

<template>
  <div id="form-frame">
    <el-row>
      <el-col :span="24" class="formMain">
        <el-col :span="24" class="one">
          <el-button
            type="primary"
            plain
            icon="el-icon-back"
            size="mini"
            @click="toBack"
            >返回</el-button
          ></el-col
        >
        <el-col :span="24" class="two">
          <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="申请年度" prop="apply_year">
              <el-input
                v-model="form.apply_year"
                placeholder="请输入申请年度"
              ></el-input>
            </el-form-item>
            <el-col :span="24" class="btn">
              <el-button type="primary" @click="onSubmit('form')"
                >提交保存</el-button
              >
              <el-button type="warning" @click="onDraft()">保存草稿</el-button>
              <el-button @click="onReset('form')">重置信息</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const { mapActions: merits_apply } = createNamespacedHelpers("merits_apply");
export default {
  name: "form-frame",
  props: {
    id: { type: String },
  },
  components: {},
  data: function () {
    return {
      form: {},
      rules: {
        apply_year: [
          { required: true, message: "请输入申请年度", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.$set(this, `form`, { user_id: this.user_id, user_name: this.name });
  },
  methods: {
    ...merits_apply(["fetch", "create", "update"]),
    // 返回
    toBack() {
      this.$emit("toBack");
    },
    // 提交保存
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          data.status = "1";
          let res;
          if (data.id) res = await this.update(data);
          else res = await this.create(data);
          if (res.code === 200) {
            this.$message({ type: `success`, message: res.msg });
            this.toBack();
          } else {
            this.$message({ type: `error`, message: res.msg });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 保存草稿
    async onDraft() {
      let data = this.form;
      let res;
      if (data.id) res = await this.update(data);
      else res = await this.create(data);
      if (res.code === 200) {
        this.$message({ type: `success`, message: res.msg });
        this.toBack();
      } else {
        this.$message({ type: `error`, message: res.msg });
      }
    },
    // 查看详情
    async searchInfo(id) {
      let res = await this.fetch(id);
      if (res.code === 200) {
        this.$set(this, `form`, res.data);
      } else {
        this.$message({ type: `error`, message: res.msg });
      }
    },
    // 重置信息
    onReset(formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {
    ...mapGetters(["user_id", "name"]),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    id: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.searchInfo(val);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.formMain {
  .one {
    margin: 0 0 10px 0;
  }
  .two {
    border: 1px solid #ccc;
    padding: 10px;
    .btn {
      text-align: center;
      margin: 10px 0 0 0;
    }
  }
}
</style>