新增增加打印机
This commit is contained in:
344
src/views/device/index.vue
Normal file
344
src/views/device/index.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<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="0"
|
||||
:inactive-value="1"
|
||||
width="90"
|
||||
@change="statusChange($event, item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="editor">
|
||||
<el-text
|
||||
type="primary"
|
||||
@click="
|
||||
router.push({ name: 'add_device', 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', query: { type: 1 } })"
|
||||
>
|
||||
<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">
|
||||
<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";
|
||||
const store = useUser();
|
||||
|
||||
const router = useRouter();
|
||||
const list = ref([]);
|
||||
const dialogVisible = ref(false);
|
||||
const deleteId = ref("");
|
||||
const delLoading = ref(false);
|
||||
|
||||
async function statusChange(e, item) {
|
||||
console.log(e, item);
|
||||
try {
|
||||
await tbPrintMachinePost(item, "put");
|
||||
tbPrintMachineGetAjax();
|
||||
} 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();
|
||||
} 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>
|
||||
Reference in New Issue
Block a user