lanan-system-vue/src/views/repair/stockTransfer/Components/StInfo.vue

<template>
  <div>
    <el-form :model="formData" size="small" :inline="true" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="调出门店" prop="oldCorp">
            <CorpChoose v-model="formData.oldCorp"/>
          </el-form-item>
          <el-form-item label="调入门店" prop="newCorp">
            <CorpChoose v-model="formData.newCorp"/>
          </el-form-item>
          <el-form-item label="日期" prop="stTime">
            <el-date-picker
              v-model="formData.stTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单据编号" prop="stNo">
            <el-input disabled v-model="formData.stNo" style="width: 20rem"/>
          </el-form-item>
          <el-form-item label="调拨人" prop="user">
            <StaffChoose v-model="formData.user"/>
          </el-form-item>
          <el-form-item label="选择商品" prop="goodsList">
            <PartChoose @selected="getPart"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <StTable @tableData="tableData" :part-list="partList" @deleteItem="deleteItem"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 1rem">
        <el-col :span="24">
          <el-form-item label="应收金额" prop="totalPrice">
            <el-input disabled v-model="formData.totalPrice"/>
          </el-form-item>
          <el-form-item label="优惠金额" prop="discountPrice">
            <el-input v-model="formData.discountPrice" @blur="handleDiscountPriceChange"/>
          </el-form-item>
          <el-form-item label="本次收款" prop="thisCollection">
            <el-input v-model="formData.thisCollection" @blur="handleThisCollection"/>
          </el-form-item>
          <el-form-item label="本次欠款" prop="thisDebt">
            <el-input disabled v-model="formData.thisDebt"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" style="width: 45rem"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="danger" @click="handleSubmit">结算</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import CorpChoose from "@/views/repair/Components/CorpChoose.vue";
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import PartChoose from "@/views/repair/Components/PartChoose.vue";
import StTable from "@/views/repair/stockTransfer/Components/StTable.vue";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
import {getNowCompany} from "@/api/base/company";
import {createSt} from "@/api/repair/stockTransfer/stockTransfer";

export default {
  name: "StInfo",
  components: {
    StTable,
    PartChoose,
    StaffChoose,
    CorpChoose
  },
  data() {
    return {
      formData: {
        stNo: null,
        newCorp: null,
        oldCorp: null,
        stTime: Date.now(),
        user: null,
        goodsList: [],
        totalPrice: 0,
        discountPrice: 0,
        thisCollection: 0,
        thisDebt: 0,
        remark: null,
        itemCount: 0,
        stStatus: "01"
      },
      partList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // TODO 同调用 init方法，初始化当前门店
    async companyInit() {
      try {
        const res = await getNowCompany()
      } catch {
      }
    },
    // 选择商品
    async getPart(data) {
      const flag = this.partList.find(item => item.id === data.id)
      if (flag) {
        try {
          await this.$modal.confirm(`${data.name}已存在，确定要重复添加？`)
          this.partList.push(data)
        } catch {
        }
      } else {
        this.partList.push(data)
      }
    },
    // 删除商品
    deleteItem(index) {
      this.partList.splice(index, 1)
    },
    // 表格的数据
    tableData(data) {
      const tempPrice = data.reduce((x, y) => {
        return x + y.totalPrice
      }, 0)
      const itemCount = data.reduce((x, y) => {
        return parseInt(x) + parseInt(y.goodsCount)
      }, 0)
      this.formData.totalPrice = tempPrice
      this.formData.thisDebt = tempPrice
      this.formData.itemCount = itemCount
      this.formData.goodsList = data.map(item => {
        return {
          ...item,
          goodsId: item.id,
          goodsCount: item.goodsCount,
          goodsPrice: item.goodsPrice,
          remark: item.remark
        }
      })
    },
    // 优惠变化计算
    handleDiscountPriceChange() {
      this.formData.thisDebt -= this.formData.discountPrice
    },
    // 付款变化计算
    handleThisCollection() {
      this.formData.thisDebt -= this.formData.thisCollection
    },
    // 提交
    async handleSubmit() {
      try {
        const flag = this.formData.oldCorp && this.formData.newCorp && this.formData.user && this.formData.goodsList.length
        if (!flag) await this.$modal.msgError("请完善信息")
        else {
          this.createInit()
          await createSt(this.formData)
          this.$modal.msgSuccess("新增成功")
          this.init()
        }
      } catch {
      }
    },
    // 提交前的处理
    createInit() {
      const data = this.formData
      this.formData = {
        ...data,
        outCorpId: data?.oldCorp?.id,
        inCorpId: data?.newCorp?.id,
        userId: data?.user?.id,
        userName: data?.user?.name,
      }
      this.formData.goodsList.forEach(item => item.id = null)
    },
    // 组件初始化
    init(){
      // TODO 数据库有问题，先抛异常，后面在解决
      this.companyInit()
      this.formData = {
        stNo: null,
        newCorp: null,
        oldCorp: null,
        stTime: Date.now(),
        user: null,
        goodsList: [],
        totalPrice: 0,
        discountPrice: 0,
        thisCollection: 0,
        thisDebt: 0,
        remark: null,
        itemCount: 0,
        stStatus: "01"
      }
      this.formData.stNo = createUniqueCodeByHead("DB")
      this.partList = []
    }
  }
}
</script>

<style scoped lang="scss">

</style>