|
|
@@ -0,0 +1,447 @@
|
|
|
+<template>
|
|
|
+ <div class="shopAdd">
|
|
|
+ <div class="header">
|
|
|
+ <div class="left">
|
|
|
+ <div class="head-line">
|
|
|
+ <div class="b_line"></div>
|
|
|
+ <div class="triangle"></div>
|
|
|
+ </div>
|
|
|
+ <div class="label">USB打印机管理</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="printer-list">
|
|
|
+ <div class="printer" @click="setPinter(i)" v-for="(v,i) in printerList" :key="i">
|
|
|
+ <div :class="v.status ? 'img-wrap online-bg' : 'img-wrap offline-bg' ">
|
|
|
+ <img :src="v.status ? require('../../../static/image/usb-online.png') : require('../../../static/image/usb-offline.png')" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="name">{{v.deviceName}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 打印机新增、编辑 -->
|
|
|
+ <el-dialog width="40%" :title="title" destroy-on-close center :visible.sync="showVisible">
|
|
|
+ <el-form :model="form" ref="form" label-width="130px">
|
|
|
+ <el-form-item label="打印机系统名称" prop="deviceName">
|
|
|
+ <span>{{form.deviceName}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="打印机自定义名称" prop="name">
|
|
|
+ <el-input v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="自动打印接单" prop="deviceSecret">
|
|
|
+ <el-switch v-model="form.openOrderPrint" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="自动打印取消单" prop="deviceSecret">
|
|
|
+ <el-switch v-model="form.openOrderCancelPrint" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="打印份数">
|
|
|
+ <div class="printer-num">
|
|
|
+ <img @click="reduce(1)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
|
|
|
+ <div class="num">{{ form.printCustomerCount }} 份</div>
|
|
|
+ <img @click="add(1)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
|
|
|
+ <div class="name">客户联</div>
|
|
|
+ </div>
|
|
|
+ <div class="printer-num">
|
|
|
+ <img @click="reduce(2)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
|
|
|
+ <div class="num">{{ form.printMerchantCount }} 份</div>
|
|
|
+ <img @click="add(2)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
|
|
|
+ <div class="name">商家联</div>
|
|
|
+ </div>
|
|
|
+ <div class="printer-num">
|
|
|
+ <img @click="reduce(3)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
|
|
|
+ <div class="num">{{ form.printKitchenCount }} 份</div>
|
|
|
+ <img @click="add(3)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
|
|
|
+ <div class="name">厨房联</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小票宽度" prop="width">
|
|
|
+ <el-radio-group v-model="form.width">
|
|
|
+ <el-radio :label="58">58mm</el-radio>
|
|
|
+ <el-radio :label="80">80mm</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="启用USB打印机" prop="status">
|
|
|
+ <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span @click="printTest" class="print-test">打印测试</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button :loading="loading" size="medium" class="btn" @click="save">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { addUsbPrint, getUsbPrint } from "../../api/shop.js";
|
|
|
+import { getLodop } from "../../common/LodopFuncs.js";
|
|
|
+import { mapState, mapMutations, mapGetters } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "bindUsbPrint",
|
|
|
+ props: {
|
|
|
+ devices: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "设置USB打印机",
|
|
|
+ showVisible: false,
|
|
|
+ form: {},
|
|
|
+ revieweds: [],
|
|
|
+ loading: false,
|
|
|
+ isEdit: false,
|
|
|
+ printerList: [],
|
|
|
+ dataList: [],
|
|
|
+ form: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getUsbPrint();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(["SET_USBPRINTER"]),
|
|
|
+ printTest() {
|
|
|
+ setTimeout(() => {
|
|
|
+ LODOP = getLodop();
|
|
|
+ LODOP.PRINT_INIT("测试打印");
|
|
|
+ LODOP.SET_PRINT_PAGESIZE(3, this.form.width * 10, 100, "");
|
|
|
+ LODOP.SET_PRINTER_INDEX(this.form.deviceName);
|
|
|
+ LODOP.ADD_PRINT_TEXT(60, 20, 500, 125, "该打印机可以正常打印！");
|
|
|
+ LODOP.SET_PRINT_STYLEA(0, "FontSize", 12); //设置对象风格
|
|
|
+ LODOP.PRINT();
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ getUsbPrint() {
|
|
|
+ getUsbPrint().then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data.length) {
|
|
|
+ this.dataList = res.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 获取系统打印机列表
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getPrinterInfo();
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setPinter(i) {
|
|
|
+ this.showVisible = true;
|
|
|
+ this.form = this.printerList[i];
|
|
|
+ },
|
|
|
+ getPrinterInfo() {
|
|
|
+ LODOP = getLodop();
|
|
|
+ let printerCount = LODOP.GET_PRINTER_COUNT();
|
|
|
+ let printerList = [];
|
|
|
+ for (let index = 0; index < printerCount; index++) {
|
|
|
+ printerList.push({ deviceName: LODOP.GET_PRINTER_NAME(index) });
|
|
|
+ }
|
|
|
+ this.printerList = printerList.map((v) => {
|
|
|
+ let obj = this.dataList.find((ele) => {
|
|
|
+ return ele.deviceName === v.deviceName;
|
|
|
+ });
|
|
|
+ if (obj) {
|
|
|
+ v = obj;
|
|
|
+ } else {
|
|
|
+ v.openOrderPrint = 0;
|
|
|
+ v.openOrderCancelPrint = 0;
|
|
|
+ v.printCustomerCount = 1;
|
|
|
+ v.printMerchantCount = 1;
|
|
|
+ v.printKitchenCount = 1;
|
|
|
+ v.width = 58;
|
|
|
+ }
|
|
|
+
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ this.SET_USBPRINTER(this.printerList)
|
|
|
+ console.log("数量：", printerCount);
|
|
|
+ console.log("打印机：", printerList);
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ console.log(this.form);
|
|
|
+ this.loading = true;
|
|
|
+ addUsbPrint(this.form).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: `修改成功！`,
|
|
|
+ });
|
|
|
+ this.showVisible = false;
|
|
|
+ this.getUsbPrint();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ add(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ this.form.printCustomerCount = ++this.form.printCustomerCount;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.form.printMerchantCount = ++this.form.printMerchantCount;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.form.printKitchenCount = ++this.form.printKitchenCount;
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reduce(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ this.form.printCustomerCount = this.form.printCustomerCount
|
|
|
+ ? --this.form.printCustomerCount
|
|
|
+ : this.form.printCustomerCount;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.form.printMerchantCount = this.form.printMerchantCount
|
|
|
+ ? --this.form.printMerchantCount
|
|
|
+ : this.form.printMerchantCount;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.form.printKitchenCount = this.form.printKitchenCount
|
|
|
+ ? --this.form.printKitchenCount
|
|
|
+ : this.form.printKitchenCount;
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+// 添加颜色类
|
|
|
+.el-radio__input.is-checked + .el-radio__label {
|
|
|
+ color: #fc7200 !important;
|
|
|
+}
|
|
|
+.el-radio__input.is-checked .el-radio__inner {
|
|
|
+ background: #fc7200 !important;
|
|
|
+ border-color: #fc7200 !important;
|
|
|
+}
|
|
|
+.shopAdd {
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 10px;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .head-line {
|
|
|
+ position: relative;
|
|
|
+ width: 4px;
|
|
|
+ height: 15px;
|
|
|
+ background: #fc7200;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ .b_line {
|
|
|
+ width: 100px;
|
|
|
+ height: 6px;
|
|
|
+ background: #462bf7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .triangle {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 100px solid #462bf7;
|
|
|
+ border-left: 100px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0d1e40;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .printer-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .printer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ width: 210px;
|
|
|
+ height: 140px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #f3f3f7;
|
|
|
+ margin-right: 20px;
|
|
|
+ .online-bg {
|
|
|
+ background-color: #fc7200;
|
|
|
+ }
|
|
|
+ .offline-bg {
|
|
|
+ background-color: #888;
|
|
|
+ }
|
|
|
+ .img-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-shrink: 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-top: 30px;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .printer-num {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .reduce {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog {
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .print-test {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ /*height: 48px;*/
|
|
|
+ background: #f7f7f7;
|
|
|
+ padding: 16px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ text-align: left;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner:focus {
|
|
|
+ border-color: #fc7b0f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ left: -103px;
|
|
|
+ right: 0;
|
|
|
+ bottom: -12px;
|
|
|
+ border: 0.5px dashed #e0e0e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .reviewed {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 0;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 60px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 22px;
|
|
|
+ background: #f74141;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background: #fc7200;
|
|
|
+ color: #ffffff;
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Funny
