周宾
2 天以前 b80934d8bb58f356abcb00a145d0305be519de8c
src/views/inventoryManagement/receiptManagement/index.vue
@@ -1,12 +1,9 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="成品入库" name="production">
      <!-- <el-tab-pane label="采购入库" name="production">
        <div class="search_form">
          <div>
<!--            <span class="search_title">客户名称:</span>-->
<!--            <el-input v-model="searchForm.customerName" style="width: 240px" placeholder="请输入" @change="handleQuery"-->
<!--              clearable prefix-icon="Search" />-->
            <span class="search_title ml10">入库日期:</span>
            <el-date-picker
              v-model="searchForm.timeStr"
@@ -38,39 +35,28 @@
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="序号" type="index" width="60" />
            <el-table-column label="入库时间" prop="createTime" show-overflow-tooltip />
            <!-- <el-table-column label="入库批次" prop="inboundBatches" show-overflow-tooltip /> -->
<!--            <el-table-column label="客户名称" prop="customerName" width="240" show-overflow-tooltip />-->
            <el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
            <el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
            <el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip />
                  <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip />
<!--                  <el-table-column label="剩余库存" prop="inboundNum0" show-overflow-tooltip />-->
                  <el-table-column label="单价(元)" prop="unitPrice" width="150"></el-table-column>
                  <el-table-column label="总价(元)" prop="totalPrice" width="150"></el-table-column>
<!--            <el-table-column label="含税单价" prop="taxInclusiveUnitPrice" width="100" show-overflow-tooltip />-->
<!--            <el-table-column label="含税总价" prop="taxInclusiveTotalPrice" width="100" show-overflow-tooltip />-->
<!--            <el-table-column label="税率(%)" prop="taxRate" width="80" show-overflow-tooltip />-->
<!--            <el-table-column label="不含税总价" prop="taxExclusiveTotalPrice" width="100" show-overflow-tooltip />-->
            <!-- <el-table-column label="入库人" prop="createBy" width="80" show-overflow-tooltip /> -->
            <el-table-column fixed="right" label="操作" min-width="60" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="openForm('edit', scope.row, 'production');">编辑</el-button>
                <el-button link type="success" size="small" @click="showQRCode(scope.row)">生成条形码</el-button>
                <el-button link type="success" size="small" @click="showERCode(scope.row)">生成二维码</el-button>
                <el-button link type="success" size="small" @click="showQRCode(scope.row,1)">生成条形码</el-button>
                <el-button link type="success" size="small" @click="showERCode(scope.row,1)">生成二维码</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
            :page="page.current" :limit="page.size" @pagination="paginationChange" />
        </div>
      </el-tab-pane>
      </el-tab-pane> -->
      
     <el-tab-pane label="原料入库" name="purchase">
     <el-tab-pane label="采购入库" name="purchase">
       <div class="search_form">
         <div>
<!--&lt;!&ndash;            <span class="search_title">供应商名称:</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input v-model="searchForm.supplierName" style="width: 240px" placeholder="请输入" @change="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;              clearable prefix-icon="Search" />&ndash;&gt;-->
           <span class="search_title ml10">入库日期:</span>
           <el-date-picker
             v-model="searchForm.timeStr"
@@ -102,21 +88,18 @@
           :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)">
           <el-table-column align="center" type="selection" width="55" />
           <el-table-column align="center" label="序号" type="index" width="60" />
           <el-table-column label="入库时间" prop="createTime" width="100" show-overflow-tooltip />
           <!-- <el-table-column label="入库批次" prop="inboundBatches" width="160" show-overflow-tooltip /> -->
<el-table-column label="供应商名称" prop="supplierName" width="240" show-overflow-tooltip />
           <el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
           <el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
           <el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip />
                <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip />
<!--                <el-table-column label="剩余库存" prop="inboundNum0" show-overflow-tooltip />-->
                <el-table-column label="含税单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column>
                <el-table-column label="含税总价(元)" prop="taxInclusiveTotalPrice" width="150"></el-table-column>
<!--&lt;!&ndash;            <el-table-column label="含税单价" prop="taxInclusiveUnitPrice" width="100" show-overflow-tooltip />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column label="含税总价" prop="taxInclusiveTotalPrice" width="100" show-overflow-tooltip />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column label="税率(%)" prop="taxRate" width="80" show-overflow-tooltip />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column label="不含税总价" prop="taxExclusiveTotalPrice" width="100" show-overflow-tooltip />&ndash;&gt;-->
           <el-table-column label="入库人" prop="createBy" width="80" show-overflow-tooltip />
           <el-table-column label="入库时间" prop="inboundDate" width="100" show-overflow-tooltip />
          <el-table-column label="产品名称" prop="productCategory" show-overflow-tooltip />
          <el-table-column label="产品高度" prop="specificationModel" width="100" show-overflow-tooltip>
            <template #default="scope">
              <div>{{ scope.row.specificationModel }}{{ scope.row.unit }}</div>
            </template>
          </el-table-column>
          <el-table-column label="入库数量/件" prop="inboundNum" width="100" show-overflow-tooltip />
          <el-table-column label="每件数量/支" prop="boxNum" width="100" show-overflow-tooltip />
          <el-table-column label="单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column>
          <el-table-column label="纸箱规格" prop="cartonSpecifications" width="150"></el-table-column>
          <el-table-column label="入库人" prop="createBy" width="80" show-overflow-tooltip />
           <el-table-column fixed="right" label="操作" min-width="60" align="center">
             <template #default="scope">
               <el-button link type="primary" size="small" @click="openForm('edit', scope.row, 'purchase');">编辑</el-button>
@@ -130,12 +113,9 @@
       </div>
     </el-tab-pane>
      
      <el-tab-pane label="材料入库" name="manual">
      <el-tab-pane label="成品入库" name="manual">
        <div class="search_form">
          <div>
<!--            <span class="search_title">供应商名称:</span>-->
<!--            <el-input v-model="searchForm.supplierName" style="width: 240px" placeholder="请输入" @change="handleQuery"-->
<!--              clearable prefix-icon="Search" />-->
            <span class="search_title ml10">入库日期:</span>
            <el-date-picker
              v-model="searchForm.timeStr"
@@ -167,27 +147,28 @@
            :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="序号" type="index" width="60" />
            <el-table-column label="产品图片" width="100" align="center">
              <template #default="scope">
                <img class="barcode-img" :src="javaApiUrl+scope.row.url"></img>
              </template>
            </el-table-column>
            <el-table-column label="入库时间" prop="inboundDate" width="100" show-overflow-tooltip />
            <!-- <el-table-column label="入库批次" prop="inboundBatches" show-overflow-tooltip /> -->
<!--             <el-table-column label="供应商名称" prop="supplierName" width="240" show-overflow-tooltip />-->
            <el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
            <el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
            <el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip />
            <el-table-column label="物品类型" prop="itemType" show-overflow-tooltip />
                  <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip />
<!--                  <el-table-column label="剩余库存" prop="inboundNum0" show-overflow-tooltip />-->
<!--                  <el-table-column label="单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column>-->
<!--                  <el-table-column label="总价(元)" prop="taxInclusiveTotalPrice" width="150"></el-table-column>-->
<!--            <el-table-column label="含税单价" prop="taxInclusiveUnitPrice" width="100" show-overflow-tooltip />-->
<!--            <el-table-column label="含税总价" prop="taxInclusiveTotalPrice" width="100" show-overflow-tooltip />-->
<!--            <el-table-column label="税率(%)" prop="taxRate" width="80" show-overflow-tooltip />-->
<!--            <el-table-column label="不含税总价" prop="taxExclusiveTotalPrice" width="100" show-overflow-tooltip />-->
            <el-table-column label="产品名称" prop="productCategory" show-overflow-tooltip />
            <el-table-column label="产品高度" prop="specificationModel" width="100" show-overflow-tooltip>
              <template #default="scope">
                <div>{{ scope.row.specificationModel }}{{ scope.row.unit }}</div>
              </template>
            </el-table-column>
                  <el-table-column label="入库数量/件" prop="inboundNum" width="100" show-overflow-tooltip />
                  <el-table-column label="每件数量/支" prop="boxNum" width="100" show-overflow-tooltip />
                  <el-table-column label="单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column>
                  <el-table-column label="纸箱规格" prop="cartonSpecifications" width="150"></el-table-column>
            <el-table-column label="入库人" prop="createBy" width="80" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="openForm('edit', scope.row, 'manual');">编辑</el-button>
                <el-button link type="success" size="small" @click="showQRCode(scope.row)">生成条形码</el-button>
                <el-button link type="success" size="small" @click="showERCode(scope.row)">生成二维码</el-button>
                <el-button link type="success" size="small" @click="showQRCode(scope.row,2)">生成条形码</el-button>
                <el-button link type="success" size="small" @click="showERCode(scope.row,2)">生成二维码</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -228,6 +209,59 @@
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="barcodeDia" title="产品信息" width="40%" @close="closeBarcodeDia">
      <div>
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">图片</div>
              <img class="barcode-img" :src="javaApiUrl+barcodeDetail.url"></img>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">名称</div>
              <div class="barcode-value">{{barcodeDetail.productCategory}}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">单价</div>
              <div class="barcode-value">{{barcodeDetail.productCategory}}元</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">入库人</div>
              <div class="barcode-value">{{barcodeDetail.createBy}}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">数量/{{barcodeDetail.unit}}</div>
              <div class="barcode-value">{{barcodeDetail.inboundNum}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">规格</div>
              <div class="barcode-value">{{barcodeDetail.specificationModel}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeBarcodeDia">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
@@ -237,11 +271,13 @@
import { ElMessageBox } from "element-plus";
import useUserStore from '@/store/modules/user'
import dayjs from 'dayjs'
const javaApiUrl = __BASE_API__;
import {
   getStockInPage,
   getStockInPageByProduction,
   delStockIn,
   delStockInCustom, getInPageByCustom,
  stockinDetail,detailManagementByCustom
} from "@/api/inventoryManagement/stockIn.js";
import FormDia from './components/formDia.vue'
import FormDiaManual from './components/formDiaManual.vue'
@@ -262,7 +298,7 @@
const formDia = ref()
const formDiaManual = ref()
const formDiaProduct = ref()
const activeTab = ref('production') // 当前激活的 tab
const activeTab = ref('purchase') // 当前激活的 tab
const page = reactive({
  current: 1,
@@ -353,6 +389,7 @@
// 打开弹框
const openForm = async (type, row, tabType) => {
  if(barcodeDia.value)return
  const currentTab = tabType || activeTab.value
  await nextTick(() => {
    if (currentTab === 'manual') {
@@ -424,7 +461,7 @@
    } else {
      // 材料入库
      deleteApi = delStockInCustom
      deleteParams = { ids }
      deleteParams = [...ids]
    }
    
    deleteApi(deleteParams).then(() => {
@@ -442,15 +479,17 @@
// 二维码相关变量
const qrCodeDialogVisible = ref(false);
const qrCodeUrl = ref("");
const showQRCode = async (row) => {
const showQRCode = async (row,type) => {
  if(barcodeDia.value)return
  try {
    // 构建二维码内容,只包含采购合同号(纯文本)
    const qrContent = row.id || '';
    let qrContent = row.id || '';
    // 检查内容是否为空
    if (!qrContent) {
      proxy.$modal.msgWarning("该行商品id,无法生成条形码");
      return;
    }
    qrContent+=`,${type}`
    qrCodeDialogVisible.value = true;
    await nextTick();
    JsBarcode("#barcode", qrContent+'', {
@@ -466,13 +505,15 @@
const erCodeDialogVisible = ref(false);
const erCodeUrl = ref("");
const showERCode = async (row) => {
  const qrContent = row.id || '';
const showERCode = async (row,type) => {
  if(barcodeDia.value)return
  let qrContent = row.id || '';
    // 检查内容是否为空
  if (!qrContent) {
    proxy.$modal.msgWarning("该行商品id,无法生成二维码");
    return;
  }
  qrContent+=`,${type}`
  try {
    erCodeUrl.value = await QRCode.toDataURL(qrContent+'', {
      width: 200,
@@ -519,12 +560,80 @@
  proxy.$modal.msgSuccess("下载成功");
};
//扫码相关参数
const barcodeDia = ref(false);
const scanBarcodeInput = ref('');
const barcodeDetail = ref({})
// 扫码函数
const scanBarcode = (e) => {
  if(!e||!e.target||!e.target.tagName){
    return;
  }
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    return
  }
  if (e.key === 'Enter') {
    let _value = scanBarcodeInput.value
    getDetail(_value)
    scanBarcodeInput.value = ""
  } else {
    scanBarcodeInput.value += e.key
  }
}
const getDetail = (barcode)=>{
  if(barcode.indexOf(",")==-1){
    proxy.$modal.msgWarning("请扫描正确的条形码")
    return
  }
  let barcodeList = barcode.split(",")
  let barcodeId = barcodeList[0]
  let type = barcodeList[1]
  let detailApi = null
  if(type==1){
    detailApi = stockinDetail
  }else if(type==2){
    detailApi = detailManagementByCustom
  }
  if(!detailApi){
    proxy.$modal.msgWarning("请扫描正确的条形码")
    return
  }
  detailApi({id:barcodeId}).then((resp) => {
    if(resp.code!=200||!resp.data)return
    barcodeDetail.value = resp.data
    barcodeDia.value = true
  }).catch(() => {
    proxy.$modal.msgError("查看详情失败")
  })
}
const closeBarcodeDia = () => {
  barcodeDia.value = false
}
onMounted(() => {
  // 添加扫码枪监听事件
  document.addEventListener('keypress', scanBarcode)
  getList()
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.barcode-item{
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.barcode-img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
  background-color: #F5F5F5;
}
</style>