|
|
@@ -5,14 +5,23 @@
|
|
|
<el-radio-button
|
|
|
v-for="tab in tabs"
|
|
|
:key="tab.dictValue"
|
|
|
- :label="tab.dictValue">
|
|
|
- {{ tab.dictLabel }}
|
|
|
+ :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>
|
|
|
+ <table v-show="currentTab === '0' || currentTab === '1' || currentTab === '3'">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>物资类型</th>
|
|
|
@@ -21,11 +30,33 @@
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(materialType, index) in materialTypes" :key="index">
|
|
|
- <td>
|
|
|
- <img :src="materialType.materialsTypeIcon" alt="Material Icon" width="50" height="50" />
|
|
|
+ <td width="150">
|
|
|
+ <img :src="materialType.materialsTypeIcon" alt="Material Icon" width="50" height="50"/><br>
|
|
|
{{ materialType.materialsTypeName }}
|
|
|
</td>
|
|
|
- <td v-for="cabinet in cabinets" :key="cabinet.cabinetId">
|
|
|
+ <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>
|
|
|
@@ -34,59 +65,158 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-import { getMaterialInventory } from '@/api/mes/statisticians'
|
|
|
+import { getInventorySum, getMaterialInventory } from '@/api/mes/statisticians'
|
|
|
import { getDicts } from '@/api/system/dict/data'
|
|
|
|
|
|
export default {
|
|
|
- dicts:["Inventory_type"],
|
|
|
+ dicts: ['Inventory_type'],
|
|
|
data() {
|
|
|
return {
|
|
|
currentTab: '0', // 当前选中的Tab
|
|
|
tabs: [],
|
|
|
- tableData:[],//各个物资柜数据
|
|
|
- };
|
|
|
+ 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.tableData;
|
|
|
+ return this.tableData0||this.tableData1||this.tableData2||this.tableData3||this.tableData4||this.tableData5
|
|
|
},
|
|
|
materialTypes() {
|
|
|
// 假设我们只取第一个物资柜的所有物资类型
|
|
|
- if (this.tableData.length > 0) {
|
|
|
- return this.tableData[0].materialsTypeVOList;
|
|
|
+ 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 [];
|
|
|
+ return []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
- this.getList();
|
|
|
+ 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
|
|
|
+ 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) {
|
|
|
- const cabinet = this.tableData.find(c => c.cabinetId === 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);
|
|
|
+ const materialType = cabinet.materialsTypeVOList.find(m => m.materialsTypeId === materialTypeId)
|
|
|
if (materialType) {
|
|
|
- return materialType.number;
|
|
|
+ return materialType.number == null || materialType.number == 0 ? '-' : materialType.number
|
|
|
}
|
|
|
}
|
|
|
- return 0;
|
|
|
+ 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>
|
|
|
@@ -96,17 +226,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
- width: 100%;
|
|
|
+ width: 790px;
|
|
|
border-collapse: collapse;
|
|
|
+ table-layout: fixed;
|
|
|
}
|
|
|
|
|
|
th, td {
|
|
|
border: 1px solid #ddd;
|
|
|
padding: 8px;
|
|
|
- text-align: left;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
th {
|
|
|
+
|
|
|
background-color: #f2f2f2;
|
|
|
+
|
|
|
}
|
|
|
</style>
|
