326 lines
8.3 KiB
Vue
326 lines
8.3 KiB
Vue
<template>
|
|
<div class="device_container">
|
|
<div class="header" @click="router.back()">
|
|
<el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
|
|
<ArrowLeft />
|
|
</el-icon>
|
|
<el-text>设备管理</el-text>
|
|
</div>
|
|
<div class="d_content">
|
|
<div class="d_list">
|
|
<div class="row_title">打印设备</div>
|
|
<div class="row_list">
|
|
<div class="item" v-for="item in list" :key="item.id">
|
|
<div class="left">
|
|
<div class="icon">
|
|
<el-image :src="icons[item.subType]" style="width: 40px; height: 40px"></el-image>
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="xh">{{ item.config.deviceName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="switch">
|
|
<el-switch v-model="item.status" inline-prompt active-text="开" inactive-text="关" :active-value="1"
|
|
:inactive-value="0" width="90" @change="statusChange($event, item)" />
|
|
</div>
|
|
<div class="editor">
|
|
<el-text type="primary" @click="
|
|
router.push({
|
|
name: deviceRoute[item.subType],
|
|
query: { id: item.id },
|
|
})
|
|
">
|
|
编辑
|
|
</el-text>
|
|
<el-text type="primary" @click="showDelete(item)">删除</el-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row_title">云打印设备</div>
|
|
<div class="row_list">
|
|
<div class="item" v-for="item in list" :key="item.id">
|
|
<div class="left">
|
|
<div class="icon"></div>
|
|
<div class="info">
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="xh">{{ item.xh }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="switch">
|
|
<el-switch
|
|
v-model="item.state"
|
|
inline-prompt
|
|
active-text="开"
|
|
inactive-text="关"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
width="90"
|
|
/>
|
|
</div>
|
|
<div class="editor">
|
|
<el-text type="primary">编辑</el-text>
|
|
<el-text type="primary">删除</el-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="menu_wrap">
|
|
<div class="row" @click="router.push({ name: 'add_device' })">
|
|
<div class="icon" style="background-color: var(--primary-color)">
|
|
<el-image :src="icons.cash" style="width: 36px; height: 36px"></el-image>
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">添加小票打印机</div>
|
|
<div class="intro">用来打印客户（收银）小票的打印机。</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" @click="router.push({ name: 'add_label' })">
|
|
<div class="icon" style="background-color: #79c3d5">
|
|
<el-image :src="icons.label" style="width: 38px; height: 38px"></el-image>
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">添加标签打印机</div>
|
|
<div class="intro">用来打印商品标签的打印机。</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row">
|
|
<div class="icon" style="background-color: #8fc783">
|
|
<el-image :src="icons.kitchen" style="width: 44px; height: 44px"></el-image>
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">添加出品打印机</div>
|
|
<div class="intro">用来打印商品至厨房或出品台的打印机。</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog v-model="dialogVisible" title="注意" width="500">
|
|
<span class="dialog_content">确定删除该打印机吗？</span>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="delLoading" @click="tbPrintMachineDeleteAjax">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
tbPrintMachineGet,
|
|
tbPrintMachineDelete,
|
|
tbPrintMachinePost,
|
|
} from "@/api/device";
|
|
import { onMounted, ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useUser } from "@/store/user.js";
|
|
import { ElMessage } from "element-plus";
|
|
import icons from "./icons";
|
|
import { usePrint } from "@/store/print.js";
|
|
|
|
const printStore = usePrint();
|
|
const store = useUser();
|
|
|
|
const router = useRouter();
|
|
const list = ref([]);
|
|
const dialogVisible = ref(false);
|
|
const deleteId = ref("");
|
|
const delLoading = ref(false);
|
|
const deviceRoute = ref({
|
|
cash: "add_device",
|
|
label: "add_label",
|
|
kitchen: "add_kitchen",
|
|
});
|
|
|
|
async function statusChange(e, item) {
|
|
try {
|
|
await tbPrintMachinePost(item, "put");
|
|
tbPrintMachineGetAjax();
|
|
printStore.init();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
// 显示删除打印机弹窗
|
|
function showDelete(item) {
|
|
deleteId.value = item.id;
|
|
dialogVisible.value = true;
|
|
}
|
|
|
|
// 删除打印机
|
|
async function tbPrintMachineDeleteAjax() {
|
|
try {
|
|
delLoading.value = true;
|
|
await tbPrintMachineDelete({ id: deleteId.value });
|
|
delLoading.value = false;
|
|
dialogVisible.value = false;
|
|
ElMessage.success("删除成功");
|
|
tbPrintMachineGetAjax();
|
|
printStore.init();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
// 获取打印机列表
|
|
async function tbPrintMachineGetAjax() {
|
|
try {
|
|
const res = await tbPrintMachineGet({
|
|
shopId: store.userInfo.shopId,
|
|
page: 0,
|
|
pageSize: 100,
|
|
});
|
|
list.value = res.list;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
tbPrintMachineGetAjax();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog_content {
|
|
font-size: var(--el-font-size-base);
|
|
}
|
|
|
|
.dialog-footer {
|
|
padding: 0 var(--el-font-size-base) var(--el-font-size-base);
|
|
}
|
|
|
|
.device_container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 15px;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.header {
|
|
height: 50px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.d_content {
|
|
padding-top: 15px;
|
|
display: flex;
|
|
height: calc(100vh - 15px * 2 - 50px);
|
|
|
|
.d_list {
|
|
flex: 2;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
|
|
.row_title {
|
|
color: #555;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.row_list {
|
|
.item {
|
|
border-radius: 6px;
|
|
background-color: #f1f1f1;
|
|
margin-bottom: 10px;
|
|
padding: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 15px;
|
|
|
|
.xh {
|
|
color: #999;
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.editor {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu_wrap {
|
|
flex: 1.5;
|
|
margin-left: 15px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 0 15px;
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid #ececec;
|
|
}
|
|
|
|
.icon {
|
|
--size: 60px;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 15px;
|
|
|
|
.name {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.intro {
|
|
color: #999;
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|