lanan-system-vue/src/views/repair/stockOperate/Components/SoInfo.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 v-if="soByType" label="供应商" prop="supplier">
            <SupplierChoose v-model="formData.supplier"/>
          </el-form-item>
          <!-- 日期 内嵌 -->
          <el-form-item label="日期" prop="soTime">
            <el-date-picker
              v-model="formData.soTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!-- 单据编号 内嵌 -->
          <el-form-item label="单据编号" prop="soNo">
            <el-input disabled v-model="formData.soNo" style="width: 20rem"/>
          </el-form-item>
          <!-- 采购员/领料人 组件 -->
          <el-form-item :label="staffRole" prop="user">
            <StaffChoose v-model="formData.user" :is-get="'true'"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <!-- 选择商品 组件 -->
        <el-col :span="12">
          <el-form-item label="选择商品">
            <PartChoose @selected="getPart"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button v-if="soByType" type="primary" size="small" @click="newWares">新增商品</el-button>
          <el-button v-else type="primary" size="small" @click="newInStock">急件采购</el-button>
        </el-col>
      </el-row>
      <!-- 商品表格 组件 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <SoTable @tableData="tableData" :part-list="partList" :so-by-type="soByType" @deleteItem="deleteItem"/>
        </el-col>
      </el-row>
      <el-row :gutter="4" style="margin-top: 1rem">
        <el-col :span="6">
          <el-form-item label="应付金额" prop="totalPrice">
            <el-input disabled v-model="formData.totalPrice"/>
          </el-form-item>
        </el-col>
        <!-- 备注 -->
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input style="width: 40rem" v-model="formData.remark"/>
          </el-form-item>
        </el-col>
        <!-- 按钮操作 -->
        <el-col :span="6" style="text-align: right">
          <el-button v-if="soByType" type="danger" @click="handleSubmit">结算</el-button>
          <el-button v-else type="primary" @click="handleSubmit">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
    <WaresForm ref="waresForm" @success="pushData" />
  </div>
</template>

<script>

import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import PartChoose from "@/views/repair/Components/PartChoose.vue";
import SoTable from "@/views/repair/stockOperate/Components/SoTable.vue";
import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
import {createRepairSo} from "@/api/repair/stockOperate/stockOperate";
import {getWaresByName} from "@/api/repair/wares";
import WaresForm from "@/views/repair/wares/WaresForm.vue";
import router from "@/router";

export default {
  name: "SoInfo",
  components: {
    WaresForm,
    StaffChoose,
    PartChoose,
    SoTable,
    SupplierChoose
  },
  props: {
    soByType: {
      type: Boolean,
      defaultValue: true,
      required: true
    },
    soType:{
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      formData: {
        soNo: null,
        supplier: null,
        soTime: Date.now(),
        user: null,
        goodsList: [],
        totalPrice: null,
        soType: this.soByType ? "01" : "02",
        purchaseType: "01",
        itemCount: 0,
        soStatus: this.soByType ? "01" : "04",
        remark: null,
      },
      staffRole: "采购员",
      partList: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    router() {
      return router
    },
    // 得到选择的员工
    getStaff(data) {
      this.formData.userId = data.id
      this.formData.userName = data.name
    },
    // 得到选择的供应商
    getSupplier(data) {
      this.formData.supplierId = data.id
      this.formData.supplierName = data.name
    },
    // 得到选择的商品
    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){
      this.formData.totalPrice = data.reduce((x, y) => {return x + y.totalPrice}, 0)
      this.formData.itemCount = data.reduce((x, y) => {return x + y.count}, 0)
      this.formData.goodsList = data.map(item => {
        return {
          goodsId: item.id,
          goodsType: this.soType ? "1": "0",
          wareId: item.wareId,
          goodsCount: item.count,
          goodsPrice: item.newPrice,
          remark: item.remark,
          soiType: this.soByType ? "01" : "02"
        }
      })
    },
    // 提交
    async handleSubmit(){
      try {
        await this.createInit()
        await createRepairSo(this.formData)
        this.$modal.msgSuccess("新增成功")
        this.init()
      }catch{
      }
    },
    // 初始化
    init(){
      this.formData = {
        soNo: null,
        supplier: null,
        soTime: Date.now(),
        user: null,
        goodsList: [],
        totalPrice: null,
        soType: this.soByType ? "01" : "02",
        purchaseType: "01",
        itemCount: 0,
        soStatus: this.soByType ? "01" : "04",
        remark: null,
      }
      this.formData.soNo = createUniqueCodeByHead(this.soByType ? "CG" : "LL")
      this.staffRole = this.soByType ? this.staffRole : "领料人"
      this.partList = []
      if (this.soType){
        this.formData.soType = this.soType
        this.formData.purchaseType = '02'
      }
    },
    // 提交前的构建
    async createInit(){
      const data = this.formData
      this.formData = {
        ...data,
        userId: data?.user?.id,
        userName: data?.user?.name,
      }
      if (this.soByType){
        this.formData = {
          ...this.formData,
          supplierId: data?.supplier?.id,
          supplierName: data?.supplier?.name
        }
      }
    },
    // 新增商品
    newWares(){
      this.$refs.waresForm.open(null);
    },
    // 新增商品回调
    async pushData(name){
      const res = await getWaresByName(name)
      const data = res.data
      this.partList.push({
        ...data,
        wareId: data.warehouse
      })
    },
    // 急件采购
    newInStock(){
      this.$router.push("/repair/stock/repair-soi?active=purchaseCreate&soType=03")
    }
  }
}
</script>

<style scoped lang="scss">

</style>