udiwms-vue-frame/src/views/basic/workplace/rackManage.vue

<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: 6px; 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="shelfData"
      @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,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item A1' ,colors: [    'green']},
            { id: 2, code: 'Item A2' ,colors: [  'blue', 'green']},
            { id: 3, code: 'Item 3' ,colors: ['red', 'yellow', ]},
            { id: 4, code: 'Item 4' ,colors: ['yellow',  ]},
          ]
        },
        {
          row: 2,
          height: 80,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
            { id: 2, code: 'Item B2' ,colors: [  'yellow' ]},
            { id: 3, code: 'Item 3' ,colors: [  'blue' ]},
            { id: 4, code: 'Item 4' ,colors: ['red',  'green']},
            { id: 5, code: 'Item 3' ,colors: [  'yellow' ]},
            { id: 5, code: 'Item 3' ,colors: [  'blue' ]},
          ]
        },
        {
          row: 3,
          height: 80,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item B1' ,colors: ['red',  'green']},
            { id: 2, code: 'Item B2' ,colors: ['red', 'blue',  ]},
            { id: 3, code: 'Item 3' ,colors: [ 'green']},
            { id: 4, code: 'Item 4' ,colors: [ 'green'] },
            { id: 5, code: 'Item 3' ,colors: [ 'green']},
          ]
        },
        {
          row: 6,
          height: 80,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item B1' ,colors: ['red', 'blue', 'green']},
            { id: 2, code: 'Item B2' ,colors: ['red']},
            { id: 3, code: 'Item 3' ,colors: [ 'yellow']},
            { id: 4, code: 'Item 4' ,colors: ['red'] },
            { id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
            { id: 5, code: 'Item 3' ,colors: ['red'] },
            { id: 5, code: 'Item 3' ,colors: [ 'yellow']},
            { id: 5, code: 'Item 3' ,colors: [ 'yellow']},
            { id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
          ]
        },
        {
          row: 5,
          height: 200,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item B1',colors: [ 'yellow'] },
            { id: 2, code: 'Item B2' ,colors: [ 'yellow']},
            { id: 5, code: 'Item 3',colors: ['red']  },
            { id: 5, code: 'Item 3' ,colors: [ 'yellow']},
            { id: 5, code: 'Item 3' ,colors: [ 'yellow']},
            { id: 5, code: 'Item 3' ,colors: ['red', 'blue', 'green']},
          ]
        },
        {
          row: 4,
          height: 80,
          sysWorkplaceQueues: [
            { id: 1, code: 'Item B1' ,colors: [ 'green']},
            { id: 2, code: 'Item B2' ,colors: ['yellow'] },
            { id: 3, code: 'Item 3' ,colors: ['red'] },
            { id: 4, code: 'Item 4',colors: [ 'yellow'] },
            { id: 5, code: 'Item 3' ,colors: [ 'green']},
          ]
        },
      ],
      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>