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

<template>
  <div class="app-container">
    <el-card >
      <div slot="header" class="clearfix">
        <i class="el-icon-back" @click="goToAbout">返回  |  </i>
        <!--        <el-link icon="el-icon-edit" :underline="false" @click="goToAbout">编辑</el-link>-->
        <span> 盘点详情</span>
      </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">
                  <el-button slot="append" @click="refresh()" icon="el-icon-refresh"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="盘点时间" >
                <el-date-picker
                  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="auditFlag" @click="storage">盘点并处理库存</el-button>
          <el-button type="warning" v-if="state =='await' || state=='ysh'" :disabled="voidFlag" @click="abolition()">作废</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
            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="tankName"/>
        <el-table-column label="分类名称" align="center" prop="numberName"/>
        <el-table-column label="供应商 " align="center" prop="currentAveragePrice" />
        <el-table-column label="单位" align="center" prop="currentInventoryVolume"/>
        <el-table-column label="当前库存" align="center" prop="currentInventoryVolume"/>
        <el-table-column label="进货数量" align="center" prop="inventoryVolume">
          <template slot-scope="scope">
            <el-input-number :disabled="false" v-model="scope.row.inventoryVolume" @change="change(scope.row)" 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="inventoryVolume">
          <template slot-scope="scope">
            <el-input-number :disabled="false" v-model="scope.row.inventoryVolume" @change="change(scope.row)" 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="inventoryVolume">
          <template slot-scope="scope">
            <el-input-number :disabled="false" v-model="scope.row.inventoryVolume" @change="change(scope.row)" 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' || state=='ysh'"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="请选择商品分类" style="width:100%" @change="chooseOilNumber()">
<!--                    <el-option-->
<!--                      v-for="option in selectOilTypeByPrice"-->
<!--                      :key="option.numberId"-->
<!--                      :label="option.oilType +' '+option.oilName"-->
<!--                      :value="option.numberId"-->
<!--                    ></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商">
                  <el-select v-model="commodityForm.cvsGoodId" placeholder="请选择供应商" style="width:100%" @change="chooseOilNumber()">
                    <!--                    <el-option-->
                    <!--                      v-for="option in selectOilTypeByPrice"-->
                    <!--                      :key="option.numberId"-->
                    <!--                      :label="option.oilType +' '+option.oilName"-->
                    <!--                      :value="option.numberId"-->
                    <!--                    ></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="详细信息">
                  <el-input v-model="commodityForm.detailed" 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="tankName"/>
            <el-table-column label="商品编码" align="center" prop="oilNumber"/>
            <el-table-column label="类别" align="center" prop="oilNumber"/>
            <el-table-column label="供应商" align="center" prop="oilNumber"/>
            <el-table-column label="单位" align="center" prop="oilNumber"/>
            <el-table-column label="当前库存" align="center" prop="oilNumber"/>
          </el-table>
        </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 {abolitionInventoryApi, auditInventoryApi, storageInventoryApi} from "@/api/oilConfig/oilInventory";
import {BigNumber} from "bignumber.js";

