yh-ui/src/views/yh/report/edit.vue

<template>
  <div>
    <edit-header :title="title">
      <el-button type="primary" @click="submitForm" icon="el-icon-check">提交</el-button>
    </edit-header>

    <div class="app-container" v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="edit-title">基础信息</div>
        <el-row>
          <form-col :span="span"  label="部门" prop="deptId">
            <dept-tree-select v-model="form.deptId"/>
          </form-col>
          <form-col :span="span"  label="选择单价" prop="priceId">
            <price-input v-model="form.priceId"/>
          </form-col>
          <form-col :span="span"  label="完成数量" prop="num">
            <el-input v-model="form.num" placeholder="请输入工序完成数量" :min="1" type="number"/>
          </form-col>
        </el-row>

        <div class="edit-title">工资详情</div>
        <edit-income :data="form.incomeList" :rules="incomeRules"/>
      </el-form>
    </div>
  </div>

</template>

<script>
import FormCol from "@/components/FormCol/index.vue";
import PriceInput from "@/components/Business/Price/PriceInput.vue";
import DeptTreeSelect from "@/components/Business/Dept/DeptTreeSelect.vue";
import {addReport, getReport, updateReport} from "@/api/yh/report";
import EditHeader from "@/components/EditHeader/index.vue";
import EditIncome from "@/views/yh/report/components/EditIncome.vue";

export default {
  name: "ReportEdit",
  components: {EditIncome, EditHeader, DeptTreeSelect, PriceInput, FormCol},
  data() {
    return {
      title: null,
      loading: false,
      gutter: 16,
      span: 6,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "部门不能为空", trigger: "blur" }
        ],
        num: [
          { required: true, message: "工序完成数量不能为空", trigger: "blur" }
        ],
        priceId: [
          { required: true, message: "单价不能为空", trigger: "change" }
        ],
      },
      incomeRules: {
        userId: [
          { required: true, message: "员工不能为空", trigger: "change" }
        ]
      }
    }
  },
  created() {
    this.form.reportId = this.$route.params.reportId;
    if (this.form.reportId == null) {
      this.title = "新增报表";
      this.reset();
    } else {
      this.title = "修改报表";
      this.getDetail(this.form.reportId);
    }
  },
  methods: {
    getDetail(reportId) {
      this.loading = true;
      getReport(reportId).then(response => {
        this.form = response.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.reportId != null) {
            updateReport(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addReport(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        reportId: null,
        deptId: null,
        num: null,
        status: null,
        priceId: null,
        priceCategory: null,
        priceSize: null,
        priceName: null,
        priceSubName: null,
        pricePattern: null,
        priceSpec: null,
        pricePrice: null,
        priceUnit: null,
        priceClassify: null,
        priceQuantity: null,
        createTime: null,
        createId: null,
        createBy: null,
        verifyTime: null,
        verifyId: null,
        verifyBy: null,
        updateTime: null,
        updateId: null,
        updateBy: null,
        incomeList: []
      };
      this.resetForm("form");
    },
  }
}
</script>