eduepos_ui_store/pages/tools/print.vue

<template>
    <view class="print-page">
        <view class="print-list">
            <view class="item" v-for="item in prints" :key="item.printerId">
                <view class="row">
                    <view class="name">
                        <view class="text">{{ item.printerName }}</view>
                        <view class="default" v-if="item.moren">默认</view>
                        <view class="offline" v-if="item.status == 1">设备已离线</view>
                        <view class="online" v-if="item.status == 2">在线</view>
                        <view class="danger" v-if="item.status == 3">异常</view>
						<view class="reload" @click="reload(item.printerId)">刷新</view>
                    </view>
                    <u-icon name="trash" size="26" color="#6c6c6c" @click="handItemRemove(item)"></u-icon>
                </view>
                <view class="row">
                    <view class="no">打印机编号: {{ item.sn }}</view>
                    <u-icon name="edit-pen" size="26" color="#6c6c6c" @click="handItemEdit(item)"></u-icon>
                </view>
            </view>
        </view>
        <view class="add-print" @click="addPrint">
            添加小票打印机
        </view>
        <u-modal
            :show="deleteVisible"
            :title="modalTitle"
            closeOnClickOverlay
            showCancelButton
            confirmColor="#d64d3b"
            @confirm="handDelete"
            @cancel="deleteVisible = false"
            @close="deleteVisible = false">
        </u-modal>
        <u-modal
            :show="formVisible"
            :title="modalTitle"
            closeOnClickOverlay
            showCancelButton
            @confirm="handAdd"
            @cancel="cancelForm"
            @close="cancelForm">
            <view class="container">
                <view class="item">
                    <view class="label">名称</view>
                    <view class="value">
                        <u-input type="text" placeholder="请输入打印机名称" v-model="formItem.printerName"></u-input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">编号</view>
                    <view class="value">
                        <u-input type="text" placeholder="请输入打印机编号" :disabled="flag" v-model="formItem.sn"></u-input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">密钥</view>
                    <view class="value">
                        <u-input type="text" placeholder="请输入打印机密钥" :disabled="flag" v-model="formItem.printerKey"></u-input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">打印联数</view>
                    <view class="value">
                        <u-input type="text" placeholder="请输入打印机联数" v-model="formItem.times"></u-input>
                    </view>
                </view>
                <view class="item">
                    <view class="label">是否默认</view>
                    <view class="value">
                        <!-- <u-switch v-model="formItem.moren" size="18"></u-switch> -->
						<!-- <switch :checked="formItem.moren"   size="22" class="switch" style="transform:scale(0.7)"></switch> -->
						<checkBox :isOpen="formItem.moren" @toggle="changMoren"></checkBox>
                    </view>
                </view>
                <view class="desc">
                    当有多台小票机时, 新订单只会在默认小票机上出票
                </view>
            </view>
        </u-modal>
    </view>
