功能优化

src/views/productManagement/workorder2.vue

@@ -30,6 +30,12 @@
 				<el-button type="success" size="mini" @click="generate_workorder">生成工单</el-button>
 
 			</div>
+			<!-- 背景描述 -->
+			<div class="tag-box">
+				<el-tag style="margin-right: 10px;" v-for="(item,index) in stateCheckOptions" :key="index" :color="item.color">
+					<span style="color: black;font-weight: 600;font-size: 16px;">{{item.text}}:{{checkNumOption[index]}}</span>
+				</el-tag>
+			</div>
 			<div class="nowOrderRetainBox">
 				<span>当前首检工单：</span>
 				<span v-if="nowOrderRetainStr!==''">{{nowOrderRetainStr}}</span>
@@ -71,8 +77,8 @@
 			</div>
 		</el-dialog>
 
-		<vxe-table border resizable show-overflow ref="xTable" v-loading="loading_1" height="800" :row-config="{ isHover: true, useKey: true, keyField: 'sort' }" :data="workorder_table_data">
-			<vxe-column type="seq" width="60"></vxe-column>
+		<vxe-table :cell-style="rowClassName" border resizable show-overflow ref="xTable" v-loading="loading_1" height="800" :row-config="{ isHover: true, useKey: true, keyField: 'sort' }" :data="workorder_table_data">
+			<vxe-column type="seq" width="60" align="center"></vxe-column>
 			<!-- <vxe-column field="sort" title="序号"></vxe-column>  -->
 			<!-- <vxe-column field="id" title="1工单号"></vxe-column>  -->
 			<vxe-column title="工单号">
@@ -190,7 +196,7 @@
 			return {
 				mqttClient: null,
 				mqttClientId: emqxUtil.title + Math.random().toString(16).substring(2, 8),
-				sortable:null,
+				sortable: null,
 				search: {
 					year: new Date().getFullYear(),
 					week: 1,
@@ -255,11 +261,31 @@
 				rules: {
 					finishedPartNumber: [{ required: true, message: '成品零件号不能为空', trigger: 'blur' }],
 				},
+				// 数据检查
+				stateCheckOptions: [
+					{ state: 0, color: '#ffffff', text: '正常' },
+					{ state: 1, color: '#FA8072', text: '物料不存在' },
+					{ state: 2, color: '#EE82EE', text: '毛坯号异常' },
+					{ state: 3, color: '#FFC0CB', text: '颜色异常' },
+					{ state: 4, color: '#E6E6FA', text: '规格异常' },
+					{ state: 5, color: '#ffffd5', text: '物料不包含此描述' },
+				],
+				tableAllData: [],
+				// checkNumOption: [0, 0, 0, 0, 0, 0],
 			}
 		},
 		created() {
 			this.initMqtt();
 		},
+		computed: {
+			checkNumOption() {
+				let list = [0, 0, 0, 0, 0, 0];
+				for (let item of this.tableAllData) {
+					list[item.state]++;
+				}
+				return list;
+			}
+		},
 		mounted() {
 			this.getList()
 			// this.drag()
@@ -315,15 +341,15 @@
 								this.$nextTick(function () {
 									this.workorder_table_data = newArray;
 									const query = {
-										oldId:this.workorder_table_data[oldIndex].id,
-										oldSort:this.workorder_table_data[oldIndex].sort,
-										newId:this.workorder_table_data[newIndex].id,
-										newSort:this.workorder_table_data[newIndex].sort,
+										oldId: this.workorder_table_data[oldIndex].id,
+										oldSort: this.workorder_table_data[oldIndex].sort,
+										newId: this.workorder_table_data[newIndex].id,
+										newSort: this.workorder_table_data[newIndex].sort,
 									}
 									updateSort2(query).then((res) => {
 										if (res.code == 200 && res.data > 0) {
 											this.$notify.success('修改成功')
-										}else{
+										} else {
 											this.$notify.error('修改失败')
 										}
 									})
@@ -349,8 +375,17 @@
 						this.pagination.total = res.data.item2
 					}
 				})
+				let allQuery = query;
+				allQuery.pageNum = 1;
+				allQuery.pageSize = 1000;
+				getWorkoderList(allQuery).then((res) => {
+					if (res.code == 200) {
+						this.tableAllData = res.data.item1
+					}
+				})
 			},
 
+
 			//todo  导入生产工单
 			importworkorder() {
 				this.upload.open = true
@@ -587,7 +622,19 @@
 					this.workorderItem.previousNumber = 0;
 				}
 			},
-
+			// 更改单元格格式
+			rowClassName(item) {
+				const row = item.row;
+				const options = this.stateCheckOptions;
+				for (let index in options) {
+					if (row.state === options[index].state) {
+						return {
+							backgroundColor: options[index].color,
+						}
+					}
+				}
+				return null;
+			},
 			initMqtt() {
 				const that = this;
 				if (that.mqttClient !== null && that.mqttClient.connected) {
@@ -650,4 +697,9 @@
 		align-items: center;
 		justify-content: center;
 	}
+	.tag-box{
+		margin-top: 10px;
+		margin-bottom: 10px;
+		
+	}
 </style>