UDI
/
udiwms-vue-frame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 药房布局

Browse Source
20240912_adapter
chenhc 3 months ago
parent 97bf1809b5
commit ede56027e9
2 changed files with 156 additions and 100 deletions
Show Stats Download Patch File Download Diff File

9
src/api/basic/workPlace/SysWorkplaceFreight.js
Unescape Escape View File

@ -18,6 +18,15 @@ export function getWorkplaceFreightList(query) {
}
export function getWorkplaceFreightViewList(query) {
return axios({
url: "/udiwms/WorkplaceFreight/getListView",
method: "get",
params: query
});
}
export function deleteFreight(query) {
return axios({
url: "/udiwms/WorkplaceFreight/deleteById",

237
src/views/basic/workplace/rackManage.vue
Unescape Escape View File

@ -1,27 +1,38 @@
<template>
<div>
<div style="padding: 20px">
<!-- 下拉框 -->
<el-select v-model="freightQuery.workPlaceIdFk" @change="handleSelectChange" placeholder="请选择工位" >
<el-option
v-for="item in options"
:key="item.workplaceName"
:label="item.workplaceName"
:value="item.workplaceId">
<span style="float: left">{{ item.workplaceName }}</span>
</el-option>
</el-select>
<el-divider/>
<el-row :gutter="8" style="height: 50%">
<el-col v-for="(info, index) in freightList" :key="index" :xs="12" :sm="8" :md="8" :lg="6">
<el-card :body-style="{margin:'20px'}"
style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
>
<div style="display: flex; justify-content: space-between; align-items: center; height: 20px; /* 约为 200px 的 1/3 */" >
<p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">工位:{{ info.workPlaceName }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
<div class="shelf-container">
<div class="shelf">
<div v-for="(row, rowIndex) in freightList" :key="rowIndex" class="shelf-row">
<div
v-for="(slot, slotIndex) in row.sysWorkplaceFreightList"
:key="slot.id"
class="shelf-slot"
@click="handleClick(slot)"
>
<el-card class="slot-card">
<p>{{ slot.name }}</p>
</el-card>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; height: 66px; /* 约为 200px 的 1/3 */" >
<p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">编码:{{ info.code }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
</div>
<div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;" >
<p style="font-size: 14px;background-color: #e1f3fb;" >{{ info.remark }}</p>
<el-button type="primary" style="position: absolute; bottom: 6px; right: 20px;" icon="el-icon-thumb" @click="handleClick(info)">查看取货架</el-button>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
<!--<el-button-group style="display: flex;margin: 0px 0 10px 90%; ">-->
<!-- <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>-->
@ -46,103 +57,56 @@
<script>
import ShelfDisplay from "@/components/ShelfDisplay";
import { getWorkplaceFreightList } from '@/api/basic/workPlace/SysWorkplaceFreight'
import { getWorkplaceFreightViewList } from '@/api/basic/workPlace/SysWorkplaceFreight'
import { getListByFreightCodeView } from '@/api/basic/workPlace/SysWorkplaceLayer'
import {listPage } from '@/api/basic/workPlace/sysWorkplaceManage'
export default {
components:{ShelfDisplay},
data() {
return {
query: {
workplaceStatus: 1,
workPlaceClass: 2,
deptCode: this.$store.getters.locDeptCode
},
options: [
],
ShelfDisplayFlag: false,
shelfData:[
{
id: 1,
height: 50,
sysWorkplaceQueues: [
{ id: 1, code: 'Item A1' ,red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item A2' ,red:0,green:0,blue:0,orange:1 },
{ id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
]
},
{
row: 2,
height: 80,
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
{ id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
]
},
{
row: 3,
height: 80,
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
{ id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1 },
]
},
{
row: 6,
height: 80,
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item B2',red:0,green:0,blue:0,orange:1 },
{ id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
]
},
{
row: 5,
height: 200,
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1',red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
]
},
{
row: 4,
height: 80,
sysWorkplaceQueues: [
{ id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
{ id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
{ id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
{ id: 4, code: 'Item 4',red:0,green:0,blue:0,orange:1 },
{ id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
]
},
],
freightList:[
],
layerList:[],
list:[],
freightQuery: {
page: 1,
limit: 10,
workPlaceIdFk: "",
// page: 1,
// limit: 10,
workPlaceIdFk: null,
key: "",
// code: null,
// workplaceStatus: 1,
// workPlaceClass: 2,
// deptCode: this.$store.getters.locDeptCode
},
freightList:[],
freightCode: '',
}
},
methods: {
getList() {
listPage(this.query).then(res => {
if (res.code != 20000) {
return this.$message.error(res.message)
}
this.options = res.data.list || []
this.getFreightList()
})
},
handleSelectChange(event) {
// 调用方法获列表
this.getFreightList();
},
handleSlotClick(slot) {
// 在这里处理被点击的货位信息
console.log('被点击的货位:', slot);
@ -157,13 +121,20 @@ export default {
})
},
getFreightList(){
getWorkplaceFreightList(this.freightQuery).then(res => {
if(this.freightQuery.workPlaceIdFk == null){
if (this.options.length > 0){
this.freightQuery.workPlaceIdFk = this.options[0].workplaceId
}else return;
}
getWorkplaceFreightViewList(this.freightQuery).then(res => {
if (res.code == 20000){
this.freightList = res.data.list || []
this.freightList = res.data || []
}else {
this.freightList = []
}
})
},
handleClick(info){
this.freightCode = info.code
@ -171,12 +142,88 @@ export default {
this.getFreights()
},
},
mounted() {
},
created() {
this.getFreightList()
this.getList()
}
}
</script>
<style scoped>
.shelf-container {
width: 100%;
margin: auto;
}
.shelf {
perspective: 1000px; /* 添加透视效果 */
}
.shelf-row {
display: flex;
flex-wrap: wrap; /* 允许行内元素在必要时换行 */
margin-bottom: 40px; /* 增加行与行之间的间距 */
padding: 10px; /* 为行内容增加内边距 */
/* 使用线性渐变创建从白色到蓝色的背景 */
background: linear-gradient(to bottom, #e6f7ff, #d1e8fd);
border: 1px solid #ccc; /* 可选：为行添加边框 */
border-radius: 5px; /* 可选：为行的角落添加圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：为行添加阴影效果以增强立体感 */
}
.shelf-row > div:first-child {
}
.shelf-row .left-div {
flex-basis: 5%; /* 或者使用 width: 5%;，但 flex-basis 在 Flexbox 中更常用 */
display: flex; /* 如果需要垂直居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中，如果需要的话 */
/* 其他样式，如内边距、边框等 */
color: red;
font-weight: bold;
width: 150px; /* 设置一个具体的宽度 */
margin-right: 20px; /* 添加右边距 */
}
.shelf-row .right-div {
flex-grow: 1; /* 占据剩余的空间 */
/* 其他样式，如背景、内边距、边框等 */
display: flex; /* 如果内部有子元素需要 Flexbox 布局 */
flex-direction: column; /* 如果内部子元素需要垂直排列 */
/* 根据需要添加更多样式 */
}
.shelf-slot {
margin-right: 10px; /* 增加槽位之间的间距 */
margin-bottom: 10px; /* 增加槽位之间的间距 */
width: 150px; /* 固定槽位宽度 */
height: 100px; /* 固定槽位高度 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平居中 */
transition: transform 0.3s ease; /* 平滑的过渡效果 */
transform-style: preserve-3d; /* 保持3D变换的子元素在3D空间中 */
perspective: 800px; /* 设置透视效果，模拟3D深度 */
z-index: 10;
}
.shelf-slot:hover {
z-index: 25;
transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.1); /* 悬停时应用3D变换和放大效果 */
}
.slot-card {
width: 100%; /* 确保卡片宽度与槽位一致 */
height: 100%; /* 确保卡片高度与槽位一致 */
box-sizing: border-box; /* 确保宽度和高度包含内边距和边框 */
/* 应用从白色到淡淡绿色的线性渐变背景 */
background: linear-gradient(to bottom, white, #d4edda);
/* #d4edda 是一个浅绿色，接近于 Bootstrap 中的成功提示背景色 */
border-radius: 4px; /* 可选：为卡片添加圆角，使其看起来更柔和 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：为卡片添加阴影，增加立体感 */
}
</style>

Write Preview
Loading…
Cancel
Save