oil-station/fuintAdmin/src/views/convenienceStore/purchase/details.vue

<template>
  <div class="app-container">
    <el-card >
      <div slot="header" class="clearfix" style="display: flex; justify-content: space-between;">
        <div>
          <i class="el-icon-back" @click="goToAbout">返回  |  </i>
        <!--        <el-link icon="el-icon-edit" :underline="false" @click="goToAbout">编辑</el-link>-->
        <span> 进货详情</span>
        </div>
    
      </div>
      <div style="height: 90px; display: flex; justify-content: space-between;">
        <div style="height: 100%; width: 50%; display: flex; justify-content: space-between;">
          <div style="height: 100%; width: 70%;  display: flex; justify-content: space-between;">
            <div class="box">
              <span>{{purchaseForm.totalAmount}}</span>
              <span>总金额</span>
            </div>
            <div class="box">
              <span>{{purchaseForm.productQuantity}}</span>
              <span>商品数量</span>
            </div>
            <div class="box">
              <span>{{purchaseForm.quantityPurchased}}</span>
              <span>进货数量</span>
            </div>
          </div>
          <div style="height: 100%; width: 30%; display: flex; flex-direction: column; justify-content: space-between;">
            <el-form ref="myForm" label-width="100px">
              <el-form-item label="进货单号">

                <el-input  v-model="purchaseForm.orderNumber"
                           style="width: 220Px" :disabled="numberInput">
                  <el-button v-if="!numberInput" slot="append" @click="refresh()" icon="el-icon-refresh"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="进货时间" >
                <el-date-picker
                :disabled="numberInput"
                  style="width: 220Px"
                  v-model="purchaseForm.orderDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="height: 100%; width: 30%; display: flex; align-items: center; justify-content: flex-end;">
          <el-button type="primary" v-if="state=='await'" :disabled="saveFlag" @click="save()">保存</el-button>
          <el-button type="success" v-if="state=='await'" :disabled="auditFlag" @click="audit">保存并审核</el-button>
          <el-button type="success" v-if="state=='ysh'" :disabled=" storageFlag" @click="storage()">进货并入库</el-button>
          <el-button type="warning" v-if="state =='!await' || state=='ysh'" :disabled="voidFlag" @click="abolition()">作废</el-button>
          <el-button type="warning" v-if="state !='await'" @click="exportExcel()">导出</el-button>
        </div>

      </div>
    </el-card>


    <el-card style="margin-top: 20px" >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
          v-if="!numberInput"
            type="primary"
            icon="el-icon-plus"
            @click="commodityAdd"
          >添加进货</el-button>
        </el-col>
        <!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>
      <el-table ref="tables"
                v-loading="loading"
                :data="detailsList"
                :default-sort="defaultSort">

        <el-table-column label="商品名称" align="center" prop="commodityName"/>
        <el-table-column label="分类名称" prop="cvsGoodId" align="center">
          <template slot-scope="scope">
            <span>{{ getName(cvsGoodList, scope.row.cvsGoodId) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="供应商" prop="supplierId" align="center">
          <template slot-scope="scope">
            <span>{{ getName(supplierList, scope.row.supplierId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="unit">
          <template slot-scope="scope">
            <span>{{ scope.row.unit == null?"-":scope.row.unit}}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前库存" align="center" prop="stock"/>
        <el-table-column label="进货数量" align="center" prop="quantityPurchased">
          <template slot-scope="scope">
            <el-input-number :disabled="numberInput" v-model="scope.row.quantityPurchased" @change="change(scope.row,1)" :precision="0" controls-position="right" :min="1" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="进货单价" align="center" prop="unitPrice">
          <template slot-scope="scope">
            <el-input-number :disabled="numberInput" v-model="scope.row.unitPrice" @change="change(scope.row,2)" :precision="2" controls-position="right" :min="0" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计金额" align="center" prop="subtotalAmount">
          <template slot-scope="scope">
            <el-input-number :disabled="numberInput" v-model="scope.row.subtotalAmount" @change="change(scope.row,3)" :precision="2" controls-position="right" :min="0" :max="100000000" :step="1" style="max-width: 100%"></el-input-number>
          </template>
        </el-table-column>
      <el-table-column v-if="state =='await'" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="commodityDel(scope.row)"
            >删除</el-button>
          </template>
          <!--          v-hasPermi="['']"-->

        </el-table-column>
      </el-table>

      <!--      <pagination-->
      <!--        v-show="total>0"-->
      <!--        :total="total"-->
      <!--        :page.sync="queryParams.page"-->
      <!--        :limit.sync="queryParams.pageSize"-->
      <!--        @pagination="getList"-->
      <!--      />-->
    </el-card>


    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
      <el-container>
        <el-header style="">
          <el-form ref="tankForm" :model="commodityForm" label-width="80px">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="商品分类">
                    <el-select
                      v-model="commodityForm.cvsGoodId"
                      placeholder="全部"
                      clearable
                    >
                      <el-option v-for="item in cvsGoodList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
              <el-form-item label="供应商" prop="supplierId">
                <el-select
                  v-model="commodityForm.supplierId"
                  placeholder="全部"
                  clearable
                >
                  <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="详细信息">
                  <el-input v-model="commodityForm.remark" placeholder="商品名称，拼音码，条形码等信息" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="inquire()">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-main>
          <el-table ref="tables"
                    v-loading="loading"
                    :data="commodityList"
                    @selection-change="handleSelectionChange"
                    border
                    :default-sort="defaultSort">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column label="商品名称" align="center" prop="name"/>
            <el-table-column label="商品编码" align="center" prop="goodsNo"/>
            <el-table-column label="分类名称" prop="cvsGoodId" align="center">
              <template slot-scope="scope">
                <span>{{ getName(cvsGoodList, scope.row.cvsGoodId) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="供应商" prop="supplierId" align="center">
              <template slot-scope="scope">
                <span>{{ getName(supplierList, scope.row.supplierId) }}</span>
              </template>
            </el-table-column>
              <el-table-column label="单位" align="center" prop="unit"/>
            <el-table-column label="当前库存" align="center" prop="stock"/>
          </el-table>
           <!-- <pagination
             v-show="commodityForm.total>0"
             :total="commodityForm.total"
             :page.sync="commodityForm.page"
             :limit.sync="commodityForm.pageSize"
             @pagination="getCommodityList"
            /> -->
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCommodity">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getAuditPremApi} from "@/api/oilConfig/staff";


import {BigNumber} from "bignumber.js";
import {listLJGoods} from "@/api/convenienceStore/ljgoods";
import {getName,parseTime} from "../../../utils/fuint";
import {selectParentById, selectTree} from "@/api/convenienceStore/goods";
import {listSupplier} from "@/api/convenienceStore/supplier";
import {
  getPurchaseDetailsPageApi,
  delDetailsApi,
  editPurchaseApi,
  addPurchaseApi,
  batchProcessingApi,
  auditPurchaseApi,
  storagePurchaseApi,
  abolitionPurchaseApi,
  exportExcelApi,
} from "@/api/convenienceStore/purchase";


export default {
  name: "details",
  props:[
    'PpurchaseId',
    'PorderNumber',
    'PorderDate',
    'PapprovalStatus'
  ],
  data() {
    return {
      detailsList: [],
      commodityList: [],
      purchaseId:null,
      commodityForm:{
        cvsGoodId: "",
        cvsGood: "",
        supplierId: "",
        supplier: "",
        detailed: "",
        remark: "",
        page: 1,
        pageSize: 1000,
        total: 0,
        isRecovery:0,
      },
      purchaseForm: {
        orderNumber: null,
        approvalStatus: "",
        orderDate: null,
        totalAmount: 0, //总金额
        productQuantity: 0, //商品数量
        quantityPurchased: 0  //进货数量
      }  ,

      // 商品分类列表
      cvsGoodList:[],
      // 供应商列表
      supplierList:[],


      state:'await',

      saveFlag:false,
      auditFlag:false,
      voidFlag:false,
      storageFlag:false,
      multipleSelection:[], // 表格

      // 弹出框标题
      title:'选择商品',
      // 显示搜索条件
      showSearch: true,
      disableInput: false, // 默认不禁用
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
    
      // 查询参数
      queryParams: {
        // supplierId: '',
        purchaseId: null,
        page:1,
        pageSize:10000
      },
      // 遮罩层
      loading: false,
      // 默认排序
      defaultSort: {prop: 'createTime', order: 'descending'},
      // 表单校验
      rules: {
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
        ],
      },
    }
  },

  async created() {

    this.purchaseForm.purchaseId = this.$props.PpurchaseId
    this.purchaseId = this.$props.PpurchaseId
    this.queryParams.purchaseId = this.$props.PpurchaseId
    this.purchaseForm.orderNumber = this.$props.PorderNumber
    this.purchaseForm.orderDate = this.$props.PorderDate
    this.purchaseForm.approvalStatus = this.$props.PapprovalStatus
    this.state = this.$props.PapprovalStatus

    console.log("this.purchaseForm",this.purchaseForm)

    if ( this.state == null) {
      this.state = 'await'
    }

    if (this.state=='await') {
      this.numberInput = false
    }else {
      this.numberInput = true
    }


    if (this.purchaseForm.orderNumber == null) {
      this.refresh();
    }
    if (this.purchaseForm.orderDate == null) {
      this.purchaseForm.orderDate =new Date()
    }

    this.getDetailsList();
    this.getQueryList();
    this.JudgmentButton();
  },
  methods: {
    getDetailsList() {
      let this_ = this
      getPurchaseDetailsPageApi(this.queryParams).then(res=>{
        this_.detailsList = res.data.records;
        this.total = res.data.total;
        this.sumMethod(res.data.records);
      })
    },
    getCommodityList() {
      let this_ = this
      listLJGoods(this_.commodityForm).then(res=>{
        this_.commodityList = res.data.records;
        this.commodityForm.total = response.data.total;
        // this_.sumMethod(res.data.records);
      })
    },
    // 页面跳转
    goToAbout() {
      this.$router.push('/convenienceStore/purchase/index');
    },
    commodityAdd() {
      this.open = true;
    },
    commodityDel(data) {


      this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          if (data.id != null) {
            delDetailsApi(data).then(res=>{
            })
          }
          const index = this.detailsList.indexOf(data); // 查找要删除的对象的索引
          if (index !== -1) {
            this.detailsList.splice(index, 1); // 使用splice方法删除对象
          }
          this.sumMethod(this.detailsList);

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


   
    },
    // 查询商品
    inquire() {
      this.getCommodityList();
    },

    // 改变数字时
    change(data,flag) {

      let quantityPurchased = new BigNumber( data.quantityPurchased);
      let unitPrice = new BigNumber( data.unitPrice);
      let subtotalAmount = new BigNumber(data.subtotalAmount);

      data.subtotalAmount = quantityPurchased.times(unitPrice)

      if (flag == 3) {
        data.unitPrice = subtotalAmount.dividedBy(quantityPurchased);
      }

      this.sumMethod(this.detailsList);
      console.log("this.detailsList",this.detailsList)
      // 进行保存
      // this.detailsList = data
      // this.edit()
    },

    // 计算header数据
    sumMethod(data) {
      let this_ = this

      this_.purchaseForm.totalAmount = data.length

      this_.purchaseForm.productQuantity =  data.length,
      this_.purchaseForm.totalAmount =  new BigNumber(0),
      this_.purchaseForm.quantityPurchased = new BigNumber(0),

      data.forEach(da => {
        if (da.unitPrice != null) {
          this_.purchaseForm.quantityPurchased= this_.purchaseForm.quantityPurchased.plus(da.quantityPurchased)
        }
        if (da.subtotalAmount != null) {
          this_.purchaseForm.totalAmount= this_.purchaseForm.totalAmount.plus(da.subtotalAmount)
        }
      })
    },

    addCommodity () {
      let this_ = this
      let sum = 0;
      this.multipleSelection.forEach(mul=>{
        let flag = true;
        this_.detailsList.forEach(det=>{
          if (mul.id == det.goodsId) {
            flag = false
            sum++
          }
        })
        if(flag) {
          let now = {
          goodsId: mul.id,
          commodityName: mul.name,
          supplierId: mul.supplierId,
          cvsGoodId: mul.cvsGoodId,
          unit:mul.unit,
          stock:mul.stock,
          quantityPurchased: 1,
          unitPrice: 0,
          subtotalAmount: 0
        }
        this_.detailsList.push(now)
        }
        
      })

      if(sum>0) {
        this.$modal.msgError("同一退货单不能有两件相同的商品，您选择了"+sum+"件相同的商品，已为您剔除");
      }
      this_.open = false
      this.multipleSelection = []
      this.commodityForm = {
        cvsGoodId: "",
        cvsGood: "",
        supplierId: "",
        supplier: "",
        detailed: "",
        remark: "",
        page: 1,
        pageSize: 1000,
        total: 0,
        isRecovery:0,
      }
      this.commodityList = []

      this_.sumMethod(this_.detailsList);
    },

    // 查询搜索列表信息
    getQueryList(){
      selectTree().then(response => {
        this.cvsGoodList = response.data.records
      });
      listSupplier().then(response => {
        this.supplierList = response.data.records
      })
    },
    cancel() {
      this.open = false;
    },
    // 表格选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 刷新订单编号
    refresh() {
      let timestamp = new Date().getTime();
      let min = 100; // 最小的四位数是 100
      let max = 999; // 最大的四位数是 999
      let randomFourDigitNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      this.purchaseForm.orderNumber = timestamp+randomFourDigitNumber.toString();
    },



    // 判断按钮是否可用
    async JudgmentButton(){
      let judgmentPermissions1 = await this.judgmentPermissions("进货审核");
      if (judgmentPermissions1 > 0){
        this.auditFlag=false
        // this.voidFlag=false
      } else {
        this.auditFlag=true
      }
      let judgmentPermissions2 = await this.judgmentPermissions("进货入库");
      if (judgmentPermissions2 > 0){
        this.storageFlag = false
      }else {
        this.storageFlag = true
      }

      let judgmentPermissions3 = await this.judgmentPermissions("进货废止");
      if (judgmentPermissions3 > 0){
        this.voidFlag=false
      }else {
        this.voidFlag=true

      }
    },

    // 判断权限
    async judgmentPermissions(data) {
      let fil ={
        auditPrem:data
      }
      return await getAuditPremApi(fil).then(res => {
        return res.data
      });
    },



    async save(flag){
      let this_ = this
      // 保存之前进行判断
      if (this_.purchaseForm.orderNumber == null) {
        this.$modal.msgError("进货单号不能为空");
        return -1;
      }else if (this_.purchaseForm.orderDate == null) {
        this.$modal.msgError("进货时间不能为空");
        return -1;
      }else if(this_.detailsList.length<=0) {
        this.$modal.msgError("进货单不能为空");
        return -1;
      }

      if (this_.purchaseId == null) {
        // 新增
        await addPurchaseApi(this_.purchaseForm).then(res=>{
          this_.purchaseId = res.data.id
          this.queryParams.purchaseId = res.data.id
        }).catch(res=>{
          this.$modal.msgError("保存失败");
          return;
        })
      }else {
        // 修改
        this_.purchaseForm.id = this_.purchaseId 
        this.queryParams.purchaseId = this_.purchaseId 
        await editPurchaseApi(this_.purchaseForm).then(res=> {
        }).catch(res=>{
          this.$modal.msgError("保存失败");
          return;
        })
      }
      // 批量保存订单

      this_.detailsList.forEach(data=>{
        data.purchaseId = this_.purchaseId
      })

      await batchProcessingApi(this_.detailsList).then(res=>{
        this.$modal.msgSuccess("保存成功");
        if (flag == -1) {
          this.goToAbout();

        }
      }).catch(res=>{
        this.$modal.msgError("保存失败");
      })

    },
    // 保存并审核
    async audit(){
      // 保存
      let number = await this.save(-1);
      if (number != -1) {
        // 审核
        let fil ={
          id: this.purchaseId
        }
        console.log(" id: this.purchaseId1",fil)
        await auditPurchaseApi(fil).then(res => {

          if (res.data) {
            this.state = 'ysh'
            this.$modal.msgWarning("审核成功");
            this.goToAbout()
          } else {
            this.$modal.msgWarning("暂无审核权限");
          }
     
        })
      }
    },

    // 入库
    storage() {
      let this_ = this;
      // 保存之前进行判断
      if (this_.purchaseForm.orderNumber == null) {
        this.$modal.msgError("进货单号不能为空");
        return -1;
      }else if (this_.purchaseForm.orderDate == null) {
        this.$modal.msgError("进货时间不能为空");
        return -1;
      }else if(this_.detailsList.length<=0) {
        this.$modal.msgError("进货单不能为空");
        return -1;
      }

      this.$confirm('确认后进货中的对应商品入库，商品库存将发生变化，且不可逆，确认已按照进货数量入库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 审核
        let fil ={
          id: this.purchaseId
        }
        console.log("fil",fil)
        storagePurchaseApi(fil).then(res => {
          this.state = 'qrts'
          this.$modal.msgWarning("入库成功");
          this.goToAbout();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 作废
    abolition(){
      if (this.PurchaseId < 0) {
        this.$modal.msgWarning("数据未保存，不可废弃");
        return;
      }
      this.$confirm('确定要废弃进货的数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fil ={
          id: this.purchaseId
        }
        abolitionPurchaseApi(fil).then(res => {
          if (res.data) {
            this.state = 'yzf'
            this.$modal.msgWarning("作废成功");
            this.goToAbout()
          } else {
            this.$modal.msgWarning("暂无作废权限");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      })
    },

        // 导出
    async exportExcel() {

      let fil ={
          purchaseId: this.purchaseId
        }

      exportExcelApi(fil).then(res=>{
        console.log("res",res)
        // this.downloadFile(res);
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        this.$download.saveAs(blob,'库存统计.xLsx')
      })
    },

    // downloadFile(blobData) {
    //   this.$down()
    //   // 创建一个 Blob 对象，并创建一个 URL，用于下载文件
    //   const blob = new Blob([blobData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    //   const url = window.URL.createObjectURL(blob);
    //   const link = document.createElement('a');
    //   link.href = url;

    //   // 设置下载文件的名称
    //   link.setAttribute('download', 'exportedFile.xlsx');

    //   // 模拟点击链接进行下载
    //   link.click();
    // },
  }
}
</script>

<style scoped>
.app-container{
  width: 100%;
  height: 100%;
  background: #f6f8f9;
}

.box {
  height: 100%;
  width: 50%;
  margin-right: 10px;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>