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>
|