lanju-front/src/views/wms/bpprocure/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="采购单号" prop="procureCode">
        <el-input
          v-model="queryParams.procureCode"
          placeholder="请输入采购单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料编码" prop="materialCode">
        <el-input
          v-model="queryParams.materialCode"
          placeholder="请输入物料编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['wms:bpprocure:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['wms:bpprocure:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['wms:bpprocure:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
      <el-button type="info" icon="el-icon-print" size="mini" @click="handlePrint" :disabled="!ids.length">打印</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['wms:bpprocure:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="bpprocureList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="采购单号" align="center" prop="procureCode" />
      <el-table-column label="物料编码" align="center" prop="materialCode" />
      <el-table-column label="物料名称" align="center" prop="materialName" />
      <el-table-column label="供应商" align="center" prop="supplyName" />
      <el-table-column label="计划数量" align="center" prop="planNumber" />
      <el-table-column label="已入库数量" align="center" prop="realityNumber" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="单价" align="center" prop="price" />
      <el-table-column label="订单来源" align="center" prop="attr2" />
      <el-table-column label="申请人" align="center" prop="attr3" />
      <el-table-column label="计划时间" align="center" prop="attr1" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.attr1, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['wms:bpprocure:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['wms:bpprocure:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

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

    <!-- 添加或修改白坯原材料采购单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--        <el-form-item label="采购单号" prop="procureCode">-->
<!--          <el-input v-model="form.procureCode" placeholder="请输入采购单号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物料编码" prop="materialCode">-->
<!--          <el-input v-model="form.materialCode" placeholder="请输入物料编码" />-->
<!--        </el-form-item>-->
        <el-form-item label="物料名称" prop="materialName" :rules="[{ required: true, message: '请选择物料名称', trigger: 'change' }]">
          <el-select v-model="form.materialName" placeholder="请选择物料" clearable>
            <el-option
              v-for="dict in dict.type.bp_raw"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>


<!--        <el-form-item label="供应商" prop="supplyName">-->
<!--          <el-input v-model="form.supplyName" placeholder="请输入供应商" />-->
<!--        </el-form-item>-->

        <el-form-item label="供应商" prop="supplyName" :rules="[{ required: true, message: '请选择供应商', trigger: 'change' }]">
          <el-select v-model="form.supplyName" placeholder="请选择供应商" clearable>
            <el-option
              v-for="dict in dict.type.bp_supplier"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>




        <el-form-item label="计划数量" prop="planNumber">
          <el-input v-model="form.planNumber" placeholder="请输入计划数量" />
        </el-form-item>
<!--        <el-form-item label="已入库数量" prop="realityNumber">-->
<!--          <el-input v-model="form.realityNumber" placeholder="请输入已入库数量" />-->
<!--        </el-form-item>-->
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="form.price" placeholder="请输入价格" />
        </el-form-item>


        <el-form-item label="计划时间" prop="attr1">
          <el-date-picker clearable
                          v-model="form.attr1"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择计划时间">
          </el-date-picker>
        </el-form-item>

<!--        <el-form-item label="用户自定义2" prop="attr2">-->
<!--          <el-input v-model="form.attr2" placeholder="请输入用户自定义2" />-->
<!--        </el-form-item>-->

        <el-form-item label="订单来源" prop="attr2" :rules="[{ required: true, message: '请选择订单来源', trigger: 'change' }]">
          <el-select v-model="form.attr2" placeholder="请选择订单来源" clearable>
            <el-option
              v-for="dict in dict.type.bp_osource"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>





        <el-form-item label="申请人" prop="attr3">
          <el-input v-model="form.attr3" placeholder="请输入申请人" />
        </el-form-item>
<!--        <el-form-item label="用户自定义4" prop="attr4">-->
<!--          <el-input v-model="form.attr4" placeholder="请输入用户自定义4" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户自定义5" prop="attr5">-->
<!--          <el-input v-model="form.attr5" placeholder="请输入用户自定义5" />-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBpprocure, getBpprocure, delBpprocure, addBpprocure, updateBpprocure } from "@/api/wms/bpprocure";
import JsBarcode from 'jsbarcode';
export default {
  name: "Bpprocure",
  dicts: ['bp_raw','bp_supplier','bp_osource'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 白坯原材料采购单表格数据
      bpprocureList: [],
      factoryName: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        procureCode: null,
        materialCode: null,
        materialName: null,
        supplyName: null,
        planNumber: null,
        realityNumber: null,
        unit: null,
        price: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询白坯原材料采购单列表 */
    getList() {
      this.loading = true;
      listBpprocure(this.queryParams).then(response => {
        this.bpprocureList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        procureCode: null,
        materialCode: null,
        materialName: null,
        supplyName: null,
        planNumber: null,
        realityNumber: null,
        unit: null,
        price: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加白坯原材料采购单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ID = row.id || this.ids
      getBpprocure(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改白坯原材料采购单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ID != null) {
            updateBpprocure(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBpprocure(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    async handlePrint() {
      // 获取选中数据
      let factoryCode =  localStorage.getItem("USER_POOL_NAME_CURRENT");
        // .substring(3);
      console.log(localStorage)

      // 定义 factoryCode 和 factoryName 的映射关系
      const factoryMapping = {
        "ds_1000": "中山小榄工厂",
        "ds_1010": "阜沙工厂",
        "ds_1020": "重庆工厂",
        "ds_1030": "江西工厂",
        "ds_1040": "安徽工厂",
        "ds_999": "中山恒阳"
      };
    // 根据 factoryCode 查找对应的 factoryName
      console.log(factoryCode)
       this.factoryName = factoryMapping[factoryCode] || "未知工厂"; // 如果没有匹配，赋值为“未知工厂”
      // if (){}
      console.log(this.factoryName )
      const selectedData = this.bpprocureList.filter(item => this.ids.includes(item.id));
      if (selectedData.length === 0) {
        this.$message.warning("请先选择要打印的记录");
        return;
      }

      // 生成打印数据
      this.printData = {
        printDate: new Date().toLocaleString(),
        workTable: selectedData.map(item => ({
          procureCode: item.procureCode,
          materialCode: item.materialCode,
          materialDesc: item.materialName,
          unit: item.unit,
          supplyName: item.supplyName,
          planNumber: item.planNumber,
          realityNumber: item.realityNumber || '',
        }))
      };

      if (this.printData.workTable.length === 0 || !this.printData.workTable[0].procureCode) {
        this.$message.warning("没有可打印的数据或数据不完整");
        return;
      }

      try {
        // 确保JsBarcode库加载完成
        if (typeof JsBarcode !== 'function') {
          throw new Error("JsBarcode库没有正确加载");
        }

        console.log("开始生成条形码...");
        const barcodeDataUrl = await this.generateBarcode(this.printData.workTable[0].procureCode);
        console.log("条形码生成成功:", barcodeDataUrl);

        // 创建打印内容
        let printContent = `
    <html>
    <head>
      <style>
        body { font-family: Arial, sans-serif; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #000; text-align: center; padding: 8px; }
      </style>
    </head>
    <body>
      <div style="text-align: center;">
        <h3>${this.factoryName}采购单</h3>
        <div style="float: right; margin-top: -50px; width: 200px; height: 100px;">
          <img src="${barcodeDataUrl}" alt="条形码" />
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; padding: 10px;">
        <div>打印日期: ${this.printData.printDate}</div>
      </div>
      <table>
        <thead>
          <tr>
            <th>采购单</th>
            <th>物料编码</th>
            <th>物料描述</th>
            <th>供应商</th>
            <th>单位</th>
            <th>计划数量</th>
            <th>已入库数量</th>
          </tr>
        </thead>
        <tbody>`;

        this.printData.workTable.forEach(item => {
          printContent += `
      <tr>
        <td>${item.procureCode}</td>
        <td>${item.materialCode}</td>
        <td>${item.materialDesc}</td>
        <td>${item.supplyName}</td>
        <td>${item.unit}</td>
        <td>${item.planNumber}</td>
        <td>${item.realityNumber}</td>
      </tr>`;
        });

        printContent += `
      </tbody>
    </table>
       <div class="notice">
        <p>注意事项：</p>
        <ol>
          <li>本采购订单请贵单位在 48 小时内确认回传，逾期将视为放弃本订单。</li>
          <li>供应商请严格遵守交货日期，若突发意外情况需要延期供货请以书面、电话等方式向我方联络，否则延期后的一切损失由供应商承担。</li>
          <li>供应商所交付的货物与采购订单的要求不符。</li>
          <li>供应商在供货时，需注明货物的采购单号以方便此后与我方对账结算。</li>
        </ol>
      </div>
    </body>
    </html>`;

        // 打开新窗口并打印
        const printWindow = window.open('', '_blank');
        printWindow.document.write(printContent);
        printWindow.document.close();

        // 使用setTimeout来确保资源加载完成
        setTimeout(() => {
          printWindow.print();
          printWindow.close();
        }, 1000); // 延迟1秒确保资源加载完成

      } catch (error) {
        console.error("生成条形码时出错: ", error);
        this.$message.error("生成条形码时出错，请稍后重试");
      }
    },

    generateBarcode(procureCode) {
      return new Promise((resolve, reject) => {
        const barcodeCanvas = document.createElement('canvas');
        try {
          JsBarcode(barcodeCanvas, procureCode, {
            format: "CODE128",
            height: 35,
            width: 1.5,
            displayValue: true,
          });
          const barcodeDataUrl = barcodeCanvas.toDataURL();
          resolve(barcodeDataUrl);
        } catch (error) {
          reject(error);
        }
      });
    },


    // 其他方法（handleQuery, resetQuery, etc.）


    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.id || this.ids;
      this.$modal.confirm('是否确认删除白坯原材料采购单编号为"' + IDs + '"的数据项？').then(function() {
        return delBpprocure(JSON.stringify(IDs));
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/bpprocure/export', {
        ...this.queryParams
      }, `bpprocure_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>