贺卡打印

src/api/shop.js

@@ -3,7 +3,9 @@ import { get, post, postJson } from './http.js';
 export const getShopList = (params) => {
   return get('app/shop/list', params)
 }
-
+export const getNewShopList = (params) => {
+  return get('app/shop/listNew', params)
+}
 export const shopListNew = (params) => {
   return get('app/shop/listSelect', params)
 }

src/common/sider.vue

@@ -131,6 +131,11 @@ export default {
               name: "waimai",
               title: "外卖设置",
             },
+            {
+              path: "/set/print",
+              name: "print",
+              title: "打印设置",
+            },
             // {
             //   path: "/set/system",
             //   name: "system",

src/components/settingComponents/print.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="24">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import printerList from "./print/printerList.vue";
+import a4Printer from "./print/a4Printer.vue";
+import greetingCardPrinter from "./print/greetingCardPrinter.vue";
+import usbPrinter from "../shopCompoents/bindUsbPrint.vue";
+export default {
+  name: "print",
+  components: {
+    printerList,
+    usbPrinter,
+    a4Printer,
+    greetingCardPrinter,
+  },
+  data() {
+    return {
+      activeName: "printerList",
+      tabList: [
+        { name: "云打印", index: 0, activeName: "printerList" },
+        { name: "有线打印", index: 1, activeName: "usbPrinter" },
+        { name: "A4打印", index: 2, activeName: "a4Printer" },
+        { name: "贺卡打印", index: 3, activeName: "greetingCardPrinter" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    let index = this.$route.params.tabNum ?? 0;
+    console.log(this.$route);
+    this.changeTabs(index);
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 2;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active-item {
+          color: #fc7200;
+        }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
+        }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/components/settingComponents/print/greetingCardPrinter.vue

@@ -44,77 +44,126 @@
 
           </div>
           <div class="card-setting">
+            <div class="card-left" :style="`max-height: ${params.dmPaperLength}mm;max-width: ${params.dmPaperWidth}mm;`">
+              <i class="el-icon-arrow-down icon1" :style="`top:${params.paddingTop}mm;left:${params.paddingLeft}mm;`"></i>
+              <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
+              <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
+              <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
+              <div class="card-con" :style="`font-family: ${params.fontFamily};padding:${params.paddingTop}mm ${params.paddingRight}mm ${params.paddingBottom}mm ${params.paddingLeft}mm;`">
+                <font size="6">亲爱的，生日快乐！希望你开心快乐每一天！</font>
+              </div>
+            </div>
             <div class="card-right">
               <div class="setting-params">
+                <div class="card-title">所属门店</div>
+                <el-select v-model="params.shopId" multiple @change="changeShop">
+                  <el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
+                    <div>{{ item.name }}</div>
+                  </el-option>
+                </el-select>
+              </div>
+              <div class="setting-params">
                 <div class="card-title">贺卡字体</div>
-                <el-select v-model="parmas.fontFamily" placeholder="请选择">
+                <el-select v-model="params.fontFamily">
                   <el-option v-for="item in fonts" :key="item.value" :value="item.value" :label="item.name">
                     <div :style="`font-family: ${item.value};font-size:20px;`">{{ item.name }}</div>
                   </el-option>
                 </el-select>
               </div>
               <div class="setting-params">
+                <div class="card-title">打印方向</div>
+                <el-select v-model="params.dmOrientation">
+                  <el-option v-for="item in directonList" :key="item.value" :value="item.value" :label="item.name">
+                    <div>{{ item.name }}</div>
+                  </el-option>
+                </el-select>
+              </div>
+              <div class="setting-params">
+                <div class="card-title">贺卡尺寸类型</div>
+                <el-select v-model="params.dmPaperSize" @change="changeDmPaperSize">
+                  <el-option v-for="item in paperSize" :key="item.value" :value="item.value" :label="item.name">
+                    <div>{{ item.name }}</div>
+                  </el-option>
+                </el-select>
+              </div>
+              <div class="setting-params">
                 <div class="card-title">贺卡尺寸</div>
-                <el-input placeholder="请输入贺卡宽度" v-model="parmas.width">
+                <el-input :disabled="[9,11].includes(params.dmPaperSize)" v-model="params.dmPaperWidth">
                   <template slot="prepend">宽</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
-                <el-input placeholder="请输入贺卡高度" v-model="parmas.height">
+                <el-input :disabled="[9,11].includes(params.dmPaperSize)" v-model="params.dmPaperLength">
                   <template slot="prepend">高</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
               </div>
               <div class="setting-params">
                 <div class="card-title">贺卡内容间距</div>
-                <el-input v-model="parmas.paddingTop">
+                <el-input v-model="params.paddingTop">
                   <template slot="prepend">上</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
-                <el-input v-model="parmas.paddingBottom">
+                <el-input v-model="params.paddingBottom">
                   <template slot="prepend">下</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
-                <el-input v-model="parmas.paddingLeft">
+                <el-input v-model="params.paddingLeft">
                   <template slot="prepend">左</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
-                <el-input v-model="parmas.paddingRight">
+                <el-input v-model="params.paddingRight">
                   <template slot="prepend">右</template>
-                  <template slot="append">mm</template>
+                  <template slot="append">毫米</template>
                 </el-input>
               </div>
-            </div>
-            <div class="card-left" :style="`max-height: ${parmas.height}mm;max-width: ${parmas.width};`">
-              <div class="card-con" :style="`font-family: ${parmas.fontFamily};`">
-                <font size="6">祝您生意兴隆！财源广进！</font>
+              <div class="btns">
+                <el-button size="small" type="warning">保存贺卡</el-button>
+                <el-button size="small">打印测试页</el-button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <printer-add :shopList="shopList" @shopDeviceList="refreshData" ref="printerAdd" :devices="deviceList"></printer-add>
+    <!-- 新增、编辑云盒 -->
+    <el-dialog title="云盒管理" :visible.sync="dialogVisible" width="30%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="云盒名称">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="云盒序列号">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="云盒秘钥">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-select v-model="form.shopId" multiple @change="changePrinterShop">
+          <el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
+            <div>{{ item.name }}</div>
+          </el-option>
+        </el-select>
+        <el-form-item label="选择打印机">
+          <el-select v-model="form.name" placeholder="请选择活动区域">
+            <el-option v-for="item in cloudList" :key="item.id" :value="item.id" :label="item.name">
+              <div>{{ item.name }}</div>
+            </el-option>
+          </el-select>
+          <el-tag @click="getCloudPrinterInfo">获取打印机信息</el-tag>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import printerAdd from "./printerAdd";
-import {
-  getShopList,
-  shopDeviceList,
-  deviceDetail,
-  deviceList,
-  deviceAdd,
-  deviceDelete,
-  deviceStatus,
-  printTest,
-  shopListNew,
-} from "../../../api/shop";
+import { getNewShopList } from "../../../api/shop";
 export default {
   name: "greetingCardPrinter",
-  components: {
-    printerAdd,
-  },
+  components: {},
   data() {
     return {
       list: [
@@ -125,17 +174,19 @@ export default {
           tips: "开启后订单一键打印贺卡，暂不支持自动打印",
         },
       ],
-      parmas: {
-        width: 210,
-        height: 297,
+      params: {
+        dmPaperWidth: 210,
+        dmPaperLength: 297,
         paddingTop: 10,
         paddingBottom: 10,
         paddingLeft: 10,
         paddingRight: 10,
-        printDirection: 0, // 0 竖向 1 横向（左） 2 横向（右）
-        printSizeStyle: 0, // 0 A4  1 其他
+        dmOrientation: 1, // 1：竖向 2：横向
         fontFamily: "FangZhengKaiTi",
+        shopId: [0],
+        dmPaperSize: 9, // 纸张尺寸
       },
+      printerList: [],
       shopList: [],
       fonts: [
         {
@@ -171,6 +222,31 @@ export default {
           value: "slideyouran",
         },
       ],
+      paperSize: [
+        {
+          name: "A4",
+          value: 9,
+        },
+        {
+          name: "A5",
+          value: 11,
+        },
+        {
+          name: "自定义",
+          value: 0,
+        },
+      ],
+      directonList: [
+        {
+          name: "竖向",
+          value: 1,
+        },
+        {
+          name: "横向",
+          value: 2,
+        },
+      ],
+      dialogVisible: false,
     };
   },
   // 监听属性 类似于data概念
@@ -179,102 +255,48 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    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: "已取消删除",
-          });
-        });
+    getCloudPrinterInfo(){
+
     },
-    refreshData() {
-      this.getPrinterNum();
-      this.getPrinterList();
+    addPrinter() {
+      this.dialogVisible = true;
     },
-    addPrinter(e) {
-      console.log(e);
-      if (!e) {
-        this.$refs.printerAdd.init();
+    changeShop(e) {
+      if (e.at(-1)) {
+        this.params.shopId = e.filter((v) => {
+          return v;
+        });
       } else {
-        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
+        this.params.shopId = [0];
       }
     },
-    getPrinterList() {
-      shopDeviceList({ deviceType: 2 }).then((res) => {
-        if (res.code === 200) {
-          this.printerList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    getPrinterNum() {
-      deviceStatus().then((res) => {
-        if (res.code === 200) {
-          this.pinter = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
+    changePrinterShop(e) {
+      if (e.at(-1)) {
+        this.form.shopId = e.filter((v) => {
+          return v;
+        });
+      } else {
+        this.form.shopId = [0];
+      }
     },
-    getDeviceList() {
-      deviceList({ type: 2 }).then((res) => {
-        if (res.code === 200) {
-          this.deviceList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
+    changeDmPaperSize(e) {
+      if (e === 9) {
+        this.params.dmPaperWidth = 210;
+        this.params.dmPaperLength = 297;
+      }
+      if (e === 11) {
+        this.params.dmPaperWidth = 148;
+        this.params.dmPaperLength = 210;
+      }
+      if (e === 0) {
+        this.params.dmPaperWidth = 195;
+        this.params.dmPaperLength = 145;
+      }
     },
-    getShopList() {
-      shopListNew().then((res) => {
+    getNewShopList() {
+      getNewShopList().then((res) => {
         if (res.code === 200) {
+          res.data.unshift({ id: 0, name: "全部门店" });
           this.shopList = res.data;
         } else {
           this.$message({
@@ -287,10 +309,7 @@ export default {
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getPrinterNum();
-    this.getPrinterList();
-    this.getDeviceList();
-    this.getShopList();
+    this.getNewShopList();
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -438,26 +457,55 @@ export default {
           margin: 10px 0;
         }
         .card-right {
-          width: 300px;
+          width: 230px;
           flex-shrink: 0;
           .setting-params {
             width: 217px;
           }
+          .btns {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+          }
         }
         .card-left {
           position: relative;
           margin-right: 24px;
           background-color: #fbfbfb;
           flex-shrink: 0;
+          flex: 1;
           height: 297mm;
           width: 210mm;
           .card-con {
             position: relative;
             top: 50%;
             transform: translateY(-50%);
-            padding: 10mm;
             text-align: center;
           }
+          /deep/ .el-icon-arrow-down {
+            position: absolute;
+            font-size: 30px;
+          }
+          .icon1 {
+            top: 10mm;
+            left: 10mm;
+            transform: rotate(-45deg);
+          }
+          .icon2 {
+            top: 10mm;
+            right: 10mm;
+            transform: rotate(45deg);
+          }
+          .icon3 {
+            bottom: 10mm;
+            left: 10mm;
+            transform: rotate(-135deg);
+          }
+          .icon4 {
+            bottom: 10mm;
+            right: 10mm;
+            transform: rotate(135deg);
+          }
         }
       }
     }

src/components/settingComponents/waimai.vue

@@ -51,19 +51,8 @@ export default {
       tabList: [
         { name: "配送设置", index: 0, activeName: "deliverySetting" },
         { name: "语音设置", index: 1, activeName: "voiceSetting" },
-        {
-          name: "打印机管理",
-          index: 2,
-          activeName: "printerList",
-          children: [
-            { name: "云打印", command: "printerList" },
-            { name: "有线打印", command: "usbPrinter" },
-            { name: "A4打印", command: "a4Printer" },
-            { name: "贺卡打印", command: "greetingCardPrinter" },
-          ],
-        },
-        { name: "商品管理", index: 3, activeName: "pictureManagement" },
-        { name: "常用地址", index: 4, activeName: "addressManagement" },
+        { name: "商品管理", index: 2, activeName: "pictureManagement" },
+        { name: "常用地址", index: 3, activeName: "addressManagement" },
       ],
       tabNum: 0,
       renderComponent: true,

src/router/index.js

@@ -87,6 +87,12 @@ const router = new Router({
           component: () => import('../components/settingComponents/waimai.vue')
         },
         {
+          path: '/set/print',
+          name: 'print',
+          title: '打印设置',
+          component: () => import('../components/settingComponents/print.vue')
+        },
+        {
           path: '/set/system',
           name: 'system',
           title: '系统设置',