ISCS_Ui_Admin_Base/src/views/mes/material/inventory/index.vue

<template>
  <div>
    <!-- Tab部分 使用 el-radio-group -->
    <el-radio-group v-model="currentTab" style="margin: 5px">
      <el-radio-button
        v-for="tab in tabs"
        :key="tab.dictValue"
        :label="tab.dictValue"
      >
        <template #default>
          <span v-if="tab.dictValue=='0'" class="el-icon-menu"></span>
          <span v-if="tab.dictValue=='1'" class="el-icon-folder-checked"></span>
          <span v-if="tab.dictValue=='2'" class="el-icon-sort"></span>
          <span v-if="tab.dictValue=='3'" class="el-icon-circle-check"></span>
          <span v-if="tab.dictValue=='4'" class="el-icon-question"></span>
          <span v-if="tab.dictValue=='5'" class="el-icon-warning"></span>
          {{ tab.dictLabel }} ({{ tab.sum }})
        </template>
      </el-radio-button>
    </el-radio-group>

    <!-- 表格部分 -->
    <div class="table-container">
      <table v-show="currentTab === '0' || currentTab === '1' || currentTab === '3'">
        <thead>
        <tr>
          <th>物资类型</th>
          <th v-for="cabinet in cabinets" :key="cabinet.cabinetId">{{ cabinet.cabinetName }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(materialType, index) in materialTypes" :key="index">
          <td width="150">
            <img :src="materialType.materialsTypeIcon" alt="Material Icon" width="50" height="50"/><br>
            {{ materialType.materialsTypeName }}
          </td>
          <td style="font-size: 22px" v-for="cabinet in cabinets" :key="cabinet.cabinetId">
            {{ getCellData(materialType.materialsTypeId, cabinet.cabinetId) }}
          </td>
        </tr>
        </tbody>
      </table>

      <table v-show="currentTab === '2' || currentTab === '4' || currentTab === '5'">
        <thead>
        <tr>
          <th>物资类型</th>
          <th v-for="cabinet in cabinets" :key="cabinet.cabinetId">{{ cabinet.cabinetName }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(materialType, index) in materialTypes" :key="index">
          <td width="150">
            <img :src="materialType.materialsTypeIcon" alt="Material Icon" width="50" height="50"/><br>
            {{ materialType.materialsTypeName }}
          </td>
          <td style="font-size: 22px" v-for="cabinet in cabinets" :key="cabinet.cabinetId"
              :style="getCellStyle(materialType.materialsTypeId, cabinet.cabinetId)"
          >
            {{ getCellData(materialType.materialsTypeId, cabinet.cabinetId) }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { getInventorySum, getMaterialInventory } from '@/api/mes/statisticians'
import { getDicts } from '@/api/system/dict/data'

export default {
  dicts: ['Inventory_type'],
  data() {
    return {
      currentTab: '0', // 当前选中的Tab
      tabs: [],
      tableData0: [],//各个物资柜数据
      tableData1: [],
      tableData2: [],//各个物资柜数据
      tableData3: [],
      tableData4: [],//各个物资柜数据
      tableData5: []
    }
  },
  watch: {
    currentTab(newVal) {
      getMaterialInventory(this.currentTab).then(response => {
        console.log(response, '物资盘点')
        switch (newVal) {
          case '0':
            this.tableData0 = response.data
            break;
          case '1':
            this.tableData1 = response.data
            break;
          case '2':
            this.tableData2 = response.data
            break;
          case '3':
            this.tableData3 = response.data
            break;
          case '4':
            this.tableData4 = response.data
            break;
          case '5':
            this.tableData5 = response.data
            break;
        }

      })
    }
  },
  computed: {
    cabinets() {
      return this.tableData0||this.tableData1||this.tableData2||this.tableData3||this.tableData4||this.tableData5
    },
    materialTypes() {
      // 假设我们只取第一个物资柜的所有物资类型
      if (this.tableData0.length > 0) {
        return this.tableData0[0].materialsTypeVOList
      }else if (this.tableData1.length > 0) {
        return this.tableData1[0].materialsTypeVOList
      }else if (this.tableData2.length > 0) {
        return this.tableData2[0].materialsTypeVOList
      }else if (this.tableData3.length > 0) {
        return this.tableData3[0].materialsTypeVOList
      }else if (this.tableData4.length > 0) {
        return this.tableData4[0].materialsTypeVOList
      }else if (this.tableData5.length > 0) {
        return this.tableData5[0].materialsTypeVOList
      }
      return []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {

      getMaterialInventory(this.currentTab).then(response => {
        console.log(response, '物资盘点')
        // this.tableData = response.data
        switch (this.currentTab) {
          case '0':
            this.tableData0 = response.data
            break;
          case '1':
            this.tableData1 = response.data
            break;
          case '2':
            this.tableData2 = response.data
            break;
          case '3':
            this.tableData3 = response.data
            break;
          case '4':
            this.tableData4 = response.data
            break;
          case '5':
            this.tableData5 = response.data
            break;
        }
      })
      getInventorySum().then(response => {
        console.log(response, '总数')
        this.tabs = response.data
      })
    },
    getCellData(materialTypeId, cabinetId) {
      let tableData=null
      switch (this.currentTab) {
        case '0':
          tableData = this.tableData0
          break;
        case '1':
          tableData = this.tableData1
          break;
        case '2':
          tableData = this.tableData2
          break;
        case '3':
          tableData = this.tableData3
          break;
        case '4':
          tableData = this.tableData4
          break;
        case '5':
          tableData = this.tableData5
          break;
      }
      const cabinet = tableData.find(c => c.cabinetId === cabinetId)
      if (cabinet) {
        const materialType = cabinet.materialsTypeVOList.find(m => m.materialsTypeId === materialTypeId)
        if (materialType) {
          return materialType.number == null || materialType.number == 0 ? '-' : materialType.number
        }
      }
      return 0
    },

    getCellStyle(materialTypeId, cabinetId) {
      const number = this.getCellData(materialTypeId, cabinetId)
      if (number === null || number === 0) {
        return {}
      }

      if (this.currentTab === '2' && number > 0) {
        return { backgroundColor: 'yellow', color: 'black' }
      }
      if ((this.currentTab === '4' || this.currentTab === '5') && number > 0) {
        return { backgroundColor: 'red', color: 'black' }
      }

      return {}
    }
  }
}
</script>

<style scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 790px;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}


th {

  background-color: #f2f2f2;

}
</style>