liebao-web/src/components/settingComponents/print/printerList.vue

<template>
  <div class="printer-list">
    <div class="model">
      <div class="title">
        <div class="name">云打印</div>
        <div class="status-list">
          <div class="status">
            <div class="bg1"></div>
            <div class="con">在线{{pinter.onlineNum}}</div>
          </div>
          <div class="status">
            <div class="bg1 bg2"></div>
            <div class="con">离线{{pinter.offlineNum}}</div>
          </div>
          <div class="status">
            <div class="bg1 bg3"></div>
            <div class="con">异常{{pinter.abnormalNum}}</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>
        </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>
    <printer-add :shopList="shopList" @shopDeviceList="refreshData" ref="printerAdd" :devices="deviceList"></printer-add>
  </div>
</template>

<script>
import printerAdd from "./printerAdd";
import {
  getShopList,
  shopDeviceList,
  deviceDetail,
  deviceList,
  deviceAdd,
  deviceDelete,
  deviceStatus,
  printTest,
  shopListNew,
} from "../../../api/shop";
export default {
  name: "printerList",
  components: {
    printerAdd,
  },
  data() {
    return {
      pinter: {},
      printerList: [],
      deviceList: [],
      shopList: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  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: "已取消删除",
          });
        });
    },
    refreshData() {
      this.getPrinterNum();
      this.getPrinterList();
    },
    addPrinter(e) {
      console.log(e);
      if (!e) {
        this.$refs.printerAdd.init();
      } else {
        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
      }
    },
    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,
          });
        }
      });
    },
    getDeviceList() {
      deviceList({ type: 2 }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    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" scoped  type="text/css">
.model {
  .title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: #333333;
    padding-left: 10px;
    margin-top: 24px;
    .status-list {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #999999;
      .status {
        display: flex;
        align-items: center;
        margin-left: 30px;
        .con {
          margin-left: 5px;
        }
        .bg1 {
          width: 40px;
          height: 10px;
          border-radius: 2px;
          background: linear-gradient(180deg, #64c47c 0%, #1aaa3d 100%);
        }
        .bg2 {
          background: rgba(204, 204, 204, 0.39);
        }
        .bg3 {
          background: linear-gradient(180deg, #ff8a8a 0%, #e60000 100%);
        }
      }
    }
  }
  .title::before {
    width: 3px;
    height: 16px;
    background: rgba(252, 114, 0, 0.39);
    border-radius: 2px;
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
  }
  .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;
        }
      }
    }
  }
}
</style>