5 changed files with 596 additions and 16 deletions
@ -0,0 +1,25 @@
|
||||
import request from '@/axios'; |
||||
import { AxiosResponse } from 'axios'; // 假设使用Axios发送HTTP请求
|
||||
|
||||
interface VisualizationResponseData { |
||||
data: any; // 根据实际返回数据结构进行定义
|
||||
} |
||||
|
||||
export function getVisualization(params): Promise<AxiosResponse<VisualizationResponseData>>{ |
||||
return request({ |
||||
url: '/api/logpm-warehouse/warehouseGoodsAllocation/Visualization', |
||||
method: 'get', |
||||
params: { |
||||
...params, |
||||
} |
||||
}) |
||||
} |
||||
export function getstoreCargo(params): Promise<AxiosResponse<VisualizationResponseData>>{ |
||||
return request({ |
||||
url: '/api/logpm-warehouse/warehouseGoodsAllocation/storeCargo', |
||||
method: 'get', |
||||
params: { |
||||
...params, |
||||
} |
||||
}) |
||||
} |
||||
@ -0,0 +1,539 @@
|
||||
<template> |
||||
<div class="head_top"> |
||||
<div> |
||||
<el-select |
||||
filterable |
||||
v-model="checkselect" |
||||
class="" |
||||
placeholder="请选择仓库" |
||||
@change="checkcso" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in arrlist" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="index" |
||||
/> |
||||
</el-select> |
||||
<el-select |
||||
filterable |
||||
v-model="checkregionselect" |
||||
class="regionsele" |
||||
placeholder="请选择区域" |
||||
@change="checkregion" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in arrlist[checkselect]?.warehouseGoodsAreaVOList" |
||||
:key="item.id" |
||||
:label="item.headline" |
||||
:value="index" |
||||
/> |
||||
</el-select> |
||||
</div> |
||||
<div class="tips"> |
||||
<div> |
||||
总货位: |
||||
<span class="def">1682</span> |
||||
</div> |
||||
<div> |
||||
占用货位: |
||||
<span class="red">1480</span> |
||||
</div> |
||||
<div> |
||||
未用货位: |
||||
<span class="green">202</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="quybox"> |
||||
<el-scrollbar> |
||||
<div class="liebs"> |
||||
<div |
||||
:class="index == checksele ? 'item xz' : 'item'" |
||||
@click="ckindexs(index)" |
||||
v-for="(item, index) in arrlist[checkselect]?.warehouseGoodsAreaVOList[checkregionselect] |
||||
?.warehouseGoodsShelfEntitieList" |
||||
> |
||||
{{ item.goodsShelfName }} |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
<div class="mabx"> |
||||
<el-scrollbar max-height="70vh"> |
||||
<div class="contentbx" :style="contenbxsty"> |
||||
<div class="itemwbox" v-for="item in contenarr"> |
||||
<div class="itemmibox" v-for="ite in item"> |
||||
<el-tooltip |
||||
:disabled="Number(ite.enableStatus) == 2" |
||||
placement="bottom" |
||||
hide-after="50" |
||||
> |
||||
<template #content> |
||||
<div v-if="ite.allocationStatus == 1">没有货位信息</div> |
||||
<div class="tip" v-if="ite.allocationStatus == 2 || ite.allocationStatus == 3"> |
||||
<div> |
||||
<div>货位：{{ ite.goodsAllocationName }}</div> |
||||
<div class="fwhserveNub"> |
||||
<div>服务号：</div> |
||||
<div v-for="it in (ite.serveNub||[])"> |
||||
{{ it }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div |
||||
@click="checkitem(ite)" |
||||
v-if="Number(ite.enableStatus) != 2" |
||||
:class=" |
||||
ite.allocationStatus == 1 |
||||
? 'itembox type2' |
||||
: ite.allocationStatus == 2 |
||||
? 'itembox type3' |
||||
: ite.allocationStatus == 3 |
||||
? 'itembox type4' |
||||
: 'itembox' |
||||
" |
||||
> |
||||
<div>{{ ite.goodsAllocationName }}</div> |
||||
</div> |
||||
</el-tooltip> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
<el-dialog v-model="isshowcon" title="请选择上架类型" width="50%" center> |
||||
<span> 请选择上架类型 </span> |
||||
<template #footer> |
||||
<span class="buts"> |
||||
<el-button type="primary" @click="showupt">按服务号</el-button> |
||||
<el-button type="primary">按自编号</el-button> |
||||
<el-button type="primary">按包件</el-button> |
||||
<el-button type="primary">按托盘</el-button> |
||||
<el-button type="danger">禁用</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
<el-dialog v-model="isshowupt" title="请选择服务号类型" width="80%" center> |
||||
<div class="disbox"> |
||||
<div class="headtopscan"> |
||||
<div> |
||||
<el-select filterable v-model="checkselect" class="" placeholder="请选择仓库"> |
||||
<el-option |
||||
v-for="item in arrlist" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.name" |
||||
/> |
||||
</el-select> |
||||
<div class="inptx"> |
||||
<el-input v-model="checkregionselect" placeholder="请输入服务号" /> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<el-button type="primary">搜索</el-button> |
||||
<el-button type="primary">重置</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="tabberbox"> |
||||
<tablecmt |
||||
:columnList="columnList" |
||||
:tableData="data" |
||||
:loading="loading" |
||||
@inputTxt="inputsc" |
||||
@timeCheck="timesc" |
||||
@btnCheck="btnsc" |
||||
@selectCheck="selectsc" |
||||
@selection="selectionChange" |
||||
> |
||||
<template #default="slotProps"> |
||||
<el-button type="primary" text icon="el-icon-view" @click="addhuoj(slotProps.scope)" |
||||
>加入货位</el-button |
||||
> |
||||
</template> |
||||
</tablecmt> |
||||
</div> |
||||
</div> |
||||
<template #footer> |
||||
<span class="buts"> |
||||
<el-button type="primary">取消</el-button> |
||||
<el-button type="primary">确认</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { getVisualization, getstoreCargo } from '@/api/basicdata/basicdataGoodsShelfView'; |
||||
import { reactive, toRefs, onMounted } from 'vue'; |
||||
|
||||
let details = reactive({ |
||||
columnList: [ |
||||
{ |
||||
prop: '', |
||||
label: '序号', |
||||
type: 0, |
||||
values: '', |
||||
width: 55, |
||||
checkarr: [], |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: 'serviceNumber', |
||||
label: '服务号', |
||||
type: 2, |
||||
values: '', |
||||
width: '250', |
||||
checkarr: [], |
||||
fixed: true, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'name', |
||||
label: '顾客姓名', |
||||
type: 2, |
||||
values: '', |
||||
width: '450', |
||||
checkarr: [], |
||||
fixed: true, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'phone', |
||||
label: '顾客电话', |
||||
type: 2, |
||||
values: '', |
||||
width: '260', |
||||
checkarr: [], |
||||
fixed: true, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createtime', |
||||
label: '创建时间', |
||||
type: 4, |
||||
values: '', |
||||
width: '260', |
||||
checkarr: [], |
||||
fixed: true, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '操作', |
||||
type: 6, |
||||
values: '', |
||||
width: '190', |
||||
checkarr: [], |
||||
fixed: 'right', |
||||
hide: true, |
||||
}, |
||||
], |
||||
arrlist: [], |
||||
checkselect: 0, |
||||
checksele: 0, |
||||
checkregionselect: 0, |
||||
checkregionse: 0, |
||||
checkindex: 0, |
||||
contenbxsty: { |
||||
'--length': 1, |
||||
}, |
||||
contenarr: [], |
||||
isshowcon: false, |
||||
isshowupt: false, |
||||
checkite: {}, |
||||
loading: false, |
||||
data: [ |
||||
{ |
||||
serviceNumber: '104202103180256', |
||||
name: '内江经济技术开发区志慧家具经营部', |
||||
phone: '18989108191', |
||||
createtime: '2021-03-18 11:41:31', |
||||
}, |
||||
{ |
||||
serviceNumber: '104202103180256', |
||||
name: '内江经济技术开发区志慧家具经营部', |
||||
phone: '18989108191', |
||||
createtime: '2021-03-18 11:41:31', |
||||
}, |
||||
], |
||||
}); |
||||
onMounted(() => { |
||||
details.contenbxsty['--length'] = details.contenarr[0]?.length || 0; |
||||
initconfig(); |
||||
}); |
||||
async function initconfig() { |
||||
let res = await getstoreCargo(); |
||||
details.arrlist = res.data.data; |
||||
console.log(res.data, 'configconfigconfigconfigconfig'); |
||||
checkshelves() |
||||
} |
||||
function initpage(){ |
||||
// let warehousearr= |
||||
} |
||||
const checkcso = () => { |
||||
if (details.arrlist[details.checkselect]?.warehouseGoodsAreaVOList.length > 0) { |
||||
details.checkregionselect = 0; |
||||
details.checksele = 0; |
||||
} else { |
||||
details.checkregionselect = ''; |
||||
} |
||||
}; |
||||
const checkregion = () => { |
||||
details.checksele = 0; |
||||
checkshelves() |
||||
console.log(details.checksele, 'details.checkseledetails.checksele'); |
||||
}; |
||||
function ckindexs(index) { |
||||
details.checksele = index; |
||||
checkshelves() |
||||
} |
||||
|
||||
async function checkshelves() { |
||||
/** |
||||
* goodsAreaId 货区ID |
||||
* goodsShelfId 货架ID |
||||
*/ |
||||
let goodsAreaarr=details.arrlist[details.checkselect]['warehouseGoodsAreaVOList'][details.checkregionselect] |
||||
let goodsShelfarr=goodsAreaarr['warehouseGoodsShelfEntitieList'][details.checksele] |
||||
let data = { |
||||
goodsAreaId: goodsAreaarr.id, |
||||
goodsShelfId: goodsShelfarr.id, |
||||
}; |
||||
const res = await getVisualization(data); // 调用异步函数获取可视化数据 |
||||
console.log(res.data, 'res.data.datares.data.datares.data.datares.data.datares.data.data'); |
||||
details.contenarr = res.data.data.reverse(); |
||||
details.contenbxsty['--length'] = details.contenarr[0]?.length || 0; |
||||
} |
||||
// checkshelves(); |
||||
// const checkshelves = async () => { |
||||
// try { |
||||
|
||||
// // 在这里处理获取到的数据 |
||||
// console.log(res); |
||||
// } catch (error) { |
||||
// // 异常处理 |
||||
// console.error(error); |
||||
// } |
||||
// }; |
||||
const showupt = () => { |
||||
console.log('112312'); |
||||
details.isshowupt = true; |
||||
}; |
||||
const addhuoj = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const btnsc = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const timesc = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const inputsc = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const selectsc = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const selectionChange = scope => { |
||||
console.log(scope); |
||||
}; |
||||
const checkitem = ite => { |
||||
switch (Number(ite.allocationStatus)) { |
||||
case 1: |
||||
details.isshowcon = true; |
||||
details.checkite = ite; |
||||
break; |
||||
case 2: |
||||
details.isshowcon = true; |
||||
details.checkite = ite; |
||||
break; |
||||
case 3: |
||||
break; |
||||
} |
||||
}; |
||||
const { |
||||
index, |
||||
checkindex, |
||||
data, |
||||
checksele, |
||||
loading, |
||||
checkregionse, |
||||
isshowupt, |
||||
columnList, |
||||
isshowcon, |
||||
arrlist, |
||||
checkselect, |
||||
checkregionselect, |
||||
contenbxsty, |
||||
contenarr, |
||||
} = toRefs(details); |
||||
</script> |
||||
<style lang="scss"> |
||||
.fwhserveNub { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.disbox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
.headtopscan { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding-bottom: 10px; |
||||
border-bottom: 1px solid #dbdbdb; |
||||
> div:nth-of-type(1) { |
||||
display: flex; |
||||
align-items: center; |
||||
.inptx { |
||||
width: 260px; |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
> div:nth-of-type(2) { |
||||
margin-top: 15px; |
||||
} |
||||
} |
||||
.tabberbox { |
||||
} |
||||
} |
||||
:root { |
||||
--boxcolor: #adadad; |
||||
} |
||||
.mabx { |
||||
height: 70vh; |
||||
padding: 10px; |
||||
// box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
.contentbx { |
||||
width: calc(150 * var(--length) * 1px); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
border: 1.5px solid var(--boxcolor); |
||||
background-color: #fff; |
||||
.headtop { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.itemwbox { |
||||
height: 90px; |
||||
// border-right: 1.5px solid #adadad; |
||||
&:nth-last-child(1) { |
||||
.itemmibox { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
.itemmibox { |
||||
height: 90px; |
||||
width: 150px; |
||||
border-bottom: 1.5px solid var(--boxcolor); |
||||
border-right: 1.5px solid var(--boxcolor); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
color: rgba(237, 25, 25); |
||||
&:nth-last-child(1) { |
||||
border-right: 0; |
||||
} |
||||
} |
||||
} |
||||
> div { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
.itembox { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
font-size: 14px; |
||||
} |
||||
.type1 { |
||||
background-color: #fff !important; |
||||
} |
||||
.type2 { |
||||
background-color: rgba(30, 183, 98, 0.3) !important; |
||||
} |
||||
.type3 { |
||||
background-color: rgba(237, 25, 25, 0.3) !important; |
||||
} |
||||
.type4 { |
||||
background-color: rgba(255, 15, 15, 0.3) !important; |
||||
} |
||||
} |
||||
.tip { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
} |
||||
.quybox { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 20px; |
||||
box-sizing: border-box; |
||||
.liebs { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding-bottom: 15px; |
||||
// width: 6000px; |
||||
width: 100%; |
||||
} |
||||
.item { |
||||
margin-right: 10px; |
||||
padding: 5px 10px; |
||||
box-sizing: border-box; |
||||
background-color: skyblue; |
||||
border-radius: 30px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
} |
||||
.xz { |
||||
background-color: #b345f1 !important; |
||||
} |
||||
} |
||||
.head_top { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
padding: 10px; |
||||
box-sizing: border-box; |
||||
justify-content: space-between; |
||||
> div:nth-of-type(1) { |
||||
.regionsele { |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
> .tips { |
||||
display: flex; |
||||
align-items: center; |
||||
> div { |
||||
margin-left: 20px; |
||||
} |
||||
.def { |
||||
color: rgb(30, 159, 255); |
||||
font-weight: 600; |
||||
} |
||||
.red { |
||||
color: rgb(255, 87, 34); |
||||
font-weight: 600; |
||||
} |
||||
.green { |
||||
color: rgb(95, 184, 120); |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue