军泰伟业 1.迁移仓库

gaoluyang

6 天以前 3712799f3e0904f28e4268deaa5c5ee291323c38

 src/views/inventoryManagement/receiptManagement/index.vue

@@ -1,7 +1,59 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
     <el-tab-pane label="采购入库" name="purchase">
      <el-tab-pane label="成品入库" name="production">
        <div class="search_form">
          <div>
            <span class="search_title ml10">入库日期：</span>
            <el-date-picker
              v-model="searchForm.timeStr"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              clearable
              @change="handleQuery"
            />
            <span class="search_title ml10">产品大类：</span>
            <el-input
              v-model="searchForm.productCategory"
              style="width: 240px"
              placeholder="请输入"
              clearable
            />
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
          </div>
          <div>
            <el-button @click="handleOut">导出</el-button>
            <el-button type="danger" plain @click="handleDelete">删除</el-button>
          </div>
        </div>
        <div class="table_list">
          <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
            :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%"
            :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" show-overflow-tooltip />
                  <el-table-column label="销售合同号" prop="salesContractNo" width="180" 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="unitPrice" width="150"></el-table-column>
                  <el-table-column label="总价(元)" prop="totalPrice" width="150"></el-table-column>
            <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>
              </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 label="原料入库" name="purchase">
       <div class="search_form">
         <div>
           <span class="search_title ml10">入库日期：</span>
@@ -36,20 +88,18 @@
           <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="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="purchaseContractNumber" width="180" 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="taxInclusiveUnitPrice" width="150"></el-table-column>
          <el-table-column label="入库人" prop="createBy" width="120" 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="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>
                <!-- <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>
@@ -58,7 +108,7 @@
       </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 ml10">入库日期：</span>
@@ -92,28 +142,20 @@
            :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="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="150" show-overflow-tooltip />
                  <el-table-column label="批次号" prop="code" width="130" 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="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,2)">生成条形码</el-button>
                <el-button link type="success" size="small" @click="showERCode(scope.row,2)">生成二维码</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -126,102 +168,6 @@
    <form-dia ref="formDia" @close="handleQuery" @success="handleQuery"></form-dia>
    <form-dia-manual ref="formDiaManual" @close="handleQuery" @success="handleQuery"></form-dia-manual>
    <form-dia-product ref="formDiaProduct" @close="handleQuery" @success="handleQuery"></form-dia-product>
    <el-dialog
      v-model="qrCodeDialogVisible"
      title="商品条形码"
      width="400px"
      center
    >
      <div style="text-align: center;">
        <img id="barcode" style="width:200px;height: 50px;"/>
        <!-- <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" /> -->
        <div style="margin: 20px;">
          <el-button type="primary" @click="downloadQRCode">下载条形码</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 二维码显示对话框 -->
    <el-dialog
      v-model="erCodeDialogVisible"
      title="商品二维码"
      width="400px"
      center
    >
      <div style="text-align: center;">
        <img :src="erCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <div style="margin: 20px;">
          <el-button type="primary" @click="downloadERCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="barcodeDia" title="产品信息" width="40%" @close="closeBarcodeDia">
      <div>
        <el-row v-if="barcodeDetail.url" :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.specificationModel}}{{barcodeDetail.unit}}</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.taxInclusiveUnitPrice}}美元/件</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.inboundNum}}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">每件数量/支</div>
              <div class="barcode-value">{{barcodeDetail.boxNum}}</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.cartonSpecifications}}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="barcode-item">
              <div class="barcode-label">入库人</div>
              <div class="barcode-value">{{barcodeDetail.createBy}}</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>

@@ -231,19 +177,15 @@
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'
import FormDiaProduct from './components/formDiaProduct.vue'
import QRCode from "qrcode";
import JsBarcode from "jsbarcode";

// 获取当前日期
function getCurrentDate() {
@@ -258,7 +200,7 @@
const formDia = ref()
const formDiaManual = ref()
const formDiaProduct = ref()
const activeTab = ref('purchase') // 当前激活的 tab
const activeTab = ref('production') // 当前激活的 tab

const page = reactive({
  current: 1,
@@ -342,14 +284,13 @@
  // 切换 tab 时清空搜索条件
  searchForm.value.supplierName = ''
  searchForm.value.customerName = ''
  searchForm.value.timeStr = getCurrentDate() // 重置为当前日期
  searchForm.value.timeStr = ''
  searchForm.value.productCategory = ''
  getList()
}

// 打开弹框
const openForm = async (type, row, tabType) => {
  if(barcodeDia.value)return
  const currentTab = tabType || activeTab.value
  await nextTick(() => {
    if (currentTab === 'manual') {
@@ -421,7 +362,7 @@
    } else {
      // 材料入库
      deleteApi = delStockInCustom
      deleteParams = [...ids]
      deleteParams = { ids }
    }
    
    deleteApi(deleteParams).then(() => {
@@ -435,173 +376,12 @@
  })
}


// 二维码相关变量
const qrCodeDialogVisible = ref(false);
const qrCodeUrl = ref("");
const showQRCode = async (row,type) => {
  if(barcodeDia.value)return
  try {
    // 构建二维码内容，只包含采购合同号（纯文本）
    let qrContent = row.id || '';
    // 检查内容是否为空
    if (!qrContent) {
      proxy.$modal.msgWarning("该行商品id，无法生成条形码");
      return;
    }
    qrContent+=`,${type}`
    qrCodeDialogVisible.value = true;
    await nextTick();
    JsBarcode("#barcode", qrContent+'', {
      width:10,
      height:100,
      displayValue: false
    });
  } catch (error) {
    console.error('生成条形码失败:', error);
    proxy.$modal.msgError("生成条形码失败：" + error.message);
  }
};

const erCodeDialogVisible = ref(false);
const erCodeUrl = ref("");
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,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    });
    erCodeDialogVisible.value = true;
  } catch (error) {
    console.error('生成二维码失败:', error);
    proxy.$modal.msgError("生成二维码失败：" + error.message);
  }
};
const downloadQRCode = () => {
  const imgSrc = document.getElementById('barcode').src
  const a = document.createElement('a');
  if(!imgSrc){
    proxy.$modal.msgWarning('暂无条形码')
    return
  }
  a.href = imgSrc;
  a.download = `商品条形码_${new Date().getTime()}.png`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  proxy.$modal.msgSuccess("下载成功");
};

// 下载二维码
const downloadERCode = () => {
  if (!erCodeUrl.value) {
    proxy.$modal.msgWarning("二维码未生成");
    return;
  }
  
  const a = document.createElement('a');
  a.href = erCodeUrl.value;
  a.download = `商品二维码_${new Date().getTime()}.png`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  proxy.$modal.msgSuccess("下载成功");
};

//扫码相关参数
const barcodeDia = ref(false);
const scanBarcodeInput = ref('');
const barcodeDetail = ref({})
// 扫码函数
function 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.data){
      proxy.$modal.msgError("商品不存在")
      return
    }
    if(resp.code!=200){
      proxy.$modal.msgError(res.msg)
      return
    }
    barcodeDetail.value = resp.data
    barcodeDia.value = true
  }).catch(() => {
    proxy.$modal.msgError("查看详情失败")
  })
  
}

const closeBarcodeDia = () => {
  barcodeDia.value = false
}

onMounted(() => {
  // 添加扫码枪监听事件
  document.removeEventListener('keypress',scanBarcode)
  document.addEventListener('keypress', scanBarcode)
  getList()
})
</script>

<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>
<style scoped lang="scss"></style>