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" size="mini">
        <div class="edit-title">基础信息</div>
        <el-row>
          <form-col :span="span"  label="部门" prop="deptId">
            <dept-tree-select v-model="form.deptId" class="mini-tree-select"/>
          </form-col>
          <form-col :span="span"  label="报表日期" prop="reportDate">
            <el-date-picker v-model="form.reportDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;" :clearable="false"/>
          </form-col>
          <form-col :span="span" label="总金额">
            {{totalPrice.toNumber() | dv}} 元
          </form-col>
        </el-row>
        <el-row>
        </el-row>

        <div class="edit-title">工序产量</div>
        <report-product-edit
          :data="form.productList"
          :rules="productRules"
          :header-cell-style="headerCellStyle"
        />

      </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 {isEmpty, notNullDecimal} from "@/utils";
import {mapGetters} from "vuex";
import Decimal from "decimal.js";
import ReportProductEdit from "@/views/yh/report/components/ReportProductEdit.vue";
import {parseTime} from "@/utils/ruoyi";

export default {
  name: "ReportEdit",
  dicts: ['income_mode'],
  components: {ReportProductEdit, EditHeader, DeptTreeSelect, PriceInput, FormCol},
  data() {
    return {
      title: null,
      loading: false,
      gutter: 16,
      span: 6,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "部门不能为空", trigger: "blur" }
        ],
        reportDate: [
          { required: true, message: "报表日期不能为空", trigger: "blur" }
        ],
        incomeMode: [
          { required: true, message: "工资模式不能为空", trigger: "blur" }
        ]
      },
      productRules: {
        priceId: [
          { required: true, message: "工序不能为空", trigger: "change" }
        ],
        num: [
          { required: true, message: "产量不能为空", trigger: "change" }
        ],
        priceType: [
          { required: true, message: "工序类型不能为空", trigger: "change" }
        ],
        userProductList: {
          userId: [
            { required: true, message: "用户不能为空", trigger: "change" }
          ],
          num: [
            { required: true, message: "产量不能为空", trigger: "change" }
          ]
        }
      },
      headerCellStyle: {
        backgroundColor: "#f5f7fa",
      }
    }
  },
  computed: {
    ...mapGetters(['deptId']),
    // 总价
    totalPrice() {
      let total = new Decimal(0);
      if (this.form != null && !isEmpty(this.form.productList)) {
        this.form.productList.forEach(item => {
          total = total.plus(notNullDecimal(item.price).mul(notNullDecimal(item.num)))
        })
      }
      return total;
    }
  },
  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("新增成功");
            });
          }
        } else {
          this.$message.warning("表单校验未通过，请检查")
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        reportId: null,
        deptId: this.deptId,
        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,
        reportDate: parseTime(new Date(), '{y}-{m}-{d}'),
        productList: [],
      };
      this.resetForm("form");
    },
  }
}
</script>