cashier_admin_app/pagePrinter/index/components/printer-item.vue

154 lines
3.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="default-box-padding bg-fff u-font-28 border-r-12 box-shadow u-m-b-30">
<view class="u-flex u-row-between u-p-b-24 border-bottom">
<view class="u-flex">
<!-- <text>{{ subTypesName(data.subType)}}</text> -->
<text>{{ data.name}}</text>
<text class="color-999 u-font-24">{{data.address}}</text>
</view>
<view class="u-flex u-col-center">
<template v-if="data.status">
<text class="online">在线状态正常</text>
</template>
<template v-else>
<image class="icon-warning" src="/pagePrinter/static/icon/icon-warning.svg" mode=""></image>
<text class="leave u-m-l-10">离线</text>
</template>
</view>
</view>
<view class="u-m-t-24">
<view class="u-flex u-row-between">
<view class="u-flex u-col-center">
<image class="icon" src="/pagePrinter/static/icon/icon-setting.svg" mode=""></image>
<view class="color-666 u-m-l-10">是否启用</view>
</view>
<view>
<my-switch v-model="data.status" @change="openDiscountChange"></my-switch>
</view>
</view>
<view class="u-flex u-row-between u-m-t-32">
<view class="u-flex u-col-center">
<image class="icon" src="/pagePrinter/static/icon/icon-type.svg" mode=""></image>
<view class="color-666 u-m-l-10">类型</view>
</view>
<view>
{{subTypesName(data.subType)}}
</view>
</view>
<view class="u-flex u-row-between u-m-t-32">
<view class="u-flex u-col-center">
<image class="icon" src="/pagePrinter/static/icon/icon-category.svg" mode=""></image>
<view class="color-666 u-m-l-10">分类</view>
</view>
<view>
{{devicesName(data.contentType)}}
</view>
</view>
<view class="u-m-t-32 u-flex u-row-right gap-20">
<my-button v-if="data.connectionType == 'network'" shape="circle" :width="140" :height="56"
type="cancel" @tap="delTableHandleEvent()" plain>删除</my-button>
<my-button v-if="data.connectionType == 'network'" shape="circle" @click="toUrl" :width="140"
:height="56" plain>编辑</my-button>
</view>
</view>
<!-- 删除弹窗 -->
<my-model desc="确认删除?" ref="delModel" @confirm="delModelConfirm"></my-model>
</view>
</template>
<script setup>
import {
devices,
models,
subTypes
} from '@/pagePrinter/devices.js'
import go from '@/commons/utils/go.js'
import {
shopConfigprinter,
delTableHandle
} from '@/http/yskApi/devices.js'
import {
getCurrentInstance
} from 'vue';
const props = defineProps({
data: {
type: Object,
default: () => {}
}
})
const emit = defineEmits(['init'])
let toUrl = () => {
go.to('PAGES_PRINTER_ADD', {
id: props.data.id
})
}
function devicesName(value) {
return devices.find(item => item.value == value).name
}
function modelsName(value) {
return models.find(item => item.value == value).name
}
function subTypesName(value) {
return subTypes.find(item => item.value == value).name
}
function timeFilter(s) {
return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
}
async function openDiscountChange(d) {
delete props.data.createdAt
delete props.data.updatedAt
const res = await shopConfigprinter({
...props.data,
shopId: uni.getStorageSync('shopId'),
})
emit('init', '')
}
const refs = getCurrentInstance()
// 删除
function delTableHandleEvent() {
refs.ctx.$refs.delModel.open()
}
//删除分类确认
async function delModelConfirm() {
const res = await delTableHandle(props.data.id)
emit('init', '')
refs.ctx.$refs.delModel.close()
}
</script>
<style lang="scss" scoped>
.border-bottom {
border-bottom: 1px solid rgb(240, 240, 240);
}
.box-shadow {
box-shadow: 0 0 5px #eee;
}
.online {
color: #0FC161;
}
.leave {
color: #999;
}
.icon-warning {
width: 34rpx;
height: 30rpx;
}
.icon {
width: 24rpx;
height: 24rpx;
}
</style>