|
|
@@ -0,0 +1,302 @@
|
|
|
+<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 @click.stop="addPrinter(v)">
|
|
|
+ <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="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,
|
|
|
+ shopListNew,
|
|
|
+ shopDeviceList,
|
|
|
+ deviceDetail,
|
|
|
+ deviceList,
|
|
|
+ deviceAdd,
|
|
|
+ deviceDelete,
|
|
|
+ deviceStatus,
|
|
|
+ printTest,
|
|
|
+} 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: "操作成功！",
|
|
|
+ });
|
|
|
+ this.refreshData();
|
|
|
+ } 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>
|
Funny
