162 lines
3.9 KiB
Vue
162 lines
3.9 KiB
Vue
<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-category.svg" mode=""></image>
|
||
<view class="color-666 u-m-l-10">品牌</view>
|
||
</view>
|
||
<view>
|
||
{{data.contentType}}
|
||
</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>
|
||
{{data.connectionType}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-32 u-flex u-row-right gap-20">
|
||
<my-button shape="circle" :width="140" :height="56"
|
||
type="cancel" @tap="delTableHandleEvent()" plain>删除</my-button>
|
||
<my-button 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 { ref,reactive } from 'vue';
|
||
import { devices, models, subTypes } from '@/pagePrinter/devices.js'
|
||
import go from '@/commons/utils/go.js'
|
||
|
||
import myModel from '@/components/my-components/my-model.vue'
|
||
import { updatePrinter, delPrinter } from '@/api/printer.js'
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
})
|
||
const emit = defineEmits(['init'])
|
||
const delModel=ref(null)
|
||
console.log(props.data)
|
||
/**
|
||
* 编辑
|
||
*/
|
||
let toUrl = () => {
|
||
go.to('PAGES_PRINTER_ADD', {
|
||
id: props.data.id
|
||
})
|
||
}
|
||
|
||
function devicesName(value) {
|
||
console.log(devices.find(item => (item.value == value||item.name == value)))
|
||
return devices.find(item => (item.value == value||item.name == value)).name
|
||
}
|
||
|
||
function modelsName(value) {
|
||
return models.find(item => (item.value == value||item.name == value)).name
|
||
}
|
||
|
||
function subTypesName(value) {
|
||
return subTypes.find(item => (item.value == value||item.name == value)).name
|
||
}
|
||
|
||
function timeFilter(s) {
|
||
return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
|
||
/**
|
||
* 状态修改
|
||
* @param {Object} d
|
||
*/
|
||
async function openDiscountChange(d) {
|
||
delete props.data.createdAt
|
||
delete props.data.updatedAt
|
||
const res = await updatePrinter({
|
||
...props.data
|
||
})
|
||
emit('init', '')
|
||
}
|
||
|
||
/**
|
||
* 删除
|
||
*/
|
||
function delTableHandleEvent() {
|
||
delModel.value.open()
|
||
}
|
||
|
||
/**
|
||
* 删除分类确认
|
||
*/
|
||
async function delModelConfirm() {
|
||
const res = await delPrinter({id:props.data.id})
|
||
emit('init', '')
|
||
delModel.value.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> |