需求：有一些告警数据，如果他们的计划编码相同则实现折叠效果，单击某行数据可以进行关闭，状态发生改变，关闭以后按钮禁用。
实现效果：目前所有告警消息都被关闭，如果未被关闭则可以进行关闭
实现代码：
<!--物料管理 -->
<template>
<div class="app-container">
<el-table
v-loading="loading"
:data="tableList"
row-key="alarmId"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="计划编码" prop="planCode" />
<el-table-column label="产品编码" prop="itemCode" />
<el-table-column label="产品名称" prop="itemName" />
<el-table-column label="缺少重量" prop="diffValue" />
<el-table-column label="关闭时间" prop="shutTime" />
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="close(scope.row)"
v-if="scope.row.dealStatus == 0"
>关闭</el-button
>
<el-button
type="text"
size="small"
v-show="scope.row.dealStatus == 1"
disabled
>已关闭</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
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;
}
},
},
};
</script>
<style lang="scss" 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-button
type="text"
size="small"
:disabled="scope.row.dealStatus === 1"
>已关闭</el-button>
所以v-show和v-if有时候达到的效果可能一样，但也不能乱使用，更何况有时候产生的效果是完全不一样的。
