liebao-web/src/components/shopCompoents/bindPrinter.vue

<template>
  <div class="bind-printer" v-loading="loading" element-loading-text="数据加载中">
    <div class="store-list">
      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
    </div>
    <div class="header">
      <div class="left">
        <div class="line">
          <div class="b_line"></div>
          <div class="triangle"></div>
        </div>
        <div class="label">打印机管理</div>
      </div>
      <div class="right">
        <el-button class="btn" @click.stop="addPrinter(1)">添加打印机</el-button>
      </div>
    </div>
    <div class="take-out-list" v-for="(v,i) in printerList" :key="i">
      <div class="item">
        <div class="item-top">
          <div class="name">{{v.name}}</div>
        </div>
        <div class="item-bottom">
          <div class="left">
            <div class="l-l">
              <img src="../../../static/image/alipay.png" class="l-l-img" />
            </div>
            <div class="take-out-name">
              <div class="take-out-name-bot">
                <span :class="['status'+v.onlineStatus,'status']"> 打印机{{v.onlineStatus === 1 ? '在线' : v.onlineStatus === 2 ? '异常' : '离线'}}</span>
              </div>
              <div>打印机名称：{{v.deviceName}}</div>
              <div>打印机编号：{{v.deviceSn}}</div>
              <div class="take-out-name-bot">打印机KEY：{{v.deviceSecret}}</div>
              <div>客户联：X{{v.printCustomerCount}}</div>
              <div>商家联：X{{v.printMerchantCount}}</div>
              <div>厨房联：X{{v.printKitchenCount}}</div>
            </div>
          </div>
          <div class="right">
            <el-button @click="addPrinter(2,v)" size="small">编&nbsp;辑</el-button>
            <el-button type="danger" @click="deletePrinter(v)" size="small">删&nbsp;除</el-button>
          </div>
        </div>
      </div>
    </div>
    <printer-add @shopDeviceList="shopDeviceList(curIdx)" ref="printerAdd" :devices="deviceList"></printer-add>
  </div>
</template>

<script>
import printerAdd from "./printerAdd";
import {
  getShopList,
  shopDeviceList,
  deviceDetail,
  deviceList,
  deviceAdd,
  deviceDelete,
  deviceStatus,
} from "../../api/shop";
export default {
  components: {
    printerAdd,
  },
  data() {
    return {
      shopList: [
        { id: 1, name: "门店名称-1" },
        { id: 2, name: "门店名称-2" },
        { id: 3, name: "门店名称-3" },
        { id: 4, name: "门店名称-4" },
        { id: 5, name: "门店名称-5" },
        { id: 6, name: "门店名称-6" },
        { id: 7, name: "门店名称-7" },
      ],
      curIdx: -1,
      loading: true,
      printerList: [],
      showVisible: false,
      title: "添加打印机",
      deviceList: [],
    };
  },
  watch: {
    curIdx(newVal, oldVal) {
      this.shopDeviceList(newVal);
    },
  },
  created() {
    this.getShopList();
    this.getDeviceList();
  },
  methods: {
    deletePrinter(v) {
      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deviceDelete({ id: v.id }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "error",
                message: "删除成功！",
              });
              this.shopDeviceList(this.curIdx);
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getDeviceList() {
      deviceList({ type: 2 }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getShopList() {
      getShopList().then((res) => {
        this.loading = true;
        if (res.code === 200) {
          this.shopList = res.data;
          this.curIdx = 0;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    addPrinter(val, e) {
      if (val === 1) {
        let shopId = this.shopList[this.curIdx].id;
        this.$refs.printerAdd.init("", shopId);
      } else {
        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
      }
    },
    shopDeviceList(index) {
      shopDeviceList({ deviceType: 2, shopId: this.shopList[index].id }).then(
        (res) => {
          if (res.code === 200) {
            this.printerList = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.bind-printer {
  min-height: 200px;
  .store-list {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    &-item {
      padding: 8px 27px;
      background-color: #fff;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b1b1b1;
      box-sizing: border-box;
      border: 1px solid #eee;
      border-radius: 17px;
      cursor: pointer;
      margin-right: 10px;
      &.active {
        color: #fc7200;
      }
    }
  }
  .store-list::-webkit-scrollbar {
    height: 6px;
  }
  .store-list::-webkit-scrollbar-track {
    background-color: #eee;
    /*border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;*/
  }
  .store-list::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
  }
  .take-out-list {
    margin-bottom: 10px;
    .item {
      background-color: #fff;
      .item-top {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px 18px;
        align-items: center;
        border-bottom: 1px solid #eee;
        .name {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .top-right {
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #b1b1b1;
            margin-right: 12px;
          }
        }
      }
      .item-bottom {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 25px 18px;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          .l-l {
            width: 220px;
            height: 220px;
            font-size: 0;
            .l-l-img {
              width: 100%;
              height: 100%;
            }
          }
          .take-out-name {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 26px;
            margin-left: 30px;
            .take-out-name-bot {
              margin-bottom: 10px;
              .status {
                display: flex;
                align-items: center;
                &:before {
                  content: "";
                  display: block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  margin-right: 5px;
                }
              }
              .status0 {
                color: #b1b1b1;
                &:before {
                  background: #b1b1b1;
                }
              }
              .status2 {
                color: #f74141;
                &:before {
                  background: #f74141;
                }
              }
              .status1 {
                color: #18b71c;
                &:before {
                  background: #18b71c;
                }
              }
            }
          }
        }
        .right {
          .right-btn {
            background-color: #fc7200;
            border: none;
          }
        }
      }
    }
  }
  .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;
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    .left {
      display: flex;
      align-items: center;

      .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;
      }
    }
  }
  .btn {
    background: #fc7200;
    border-color: #fc7200;
    color: #fff;
    &.black {
      background: #0d1e40;
      border-color: #0d1e40;
    }
  }
}
</style>