Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

klp-ui/src/views/crm/components/OrderDetail.vue

@@ -2,22 +2,35 @@
   <div>
     <el-empty v-if="!orderId || orderId == ''" description="未选中订单" />
 
-    <!-- <el-empty v-else-if="!orderItemList.length" description="暂无订单明细" /> -->
-
     <div v-else>
       <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-if="editable">新增</el-button>
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+            v-if="editable">新增</el-button>
+          <el-button type="primary" plain icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
           <el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
         </el-col>
       </el-row>
 
       <el-table v-loading="loading" :data="orderItemList">
         <el-table-column label="产品类型" align="center" prop="productType" />
-        <el-table-column label="规格要求" align="center" prop="specRequire" />
-        <el-table-column label="产品数量" align="center" prop="productNum" />
-        <el-table-column label="特殊要求" align="center" prop="specialRequire" />
-        <el-table-column label="明细金额" align="center" prop="itemAmount" />
+        <el-table-column label="原料规格" align="center" prop="rawMaterialSpec" />
+        <el-table-column label="成品规格" align="center" prop="finishedProductSpec" />
+        <el-table-column label="材质" align="center" prop="material" />
+        <el-table-column label="等级" align="center" prop="grade" />
+        <el-table-column label="重量" align="center" prop="weight" />
+        <el-table-column label="合同定价" align="center" prop="contractPrice" />
+        <el-table-column label="金额（元）" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.weight * scope.row.contractPrice }}
+          </template>
+        </el-table-column>
+        <el-table-column label="定制人" align="center" prop="customizer" />
+        <el-table-column label="发货人" align="center" prop="shipper" />
+        <el-table-column label="排产批次" align="center" prop="productionBatch" />
+        <!-- <el-table-column label="产品数量" align="center" prop="productNum" /> -->
+        <!-- <el-table-column label="特殊要求" align="center" prop="specialRequire" /> -->
+        <!-- <el-table-column label="明细金额" align="center" prop="itemAmount" /> -->
         <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="editable">
           <template slot-scope="scope">
@@ -37,19 +50,40 @@
         <el-form-item label="产品类型" prop="productType">
           <el-input v-model="form.productType" placeholder="请输入产品类型" />
         </el-form-item>
-        <el-form-item label="产品数量" prop="productNum">
+        <!-- <el-form-item label="产品数量" prop="productNum">
           <el-input v-model="form.productNum" placeholder="请输入产品数量" />
-        </el-form-item>
-         <el-form-item label="明细金额" prop="itemAmount">
+        </el-form-item> -->
+        <!-- <el-form-item label="明细金额" prop="itemAmount">
           <el-input size="mini" v-model="form.itemAmount" placeholder="请输入明细金额" />
+        </el-form-item> -->
+        <el-form-item label="原料规格" prop="rawMaterialSpec">
+          <el-input v-model="form.rawMaterialSpec" placeholder="请输入原料规格" />
         </el-form-item>
-         <el-form-item label="规格要求" prop="specRequire">
-          <el-input v-model="form.specRequire" placeholder="请输入规格要求" />
+        <el-form-item label="成品规格" prop="finishedProductSpec">
+          <el-input v-model="form.finishedProductSpec" placeholder="请输入成品规格" />
         </el-form-item>
-        <el-form-item label="特殊要求" prop="specialRequire">
-          <el-input v-model="form.specialRequire" type="textarea" placeholder="请输入内容" />
+        <el-form-item label="材质" prop="material">
+          <el-input v-model="form.material" placeholder="请输入材质" />
         </el-form-item>
