<el-table-column
prop="operationStatus"
label="状态"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-switch active-value="ENABLE" inactive-value="DISABLE" v-model="scope.row.operationStatus" @change="handleAdStatusChange(scope.row, scope.$index)"></el-switch>
</template>
</el-table-column>
//理论上底部的js并不重要 只是我记录用法
// 处理广告状态变化
handleAdStatusChange(row, idx) {
this.handleStatusChange(row, idx, adupdatestatus, 'adId', 'adIds');
},
handleStatusChange(row, idx, updateFunction, idKey, statusKey) {
let newStatus = row.operationStatus;
let oldStatus = row.operationStatus === 'ENABLE' ? 'DISABLE' : 'ENABLE';
let otxt = idKey == 'adId' ? '广告' : '广告组'
// 复制菜单列表,避免直接修改原始数据
let oarr = JSON.parse(JSON.stringify(this.menuList));
// 收集要更新的ID
let oids = [row[idKey]]; // 使用传入的idKey来获取正确的ID
// 构造参数对象
let params = {
advertiserId: row.advertiserId,
[statusKey]: oids, // 使用传入的statusKey来确定使用adgroupIds还是adIds
operationStatus: newStatus,
};
// 调用更新函数并处理结果
updateFunction(params).then((response) => {
if (response.data.code == 0) {
this.$message({
message: '更新'+ otxt +'状态成功',
type: 'success'
});
oarr.records[idx].operationStatus = newStatus;
this.menuList = oarr;
}
}).catch((error) => {
oarr.records[idx].operationStatus = oldStatus;
this.menuList = oarr;
this.$message({
message: '更新状态失败,请重试',
type: 'error'
});
});
},