This commit is contained in:
2024-02-22 15:41:26 +08:00
parent 49bbd6fcda
commit f2e8952030
11 changed files with 816 additions and 177 deletions

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2024-01-17 09:58:41
* @LastEditors: zwq
* @LastEditTime: 2024-01-23 10:02:15
* @LastEditTime: 2024-02-22 14:07:03
* @Description:
-->
<template>
@@ -12,13 +12,20 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#16DC09" style="border: none"></el-tag>
<el-tag
effect="dark"
color="#16DC09"
style="border: none">
</el-tag>
<el-tag effect="dark" color="#d3d3d3" style="border: none"></el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none"></el-tag>
<el-tag effect="dark" color="#ff0000" style="border: none">不可用</el-tag>
</div>
<div class="mainbody">
<!-- @click="showDia()" -->
<div v-for="i in listQuery.total" :key="i">
<el-row>
<el-row style="margin-bottom: 10px">
<el-col :span="24">
<el-row type="flex" class="flex-warp">
<div
@@ -27,10 +34,7 @@
(item) => item.wareRow === (i - 1) * 4 + 1
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="x-coordinate coordinate" v-if="j.wareRow === 1">
{{ j.wareColumn }}
</div>
@@ -41,9 +45,31 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
@@ -54,10 +80,7 @@
(item) => item.wareRow === (i - 1) * 4 + 2
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -65,15 +88,36 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
</el-col>
</el-row>
<el-divider class="divider"></el-divider>
<el-row>
<el-col :span="24">
<el-row type="flex" class="flex-warp">
@@ -83,10 +127,7 @@
(item) => item.wareRow === (i - 1) * 4 + 3
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -94,9 +135,31 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
@@ -105,10 +168,7 @@
class="dashboard-layout-item"
v-for="j in wareData.filter((item) => item.wareRow === i * 4)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -116,38 +176,66 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
</el-col>
</el-row>
<el-divider class="divider" v-if="i < listQuery.total"></el-divider>
</div>
</div>
<pot-dialog
ref="dialogRef"
v-if="diaVisible"
@refreshDataList="getDataList"></pot-dialog>
</div>
</template>
<script>
import basicPage from '../mixins/basic-page';
import {
getWarehouseStorehouseList,
getWarehouseStorehouseMonitoring,
exportWarehouseStorehouseExcel,
} from '@/api/asrs/warehouseStorehouse';
import potDialog from './potDialog';
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getWarehouseStorehouseList,
getDataListURL: getWarehouseStorehouseMonitoring,
exportURL: exportWarehouseStorehouseExcel,
},
listQuery: {
wareLayer: 1,
total: 0,
},
diaVisible: false,
wareData: [],
bgColor: ['#d3d3d3', '#7362F3', '#16DC09'], //空,锁,满
formConfig: [
@@ -181,7 +269,9 @@ export default {
],
};
},
components: {},
components: {
potDialog,
},
created() {},
methods: {
buttonClick(val) {
@@ -201,11 +291,17 @@ export default {
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
this.wareData = response.data;
this.listQuery.total = Math.ceil(response.data.length / 120);
this.wareData = response.data.list;
this.listQuery.total = Math.ceil(response.data.list.length / 120);
this.dataListLoading = false;
});
},
showDia() {
this.diaVisible = true;
this.$nextTick(() => {
this.$refs.dialogRef.init();
});
},
},
};
</script>
@@ -222,22 +318,12 @@ export default {
.flex-warp {
flex-wrap: nowrap;
}
.hoverDiv {
cursor: pointer;
width: 100%;
height: 30px;
&:hover {
background-color: #ff0000;
z-index: 10;
transform: scale(1.3) translateZ(0);
}
}
.dashboard-layout-item {
width: 30px;
height: 30px;
background-color: #d3d3d3;
border-radius: 2px;
margin: 0 3px 8px 0;
margin: 0 6px 8px 0;
position: relative;
&:nth-child(2n) {
margin-right: 30px;
@@ -248,7 +334,7 @@ export default {
&:last-child {
margin-right: 30px;
}
.coordinate{
.coordinate {
font-weight: bold;
font-size: 18px;
}
@@ -267,8 +353,16 @@ export default {
left: -25px;
}
}
.hoverDiv {
width: 100%;
height: 30px;
&:hover {
border: 1px #000000 dashed;
transform: scale(1.3);
}
}
.el-divider--horizontal {
margin: 10px 0;
margin: 0 0 8px 0;
}
.el-divider {
background-color: black;

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2024-01-17 09:58:41
* @LastEditors: zwq
* @LastEditTime: 2024-01-23 10:02:53
* @LastEditTime: 2024-02-22 14:08:47
* @Description:
-->
<template>
@@ -12,13 +12,20 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#16DC09" style="border: none"></el-tag>
<el-tag
effect="dark"
color="#16DC09"
style="border: none">
</el-tag>
<el-tag effect="dark" color="#d3d3d3" style="border: none"></el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none"></el-tag>
<el-tag effect="dark" color="#ff0000" style="border: none">不可用</el-tag>
</div>
<div class="mainbody">
<!-- @click="showDia()" -->
<div v-for="i in listQuery.total" :key="i">
<el-row>
<el-row style="margin-bottom: 10px">
<el-col :span="24">
<el-row type="flex" class="flex-warp">
<div
@@ -27,10 +34,7 @@
(item) => item.wareRow === (i - 1) * 4 + 1
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="x-coordinate coordinate" v-if="j.wareRow === 1">
{{ j.wareColumn }}
</div>
@@ -41,9 +45,31 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
@@ -54,10 +80,7 @@
(item) => item.wareRow === (i - 1) * 4 + 2
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -65,15 +88,36 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
</el-col>
</el-row>
<el-divider class="divider"></el-divider>
<el-row>
<el-col :span="24">
<el-row type="flex" class="flex-warp">
@@ -83,10 +127,7 @@
(item) => item.wareRow === (i - 1) * 4 + 3
)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -94,9 +135,31 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
@@ -105,10 +168,7 @@
class="dashboard-layout-item"
v-for="j in wareData.filter((item) => item.wareRow === i * 4)"
:key="j.id + j.warehouseStorehouseName"
:title="j.warehouseStorehouseName"
:style="{
background: bgColor[j.warehouseStorehouseState],
}">
:title="j.warehouseStorehouseName">
<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
{{ j.wareRow }}
</div>
@@ -116,38 +176,66 @@
placement="top-start"
:title="j.warehouseStorehouseName"
width="200"
trigger="hover"
:content="j.warehouseStorehouseName">
<div slot="reference" class="hoverDiv" />
trigger="hover">
库位状态:
{{
j.deactivate === 1
? ['空', '锁', '满'][j.warehouseStorehouseState]
: '不可用'
}}
<div v-for="(k, index) in j.productList" :key="index">
产品名称: {{ k.goodSpecificationName }}
<br />
产品数量: {{ k.number }}
</div>
<div
slot="reference"
class="hoverDiv"
:style="{
cursor:
j.deactivate === 0 || j.warehouseStorehouseState === 1
? 'not-allowed'
: 'pointer',
background:
j.deactivate === 1
? bgColor[j.warehouseStorehouseState]
: '#ff0000',
}" />
</el-popover>
</div>
</el-row>
</el-col>
</el-row>
<el-divider class="divider" v-if="i < listQuery.total"></el-divider>
</div>
</div>
<pot-dialog
ref="dialogRef"
v-if="diaVisible"
@refreshDataList="getDataList"></pot-dialog>
</div>
</template>
<script>
import basicPage from '../mixins/basic-page';
import {
getWarehouseStorehouseList,
getWarehouseStorehouseMonitoring,
exportWarehouseStorehouseExcel,
} from '@/api/asrs/warehouseStorehouse';
import potDialog from './potDialog';
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getWarehouseStorehouseList,
getDataListURL: getWarehouseStorehouseMonitoring,
exportURL: exportWarehouseStorehouseExcel,
},
listQuery: {
wareLayer: 1,
total: 0,
},
diaVisible: false,
wareData: [],
bgColor: ['#d3d3d3', '#7362F3', '#16DC09'], //空,锁,满
formConfig: [
@@ -181,10 +269,12 @@ export default {
],
};
},
components: {},
components: {
potDialog,
},
created() {
this.listQuery.warehouseId = this.bId;
},
},
methods: {
buttonClick(val) {
switch (val.btnName) {
@@ -203,11 +293,17 @@ export default {
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
this.wareData = response.data;
this.listQuery.total = Math.ceil(response.data.length / 120);
this.wareData = response.data.list;
this.listQuery.total = Math.ceil(response.data.list.length / 120);
this.dataListLoading = false;
});
},
showDia() {
this.diaVisible = true;
this.$nextTick(() => {
this.$refs.dialogRef.init();
});
},
},
};
</script>
@@ -224,22 +320,12 @@ export default {
.flex-warp {
flex-wrap: nowrap;
}
.hoverDiv {
cursor: pointer;
width: 100%;
height: 30px;
&:hover {
background-color: #ff0000;
z-index: 10;
transform: scale(1.3) translateZ(0);
}
}
.dashboard-layout-item {
width: 30px;
height: 30px;
background-color: #d3d3d3;
border-radius: 2px;
margin: 0 3px 8px 0;
margin: 0 6px 8px 0;
position: relative;
&:nth-child(2n) {
margin-right: 30px;
@@ -250,7 +336,7 @@ export default {
&:last-child {
margin-right: 30px;
}
.coordinate{
.coordinate {
font-weight: bold;
font-size: 18px;
}
@@ -269,8 +355,16 @@ export default {
left: -25px;
}
}
.hoverDiv {
width: 100%;
height: 30px;
&:hover {
border: 1px #000000 dashed;
transform: scale(1.3);
}
}
.el-divider--horizontal {
margin: 10px 0;
margin: 0 0 8px 0;
}
.el-divider {
background-color: black;

View File

@@ -0,0 +1,39 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2024-01-29 16:55:39
* @Description:
-->
<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
},
}
},
methods: {
init (id) {
this.dataForm.id = id || ''
this.visible = true
this.$nextTick(() => {
})
},
}
}
</script>