|
|
@@ -0,0 +1,112 @@
|
|
|
+<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">
|
|
|
+ {{ tab.dictLabel }}
|
|
|
+ </el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <!-- 表格部分 -->
|
|
|
+ <div class="table-container">
|
|
|
+ <table>
|
|
|
+ <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>
|
|
|
+ <img :src="materialType.materialsTypeIcon" alt="Material Icon" width="50" height="50" />
|
|
|
+ {{ materialType.materialsTypeName }}
|
|
|
+ </td>
|
|
|
+ <td v-for="cabinet in cabinets" :key="cabinet.cabinetId">
|
|
|
+ {{ getCellData(materialType.materialsTypeId, cabinet.cabinetId) }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMaterialInventory } from '@/api/mes/statisticians'
|
|
|
+import { getDicts } from '@/api/system/dict/data'
|
|
|
+
|
|
|
+export default {
|
|
|
+ dicts:["Inventory_type"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentTab: '0', // 当前选中的Tab
|
|
|
+ tabs: [],
|
|
|
+ tableData:[],//各个物资柜数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cabinets() {
|
|
|
+ return this.tableData;
|
|
|
+ },
|
|
|
+ materialTypes() {
|
|
|
+ // 假设我们只取第一个物资柜的所有物资类型
|
|
|
+ if (this.tableData.length > 0) {
|
|
|
+ return this.tableData[0].materialsTypeVOList;
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList(){
|
|
|
+ getDicts('Inventory_type').then((res) => {
|
|
|
+ this.tabs=res.data
|
|
|
+ })
|
|
|
+ getMaterialInventory(this.currentTab).then(response => {
|
|
|
+ console.log(response,'物资盘点');
|
|
|
+ this.tableData=response.data
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCellData(materialTypeId, cabinetId) {
|
|
|
+ const cabinet = this.tableData.find(c => c.cabinetId === cabinetId);
|
|
|
+ if (cabinet) {
|
|
|
+ const materialType = cabinet.materialsTypeVOList.find(m => m.materialsTypeId === materialTypeId);
|
|
|
+ if (materialType) {
|
|
|
+ return materialType.number;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.table-container {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+
|
|
|
+table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+th, td {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+th {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+</style>
|