Przeglądaj źródła

修改部分打印设置

yangg 10 miesięcy temu
rodzic
commit
a33d71d828

+ 415 - 90
manager-admin/src/views/basicSetting/skuSort.vue

@@ -1,10 +1,20 @@
 <template>
   <div>
-    <en-table-layout :tableData="tableData.data" :loading="loading" class="draggable-table" @selection-change="handleSelectionChange">
+    <en-table-layout
+      :tableData="tableData.data"
+      :loading="loading"
+      class="draggable-table"
+      @selection-change="handleSelectionChange"
+    >
       <div slot="toolbar" class="inner-toolbar inner-toolbar2">
         <div class="toolbar-btns">
-          <el-button size="mini" type="primary" :disabled="multipleSelection.length === 0"
-          @click="batchPrint">批量打印</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            :disabled="multipleSelection.length === 0"
+            @click="batchPrint"
+            >批量打印</el-button
+          >
         </div>
         <!-- <en-table-search @search="searchEvent" @advancedSearch="advancedSearchEvent" advanced advancedWidth="465"
             placeholder=''>
@@ -31,16 +41,21 @@
       <template slot="table-columns">
         <el-table-column label="" width="100">
           <template>
-            <span class="drag-handle">&#9776;</span> <!-- 拖拽图标 -->
+            <span class="drag-handle">&#9776;</span>
+            <!-- 拖拽图标 -->
             <!-- 其他操作按钮 -->
           </template>
         </el-table-column>
         <el-table-column type="selection" width="55" />
         <el-table-column label="图标">
-            <template slot-scope="scope">
-              <img :src="scope.row.goods_vo.image_small_list" alt="" width="50px">
-            </template>
-          </el-table-column>
+          <template slot-scope="scope">
+            <img
+              :src="scope.row.goods_vo.image_small_list"
+              alt=""
+              width="50px"
+            />
+          </template>
+        </el-table-column>
         <el-table-column prop="goods_vo.name" label="商品名称">
           <template slot-scope="scope">
             <span class="selectable">{{ scope.row.goods_vo.name }}</span>
@@ -71,14 +86,24 @@
         </el-table-column> -->
         <el-table-column label="操作" width="310">
           <template slot-scope="scope">
-            <el-button size="mini" @click="PrintIng(scope.row)">打印SKU</el-button>
+            <el-button size="mini" @click="PrintIng(scope.row)"
+              >打印SKU</el-button
+            >
           </template>
         </el-table-column>
       </template>
 
-      <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
-        @current-change="handlePageCurrentChange" :current-page="tableData.page_no" :page-sizes="[20, 50, 70, 100]"
-        :page-size="tableData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.data_total">
+      <el-pagination
+        v-if="tableData"
+        slot="pagination"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
+        :current-page="tableData.page_no"
+        :page-sizes="[20, 50, 70, 100]"
+        :page-size="tableData.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.data_total"
+      >
       </el-pagination>
     </en-table-layout>
 
@@ -91,32 +116,62 @@
         <div class="logInfo">日志级别:{{ currDetailLog.level === 'important' ? '重要' : '一般' }}</div>
         <div class="logInfo">操作时间:{{ currDetailLog.operate_time | unixToDate }}</div>
       </el-dialog> -->
-    <el-dialog title="打印预览" :visible.sync="PrintVisible" width="940px" center @close="handleCancle">
-      <el-button size="mini" type="primary" @click="handlePrintGoodsLend" class="print">打印</el-button>
-      <div id="deliverySheet" style="width: 900px">
-        <div class="tips-t" v-for="(item, index) in codeList" :key="index">
-          <div>
-            <!-- <div class="qrcode-pic" ref="codeItem" ></div> -->
-            <div class="numOrder">
-
-            </div>
-            <div style="margin-top: 10px; font-size: 20px; text-align: center">
-              <barcode :value="item" format="CODE128" height="65" width="1"></barcode>
+    <el-dialog
+      title="打印预览"
+      :visible.sync="PrintVisible"
+      width="940px"
+      center
+      @close="handleCancle"
+    >
+      <el-form :inline="true" class="print-options">
+        <el-form-item label="打印规格">
+          <el-select v-model="selectedSize" placeholder="请选择打印规格">
+            <el-option label="大号 (9.5cm × 3.5cm)" value="large"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="缩放">
+          <el-input-number
+            v-model="scale"
+            :min="50"
+            :max="150"
+            :step="10"
+          ></el-input-number>
+        </el-form-item>
+        <el-form-item label="打印方向">
+          <el-select v-model="printOrientation" placeholder="请选择打印方向">
+            <el-option label="纵向" value="portrait"></el-option>
+            <el-option label="横向" value="landscape"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="print-preview-container">
+        <div id="deliverySheet" :style="{ transform: `scale(${scale / 100})` }">
+          <div class="tips-t" v-for="(item, index) in codeList" :key="index">
+            <div class="content-wrapper">
+              <div class="barcode-container">
+                <svg :id="`barcode-${index}`"></svg>
+              </div>
+              <div class="numOrder">{{ String(item).toUpperCase() }}</div>
             </div>
           </div>
         </div>
       </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancle">取消</el-button>
