A4打印

src/components/settingComponents/print/a4Printer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="printer-list">
+  <div class="a4-printer">
     <div class="model">
       <div class="setting-model">
         <div class="list">
@@ -34,76 +34,166 @@
               <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
             </div>
           </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 class="item">
+            <div class="left">
+              <div class="left-top">
+                <div class="name">设置店铺联系号码</div>
+              </div>
+              <div class="left-bot">设置的店铺电话会打印在A4纸张上</div>
+            </div>
+            <div class="right" @click="openSettingPhone">
+              <div class="right-name">{{phoneSetting}}</div>
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <div class="left-top">
+                <div class="name">使用云盒打印</div>
+              </div>
+              <div class="printer-list">
+                <div class="printer-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="addPrinter(v)" src="../../../../static/image/edit-icon.png" alt="">
+                    <img @click.stop="deletePrinter(v)" src="../../../../static/image/delete-icon.png" alt="">
+                  </div>
+                </div>
+                <div v-if="!this.printerList.length" class="printer-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>
+          </div>
+          <div class="item" v-for="(v,i) in list1" :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>
-        <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>
+    <!-- 设置联系电话 -->
+    <el-dialog title="电话设置" :visible.sync="showSettingPhone" width="500px">
+      <el-select size="small" v-model="phoneSettingStyle" placeholder="请选择">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <el-input class="unify-phone" size="small" v-if="phoneSettingStyle===1" v-model="unifyPhone" placeholder="请输入统一的电话号码"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="showSettingPhone = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="confirmSettingPhone">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 新增、编辑云盒 -->
+    <el-dialog title="云盒管理" :visible.sync="dialogVisible" @close="resetData" width="600px">
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item label="云盒名称">
+          <el-input v-model="form.name" clearable placeholder="请自定义云盒名称"></el-input>
+        </el-form-item>
+        <el-form-item label="云盒序列号">
+          <el-input v-model="form.deviceSn" clearable placeholder="请填写云盒序列号"></el-input>
+        </el-form-item>
+        <el-form-item label="云盒秘钥">
+          <el-input v-model="form.deviceSecret" clearable placeholder="请填写云盒秘钥"></el-input>
+        </el-form-item>
+        <el-form-item label="关联门店">
+          <el-select style="width:300px;" clearable v-model="form.shopIdList" multiple @change="changePrinterShop" max-width="300px">
+            <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>
+        <el-form-item label="选择打印机">
+          <el-select style="width:300px;" v-model="form.deviceName" placeholder="请选择打印机">
+            <el-option v-for="item in cloudList" :key="item.id" :value="`${ item.driverName }(USB${item.port})`">
+              <div>{{ item.driverName }}(USB{{item.port}})</div>
+            </el-option>
+          </el-select>
+          <el-button type="success" @click="getCloudPrinterInfo">获取打印机信息</el-button>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="cloudPrinterManager">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import printerAdd from "./printerAdd";
-import {
- 
-} from "../../../api/shop";
+import { getNewShopList, deviceAdd } from "../../../api/shop";
 export default {
   name: "a4Printer",
-  components: {
-    printerAdd,
-  },
   data() {
     return {
-      moduleList:[
+      moduleList: [
         {
-          name: '默认模板',
-          tips: '配送单，不包含回执'
+          name: "默认模板",
+          tips: "配送单，不包含回执",
         },
         {
-          name: '配送模板',
-          tips: '配货单，包含预定人信息'
+          name: "配送模板",
+          tips: "配货单，包含预定人信息",
         },
         {
-          name: '签收模板',
-          tips: '配货签收'
+          name: "签收模板",
+          tips: "配货签收",
         },
       ],
       activeModuleIndex: 0,
+      phoneSetting: "各店铺联系电话",
       list: [
         {
-          name: "开启电脑打印",
+          name: "开启A4带图打印",
           value: 1,
           field: "openAutoorder",
-          tips: "开启后订单打印将使用电脑打印机，如需自动打印，请开启下方云盒打印",
+          tips: "开启A4带图打印需要打印机连接电脑，添加云盒可实现自动打印",
         },
+      ],
+      list1: [
         {
-          name: "使用云盒打印",
+          name: "开启自动打印",
           value: 1,
           field: "openAutoorder",
-          tips: "使用智能打印云盒，实现A4带图自动打印",
+          tips: "云盒添加后才可实现来单自动打印",
+        },
+      ],
+      showSettingPhone: false,
+      phoneSettingStyle: 0,
+      unifyPhone: "",
+      options: [
+        {
+          value: 0,
+          label: "各店铺联系电话",
         },
         {
-          name: "开通自动打印",
           value: 1,
-          field: "openAutoorder",
-          tips: "开通后将使用云盒模式自动打印订单",
+          label: "统一设置",
         },
       ],
+      printerList: [],
+      dialogVisible: false,
+      shopList: [],
+      form: {
+        name: "",
+        deviceSn: "",
+        deviceSecret: "",
+        shopIdList: [0],
+        deviceName: "",
+        deviceType: 28,
+        shopId: 0,
+      },
     };
   },
   // 监听属性 类似于data概念
@@ -111,11 +201,80 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.getNewShopList();
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 方法集合
-  methods: {},
+  methods: {
+    openSettingPhone() {
+      this.showSettingPhone = true;
+    },
+    confirmSettingPhone() {
+      if (this.phoneSettingStyle === 1 && !this.$tool.mobile(this.unifyPhone)) {
+        this.$message.error("请输入正确的电话号码！");
+      }
+    },
+    getNewShopList() {
+      getNewShopList().then((res) => {
+        if (res.code === 200) {
+          res.data.unshift({ id: 0, name: "全部门店" });
+          this.shopList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    addPrinter(v) {
+      this.dialogVisible = true;
+      if (v) this.form = this.$tool.deepClone(v);
+      if (this.form.id) return;
+      this.form.name = `贺卡打印云盒${new Date().getTime()}`;
+      this.cloudList = [];
+    },
+    cloudPrinterManager() {
+      if (!this.form.name) {
+        return this.$message.warning(`请输入云盒名称！`);
+      }
+      if (!this.form.deviceSn) {
+        return this.$message.warning(`请输入云盒序列号！`);
+      }
+      if (!this.form.deviceSecret) {
+        return this.$message.warning(`请输入云盒秘钥！`);
+      }
+      let form = this.$tool.deepClone(this.form);
+      form.shopIds = form.shopIdList.join();
+      deviceAdd(form).then((res) => {
+        console.log("添加云盒信息", res);
+        if (res.code === 200) {
+          this.$message.success(`成功添加云盒！`);
+          this.dialogVisible = false;
+          this.getCloudPrinterList();
+          this.resetData();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    resetData() {
+      this.form = {
+        name: "",
+        deviceSn: "",
+        deviceSecret: "",
+        shopIdList: [0],
+        deviceName: "",
+        deviceType: 28,
+        shopId: 0,
+      };
+    },
+  },
 };
 </script>
 
@@ -261,10 +420,62 @@ export default {
               }
             }
           }
+          .printer-list {
+            display: flex;
+            flex-wrap: wrap;
+            .printer-item {
+              position: relative;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              width: 250px;
+              height: 150px;
+              background: #f7f1f1;
+              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;
+                  margin-right: 10px;
+                }
+              }
+            }
+          }
         }
         .right {
           display: flex;
           align-items: center;
+          .right-name {
+            font-size: 13px;
+            color: #fc7200;
+            cursor: pointer;
+          }
+          .el-icon-arrow-right {
+            color: #fc7200 !important;
+            cursor: pointer;
+          }
           .time {
             font-size: 12px;
             font-family: PingFang SC;
@@ -291,48 +502,8 @@ export default {
       }
     }
   }
-  .printer-list {
-    display: flex;
-    flex-wrap: wrap;
-    .item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      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;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
+}
+.unify-phone {
+  margin-top: 20px;
 }
 </style>

src/components/settingComponents/systemSetting.vue

@@ -169,7 +169,7 @@ export default {
           setContent: "设置时长",
           value: 1,
           field: "openAutodelivery",
-          tips: "非冲突绑定模式，不支持自动发单",
+          tips: "根据设置的时间进行自动发单",
           time: 0,
         },
         {