</template>
<script>
import {mapState} from 'vuex';
import {checkBox} from '../components/p-checkbox.vue'
export default {
	components: {
		checkBox
	},
    data () {
        return {
			printerUrl: '/storePrintApi/getPrinterList',
			reloadUrl: '/storePrintApi/reloadPrinter',
			printerByIdUrl: '/storePrintApi/getPrinterById',
			deleteUrl: '/storePrintApi/delete',
			saveUrl: '/storePrintApi/updatePrinter',
            modalTitle: '',
            deleteVisible: false,
            delItem: null,
            formItem: {
                printerId: '',
				storeId: '',
                moren: false,
				sn: '',
				printerKey: '',
				printerName: '',
				times: ''
            },
            formVisible: '',
            prints: [],
			flag: true
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		loadData () {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.printerUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.prints = res.data.list
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.stopPullDownRefresh()
					uni.hideLoading();
				},
			})
		},
		getPrinter (id) {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.printerByIdUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					id: id
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.formItem = res.data.obj
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
		},
		reload (printerId) {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.reloadUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					printerId: printerId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.prints = res.data.list
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
		},
        close () {
            this.deleteVisible = false
        },
		cancelForm () {
			this.formVisible = false
			this.formItem = {
				printerId: '',
				storeId: '',
				moren: false,
				sn: '',
				printerKey: '',
				printerName: '',
				times: ''
			}
		},
        handItemRemove (item) {
            this.modalTitle = `确定要删除 [${item.printerName}] 打印机吗?`
            this.delItem = item
            this.deleteVisible = true
        },
        handDelete () {
            console.log('这里写删除接口: ', this.delItem);
			uni.showLoading({
				title: '删除中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.deleteUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					id: this.delItem.printerId,
					sn: this.delItem.sn
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.deleteVisible = false
						this.delItem = {}
						this.loadData()
					} else {
						uni.hideLoading();
						this.$api.msg(res.data.rtnBean.rtnMsg);
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
            this.delItem = null
            this.modalTitle = ''
            this.deleteVisible = false
        },
        handItemEdit (item) {
			console.log('item :>> ', item);
			this.getPrinter(item.printerId)
            this.modalTitle = '添加/编辑打印机'
            this.formVisible = true
			this.flag = true
        },
        addPrint () {
            this.modalTitle = '添加/编辑打印机'
            this.formVisible = true
			this.flag = false
        },
		
        handAdd () {
            console.log('这里写保存接口: ', this.formItem);
			if (!this.formItem.printerName) {
				uni.showToast({
					title: '请输入打印机名称',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.sn) {
				uni.showToast({
					title: '请输入打印机编号',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.printerKey) {
				uni.showToast({
					title: '请输入打印机秘钥',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.times) {
				uni.showToast({
					title: '请输入打印机打印份数',
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: '保存中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.saveUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					printerId: this.formItem.printerId,
					moren: this.formItem.moren ? 1 : 0,
					sn: this.formItem.sn,
					printerKey: this.formItem.printerKey,
					printerName: this.formItem.printerName,
					times: this.formItem.times,
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						this.formVisible = false
						this.formItem = {
							printerId: '',
							storeId: '',
							moren: false,
							sn: '',
							printerKey: '',
							printerName: '',
							times: ''
						}
						this.loadData()
					} else {
						uni.hideLoading();
						this.$api.msg(res.data.rtnBean.rtnMsg);
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
        },
		changMoren (e) {
			console.log('e :>> ', e);
			this.formItem.moren = !this.formItem.moren
		}
    },
	onPullDownRefresh() {
		this.loadData();
	},
    onLoad () {
		this.loadData()
	}
}
</script>
<style lang="scss" scoped>
.print-page {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}
.print-list {
    height: calc(100vh - env(safe-area-inset-bottom) - 120rpx);
    height: calc(100vh - constant(safe-area-inset-bottom) - 120rpx);
    background-color: #f5f5f5;
    padding: 20rpx;
    box-sizing: border-box;
    .item {
        background-color: #fff;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        .row {
            @include between;
            color: $text-color;
        }
        .row:first-child {
            margin-bottom: 20rpx;
        }
        .name {
            font-size: 36rpx;
            @include flexStart;
        }
        .no {
            font-size: $font-base;
        } 
        .default, .offline, .online, .dange, .reload {
            font-size: $font-sm;
            padding: 4rpx 20rpx;
            border-radius: 10rpx;
            margin-left: 20rpx;
        }
        .default {
            background-color: $theme-color;
            color: #fff;
        }
        .offline {
            border: 2rpx solid $uni-color-button;
            color: $uni-color-button;
        }
		.online {
            border: 2rpx solid $uni-color-success;
            color: $uni-color-success;
        }
		.dange {
            border: 2rpx solid $uni-color-button;
            color: $uni-color-button;
        }
		.reload {
            border: 2rpx solid $uni-color-primary;
            color: $uni-color-primary;
        }
    }
}
.add-print {
    position: fixed;
    left: 10vw;
    width: 80vw;
    height: 80rpx;
    border-radius: 40rpx;
    @include flexCenter;
    color: #fff;
    background-color: $light-color;
    bottom: calc(20rpx + env(safe-area-inset-bottom));
    bottom: calc(20rpx + constant(safe-area-inset-bottom));
}
/deep/ .u-modal__content {
    padding: 20rpx !important;
    box-sizing: border-box !important;
}
.container {
    width: 100%;
    .name {
        margin: 40rpx 0;
    }
    .item {
        @include between;
        margin-bottom: 20rpx;
        .label {
            width: 160rpx;
        }
        .value {
            width: calc(100% - 160rpx);
        }
    }
    .desc {
        color: $uni-color-button;
        font-size: $font-sm;
    }
}
</style>