-       
+        <el-form-item label="等级" prop="grade">
+          <el-input v-model="form.grade" placeholder="请输入等级" />
+        </el-form-item>
+        <el-form-item label="重量" prop="weight">
+          <el-input v-model="form.weight" placeholder="请输入重量" />
+        </el-form-item>
+        <el-form-item label="合同定价" prop="contractPrice">
+          <el-input v-model="form.contractPrice" placeholder="请输入合同定价" />
+        </el-form-item>
+        <el-form-item label="定制人" prop="customizer">
+          <el-input v-model="form.customizer" placeholder="请输入定制人" />
+        </el-form-item>
+        <el-form-item label="发货人" prop="shipper">
+          <el-input v-model="form.shipper" placeholder="请输入发货人" />
+        </el-form-item>
+        <el-form-item label="排产批次" prop="productionBatch">
+          <el-input v-model="form.productionBatch" placeholder="请输入排产批次" />
+        </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -59,12 +93,22 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="打印结算单" :loading="orderLoading" :visible.sync="orderOpen" width="1000px" append-to-body>
+      <OrderPrinter ref="printer" :orderContent="orderContent" :orderList="orderItemList" />
+
+      <el-button slot="footer">
+        <el-button :loading="buttonLoading" @click="printOrder">打印</el-button>
+      </el-button>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listOrderItem, getOrderItem, delOrderItem, addOrderItem, updateOrderItem } from "@/api/crm/orderItem";
 import { actions, ORDER_ACTIONS } from "../js/actions";
+import { getOrder } from "@/api/crm/order";
+import OrderPrinter from "./OrderPrinter.vue";
 
 export default {
   name: "OrderItem",
@@ -77,6 +121,9 @@ export default {
       default: true
     },
   },
