yudao-web/src/views/logistics/stock/index.vue

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
    <el-form-item label="选择巷道" prop="srmNumber">
        <el-select
          v-model="queryParams.streetId"
          placeholder="请选择巷道"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        >
        <el-option
            v-for="dict in streetList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
        />
      </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="fromDirection">
        <el-select
          v-model="queryParams.direction"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        >
        <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DIRECTION)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
        />
      </el-select>
      </el-form-item>
      
      <el-form-item ><el-button @click="handleQuery" type="primary">搜索</el-button></el-form-item>
      
    </el-form>
  </ContentWrap>
  
  <!-- 按钮墙 -->
  <ContentWrap>
      <!-- 按钮墙 -->
      
      
  <el-tabs :tab-position="top"   style="height: 100%" class="demo-tabs">
    <el-tab-pane v-for="(item,index) in columnMap" @click="handleReset(index)" :key="index" :label="item">
    
      <el-row  v-for="(row, rowIndex) in rows" 
        :key="'row-' + rowIndex" >
        <el-col :span="1">{{row +"层"}}</el-col>
      
      <el-col :span="1" v-for="(colum, colIndex) in handleReset(index).value" :key="'col-' + colIndex">
        <el-button 
        style="width: 100%;" 
          :type="getButtonType(row,colum)"
          :key="'button-' + colIndex" 
          plain
          @click="handleButtonClick(colum)"
        >
          {{ row +"-"+colum+"" }}
        </el-button>
      </el-col>
     
       
  </el-row>
    </el-tab-pane>
    
  </el-tabs>
  
  
  </ContentWrap>
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { StreetApi,StreetVO } from '@/api/logistics/street'
import { StockApi,StockVO } from '@/api/logistics/stock'
import { da, el, ro } from 'element-plus/es/locale'
import { forEach } from 'lodash-es'
import { log } from 'console'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化ist

let rows = ref(12);
let columns = ref(48);
//最大行列
const rowMax = ref(20);
const columnMax = ref(20);
const columnList = ref<number[]>([]);

let columnMap = ref<String[]>([]);

const buttons = ref<ButtonVo[]>([]);

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  streetId: 1,
  direction: 1
})
interface ButtonVo {
  id?: number; // 可选，因为可能是新创建的对象
  streetId?: number;
  orderNum?: string;
  lotnum?: string;
  checkNum?: string;
  code?: string;
  category?: string;
  count?: number;
  wmsCode?: string;
  wmsCategory?: string;
  wmsCount?: number;
  wmsTrayCode?: string;
  trayCode?: string;
  direction?: number;
  side?: number;
  row?: number;
  column?: number;
  status?: string;
  preoperationPic?: string;
  overoperationPic?: string;
  storageCode?: string;
  checkPic?: string;
  exportTime?: Date;
  subtag?: string;
  reply?: string;
  taskWmsId?: string;
  addre?: string;
  checkId?: number;
  statusVision?: string;
}
/** 搜索按钮操作 */
const handleQuery = async () => {
  columnMap.value = []
  const data = await StockApi.getStreetList(queryParams)
  
  buttons.value = data.buttons
  rows = ref(data.rows)
  columns =ref(data.columns)
  console.log(rows);
  const page = columns.value/columnMax.value
  
  for(var i = 0; i <= page; i++){
    columnMap.value.push(i*columnMax.value+1+"-"+((i+1)*columnMax.value<columns.value?(i+1)*columnMax.value:columns.value))
  }

  
}
const getButtonType = (row: number, colum: number) => {
  
  let info = "info";
  if (!buttons.value || buttons.value.length === 0) {
    return info;
  }
  for (const button of buttons.value) {
     if (button.row === row && button.column === colum) {
      // 这里可以添加你需要的逻辑
      if(button.status === '0'){

      }else if(button.status === '1'){
        info = "danger"
      }else if(button.status === '2' || button.status === '3'){
        info = "success"
      }
      break
    }
  }
  return info
}

const handleReset = (index) => {
    columnList.value = []
  const minIndex = (index) *columnMax.value +1
  const maxIndex = (index+1) * (columnMax.value)<columns.value?(index+1) * (columnMax.value):columns.value
  
  for(var i = minIndex; i <= maxIndex; i++){
    columnList.value.push(i)
  }
  return columnList
  
}

const streetList = ref<StreetVO[]>([]) // 巷道队列
/** 查询巷道列表 */
const getStringList =  () => {
 
 try {
   const data = StreetApi.getStreetList()
   data.then((res)=>{
     streetList.value = res
   })
   console.log(data);
   
   console.log(streetList);
   
 } finally {
   
 }
}


/** 初始化 **/
onMounted(() => {
  handleQuery()
  getStringList()

  handleReset(0)
})
</script>