11/9 根据取货架查看摆货层及货位1.0

src/api/basic/workPlace/SysWorkplaceLayer.js

@@ -33,3 +33,12 @@ export function deleteLayer(query) {
     data: query
   });
 }
+
+
+export function getListByFreightCode(query) {
+  return axios({
+    url: "/udiwms/WorkplaceLayer/getListByFreightCode",
+    method: "get",
+    params: query
+  });
+}

src/components/ShelfDisplay/index.vue

@@ -1,21 +1,27 @@
 <template>
   <div class="shelf">
-    <div
-      v-for="(row, rowIndex) in shelfData"
-      :key="rowIndex"
-      class="shelf-row"
-      :style="{ display: 'flex', flexWrap: 'nowrap' ,height: `${ row.height}px`}"
-    >
+    <el-divider>取货架编号:{{ freightCode }}</el-divider>
+    <div style="margin-top: 20px">
       <div
-        v-for="(slot, slotIndex) in row.slots"
-        :key="slot.id"
-        class="shelf-slot"
-        :style="{ width: `${100 / row.slots.length}%` }"
-        @click="handleSlotClick(slot)"
+        v-for="(row, rowIndex) in shelfData"
+        :key="rowIndex"
+        class="shelf-row"
+        :style="{ display: 'flex', flexWrap: 'nowrap' ,height: `${ row.height}px`}"
       >
-        {{ slot.item }}
+        <div
+          v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
+          :key="slot.id"
+          class="shelf-slot"
+          :style="{ width: `${100 / row.sysWorkplaceQueues.length}%` }"
+          @click="handleSlotClick(slot)"
+        >
+          <div class="centered-container">
+            <span style="text-align: center;">{{ slot.code }}</span>
+          </div>
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -27,6 +33,10 @@ export default {
       type: Array,
       required: true,
     },
+    freightCode:{
+      type: Object,
+      required: true,
+    },
   },
   methods: {
     handleSlotClick(slot) {
@@ -35,7 +45,7 @@ export default {
     },
   },
   created() {
-    this.shelfData = this.shelfData.sort((a, b) => a.row - b.row);
+    this.shelfData = this.shelfData.sort((a, b) => a.id - b.id);
   }
 };
 </script>
@@ -57,4 +67,10 @@ export default {
   padding: 10px; /* Adjust padding as needed */
   text-align: center; /* Center text inside the slot */
 }
+.centered-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  /*height: 100px; !* 假设父容器的高度 *!*/
+}
 </style>

src/views/basic/workplace/addWorkplaceFreightDialog.vue

@@ -67,6 +67,19 @@
     >
       <el-table-column type="index" label="序号"></el-table-column>
       <el-table-column label="摆货层编号" prop="code"></el-table-column>
+      <!--<el-table-column label="摆货层高度" prop="height">-->
+      <!--  <template slot-scope="scope">-->
+      <!--    <div style="display: flex; justify-content: center; align-items: center; width: 80%;">-->
+      <!--      <el-input-->
+      <!--        size="small"-->
+      <!--        v-model="scope.row.height"-->
+      <!--        style="width: 100%"-->
+      <!--        type="number"-->
+      <!--        :disabled="scope.$index !== selectedIndex"-->
+      <!--      ></el-input>-->
+      <!--    </div>-->
+      <!--  </template>-->
+      <!--</el-table-column>-->
       <el-table-column label="出货槽数量" prop="queueNum">
         <template slot-scope="scope">
           <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
@@ -80,6 +93,7 @@
           </div>
         </template>
       </el-table-column>
+
       <el-table-column label="操作" fixed="right" width="100">
         <template slot-scope="scope">
           <!--<el-button-->
@@ -212,6 +226,14 @@ export default {
       })
     },
     formSubmit() {
+      let layerData = this.layerList[this.layerList.length - 1]
+      if (layerData.queueNum == null || layerData.queueNum == 0){
+        return this.$message.error("请设置当前" +layerData.code + "出货槽数量")
+      }
+      if (this.saveStatus == true){
+        return this.$message.error("请保存数据")
+      }
+
       // this.formData.workPlaceIdFk = this.workplaceId
       this.$refs['dataForm'].validate((rules) => {
         if (rules) {
@@ -282,7 +304,7 @@ export default {
     //编辑
     handleEdit(index, val) {
       if (this.saveStatus == true) {
-        this.$message.error('请先保存当前产品标识编辑')
+        this.$message.error('请先保存当前摆货层')
         return
       }
       this.selectedIndex = index

src/views/basic/workplace/rackManage.vue

@@ -0,0 +1,178 @@
+<template>
+<div>
+  <div style="padding: 20px">
+    <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>
+          <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: 20px; right: 20px;" icon="el-icon-thumb" @click="handleClick(info)">查看取货架</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <!--<el-button-group style="display: flex;margin: 0px 0 10px 90%; ">-->
+  <!--  <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>-->
+  <!--</el-button-group>-->
+  <el-dialog
+    title="查看取货架"
+    :visible.sync="ShelfDisplayFlag"
+    width="75%"
+    v-if="ShelfDisplayFlag"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <ShelfDisplay
+      :shelfData="this.layerList"
+      @slot-click="handleSlotClick"
+      :freightCode="freightCode"
+    >
+    </ShelfDisplay>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import ShelfDisplay from "@/components/ShelfDisplay";
+import { getWorkplaceFreightList } from '@/api/basic/workPlace/SysWorkplaceFreight'
+import { getListByFreightCode } from '@/api/basic/workPlace/SysWorkplaceLayer'
+
+export default {
+  components:{ShelfDisplay},
+  data() {
+    return {
+      ShelfDisplayFlag: false,
+      shelfData:[
+        {
+          id: 1,
+          height: 50,
+          slots: [
+            { id: 1, item: 'Item A1' },
+            { id: 2, item: 'Item A2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+          ]
+        },
+        {
+          row: 2,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 3,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 6,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 5,
+          height: 200,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+          ]
+        },
+        {
+          row: 4,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+      ],
+      layerList:[],
+      freightQuery: {
+        page: 1,
+        limit: 10,
+        workPlaceIdFk: "",
+        key: "",
+        // code: null,
+        // workplaceStatus: 1,
+        // workPlaceClass: 2,
+        // deptCode: this.$store.getters.locDeptCode
+      },
+      freightList:[],
+      freightCode: '',
+    }
+  },
+  methods: {
+    handleSlotClick(slot) {
+      // 在这里处理被点击的货位信息
+      console.log('被点击的货位:', slot);
+      // 你可以根据需要执行其他操作，例如更新父组件的状态或导航到另一个
+    },
+    getFreights(){
+      let query = {
+        freightCode:  this.freightCode
+      }
+      getListByFreightCode(query).then(res => {
+        this.layerList = res.data
+      })
+    },
+    getFreightList(){
+      getWorkplaceFreightList(this.freightQuery).then(res => {
+        if (res.code == 20000){
+          this.freightList = res.data.list || []
+        }else {
+          this.freightList = []
+        }
+      })
+    },
+    handleClick(info){
+      this.freightCode = info.code
+      this.ShelfDisplayFlag = true
+      this.getFreights()
+    },
+  },
+  created() {
+    this.getFreightList()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>