+  components: {
+    OrderPrinter
+  },
   data() {
     return {
       // 按钮loading
@@ -120,26 +167,51 @@ export default {
         productNum: [
           { required: true, message: "请输入产品数量", trigger: "blur" }
         ],
-        itemAmount: [
-          { required: true, message: "请输入明细金额", trigger: "blur" },
-          // 必须是数字，最多两位小数，使用自定义的校验规则
-          { validator: (rule, value, callback) => {
-            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
-              callback(new Error("请输入最多两位小数的数字"));
-            } else {
-              callback();
-            }
-          }, trigger: "input" }
+        rawMaterialSpec: [
+          { required: true, message: "请输入原料规格", trigger: "blur" }
         ],
-      }
+        finishedProductSpec: [
+          { required: true, message: "请输入成品规格", trigger: "blur" }
+        ],
+        // 重量和合同定价不能为空，且必须是数字，最多两位小数
+        weight: [
+          { required: true, message: "请输入重量", trigger: "blur" },
+          // 必须是数字，最多两位小数，使用自定义的校验规则
+          {
+            validator: (rule, value, callback) => {
+              if (!/^\d+(\.\d{1,2,3})?$/.test(value)) {
+                callback(new Error("请输入最多三位小数的数字"));
+              } else {
+                callback();
+              }
+            }, trigger: "change"
+          }
+        ],
+        contractPrice: [
+          { required: true, message: "请输入合同定价", trigger: "blur" },
+          // 必须是数字，最多两位小数，使用自定义的校验规则
+          {
+            validator: (rule, value, callback) => {
+              if (!/^\d+(\.\d{1,2,3})?$/.test(value)) {
+                callback(new Error("请输入最多三位小数的数字"));
+              } else {
+                callback();
+              }
+            }, trigger: "change"
+          }
+        ],
+      },
+      orderContent: {},
+      orderLoading: false,
+      orderOpen: false,
     };
   },
   watch: {
     orderId: {
       handler(newVal, oldVal) {
         // if (newVal !== oldVal) {
-          this.queryParams.orderId = newVal;
-          this.getList();
+        this.queryParams.orderId = newVal;
+        this.getList();
         // }
       },
       immediate: true
@@ -147,7 +219,7 @@ export default {
   },
   methods: {
     /** 查询正式订单明细列表 */
-    getList() {  
+    getList() {
       if (!this.queryParams.orderId) {
         this.orderItemList = [];
         this.total = 0;
@@ -171,7 +243,15 @@ export default {
         itemId: undefined,
         orderId: this.orderId,
         productType: undefined,
-        specRequire: undefined,
+        rawMaterialSpec: undefined,
+        finishedProductSpec: undefined,
+        material: undefined,
+        grade: undefined,
+        weight: undefined,
+        contractPrice: undefined,
+        customizer: undefined,
+        shipper: undefined,
+        productionBatch: undefined,
         productNum: undefined,
         specialRequire: undefined,
         itemAmount: undefined,
@@ -189,6 +269,20 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    /** 打印按钮操作 */
+    handlePrint() {
+      // 正在准备打印内容
+      this.orderLoading = true;
+      this.orderOpen = true;
+      getOrder(this.orderId).then(response => {
+        this.orderContent = response.data;
+        this.orderLoading = false;
+      });
+    },
+    printOrder() {
+      this.$refs["printer"].print();
+      this.orderOpen = false;
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");

klp-ui/src/views/crm/components/OrderPrinter.vue

@@ -0,0 +1,365 @@
+<template>
+  <div ref="printContainer" class="printContainer">
+    <div class="waybill-content">
+      <!-- 单据标题 -->
+      <div class="title">销售合同 - 业务结算单</div>
+
+      <!-- 订单主信息头部 -->
+      <div class="waybill-header">
+        <div class="header-left">
+          <div class="header-item"><span class="label-sm">订单编号：</span>{{ orderContent.orderCode || '' }}</div>
+          <div class="header-item"><span class="label-sm">业务员：</span>{{ orderContent.salesman || '' }}</div>
+          <div class="header-item"><span class="label-sm">制单人：</span>{{ orderContent.createBy || '' }}</div>
+        </div>
+        <div class="header-right">
+          <!-- <div class="header-item"><span class="label-sm">客户公司：</span>{{ orderContent.companyName || '' }}</div> -->
+          <!-- <div class="header-item"><span class="label-sm">联系人：</span>{{ orderContent.contactName || '' }}</div> -->
+          <div class="header-item"><span class="label-sm">交货日期：</span>{{ orderContent.deliveryDate ? orderContent.deliveryDate.split(' ')[0] : '' }}</div>
+          <div class="header-item"><span class="label-sm">订单金额：</span>¥{{ orderContent.orderAmount || '0.00' }}</div>
+          <div class="header-item"><span class="label-sm">制单时间：</span>{{ orderContent.createTime || '' }}</div>
+        </div>
+      </div>
+
+      <!-- 订单明细表格 -->
+      <table class="waybill-table">
+        <thead>
+          <tr>
+            <th>产品类型</th>
+            <th>原料规格</th>
+            <th>成品规格</th>
+            <th>材质</th>
+            <th>等级</th>
+            <th>重量(吨)</th>
+            <th>合同单价(元)</th>
+            <th>金额(元)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in orderList" :key="item.itemId || index">
+            <td>{{ item.productType || '' }}</td>
+            <td>{{ item.rawMaterialSpec || '' }}</td>
+            <td>{{ item.finishedProductSpec || '' }}</td>
+            <td>{{ item.material || '' }}</td>
+            <td>{{ item.level || '' || '' }}</td>
+            <td>{{ item.weight || '0.000' }}</td>
+            <td>¥{{ item.contractPrice || '0.00' }}</td>
+            <td>¥{{ item.amount || '0.00' }}</td>
+          </tr>
+          <!-- 无明细数据占位 -->
+          <tr v-if="orderList.length === 0">
+            <td colspan="6" class="no-data">暂无订单明细</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 合计区域 -->
+      <div class="total-area">
+        <div class="total-item">
+          <span class="total-label">明细总重量：</span>
+          <span>{{ calcTotalWeight() }} kg</span>
+        </div>
+        <div class="total-item">
+          <span class="total-label">明细总金额：</span>
+          <span>¥{{ calcTotalAmount() }}</span>
+        </div>
+        <div class="total-item">
+          <span class="total-label">订单未付金额：</span>
+          <span>¥{{ orderContent.unpaidAmount || '0.00' }}</span>
+        </div>
+      </div>
+
+      <!-- 底部备注/状态信息 -->
+      <div class="footer-info">
+        <div class="info-item"><span class="label-sm">更新人：</span>{{ orderContent.updateBy || '' }}</div>
+        <div class="info-item"><span class="label-sm">更新时间：</span>{{ orderContent.updateTime || '' }}</div>
+        <div class="info-item"><span class="label-sm">订单状态：</span>{{ getOrderStatusText(orderContent.orderStatus) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+import { PDFDocument } from 'pdf-lib';
+
+export default {
+  name: "OrderPrinter",
+  props: {
+    // 订单主数据
+    orderContent: {
+      type: Object,
+      default: () => ({})
+    },
+    // 订单明细列表
+    orderList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    // 计算明细总重量（保留3位小数）
+    calcTotalWeight() {
+      if (!this.orderList.length) return '0.000';
+      const total = this.orderList.reduce((sum, item) => {
+        const weight = Number(item.weight) || 0;
+        return sum + weight;
+      }, 0);
+      return total.toFixed(3);
+    },
+    // 计算明细总金额（重量×单价，保留2位小数）
+    calcTotalAmount() {
+      if (!this.orderList.length) return '0.00';
+      const total = this.orderList.reduce((sum, item) => {
+        const weight = Number(item.weight) || 0;
+        const price = Number(item.contractPrice) || 0;
+        return sum + (weight * price);
+      }, 0);
+      return total.toFixed(2);
+    },
+    // 订单状态转文本（0-未处理/1-已审核/2-已发货/3-已完成，可根据业务扩展）
+    getOrderStatusText(status) {
+      const statusMap = {
+        0: '未处理',
+        1: '已审核',
+        2: '已发货',
+        3: '已完成'
+      };
+      return statusMap[status] || '未知状态';
+    },
+    // 打印订单（生成PDF后打印/下载）
+    async print() {
+      const node = this.$refs.printContainer;
+      // 241mm热敏纸规格（宽×高）
+      const paperWidthMm = 241;
+      const paperHeightMm = 140;
+      // 打印机安全边距（避免内容被裁剪）
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
+
+      // 单位转换：mm → px/pt（96DPI/72DPI）
+      const mmToPx = (mm) => (mm * 96) / 25.4;
+      const mmToPt = 72 / 25.4;
+      const pageWidthPt = paperWidthMm * mmToPt;
+      const pageHeightPt = paperHeightMm * mmToPt;
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
+
+      // 创建PDF文档
+      const pdfDoc = await PDFDocument.create();
+      // 保存原样式，避免修改影响页面展示
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      // 强制容器完整展示内容，方便html2canvas截图
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+      // 设置内容缩放和边距，适配打印机不可打印区
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
+      try {
+        await this.$nextTick(); // 等待DOM更新
+        // 生成截图（3倍缩放保证打印清晰度）
+        const canvas = await html2canvas(node, {
+          backgroundColor: '#ffffff',
+          scale: 3,
+          useCORS: true,
+          willReadFrequently: true,
+          width: pageWidthPx,
+          height: pageHeightPx,
+          windowWidth: pageWidthPx,
+          windowHeight: pageHeightPx,
+          scrollX: 0,
+          scrollY: 0
+        });
+        // 将截图嵌入PDF
+        const png = canvas.toDataURL('image/png');
+        const imgPng = await pdfDoc.embedPng(png);
+        const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+        pdfPage.drawImage(imgPng, {
+          x: 0,
+          y: 0,
+          width: pageWidthPt,
+          height: pageHeightPt
+        });
+      } finally {
+        // 恢复原样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+      }
+
+      // 生成PDF并处理打印/下载
+      const pdfBytes = await pdfDoc.save();
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+      // 优先新窗口打开打印
+      const win = window.open(url, '_blank');
+      if (!win) {
+        // 新窗口被拦截则触发下载
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `订单打印单_${this.orderContent.orderCode || this.orderContent.orderId || new Date().getTime()}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }
+      // 释放URL对象
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 主容器：适配241mm热敏纸 */
+.printContainer {
+  width: 241mm;
+  height: 140mm;
+  margin: 0 auto;
+  background: #fff;
+  font-family: SimSun, "宋体", monospace;
+  color: #000;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* 单据标题 */
+.title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 3mm;
+  padding-bottom: 1mm;
+  border-bottom: 1px solid #000;
+}
+
+/* 内容容器：适配打印机边距，自动缩放 */
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+/* 订单头部信息 */
+.waybill-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 3mm;
+  line-height: 4mm;
+}
+.header-left, .header-right {
+  display: flex;
+  flex-direction: column;
+}
+.header-item {
+  display: flex;
+  white-space: nowrap;
+}
+.label-sm {
+  font-weight: bold;
+  margin-right: 2mm;
+  min-width: 60px;
+}
+
+/* 明细表格：边框合并，固定布局 */
+.waybill-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 3mm;
+  font-size: 11px;
+  table-layout: fixed;
+}
+.waybill-table th, .waybill-table td {
+  border: 0.5px solid #000;
+  padding: 0.5mm;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 3.5mm;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.waybill-table th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+.no-data {
+  height: 20mm;
+  line-height: 20mm;
+  color: #999;
+}
+
+/* 合计区域 */
+.total-area {
+  display: flex;
+  justify-content: flex-end;
+  gap: 5mm;
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 3mm;
+  padding-right: 2mm;
+  line-height: 4mm;
+}
+.total-label {
+  margin-right: 1mm;
+}
+
+/* 底部信息 */
+.footer-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 4mm;
+  padding-top: 1mm;
+  border-top: 1px dashed #ccc;
+}
+.info-item {
+  display: flex;
+  white-space: nowrap;
+}
+
+/* 打印样式适配：打印机不可打印区处理 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+@media print {
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+  }
+  .printContainer {
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+  }
+  .waybill-content {
+    --content-width-mm: 196; /* 右侧预留45mm不可打印区 */
+    --offset-x-mm: 6; /* 左侧内边距6mm */
+    --offset-y-mm: 15; /* 顶部偏移15mm */
+  }
+  /* 打印时允许表格内容换行，避免裁剪 */
+  .waybill-table th, .waybill-table td {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+  }
+}
+</style>

klp-ui/src/views/crm/order/index.vue

@@ -49,6 +49,8 @@
               <el-descriptions :column="2" :border="true" title="订单基本信息" style="margin-bottom: 20px;">
                 <el-descriptions-item label="订单编号">{{ form.orderCode }}</el-descriptions-item>
                 <el-descriptions-item label="销售员">{{ form.salesman }}</el-descriptions-item>
+                <el-descriptions-item label="交货日期">{{ form.deliveryDate }}</el-descriptions-item>
+
                 <el-descriptions-item label="客户公司">{{ form.companyName }}</el-descriptions-item>
                 <el-descriptions-item label="联系人">{{ form.contactPerson }}</el-descriptions-item>
                 <el-descriptions-item label="联系电话">{{ form.contactWay }}</el-descriptions-item>

klp-ui/src/views/crm/preOrder/index.vue

@@ -68,7 +68,7 @@
     <el-table v-loading="loading" :data="orderList" height="400px" highlight-current-row @row-click="handleRowClick">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="订单编号" align="center" prop="orderCode" />
-      <el-table-column label="客户" align="center" prop="customerId" />
+      <el-table-column label="客户" align="center" prop="companyName" />
       <el-table-column label="总金额" align="center" prop="orderAmount" />
       <el-table-column label="销售员" align="center" prop="salesman" />
       <el-table-column label="交货日期" align="center" prop="deliveryDate" width="180">