250 lines
8.5 KiB
Vue
250 lines
8.5 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll !important">
|
|
<el-descriptions :column="3" title="经营信息" border>
|
|
<template #extra>
|
|
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
|
<el-button circle icon="Refresh" @click="doRefresh" />
|
|
</el-tooltip>
|
|
</template>
|
|
<el-descriptions-item label="今日交易金额:">{{ displayPrice(0) }}</el-descriptions-item>
|
|
<el-descriptions-item label="本月交易金额:">{{ displayPrice(0) }}</el-descriptions-item>
|
|
<el-descriptions-item label="本年交易金额:">{{ displayPrice(0) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions :column="4" title="智能柜设置" border>
|
|
<template #extra>
|
|
<div class="flex justify-center items-center">
|
|
<el-button icon="Edit" type="primary" @click="doBind">修改</el-button>
|
|
</div>
|
|
</template>
|
|
<el-descriptions-item label="商户名称：">{{}}</el-descriptions-item>
|
|
<el-descriptions-item label="设备编号：">{{ doorSettingData.deviceCode }}</el-descriptions-item>
|
|
<el-descriptions-item label="设备名称：">{{ doorSettingData.hardName }}</el-descriptions-item>
|
|
<el-descriptions-item label="机器编号：">{{ doorSettingData.imei }}</el-descriptions-item>
|
|
<el-descriptions-item label="外部设备编号：">{{}}</el-descriptions-item>
|
|
<el-descriptions-item label="SIM卡号：">{{ doorSettingData.simSn }}</el-descriptions-item>
|
|
<el-descriptions-item label="柜子层数：">{{ doorSettingData.doorCount }}</el-descriptions-item>
|
|
<el-descriptions-item label="地址：">{{}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions :column="3" title="运行信息" border>
|
|
<template #extra>
|
|
<div class="flex justify-center items-center">
|
|
<el-button icon="Edit" type="primary" @click="doVolumeSetting">音量设置</el-button>
|
|
</div>
|
|
</template>
|
|
<el-descriptions-item label="销售状态：">{{ doorSettingData.saleStatus }}</el-descriptions-item>
|
|
<el-descriptions-item label="设备状态：">{{}}</el-descriptions-item>
|
|
<el-descriptions-item label="电源状态：">{{ doorSettingData.powerStatus }}</el-descriptions-item>
|
|
<el-descriptions-item label="网络状态：">{{ doorSettingData.netStatus }}</el-descriptions-item>
|
|
<el-descriptions-item label="媒体音量：">{{ doorSettingData.mediaVolume }}</el-descriptions-item>
|
|
<el-descriptions-item label="系统音量：">{{ doorSettingData.systemVolume }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions :column="0" title="货柜商品" border>
|
|
<!-- <template #extra>
|
|
<div class="flex justify-center items-center">
|
|
<el-button icon="Edit" type="primary">设置</el-button>
|
|
</div>
|
|
</template> -->
|
|
</el-descriptions>
|
|
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane
|
|
v-if="doorSettingData.cabinetList?.length"
|
|
:label="doorSettingData.deviceCode + '-' + item.cabinetNo"
|
|
v-for="(item, index) in doorSettingData.cabinetList"
|
|
:key="index"
|
|
>
|
|
<div v-for="(floorItem, floorIndex) in state.doorGoods" :key="floorIndex">
|
|
<el-divider />
|
|
<div class="text-black flex items-center">
|
|
<div class="text-center w-24 text-lg font-bold">第 {{ floorIndex + 1 }} 层:</div>
|
|
<div class="flex flex-wrap">
|
|
<div class="flex flex-col items-center justify-start" v-for="(item, posIndex) in floorItem" :key="posIndex">
|
|
<div
|
|
class="bg-blue-50 w-20 h-20 border border-black mx-4 my-1 flex items-center justify-center cursor-pointer rounded-lg"
|
|
@click="clickPutaway(floorIndex, posIndex)"
|
|
>
|
|
<div v-if="item.pic" class="relative">
|
|
<el-icon
|
|
@click.stop="deleteGoods(floorIndex, posIndex)"
|
|
class="absolute right-[-8px] top-[-8px] text-xl text-blue-600 z-50"
|
|
>
|
|
<CircleClose />
|
|
</el-icon>
|
|
<preview-image width="86px" height="86px" :src="item.pic" @click.stop />
|
|
</div>
|
|
<span v-else>点击上架</span>
|
|
</div>
|
|
<div class="h-10">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<!-- 柜子设置 -->
|
|
<info-setting ref="infoSettingRef" @refreshInfo="refreshInfo" />
|
|
|
|
<!-- 音量设置 -->
|
|
<volume-setting ref="volumeSettingRef" @refreshVolume="refreshVolume" />
|
|
|
|
<!-- 商品上架 -->
|
|
<goods-putaway ref="goodsPutawayRef" @refreshDoor="refreshDoor" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="hardDoorManager">
|
|
import { onMounted, ref } from "vue"
|
|
import { useMessage } from "/@/hooks/message"
|
|
import { displayPrice } from "/@/utils/formatMoney"
|
|
import * as hardDoorManager from "/@/api/hard/hard-door-manager"
|
|
import { ElMessageBox } from "element-plus"
|
|
import { getByCabinetNo } from "/@/api/hard/hard-spu"
|
|
|
|
const InfoSetting = defineAsyncComponent(() => import("./info-setting.vue"))
|
|
const VolumeSetting = defineAsyncComponent(() => import("./volume-setting.vue"))
|
|
const GoodsPutaway = defineAsyncComponent(() => import("./goods-putaway.vue"))
|
|
|
|
const { query } = useRoute()
|
|
const loading = ref(false)
|
|
const doorSettingData = ref<any>({})
|
|
const cabinetData = ref<any>([])
|
|
const currentCabinet = ref(0)
|
|
const state = reactive<any>({
|
|
mediaVolume: "",
|
|
systemVolume: "",
|
|
queryForm: {},
|
|
doorGoods: new Array(6).fill([]).map(() => new Array(10).fill({})),
|
|
})
|
|
const infoSettingRef = ref()
|
|
const volumeSettingRef = ref()
|
|
const goodsPutawayRef = ref()
|
|
|
|
onMounted(async () => {
|
|
await getDetail()
|
|
await getCabinet()
|
|
})
|
|
|
|
// 获取柜子详情
|
|
const getDetail = async () => {
|
|
const id = query.id as unknown as any
|
|
if (!id) return useMessage().error("设备id不存在")
|
|
state.queryForm.orderId = id
|
|
|
|
const { data: orderData } = await hardDoorManager.getByHardId({ hardId: id })
|
|
if (orderData) {
|
|
doorSettingData.value = { ...orderData, cabinetList: JSON.parse(orderData.cabinetList) }
|
|
}
|
|
if (!doorSettingData.value.hardId) {
|
|
doorSettingData.value.hardId = id
|
|
}
|
|
}
|
|
|
|
const getCabinet = async (cabinetIndex: number = 0) => {
|
|
console.log(doorSettingData.value.cabinetList)
|
|
|
|
if (!doorSettingData.value.hardId) return useMessage().error("设备id不存在")
|
|
if (!doorSettingData.value.cabinetList?.length) return useMessage().error("设备空间不存在")
|
|
const { data } = await getByCabinetNo({
|
|
hardId: doorSettingData.value.hardId,
|
|
cabinetNo: doorSettingData.value.cabinetList[cabinetIndex].cabinetNo,
|
|
})
|
|
if (data) {
|
|
cabinetData.value = data
|
|
}
|
|
}
|
|
|
|
// 绑定信息
|
|
const doBind = async () => {
|
|
if (infoSettingRef.value) {
|
|
infoSettingRef.value.openDialog(doorSettingData.value.hardId)
|
|
}
|
|
}
|
|
// 基本信息
|
|
const refreshInfo = () => {}
|
|
|
|
// 音量设置
|
|
const doVolumeSetting = async () => {
|
|
if (volumeSettingRef.value) {
|
|
volumeSettingRef.value.openDialog(doorSettingData.value.hardId, doorSettingData.value.mediaVolume, doorSettingData.value.systemVolume)
|
|
}
|
|
}
|
|
const refreshVolume = (data: { hardId: string; mediaVolume: number; systemVolume: number }) => {
|
|
doorSettingData.value.mediaVolume = data.mediaVolume
|
|
doorSettingData.value.systemVolume = data.systemVolume
|
|
}
|
|
|
|
// 点击上架
|
|
const clickPutaway = (floorIndex: number, posIndex: number) => {
|
|
if (goodsPutawayRef.value) {
|
|
goodsPutawayRef.value.openDialog(doorSettingData.value.hardId, floorIndex, posIndex)
|
|
}
|
|
}
|
|
const refreshDoor = (row: any, curPos: { hardId: string; floorIndex: number; posIndex: number }) => {
|
|
state.doorGoods[curPos.floorIndex][curPos.posIndex] = row
|
|
}
|
|
|
|
// 删除商品
|
|
const deleteGoods = async (floorIndex: number, posIndex: number) => {
|
|
ElMessageBox.confirm("确定删除吗？", "删除", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(async () => {
|
|
state.doorGoods[floorIndex][posIndex] = {}
|
|
})
|
|
}
|
|
|
|
const doRefresh = async () => {
|
|
try {
|
|
loading.value = true
|
|
await getDetail()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-descriptions) {
|
|
&:not(:nth-child(1)) {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-descriptions__cell.is-bordered-label {
|
|
width: 150px;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.el-descriptions__cell.is-bordered-content {
|
|
width: 200px;
|
|
border: none;
|
|
}
|
|
|
|
.el-descriptions__title {
|
|
display: flex;
|
|
align-items: center;
|
|
&::before {
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
background-color: #409eff;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.el-descriptions-item__container {
|
|
margin: 0 10px;
|
|
.no-colon {
|
|
margin: 0;
|
|
&::after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|