订单打印优化

zhanghua

2024-12-22 79736a1cdb390e9036375f08a5aa6c8743820abb

 src/views/order/index.vue

@@ -1,166 +1,183 @@
<template>
  <div class="app-container">
    <div style="display: flex; justify-content: space-between">
      <div style="width: 300px">
        <el-input
          placeholder="按姓名、课程、电话搜索"
          v-model="data.keyword"
          class="input-with-select"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleClick"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div style="height: calc(100vh - 208px)">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        height="100%"
      >
        <el-table-column label="订单号" width="200" prop="number">
        </el-table-column>
        <el-table-column label="学员" prop="playerBaseInfo.name">
        </el-table-column>
        <el-table-column label="电话" prop="mobile"> </el-table-column>
        <el-table-column label="购买方式" width="200" prop="payType">
          <template slot-scope="scope">
            {{ scope.row.payType == "DIRECT" ? "收费录入" : "商城购入" }}
          </template>
        </el-table-column>
        <el-table-column label="总价" width="80" prop="originAmt">
        </el-table-column>
        <el-table-column label="折扣" width="80" prop="discount">
        </el-table-column>
        <el-table-column label="实际缴费" width="80" prop="amt">
        </el-table-column>
        <el-table-column label="订单时间" width="200" prop="createTime">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              @click="handlePrint(scope.row)"
              type="primary"
              :underline="false"
              >打印收据</el-link
    <div class="app-container">
        <div style="display: flex; justify-content: space-between">
            <div style="width: 300px">
                <el-input
                    placeholder="按姓名、课程、电话搜索"
                    v-model="data.keyword"
                    class="input-with-select"
                    size="small"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleClick"
                    ></el-button>
                </el-input>
            </div>
        </div>
        <div style="height: calc(100vh - 208px)">
            <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                fit
                height="100%"
            >
          </template>
        </el-table-column>
      </el-table>
                <el-table-column label="订单号" width="200" prop="number">
                </el-table-column>
                <el-table-column label="学员" prop="playerBaseInfo.name">
                </el-table-column>
                <el-table-column label="电话" prop="mobile"> </el-table-column>
                <el-table-column label="购买方式" width="200" prop="payType">
                    <template slot-scope="scope">
                        {{
                            scope.row.payType == 'DIRECT'
                                ? '收费录入'
                                : '商城购入'
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="总价" width="80" prop="originAmt">
                </el-table-column>
                <el-table-column label="折扣" width="80" prop="discount">
                </el-table-column>
                <el-table-column label="实际缴费" width="80" prop="amt">
                </el-table-column>
                <el-table-column label="订单时间" width="200" prop="createTime">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-link
                            @click="handlePrint(scope.row)"
                            type="primary"
                            :underline="false"
                            >打印收据</el-link
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="data.pageIn.index + 1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="data.pageIn.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.pageIn.index + 1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="data.pageIn.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getData } from "@/api/order";
import { getData, findPlayerAccByOrderId } from "@/api/order";
import { printHtml } from "@/utils/print";
import { convertCurrency } from "@/utils/ruoyi";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dateRange: [],
      list: null,
      listLoading: true,
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("selectStaff")).id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "createTime", //排序字段名称
            direction: "DESC", //排序方向
          },
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
      },
      dialogVisible: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    reloadData() {
      this.dialogVisible = false;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      getData(this.data).then((response) => {
        this.list = response.data.findOrderByOrgId.ls;
        this.total = response.data.findOrderByOrgId.pageOut.total;
        this.listLoading = false;
      });
    data() {
        return {
            dateRange: [],
            list: null,
            listLoading: true,
            total: 0,
            data: {
                staffId: JSON.parse(localStorage.getItem("selectStaff")).id,
                keyword: "",
                pageIn: {
                    //可选，如果是分页查询，需要加上。
                    index: 0, //必选
                    size: 10, //每页的大小。默认20
                    sorts: {
                        name: "createTime", //排序字段名称
                        direction: "DESC", //排序方向
                    },
                },
            },
            dialogVisible: false,
        };
    },
    handleClick() {
      this.fetchData();
    created() {
        this.fetchData();
    },
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData();
    },
    handlePrint(row) {
      const orgName = JSON.parse(localStorage.getItem("selectStaff")).org.name;
    methods: {
        reloadData() {
            this.dialogVisible = false;
            this.fetchData();
        },
        fetchData() {
            this.listLoading = true;
            getData(this.data).then((response) => {
                this.list = response.data.findOrderByOrgId.ls;
                this.total = response.data.findOrderByOrgId.pageOut.total;
                this.listLoading = false;
            });
        },
        handleClick() {
            this.fetchData();
        },
        handleSizeChange(val) {
            this.data.pageIn.size = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.data.pageIn.index = val - 1;
            this.fetchData();
        },
        handlePrint(row) {

      let detail = "";
      row.details.forEach((o) => {
        detail += `<tr>
            if (row.payType == "DIRECT") {
                findPlayerAccByOrderId({ 'orderId': row.id }).then(res => {
                    if (res.data.findPlayerAccByOrderId.length > 0) {
                        row.staffName = res.data.findPlayerAccByOrderId[0].staffName
                        row.message = res.data.findPlayerAccByOrderId[0].description
                    }
                    this.doPrint(row)
                })
            }
            else {
                this.doPrint(row)
            }

        },
        doPrint(row) {
            const orgName = JSON.parse(localStorage.getItem("selectStaff")).org.name;
            let detail = "";
            row.details.forEach((o) => {
                detail += `<tr>
                <td> ${o.voucherName || o.goodsName}</td>
                <td>${o.qty} </td>
                <td> ${o.giftQty}</td>
                <td> ${o.giftQty || 0}</td>
                <td>${o.amt}</td>
                <td>${row.saleStaff.name} </td>
            </tr>`;
      });
            });

      let printData = `<div style="display: flex; justify-content: center;">
            let printData = `<div style="display: flex; justify-content: center;">
    <div style="margin-top: 50px; width: 600px;line-height: 2;">
        <h2 style="text-align: center;">${orgName}缴费收据 </h2>
        <div> 订单号：${row.number}</div>
        <div class="div-2-column">
            <div> 学员姓名：<u>${
              row.playerBaseInfo ? row.playerBaseInfo.name : ""
            }</u> </div>
            <div> 学员姓名：<u>${row.playerBaseInfo ? row.playerBaseInfo.name : ""
                }</u> </div>
            <div>联系电话：<u>${row.mobile || "未录入"} </u></div>
        </div>
        <div> 订单类型：${
          row.payType == "DIRECT" ? "收费录入" : "商城购入"
        } </div>
        <div> 订单类型：${row.payType == "DIRECT" ? "收费录入" : "商城购入"
                } </div>

        <div class="m-h2"> 课程信息</div>
        <table class="txt-center" width="100%" border="1" cellpadding="2" cellspacing="0">
@@ -183,25 +200,24 @@
                <td>&nbsp;折扣/赠送金额：${row.discount}</td>
            </tr>
            <tr>
                <td>&nbsp;实缴金额：${convertCurrency(row.amt)}（¥${
        row.amt
      }）</td>
                <td>&nbsp;实缴金额：${convertCurrency(row.amt)}（¥${row.amt
                }）</td>
            </tr>
        </table>
        <div>&nbsp;备注：${row.message || ""} </div>
        <br>
        <br>
        <div class="div-2-column">
            <div> 经办人：${row.buyer.name}  </div>
            <div> 经办人：${row.staffName || ''}  </div>
            <div>经办日期：${row.createTime} </div>
        </div>
    </div>
</div>`;
      printHtml(printData);
            printHtml(printData);
        },
        showCreate() {
            this.$refs.studentCreate.showDialog();
        },
    },
    showCreate() {
      this.$refs.studentCreate.showDialog();
    },
  },
};
</script>