+        <el-button type="primary" @click="handlePrintGoodsLend">打印</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import * as API_Setting from '@/api/setting';
-import * as API_ProductClass from '@/api/productClass';
+import * as API_Setting from "@/api/setting";
+import * as API_ProductClass from "@/api/productClass";
+import JsBarcode from "jsbarcode";
 import Sortable from "sortablejs";
 import Print from "print-js";
 export default {
-  name: 'systemLogs',
+  name: "systemLogs",
   data() {
     return {
       // 列表loading状态
@@ -124,47 +179,183 @@ export default {
       // 列表参数
       params: {
         page_no: 1,
-        page_size: 20
+        page_size: 20,
       },
       // 列表数据
-      tableData: '',
+      tableData: "",
       // 时间输入框
-      searchTime: '',
+      searchTime: "",
       // 是否显示日志详情弹窗
       showLogDetail: false,
       // 当前日志详情信息
       currDetailLog: {},
       // 高级搜索数据
       advancedForm: {},
-      PrintVisible:false,
-      codeList:[],
-      barcodeValue:"",
+      PrintVisible: false,
+      codeList: [],
+      barcodeValue: "",
       // 当前已选择的行
       multipleSelection: [],
-    }
+      selectedSize: "large",
+      scale: 100,
+      codeList: [], // 假设这里存储了需要生成条形码的数据
+      PrintVisible: false,
+      printOrientation: "portrait", // 默认为纵向打印
+    };
   },
   mounted() {
-    this.GET_SystemLogs()
+    this.GET_SystemLogs();
     this.rowDrop();
   },
+  watch: {
+    PrintVisible(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.generateBarcodes();
+        });
+      }
+    },
+  },
   methods: {
+    generateBarcodes() {
+      this.$nextTick(() => {
+        this.codeList.forEach((item, index) => {
+          JsBarcode(`#barcode-${index}`, item, {
+            format: "CODE128",
+            width: 2,
+            height: 60,
+            displayValue: false,
+          });
+        });
+      });
+    },
+    /*  handlePrintGoodsLend() {
+      this.generateBarcodes();
+      this.$nextTick(() => {
+        const printContent = document.getElementById("deliverySheet").innerHTML;
+        const printWindow = window.open("", "_blank");
+        printWindow.document.write(`
+          <html>
+            <head>
+              <title>打印标签</title>
+              <style>
+                @page {
+                  size: 95mm 35mm;
+                  margin: 0;
+                }
+                body {
+                  margin: 0;
+                  width: 95mm;
+                  height: 35mm;
+                }
+                .tips-t {
+                  width: 95mm;
+                  height: 35mm;
+                  box-sizing: border-box;
+                  padding: 2mm;
+                  page-break-after: always;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                }
+                .content-wrapper {
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                }
+                .barcode-container {
+                  margin-bottom: 2mm;
+                }
+                .numOrder {
+                  font-size: 14px;
+                }
+              </style>
+            </head>
+            <body>${printContent}</body>
+          </html>
+        `);
+        printWindow.document.close();
+        printWindow.focus();
+        printWindow.print();
+        printWindow.close();
+      });
+    }, */
+
+    handleCancle() {
+      this.PrintVisible = false;
+    },
     /** 多选改变 */
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
-     // 批量打印
-     batchPrint() {
+    // 批量打印
+    batchPrint() {
       const ids = this.multipleSelection.map((item) => item.sku);
       this.codeList = ids;
       this.PrintVisible = true;
     },
     /** 打印对账详情 */
     handlePrintGoodsLend() {
+      // 生成条形码
+      this.generateBarcodes();
+
+      // 准备打印样式
+      const style = `
+    @page {
+      size: ${this.printOrientation};
+      margin: 0;
+    }
+    body {
+      margin: 0;
+    }
+    .tips-t {
+      width: 95mm;
+      height: 35mm;
+      page-break-after: always;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 2mm;
+    }
+    .content-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .barcode-container {
+      margin-bottom: 2mm;
+    }
+    .numOrder {
+      font-size: 14px;
+    }
+    ${
+      this.printOrientation !== "landscape"
+        ? `
+      .tips-t {
+        transform: rotate(90deg);
+        transform-origin: top left;
+        width: 35mm;
+        height: 95mm;
+        position: absolute;
+        left: 35mm;
+        top: 0;
+      }
+    `
+        : ""
+    }
+  `;
+
+      // 使用 print-js 打印
       Print({
         printable: "deliverySheet",
         type: "html",
+        css: style,
+        style: style,
+        scanStyles: false,
         targetStyles: ["*"],
-        ignoreElements: ["no-logs", "goods-image", "no-btn"],
       });
     },
     handleCancle() {
@@ -181,7 +372,9 @@ export default {
     },
     // 行拖拽
     rowDrop() {
-      const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
+      const tbody = document.querySelector(
+        ".draggable-table .el-table__body-wrapper tbody"
+      );
       const _this = this;
       Sortable.create(tbody, {
         animation: 300,
@@ -198,96 +391,108 @@ export default {
     },
     // 更新列表顺序
     updateList(id, newIndex) {
-      const data = [{
-        position: 'own',
-        product_id: this.tableData.data[newIndex].id,
-        sort: this.tableData.data[newIndex].sort
-      }];
+      const data = [
+        {
+          position: "own",
+          product_id: this.tableData.data[newIndex].id,
+          sort: this.tableData.data[newIndex].sort,
+        },
+      ];
 
-      if (newIndex > 0) { // Check if there is a row before
+      if (newIndex > 0) {
+        // Check if there is a row before
         data.push({
-          position: 'before',
+          position: "before",
           product_id: this.tableData.data[newIndex - 1].id,
-          sort: this.tableData.data[newIndex - 1].sort
+          sort: this.tableData.data[newIndex - 1].sort,
         });
       }
 
-      if (newIndex < this.tableData.data.length - 1) { // Check if there is a row after
+      if (newIndex < this.tableData.data.length - 1) {
+        // Check if there is a row after
         data.push({
-          position: 'after',
+          position: "after",
           product_id: this.tableData.data[newIndex + 1].id,
-          sort: this.tableData.data[newIndex + 1].sort
+          sort: this.tableData.data[newIndex + 1].sort,
         });
       }
 
       // 假设API需要商品ID和新的索引位置
-      API_ProductClass.updateSort({ data: data }).then((res) => {
-        this.$message.success("更新成功!");
-        this.GET_SystemLogs();
-      }).catch(() => { this.$message.error("更新失败!"); })
+      API_ProductClass.updateSort({ data: data })
+        .then((res) => {
+          this.$message.success("更新成功!");
+          this.GET_SystemLogs();
+        })
+        .catch(() => {
+          this.$message.error("更新失败!");
+        });
     },
     /** 分页大小发生改变 */
     handlePageSizeChange(size) {
-      this.params.page_size = size
-      this.GET_SystemLogs()
+      this.params.page_size = size;
+      this.GET_SystemLogs();
     },
 
     /** 分页页数发生改变 */
     handlePageCurrentChange(page) {
-      this.params.page_no = page
-      this.GET_SystemLogs()
+      this.params.page_no = page;
+      this.GET_SystemLogs();
     },
     /** 搜索事件触发 */
     searchEvent(data) {
       this.params = {
         ...this.params,
-        keyword: data
-      }
-      Object.keys(this.advancedForm).forEach(key => delete this.params[key])
-      this.params.page_no = 1
-      this.GET_SystemLogs()
+        keyword: data,
+      };
+      Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
+      this.params.page_no = 1;
+      this.GET_SystemLogs();
     },
     /** 高级搜索事件触发 */
     advancedSearchEvent() {
       this.params = {
         ...this.params,
-        ...this.advancedForm
-      }
-      delete this.params.start_time
-      delete this.params.end_time
+        ...this.advancedForm,
+      };
+      delete this.params.start_time;
+      delete this.params.end_time;
       if (this.advancedForm.order_time_range) {
-        this.params.start_time = this.advancedForm.order_time_range[0] / 1000
-        this.params.end_time = this.advancedForm.order_time_range[1] / 1000
+        this.params.start_time = this.advancedForm.order_time_range[0] / 1000;
+        this.params.end_time = this.advancedForm.order_time_range[1] / 1000;
       }
-      delete this.params.keyword
-      delete this.params.order_time_range
-      this.params.page_no = 1
-      this.GET_SystemLogs()
+      delete this.params.keyword;
+      delete this.params.order_time_range;
+      this.params.page_no = 1;
+      this.GET_SystemLogs();
     },
 
     /** 获取日志列表 */
     GET_SystemLogs() {
-      this.loading = true
-      const params = this.MixinClone(this.params)
-      Object.keys(params).forEach(key => {
+      this.loading = true;
+      const params = this.MixinClone(this.params);
+      Object.keys(params).forEach((key) => {
         if (!params[key] && params[key] !== 0) {
-          delete params[key]
+          delete params[key];
         }
-      })
-      API_ProductClass.getProduct(params).then(response => {
-        this.loading = false
-        this.tableData = response
-        this.params.page_no = response.page_no
-        this.params.page_size = response.page_size
-      }).catch(() => { this.loading = false })
+      });
+      API_ProductClass.getProduct(params)
+        .then((response) => {
+          this.loading = false;
+          this.tableData = response;
+          this.params.page_no = response.page_no;
+          this.params.page_size = response.page_size;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     /** 显示日志详情 */
     handleShowDetail(row) {
-      this.showLogDetail = true
-      this.currDetailLog = row
-    }
-  }
-}
+      this.showLogDetail = true;
+      this.currDetailLog = row;
+    },
+  },
+};
 </script>
 
 <style>
@@ -315,7 +520,6 @@ export default {
 .nc-container {
   height: 32px !important;
   overflow: hidden;
-
 }
 
 .drag-handle {
@@ -349,9 +553,130 @@ export default {
   }
 }
 
-.dateSearch {}
+.dateSearch {
+}
 
 .logInfo {
   margin-bottom: 20px;
 }
+
+.print-preview-container {
+  overflow: auto;
+  width: 100%;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  &.portrait {
+    #deliverySheet {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .tips-t {
+      width: 95mm;
+      height: 35mm;
+    }
+  }
+
+  &.landscape {
+    #deliverySheet {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+
+    .tips-t {
+      width: 35mm;
+      height: 95mm;
+      margin-right: 2mm;
+    }
+  }
+}
+
+#deliverySheet {
+  transform-origin: top left;
+}
+
+.tips-t {
+  border: 1px solid #ccc;
+  margin-bottom: 2mm;
+  padding: 2mm;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .content-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .numOrder {
+    font-size: 14px;
+    margin-top: 1mm;
+  }
+
+  .barcode-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2mm;
+
+    svg {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+#deliverySheet {
+  transform-origin: top left;
+  padding: 10mm;
+}
+
+#deliverySheet.portrait .tips-t {
+  width: 95mm;
+  height: 35mm;
+}
+
+#deliverySheet.landscape .tips-t {
+  width: 35mm;
+  height: 95mm;
+}
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+
+@media print {
+  @page {
+    size: auto;
+    margin: 0;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .print-options,
+  .dialog-footer {
+    display: none;
+  }
+
+  #deliverySheet {
+    transform: none !important;
+  }
+
+  .tips-t {
+    page-break-inside: avoid;
+    margin-bottom: 0;
+  }
+}
 </style>

+ 196 - 66
manager-admin/src/views/setting/serialList.vue

@@ -5,13 +5,22 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="sku">
-              <el-input v-model="advancedForm.sku" placeholder="请输入内容" clearable></el-input>
+              <el-input
+                v-model="advancedForm.sku"
+                placeholder="请输入内容"
+                clearable
+              ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="状态">
               <el-select v-model="advancedForm.status" clearable>
-                <el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.value" />
+                <el-option
+                  v-for="item in statusList"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -27,11 +36,20 @@
       </el-form>
       <el-button @click="searchEvent"> 搜索 </el-button>
     </div>
-    <en-table-layout :tableData="tableData.data" :loading="loading" @selection-change="handleSelectionChange">
+    <en-table-layout
+      :tableData="tableData.data"
+      :loading="loading"
+      @selection-change="handleSelectionChange"
+    >
       <div slot="toolbar" class="inner-toolbar">
         <div class="toolbar-btns">
-          <el-button size="mini" v-if="checkPermission(['createSnCode:add'])" type="primary"
-            @click="handleAddWarehouse">新增</el-button>
+          <el-button
+            size="mini"
+            v-if="checkPermission(['createSnCode:add'])"
+            type="primary"
+            @click="handleAddWarehouse"
+            >新增</el-button
+          >
           <!--  <el-button
             size="mini"
             type="delect"
@@ -39,8 +57,13 @@
             @click="handleDelectWarehous"
             >删除</el-button
           > -->
-          <el-button size="mini" type="primary" :disabled="multipleSelection.length === 0"
-            @click="batchPrint">批量打印</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            :disabled="multipleSelection.length === 0"
+            @click="batchPrint"
+            >批量打印</el-button
+          >
         </div>
         <!--
         <div class="toolbar-search" style="display: flex; align-items: center">
@@ -76,8 +99,12 @@
         <el-table-column prop="entry_house_id" label="入库单编号" /> -->
         <el-table-column label="操作" width="310">
           <template slot-scope="scope">
-            <el-button size="mini" v-if="checkPermission(['stock:edit'])"
-              @click="handleEditWarehouse(scope.$index, scope.row)">查看</el-button>
+            <el-button
+              size="mini"
+              v-if="checkPermission(['stock:edit'])"
+              @click="handleEditWarehouse(scope.$index, scope.row)"
+              >查看</el-button
+            >
             <!-- <el-button
               size="mini"
               v-if="checkPermission(['stock:del'])"
@@ -85,28 +112,55 @@
               @click="handleDeleteWarehouse(scope.$index, scope.row)"
               >删除</el-button
             > -->
-            <el-button size="mini" v-if="checkPermission(['updateSnCode:update'])"
-              @click="editPrintIng(scope.row)">编辑序列号</el-button>
-            <el-button size="mini" @click="PrintIng(scope.row)">打印序列号</el-button>
+            <el-button
+              size="mini"
+              v-if="checkPermission(['updateSnCode:update'])"
+              @click="editPrintIng(scope.row)"
+              >编辑序列号</el-button
+            >
+            <el-button size="mini" @click="PrintIng(scope.row)"
+              >打印序列号</el-button
+            >
           </template>
         </el-table-column>
       </template>
 
-      <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
-        @current-change="handlePageCurrentChange" :current-page="tableData.page_no" :page-sizes="[10, 20, 50, 100]"
-        :page-size="tableData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.data_total">
+      <el-pagination
+        v-if="tableData"
+        slot="pagination"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
+        :current-page="tableData.page_no"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="tableData.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.data_total"
+      >
       </el-pagination>
     </en-table-layout>
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @open="handleDialogOpen"
-      :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="600px"
+      @open="handleDialogOpen"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      @close="close"
+    >
       <div class="header">
         <span>商品编号/sku</span>
         <el-input v-model="stockForm.sn"></el-input>
         <el-button>搜索</el-button>
       </div>
       <div class="center">
-        <el-table :data="snTableData.records" border ref="table" style="width: 100%"
-          @selection-change="snHandleSelectionChange">
+        <el-table
+          :data="snTableData.records"
+          border
+          ref="table"
+          style="width: 100%"
+          @selection-change="snHandleSelectionChange"
+        >
           <el-table-column type="selection" width="55" />
           <el-table-column prop="goods_vo.sn" label="商品编号">
           </el-table-column>
@@ -115,15 +169,25 @@
           </el-table-column>
           <el-table-column prop="product_vo.sku" label="sku" v-else>
           </el-table-column>
-          <el-table-column prop="spec_name" label="规格型号" v-if="title !== '查看序列号'">
+          <el-table-column
+            prop="spec_name"
+            label="规格型号"
+            v-if="title !== '查看序列号'"
+          >
           </el-table-column>
           <el-table-column prop="product_vo.spec_name" label="规格型号" v-else>
           </el-table-column>
         </el-table>
       </div>
-      <el-pagination @size-change="goodsPageSizeChange" @current-change="goodsPageCurrentChange"
-        :current-page="snTableData.current" :page-sizes="[10, 20, 50, 100]" :page-size="snTableData.size"
-        layout="total, sizes, prev, pager, next, jumper" :total="snTableData.total"></el-pagination>
+      <el-pagination
+        @size-change="goodsPageSizeChange"
+        @current-change="goodsPageCurrentChange"
+        :current-page="snTableData.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="snTableData.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="snTableData.total"
+      ></el-pagination>
       <!-- <el-form :model="stockForm" :rules="stockRules" ref="stockForm" label-width="120px">
         <el-form-item label="商品编码/条码">
           <span>
@@ -139,8 +203,14 @@
         </el-form-item>
       </el-form> -->
       <div class="dialog-footer">
-        <el-input :disabled="title == '查看序列号'" v-model="stockForm.qty" placeholder="请输入要生成序列号的数量"></el-input>
-        <el-button :disabled="title == '查看序列号'" @click="saveQ">生成</el-button>
+        <el-input
+          :disabled="title == '查看序列号'"
+          v-model="stockForm.qty"
+          placeholder="请输入要生成序列号的数量"
+        ></el-input>
+        <el-button :disabled="title == '查看序列号'" @click="saveQ"
+          >生成</el-button
+        >
         <!-- <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="submitWarehouseForm">确 定</el-button> -->
       </div>
@@ -151,26 +221,59 @@
         </p>
       </div>
     </el-dialog>
-    <el-dialog title="打印预览" :visible.sync="PrintVisible" width="940px" center @close="handleCancle">
-      <el-button size="mini" type="primary" @click="handlePrintGoodsLend" class="print">打印</el-button>
+    <el-dialog
+      title="打印预览"
+      :visible.sync="PrintVisible"
+      width="940px"
+      center
+      @close="handleCancle"
+    >
+      <el-button
+        size="mini"
+        type="primary"
+        @click="handlePrintGoodsLend"
+        class="print"
+        >打印</el-button
+      >
       <div id="deliverySheet" style="width: 900px">
         <div class="tips-t" v-for="(item, index) in codeList" :key="index">
-          <div>
-            <!-- <div class="qrcode-pic" ref="codeItem" ></div> -->
-            <div class="numOrder">
-
-            </div>
-            <div  style="margin-top: 10px; font-size: 20px; text-align: center">
-              <barcode :value="item" format="CODE128" height="65" width="1"></barcode>
+          <div class="barcode-container">
+            <div class="barcode-wrapper">
+              <barcode
+              :displayValue="false"
+                :value="item"
+                format="CODE128"
+                textAlign="center"
+                height="65"
+                width="1"
+              ></barcode>
             </div>
+            <div class="barcode-text">{{ item }}</div>
           </div>
         </div>
       </div>
     </el-dialog>
-    <el-dialog title="修改序列号" :visible.sync="SKUVisible" width="30%" center @close="snCodeCancle">
-      <el-form ref="SKUForm" :model="SKUForm" :rules="SKUFormRule" label-width="160px" inline class="change-form">
+    <el-dialog
+      title="修改序列号"
+      :visible.sync="SKUVisible"
+      width="30%"
+      center
+      @close="snCodeCancle"
+    >
+      <el-form
+        ref="SKUForm"
+        :model="SKUForm"
+        :rules="SKUFormRule"
+        label-width="160px"
+        inline
+        class="change-form"
+      >
         <el-form-item label="序列号" prop="snCode" class="change-form-item">
-          <el-input v-model="SKUForm.snCode" placeholder="请输入" style="width: 300px;"></el-input>
+          <el-input
+            v-model="SKUForm.snCode"
+            placeholder="请输入"
+            style="width: 300px"
+          ></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer">
@@ -230,19 +333,20 @@ export default {
       advancedForm: {},
       barcodeValue: "",
       SKUForm: {
-        snCode: '',
-        id: ''
+        snCode: "",
+        id: "",
       },
       SKUFormRule: {
-        snCode: [{
-          required: true,
-          message: '请输入序列号',
-          trigger: 'blur'
-        }
+        snCode: [
+          {
+            required: true,
+            message: "请输入序列号",
+            trigger: "blur",
+          },
         ],
       },
       SKUVisible: false,
-      warehouseList: '',
+      warehouseList: "",
     };
   },
   mounted() {
@@ -251,40 +355,40 @@ export default {
     // this.GET_StationAllList()
     this.GET_AdministratorList();
   },
-  watch: {
-
-  },
+  watch: {},
   computed: {
     ...mapGetters(["user"]),
   },
   methods: {
     warehouseName(val) {
-      let name = ''
+      let name = "";
       this.warehouseList.map((el) => {
         if (el.id == val) {
-          return name = el.name
+          return (name = el.name);
         }
       });
-      return name
+      return name;
     },
     snCodeCancle() {
-      this.SKUForm.id = ""
-      this.SKUForm.snCode = ""
-      this.SKUVisible = false
+      this.SKUForm.id = "";
+      this.SKUForm.snCode = "";
+      this.SKUVisible = false;
     },
     snCodeEdit() {
-      API_Setting.updateSnCode(this.SKUForm.id, this.SKUForm.snCode).then(res => {
-        this.$message.success('修改成功!')
-        this.SKUForm.id = ""
-        this.SKUForm.snCode = ""
-        this.SKUVisible = false
-        this.GET_WarehouseList();
-      })
+      API_Setting.updateSnCode(this.SKUForm.id, this.SKUForm.snCode).then(
+        (res) => {
+          this.$message.success("修改成功!");
+          this.SKUForm.id = "";
+          this.SKUForm.snCode = "";
+          this.SKUVisible = false;
+          this.GET_WarehouseList();
+        }
+      );
     },
     editPrintIng(row) {
-      this.SKUForm.id = row.id
-      this.SKUForm.snCode = row.sn_code
-      this.SKUVisible = true
+      this.SKUForm.id = row.id;
+      this.SKUForm.snCode = row.sn_code;
+      this.SKUVisible = true;
     },
     /* 分页 */
     goodsPageSizeChange(size) {
@@ -297,9 +401,7 @@ export default {
       this.params.page_no = page;
       API_Setting.getSnProduct(this.params).then((res) => {
         this.snTableData = res; //this.tableData.data
-
       });
-
     },
     typeName(val) {
       let name = "";
@@ -582,4 +684,32 @@ export default {
   display: flex;
   justify-content: center;
 }
+.barcode-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.barcode-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.barcode-text {
+  text-align: center;
+  margin-top: -5px;
+  font-size: 16px;
+}
+
+// Make sure these styles are applied to the printed output
+@media print {
+  .barcode-container,
+  .barcode-wrapper,
+  .barcode-text {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+}
 </style>

+ 3 - 3
ui-domain/api.js

@@ -9,14 +9,14 @@
 module.exports = {
   // 开发环境 192.168.8.103:9999
   dev: {
-    admin: window.__ENV__.API_ADMIN || 'http://apidoc.raycos.net'//https://apidoc.raycos.net http://192.168.8.103:9999
+    admin: window.__ENV__.API_ADMIN || 'http://192.168.8.102:9999'//https://apidoc.raycos.net http://192.168.8.103:9999
   },
   // 测试环境apidoc.raycos.net 60.204.236.53:9999
   test: {
-    admin: window.__ENV__.API_ADMIN || 'http://apidoc.raycos.net'
+    admin: window.__ENV__.API_ADMIN || 'http://127.0.0.1:9999'
   },
   // 生产环境
   pro: {
-    admin: window.__ENV__.API_ADMIN || 'http://apidoc.raycos.net'//api.v3rental.com  apidoc.raycos.net
+    admin: window.__ENV__.API_ADMIN || 'http://127.0.0.1:9999'//http://apidoc.raycos.net
   }
 }