ncs_project/manager-admin/src/views/pjOrder/shipped.vue

<template>
  <div class="container">
    <en-table-layout
      :tableData="tableData.data"
      :loading="loading"
    >
      <div slot="toolbar" class="inner-toolbar">
        <div v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0" class="toolbar-btns">
          <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          <el-button type="primary" @click="handlePrint">打印签收单</el-button>
        </div>
      </div>

      <template slot="table-columns">
        <el-table-column label="收货单" width="130">
          <template slot-scope="scope">
            <div class="goods-info">
              <div class="goods-image" style="margin: 0 20px;" @click="handlePictureCardPreview(scope.row.shipped_url)">
                <el-image :src="scope.row.shipped_url" fit="cover"></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货人" prop="shipped_user" sortable width="170"></el-table-column>
        <el-table-column label="发货时间" :formatter="MixinUnixToDate" prop="shipped_time" sortable width="170"></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip min-width="180"></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, 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="添加" :visible.sync="dialogVisible">
      <el-form :model="addModel">
        <el-form-item label="发货时间" prop="shipped_time">
          <el-date-picker
            v-model="addModel.shipped_time"
            type="datetime"
            placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注：" class="description">
          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="addModel.remark"></el-input>
        </el-form-item>
        <el-form-item label="发货单">
          <el-upload class="avatar-uploader"
                     :action="`${MixinUploadApi}/uploadFile?scene=pjshipped`"
                     :on-success="uploadSuccess"
                     :before-upload="handleUploadBefore"
                     :multiple="false"
                     :limit="1"
          >
            <el-button size="small" type="primary" icon="el-icon-plus avatar-uploader-icon">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片，不超过3M</div>
          </el-upload>
          <span>{{addModel.shipped_url}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加打印选择对话框 -->
    <el-dialog title="选择打印项目" :visible.sync="printDialogVisible" width="80%">
      <el-table
        :data="orderItems"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          min-width="200">
        </el-table-column>
        <el-table-column
          prop="code"
          label="型号"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="qty"
          label="数量"
          width="100">
        </el-table-column>
        <el-table-column
          label="本次发货数量"
          width="150">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.printQty"
              :min="1"
              :max="scope.row.qty"
              size="small"
              controls-position="right"
              @change="handleQtyChange(scope.row)">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          min-width="250">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="scope.row.printRemark"
              resize="none">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; padding: 0 20px;">
        <el-form :model="printForm" label-width="100px">
          <el-form-item label="出库时间">
            <el-date-picker
              v-model="printForm.shipped_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 200px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入收货地址"
              v-model="printForm.address"
              style="width: 100%;">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePrintConfirm">确认打印</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogImage">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div id="printContent" style="display: none;">
      <div style="position: relative; margin-bottom: 10px;">
        <div style="position: absolute; top: 0; left: 0;">
          <img src="../../assets/logo_images/logo-javashop-rectangle-light.png" style="width: 150px; height: auto;" />
        </div>
        <div style="text-align: center;">
          <h2 style="margin: 3px 0;">深圳市维鼎康联信息技术有限公司</h2>
          <h3 style="margin: 3px 0;">签收单</h3>
        </div>
      </div>
      <div style="margin-bottom: 10px;">
        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
          <div>项目名称：{{ orderInfo.name || '未填写' }}</div>
          <div>出库时间：{{ printForm.shipped_time || '未填写' }}</div>
        </div>
        <div>收货地址：{{ printForm.address || '未填写' }}</div>
      </div>
      <table border="1" cellspacing="0" cellpadding="2" style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>型号</th>
            <th>数量</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in selectedItems" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.code }}</td>
            <td>{{ item.printQty }}</td>
            <td style="max-width: 200px; word-break: break-all;">{{ item.printRemark || '无' }}</td>
          </tr>
          <tr v-for="index in (7 - selectedItems.length)" :key="'empty-' + index">
            <td>{{ selectedItems.length + index }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div style="margin-top: 10px; line-height: 1.5;">
        <p style="margin: 3px 0;">如对以上货品名规格，数量验收无误，请签字或盖章回传给我们。</p>
        <p style="margin: 3px 0;">如有异议，请立刻联系我司，自货物签收之日起，三日内未收到任何异议，视为品名数量无误。</p>
        <div style="margin-top: 10px; text-align: right;">
          <div style="display: flex; justify-content: flex-end; align-items: center;">
            <span style="margin-right: 20px;">收货单位及经手人（盖章）：_________________</span>
            <span>签收日期：_________________</span>
          </div>
        </div>
      </div>
      <div style="margin-top: 15px;">
        <div style="display: flex; justify-content: center; margin-bottom: 5px;">
          <div style="width: 33.33%; text-align: left;">送货负责：{{ adminUser.realname }}</div>
          <div style="width: 33.33%; text-align: left;">下单：{{ orderInfo.sales || '未填写' }}</div>
          <div style="width: 33.33%; text-align: left;">电话：0755-83204332</div>
        </div>
        <div style="display: flex; justify-content: center;">
          <div style="width: 33.33%; text-align: left;">第一联（白）：存根</div>
          <div style="width: 33.33%; text-align: left;">第二联（红）：客户签收单</div>
          <div style="width: 33.33%; text-align: left;">第三联（黄）：客户</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as API_Shipped from '@/api/pjShipped'
import * as API_OrderItems from '@/api/pjOrderItems'
import * as API_Order from '@/api/pjOrder'
import Storage from '../../utils/storage'

export default {
  name: 'pjRemarkList',
  props: {
    orderNo: {
      type: String,
      value: ''
    }
  },
  data() {
    return {
      boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
      permissions: [],
      adminUser: JSON.parse(Storage.getItem('admin_user')),
      /** 列表loading状态 */
      loading: false,
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 20,
        sort: 'id',
        dir: 'desc'
      },
      /** 列表数据 */
      tableData: '',
      dialogVisible: false,
      printDialogVisible: false,
      selectedItems: [],
      addModel: {},
      dialogImage: false,
      dialogImageUrl: '',
      orderItems: [],
      orderInfo: {},
      printForm: {
        shipped_time: '',
        address: ''
      }
    }
  },
  mounted() {
    if (!this.boolFounder) {
      this.permissions = JSON.parse(Storage.getItem('permissions'))
    }
    this.GET_List()
  },
  // watch: {
  //   orderNo(val) {
  //     if (val) {
  //       this.GET_List()
  //     }
  //   }
  // },
  methods: {
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.GET_List()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.GET_List()
    },
    GET_List() {
      this.loading = true
      this.params.fixedCondition = " order_no='" + this.orderNo + "'"
      API_Shipped.getList(this.params).then(response => {
        this.loading = false
        this.tableData = response
        this.getOrderItems()
      }).catch(() => (this.loading = false))
    },
    getOrderItems() {
      const params = {
        page_no: 1,
        page_size: 1000,
        fixedCondition: "order_no='" + this.orderNo + "'"
      }
      API_OrderItems.getList(params).then(response => {
        this.orderItems = response.data
        this.getOrderInfo()
      })
    },
    getOrderInfo() {
      const params = {
        page_no: 1,
        page_size: 1,
        fixedCondition: "order_no='" + this.orderNo + "'"
      }
      API_Order.getList(params).then(response => {
        if (response.data && response.data.length > 0) {
          this.orderInfo = response.data[0]
        }
      })
    },
    handlePrint() {
      // 初始化打印数据
      const items = this.orderItems.map(item => ({
        ...item,
        printQty: Number(item.qty),
        printRemark: item.remark || ''
      }))
      this.orderItems = items

      // 初始化打印表单数据
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      this.printForm = {
        shipped_time: `${year}-${month}-${day}`,
        address: this.orderInfo.address || ''
      }

      this.printDialogVisible = true
    },
    handleSelectionChange(val) {
      this.selectedItems = val
    },
    handleQtyChange(row) {
      // 可以在这里添加数量变化的处理逻辑
      console.log('数量已修改:', row.printQty)
    },
    handlePrintConfirm() {
      if (this.selectedItems.length === 0) {
        this.$message.warning('请至少选择一项商品')
        return
      }
      if (this.selectedItems.length > 7) {
        this.$message.warning('最多只能选择7项商品')
        return
      }
      if (!this.printForm.shipped_time) {
        this.$message.warning('请选择出库时间')
        return
      }
      if (!this.printForm.address) {
        this.$message.warning('请填写收货地址')
        return
      }
      this.printDialogVisible = false
      this.doPrint()
    },
    doPrint() {
      const printContent = document.getElementById('printContent')
      const printWindow = window.open('', '_blank')
      printWindow.document.write(`
        <html>
          <head>
            <title>签收单</title>
            <style>
              body {
                font-family: Arial, sans-serif;
                font-size: 12px;
                margin: 0;
                padding: 5mm;
              }
              table {
                width: 100%;
                border-collapse: collapse;
                font-size: 11px;
              }
              th, td {
                border: 1px solid #000;
                padding: 2px;
                text-align: center;
              }
              h2 {
                font-size: 16px;
                margin: 5px 0;
              }
              h3 {
                font-size: 14px;
                margin: 5px 0;
              }
              p {
                margin: 5px 0;
                font-size: 11px;
              }
              .signature-area { margin-top: 10px; }
              .logo-container { position: relative; }
              .logo { position: absolute; top: 0; right: 0; }
              #printContent {
                width: 230mm;
                height: 130mm;
                margin: 0 auto;
              }
            </style>
          </head>
          <body>
            ${printContent.innerHTML}
          </body>
        </html>
      `)
      printWindow.document.close()
      printWindow.focus()
      setTimeout(() => {
        printWindow.print()
        printWindow.close()
      }, 500)
    },
    handleUploadBefore(file) {
      let _this = this
      return new Promise((resolve, reject) => {
        let hz = file.name
        _this.fileName = hz
        let index = hz.lastIndexOf('.')
        hz = hz.substring(index + 1, hz.length)
        const isImg = hz === 'jpeg' || hz === 'png' || hz === 'jpg'
        const isLt5M = file.size / 1024 / 1024 < 3
        if (!isImg) {
          _this.$message.error('上传格式错误，仅支持 图片格式')
          reject()
        }
        if (!isLt5M) {
          _this.$message.error('不能大于3M')
          reject()
        }
        resolve()
      })
    },
    /** 上传成功后的钩子 更换图片 置空存储数组*/
    async uploadSuccess(response, file) {
      if (file.status === 'success') {
        this.addModel.shipped_url = response.url
      }
    },
    handleAdd() {
      if (!this.addModel.remark) {
        this.$message.error('必须填写备注')
        return
      }
      if (!this.addModel.shipped_time) {
        this.$message.error('请选择发货时间')
        return
      }
      this.addModel.shipped_time /= 1000
      const adminUser = JSON.parse(Storage.getItem('admin_user'))
      this.addModel.shipped_user = adminUser.realname
      this.addModel.order_no = this.orderNo
      API_Shipped.addModel(this.addModel).then(res => {
        this.$message.success('添加成功')
        this.dialogVisible = false
        this.addModel = {}
        this.GET_List()
      }).catch()
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogImage = true
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .el-table td:not(.is-left) {
  text-align: center;
}

.inner-toolbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.toolbar-search {
  margin-right: 10px;
}

.goods-info {
  display: flex;
  align-items: center;
  .goods-image {
    img {
      width: 80px;
      height: 80px;
    }
  }
  .goods-name-box {
    text-align: left;
    .goods-name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      a:hover {
        color: #f42424 !important;
      }
    }
  }
}
</style>