A4、贺卡打印；

src/common/LodopFuncs.js

@@ -145,7 +145,6 @@ export function getLodop(oOBJECT, oEMBED, fitstLogin = false) {
         }
         //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
         LODOP.SET_LICENSES("", "A4A7A0A3BA53E8548E00D14D5864728D8EA", "", "");
-        alert("SET_LICENSES执行了");
         return LODOP;
     } catch (err) {
         alert("getLodop出错:" + err);

src/components/settingComponents/print/a4Printer.vue

@@ -1,364 +1,387 @@
 <template>
-  <div class="shopAdd">
-    <!-- 打印机新增、编辑 -->
-    <el-dialog width="600px" :title="title" :destroy-on-close="true" center :visible.sync="showVisible">
-      <el-form :model="form" ref="form" label-width="120px">
-        <el-form-item label="选择打印机" prop="deviceType">
-          <div class="category_box">
-            <div class="item" :class="form.deviceType == item.type ? 'active' : ''" v-for="(item, i) in devices" :key="i" @click="changeType(item)">
-              {{ item.name }}
+  <div class="printer-list">
+    <div class="model">
+      <div class="title">
+        <div class="name">A4打印</div>
+      </div>
+      <div class="setting-model">
+        <div class="list">
+          <div class="item" v-for="(v,i) in list" :key=i>
+            <div class="left">
+              <div class="left-top">
+                <div class="name">{{v.name}}</div>
+              </div>
+              <div class="left-bot">{{v.tips}}</div>
+            </div>
+            <div class="right">
+              <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
             </div>
           </div>
-        </el-form-item>
-        <el-form-item label="关联门店">
-          <el-select v-model="form.shopId" placeholder="请选择关联门店">
-            <el-option v-for="v in shopList" :key="v.id" :label="v.name" :value="v.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="打印机名称" prop="name">
-          <el-input clearable v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="打印机编号" prop="deviceSn">
-          <el-input clearable v-model="form.deviceSn" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="打印机KEY" prop="deviceSecret" v-if="form.deviceType!==25">
-          <el-input clearable v-model="form.deviceSecret" 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>
+      </div>
+      <div class="printer-list">
+        <div class="item" v-for="(v,i) in printerList" :key="i">
+          <img class="img" :src="require(`../../../../static/image/printer-online-${v.onlineStatus}.png`)" alt="">
+          <div class="name">{{v.name}}</div>
+          <div class="shop-name">{{v.shopName}}</div>
+          <div class="btns">
+            <img @click.stop="printTest(v)" src="../../../../static/image/print-icon.png" alt="">
+            <img @click.stop="addPrinter(v)" src="../../../../static/image/edit-icon.png" alt="">
+            <img @click.stop="deletePrinter(v)" src="../../../../static/image/delete-icon.png" alt="">
           </div>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="loading" size="medium" class="btn" @click="save">保存</el-button>
+        </div>
+        <div class="item" @click.stop="addPrinter('')">
+          <img class="img" src="../../../../static/image/icon-add.png" alt="">
+          <div class="name">添加打印云盒</div>
+          <div class="shop-name"> </div>
+        </div>
       </div>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
-import { deviceAdd } from "../../../api/shop.js";
+import printerAdd from "./printerAdd";
+import {
+  getShopList,
+  shopDeviceList,
+  deviceDetail,
+  deviceList,
+  deviceAdd,
+  deviceDelete,
+  deviceStatus,
+  printTest,
+  shopListNew,
+} from "../../../api/shop";
 export default {
-  props: {
-    devices: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    shopList: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
+  name: "a4Printer",
+  components: {
+    printerAdd,
   },
   data() {
     return {
-      title: "添加打印机",
-      showVisible: false,
-      form: {
-        openOrderPrint: 1,
-        openOrderCancelPrint: 1,
-        printCustomerCount: 1,
-        printMerchantCount: 1,
-        printKitchenCount: 1,
-      },
-      revieweds: [],
-      loading: false,
-      isEdit: false,
+      list: [
+        {
+          name: "开启电脑打印",
+          value: 1,
+          field: "openAutoorder",
+          tips: "开启后订单打印将使用电脑打印机，如需自动打印，请开启下方云盒打印",
+        },
+        {
+          name: "使用云盒打印",
+          value: 1,
+          field: "openAutoorder",
+          tips: "使用智能打印云盒，实现A4带图自动打印",
+        },
+        {
+          name: "开通自动打印",
+          value: 1,
+          field: "openAutoorder",
+          tips: "开通后将使用云盒模式自动打印订单",
+        }
+      ],
     };
   },
-  created() {},
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
   methods: {
-    changeType(v) {
-      if (this.isEdit) {
-        return;
-      }
-      this.$set(this.form, "deviceType", v.type);
-      this.$set(this.form, "name", v.name);
-      this.form.deviceId = v.id;
+    printTest(v) {
+      printTest({ deviceSn: v.deviceSn }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "操作成功！",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    deletePrinter(v) {
+      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          deviceDelete({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: "error",
+                message: "删除成功！",
+              });
+              this.refreshData();
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
     },
-    init(e) {
-      if (e) {
-        this.isEdit = true;
-        this.title = "编辑打印机";
-        this.form = e;
+    refreshData() {
+      this.getPrinterNum();
+      this.getPrinterList();
+    },
+    addPrinter(e) {
+      console.log(e);
+      if (!e) {
+        this.$refs.printerAdd.init();
       } else {
-        this.isEdit = false;
-        this.title = "添加打印机";
-        this.form = {
-          openOrderPrint: 1,
-          openOrderCancelPrint: 1,
-          printCustomerCount: 1,
-          printMerchantCount: 1,
-          printKitchenCount: 1,
-          deviceType: "",
-          name: "",
-          deviceId: "",
-          shopId: "",
-          deviceSn: "",
-        };
+        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
       }
-      this.showVisible = true;
     },
-    save() {
-      if (!String(this.form.deviceId).trim()) {
-        return this.$message({
-          type: "error",
-          message: "请选择打印机！",
-        });
-      }
-      if (!this.form.name.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机名称！",
-        });
-      }
-      if (!this.form.deviceSn.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机编号！",
-        });
-      }
-      if (this.form.deviceType !== 25 && !this.form.deviceSecret.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机Key！",
-        });
-      }
-      this.loading = true;
-      deviceAdd(this.form).then((res) => {
+    getPrinterList() {
+      shopDeviceList({ deviceType: 2 }).then((res) => {
         if (res.code === 200) {
+          this.printerList = res.data;
+        } else {
           this.$message({
-            type: "success",
-            message: `${this.form.id ? "保存" : "新增"}成功！`,
+            type: "error",
+            message: res.msg,
           });
-          this.showVisible = false;
-          this.$emit("shopDeviceList");
+        }
+      });
+    },
+    getPrinterNum() {
+      deviceStatus().then((res) => {
+        if (res.code === 200) {
+          this.pinter = res.data;
         } 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;
-      }
+    getDeviceList() {
+      deviceList({ type: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.deviceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    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;
-      }
+    getShopList() {
+      shopListNew().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
   },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getPrinterNum();
+    this.getPrinterList();
+    this.getDeviceList();
+    this.getShopList();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
 };
 </script>
 
-<style lang="scss">
-.shopAdd {
-  .printer-num {
+<style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
     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;
-  }
-
-  .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;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
   }
-
-  .el-form-item__label {
-    text-align: left;
-    color: #000000;
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
   }
-
-  .el-input__inner:focus {
-    border-color: #fc7b0f;
+  /deep/ .el-button--default:hover {
+    background-color: rgba(252, 114, 0, 0.2);
+    border-color: rgba(252, 114, 0, 0.2);
+    color: #fc7200;
   }
-
-  .el-input__inner {
-    color: #222222;
+  /deep/ .el-button--primary {
+    background-color: #fc7200;
+    border-color: #fc7200;
   }
-
-  .category_box {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-top: -10px;
-
-    .item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 92px;
-      height: 38px;
-      margin: 10px 10px 0 0;
-      background: #f4f4f4;
+  .setting-model {
+    .title {
+      position: relative;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 22px;
+      color: #333333;
+      padding-left: 10px;
+      margin-top: 24px;
+      .tips {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #999999;
+      }
+    }
+    .title::before {
+      width: 3px;
+      height: 16px;
+      background: #fc7200;
       border-radius: 2px;
-      cursor: pointer;
-
-      &.active {
-        color: #ffffff;
-        background: #fc7200;
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 0;
+    }
+    .list {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #ffffff;
+        margin-top: 10px;
+        padding: 16px 20px;
+        .left {
+          display: flex;
+          flex-direction: column;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: 20px;
+          color: #000000;
+          .left-top {
+            display: flex;
+            align-items: center;
+            .set {
+              font-weight: 400;
+              color: #fc7200;
+              margin-left: 10px;
+              cursor: pointer;
+            }
+          }
+          .left-bot {
+            margin-top: 2px;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 17px;
+            color: #999999;
+          }
+        }
+        .right {
+          display: flex;
+          align-items: center;
+          .time {
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 17px;
+            color: #333333;
+            margin-right: 20px;
+          }
+          .time1 {
+            color: #999999;
+          }
+          .con {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #fc7200;
+            padding-left: 20px;
+            cursor: pointer;
+          }
+          .con1 {
+            color: #999999;
+          }
+        }
       }
     }
   }
-
-  .line {
-    position: absolute;
-    left: -103px;
-    right: 0;
-    bottom: -12px;
-    border: 0.5px dashed #e0e0e0;
-  }
-
-  .logo_box {
-    width: 100%;
-    height: 40px;
+  .printer-list {
     display: flex;
-    align-items: center;
-    line-height: 0;
-
-    img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-  }
-
-  .reviewed {
+    flex-wrap: wrap;
     .item {
+      position: relative;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: space-between;
-      height: 40px;
-
-      .left {
-        display: flex;
-        align-items: center;
-        line-height: 0;
-
-        .logo {
+      justify-content: center;
+      width: 320px;
+      height: 182px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .img {
+        width: 80px;
+        height: 80px;
+      }
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #333333;
+      }
+      .shop-name {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
+      }
+      .btns {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        img {
           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>
+</style>

src/components/settingComponents/print/greetingCardPrinter.vue

@@ -1,364 +1,408 @@
 <template>
-  <div class="shopAdd">
-    <!-- 打印机新增、编辑 -->
-    <el-dialog width="600px" :title="title" :destroy-on-close="true" center :visible.sync="showVisible">
-      <el-form :model="form" ref="form" label-width="120px">
-        <el-form-item label="选择打印机" prop="deviceType">
-          <div class="category_box">
-            <div class="item" :class="form.deviceType == item.type ? 'active' : ''" v-for="(item, i) in devices" :key="i" @click="changeType(item)">
-              {{ item.name }}
-            </div>
-          </div>
-        </el-form-item>
-        <el-form-item label="关联门店">
-          <el-select v-model="form.shopId" placeholder="请选择关联门店">
-            <el-option v-for="v in shopList" :key="v.id" :label="v.name" :value="v.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="打印机名称" prop="name">
-          <el-input clearable v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="打印机编号" prop="deviceSn">
-          <el-input clearable v-model="form.deviceSn" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="打印机KEY" prop="deviceSecret" v-if="form.deviceType!==25">
-          <el-input clearable v-model="form.deviceSecret" 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 class="printer-list">
+    <div class="model">
+      <div class="title">
+        <div class="name">贺卡打印</div>
+      </div>
+      <div class="printer-list">
+        <div class="item" v-for="(v,i) in printerList" :key="i">
+          <img class="img" :src="require(`../../../../static/image/printer-online-${v.onlineStatus}.png`)" alt="">
+          <div class="name">{{v.name}}</div>
+          <div class="shop-name">{{v.shopName}}</div>
+          <div class="btns">
+            <img @click.stop="printTest(v)" src="../../../../static/image/print-icon.png" alt="">
+            <img @click.stop="addPrinter(v)" src="../../../../static/image/edit-icon.png" alt="">
+            <img @click.stop="deletePrinter(v)" src="../../../../static/image/delete-icon.png" alt="">
           </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="item" @click.stop="addPrinter('')">
+          <img class="img" src="../../../../static/image/icon-add.png" alt="">
+          <div class="name">添加打印云盒</div>
+          <div class="shop-name"> </div>
+        </div>
+      </div>
+      <div class="setting-model">
+        <div class="list">
+          <div class="item" v-for="(v,i) in list" :key=i>
+            <div class="left">
+              <div class="left-top">
+                <div class="name">{{v.name}}</div>
+              </div>
+              <div class="left-bot">{{v.tips}}</div>
+            </div>
+            <div class="right">
+              <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+            </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 class="item">
+            <div class="left">
+              <div class="left-top">
+                <div class="name">设置贺卡样式</div>
+              </div>
+              <div class="left-bot">设置贺卡尺寸、间距以及字体样式</div>
+            </div>
+            <dis class="card-setting">
+              <div class="card-left">
+
+              </div>
+              <div class="card-right"></div>
+            </dis>
           </div>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="loading" size="medium" class="btn" @click="save">保存</el-button>
+        </div>
       </div>
-    </el-dialog>
+    </div>
+    <printer-add :shopList="shopList" @shopDeviceList="refreshData" ref="printerAdd" :devices="deviceList"></printer-add>
   </div>
 </template>
 
 <script>
-import { deviceAdd } from "../../../api/shop.js";
+import printerAdd from "./printerAdd";
+import {
+  getShopList,
+  shopDeviceList,
+  deviceDetail,
+  deviceList,
+  deviceAdd,
+  deviceDelete,
+  deviceStatus,
+  printTest,
+  shopListNew,
+} from "../../../api/shop";
 export default {
-  props: {
-    devices: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    shopList: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
+  name: "greetingCardPrinter",
+  components: {
+    printerAdd,
   },
   data() {
     return {
-      title: "添加打印机",
-      showVisible: false,
-      form: {
-        openOrderPrint: 1,
-        openOrderCancelPrint: 1,
-        printCustomerCount: 1,
-        printMerchantCount: 1,
-        printKitchenCount: 1,
-      },
-      revieweds: [],
-      loading: false,
-      isEdit: false,
+      list: [
+        {
+          name: "开启贺卡打印",
+          value: 1,
+          field: "openAutoorder",
+          tips: "开启后订单一键打印贺卡，暂不支持自动打印",
+        },
+      ],
+      parmas:{
+        width: 210,
+        height: 297,
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        printDirection: 0, // 0 竖向 1 横向（左） 2 横向（右）
+        printSizeStyle: 0 , // 0 A4  1 其他
+        fontFamily: 
+      }
     };
   },
-  created() {},
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
   methods: {
-    changeType(v) {
-      if (this.isEdit) {
-        return;
-      }
-      this.$set(this.form, "deviceType", v.type);
-      this.$set(this.form, "name", v.name);
-      this.form.deviceId = v.id;
+    printTest(v) {
+      printTest({ deviceSn: v.deviceSn }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "操作成功！",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    init(e) {
-      if (e) {
-        this.isEdit = true;
-        this.title = "编辑打印机";
-        this.form = e;
+    deletePrinter(v) {
+      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          deviceDelete({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: "error",
+                message: "删除成功！",
+              });
+              this.refreshData();
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    refreshData() {
+      this.getPrinterNum();
+      this.getPrinterList();
+    },
+    addPrinter(e) {
+      console.log(e);
+      if (!e) {
+        this.$refs.printerAdd.init();
       } else {
-        this.isEdit = false;
-        this.title = "添加打印机";
-        this.form = {
-          openOrderPrint: 1,
-          openOrderCancelPrint: 1,
-          printCustomerCount: 1,
-          printMerchantCount: 1,
-          printKitchenCount: 1,
-          deviceType: "",
-          name: "",
-          deviceId: "",
-          shopId: "",
-          deviceSn: "",
-        };
+        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
       }
-      this.showVisible = true;
     },
-    save() {
-      if (!String(this.form.deviceId).trim()) {
-        return this.$message({
-          type: "error",
-          message: "请选择打印机！",
-        });
-      }
-      if (!this.form.name.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机名称！",
-        });
-      }
-      if (!this.form.deviceSn.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机编号！",
-        });
-      }
-      if (this.form.deviceType !== 25 && !this.form.deviceSecret.trim()) {
-        return this.$message({
-          type: "error",
-          message: "请填写打印机Key！",
-        });
-      }
-      this.loading = true;
-      deviceAdd(this.form).then((res) => {
+    getPrinterList() {
+      shopDeviceList({ deviceType: 2 }).then((res) => {
         if (res.code === 200) {
+          this.printerList = res.data;
+        } else {
           this.$message({
-            type: "success",
-            message: `${this.form.id ? "保存" : "新增"}成功！`,
+            type: "error",
+            message: res.msg,
           });
-          this.showVisible = false;
-          this.$emit("shopDeviceList");
+        }
+      });
+    },
+    getPrinterNum() {
+      deviceStatus().then((res) => {
+        if (res.code === 200) {
+          this.pinter = res.data;
         } 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;
-      }
+    getDeviceList() {
+      deviceList({ type: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.deviceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
-    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;
-      }
+    getShopList() {
+      shopListNew().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
   },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getPrinterNum();
+    this.getPrinterList();
+    this.getDeviceList();
+    this.getShopList();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
 };
 </script>
 
-<style lang="scss">
-.shopAdd {
-  .printer-num {
+<style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
     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;
-  }
-
-  .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;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
   }
-
-  .el-form-item__label {
-    text-align: left;
-    color: #000000;
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
   }
-
-  .el-input__inner:focus {
-    border-color: #fc7b0f;
+  /deep/ .el-button--default:hover {
+    background-color: rgba(252, 114, 0, 0.2);
+    border-color: rgba(252, 114, 0, 0.2);
+    color: #fc7200;
   }
-
-  .el-input__inner {
-    color: #222222;
+  /deep/ .el-button--primary {
+    background-color: #fc7200;
+    border-color: #fc7200;
   }
-
-  .category_box {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-top: -10px;
-
-    .item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 92px;
-      height: 38px;
-      margin: 10px 10px 0 0;
-      background: #f4f4f4;
+  .setting-model {
+    .title {
+      position: relative;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 22px;
+      color: #333333;
+      padding-left: 10px;
+      margin-top: 24px;
+      .tips {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #999999;
+      }
+    }
+    .title::before {
+      width: 3px;
+      height: 16px;
+      background: #fc7200;
       border-radius: 2px;
-      cursor: pointer;
-
-      &.active {
-        color: #ffffff;
-        background: #fc7200;
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 0;
+    }
+    .list {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #ffffff;
+        margin-top: 10px;
+        padding: 16px 20px;
+        .left {
+          display: flex;
+          flex-direction: column;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: 20px;
+          color: #000000;
+          .left-top {
+            display: flex;
+            align-items: center;
+            .set {
+              font-weight: 400;
+              color: #fc7200;
+              margin-left: 10px;
+              cursor: pointer;
+            }
+          }
+          .left-bot {
+            margin-top: 2px;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 17px;
+            color: #999999;
+          }
+        }
+        .right {
+          display: flex;
+          align-items: center;
+          .time {
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 17px;
+            color: #333333;
+            margin-right: 20px;
+          }
+          .time1 {
+            color: #999999;
+          }
+          .con {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #fc7200;
+            padding-left: 20px;
+            cursor: pointer;
+          }
+          .con1 {
+            color: #999999;
+          }
+        }
+        .card-setting {
+          display: flex;
+          .card-left {
+            height: 297mm;
+            width: 210mm;
+          }
+        }
       }
     }
   }
-
-  .line {
-    position: absolute;
-    left: -103px;
-    right: 0;
-    bottom: -12px;
-    border: 0.5px dashed #e0e0e0;
-  }
-
-  .logo_box {
-    width: 100%;
-    height: 40px;
+  .printer-list {
     display: flex;
-    align-items: center;
-    line-height: 0;
-
-    img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-  }
-
-  .reviewed {
+    flex-wrap: wrap;
     .item {
+      position: relative;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: space-between;
-      height: 40px;
-
-      .left {
-        display: flex;
-        align-items: center;
-        line-height: 0;
-
-        .logo {
+      justify-content: center;
+      width: 320px;
+      height: 182px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .img {
+        width: 80px;
+        height: 80px;
+      }
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #333333;
+      }
+      .shop-name {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
+      }
+      .btns {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        img {
           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>
+</style>

src/components/settingComponents/waimai.vue

@@ -38,6 +38,8 @@ export default {
   components: {
     printerList,
     usbPrinter,
+    a4Printer,
+    greetingCardPrinter,
     pictureManagement,
     addressManagement,
     deliverySetting,