|
@@ -0,0 +1,364 @@
|
|
|
+<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>
|
|
|
+ <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>
|
|
|
+ <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 { deviceAdd } from "../../../api/shop.js";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ devices: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ shopList: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "添加打印机",
|
|
|
+ showVisible: false,
|
|
|
+ form: {
|
|
|
+ openOrderPrint: 1,
|
|
|
+ openOrderCancelPrint: 1,
|
|
|
+ printCustomerCount: 1,
|
|
|
+ printMerchantCount: 1,
|
|
|
+ printKitchenCount: 1,
|
|
|
+ },
|
|
|
+ revieweds: [],
|
|
|
+ loading: false,
|
|
|
+ isEdit: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ init(e) {
|
|
|
+ if (e) {
|
|
|
+ this.isEdit = true;
|
|
|
+ this.title = "编辑打印机";
|
|
|
+ this.form = e;
|
|
|
+ } else {
|
|
|
+ this.isEdit = false;
|
|
|
+ this.title = "添加打印机";
|
|
|
+ this.form = {
|
|
|
+ openOrderPrint: 1,
|
|
|
+ openOrderCancelPrint: 1,
|
|
|
+ printCustomerCount: 1,
|
|
|
+ printMerchantCount: 1,
|
|
|
+ printKitchenCount: 1,
|
|
|
+ deviceType: "",
|
|
|
+ name: "",
|
|
|
+ deviceId: "",
|
|
|
+ shopId: "",
|
|
|
+ deviceSn: "",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ 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) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: `${this.form.id ? "保存" : "新增"}成功!`,
|
|
|
+ });
|
|
|
+ this.showVisible = false;
|
|
|
+ this.$emit("shopDeviceList");
|
|
|
+ } 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">
|
|
|
+.shopAdd {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #ffffff;
|
|
|
+ background: #fc7200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|