手机营销网站制作,网站建设备案和免备案的区别,wordpress 灯箱插件,画图在什么网站上做兼职需求#xff1a;有一些告警数据#xff0c;如果他们的计划编码相同则实现折叠效果#xff0c;单击某行数据可以进行关闭#xff0c;状态发生改变#xff0c;关闭以后按钮禁用。
实现效果#xff1a;目前所有告警消息都被关闭#xff0c;如果未被关闭则可以进行关闭 实现…需求有一些告警数据如果他们的计划编码相同则实现折叠效果单击某行数据可以进行关闭状态发生改变关闭以后按钮禁用。
实现效果目前所有告警消息都被关闭如果未被关闭则可以进行关闭 实现代码
!--物料管理 --
templatediv classapp-containerel-tablev-loadingloading:datatableListrow-keyalarmId:tree-props{ children: children, hasChildren: hasChildren }el-table-column label计划编码 propplanCode /el-table-column label产品编码 propitemCode /el-table-column label产品名称 propitemName /el-table-column label缺少重量 propdiffValue /el-table-column label关闭时间 propshutTime /el-table-column fixedright label操作 width200template slot-scopescopeel-buttontypetextsizesmallclickclose(scope.row)v-ifscope.row.dealStatus 0关闭/el-buttonel-buttontypetextsizesmallv-showscope.row.dealStatus 1disabled已关闭/el-button/template/el-table-column/el-tablepaginationv-showtotal 0:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSizepaginationgetList//div
/templatescript
import { alarmList, closeAlarm } from ../../../api/alarm/index;
export default {data() {return {queryParams: {pageNum: 1,pageSize: 10,},total: 0,loading: false,tableList: [],};},created() {this.getList();},methods: {async close(row) {console.log(参数, row);const obj { alarmId: row.alarmId, dealStatus: 1 };const res await closeAlarm(obj);if (res) {this.$notify({title: 成功,message: 该物料告警已被关闭,type: success,});console.log(关闭成功, res);this.getList();}},async getList() {const res await alarmList(this.queryParams);if (res) {console.log(告警记录, res);const newTableList [];res.rows.forEach((item) {const existingItem newTableList.find((newItem) newItem.planCode item.planCode);if (existingItem) {// 如果已存在相同 planCode 的项将当前项添加到其 children 数组中existingItem.children.push({alarmId: item.alarmId,planId: item.planId,planCode: item.planCode,itemId: item.itemId,itemCode: item.itemCode,itemName: item.itemName,diffValue: item.diffValue,dealStatus: item.dealStatus,createTime: item.createTime,shutTime: item.shutTime,clientIp: item.clientIp,});} else {// 如果不存在相同 planCode 的项直接添加当前项newTableList.push({alarmId: item.alarmId,planId: item.planId,planCode: item.planCode,itemId: item.itemId,itemCode: item.itemCode,itemName: item.itemName,diffValue: item.diffValue,dealStatus: item.dealStatus,createTime: item.createTime,shutTime: item.shutTime,clientIp: item.clientIp,children: [],});}});// console.log(告警记录数据结构, newTableList);this.tableList newTableList;}},},
};
/scriptstyle langscss scoped
.callback-btn {font-size: 16px;font-weight: bold;margin-top: 16px;color: red;
}
/style需要处理的就是表格数据结构如果后端没有对数据结构进行处理那我们就要自己处理了
假设这是后端返回的数据结构
[{alarmId: 1,planId: 2,planCode: DDDDDD1,itemId: 100,itemCode: CP.021.22.01,itemName: Sovbond TBBS-80GE水粉色,diffValue: 3,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 2,planId: 2,planCode: DDDDDD1,itemId: 100,itemCode: CP.021.22.01,itemName: Sovbond TBBS-80GE水粉色,diffValue: 2,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 3,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 5,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 4,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 4,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 5,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 5,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 6,planId: 2,planCode: DDDDDD1,itemId: 101,itemCode: CP.021.24.01,itemName: Sovbond TBBS-80GS,diffValue: 2,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 7,planId: 2,planCode: DDDDDD1,itemId: 103,itemCode: CP.023.21.01,itemName: Sovbond OTOS-80GE,diffValue: 6,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 8,planId: 15,planCode: 生产计划1,itemId: 732,itemCode: CP.02,itemName: 美年达,diffValue: 7,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107}
]
而我们需要得到的数据结构是这样的将planId相同的做成折叠效果实现方式在上述代码中getList方法中就已经实现了。
[{alarmId: 1,planId: 2,planCode: DDDDDD1,itemId: 100,itemCode: CP.021.22.01,itemName: Sovbond TBBS-80GE水粉色,diffValue: 3,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107,children: [{alarmId: 2,planId: 2,planCode: DDDDDD1,itemId: 100,itemCode: CP.021.22.01,itemName: Sovbond TBBS-80GE水粉色,diffValue: 2,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 6,planId: 2,planCode: DDDDDD1,itemId: 101,itemCode: CP.021.24.01,itemName: Sovbond TBBS-80GS,diffValue: 2,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 7,planId: 2,planCode: DDDDDD1,itemId: 103,itemCode: CP.023.21.01,itemName: Sovbond OTOS-80GE,diffValue: 6,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107}]},{alarmId: 3,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 5,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107,children: [{alarmId: 4,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 4,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107},{alarmId: 5,planId: 17,planCode: 生产计划2,itemId: 108,itemCode: CP.040.21.01,itemName: Sovbond TMTM-80GE,diffValue: 5,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107}]},{alarmId: 8,planId: 15,planCode: 生产计划1,itemId: 732,itemCode: CP.02,itemName: 美年达,diffValue: 7,dealStatus: 1,createTime: 2024-01-11,shutTime: 2024-01-12,clientIp: 192.168.90.107,children: []}
]
需要值得注意的时候你已关闭按钮在被关闭时需要使用v-show而不是v-if
因为
已关闭按钮的 disabled 属性是通过 v-if 条件来控制的。这样的实现方式可能会导致 Vue 在渲染时忽略 disabled 属性因为在 v-if 的条件下即使按钮处于已关闭状态它仍然存在于 DOM 中只是在用户界面上被隐藏了。
解决这个问题的一种方式是使用 v-show 指令而不是 v-if 来控制按钮的显示与隐藏。v-show 不会在元素隐藏时将其从 DOM 中移除而是使用 CSS 样式来控制显示和隐藏这样在已关闭状态下按钮依然存在于 DOM 中但用户无法与其交互。
或者将关闭按钮写成这样
el-buttontypetextsizesmall:disabledscope.row.dealStatus 1
已关闭/el-button所以v-show和v-if有时候达到的效果可能一样但也不能乱使用更何况有时候产生的效果是完全不一样的。
