|
|
@@ -2,38 +2,10 @@
|
|
|
<div>
|
|
|
<q-toolbar class="row items-center ">
|
|
|
<q-btn-group push class="btn-group">
|
|
|
- <q-btn-dropdown :label="$t('stock.management_setting')" icon="img:statics/warehouse/binset.png"
|
|
|
- @click="handle_setting()">
|
|
|
- <div class="row no-wrap q-pa-md">
|
|
|
- <div class="column" style="width: 140px">
|
|
|
- <q-input flat rounded class="full-width" align="left" :label="$t('stock.shelf_layer')"
|
|
|
- v-model="shelf.layer_input"></q-input>
|
|
|
- <q-input flat rounded class="full-width" align="left" :label="$t('stock.shelf_row')"
|
|
|
- v-model="shelf.row_input"></q-input>
|
|
|
- <q-input flat rounded class="full-width" align="left" :label="$t('stock.shelf_col')"
|
|
|
- v-model="shelf.col_input"></q-input>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="column" style="width: 140px">
|
|
|
- <q-input flat rounded class="full-width" align="left" :label="$t('stock.shelf.shelf_name')"
|
|
|
- v-model="shelf_name"></q-input>
|
|
|
- <q-input flat rounded class="full-width" align="left"
|
|
|
- :label="$t('stock.shelf.shelf_warehouse')" v-model="warehouse_name" readonly></q-input>
|
|
|
- <q-input flat rounded class="full-width" align="left"
|
|
|
- :label="$t('warehouse.view_warehouse.warehouse_code')" v-model="warehouse_code"
|
|
|
- readonly></q-input>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <q-btn label='确定更正' color="primary" @click="postrcl()" />
|
|
|
- </div>
|
|
|
- </q-btn-dropdown>
|
|
|
-
|
|
|
<q-btn :label="$t('stock.shelf.shelf_up')" icon="upload" @click="handleShelfUp()" />
|
|
|
<div class="self-center text-center q-px-sm">
|
|
|
{{ $t('stock.layertip') }}
|
|
|
</div>
|
|
|
-
|
|
|
<q-input dense color="primary" v-model="shelf.layer_now" style="width: 50px;" />
|
|
|
<q-btn :label="$t('stock.shelf.shelf_down')" icon="download" @click="handleShelfDown()" />
|
|
|
<q-btn :label="$t('refresh')" icon="refresh" @click="reFresh()">
|
|
|
@@ -44,10 +16,19 @@
|
|
|
</q-btn>
|
|
|
<q-separator />
|
|
|
<q-btn :label="$t('stock.edit')" icon="edit" @click="handle_edit()" />
|
|
|
+
|
|
|
</q-btn-group>
|
|
|
-
|
|
|
+ <goodscard
|
|
|
+ v-if="showInventoryDetails"
|
|
|
+ ref ="goodscard"
|
|
|
+ :col-index="select_Inventory.colIndex"
|
|
|
+ :row-index="select_Inventory.rowIndex"
|
|
|
+ :layer-index="select_Inventory.layerIndex"
|
|
|
+ :goods-data="select_Inventory.goods_data"
|
|
|
+ @close="showInventoryDetails = false"
|
|
|
+
|
|
|
+ />
|
|
|
</q-toolbar>
|
|
|
-
|
|
|
<q-page class="q-pa-md ">
|
|
|
<div class="grid-system">
|
|
|
<!-- Y轴 -->
|
|
|
@@ -76,22 +57,28 @@
|
|
|
|
|
|
<!-- 网格系统 -->
|
|
|
<div class="grid-container">
|
|
|
-
|
|
|
-
|
|
|
<!-- 内容层 -->
|
|
|
<div class="grid-content">
|
|
|
- <div v-for="(row, index) in shelf.rows" :key="`row-${rowIndex}|${shelf.layer_now}`" class="grid-row">
|
|
|
- <div v-for="col in shelf.cols" :key="`col-${colIndex}|${shelf.layer_now}`" class="grid-item">
|
|
|
- <q-btn
|
|
|
- :key="`${shelf.rows - index}-${col}-${shelf.layer_now}`"
|
|
|
- :row-index="shelf.rows - index" :col-index="col"
|
|
|
- :layer-index="shelf.layer_now"
|
|
|
- :goods-data="goodsMatrix[shelf.rows - index-1][col-1]"
|
|
|
- />
|
|
|
+ <div v-for="(row, rowIndex) in shelf.rows" :key="`row-${rowIndex}|${shelf.layer_now}`" class="grid-row">
|
|
|
+ <div v-for="(col, colIndex) in shelf.cols" :key="`col-${colIndex}|${shelf.layer_now}`" class="grid-item">
|
|
|
+ <q-btn
|
|
|
+ v-if="shouldShowButton(
|
|
|
+ shelf.rows - rowIndex,
|
|
|
+ colIndex + 1,
|
|
|
+ shelf.layer_now
|
|
|
+ )"
|
|
|
+ :key="`${shelf.rows - rowIndex}-${col}-${shelf.layer_now}`"
|
|
|
+ :style="{
|
|
|
+ width: 'var(--cell-d)',
|
|
|
+ height: 'var(--cell-d)',
|
|
|
+ backgroundColor: getBinColor(shelf.rows - rowIndex, colIndex+1, shelf.layer_now)
|
|
|
+ }"
|
|
|
+ @click="handleBinClick(shelf.rows - rowIndex, colIndex+1, shelf.layer_now)"
|
|
|
+ />
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[20, 20]"
|
|
|
content-style="font-size: 10px">
|
|
|
- {{ $t('stock.rowtip') }} {{ shelf.rows - index }}
|
|
|
- {{ $t('stock.coltip') }} {{ col }}
|
|
|
+ {{ $t('stock.rowtip') }} {{ shelf.rows - rowIndex }}
|
|
|
+ {{ $t('stock.coltip') }} {{ colIndex + 1 }}
|
|
|
</q-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -100,11 +87,16 @@
|
|
|
</div>
|
|
|
</q-page>
|
|
|
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import goodscard from 'components/goodscard.vue'
|
|
|
+
|
|
|
import { LocalStorage } from 'quasar'
|
|
|
import { getauth, postauth, putauth, deleteauth, getfile } from 'boot/axios_request'
|
|
|
|
|
|
@@ -124,33 +116,49 @@ export default {
|
|
|
cols: 29, // 控制列数
|
|
|
layers: 3, // 控制层数
|
|
|
layer_now: 1, // 当前层数
|
|
|
- row_input: "17",
|
|
|
- col_input: "29",
|
|
|
- layer_input: `3`,
|
|
|
},
|
|
|
-
|
|
|
filter: "",
|
|
|
auth_edit: false,
|
|
|
goodsMap: {}, // 坐标映射表
|
|
|
- goodsMatrix: [] // 二维数据矩阵
|
|
|
-
|
|
|
+ goodsMatrix: [] , // 二维数据矩阵
|
|
|
+
|
|
|
+ // 颜色配置
|
|
|
+ binColors: {
|
|
|
+ elevator: 'rgba(255, 215, 0, 0.5)', // 黄色半透明
|
|
|
+ storage: "#4CAF50" ,//绿色, // 蓝色低透明度
|
|
|
+ occupied: '#32CD3280', // 绿色带透明度(HEX 8位格式)
|
|
|
+ default: 'transparent' , // 完全透明
|
|
|
+ } ,
|
|
|
+ showInventoryDetails : false, // 显示库存详情
|
|
|
+ select_Inventory: {
|
|
|
+ rowIndex : 0,
|
|
|
+ colIndex : 0,
|
|
|
+ layerIndex : 0,
|
|
|
+ goods_data : {}
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
+ // 修正后的路由守卫
|
|
|
+ beforeRouteEnter(to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ // 使用 vm 访问组件实例
|
|
|
+ vm.goodsMatrix = []
|
|
|
+ vm.selectedBin = null
|
|
|
+ vm.goodsMap = {}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // beforeDestroy() {
|
|
|
+ // //清空数据
|
|
|
+
|
|
|
+ // this.goodsMatrix = []
|
|
|
+ // this.selectedBin = null
|
|
|
+ // },
|
|
|
methods: {
|
|
|
- getGoodsData(row, col) {
|
|
|
- const key = `${row}-${col}`;
|
|
|
- return this.goodsMap[key] || null;
|
|
|
- },
|
|
|
- buildGoodsMatrix() {
|
|
|
- const { rows, cols } = this.shelf;
|
|
|
- this.goodsMatrix =
|
|
|
- Array.from({ length: rows }, (_, row) =>
|
|
|
- Array.from({ length: cols }, (_, col) => {
|
|
|
- const key = `${row+1}-${col+1}`;
|
|
|
-
|
|
|
- return this.goodsMap[key] || null;
|
|
|
- })
|
|
|
- );
|
|
|
+ shouldShowButton(row, col, layer) {
|
|
|
+ const bin = this.goodsMap[`${row}-${col}-${layer}`]
|
|
|
+ // 示例：仅显示storage类型的库位
|
|
|
+ return bin?.shelf_type === 'storage'
|
|
|
+ // return ['storage', 'occupied'].includes(bin?.shelf_type) // 显示多种类型
|
|
|
},
|
|
|
getList() {
|
|
|
var _this = this;
|
|
|
@@ -158,9 +166,11 @@ export default {
|
|
|
+ '' + _this.warehouse_code + '&max_page=1000' + '&shelf_name=' + _this.shelf_name
|
|
|
, {})
|
|
|
.then(res => {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ _this.goodsMap = {};
|
|
|
+ res.results.forEach(item => {
|
|
|
+ const key = `${item.row}-${item.col}-${item.layer}`;
|
|
|
+ _this.goodsMap[key] = item;
|
|
|
+ });
|
|
|
|
|
|
_this.$q.notify({
|
|
|
message: res.detail,
|
|
|
@@ -176,34 +186,7 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- postrcl() {
|
|
|
- this.updateRow()
|
|
|
- this.updateCol()
|
|
|
- this.updateLayer()
|
|
|
- postauth(this.pathname, {
|
|
|
- warehouse_code: this.warehouse_code,
|
|
|
- warehouse_name: this.warehouse_name,
|
|
|
- shelf_name: this.shelf_name,
|
|
|
- shelf_type: 'storage',
|
|
|
- rows: this.shelf.rows,
|
|
|
- cols: this.shelf.cols,
|
|
|
- layers: this.shelf.layers,
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.$q.notify({
|
|
|
- message: res.detail,
|
|
|
- icon: 'done',
|
|
|
- color: 'positive'
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- this.$q.notify({
|
|
|
- message: err.detail,
|
|
|
- icon: 'close',
|
|
|
- color: 'negative'
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
+
|
|
|
handle_setting() {
|
|
|
if (LocalStorage.has('warehouse_code')) {
|
|
|
this.warehouse_code = LocalStorage.getItem('warehouse_code')
|
|
|
@@ -212,29 +195,27 @@ export default {
|
|
|
this.warehouse_name = LocalStorage.getItem('warehouse_name')
|
|
|
}
|
|
|
},
|
|
|
- updateRow() {
|
|
|
-
|
|
|
- const newRow = parseInt(this.shelf.row_input)
|
|
|
- if (!isNaN(newRow) && newRow > 0) {
|
|
|
- this.shelf.rows = newRow
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ // 获取货位颜色
|
|
|
+ getBinColor(row, col, layer) {
|
|
|
+ const bin = this.goodsMap[`${row}-${col}-${layer}`];
|
|
|
+
|
|
|
+ if (!bin) return this.binColors.default;
|
|
|
+ return this.binColors[bin.shelf_type] || this.binColors.default;
|
|
|
},
|
|
|
- updateCol() {
|
|
|
- const newCol = parseInt(this.shelf.col_input)
|
|
|
- if (!isNaN(newCol) && newCol > 0) {
|
|
|
- this.shelf.cols = newCol
|
|
|
- }
|
|
|
|
|
|
+ // 货位点击处理
|
|
|
+ handleBinClick(row, col, layer) {
|
|
|
+ this.select_Inventory.rowIndex = row
|
|
|
+ this.select_Inventory.colIndex = col
|
|
|
+ this.select_Inventory.layerIndex = layer
|
|
|
+ this.select_Inventory.goods_data = this.goodsMap[`${row}-${col}-${layer}`]
|
|
|
+ this.showInventoryDetails = true
|
|
|
+ console.log(this.select_Inventory)
|
|
|
+ this.$refs.goodscard.handleclick()
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
- updateLayer() {
|
|
|
- const newLayer = parseInt(this.shelf.layer_input)
|
|
|
- if (!isNaN(newLayer) && newLayer > 0) {
|
|
|
- this.shelf.layers = newLayer
|
|
|
- }
|
|
|
|
|
|
- },
|
|
|
updateCSSVariables() {
|
|
|
const root = document.documentElement
|
|
|
// 获取组件容器的实际尺寸
|
|
|
@@ -312,13 +293,20 @@ export default {
|
|
|
this.updateCSSVariables()
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
},
|
|
|
+ // 添加 beforeUnmount 生命周期
|
|
|
beforeUnmount() {
|
|
|
+ // 清理数据
|
|
|
+ this.goodsMap = {}
|
|
|
+ this.goodsMatrix = []
|
|
|
+ this.selectedBin = null
|
|
|
+
|
|
|
+ // 清理事件监听
|
|
|
window.removeEventListener('resize', this.handleResize)
|
|
|
clearTimeout(this.resizeTimer)
|
|
|
- },
|
|
|
- watch: {
|
|
|
- shelf: {
|
|
|
-
|
|
|
+
|
|
|
+ // 清理 DOM
|
|
|
+ if (this.$refs.goodscard) {
|
|
|
+ this.$refs.goodscard.$destroy()
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -484,17 +472,17 @@ export default {
|
|
|
/* 固定宽度 */
|
|
|
height: var(--cell-d);
|
|
|
|
|
|
- border: 1px solid #ddd;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
+ background: transparent;
|
|
|
transition: transform 0.2s;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
-.grid-item:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
+.q-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
flower_mr