export default {
  name: "details",

  data() {
    return {
      detailsList: [],
      commodityList: [],

      commodityForm:{
        cvsGoodId: "",
        cvsGood: "",
        supplierId: "",
        supplier: "",
        detailed: ""
      },
      purchaseForm: {
        orderNumber: "",
        approvalStatus: "",
        orderDate: "",
        totalAmount: 0, //总金额
        productQuantity: 0, //商品数量
        quantityPurchased: 0  //进货数量
      }  ,
      state:'await',

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

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

  async created() {

    if (this.purchaseForm.orderNumber == null) {
      this.refresh();
    }
  },
  methods: {
    // 页面跳转
    goToAbout() {
      this.$router.push('/convenienceStore/purchase/index');
    },
    commodityAdd() {
      this.open = true;
    },
    commodityDel() {

    },
    // 查询商品
    inquire() {
    },

    // 改变数字时
    change(data) {
      // // 库存差异升数
      // data.stockDifference = data.inventoryVolume - data.currentInventoryVolume
      // // 盈亏金额
      // data.profitLossAmount = data.inventoryVolume * data.stockDifference
      //
      // this.sumMethod(this.orderList)
      // 进行保存
      // this.orderForm = data
      // this.edit()
    },

    // 计算header数据
    sumMethod(data) {
      // console.log("sumMethod",data)
      // let this_ = this
      // this_.inventoryVolume =  new BigNumber(0),
      //   this_.stockDifference =  new BigNumber(0),
      //   this_.profitLossAmount = new BigNumber(0),
      //   data.forEach(da => {
      //     if (da.inventoryVolume != null) {
      //       this_.inventoryVolume= this_.inventoryVolume.plus(da.inventoryVolume)
      //     }
      //     if (da.stockDifference != null) {
      //       this_.stockDifference= this_.stockDifference.plus(da.stockDifference)
      //     }
      //     if (da.profitLossAmount != null) {
      //       this_.profitLossAmount= this_.profitLossAmount.plus(da.profitLossAmount)
      //     }
      //   })
    },

    addCommodity () {
      let this_ = this

      console.log("this.multipleSelection",this.multipleSelection)
      this.multipleSelection.forEach(mul=>{
        let now = {
          tankId: mul.id,
          tankName: mul.tankName,
          numberId: mul.numberId,
          numberName: mul.oilNumber,
          inventoryVolume:mul.storedQuantity,
          currentAveragePrice: mul.discountedPrice,
          currentInventoryVolume: mul.storedQuantity
        }
        this_.orderList.push(now)
      })
      this_.open = false
      this.numberOfTanks =  this.numberOfTanks+1

      this_.sumMethod(this_.orderList);

    },
    cancel() {
      this.open = false;
    },
    // 表格选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 刷新订单编号
    refresh() {
      let timestamp = new Date().getTime();
      let min = 100; // 最小的四位数是 1000
      let max = 999; // 最大的四位数是 9999
      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
      }
      let judgmentPermissions2 = await this.judgmentPermissions("盘点入库");
      if (judgmentPermissions2 > 0){
        this.storageFlag = false
      }

      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
      });
    },

    save(){

    },
    // 保存并审核
    audit(){
      // 保存
      let number = this.saveInventory();
      if (number != -1) {
        // 审核
        let fil ={
          id: this.inventoryId
        }
        console.log(" id: this.purchaseId",fil)
        auditInventoryApi(fil).then(res => {
          this.state = 'ysh'
          this.$modal.msgWarning("审核成功");
          this.goToAbout()
        })
      }
    },

    // 入库
    storage() {
      let this_ = this;
      if (this_.inventoryNo.inventoryNo == null) {
        this.$modal.msgWarning("请先选择进货单号");
        return;
      }else if (this_.inventoryNo.inventoryDate==null) {
        this.$modal.msgWarning("请先选择进货时间");
        return;
      }
      this.$confirm('确认后盘点中的对应油品入库油罐库存将发生变化，且不可逆，确认已按照盘点数量入库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 审核
        let fil ={
          id: this.inventoryId
        }
        storageInventoryApi(fil).then(res => {
          this.state = 'qrts'
          this.$modal.msgWarning("入库成功");
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 作废
    abolition(){
      if (this.inventoryId < 0) {
        this.$modal.msgWarning("数据未保存，不可废弃");
        return;
      }
      this.$confirm('确定要废弃盘点好的数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fil ={
          id: this.inventoryId
        }
        abolitionInventoryApi(fil).then(res => {
          if (res.data) {
            this.state = 'yzf'
            this.$modal.msgWarning("作废成功");
            this.goToAbout()
          } else {
            this.$modal.msgWarning("暂无作废权限");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      })
    },
  }
}
</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>