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="small">
        <div class="edit-title">基础信息</div>
        <el-row>
          <form-col :span="span"  label="部门" prop="deptId">
            <dept-tree-select v-model="form.deptId" height="28px"/>
          </form-col>
          <form-col :span="span"  label="报表日期" prop="reportDate">
            <el-date-picker v-model="form.reportDate" type="date" placeholder="选择日期" style="width: 100%;" :clearable="false"/>
          </form-col>
          <form-col :span="span" label="工资模式" prop="incomeMode">
            <el-radio-group v-model="form.incomeMode">
              <el-radio v-for="item in dict.type.income_mode" :key="item.value" :label="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </form-col>
<!--          <form-col :span="span"  label="选择工序" prop="priceId">-->
<!--            <price-input v-model="form.priceId" @change="onChangePrice" placeholder="点击选择工序" title="选择工序"/>-->
<!--          </form-col>-->
<!--          <form-col :span="span"  label="完成数量" prop="num">-->
<!--            <el-input v-model="form.num" placeholder="请输入工序完成数量" :min="1" type="number"/>-->
<!--          </form-col>-->
          <form-col :span="span" label="总价">
            {{totalPrice.toNumber() | dv}} 元
          </form-col>
        </el-row>
        <el-row>
        </el-row>

        <div class="edit-title">工序列表</div>
        <edit-price
          :data="form.priceList"
          :rules="incomeRules"
          :header-cell-style="headerCellStyle"
        />


        <div class="edit-title">工资详情</div>
        <edit-income
          :data="form.incomeList"
          :rules="incomeRules"
          :header-cell-style="headerCellStyle"
          :total-price="totalPrice.toNumber()"
        />

<!--        <div class="edit-title">关联订单</div>-->
<!--        <edit-order :data="form.orderList" :rules="incomeRules" :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 EditIncome from "@/views/yh/report/components/EditIncome.vue";
import {isEmpty, notNullDecimal} from "@/utils";
import EditOrder from "@/views/yh/report/components/EditOrder.vue";
import {mapGetters} from "vuex";
import EditPrice from "@/views/yh/report/components/EditPrice.vue";
import Decimal from "decimal.js";

export default {
  name: "ReportEdit",
  dicts: ['income_mode'],
  components: {EditPrice, EditOrder, EditIncome, 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" }
        ]
      },
      incomeRules: {
        userId: [
          { required: true, message: "员工不能为空", trigger: "change" }
        ],
        score: [
          { required: true, message: "分数不能为空", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "分数只能为数字", trigger: "blur"}
        ]
      },
      headerCellStyle: {
        backgroundColor: "#f5f7fa",
      }
    }
  },
  computed: {
    ...mapGetters(['deptId']),
    // 总价
    totalPrice() {
      let total = new Decimal(0);
      if (this.form != null && !isEmpty(this.form.priceList)) {
        this.form.priceList.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: new Date(),
        incomeList: [],
        orderList: [],
        priceList: [],
      };
      this.resetForm("form");
    },
  }
}
</script>