cashierdesktop/src/views/device/add.vue

<template>
  <div class="device_container">
    <div class="header" @click="router.back()">
      <el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
        <ArrowLeft />
      </el-icon>
      <el-text>{{ form.id ? "编辑小票打印机" : "添加小票打印机" }}</el-text>
    </div>
    <div class="d_content">
      <div class="d_list">
        <el-form :model="form" label-position="left" label-width="60%">
          <el-form-item label="设备尺寸">
            <el-select v-model="form.config.width">
              <el-option label="58mm" value="58"></el-option>
              <el-option label="80mm" value="80"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="form.connectionType">
              <el-option label="USB" value="USB"></el-option>
              <el-option label="网络" value="network"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择设备">
            <el-select v-model="form.config.deviceName">
              <el-option :label="item.name" :value="item.name" v-for="item in printList" :key="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="打印份数">
            <el-select v-model="form.config.printerNum">
              <el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品模式">
            <el-select v-model="form.config.model">
              <el-option label="普通出单" value="normal"></el-option>
              <el-option label="分类出单" value="category"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打印子订单">
            <el-select v-model="form.config.printSub">
              <el-option label="是" :value="0"></el-option>
              <el-option label="否" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动切刀">
            <el-select v-model="form.config.autoCut">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="尾部留空">
            <el-select v-model="form.config.feet">
              <el-option :label="`${item}行`" :value="`${item}`" v-for="item in feets" :key="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="menu_wrap">
        <div class="print_view">
          <div class="title t1">溜溜</div>
          <div class="title t2">结算单【#002】</div>
          <div class="row">订单号:202404021023542223445</div>
          <div class="row">交易时间:2024-04-02 10:15</div>
          <div class="row">收银员:【POS-1】1</div>
          <div class="line"></div>
          <table class="table">
            <tr>
              <td>品名</td>
              <td>单价</td>
              <td>数量</td>
              <td>小计</td>
            </tr>
            <tr>
              <td>
                <div>娃哈哈矿泉水</div>
                <div class="sku">500ml</div>
              </td>
              <td>1.0</td>
              <td>10</td>
              <td>10</td>
            </tr>
            <tr>
              <td>
                <div>柠檬奶茶</div>
                <div class="sku">加冰、加珍珠</div>
              </td>
              <td>10.0</td>
              <td>2</td>
              <td>20</td>
            </tr>
          </table>
          <div class="line"></div>
          <div class="row between">
            <span>合计:</span>
            <span>30.00</span>
          </div>
          <div class="row between">
            <span>合计:</span>
            <span>30.00</span>
          </div>
          <div class="row between">
            <span>原价:20.00，节省了0</span>
          </div>
          <div class="row between">
            <span>积分:</span>
            <span>0</span>
          </div>
          <div class="row between">
            <span>余额:</span>
            <span>0.00</span>
          </div>
          <div class="line"></div>
          <div class="row">备注:</div>
          <div class="row">打印时间:2024-04-02 10:15</div>
          <div class="btn_wrap">
            <div class="btn">
              <el-button plain style="width: 100%" @click="printHandle">
                打印测试小票
              </el-button>
            </div>
            <div class="btn">
              <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
                保存
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { ipcRenderer } from "electron";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { tbPrintMachinePost, tbPrintMachineDetail } from "@/api/device";
import { useUser } from "@/store/user.js";
import { Loading } from "element-plus/es/components/loading/src/service";
const store = useUser();

const router = useRouter();
const route = useRoute();

const printList = ref([]);
const feets = ref([0, 1, 2, 3, 4, 5, 8]);
const loading = ref(false);
const form = ref({
  id: "",
  contentType: "",
  connectionType: "USB",
  config: {
    deviceName: "",
    width: "58", // 设备尺寸毫米mm
    printerNum: 1, //打印份数
    categoryList: [], // 商品分类
    model: "normal", // 出品模式,
    feet: "2",
    autoCut: 0,
    printSub: 1,
  },
  name: "小票打印机",
  subType: "cash", // 打印类型
  status: 1,
  sort: "",
  shopId: store.userInfo.shopId,
});

// 获取打印机列表
function getPrintList() {
  ipcRenderer.send("getPrintList");
  ipcRenderer.on("printList", (event, arg) => {
    printList.value = arg;
  });
}

// 测试打印
function printHandle() {
  if (!form.value.config.deviceName) {
    ElMessage.warning("请选择打印设备");
    return;
  }

  // ipcRenderer.send(
  //   "printStart",
  //   JSON.stringify({ deviceName: form.value.config.deviceName })
  // );

  const data = {
    shop_name: '溜溜',
    carts: [
      {
        id: 1,
        name: '娃哈哈矿泉水',
        skuName: '500ml',
        salePrice: '1.0',
        number: '10',
        totalAmount: '10'
      },
      {
        id: 2,
        name: '柠檬奶茶',
        skuName: '加冰、加珍珠',
        salePrice: '10',
        number: '2',
        totalAmount: '20'
      }
    ],
    amount: '30.00',
    remark: '',
    orderInfo: {
      masterId: '#002',
      orderNo: '202404021023542223445'
    },
    deviceName: form.value.config.deviceName,
    createdAt: '2024-04-02 10:15',
    printTime: '2024-04-02 10:15',
  };
  ipcRenderer.send("printerInfoSync", JSON.stringify(data));
}

// 提交打印机
async function submitHandle() {
  try {
    if (!form.value.config.deviceName) {
      ElMessage.warning("请选择打印设备");
      return;
    }
    Loading.value = true;
    await tbPrintMachinePost(form.value, form.value.id ? "put" : "post");
    Loading.value = false;
    ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
    router.back();
  } catch (error) {
    console.log(error);
  }
}

// 查询打印机详情
async function tbPrintMachineDetailAjax() {
  try {
    const res = await tbPrintMachineDetail(route.query.id);
    form.value = res;
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  getPrintList();
  if (route.query.id) {
    tbPrintMachineDetailAjax(route.query.id);
  }
});
</script>

<style scoped lang="scss">
.device_container {
  width: 100vw;
  height: 100vh;
  padding: 15px;
  background-color: #f1f1f1;
}

.header {
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.d_content {
  padding-top: 15px;
  display: flex;
  height: calc(100vh - 15px * 2 - 50px);

  .d_list {
    flex: 2;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
  }

  .menu_wrap {
    flex: 1.5;
    margin-left: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 15px;

    .print_view {
      padding: 20px 0;

      .title {
        display: flex;
        justify-content: center;
        margin-bottom: 4px;

        &.t1 {
          font-size: 24px;
        }

        &.t2 {
          margin-bottom: 15px;
        }
      }

      .row {
        margin-top: 2px;

        &.between {
          display: flex;
          justify-content: space-between;
        }
      }

      .btn_wrap {
        display: flex;
        gap: 20px;
        padding: 20px 0;

        .btn {
          flex: 1;
        }
      }

      .line {
        margin: 10px 0;
        border-bottom: 1px solid #ddd;
      }

      .table {
        width: 100%;

        tr {
          width: 100%;
          display: flex;

          &:not(:last-child) {
            margin-bottom: 10px;
          }

          td {
            flex: 1;

            &:nth-child(1) {
              flex: 2;
            }

            &:not(:first-child) {
              display: flex;
              justify-content: flex-end;
            }

            .sku {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>